/* ERYNDOR — 01 · The Walk (hero, scroll-scrubbed trailer, never locked) */

.hero{position:relative;height:520vh;}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#050607;}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  transform:scale(1.04);filter:saturate(.72) contrast(1.06) brightness(.86);
  opacity:0;transition:opacity .9s var(--ease);will-change:transform;
}
.hero.is-live .hero__video{opacity:1;}
.hero__poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:52% 50%;background:#050607;
  transform:scale(1.05);filter:brightness(.72) saturate(.62);z-index:0;
}
.hero.is-fallback .hero__video{opacity:0 !important;}

.hero__grade{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(120% 80% at 50% 8%,rgba(6,8,10,0) 34%,rgba(5,6,8,.5) 74%,rgba(4,5,6,.95) 100%),
    linear-gradient(180deg,rgba(4,5,6,.72) 0%,rgba(4,5,6,.05) 24%,rgba(4,5,6,.12) 58%,rgba(4,5,6,.92) 100%);}

/* fog planes — parallax at different speeds in front of the video */
.fog{position:absolute;inset:-14% -10%;pointer-events:none;z-index:4;will-change:transform,opacity;
  background-repeat:no-repeat;background-size:cover;mix-blend-mode:screen;opacity:.5;}
.fog--a{
  background-image:radial-gradient(46% 30% at 22% 68%,rgba(124,138,146,.30),transparent 72%),
                   radial-gradient(40% 26% at 68% 82%,rgba(104,118,126,.26),transparent 74%);
  filter:blur(18px);
}
.fog--b{
  background-image:radial-gradient(38% 24% at 78% 48%,rgba(96,110,118,.24),transparent 70%),
                   radial-gradient(50% 22% at 34% 36%,rgba(84,96,104,.18),transparent 72%);
  filter:blur(26px);opacity:.42;
}
.fog--c{
  background-image:radial-gradient(70% 20% at 50% 96%,rgba(20,26,30,.9),transparent 76%);
  filter:blur(30px);opacity:.75;mix-blend-mode:normal;
}

.ash{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;}
.ash i{position:absolute;display:block;width:1.5px;height:1.5px;border-radius:50%;
  background:rgba(217,211,199,.55);animation:ashFall linear infinite;}
.ash i.hot{background:rgba(201,101,42,.75);box-shadow:0 0 6px rgba(201,101,42,.55);}
@keyframes ashFall{
  0%{transform:translate3d(0,-8vh,0);opacity:0}
  12%{opacity:.8}
  100%{transform:translate3d(var(--dx,3vw),108vh,0);opacity:0}
}

.marks{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:.6;transition:opacity .6s;}
.marks i{position:absolute;width:16px;height:16px;border:1px solid rgba(196,190,178,.22);}
.marks i:nth-child(1){top:88px;left:34px;border-right:0;border-bottom:0;}
.marks i:nth-child(2){top:88px;right:34px;border-left:0;border-bottom:0;}
.marks i:nth-child(3){bottom:34px;left:34px;border-right:0;border-top:0;}
.marks i:nth-child(4){bottom:34px;right:34px;border-left:0;border-top:0;}

/* scrub HUD */
.hero__hud{position:absolute;left:var(--pad);right:var(--pad);bottom:30px;display:flex;align-items:center;gap:16px;
  z-index:8;transition:opacity .6s var(--ease);}
.scrub{flex:1;height:1px;background:rgba(160,166,172,.22);position:relative;max-width:340px;}
.scrub i{position:absolute;inset:0;width:0;background:var(--ember);}
.hero__hint{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:8;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:#8C9298;
  animation:hintPulse 3.4s ease-in-out infinite;transition:opacity .5s;white-space:nowrap;}
@keyframes hintPulse{0%,100%{opacity:.42}50%{opacity:.95}}
.hero.is-ended .hero__hud,.hero.is-ended .hero__hint,.hero.is-ended .marks{opacity:0;pointer-events:none;}

/* mobile tap-to-play */
.hero__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;z-index:9;
  flex-direction:column;align-items:center;gap:16px;padding:26px 30px;}
.hero__playglyph{width:64px;height:64px;border-radius:50%;border:1px solid rgba(217,211,199,.5);
  display:grid;place-items:center;transition:all .4s;}
.hero__playglyph::after{content:'';border-left:11px solid var(--bone);border-top:7px solid transparent;
  border-bottom:7px solid transparent;margin-left:4px;}
