/* ============================================================
   Healing-Rays — cinematic scroll intro (3-act canvas scrubber)
   ============================================================ */
#cinematic {
  position: relative;
  background: #100d0a;
  --cine-act-h: 240vh;
}

/* Loader */
#cine-loader {
  position: fixed; inset: 0; z-index: 100;
  background: #100d0a; color: #f4efe0;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  gap: 1rem; transition: opacity .8s ease, visibility .8s;
}
#cine-loader.done { opacity: 0; visibility: hidden; }
.cine-loader-word {
  font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 5vw, 3rem);
  letter-spacing: .18em; font-weight: 600;
  background: linear-gradient(90deg, #8db68d, #f4efe0, #d0a86a);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: cineShimmer 2.4s ease-in-out infinite; background-size: 200% auto;
}
@keyframes cineShimmer { to { background-position: 200% center; } }
.cine-loader-bar { width: 180px; height: 3px; border-radius: 3px; background: rgba(244,239,224,.15); overflow: hidden; }
.cine-loader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #8db68d, #d0a86a); transition: width .3s ease; }
.cine-loader-pct { font-size: .7rem; letter-spacing: .3em; color: rgba(244,239,224,.6); }

/* Fixed minimal top bar over the film */
.cine-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 4vw, 3rem);
  transition: opacity .5s ease, transform .5s ease;
  mix-blend-mode: difference;
}
.cine-topbar.hidden { opacity: 0; transform: translateY(-20px); pointer-events: none; }
.cine-brand {
  font-family: 'Playfair Display', serif; color: #fff; font-weight: 700;
  letter-spacing: .22em; font-size: clamp(.85rem, 1.4vw, 1.05rem);
}
.cine-enter {
  color: #fff; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px); border-radius: 9999px; padding: .55rem 1.1rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem; transition: background .25s ease, transform .25s ease;
}
.cine-enter:hover { background: rgba(255,255,255,.16); transform: translateY(-1px); }

/* Acts */
.cine-act { position: relative; height: var(--cine-act-h); }
.cine-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #100d0a; }
.cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cine-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(130% 110% at 50% 42%, transparent 52%, rgba(16,13,10,.62) 100%),
    linear-gradient(180deg, rgba(16,13,10,.35) 0%, transparent 22%, transparent 72%, rgba(16,13,10,.55) 100%);
}
/* subtle film grain */
.cine-grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Copy overlays */
.cine-copy {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; opacity: 0; pointer-events: none;
  will-change: opacity, transform;
}
.cine-copy h2 {
  font-family: 'Playfair Display', serif; color: #fff; font-weight: 600;
  font-size: clamp(2rem, 6.2vw, 5.2rem); line-height: 1.05; letter-spacing: -.015em;
  max-width: 18ch; text-shadow: 0 6px 50px rgba(0,0,0,.55);
}
.cine-hero-brand h1 {
  font-family: 'Playfair Display', serif; color: #fff; font-weight: 700;
  font-size: clamp(3rem, 12vw, 9.5rem); line-height: .95; letter-spacing: -.02em;
  text-shadow: 0 8px 60px rgba(0,0,0,.6);
}
.cine-hero-brand p {
  color: rgba(244,239,224,.85); letter-spacing: .35em; text-transform: uppercase;
  font-size: clamp(.6rem, 1.4vw, .8rem); margin-top: 1.2rem; font-weight: 600;
}
.cine-cta { justify-content: flex-end; padding-bottom: 18vh; }
.cine-cta button {
  pointer-events: auto; cursor: pointer;
  background: #f4efe0; color: #3a2f22; font-weight: 700; font-size: .82rem;
  border: none; border-radius: 9999px; padding: .95rem 1.8rem;
  display: inline-flex; align-items: center; gap: .6rem;
  box-shadow: 0 10px 40px rgba(0,0,0,.4); transition: transform .25s ease, box-shadow .25s ease;
}
.cine-cta button:hover { transform: translateY(-2px); box-shadow: 0 16px 50px rgba(0,0,0,.5); }

/* Scroll hint */
.cine-scrollhint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 40;
  width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.5); border-radius: 14px;
  transition: opacity .5s ease;
}
.cine-scrollhint span {
  position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; border-radius: 2px;
  background: #fff; transform: translateX(-50%); animation: cineScroll 1.6s ease-in-out infinite;
}
@keyframes cineScroll { 0% { opacity: 0; top: 8px; } 40% { opacity: 1; } 80% { opacity: 0; top: 22px; } 100% { opacity: 0; } }
.cine-scrollhint.hidden { opacity: 0; }

/* Hide the shop's floating buttons while the cinematic intro is on screen */
body.in-cine #back-to-top,
body.in-cine #moodboard-toggle,
body.in-cine #scroll-progress { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

@media (max-width: 700px) {
  #cinematic { --cine-act-h: 200vh; }
}

@media (prefers-reduced-motion: reduce) {
  .cine-act { height: 100vh; }
  .cine-copy { transition: none; }
}