/* Intro hero: film + text that blooms in like wet ink. hero.js drives the motion.
   No boxes: ink-brown type on the painting, lifted by a soft cream veil and halo. */

.sh{position:relative;background:var(--cream);--hero-serif:"Playfair Display","Noto Serif Devanagari",Georgia,serif}
.sh-stage{
  position:relative;overflow:hidden;
  height:100vh;height:100svh;min-height:520px;
  isolation:isolate;
}
.sh-poster,.sh-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
}
.sh-video{opacity:0;transition:opacity .8s ease}
.sh.is-ready .sh-video{opacity:1}
/* poster = first frame; once the film runs it sits above it, invisible, and only fades in to hide the loop seam */
.sh.is-ready .sh-poster{z-index:2;opacity:0;transition:opacity .9s ease}
.sh.is-ready .sh-poster.xf{opacity:1}

/* cream veil behind the text zone; strengthens a little while words are on screen */
.sh-veil{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(64% 46% at 50% 25%,rgba(251,246,234,.74),rgba(251,246,234,0) 100%),
    linear-gradient(180deg,rgba(251,246,234,.3),rgba(251,246,234,0) 34%);
}

.sh-beats{position:absolute;inset:0;pointer-events:none;z-index:4}
.sh-beat{position:absolute;left:50%;transform:translateX(-50%);width:min(900px,90vw);text-align:center;margin:0}

.sh-title,.sh-line{
  font-family:var(--hero-serif);color:#3d2208;
  text-shadow:0 0 26px rgba(253,247,230,.98),0 0 9px rgba(253,247,230,.9),0 1px 0 rgba(253,247,230,.7);
}

/* title block, upper area (clear of the translucent header) */
.sh-title{top:clamp(84px,12vh,140px);width:min(940px,92vw)}
.sh-title h1{font-size:clamp(2.7rem,1rem + 5.4vw,5.4rem);line-height:1.06;color:#3d2208;font-weight:700}
.sh-title h1 .mr{display:block;font-family:"Noto Serif Devanagari",var(--hero-serif);font-weight:700}
.sh-title h1 .en{display:block;font-style:italic;font-weight:600;color:#241d15;
  font-size:.4em;margin-top:.5em;letter-spacing:.01em}
.sh-sub{font-style:italic;font-weight:600;color:#241d15;font-size:clamp(1.1rem,.9rem + .8vw,1.6rem);margin:.8em 0 0}

/* one sentence at a time, same upper position */
.sh-line{
  top:clamp(92px,14vh,160px);width:min(860px,90vw);
  font-size:clamp(1.7rem,1rem + 2.7vw,3.05rem);line-height:1.3;font-weight:600;
}
.sh-line .w{display:inline-block;white-space:pre;will-change:filter,opacity,transform}
.sh-quote{font-style:italic;font-weight:600;color:#3d2208;font-size:clamp(1.8rem,1.1rem + 2.9vw,3.3rem)}
.sh-rule{display:block;width:clamp(90px,14vw,150px);height:2px;margin:.55em auto 0;
  background:linear-gradient(90deg,rgba(185,138,75,0),#b98a4b 30%,#b98a4b 70%,rgba(185,138,75,0));
  transform-origin:50% 50%;transform:scaleX(0)}

/* scroll cue: appears when the intro ends, sits at the foot of the film */
.sh-hint{
  position:absolute;left:50%;bottom:clamp(16px,3.5vh,32px);transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  opacity:0;text-decoration:none;padding:8px 14px 0;pointer-events:none;z-index:5;
  text-shadow:0 0 12px rgba(253,247,230,.95)
}
.sh-hint.is-on{pointer-events:auto}
.sh-hint::after{content:"";width:1px;height:34px;background:var(--ink);transform-origin:top;
  animation:sh-cue 2.4s ease-in-out infinite}
@keyframes sh-cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.sh-skip{cursor:pointer;font-family:var(--serif);
  position:absolute;right:var(--gutter);bottom:clamp(16px,3vh,28px);z-index:5;
  font-size:.82rem;color:var(--ink);background:rgba(251,247,238,.72);
  padding:6px 14px;border-radius:999px;border:1px solid var(--line);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)
}

/* ---- static fallback: no JS, reduced motion, or video failed ---- */
:is(.sh.is-static,html:not(.js) .sh) .sh-stage{height:auto;min-height:0;padding:clamp(96px,14vh,150px) 0 clamp(48px,9vh,100px)}
:is(.sh.is-static,html:not(.js) .sh) .sh-video,
:is(.sh.is-static,html:not(.js) .sh) .sh-hint,
:is(.sh.is-static,html:not(.js) .sh) .sh-skip,
:is(.sh.is-static,html:not(.js) .sh) .sh-line:not(.sh-quote){display:none}
:is(.sh.is-static,html:not(.js) .sh) .sh-beats{position:relative;inset:auto;display:flex;flex-direction:column;align-items:center;gap:34px}
:is(.sh.is-static,html:not(.js) .sh) .sh-beat{position:relative;left:auto;top:auto;bottom:auto;transform:none}
:is(.sh.is-static,html:not(.js) .sh) .sh-quote{font-size:clamp(1.5rem,1rem + 2vw,2.5rem)}
:is(.sh.is-static,html:not(.js) .sh) .sh-rule{transform:none}

@media (max-width:820px){
  .sh-title{top:clamp(132px,18vh,168px)}
  .sh-line{top:clamp(132px,18vh,168px)}
}
@media (max-height:520px) and (orientation:landscape){
  .sh-title{top:68px}.sh-title h1{font-size:2.3rem}
  .sh-line{top:68px;font-size:1.45rem}
  .sh-hint{display:none}
}