.hero__play:hover .hero__playglyph{border-color:var(--ember);transform:scale(1.06);}
.hero__play:hover .hero__playglyph::after{border-left-color:var(--ember-hot);}
.hero__play .mono{color:#9AA0A6;letter-spacing:.24em;font-size:9px;}

/* ── trailer controls: always visible, never hidden ────────────────────── */
.vctl{position:absolute;right:var(--pad);bottom:28px;z-index:12;display:flex;gap:8px;}
.vctl__btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.2em;text-transform:uppercase;color:#C3BDB2;background:rgba(8,10,12,.72);
  border:1px solid #383D43;border-radius:100px;padding:9px 15px;min-height:34px;
  backdrop-filter:blur(8px);transition:all .35s var(--ease);}
.vctl__btn:hover{color:var(--bone);border-color:#6A7078;background:rgba(12,15,18,.9);}
.vctl__ico{display:inline-block;width:11px;height:11px;position:relative;flex:none;}
.vctl__ico--replay{border:1.4px solid currentColor;border-radius:50%;border-right-color:transparent;}
.vctl__ico--replay::after{content:'';position:absolute;top:-2px;right:-2px;border-left:4px solid currentColor;
  border-top:3px solid transparent;border-bottom:3px solid transparent;}
.vctl__ico--sound::before{content:'';position:absolute;left:0;top:3px;width:3px;height:5px;background:currentColor;}
.vctl__ico--sound::after{content:'';position:absolute;left:4px;top:1px;
  border-left:4px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;}
.vctl__btn.is-muted .vctl__ico--sound::after{border-left-color:currentColor;opacity:.4;}
.vctl__btn.is-muted{color:#7C8288;}

/* the title reveal */
.hero__title{
  position:absolute;inset:0;z-index:10;display:grid;place-items:center;text-align:center;
  opacity:0;pointer-events:none;transition:opacity 1.2s var(--ease);padding:0 var(--pad);
  background:radial-gradient(90% 70% at 50% 46%,rgba(4,5,6,.62),rgba(3,4,5,.94) 78%);
}
.hero__title.is-on{opacity:1;pointer-events:auto;}
.hero__titleart{width:min(720px,84%);margin:0 auto;}
.hero__titleart img{width:100%;filter:drop-shadow(0 20px 60px rgba(0,0,0,.9));}
.hero__titlebody{margin-top:clamp(14px,2.6vh,32px);}
.lede{font-family:var(--serif);font-size:clamp(16px,1.5vw,22px);line-height:1.5;color:#C9C3B8;letter-spacing:.01em;}
.hero__cta{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:clamp(18px,3vh,30px);flex-wrap:wrap;}
.scrollcue{margin-top:clamp(16px,2.8vh,28px);font-family:var(--mono);font-size:9px;letter-spacing:.32em;
  text-transform:uppercase;color:#5E646A;}

/* ── mobile hero ──────────────────────────────────────────────────────── */
[data-mode="mobile"] .hero{height:220vh;}
[data-mode="mobile"] .hero__video{object-position:52% 50%;}
[data-mode="mobile"] .hero__hud{left:18px;right:18px;bottom:auto;top:60px;flex-direction:column;align-items:flex-start;gap:8px;}
[data-mode="mobile"] .scrub{width:100%;max-width:none;}
[data-mode="mobile"] .hero__hint{display:none;}
[data-mode="mobile"] .hero__play{display:flex;}
[data-mode="mobile"] .hero__title{background:radial-gradient(100% 80% at 50% 44%,rgba(4,5,6,.5),rgba(3,4,5,.95) 80%);}
[data-mode="mobile"] .hero__titleart{width:96%;}
[data-mode="mobile"] .lede{font-size:15px;}
[data-mode="mobile"] .hero__cta{flex-direction:column;gap:12px;}
[data-mode="mobile"] .btn{padding:14px 20px;font-size:9.5px;width:100%;}
[data-mode="mobile"] .marks i{width:10px;height:10px;}
[data-mode="mobile"] .marks i:nth-child(1),[data-mode="mobile"] .marks i:nth-child(2){top:70px;}
[data-mode="mobile"] .hero__play .mono{white-space:nowrap;font-size:8.5px;letter-spacing:.2em;}
[data-mode="mobile"] .vctl{right:14px;bottom:16px;left:14px;flex-direction:row;justify-content:center;gap:8px;}
[data-mode="mobile"] .vctl__btn{font-size:8.5px;padding:7px 11px;min-height:30px;flex:0 0 auto;}