:root {
  --navy-deep: #03121b;
  --navy: #071c28;
  --teal: #165260;
  --gold: #d7a24d;
  --gold-soft: #f0ca79;
  --cream: #f4ead2;
  --white: #fffdf6;
  --hero-progress: 0;
  --how-progress: 0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy-deep); }
body {
  margin: 0;
  color: var(--white);
  background: var(--navy-deep);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: clip;
}
a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  z-index: 120;
  inset: 0 0 auto 0;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.4vw;
  background: linear-gradient(180deg, rgba(2, 10, 16, .88), rgba(2, 10, 16, .18), transparent);
  pointer-events: none;
}
.site-header a { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--gold-soft); }
.brand-mark { width: 40px; height: 40px; border: 1px solid rgba(240,202,121,.65); border-radius: 50%; display:grid; place-items:center; font-size: 21px; }
.brand-word { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .16em; font-size: clamp(1.45rem, 2vw, 2.15rem); }
.nav-links { display: flex; align-items:center; gap: clamp(16px, 2.4vw, 34px); font-size: .84rem; letter-spacing:.08em; text-transform: uppercase; }
.nav-links a:not(.nav-cta) { opacity:.76; }
.nav-cta { border:1px solid rgba(240,202,121,.72); border-radius:8px; padding:10px 16px; color:var(--gold-soft); backdrop-filter: blur(8px); }

.scroll-chapter { position:relative; height: 220vh; }
.sticky-stage { position:sticky; top:0; height:100vh; overflow:hidden; isolation:isolate; }
.layer { will-change: transform, opacity; }
.image-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  will-change: transform, opacity;
}

.hero-stage { background: #0a1d28; }
.hero-base,
.hero-glow {
  position: absolute;
  inset: 0;
}
.hero-base {
  background: linear-gradient(180deg, #0c2531, #0b1520 75%);
}
.hero-glow {
  background:
    radial-gradient(circle at 12% 18%, rgba(255,220,140,.44), transparent 20%),
    linear-gradient(90deg, rgba(4,16,25,.08), rgba(4,16,25,.34) 50%, rgba(4,16,25,.06));
}
.hero-sky {
  inset: -3%;
  background-image: url('assets/sky.webp');
  background-size: 106% 106%;
  background-position: center center;
  transform: translateY(var(--hero-sky-y, 0vh)) scale(var(--hero-sky-scale, 1.03));
}
.valley-back {
  inset: 0;
  background-image: url('assets/distant-valley.webp');
  background-size: 100% 100%;
  background-position: center center;
  transform: translateY(var(--hero-valley-y, 0vh)) scale(var(--hero-valley-scale, 1));
}
.castle {
  inset: 0;
  background-image: url('assets/castle.webp');
  background-size: 70% auto;
  background-position: 79% 35%;
  transform: translateY(var(--hero-castle-y, 0vh)) scale(var(--hero-castle-scale, 1));
  opacity: var(--hero-castle-opacity, 1);
  filter: drop-shadow(0 28px 24px rgba(0,0,0,.28));
}
.midground {
  inset: 0;
  background-image: url('assets/midground.webp');
  background-size: 100% 100%;
  background-position: center center;
  transform: translateY(var(--hero-midground-y, 0vh)) scale(var(--hero-midground-scale, 1));
}
.path {
  inset: 0;
  background-image: url('assets/path.webp');
  background-size: 100% 100%;
  background-position: center center;
  transform: translateY(var(--hero-path-y, 0vh)) scale(var(--hero-path-scale, 1));
}
.atmosphere {
  inset: -2%;
  background-image: url('assets/atmosphere.webp');
  background-size: 104% 104%;
  background-position: center center;
  mix-blend-mode: screen;
  opacity: var(--hero-atmosphere-opacity, .48);
  transform: translateY(var(--hero-atmosphere-y, 0vh)) scale(var(--hero-atmosphere-scale, 1.03));
}
.foreground-left {
  inset: 0;
  background-image: url('assets/foreground-left.webp');
  background-size: 100% 100%;
  background-position: center center;
  transform: translateX(var(--hero-foliage-left-x, 0vw)) scale(var(--hero-foliage-scale-left, 1));
  transform-origin: 0 100%;
  z-index: 10;
}
.foreground-right {
  inset: 0;
  background-image: url('assets/foreground-right.webp');
  background-size: 100% 100%;
  background-position: center center;
  transform: translateX(var(--hero-foliage-right-x, 0vw)) scale(var(--hero-foliage-scale-right, 1));
  transform-origin: 100% 100%;
  z-index: 10;
}

.hero-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,17,27,.18), rgba(5,17,27,.02) 40%, rgba(5,17,27,.36) 100%),
    linear-gradient(90deg, rgba(5,17,27,.48) 0 34%, rgba(5,17,27,.12) 45%, rgba(5,17,27,.08) 100%);
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  z-index: 35;
  left: 5.2vw;
  top: 19vh;
  width: min(620px, 48vw);
  transform: translateY(var(--hero-copy-y, 0vh));
  opacity: var(--hero-copy-opacity, 1);
}
.eyebrow { color: var(--gold-soft); letter-spacing: .12em; text-transform: uppercase; font-size: clamp(.7rem,.9vw,.95rem); font-weight: 700; }
.hero-copy h1,
.how-copy h2,
.prototype-tail h2 {
  margin: .6rem 0 .8rem;
  text-wrap: balance;
  font-size: clamp(3rem,6vw,6.45rem);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: -.04em;
  font-weight: 900;
}
.hero-copy h1 { text-shadow: 0 10px 35px rgba(0,0,0,.38); }
.hero-copy p {
  max-width: 560px;
  margin: 0 0 1.6rem;
  font-size: clamp(1rem,1.25vw,1.22rem);
  line-height: 1.65;
  color: rgba(255,253,246,.89);
}
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { padding:13px 20px; border-radius:7px; text-transform:uppercase; letter-spacing:.07em; font-weight:760; font-size:.78rem; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(180deg,#e8b95f,#bd8131); color:#061a25; box-shadow:0 10px 30px rgba(0,0,0,.25); }
.button-ghost { border:1px solid rgba(240,202,121,.8); color:var(--gold-soft); background:rgba(3,18,29,.28); backdrop-filter: blur(9px); }
.feature-rail {
  margin-top: 2rem;
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.88;
}
.feature-rail b { color: var(--gold-soft); margin-right: 4px; }

.fox-wrap {
  position: absolute;
  z-index: 32;
  right: 4vw;
  bottom: -2vh;
  width: min(26vw, 400px);
  height: min(74vh, 760px);
  transform: translate3d(var(--hero-fox-x, 0vw), var(--hero-fox-y, 0vh), 0) scale(var(--hero-fox-scale, 1));
  transform-origin: 50% 85%;
  opacity: var(--hero-fox-opacity, 1);
  filter: drop-shadow(-24px 26px 30px rgba(0,0,0,.26));
}
.fox-image {
  position:absolute;
  inset: 0;
  background: url('assets/fox.webp') center bottom / contain no-repeat;
}

.route { position:absolute; fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-dasharray:9 11; opacity:.8; pointer-events:none; z-index: 34; }
.route-hero { width: 42vw; height: 53vh; left: 27%; bottom: 1%; transform: translateY(var(--hero-route-y, 0vh)); opacity: var(--hero-route-opacity, .82); }
.route-pin { position:absolute; z-index: 36; width: 32px; height: 32px; display:grid; place-items:center; color:var(--gold); border:2px solid var(--gold); border-radius:50% 50% 50% 0; transform:rotate(-45deg); font-size:0; background: rgba(6,23,35,.18); backdrop-filter: blur(4px); opacity: var(--hero-pin-opacity, 1); }
.route-pin:after { content:''; width:7px; height:7px; border-radius:50%; background:var(--gold); }
.pin-one { left:32%; bottom:29%; }
.pin-two { left:44%; bottom:46%; }
.scroll-cue { position:absolute; z-index: 37; left:50%; bottom: 22px; transform: translateX(-50%); display:flex; align-items:center; gap:9px; text-transform:uppercase; font-size:.66rem; letter-spacing:.12em; opacity: var(--hero-scroll-opacity, .72); }
.mouse { width:17px; height:27px; border:1px solid rgba(255,255,255,.7); border-radius:10px; position:relative; }
.mouse:after { content:''; position:absolute; left:7px; top:5px; width:2px; height:6px; background:#fff; border-radius:2px; animation: scrollDot 1.5s infinite; }
@keyframes scrollDot { 50% { transform: translateY(6px); opacity:.2; } }

.transition-rock {
  position:absolute;
  z-index: 45;
  top: -8%;
  bottom: -12%;
  width: 58vw;
  opacity: var(--hero-rock-opacity, 0);
  filter: drop-shadow(0 0 45px rgba(0,0,0,.75));
}
.transition-rock::before,
.transition-rock::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 28% 20%, rgba(93,82,61,.28), transparent 12%),
    radial-gradient(circle at 66% 62%, rgba(94,71,44,.23), transparent 16%),
    repeating-linear-gradient(16deg, #16150f 0 28px, #1b1810 29px 55px, #090b0b 56px 78px);
}
.rock-left { left: -58vw; transform: translateX(var(--hero-rock-left-x, 0vw)); }
.rock-right { right: -58vw; transform: translateX(var(--hero-rock-right-x, 0vw)) scaleX(-1); }
.rock-left::before, .rock-left::after { clip-path: polygon(0 0, 68% 3%, 88% 15%, 77% 26%, 89% 40%, 78% 55%, 93% 72%, 72% 90%, 48% 100%, 0 100%); }
.rock-left::after { opacity: .56; mix-blend-mode: screen; background: radial-gradient(circle at 76% 24%, rgba(197,157,97,.14), transparent 24%), radial-gradient(circle at 70% 68%, rgba(83,65,41,.24), transparent 16%); }
.rock-right::before, .rock-right::after { clip-path: polygon(32% 3%, 100% 0, 100% 100%, 54% 100%, 26% 88%, 7% 68%, 21% 55%, 8% 40%, 22% 22%, 12% 10%); }
.rock-right::after { opacity: .58; mix-blend-mode: screen; background: radial-gradient(circle at 22% 28%, rgba(197,157,97,.14), transparent 22%), radial-gradient(circle at 28% 68%, rgba(83,65,41,.24), transparent 18%); }
.tunnel-reveal { position:absolute; z-index: 46; inset:0; opacity: var(--hero-tunnel-opacity, 0); pointer-events:none; }
.tunnel-arch {
  position:absolute;
  left:50%; bottom:-8%; transform: translateX(-50%);
  width: 72vw; max-width: 1060px; height: 103vh;
  background: radial-gradient(ellipse at 50% 62%, rgba(0,0,0,0) 0 28%, rgba(0,0,0,.72) 47%, rgba(0,0,0,.92) 72%);
  border-radius: 48% 48% 0 0;
}
.tunnel-light {
  position:absolute;
  left:50%; top:19%; transform: translateX(-50%);
  width: 14vw; min-width: 120px; aspect-ratio:1;
  background: radial-gradient(circle, rgba(250,225,155,.95) 0 10%, rgba(241,185,88,.45) 25%, rgba(241,185,88,0) 70%);
  filter: blur(3px);
  box-shadow: 0 0 60px rgba(241,185,88,.4);
}
.dust {
  position:absolute;
  width: 2px; height: 2px;
  background: rgba(255,226,168,.7);
  box-shadow: 0 0 12px rgba(255,226,168,.8), 0 0 28px rgba(255,226,168,.25);
  border-radius:50%;
  opacity:.7;
}
.dust-a { left: 46%; top: 18%; }
.dust-b { left: 54%; top: 27%; }
.dust-c { left: 52%; top: 33%; }

.chapter-how { height: 185vh; }
.how-stage {
  background: radial-gradient(circle at 50% 34%, #15303e 0, #08141d 48%, #030c13 100%);
}
.tunnel-world,
.how-copy,
.phone-wrap,
.route-how,
.floating-note,
.chapter-end { position: absolute; }
.tunnel-world {
  inset: 0;
  transform: scale(var(--how-tunnel-scale, 1));
}
.tunnel-world::before,
.tunnel-world::after {
  content:''; position:absolute; top:-10%; bottom:-10%; width:49%;
  background:
    radial-gradient(circle at 50% 14%, rgba(98,70,36,.25), transparent 26%),
    repeating-linear-gradient(0deg, #15110e 0 18px, #20160f 18px 36px, #100d0b 36px 52px);
  box-shadow: inset 0 0 180px rgba(0,0,0,.72);
}
.tunnel-world::before { left:-8%; clip-path: polygon(0 0, 88% 0, 76% 8%, 80% 21%, 70% 34%, 78% 50%, 68% 69%, 75% 85%, 53% 100%, 0 100%); }
.tunnel-world::after { right:-8%; clip-path: polygon(12% 0, 100% 0, 100% 100%, 47% 100%, 25% 84%, 31% 66%, 19% 47%, 28% 30%, 19% 15%); }
.stone { position:absolute; border-radius:50%; filter: blur(.2px); box-shadow: inset 0 0 20px rgba(0,0,0,.5); }
.stone-a { left:4vw; bottom:8vh; width:20vw; aspect-ratio:1; background:#19130f; }
.stone-b { right:12vw; bottom:11vh; width:11vw; aspect-ratio:1; background:#17110d; }
.stone-c { right:2vw; bottom:3vh; width:18vw; aspect-ratio:1; background:#140f0c; }
.tunnel-depth { position:absolute; inset:0; background: radial-gradient(ellipse at 50% 48%, rgba(12,26,35,.15) 0 14%, rgba(3,10,17,.1) 19%, rgba(0,0,0,.56) 36%, rgba(0,0,0,.92) 72%); }
.lantern { position:absolute; left:10vw; bottom:13vh; width:86px; height:128px; border-radius:22px; border:2px solid rgba(146,114,68,.85); box-shadow:0 0 44px rgba(231,178,86,.22); opacity:var(--how-lantern-opacity,.8); }
.lantern::before { content:''; position:absolute; inset:-20px 24px auto; height:24px; border:2px solid rgba(146,114,68,.8); border-bottom:none; border-radius:20px 20px 0 0; }
.lantern span { position:absolute; inset:14px; border-radius:16px; background: radial-gradient(circle at 50% 48%, #fff0bc 0 12%, #f7d986 25%, rgba(247,217,134,.1) 50%, transparent 62%); box-shadow:0 0 48px rgba(247,217,134,.45); }

.how-copy {
  z-index: 12;
  left: 6vw;
  top: 18vh;
  width: min(520px, 39vw);
  opacity: var(--how-copy-opacity, 0);
  transform: translateY(var(--how-copy-y, 2vh));
}
.how-copy h2 { font-size: clamp(3rem, 5.3vw, 5.8rem); }
.how-intro { max-width: 510px; font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.82); }
.micro-facts { margin-top:1.6rem; display:flex; gap:10px; flex-wrap:wrap; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; }
.micro-facts span { padding:9px 12px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }

.phone-wrap {
  z-index: 14;
  left: 54%; top: var(--phone-y, 50%);
  transform: translate(-50%, -50%) rotate(var(--phone-rotation, -6deg)) scale(var(--phone-scale, .92));
  width: min(27vw, 340px); aspect-ratio: 0.5;
}
.phone-glow { position:absolute; inset:16% -28% 12%; background:radial-gradient(circle,rgba(66,181,187,.22),transparent 67%); filter:blur(20px); }
.phone { position:absolute; inset:0; background:#050709; border:3px solid #343c42; border-radius:44px; padding:10px; box-shadow:inset 0 0 0 2px #0f1519, inset 0 0 0 7px #020304; }
.phone-island { position:absolute; z-index:8; width:31%; height:24px; left:34.5%; top:15px; background:#000; border-radius:15px; }
.screen { position:absolute; inset:13px; border-radius:34px; overflow:hidden; background:linear-gradient(#072231,#031117); border:1px solid #172f38; }
.screen::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 29%,rgba(25,155,171,.2),transparent 35%), repeating-linear-gradient(0deg, transparent 0 34px, rgba(255,255,255,.015) 35px); pointer-events:none; }
.screen-top { position:absolute; z-index:5; top:15px; left:18px; right:18px; display:flex; justify-content:space-between; font-size:10px; color:#d7e4e4; }
.screen-panel { position:absolute; inset:12% 9% 10%; display:flex; flex-direction:column; align-items:center; text-align:center; transition:opacity .35s ease, transform .35s ease; }
.screen-panel h3 { font-family:Georgia,serif; color:var(--gold-soft); font-size:clamp(1.1rem,2vw,1.7rem); margin:6px 0 12px; }
.screen-panel p { font-size:clamp(.67rem,.9vw,.87rem); line-height:1.5; color:#dbe7e4; margin:12px 0; }
.screen-kicker { font-size:9px; letter-spacing:.18em; color:#7ac7cd; margin-top:8px; }
.scan-panel { opacity: var(--scan-opacity,1); transform: translateY(var(--scan-y,0px)); }
.clue-panel { opacity: var(--clue-opacity,0); transform: translateY(var(--clue-y,18px)); }
.scanner-frame { width:80%; aspect-ratio:1; border:1px solid rgba(240,202,121,.7); border-radius:13px; padding:11%; position:relative; background:rgba(0,0,0,.26); box-shadow:inset 0 0 35px rgba(25,166,179,.12); }
.scan-line { position:absolute; left:7%; right:7%; height:2px; top:13%; background:#62edf1; box-shadow:0 0 12px #62edf1; animation:scan 2.2s ease-in-out infinite; }
@keyframes scan { 50% { top:83%; } }
.qr-faux { position:relative; width:100%; height:100%; background:conic-gradient(from 90deg at 20% 20%,#e6dfc8 0 25%,transparent 0 50%,#e6dfc8 0 75%,transparent 0) 0 0/22px 22px,conic-gradient(from 180deg at 70% 70%,transparent 0 25%,#e6dfc8 0 50%,transparent 0 75%,#e6dfc8 0) 7px 9px/18px 18px; filter:contrast(1.2); }
.qr-faux::before,
.qr-faux::after,
.qr-faux i:nth-child(1) { content:''; position:absolute; width:25%; aspect-ratio:1; border:6px solid #e6dfc8; background:#06131a; box-shadow:inset 0 0 0 5px #06131a, inset 0 0 0 9px #e6dfc8; }
.qr-faux::before { left:0; top:0; }
.qr-faux::after { right:0; top:0; }
.qr-faux i:nth-child(1) { left:0; bottom:0; }
.collectible-badge { width:82px; height:82px; border-radius:50%; display:grid; place-items:center; margin-top:24%; font-size:36px; color:#aaf6ff; background:radial-gradient(circle,#2a8395,#0b3545 66%,#07212c); border:1px solid #d6b864; box-shadow:0 0 32px rgba(94,214,227,.35); }
.clue-panel button { margin-top:auto; margin-bottom:12%; border:1px solid var(--gold); background:linear-gradient(#dca84d,#9e6a25); color:#06131a; border-radius:7px; padding:10px 12px; text-transform:uppercase; font-weight:800; font-size:10px; letter-spacing:.08em; }
.phone-tabs { position:absolute; z-index:5; left:8%; right:8%; bottom:13px; display:flex; justify-content:space-between; color:#bdc9c6; font-size:9px; }

.route-how { z-index:8; right:3%; top:8%; width:30vw; height:74vh; stroke:var(--gold); stroke-dashoffset:var(--route-how-dash, 310); }
.floating-note { z-index:12; right:8vw; padding:12px 17px; background:#d9c49a; color:#2b261d; font-family:Georgia,serif; font-style:italic; transform:rotate(-3deg); box-shadow:0 14px 35px rgba(0,0,0,.25); opacity:var(--note-one-opacity, 0); }
.note-one { top:26vh; }
.note-two { top:34vh; right:5vw; transform:rotate(2deg); opacity:var(--note-two-opacity, 0); }
.chapter-end { z-index:20; left:50%; bottom:4vh; transform:translateX(-50%); display:flex; gap:12px; align-items:center; text-transform:uppercase; letter-spacing:.08em; font-size:.66rem; color:rgba(255,255,255,.6); opacity:var(--chapter-end-opacity, 0); }
.chapter-end b { color:var(--gold-soft); }

.prototype-tail {
  min-height: 75vh;
  display:grid;
  place-items:center;
  padding:10vh 8vw;
  background: radial-gradient(circle at 50% 0,#0f5365 0,#06263c 35%,#031521 72%);
  text-align:center;
}
.prototype-tail > div { max-width:940px; }
.prototype-tail h2 { font-size:clamp(2.7rem,5vw,5.5rem); }
.prototype-tail p { max-width:740px; margin:0 auto; color:rgba(255,255,255,.74); line-height:1.7; font-size:1.1rem; }

@media (max-width: 880px) {
  .site-header { height:68px; padding:0 20px; }
  .nav-links a:not(.nav-cta) { display:none; }
  .nav-cta { font-size:.7rem; padding:8px 11px; }
  .brand-mark { width:31px; height:31px; }
  .brand-word { font-size:1.4rem; }

  .scroll-chapter { height: 185vh; }
  .hero-copy { left:24px; right:24px; top:14vh; width:auto; z-index:40; }
  .hero-copy h1 { font-size:clamp(3.05rem,13vw,5rem); max-width:95%; }
  .hero-copy p { max-width:75%; font-size:.95rem; }
  .feature-rail { display:none; }
  .fox-wrap { right:-6vw; bottom:-1vh; width:48vw; height:58vh; }
  .route-hero { left:10%; width:78vw; height:40vh; }
  .foreground-left, .foreground-right { inset:0; background-size:cover; }
  .castle { background-size:95% auto; background-position:82% 42%; }
  .scroll-cue span:last-child { display:none; }

  .how-copy { left:24px; right:24px; top:12vh; width:auto; }
  .how-copy h2 { font-size:clamp(3rem,13vw,5rem); }
  .how-intro { max-width:82%; font-size:.93rem; }
  .micro-facts { font-size:.76rem; }
  .phone-wrap { left:58%; top:56%; width:min(58vw,300px); }
  .floating-note { display:none; }
  .route-how { width:53vw; right:-9%; opacity:.56; }
  .chapter-end { width:88%; justify-content:center; text-align:center; }
  .chapter-end span { display:none; }
  .tunnel-world::before,.tunnel-world::after { width:52%; }
  .lantern { left:7vw; }
  .prototype-tail { padding:9vh 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behaviour: auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .hero-sky,.valley-back,.castle,.midground,.path,.atmosphere,.hero-copy,.fox-wrap,.foreground-left,.foreground-right,.phone-wrap,.tunnel-world { transform:none !important; }
  .transition-rock { display:none; }
  .tunnel-reveal { opacity:.3; }
  .scroll-cue { display:none; }
}

/* v5 hero corrections ---------------------------------------------------
   Use the approved complete hero render as the ground truth for the
   landscape. The independently generated cutouts were close in style but
   not pixel-identical, so moving the separate path caused it to float into
   the sky. The composite stays coherent while the camera, fox and overlays
   provide the depth movement. */
.brand {
  display: flex;
  align-items: center;
  height: 76px;
}
.brand-logo {
  display: block;
  width: clamp(178px, 14vw, 250px);
  height: auto;
  max-height: 70px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,.32));
}

.hero-stage {
  background: #172317;
}
.hero-composite {
  inset: -3%;
  z-index: 1;
  background-image: url('assets/hero-full.webp');
  background-size: cover;
  background-position: 50% 50%;
  transform: translate3d(var(--hero-scene-x, 0vw), var(--hero-scene-y, 0vh), 0) scale(var(--hero-scene-scale, 1.04));
  transform-origin: 54% 62%;
  filter: saturate(.95) contrast(1.02) brightness(.93);
}
.hero-glow {
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3,16,24,.76) 0%, rgba(3,16,24,.58) 25%, rgba(3,16,24,.24) 44%, rgba(3,16,24,.03) 66%, transparent 100%),
    linear-gradient(180deg, rgba(4,14,21,.26) 0%, transparent 28%, transparent 70%, rgba(3,13,18,.22) 100%);
}
.hero-atmosphere {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  opacity: var(--hero-atmosphere-opacity, .42);
  transform: translate3d(0, var(--hero-atmosphere-y, 0vh), 0);
  background:
    radial-gradient(ellipse at 12% 34%, rgba(255,211,132,.19), transparent 30%),
    radial-gradient(ellipse at 65% 48%, rgba(255,230,174,.08), transparent 22%);
  mix-blend-mode: screen;
}

/* Old independently generated scene pieces are deliberately retired from
   the live composition. Keeping the path baked into hero-full prevents it
   ever crossing the horizon or appearing in the sky. */
.hero-sky,
.valley-back,
.castle,
.midground,
.path,
.atmosphere,
.foreground-left,
.foreground-right {
  display: none !important;
}

.hero-copy {
  z-index: 35;
  top: 20vh;
  width: min(650px, 49vw);
}
.hero-copy p {
  max-width: 575px;
  text-shadow: 0 2px 16px rgba(0,0,0,.38);
}

/* Ground the fox in the scene rather than presenting it as a clean cutout
   floating above the landscape. */
.fox-wrap {
  z-index: 31;
  right: 7.2vw;
  bottom: -1.8vh;
  width: min(23.5vw, 370px);
  height: min(68vh, 700px);
  isolation: isolate;
  filter: none;
}
.fox-wrap::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 15%;
  right: 3%;
  bottom: 1.7%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(20,17,10,.62) 0 22%, rgba(20,17,10,.32) 45%, rgba(20,17,10,0) 72%);
  filter: blur(8px);
  transform: scaleX(1.15);
}
.fox-image {
  z-index: 1;
  filter:
    brightness(.90)
    saturate(.90)
    contrast(1.04)
    sepia(.035)
    drop-shadow(-10px 13px 15px rgba(20,18,11,.30));
}
.fox-wrap::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 10%;
  right: -8%;
  bottom: -1%;
  height: 9%;
  background:
    radial-gradient(ellipse at 22% 80%, rgba(44,63,22,.95) 0 11%, transparent 12%),
    radial-gradient(ellipse at 36% 83%, rgba(67,79,29,.90) 0 10%, transparent 11%),
    radial-gradient(ellipse at 54% 80%, rgba(48,66,26,.88) 0 11%, transparent 12%),
    radial-gradient(ellipse at 75% 84%, rgba(77,82,34,.76) 0 9%, transparent 10%),
    linear-gradient(180deg, transparent 0 40%, rgba(40,53,21,.52) 78%, rgba(23,33,14,.74) 100%);
  filter: blur(.25px);
  opacity: .88;
  pointer-events: none;
}

.route-hero {
  z-index: 33;
  opacity: var(--hero-route-opacity, .72);
}
.route-pin { z-index: 34; }

@media (max-width: 880px) {
  .brand { height: 62px; }
  .brand-logo { width: 158px; max-height: 56px; }
  .hero-composite {
    inset: -2%;
    background-size: cover;
    background-position: 61% 50%;
    transform-origin: 64% 64%;
  }
  .hero-glow {
    background:
      linear-gradient(180deg, rgba(3,16,24,.62) 0%, rgba(3,16,24,.22) 42%, rgba(3,16,24,.03) 66%, rgba(3,16,24,.22) 100%),
      linear-gradient(90deg, rgba(3,16,24,.50) 0%, transparent 70%);
  }
  .hero-copy { top: 13vh; }
  .hero-copy p { max-width: 82%; }
  .fox-wrap {
    right: -1vw;
    bottom: -1.4vh;
    width: min(47vw, 300px);
    height: 55vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-composite,
  .hero-atmosphere { transform: none !important; }
}

/* v6: genuine layered parallax -----------------------------------------
   Every generated layer was supplied on the same 1672 x 941 artboard.
   All layers therefore use the exact same viewport-sized box and the same
   cover algorithm. Movement is deliberately small and depth-based; this
   keeps the path attached to the terrain while restoring real parallax. */
.hero-composite { display: none !important; }
.hero-artboard {
  position: absolute;
  z-index: 1;
  inset: -4%;
  overflow: hidden;
  pointer-events: none;
}
.parallax-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  transform-origin: 50% 70%;
  will-change: transform, opacity;
}
.p-sky {
  z-index: 1;
  background-image: url('assets/sky.webp');
  transform: translate3d(var(--p-sky-x,0vw),var(--p-sky-y,0vh),0) scale(var(--p-sky-s,1.06));
}
.p-valley {
  z-index: 2;
  background-image: url('assets/distant-valley.webp');
  transform: translate3d(var(--p-valley-x,0vw),var(--p-valley-y,0vh),0) scale(var(--p-valley-s,1.04));
}
.p-castle {
  z-index: 3;
  background-image: url('assets/castle.webp');
  transform: translate3d(var(--p-castle-x,0vw),var(--p-castle-y,0vh),0) scale(var(--p-castle-s,1.04));
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.18));
}
.p-midground {
  z-index: 4;
  background-image: url('assets/midground.webp');
  transform: translate3d(var(--p-mid-x,0vw),var(--p-mid-y,0vh),0) scale(var(--p-mid-s,1.04));
}
.p-path {
  z-index: 5;
  background-image: url('assets/path.webp');
  transform-origin: 54% 100%;
  transform: translate3d(var(--p-path-x,0vw),var(--p-path-y,0vh),0) scale(var(--p-path-s,1.04));
}
.p-atmosphere {
  z-index: 7;
  background-image: url('assets/atmosphere.webp');
  mix-blend-mode: screen;
  opacity: var(--p-atmo-o,.32);
  transform: translate3d(var(--p-atmo-x,0vw),var(--p-atmo-y,0vh),0) scale(var(--p-atmo-s,1.05));
}
.p-left {
  z-index: 8;
  background-image: url('assets/foreground-left.webp');
  transform-origin: 0 100%;
  transform: translate3d(var(--p-left-x,0vw),var(--p-left-y,0vh),0) scale(var(--p-left-s,1.04));
}
.p-right {
  z-index: 9;
  background-image: url('assets/foreground-right.webp');
  transform-origin: 100% 100%;
  transform: translate3d(var(--p-right-x,0vw),var(--p-right-y,0vh),0) scale(var(--p-right-s,1.04));
}

/* A very faint ground-truth layer fills any sub-pixel gaps between moving
   transparent cutouts, but is weak enough that the visible scene is driven
   by the independent layers above rather than a zooming photograph. */
.hero-artboard::before {
  content:'';
  position:absolute;
  z-index:0;
  inset:0;
  background:url('assets/hero-full.webp') 50% 50% / cover no-repeat;
  opacity:.10;
  filter:blur(1px) brightness(.82) saturate(.9);
}

.hero-glow { z-index: 14; }
.hero-copy { z-index: 35; }
.fox-wrap { z-index: 31; }
.route-hero { z-index: 33; }
.route-pin { z-index: 34; }

/* More physical fox integration: the contact shadow belongs to the ground,
   and the nearby foliage sits in front of the boots/tail. */
.fox-wrap::before {
  left: 11%; right: 2%; bottom: 2.2%; height: 6%;
  background: radial-gradient(ellipse at center, rgba(23,20,11,.58) 0 22%, rgba(23,20,11,.28) 48%, transparent 72%);
  filter: blur(7px);
}
.fox-image {
  filter: brightness(.86) saturate(.88) contrast(1.02) sepia(.07) drop-shadow(-7px 10px 11px rgba(29,22,12,.26));
}
.fox-wrap::after {
  left: 6%; right: -12%; bottom: -1.2%; height: 11%;
  background:
    linear-gradient(104deg, transparent 0 7%, rgba(55,68,25,.9) 8% 10%, transparent 11% 15%, rgba(66,75,28,.88) 16% 18%, transparent 19% 28%, rgba(48,63,23,.9) 29% 31%, transparent 32% 43%, rgba(75,79,31,.82) 44% 46%, transparent 47%),
    linear-gradient(180deg, transparent 0 48%, rgba(43,55,21,.58) 74%, rgba(25,34,14,.74) 100%);
  opacity:.9;
}

@media (max-width: 880px) {
  .hero-artboard { inset:-3%; }
  .parallax-layer { background-position: 59% 50%; }
  .p-left,.p-right { background-position:59% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-layer { transform:none !important; }
}

/* v7 hero compositor ----------------------------------------------------
   The independently generated castle, hillside and path are not true pixel
   extractions from the master render, so stacking them produces impossible
   geography. v7 keeps the master landscape coherent and uses only additional
   foreground planes plus atmosphere for depth. This prevents the path ever
   appearing in the sky while still giving the eye real relative movement. */

.brand-logo {
  width: clamp(190px, 15vw, 270px) !important;
  max-height: 72px !important;
  filter: brightness(1.28) saturate(1.14) contrast(1.06) drop-shadow(0 3px 8px rgba(0,0,0,.38)) !important;
}

.hero-artboard {
  inset: -4.5% !important;
  overflow: hidden !important;
  background: #152319;
}
.hero-artboard::before { display:none !important; }

/* Master landscape: no detached path/castle layers. */
.p-sky {
  display:block !important;
  z-index:1 !important;
  background-image:url('assets/hero-full.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  filter:saturate(.96) contrast(1.02) brightness(.90);
  transform-origin:55% 58% !important;
  transform:translate3d(var(--p-sky-x,0vw),var(--p-sky-y,0vh),0) scale(var(--p-sky-s,1.025)) !important;
}
.p-valley,
.p-castle,
.p-midground,
.p-path { display:none !important; }

/* A light atmospheric plane can drift independently without changing the
   terrain geometry. */
.p-atmosphere {
  display:block !important;
  z-index:4 !important;
  background-image:url('assets/atmosphere.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  mix-blend-mode:screen;
  opacity:var(--p-atmo-o,.20) !important;
  transform:translate3d(var(--p-atmo-x,0vw),var(--p-atmo-y,0vh),0) scale(var(--p-atmo-s,1.035)) !important;
}

/* These are deliberately extra foreground framing planes. Their motion is
   noticeably stronger than the master landscape, which gives the scene depth
   without asking them to align with the path or castle. */
.p-left {
  display:block !important;
  z-index:18 !important;
  background-image:url('assets/foreground-left.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:0 100% !important;
  transform:translate3d(var(--p-left-x,0vw),var(--p-left-y,0vh),0) scale(var(--p-left-s,1.02)) !important;
  filter:brightness(.82) saturate(.90) contrast(1.03) drop-shadow(14px 10px 26px rgba(0,0,0,.20));
}
.p-right {
  display:block !important;
  z-index:19 !important;
  background-image:url('assets/foreground-right.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:100% 100% !important;
  transform:translate3d(var(--p-right-x,0vw),var(--p-right-y,0vh),0) scale(var(--p-right-s,1.02)) !important;
  filter:brightness(.84) saturate(.92) contrast(1.03) drop-shadow(-14px 10px 26px rgba(0,0,0,.18));
}

.hero-glow {
  z-index:22 !important;
  background:
    linear-gradient(90deg, rgba(3,14,21,.78) 0%, rgba(3,14,21,.59) 24%, rgba(3,14,21,.25) 41%, rgba(3,14,21,.04) 62%, transparent 100%),
    linear-gradient(180deg, rgba(4,14,21,.25) 0%, transparent 28%, transparent 72%, rgba(3,13,18,.18) 100%) !important;
}
.hero-copy { z-index:40 !important; }
.route-hero { z-index:36 !important; }
.route-pin { z-index:37 !important; }

/* Fox: sink it into the environment rather than treating it as a pristine
   product cutout. Lower contrast, warm reflected light, a broad ground shadow
   and foreground grasses all help it share the scene's lighting. */
.fox-wrap {
  z-index:30 !important;
  right:6.2vw !important;
  bottom:-2.8vh !important;
  width:min(22.5vw, 355px) !important;
  height:min(68vh, 690px) !important;
  isolation:isolate;
}
.fox-image {
  filter:
    brightness(.80)
    saturate(.82)
    contrast(.98)
    sepia(.075)
    drop-shadow(-4px -1px 5px rgba(245,183,91,.15))
    drop-shadow(-9px 13px 12px rgba(24,19,11,.32)) !important;
}
.fox-wrap::before {
  left:5% !important;
  right:-4% !important;
  bottom:1.8% !important;
  height:7.5% !important;
  background:radial-gradient(ellipse at center, rgba(19,16,9,.72) 0 21%, rgba(29,25,13,.46) 42%, rgba(29,25,13,0) 73%) !important;
  filter:blur(8px) !important;
  transform:scaleX(1.2) !important;
}
.fox-wrap::after {
  left:-3% !important;
  right:-13% !important;
  bottom:-1.2% !important;
  height:12.5% !important;
  background:
    linear-gradient(98deg, transparent 0 5%, rgba(50,66,24,.92) 6% 8%, transparent 9% 13%, rgba(74,78,30,.9) 14% 16%, transparent 17% 25%, rgba(46,62,22,.92) 26% 29%, transparent 30% 37%, rgba(76,82,33,.86) 38% 40%, transparent 41% 52%, rgba(47,63,23,.90) 53% 56%, transparent 57%),
    radial-gradient(ellipse at 48% 82%, rgba(54,70,25,.92) 0 13%, transparent 14%),
    linear-gradient(180deg, transparent 0 44%, rgba(45,57,21,.60) 72%, rgba(24,32,13,.82) 100%) !important;
  filter:blur(.25px) !important;
  opacity:.94 !important;
}

@media (max-width:880px) {
  .brand-logo { width:168px !important; max-height:58px !important; }
  .hero-artboard { inset:-3% !important; }
  .p-sky { background-position:60% 50% !important; }
  .p-atmosphere,.p-left,.p-right { background-position:60% 50% !important; }
  .fox-wrap { right:-1vw !important; width:min(45vw, 285px) !important; height:55vh !important; }
}

/* v8 hero compositor ----------------------------------------------------
   Uses extracted pixel layers: a stable background plate, castle cutout,
   near-ground path cutout, foreground left and foreground right cutouts,
   plus haze, fox and logo. All hero layers share the same original canvas
   and remain perfectly registered; only small depth translations/scales are
   applied. */

.hero-artboard {
  inset: -4.5% !important;
  overflow: hidden !important;
  background: #152319 !important;
}
.hero-artboard::before { display:none !important; }

.p-backplate {
  display:block !important;
  z-index:1 !important;
  background-image:url('assets/backplate.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:55% 56% !important;
  filter:saturate(.96) contrast(1.02) brightness(.92) !important;
  transform:translate3d(var(--p-back-x,0vw),var(--p-back-y,0vh),0) scale(var(--p-back-s,1.03)) !important;
}
.p-sky,
.p-valley,
.p-midground { display:none !important; }
.p-castle {
  display:block !important;
  z-index:4 !important;
  background-image:url('assets/castle-cutout.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:60% 48% !important;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.20)) !important;
  transform:translate3d(var(--p-castle-x,0vw),var(--p-castle-y,0vh),0) scale(var(--p-castle-s,1.03)) !important;
}
.p-path {
  display:block !important;
  z-index:6 !important;
  background-image:url('assets/path-cutout.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:54% 100% !important;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.10)) !important;
  transform:translate3d(var(--p-path-x,0vw),var(--p-path-y,0vh),0) scale(var(--p-path-s,1.04)) !important;
}
.p-atmosphere {
  display:block !important;
  z-index:9 !important;
  background-image:url('assets/atmosphere.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  mix-blend-mode:screen !important;
  opacity:var(--p-atmo-o,.18) !important;
  transform:translate3d(var(--p-atmo-x,0vw),var(--p-atmo-y,0vh),0) scale(var(--p-atmo-s,1.03)) !important;
}
.p-left {
  display:block !important;
  z-index:11 !important;
  background-image:url('assets/foreground-left.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:0 100% !important;
  filter:brightness(.84) saturate(.90) contrast(1.03) drop-shadow(14px 10px 26px rgba(0,0,0,.20)) !important;
  transform:translate3d(var(--p-left-x,0vw),var(--p-left-y,0vh),0) scale(var(--p-left-s,1.03)) !important;
}
.p-right {
  display:block !important;
  z-index:12 !important;
  background-image:url('assets/foreground-right.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:100% 100% !important;
  filter:brightness(.85) saturate(.91) contrast(1.03) drop-shadow(-14px 10px 26px rgba(0,0,0,.18)) !important;
  transform:translate3d(var(--p-right-x,0vw),var(--p-right-y,0vh),0) scale(var(--p-right-s,1.03)) !important;
}
.hero-glow {
  z-index:14 !important;
  background:
    linear-gradient(90deg, rgba(3,14,21,.80) 0%, rgba(3,14,21,.60) 24%, rgba(3,14,21,.26) 41%, rgba(3,14,21,.05) 62%, transparent 100%),
    linear-gradient(180deg, rgba(4,14,21,.22) 0%, transparent 30%, transparent 72%, rgba(3,13,18,.16) 100%) !important;
}
.hero-ground-occlusion {
  position:absolute;
  z-index:32;
  inset:auto 0 0 0;
  height:18vh;
  background:linear-gradient(180deg, rgba(11,20,12,0) 0%, rgba(23,34,15,.10) 28%, rgba(18,29,13,.28) 68%, rgba(10,18,10,.48) 100%);
  pointer-events:none;
}

.brand-logo {
  width: clamp(190px, 15vw, 270px) !important;
  max-height: 72px !important;
  filter: brightness(1.24) saturate(1.08) contrast(1.04) drop-shadow(0 3px 8px rgba(0,0,0,.38)) !important;
}
.hero-copy { z-index:40 !important; }
.route-hero { z-index:36 !important; }
.route-pin { z-index:37 !important; }

.fox-wrap {
  z-index:30 !important;
  right:6.2vw !important;
  bottom:-2.6vh !important;
  width:min(22.4vw, 350px) !important;
  height:min(67vh, 680px) !important;
  isolation:isolate;
}
.fox-shadow {
  position:absolute;
  left:5%; right:-4%; bottom:2.4%; height:7.6%;
  background:radial-gradient(ellipse at center, rgba(19,16,9,.72) 0 21%, rgba(29,25,13,.46) 42%, rgba(29,25,13,0) 73%);
  filter:blur(8px);
  transform:scaleX(1.2);
}
.fox-image {
  filter:
    brightness(.80)
    saturate(.82)
    contrast(.98)
    sepia(.075)
    drop-shadow(-4px -1px 5px rgba(245,183,91,.15))
    drop-shadow(-9px 13px 12px rgba(24,19,11,.32)) !important;
}
.fox-wrap::before { display:none !important; }
.fox-wrap::after {
  left:-3% !important;
  right:-13% !important;
  bottom:-1.2% !important;
  height:12.5% !important;
  background:
    linear-gradient(98deg, transparent 0 5%, rgba(50,66,24,.92) 6% 8%, transparent 9% 13%, rgba(74,78,30,.9) 14% 16%, transparent 17% 25%, rgba(46,62,22,.92) 26% 29%, transparent 30% 37%, rgba(76,82,33,.86) 38% 40%, transparent 41% 52%, rgba(47,63,23,.90) 53% 56%, transparent 57%),
    radial-gradient(ellipse at 48% 82%, rgba(54,70,25,.92) 0 13%, transparent 14%),
    linear-gradient(180deg, transparent 0 44%, rgba(45,57,21,.60) 72%, rgba(24,32,13,.82) 100%) !important;
  filter:blur(.25px) !important;
  opacity:.94 !important;
}

@media (max-width:880px) {
  .brand-logo { width:168px !important; max-height:58px !important; }
  .hero-artboard { inset:-3% !important; }
  .p-backplate, .p-castle, .p-path, .p-atmosphere, .p-left, .p-right {
    background-position:60% 50% !important;
  }
  .fox-wrap { right:-1vw !important; width:min(45vw, 285px) !important; height:55vh !important; }
}

@media (prefers-reduced-motion: reduce) {
  .p-backplate,.p-castle,.p-path,.p-atmosphere,.p-left,.p-right { transform:none !important; }
}

/* v9 perspective correction --------------------------------------------
   Castle is pulled back into the middle distance and lifted onto the hill.
   The path layer is now foreground-only: its upper half fades out so the
   distant path always belongs to the backplate and can never float above the
   hillside while scrolling. */
.p-castle {
  transform-origin: 67% 56% !important;
  transform: translate3d(var(--p-castle-x,0vw), calc(-4.8vh + var(--p-castle-y,0vh)), 0) scale(var(--p-castle-s,.82)) !important;
}
.p-path {
  transform-origin: 52% 100% !important;
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent 47%,
    rgba(0,0,0,.08) 53%,
    rgba(0,0,0,.48) 63%,
    #000 74%,
    #000 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    transparent 47%,
    rgba(0,0,0,.08) 53%,
    rgba(0,0,0,.48) 63%,
    #000 74%,
    #000 100%);
  transform: translate3d(var(--p-path-x,0vw), var(--p-path-y,0vh), 0) scale(var(--p-path-s,1)) !important;
}

@media (max-width:880px) {
  .p-castle {
    transform: translate3d(var(--p-castle-x,0vw), calc(-2.8vh + var(--p-castle-y,0vh)), 0) scale(var(--p-castle-s,.82)) !important;
  }
  .p-path {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 52%, rgba(0,0,0,.25) 62%, #000 76% 100%);
    mask-image: linear-gradient(to bottom, transparent 0 52%, rgba(0,0,0,.25) 62%, #000 76% 100%);
  }
}

/* v10: more physical approach to the tunnel transition -----------------
   The landscape is allowed to narrow naturally first, then a recognisable
   stone tunnel mouth grows out of the route instead of two black masks
   simply covering the screen. */

.hero-artboard {
  filter: brightness(var(--hero-world-brightness,1)) saturate(var(--hero-world-saturation,1));
}

.transition-rock {
  top:-2% !important;
  bottom:-6% !important;
  width:43vw !important;
  opacity:var(--hero-rock-opacity,0) !important;
  overflow:hidden;
  filter:drop-shadow(0 0 28px rgba(0,0,0,.48)) !important;
}
.transition-rock::before {
  background:
    radial-gradient(ellipse at 76% 18%, rgba(103,91,63,.34), transparent 14%),
    radial-gradient(ellipse at 70% 54%, rgba(68,59,41,.35), transparent 17%),
    radial-gradient(ellipse at 54% 82%, rgba(90,73,47,.28), transparent 18%),
    repeating-linear-gradient(168deg,#161813 0 24px,#23221a 25px 50px,#11130f 51px 73px) !important;
  box-shadow:inset -45px 0 70px rgba(0,0,0,.34);
}
.transition-rock::after {
  background:
    radial-gradient(ellipse at 76% 24%, rgba(127,111,70,.19), transparent 20%),
    radial-gradient(ellipse at 68% 70%, rgba(84,103,52,.16), transparent 24%),
    repeating-radial-gradient(ellipse at 65% 55%, transparent 0 34px, rgba(132,114,76,.08) 35px 37px, transparent 38px 58px) !important;
  opacity:.85 !important;
  mix-blend-mode:screen;
}
.rock-left {
  left:-43vw !important;
  transform:translateX(var(--hero-rock-left-x,0vw)) !important;
}
.rock-right {
  right:-43vw !important;
  transform:translateX(var(--hero-rock-right-x,0vw)) scaleX(-1) !important;
}
.rock-left::before,.rock-left::after {
  clip-path:polygon(0 0,72% 0,84% 9%,78% 18%,90% 30%,82% 43%,91% 57%,78% 69%,87% 82%,72% 94%,52% 100%,0 100%) !important;
}
.rock-right::before,.rock-right::after {
  clip-path:polygon(28% 0,100% 0,100% 100%,48% 100%,28% 94%,13% 82%,22% 68%,9% 56%,18% 43%,10% 29%,22% 17%,16% 8%) !important;
}

.tunnel-reveal {
  z-index:46 !important;
  opacity:var(--hero-tunnel-opacity,0) !important;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(0,0,0,0) 0 21%, rgba(2,8,10,.10) 34%, rgba(2,8,10,.44) 61%, rgba(2,8,10,.72) 100%);
}
.tunnel-arch {
  left:50% !important;
  bottom:-13vh !important;
  width:min(52vw,820px) !important;
  height:88vh !important;
  transform:translateX(-50%) translateY(var(--tunnel-portal-y,5vh)) scale(var(--tunnel-portal-scale,.72)) !important;
  transform-origin:50% 100%;
  border-radius:48% 48% 7% 7% / 42% 42% 6% 6% !important;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 38%, rgba(81,69,47,.48) 38.5% 43%, transparent 43.5%),
    repeating-linear-gradient(7deg,#2b2820 0 27px,#403829 28px 52px,#211f19 53px 74px) !important;
  box-shadow:
    inset 0 0 60px rgba(0,0,0,.66),
    0 16px 60px rgba(0,0,0,.55) !important;
  overflow:hidden;
}
.tunnel-arch::before {
  content:'';
  position:absolute;
  left:10%; right:10%; top:9%; bottom:-2%;
  border-radius:48% 48% 4% 4% / 44% 44% 3% 3%;
  background:
    repeating-radial-gradient(ellipse at 50% 64%, transparent 0 48px, rgba(151,124,76,.09) 49px 52px, transparent 53px 74px),
    radial-gradient(ellipse at 50% 72%, rgba(19,32,31,.32) 0 14%, rgba(6,13,16,.72) 42%, #02070a 76%);
  box-shadow:inset 0 0 50px rgba(0,0,0,.72);
}
.tunnel-arch::after {
  content:'';
  position:absolute;
  left:18%; right:18%; bottom:0; height:58%;
  background:
    linear-gradient(90deg, rgba(180,145,87,.08), transparent 18% 82%, rgba(180,145,87,.08)),
    repeating-linear-gradient(180deg, transparent 0 41px, rgba(176,145,91,.08) 42px 44px, transparent 45px 67px);
  clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);
  opacity:.8;
}
.tunnel-light {
  z-index:5;
  left:50% !important;
  top:auto !important;
  bottom:22vh !important;
  width:10vw !important;
  min-width:90px !important;
  opacity:var(--tunnel-light-opacity,.6);
  transform:translateX(-50%) scale(var(--tunnel-light-scale,.8)) !important;
  background:radial-gradient(circle,rgba(255,239,190,.96) 0 7%,rgba(244,192,95,.58) 17%,rgba(244,192,95,.16) 38%,transparent 72%) !important;
  box-shadow:0 0 74px rgba(241,185,88,.42) !important;
}

/* Let the existing foreground planes close back around the path during the
   final third of the hero sequence. */
.p-left,.p-right { transition:filter .18s linear; }

/* Make section two feel like the same tunnel rather than a hard visual cut. */
.how-stage {
  background:
    radial-gradient(ellipse at 50% 54%, rgba(26,53,55,.34) 0 13%, rgba(8,20,27,.52) 30%, rgba(3,10,15,.94) 73%),
    #030b10 !important;
}
.tunnel-depth {
  background:
    repeating-radial-gradient(ellipse at 50% 54%, transparent 0 70px, rgba(165,132,78,.035) 71px 74px, transparent 75px 104px),
    radial-gradient(ellipse at 50% 48%, rgba(17,40,42,.24) 0 14%, rgba(3,10,17,.10) 25%, rgba(0,0,0,.54) 48%, rgba(0,0,0,.92) 78%) !important;
}

/* v31 — locked hero -> night -> single-master forest approach ------------ */
.journey-chapter { height: 520vh !important; }
.chapter-hero .transition-rock,
.chapter-hero .tunnel-reveal { display:none !important; }
.hero-artboard { filter:none !important; opacity: var(--hero-scene-opacity, 1); }

/* Day/night handoff */
.night-transition,
.night-sky,
.night-stars,
.night-dim {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.night-transition { z-index:20; }
.night-sky {
  opacity:var(--night-sky-o,0);
  background:
    linear-gradient(180deg, rgba(4,18,36,.92) 0%, rgba(7,25,42,.80) 45%, rgba(6,20,31,.30) 70%, transparent 100%);
  mix-blend-mode:multiply;
}
.night-stars {
  opacity:var(--stars-o,0);
  background-image:
    radial-gradient(circle at 12% 11%, rgba(255,255,255,.9) 0 1px, transparent 1.3px),
    radial-gradient(circle at 27% 18%, rgba(255,255,255,.75) 0 1px, transparent 1.3px),
    radial-gradient(circle at 43% 9%, rgba(255,255,255,.8) 0 1px, transparent 1.3px),
    radial-gradient(circle at 59% 20%, rgba(255,255,255,.65) 0 1px, transparent 1.3px),
    radial-gradient(circle at 71% 12%, rgba(255,255,255,.85) 0 1px, transparent 1.3px),
    radial-gradient(circle at 86% 24%, rgba(255,255,255,.68) 0 1px, transparent 1.3px);
  background-size:210px 150px, 260px 180px, 190px 140px, 290px 190px, 230px 170px, 250px 185px;
  mask-image:linear-gradient(180deg,#000 0 54%,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 54%,transparent 78%);
}
.night-dim {
  opacity:var(--night-dim-o,0);
  background:rgba(0,7,13,.88);
}
.moon-orbit {
  position:absolute;
  z-index:3;
  left:0; top:0;
  width:clamp(72px,7vw,128px);
  aspect-ratio:1;
  opacity:var(--moon-o,0);
  transform:translate3d(var(--moon-x,62vw),var(--moon-y,44vh),0) scale(var(--moon-s,.85));
  background:url('assets/moon.webp') 50% 50% / contain no-repeat;
  filter:drop-shadow(0 0 22px rgba(215,231,255,.38));
  will-change:transform,opacity;
}

/* Scene 2 master and exact pixel extracts */
.forest-world {
  position:absolute;
  z-index:24;
  inset:0;
  pointer-events:none;
  opacity:var(--forest-world-o,0);
  overflow:hidden;
  background:#02070a;
  isolation:isolate;
}
.forest-layer {
  position:absolute;
  inset:-2%;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:cover;
  will-change:transform,opacity,filter;
}
.forest-depth-base {
  z-index:1;
  background-image:url('assets/forest-depth-base.webp');
  opacity:var(--forest-depth-o,0);
  transform:scale(1.04);
}
.forest-master {
  z-index:2;
  background-image:url('assets/forest-master-moonless.webp');
  opacity:var(--forest-master-o,1);
  transform:translate3d(0,var(--forest-master-y,0vh),0) scale(var(--forest-master-s,1));
  filter:brightness(var(--forest-bright,.62)) saturate(.92) contrast(1.04);
}
.forest-left {
  z-index:5;
  background-image:url('assets/forest-left.webp');
  opacity:var(--forest-left-o,0);
  transform-origin:0 78%;
  transform:translate3d(var(--forest-left-x,0vw),var(--forest-left-y,0vh),0) scale(var(--forest-left-s,1));
  filter:brightness(.83) saturate(.94) contrast(1.03);
}
.forest-right {
  z-index:6;
  background-image:url('assets/forest-right.webp');
  opacity:var(--forest-right-o,0);
  transform-origin:100% 78%;
  transform:translate3d(var(--forest-right-x,0vw),var(--forest-right-y,0vh),0) scale(var(--forest-right-s,1));
  filter:brightness(.84) saturate(.94) contrast(1.03);
}
.forest-corridor {
  z-index:7;
  background-image:url('assets/forest-corridor.webp');
  opacity:var(--forest-corridor-o,0);
  transform-origin:50% 55%;
  transform:translate3d(0,var(--forest-corridor-y,0vh),0) scale(var(--forest-corridor-s,1));
  filter:brightness(.97) saturate(.98) contrast(1.06);
  mix-blend-mode:normal;
}
.forest-canopy {
  z-index:8;
  background-image:url('assets/forest-canopy.webp');
  opacity:var(--forest-canopy-o,0);
  transform-origin:50% 0;
  transform:translate3d(0,var(--forest-canopy-y,0vh),0) scale(var(--forest-canopy-s,1));
  filter:brightness(.74) saturate(.90) contrast(1.06) drop-shadow(0 14px 24px rgba(0,0,0,.30));
}
.forest-eye-adjust,
.forest-lantern-bloom {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.forest-eye-adjust {
  z-index:10;
  opacity:var(--forest-eye-o,.55);
  background:rgba(0,4,8,.78);
}
.forest-lantern-bloom {
  z-index:11;
  opacity:var(--lantern-o,0);
  background:radial-gradient(circle at 50% 56%, rgba(255,197,92,.28) 0 4%, rgba(255,168,55,.11) 10%, transparent 25%);
  mix-blend-mode:screen;
  filter:blur(3px);
}

/* Keep UI readable above the transition until it naturally leaves. */
.fox-wrap { z-index:30 !important; }
.route-hero { z-index:36 !important; }
.route-pin { z-index:37 !important; }
.hero-copy { z-index:40 !important; }
.site-header { z-index:80 !important; }
.brand-logo { filter:brightness(1.28) saturate(1.08) contrast(1.04) drop-shadow(0 3px 8px rgba(0,0,0,.38)) !important; }

.journey-end {
  min-height:72vh;
  display:grid;
  place-items:center;
  padding:10vh 7vw;
  background:linear-gradient(180deg,#03080b,#010507);
  text-align:center;
}
.journey-end-inner { max-width:820px; }
.journey-end h2 { margin:.55rem 0 1rem; font-size:clamp(2.8rem,5vw,5.4rem); line-height:.96; text-transform:uppercase; }
.journey-end p { max-width:650px; margin:0 auto; color:rgba(255,255,255,.68); line-height:1.7; }

@media (max-width:880px) {
  .journey-chapter { height:470vh !important; }
  .moon-orbit { width:82px; }
  .forest-layer { inset:-1%; background-position:50% 50%; }
}

@media (prefers-reduced-motion:reduce) {
  .moon-orbit,.forest-layer { transform:none !important; }
}


/* v32 fixes */
.hero-copy, .fox-wrap, .route-hero, .route-pin, .scroll-cue { transition: opacity .08s linear; }
.forest-corridor::before { content: none; }

/* v33 refinements --------------------------------------------------------- */
.brand-logo {
  width: 178px !important;
  max-height: 60px !important;
  display: block;
  filter: brightness(1.42) saturate(1.08) contrast(1.06) drop-shadow(0 3px 10px rgba(0,0,0,.46)) !important;
}

.site-header {
  z-index: 140 !important;
}

.night-sky {
  opacity: var(--night-sky-o, 0);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(18,36,64,.58) 0%, rgba(10,20,35,.28) 42%, rgba(3,8,14,.08) 74%, rgba(3,8,14,0) 100%),
    linear-gradient(180deg, rgba(3,10,21,.98) 0%, rgba(4,12,24,.96) 38%, rgba(5,13,23,.82) 64%, rgba(3,9,15,.48) 82%, rgba(3,9,15,0) 100%);
  mix-blend-mode: multiply;
}

.night-stars {
  opacity: var(--stars-o, 0);
  background-image:
    radial-gradient(circle at 6% 9%, rgba(255,255,255,.92) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 14% 22%, rgba(255,255,255,.62) 0 1px, transparent 1.4px),
    radial-gradient(circle at 21% 13%, rgba(255,255,255,.84) 0 1px, transparent 1.4px),
    radial-gradient(circle at 29% 18%, rgba(255,255,255,.72) 0 1px, transparent 1.4px),
    radial-gradient(circle at 37% 8%, rgba(255,255,255,.94) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 47% 16%, rgba(255,255,255,.66) 0 1px, transparent 1.4px),
    radial-gradient(circle at 55% 11%, rgba(255,255,255,.86) 0 1px, transparent 1.4px),
    radial-gradient(circle at 63% 19%, rgba(255,255,255,.74) 0 1px, transparent 1.4px),
    radial-gradient(circle at 73% 8%, rgba(255,255,255,.94) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 81% 20%, rgba(255,255,255,.68) 0 1px, transparent 1.4px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.9) 0 1.1px, transparent 1.5px),
    radial-gradient(circle at 95% 18%, rgba(255,255,255,.72) 0 1px, transparent 1.4px);
  background-size:
    280px 180px, 260px 170px, 240px 160px, 310px 200px,
    260px 180px, 300px 210px, 250px 170px, 320px 220px,
    260px 180px, 280px 190px, 300px 210px, 240px 170px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0 66%, rgba(0,0,0,.35) 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0 66%, rgba(0,0,0,.35) 82%, transparent 100%);
}

.night-dim {
  opacity: var(--night-dim-o, 0);
  background:
    linear-gradient(180deg, rgba(0,4,10,.22) 0%, rgba(0,5,10,.50) 45%, rgba(0,6,10,.92) 100%);
}

.moon-orbit {
  z-index: 4;
  filter: drop-shadow(0 0 28px rgba(215,231,255,.42));
}

/* v34 night backplate swap ----------------------------------------------- */
.p-backplate-night {
  display:block !important;
  z-index:2 !important;
  background-image:url('assets/backplate-night.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:55% 56% !important;
  opacity:var(--p-back-night-o,0) !important;
  transform:translate3d(var(--p-back-x,0vw),var(--p-back-y,0vh),0) scale(var(--p-back-s,1.03)) !important;
}
.p-castle { opacity:var(--p-castle-o,1) !important; }
.night-stars { opacity: var(--stars-o, 0) !important; }

/* v35 dedicated night backplate outside the fading hero artboard --------- */
.night-transition { z-index: 20; }
.night-backplate,
.night-sky,
.night-stars,
.night-dim,
.moon-orbit {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.night-backplate {
  z-index:1;
  background-image:url('assets/backplate-night.webp');
  background-size:cover;
  background-position:50% 50%;
  transform-origin:55% 56%;
  opacity:var(--p-back-night-o,0);
  transform:translate3d(var(--p-back-x,0vw),var(--p-back-y,0vh),0) scale(var(--p-back-s,1.03));
}
.night-sky { z-index:2; }
.night-stars { z-index:3; }
.night-dim { z-index:4; }
.moon-orbit {
  z-index:5;
  width:clamp(72px,7vw,128px);
  aspect-ratio:1;
  left:0; top:0;
}
/* old in-artboard night backplate disabled if present */
.p-backplate-night { display:none !important; }

/* v36 corrected hero-to-night choreography ------------------------------ */
/* Source filenames are visually reversed. Remap them so left really is left
   and right really is right; this lets negative/positive X move OUTWARD. */
.p-left {
  background-image:url('assets/foreground-right.webp') !important;
  transform-origin:0 100% !important;
}
.p-right {
  background-image:url('assets/foreground-left.webp') !important;
  transform-origin:100% 100% !important;
}

/* Starry replacement plate is inside the hero stack, behind the castle and
   foreground, so stars cannot sit in front of castle geometry. */
.p-backplate-night {
  display:block !important;
  z-index:2 !important;
  background-image:url('assets/backplate-night.webp') !important;
  background-size:cover !important;
  background-position:50% 50% !important;
  transform-origin:55% 56% !important;
  opacity:var(--p-back-night-o,0) !important;
  transform:translate3d(var(--p-back-x,0vw),var(--p-back-y,0vh),0) scale(var(--p-back-s,1.03)) !important;
}
.p-castle { opacity:var(--p-castle-o,1) !important; }
.hero-artboard { opacity:1 !important; }

/* Moon is now inside hero-artboard too: behind castle/path/foreground but
   above both backplates, so the opening side panel physically reveals it. */
.hero-artboard .moon-orbit {
  position:absolute;
  z-index:3;
  left:0;
  top:0;
  width:clamp(86px,7.8vw,148px);
  aspect-ratio:1;
  opacity:var(--moon-o,0);
  transform:translate3d(var(--moon-x,4vw),var(--moon-y,34vh),0) scale(var(--moon-s,.88));
  background:
    radial-gradient(circle at 50% 50%, rgba(228,236,255,.42) 0 16%, rgba(228,236,255,.18) 26%, rgba(191,212,255,.10) 40%, rgba(191,212,255,0) 62%),
    url('assets/moon.webp') 50% 50% / contain no-repeat;
  filter:brightness(1.28) contrast(1.08) saturate(.95)
    drop-shadow(0 0 14px rgba(244,247,255,.58))
    drop-shadow(0 0 30px rgba(192,214,255,.42))
    drop-shadow(0 0 58px rgba(136,172,255,.24));
  will-change:transform,opacity;
  pointer-events:none;
  isolation:isolate;
}

/* No synthetic star overlay: the stars live in the replacement plate. */
.night-sky,.night-stars { display:none !important; }
.night-transition {
  z-index:20 !important;
  pointer-events:none;
}
.night-dim {
  z-index:1;
  opacity:var(--night-dim-o,0) !important;
  background:#000 !important;
}

/* Scroll label intentionally stays visible through the full transition. */
.scroll-cue {
  z-index:90 !important;
  opacity:var(--hero-scroll-opacity,.72) !important;
}


/* v41 polish -----------------------------------------------------------
   Tiny approval polish: the moon now has a tighter inner glow with a wider
   faint halo, the night landscape cools slightly as the star plate settles,
   and the forest handoff begins a fraction earlier with no dead pause. */
.p-path {
  filter:
    brightness(calc(1 - (var(--night-cool-o, 0) * 0.72)))
    saturate(calc(1 - (var(--night-cool-o, 0) * 1.00)))
    contrast(1.02)
    drop-shadow(0 10px 12px rgba(0,0,0,.10)) !important;
}
.p-left {
  filter:
    brightness(calc(.84 - (var(--night-cool-o, 0) * 0.72)))
    saturate(calc(.90 - (var(--night-cool-o, 0) * 1.08)))
    contrast(1.03)
    drop-shadow(14px 10px 26px rgba(0,0,0,.20)) !important;
}
.p-right {
  filter:
    brightness(calc(.85 - (var(--night-cool-o, 0) * 0.72)))
    saturate(calc(.91 - (var(--night-cool-o, 0) * 1.08)))
    contrast(1.03)
    drop-shadow(-14px 10px 26px rgba(0,0,0,.18)) !important;
}
.hero-artboard .moon-orbit {
  background:
    radial-gradient(circle at 50% 50%, rgba(244,247,255,.56) 0 9%, rgba(223,233,255,.22) 16%, rgba(196,216,255,.10) 28%, rgba(184,206,255,.045) 48%, rgba(184,206,255,0) 72%),
    url('assets/moon.webp') 50% 50% / contain no-repeat !important;
  filter:brightness(1.42) contrast(1.08) saturate(.96)
    drop-shadow(0 0 10px rgba(250,252,255,.78))
    drop-shadow(0 0 22px rgba(225,236,255,.46))
    drop-shadow(0 0 58px rgba(154,190,255,.18)) !important;
}

/* v42 rebuilt post-black tunnel journey ----------------------------------
   Everything before the blackout remains v41. This scene deliberately uses
   a no-tunnel backplate plus one complete moving tunnel, eliminating the
   doubled lamps/arch/path that caused the previous ghosting. */
.journey-world {
  background:#02070a !important;
  opacity:var(--forest-world-o,0) !important;
  isolation:isolate;
}
.journey-backplate,
.journey-tunnel-underlay,
.journey-tunnel,
.journey-side,
.journey-eye-adjust,
.journey-lantern-bloom,
.journey-vignette {
  position:absolute;
  pointer-events:none;
  will-change:transform,opacity,filter;
}
.journey-backplate {
  z-index:1;
  inset:-3%;
  background:url('assets/journey-backplate.webp') 50% 50% / cover no-repeat;
  transform:translate3d(0,var(--journey-back-y,0vh),0) scale(var(--journey-back-s,1));
  filter:brightness(var(--journey-back-bright,.62)) saturate(.88) contrast(1.06);
}
.journey-tunnel-underlay {
  z-index:2;
  left:50%;
  top:58.8%;
  width:40vw;
  height:55vh;
  transform:translate(-50%,-50%) scale(calc(var(--journey-tunnel-s,1) * 1.08));
  border-radius:48% 48% 32% 32%;
  background:radial-gradient(ellipse at 50% 58%, rgba(1,4,5,.90) 0 37%, rgba(1,4,5,.66) 55%, rgba(1,4,5,0) 79%);
  opacity:var(--journey-tunnel-o,0);
  filter:blur(9px);
}
.journey-tunnel {
  z-index:4;
  left:50%;
  top:61%;
  width:min(58vw,1120px);
  aspect-ratio:1448 / 1086;
  background:url('assets/journey-tunnel.webp') 50% 50% / contain no-repeat;
  opacity:var(--journey-tunnel-o,0);
  transform:translate3d(-50%,calc(-50% + var(--journey-tunnel-y,0vh)),0) scale(var(--journey-tunnel-s,1));
  transform-origin:50% 58%;
  filter:brightness(var(--journey-tunnel-bright,.88)) saturate(.96) contrast(1.08)
         drop-shadow(0 24px 38px rgba(0,0,0,.34));
}
.journey-side {
  z-index:6;
  top:-10vh;
  bottom:-10vh;
  width:52vw;
  opacity:var(--journey-side-o,0);
  background-repeat:no-repeat;
  background-size:auto 120vh;
  filter:brightness(.88) saturate(.91) contrast(1.05) drop-shadow(0 12px 24px rgba(0,0,0,.28));
}
.journey-left {
  left:-2vw;
  background-image:url('assets/journey-left.webp');
  background-position:left bottom;
  transform-origin:0 82%;
  transform:translate3d(var(--journey-left-x,0vw),var(--journey-left-y,0vh),0) scale(var(--journey-left-s,1));
}
.journey-right {
  right:-2vw;
  background-image:url('assets/journey-right.webp');
  background-position:right bottom;
  transform-origin:100% 82%;
  transform:translate3d(var(--journey-right-x,0vw),var(--journey-right-y,0vh),0) scale(var(--journey-right-s,1));
}
.journey-eye-adjust {
  z-index:8;
  inset:0;
  opacity:var(--journey-eye-o,.6);
  background:#000;
}
.journey-lantern-bloom {
  z-index:9;
  inset:0;
  opacity:var(--journey-lantern-o,0);
  background:radial-gradient(circle at 50% 61%, rgba(255,192,80,.24) 0 5%, rgba(255,166,49,.10) 11%, transparent 26%);
  mix-blend-mode:screen;
  filter:blur(4px);
}
.journey-vignette {
  z-index:10;
  inset:0;
  opacity:var(--journey-vignette-o,.24);
  background:radial-gradient(ellipse at 50% 58%, transparent 0 34%, rgba(0,3,6,.15) 58%, rgba(0,3,6,.62) 100%);
}

@media (max-width:880px) {
  .journey-tunnel { width:88vw; top:62%; }
  .journey-side { width:68vw; background-size:auto 112vh; }
  .journey-left { left:-12vw; }
  .journey-right { right:-12vw; }
}

/* v43 — embedded tunnel, threshold guide and Viewport 2 -----------------
   Everything through the v41 blackout is untouched. */
.journey-chapter { height:650vh !important; }

.journey-exterior,
.interior-world {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.journey-exterior {
  z-index:1;
  opacity:var(--exterior-o,1);
  will-change:opacity;
}

/* Feather only the lower walking surface of the primary tunnel. The tunnel
   itself stays solid; this removes the hard warm-path-on-cool-path seam. */
.journey-tunnel {
  top:58.5% !important;
  width:min(60vw,1160px) !important;
  transform-origin:50% 60% !important;
  -webkit-mask-image:linear-gradient(to bottom,#000 0 77%,rgba(0,0,0,.96) 82%,rgba(0,0,0,.72) 88%,rgba(0,0,0,.28) 95%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0 77%,rgba(0,0,0,.96) 82%,rgba(0,0,0,.72) 88%,rgba(0,0,0,.28) 95%,transparent 100%);
}
.journey-tunnel-path,
.journey-tunnel-lamps {
  position:absolute;
  z-index:3;
  left:50%;
  top:58.5%;
  width:min(60vw,1160px);
  aspect-ratio:2244 / 1683;
  background:url('assets/journey-tunnel.webp') 50% 50% / contain no-repeat;
  transform:translate3d(-50%,calc(-50% + var(--journey-tunnel-y,0vh)),0) scale(var(--journey-tunnel-s,1));
  transform-origin:50% 60%;
  pointer-events:none;
  will-change:transform,opacity,filter;
}
.journey-tunnel-path {
  z-index:3;
  opacity:var(--journey-path-o,.7);
  clip-path:inset(67% 12% 0 12%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.25) 10%,#000 34% 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.25) 10%,#000 34% 100%);
  filter:brightness(.57) saturate(.68) contrast(1.04);
}
.journey-tunnel-lamps {
  z-index:5;
  background:none;
  opacity:var(--journey-tunnel-o,0);
}
.journey-tunnel-lamps::before,
.journey-tunnel-lamps::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 32.4% 58%,rgba(255,238,176,.70) 0 1.1%,rgba(255,178,55,.30) 2.6%,transparent 7%),
    radial-gradient(circle at 67.6% 58%,rgba(255,238,176,.70) 0 1.1%,rgba(255,178,55,.30) 2.6%,transparent 7%),
    radial-gradient(circle at 40.5% 66%,rgba(255,214,135,.42) 0 .65%,rgba(255,161,40,.20) 1.8%,transparent 4.5%),
    radial-gradient(circle at 59.5% 66%,rgba(255,214,135,.42) 0 .65%,rgba(255,161,40,.20) 1.8%,transparent 4.5%);
  mix-blend-mode:screen;
  filter:blur(2px);
  animation:raedelLanternFlicker 2.8s steps(1,end) infinite;
}
.journey-tunnel-lamps::after {
  filter:blur(9px);
  opacity:.42;
  animation-duration:3.7s;
  animation-delay:-1.1s;
}
@keyframes raedelLanternFlicker {
  0%,100% { opacity:.78; transform:scale(1); }
  7% { opacity:.92; }
  11% { opacity:.67; transform:scale(.995); }
  14% { opacity:.95; }
  28% { opacity:.82; }
  31% { opacity:.98; transform:scale(1.006); }
  47% { opacity:.73; }
  52% { opacity:.90; }
  71% { opacity:.80; }
  76% { opacity:.96; transform:scale(1.003); }
  83% { opacity:.70; }
}

/* Inner covers sit on top of the tunnel sides, hiding the cutout boundary.
   They leave completely before the arch fills the screen. */
.journey-overlap {
  position:absolute;
  z-index:7;
  top:-4vh;
  bottom:-8vh;
  width:43vw;
  opacity:var(--journey-overlap-o,0);
  background-repeat:no-repeat;
  background-size:auto 109vh;
  filter:brightness(.82) saturate(.88) contrast(1.06) drop-shadow(0 14px 28px rgba(0,0,0,.38));
  will-change:transform,opacity;
}
.journey-overlap-left {
  left:6vw;
  background-image:url('assets/journey-overlap-left.webp');
  background-position:left bottom;
  transform-origin:0 78%;
  transform:translate3d(var(--journey-overlap-left-x,-6vw),var(--journey-overlap-y,0vh),0) scale(var(--journey-overlap-s,1));
}
.journey-overlap-right {
  right:6vw;
  background-image:url('assets/journey-overlap-right.webp');
  background-position:right bottom;
  transform-origin:100% 78%;
  transform:translate3d(var(--journey-overlap-right-x,6vw),var(--journey-overlap-y,0vh),0) scale(var(--journey-overlap-s,1));
}

/* RÆDEL returns only for the threshold moment. */
.threshold-fox {
  position:absolute;
  z-index:15;
  right:2.5vw;
  bottom:-5vh;
  width:min(24vw,390px);
  height:72vh;
  opacity:var(--threshold-fox-o,0);
  transform:translate3d(var(--threshold-fox-x,4vw),var(--threshold-fox-y,8vh),0) scale(var(--threshold-fox-s,.92));
  transform-origin:55% 100%;
  will-change:transform,opacity;
}
.threshold-fox-image {
  position:absolute;
  inset:0;
  background:url('assets/fox-lantern.webp') 50% 100% / contain no-repeat;
  filter:brightness(.88) saturate(.92) contrast(1.02) drop-shadow(-14px 18px 22px rgba(0,0,0,.48));
}
.threshold-fox-glow {
  position:absolute;
  z-index:-1;
  left:-19%;
  top:17%;
  width:54%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,224,150,.62) 0 7%,rgba(255,170,48,.30) 22%,rgba(255,128,20,.10) 43%,transparent 70%);
  filter:blur(8px);
  mix-blend-mode:screen;
  animation:foxLanternFlicker 2.45s steps(1,end) infinite;
}
@keyframes foxLanternFlicker {
  0%,100% { opacity:.75; transform:scale(1); }
  8% { opacity:.92; transform:scale(1.03); }
  12% { opacity:.66; transform:scale(.98); }
  16% { opacity:.90; }
  38% { opacity:.78; }
  43% { opacity:.96; transform:scale(1.025); }
  61% { opacity:.72; }
  75% { opacity:.88; }
  82% { opacity:.68; }
}

/* Viewport 2 — interior. Derived from the same tunnel pixels for continuity. */
.interior-world {
  z-index:20;
  opacity:var(--interior-o,0);
  overflow:hidden;
  background:#010405;
  will-change:opacity;
}
.interior-master,
.interior-side,
.interior-depth,
.interior-lamps,
.interior-vignette {
  position:absolute;
  inset:-4%;
  pointer-events:none;
  will-change:transform,opacity;
}
.interior-master {
  z-index:1;
  background:url('assets/interior-master.webp') 50% 54% / cover no-repeat;
  transform:translate3d(var(--look-master-x,0vw),var(--look-y-shift,0vh),0) scale(var(--interior-s,1.10));
  filter:brightness(.70) saturate(.86) contrast(1.11);
}
.interior-side {
  z-index:3;
  background-size:cover;
  background-position:50% 54%;
  opacity:.50;
  mix-blend-mode:screen;
}
.interior-left {
  background-image:url('assets/interior-left.webp');
  transform:translate3d(var(--look-left-x,0vw),var(--look-y-shift,0vh),0) scale(1.07) skewY(var(--look-skew-left,0deg));
}
.interior-right {
  background-image:url('assets/interior-right.webp');
  transform:translate3d(var(--look-right-x,0vw),var(--look-y-shift,0vh),0) scale(1.07) skewY(var(--look-skew-right,0deg));
}
.interior-depth {
  z-index:4;
  inset:0;
  background:
    radial-gradient(ellipse at calc(50% + var(--look-depth-x,0%)) 55%,transparent 0 20%,rgba(0,3,5,.12) 34%,rgba(0,3,5,.58) 72%,rgba(0,2,3,.88) 100%),
    repeating-radial-gradient(ellipse at calc(50% + var(--look-depth-x,0%)) 57%,transparent 0 80px,rgba(185,139,69,.025) 82px 85px,transparent 87px 120px);
}
.interior-lamps {
  z-index:5;
  inset:0;
  background:
    radial-gradient(circle at calc(25% + var(--look-lamp-left-x,0%)) 55%,rgba(255,215,126,.20),transparent 8%),
    radial-gradient(circle at calc(75% + var(--look-lamp-right-x,0%)) 55%,rgba(255,215,126,.20),transparent 8%),
    radial-gradient(circle at 50% 61%,rgba(255,167,50,.10),transparent 20%);
  mix-blend-mode:screen;
  filter:blur(5px);
  animation:interiorLanternFlicker 3.2s steps(1,end) infinite;
}
@keyframes interiorLanternFlicker {
  0%,100% { opacity:.72; }
  9% { opacity:.88; }
  13% { opacity:.64; }
  17% { opacity:.90; }
  39% { opacity:.74; }
  44% { opacity:.92; }
  66% { opacity:.69; }
  72% { opacity:.86; }
}
.interior-vignette {
  z-index:6;
  inset:0;
  background:radial-gradient(ellipse at 50% 54%,transparent 0 30%,rgba(0,2,4,.12) 52%,rgba(0,2,4,.78) 100%);
}

.interior-copy {
  position:absolute;
  z-index:12;
  left:5.2vw;
  top:18vh;
  width:min(475px,34vw);
  opacity:var(--interior-copy-o,0);
  transform:translateY(var(--interior-copy-y,3vh));
  text-shadow:0 6px 28px rgba(0,0,0,.7);
}
.interior-copy h2 {
  margin:.55rem 0 .9rem;
  font-size:clamp(2.8rem,5vw,5.4rem);
  line-height:.94;
  text-transform:uppercase;
  letter-spacing:-.035em;
}
.interior-copy p {
  margin:0;
  max-width:430px;
  font-size:clamp(.95rem,1.15vw,1.12rem);
  line-height:1.65;
  color:rgba(255,253,246,.82);
}
.viewport-phone {
  z-index:14 !important;
  left:61% !important;
  top:54% !important;
  width:min(25vw,330px) !important;
  opacity:var(--viewport-phone-o,0);
  transform:translate(-50%,-50%) translateY(var(--viewport-phone-y,14vh)) rotate(-4deg) scale(var(--viewport-phone-s,.88)) !important;
  filter:drop-shadow(0 32px 48px rgba(0,0,0,.56));
}
.viewport-phone .phone-glow {
  opacity:.82;
  background:radial-gradient(circle,rgba(75,186,193,.24),rgba(228,168,71,.08) 38%,transparent 70%);
}

@media (max-width:880px) {
  .journey-chapter { height:620vh !important; }
  .journey-overlap { width:58vw; }
  .threshold-fox { width:min(40vw,280px); right:-3vw; }
  .interior-copy { left:24px; top:13vh; width:min(80vw,430px); }
  .viewport-phone { left:62% !important; top:61% !important; width:min(52vw,300px) !important; }
}

/* v44 — locked exterior target -> true layered tunnel interior ------------
   Nothing before the approved v41 blackout has been changed. The v43 final
   exterior zoom is also the exact handoff target; these rules only extend the
   journey forward from that frame. */

.journey-backplate { opacity:var(--journey-back-o,1); }

/* Lamp glows are centred on the actual lantern pixels in journey-tunnel.webp. */
.journey-tunnel-lamps::before,
.journey-tunnel-lamps::after {
  background:
    radial-gradient(circle at 31.65% 52.85%,rgba(255,246,201,.86) 0 .8%,rgba(255,182,65,.40) 2.2%,transparent 5.8%),
    radial-gradient(circle at 68.35% 52.85%,rgba(255,246,201,.86) 0 .8%,rgba(255,182,65,.40) 2.2%,transparent 5.8%),
    radial-gradient(circle at 40.7% 57.2%,rgba(255,223,155,.54) 0 .42%,rgba(255,165,50,.24) 1.3%,transparent 3.2%),
    radial-gradient(circle at 59.3% 57.2%,rgba(255,223,155,.54) 0 .42%,rgba(255,165,50,.24) 1.3%,transparent 3.2%) !important;
}
.journey-tunnel-lamps::before { filter:blur(1.1px) !important; }
.journey-tunnel-lamps::after { filter:blur(7px) !important; opacity:.34 !important; }

/* RÆDEL now stands inside the threshold rather than outside the entrance. */
.threshold-fox {
  left:66% !important;
  right:auto !important;
  bottom:-4vh !important;
  width:min(18vw,285px) !important;
  height:61vh !important;
  transform:translate3d(calc(-50% + var(--threshold-fox-x,0vw)),var(--threshold-fox-y,0vh),0) scale(var(--threshold-fox-s,.78)) !important;
  transform-origin:50% 100% !important;
}
.threshold-fox-image {
  filter:brightness(.73) saturate(.82) contrast(1.04) drop-shadow(-10px 16px 20px rgba(0,0,0,.52)) !important;
}
.threshold-fox-glow {
  z-index:-1 !important;
  left:5.5% !important;
  top:21.5% !important;
  width:34% !important;
  background:radial-gradient(circle,rgba(255,246,199,.90) 0 5%,rgba(255,194,82,.48) 16%,rgba(255,143,30,.18) 36%,transparent 68%) !important;
  filter:blur(7px) !important;
}
.threshold-fox::after {
  content:'';
  position:absolute;
  z-index:3;
  left:12%;
  top:29%;
  width:12%;
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,252,220,.98) 0 11%,rgba(255,207,101,.68) 25%,rgba(255,150,40,.20) 48%,transparent 72%);
  filter:blur(2px);
  mix-blend-mode:screen;
  animation:foxLanternFlicker 2.45s steps(1,end) infinite;
  pointer-events:none;
}

/* Interior is transparent over the still-centred entrance. Only the separate
   inner tunnel pieces move with the pointer. */
.interior-world {
  z-index:20 !important;
  background:transparent !important;
  opacity:var(--interior-o,0) !important;
  overflow:hidden !important;
}
.interior-piece,
.interior-fog,
.interior-lamps,
.tunnel-exit-light,
.interior-vignette {
  position:absolute;
  inset:-4%;
  pointer-events:none;
  will-change:transform,opacity;
}
.interior-piece {
  background-repeat:no-repeat;
  background-position:50% 54%;
  background-size:cover;
  filter:brightness(.72) saturate(.84) contrast(1.10);
  mix-blend-mode:normal;
}
.interior-depth-centre {
  z-index:1;
  background-image:url('assets/interior-depth-centre.webp');
  transform:translate3d(var(--look-depth-x-vw,0vw),calc(var(--inside-depth-y,0vh) + var(--look-y-shift,0vh)),0) scale(var(--inside-depth-s,1));
  transform-origin:50% 57%;
}
.interior-wall-left {
  z-index:3;
  background-image:url('assets/interior-wall-left.webp');
  transform:translate3d(calc(var(--inside-left-x,0vw) + var(--look-left-x,0vw)),calc(var(--inside-wall-y,0vh) + var(--look-y-shift,0vh)),0) scale(var(--inside-wall-s,1));
  transform-origin:14% 58%;
}
.interior-wall-right {
  z-index:3;
  background-image:url('assets/interior-wall-right.webp');
  transform:translate3d(calc(var(--inside-right-x,0vw) + var(--look-right-x,0vw)),calc(var(--inside-wall-y,0vh) + var(--look-y-shift,0vh)),0) scale(var(--inside-wall-s,1));
  transform-origin:86% 58%;
}
.interior-ceiling {
  z-index:4;
  background-image:url('assets/interior-ceiling.webp');
  transform:translate3d(var(--look-ceiling-x,0vw),calc(var(--inside-ceiling-y,0vh) + var(--look-y-shift,0vh)),0) scale(var(--inside-ceiling-s,1));
  transform-origin:50% 8%;
}
.interior-floor {
  z-index:5;
  background-image:url('assets/interior-floor.webp');
  transform:translate3d(var(--look-floor-x,0vw),calc(var(--inside-floor-y,0vh) + var(--look-y-shift,0vh)),0) scale(var(--inside-floor-s,1));
  transform-origin:50% 100%;
}
.interior-fog {
  z-index:6;
  inset:0;
  opacity:var(--interior-fog-o,.12);
  background:
    radial-gradient(ellipse at calc(50% + var(--look-depth-x,0%)) 58%,rgba(34,43,44,.05) 0 16%,rgba(14,21,23,.10) 36%,rgba(2,6,8,.22) 70%,rgba(1,3,5,.42) 100%);
  filter:blur(5px);
}
.interior-lamps {
  z-index:7 !important;
  inset:0 !important;
  background:
    radial-gradient(circle at calc(24.5% + var(--look-lamp-left-x,0%)) 47%,rgba(255,236,177,.34) 0 1.2%,rgba(255,168,48,.17) 3%,transparent 8%),
    radial-gradient(circle at calc(75.5% + var(--look-lamp-right-x,0%)) 47%,rgba(255,236,177,.34) 0 1.2%,rgba(255,168,48,.17) 3%,transparent 8%),
    radial-gradient(circle at 50% 58%,rgba(255,174,62,.08),transparent 19%) !important;
  filter:blur(3px) !important;
  mix-blend-mode:screen;
}
.interior-vignette {
  z-index:8 !important;
  inset:0 !important;
  background:radial-gradient(ellipse at 50% 54%,transparent 0 27%,rgba(0,2,4,.12) 54%,rgba(0,2,4,.72) 100%) !important;
}

/* The far end of the passage becomes the transition into the next scene. */
.tunnel-exit-light {
  z-index:9;
  inset:0;
  opacity:var(--exit-light-o,0);
  transform:scale(var(--exit-light-s,.08));
  transform-origin:50% 55%;
  background:radial-gradient(circle at 50% 55%,#fff 0 9%,rgba(255,251,232,.98) 13%,rgba(255,229,167,.58) 27%,rgba(255,205,112,.18) 45%,transparent 68%);
  filter:blur(3px);
  mix-blend-mode:screen;
}
.tunnel-whiteout {
  position:absolute;
  z-index:65;
  inset:0;
  opacity:var(--tunnel-white-o,0);
  background:#fff;
  pointer-events:none;
}

/* The first mobile screen is a phone being read, not a vertical display card. */
.viewport-phone {
  left:68% !important;
  top:59% !important;
  width:min(26vw,350px) !important;
  transform:translate(-50%,-50%) translateY(var(--viewport-phone-y,10vh)) perspective(1100px) rotateX(7deg) rotateY(-13deg) rotateZ(8deg) scale(var(--viewport-phone-s,.90)) !important;
  transform-origin:50% 70%;
}
.qr-real {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  image-rendering:auto;
  border-radius:2px;
  box-shadow:0 3px 18px rgba(0,0,0,.24);
}
.scanner-frame { padding:10% !important; }
.qr-faux { display:none !important; }

/* The next scene is deliberately an undecided white canvas for now. */
.journey-end {
  background:#fff !important;
  color:#06131a !important;
}
.journey-end-inner { opacity:0 !important; }

@media (max-width:880px) {
  .threshold-fox { left:69% !important; width:min(32vw,235px) !important; height:53vh !important; }
  .viewport-phone { left:63% !important; top:62% !important; width:min(52vw,300px) !important; }
}


/* v45 — close-start tunnel approach --------------------------------------
   Scene 2 fades in already close enough for the path that belongs to the
   tunnel artwork to meet the bottom edge of the viewport. No independent
   path copy or feathered path handoff is used. The exact same tunnel element
   continues through the v43 target and enlarges until the stone surround is
   outside the viewport. The layered interior waits behind that exterior and
   becomes the view only at the physical threshold. */
.journey-tunnel,
.journey-tunnel-lamps,
.journey-tunnel-underlay {
  top:var(--journey-tunnel-top,58.5%) !important;
}
.journey-tunnel {
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
.journey-tunnel-path { display:none !important; }
.journey-tunnel-underlay {
  transform:translate3d(-50%,calc(-50% + var(--journey-tunnel-y,0vh)),0)
            scale(calc(var(--journey-tunnel-s,1) * 1.08)) !important;
}
/* Interior is physically behind the entrance, not crossfaded over its face. */
.journey-exterior { z-index:2 !important; }
.interior-world { z-index:1 !important; }


/* v47 — keep one tunnel image through the phone beat ---------------------
   The slight jump was caused by the interface arriving at the same time as a
   hidden second interior tunnel treatment. For now, the phone and copy sit on
   top of the original journey tunnel, and all replacement interior artwork is
   suppressed until after that moment. */
.journey-exterior { z-index: 2 !important; opacity: var(--exterior-o,1) !important; }
.interior-world {
  z-index: 30 !important;
  background: transparent !important;
  opacity: var(--interior-o,0) !important;
}
.interior-piece,
.interior-fog,
.interior-lamps,
.tunnel-exit-light,
.interior-vignette {
  opacity: var(--interior-scene-o,0) !important;
}
.interior-copy,
.viewport-phone {
  pointer-events: none;
}

/* v48 — true portal architecture -----------------------------------------
   The exterior is now one entrance frame with a genuine transparent opening.
   Repeating tunnel slices live behind that opening from the first visible
   frame onwards. The entrance itself only scales forward; pointer parallax is
   applied to the internal slices, never to the entrance. */
.journey-tunnel,
.journey-tunnel-underlay,
.journey-tunnel-path,
.journey-tunnel-lamps,
.journey-lantern-bloom,
.interior-piece,
.interior-fog,
.interior-lamps,
.tunnel-exit-light,
.interior-vignette {
  display:none !important;
}

.journey-portal {
  position:absolute;
  z-index:4;
  left:50%;
  top:var(--journey-tunnel-top,58.5%);
  width:min(60vw,1160px);
  aspect-ratio:2244 / 1683;
  opacity:var(--journey-tunnel-o,0);
  transform:translate3d(-50%,calc(-50% + var(--journey-tunnel-y,0vh)),0)
            scale(var(--journey-tunnel-s,1));
  transform-origin:50% 60%;
  will-change:transform,opacity;
  pointer-events:none;
}

.portal-interior {
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  clip-path:polygon(
    33.82% 76.35%,
    34.85% 51.99%,
    35.14% 48.74%,
    36.00% 45.62%,
    37.40% 42.75%,
    39.29% 40.23%,
    41.58% 38.16%,
    44.20% 36.62%,
    47.04% 35.67%,
    50.00% 35.35%,
    52.96% 35.67%,
    55.80% 36.62%,
    58.42% 38.16%,
    60.71% 40.23%,
    62.60% 42.75%,
    64.00% 45.62%,
    64.86% 48.74%,
    65.15% 51.99%,
    66.18% 76.35%
  );
  background:#010304;
  isolation:isolate;
}

.portal-dark-core {
  position:absolute;
  z-index:0;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 55%,rgba(47,25,8,.25) 0 8%,rgba(8,6,5,.78) 31%,#010304 74%);
}

.tunnel-slice {
  position:absolute;
  left:50%;
  top:54.0%;
  width:100%;
  height:auto;
  aspect-ratio:1672 / 941;
  opacity:var(--slice-o,1);
  transform:translate3d(calc(-50% + var(--slice-x,0%)),calc(-50% + var(--slice-y,0%)),0)
            scale(var(--slice-s,.12));
  transform-origin:50% 58%;
  filter:brightness(var(--slice-bright,.7)) saturate(.88) contrast(1.06)
         blur(var(--slice-blur,0px));
  will-change:transform,opacity,filter;
  pointer-events:none;
}

.tunnel-segment {
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-size:100% 100%;
  pointer-events:none;
}
.tunnel-segment-ring {
  z-index:4;
  opacity:.99;
  background-image:url('assets/tunnel-segment-ring.webp');
}
.tunnel-segment-floor {
  z-index:5;
  opacity:.94;
  background-image:url('assets/tunnel-segment-floor.webp');
}
.tunnel-segment-wall {
  z-index:3;
  opacity:.82;
  background-image:url('assets/tunnel-segment-wall-right.webp');
}
.tunnel-segment-wall-right { transform:none; }
.tunnel-segment-wall-left { transform:scaleX(-1); }

.portal-depth-glow {
  position:absolute;
  z-index:90;
  left:50%;
  top:57%;
  width:18%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,204,108,.20) 0 7%,rgba(172,92,23,.09) 26%,transparent 68%);
  filter:blur(7px);
  mix-blend-mode:screen;
  opacity:.72;
}

.journey-entrance-frame {
  position:absolute;
  z-index:100;
  inset:0;
  background:url('assets/journey-entrance-frame.webp') 50% 50% / 100% 100% no-repeat;
  filter:brightness(var(--journey-tunnel-bright,.88)) saturate(.96) contrast(1.08)
         drop-shadow(0 24px 38px rgba(0,0,0,.34));
  pointer-events:none;
}

/* The UI layer contains no tunnel replacement image. It only carries the
   phone and copy above the continuously running portal. */
.interior-world {
  z-index:30 !important;
  background:transparent !important;
  opacity:var(--interior-o,0) !important;
  overflow:visible !important;
}

/* Do not fade the actual entrance at the threshold. It simply grows past the
   viewport edges; the transparent aperture underneath remains the tunnel. */
.journey-exterior { opacity:1 !important; }

@media (max-width:880px) {
  .journey-portal { width:88vw; top:var(--journey-tunnel-top,62%); }
}


/* v49 — corrected arch aperture and full-height tunnel slices -------------
   The entrance placement and zoom are unchanged from v48. Only the actual
   transparent aperture and interior slice geometry are corrected. */
.portal-interior {
  -webkit-clip-path:polygon(
    33.82% 76.35%,34.85% 51.99%,35.14% 48.74%,36.00% 45.62%,
    37.40% 42.75%,39.29% 40.23%,41.58% 38.16%,44.20% 36.62%,
    47.04% 35.67%,50.00% 35.35%,52.96% 35.67%,55.80% 36.62%,
    58.42% 38.16%,60.71% 40.23%,62.60% 42.75%,64.00% 45.62%,
    64.86% 48.74%,65.15% 51.99%,66.18% 76.35%
  );
}
.portal-dark-core {
  background:radial-gradient(ellipse at 50% 58%,rgba(56,34,15,.22) 0 7%,rgba(8,6,5,.72) 30%,#010304 76%);
}

/* v50 — exact aperture, readable hold, resumed tunnel travel ----------------
   The entrance artwork and the interior share one portal transform. The tunnel
   cannot zoom independently while the phone/copy are being read. */
.journey-chapter { height:780vh !important; }

/* Use the actual enclosed transparent component from the entrance artwork.
   This replaces every guessed polygon/semicircle aperture from v48/v49. */
.portal-interior {
  clip-path:none !important;
  -webkit-clip-path:none !important;
  -webkit-mask-image:url('assets/tunnel-aperture-mask.png') !important;
  mask-image:url('assets/tunnel-aperture-mask.png') !important;
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  -webkit-mask-position:0 0 !important;
  mask-position:0 0 !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  background:#010304 !important;
}

/* One slice at scale 1 now matches the FULL HEIGHT of the real aperture.
   Its 16:9 artboard is allowed to extend sideways and is clipped by the mask. */
.tunnel-slice {
  left:50% !important;
  top:55.88% !important;
  width:54.72% !important;
  height:auto !important;
  aspect-ratio:1672 / 941 !important;
  transform-origin:50% 55.5% !important;
}

/* Two unlit wall sections, then one lit section, repeated. The source wall
   includes a lantern, so the unlit slices locally suppress that fixture while
   leaving the stone texture intact. */
.slice-no-lamp .tunnel-segment-wall::after,
.slice-no-lamp .tunnel-segment-ring::after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.slice-no-lamp .tunnel-segment-wall::after {
  background:radial-gradient(ellipse at 82.1% 52.5%,
    rgba(6,5,4,.99) 0 2.1%,
    rgba(10,8,6,.96) 3.5%,
    rgba(13,10,7,.76) 5.4%,
    rgba(8,7,5,.34) 7.0%,
    transparent 9.0%);
}
.slice-no-lamp .tunnel-segment-ring::after {
  background:radial-gradient(ellipse at 64.7% 64.9%,
    rgba(7,5,4,.97) 0 1.8%,
    rgba(12,8,5,.86) 3.2%,
    rgba(9,7,5,.40) 5.4%,
    transparent 7.2%);
}
.slice-no-lamp .tunnel-segment-wall { filter:brightness(.84) saturate(.82); }

.slice-lamp::after {
  content:'';
  position:absolute;
  z-index:9;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 17.9% 52.5%,rgba(255,230,165,.31) 0 1.0%,rgba(255,163,45,.15) 2.6%,transparent 6.8%),
    radial-gradient(circle at 82.1% 52.5%,rgba(255,230,165,.31) 0 1.0%,rgba(255,163,45,.15) 2.6%,transparent 6.8%);
  mix-blend-mode:screen;
  filter:blur(1.2px);
}

/* The far light is dormant through approach + reading hold. It only blooms
   after the resumed zoom has carried the entrance sides towards the viewport. */
.portal-depth-glow {
  z-index:95 !important;
  left:50% !important;
  top:57.2% !important;
  width:15% !important;
  opacity:var(--portal-bloom-o,0) !important;
  transform:translate(-50%,-50%) scale(var(--portal-bloom-s,.16)) !important;
  transform-origin:50% 50% !important;
  background:radial-gradient(circle,
    rgba(255,255,250,1) 0 8%,
    rgba(255,248,217,.96) 12%,
    rgba(255,214,137,.62) 25%,
    rgba(255,167,58,.21) 43%,
    transparent 69%) !important;
  filter:blur(3px) !important;
  mix-blend-mode:screen !important;
}

/* Keep the UI above the single portal system. */
.interior-world { z-index:130 !important; }
.tunnel-whiteout { z-index:180 !important; }

@media (max-width:880px) {
  .journey-chapter { height:760vh !important; }
}

/* v51 — real arch aperture, visible infinite tunnel, continuous bloom --------
   The entrance is still the one exterior frame. The tunnel exists only behind
   its actual transparent opening and continues travelling until full white. */
.journey-chapter { height: 820vh !important; }

.portal-interior {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-mask-image: url('assets/tunnel-aperture-mask.png') !important;
  mask-image: url('assets/tunnel-aperture-mask.png') !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-position: 0 0 !important;
  mask-position: 0 0 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  mask-mode: alpha !important;
  background: #010304 !important;
}

/* The full-size near tunnel slice deliberately exceeds the aperture. The
   entrance mask clips it cleanly to the true inner stone edge, so no rectangle
   or undersized interior can ever be exposed. */
.tunnel-slice {
  left: 50% !important;
  top: 56.0% !important;
  width: 68% !important;
  height: auto !important;
  aspect-ratio: 1672 / 941 !important;
  transform-origin: 50% 56% !important;
}
.tunnel-segment-ring,
.tunnel-segment-floor,
.tunnel-segment-wall { opacity: 1 !important; }

/* Use a genuine no-lamp wall asset for the two dark sections in every 3-part
   cadence. The third slice keeps the lit wall. */
.slice-no-lamp .tunnel-segment-wall {
  background-image: url('assets/tunnel-segment-wall-right-nolamp.webp') !important;
  filter: brightness(.88) saturate(.84) !important;
}
.slice-lamp .tunnel-segment-wall {
  background-image: url('assets/tunnel-segment-wall-right.webp') !important;
}

.portal-dark-core {
  background: radial-gradient(ellipse at 50% 56%,
    rgba(37,23,12,.10) 0 6%,
    rgba(9,7,5,.42) 28%,
    rgba(1,3,4,.90) 78%) !important;
}

/* The far lamp/bloom belongs behind the tunnel rings, so it really reads as a
   point at the vanishing point rather than an overlay pasted on the foreground. */
.portal-depth-glow {
  z-index: 5 !important;
  left: 50% !important;
  top: 56.4% !important;
  width: 4.2% !important;
  aspect-ratio: 1 !important;
  opacity: var(--portal-bloom-o,0) !important;
  transform: translate(-50%,-50%) scale(var(--portal-bloom-s,.035)) !important;
  transform-origin: 50% 50% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    #fff 0 14%,
    rgba(255,255,248,.99) 20%,
    rgba(255,238,193,.88) 34%,
    rgba(255,192,92,.48) 52%,
    rgba(255,150,47,.12) 68%,
    transparent 82%) !important;
  filter: blur(1.8px) !important;
  mix-blend-mode: screen !important;
}

/* RÆDEL sits in the visual gap between the copy and the phone. He is a little
   larger and his opacity is tied to the phone's exact in/out timing in JS. */
.threshold-fox {
  left: 52.5% !important;
  right: auto !important;
  bottom: -5vh !important;
  width: min(21vw, 330px) !important;
  height: 68vh !important;
  z-index: 145 !important;
  transform: translate3d(calc(-50% + var(--threshold-fox-x,0vw)),var(--threshold-fox-y,0vh),0)
             scale(var(--threshold-fox-s,1)) !important;
  transform-origin: 50% 100% !important;
}
.threshold-fox-image {
  filter: brightness(.80) saturate(.88) contrast(1.04)
          drop-shadow(-12px 18px 24px rgba(0,0,0,.52)) !important;
}

/* The final white is itself radial. It starts at the same vanishing point as
   the tunnel bloom, grows outward while the tunnel keeps travelling underneath,
   and only at the end becomes a completely white viewport. */
.tunnel-whiteout {
  position: absolute !important;
  z-index: 180 !important;
  inset: auto !important;
  left: 50% !important;
  top: 56% !important;
  width: 12vmin !important;
  height: 12vmin !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  opacity: var(--tunnel-white-o,0) !important;
  transform: translate(-50%,-50%) scale(var(--tunnel-white-s,.025)) !important;
  transform-origin: 50% 50% !important;
  background: radial-gradient(circle,
    #fff 0 42%,
    rgba(255,255,255,.995) 58%,
    rgba(255,255,255,.96) 72%,
    rgba(255,255,255,.55) 84%,
    transparent 100%) !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}

@media (max-width:880px) {
  .journey-chapter { height: 800vh !important; }
  .threshold-fox {
    left: 50% !important;
    width: min(35vw,270px) !important;
    height: 58vh !important;
  }
}


/* v52 — use user supplied cutout entrance directly -----------------------
   The entrance frame now comes from the user provided asset with the hole
   already cut out. The portal mask is extracted from that same asset so the
   interior only ever renders through the true opening. */
.journey-portal {
  aspect-ratio:2047 / 1536 !important;
  top:var(--journey-tunnel-top,59.7%) !important;
}
.journey-entrance-frame {
  background:url('assets/journey-entrance-frame.webp') 50% 50% / 100% 100% no-repeat !important;
}
.portal-interior {
  clip-path:none !important;
  -webkit-clip-path:none !important;
  background:#020405 !important;
  -webkit-mask-image:url('assets/tunnel-aperture-mask.png') !important;
  mask-image:url('assets/tunnel-aperture-mask.png') !important;
  -webkit-mask-mode:alpha !important;
  mask-mode:alpha !important;
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  -webkit-mask-position:0 0 !important;
  mask-position:0 0 !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  overflow:hidden !important;
}
.portal-dark-core {
  background:radial-gradient(ellipse at 50% 58%, rgba(68,48,26,.18) 0 8%, rgba(15,12,10,.55) 24%, rgba(2,4,5,.88) 56%, rgba(1,2,3,1) 100%) !important;
}
.tunnel-slice {
  left:49.85% !important;
  top:57.75% !important;
  width:65.4% !important;
  aspect-ratio:1672 / 941 !important;
  transform-origin:50% 57.75% !important;
}
.tunnel-segment-wall,
.tunnel-segment-ring,
.tunnel-segment-floor {
  opacity:1 !important;
}
.slice-no-lamp .tunnel-segment-wall {
  background-image:url('assets/tunnel-segment-wall-right-nolamp.webp') !important;
}
.slice-no-lamp .tunnel-segment-wall-left { transform:scaleX(-1) !important; }
.slice-no-lamp .tunnel-segment-wall-right { transform:none !important; }
.slice-no-lamp .tunnel-segment-wall::after,
.slice-no-lamp .tunnel-segment-ring::after { content:none !important; }
.slice-no-lamp .tunnel-segment-wall { filter:brightness(.96) saturate(.88) !important; }
.slice-lamp .tunnel-segment-wall { filter:brightness(1.02) saturate(.95) !important; }
.portal-depth-glow {
  top:57.5% !important;
  width:7.5% !important;
  opacity:var(--portal-bloom-o,0) !important;
  transform:translate(-50%,-50%) scale(var(--portal-bloom-s,.03)) !important;
  background:radial-gradient(circle, rgba(255,255,255,1) 0 16%, rgba(255,252,234,.96) 24%, rgba(255,226,156,.58) 46%, rgba(255,180,67,.18) 68%, transparent 84%) !important;
  filter:blur(2.5px) !important;
}
.threshold-fox {
  left:56% !important;
  width:min(20vw,320px) !important;
  height:64vh !important;
}
.threshold-fox-glow {
  left:6% !important;
  top:20% !important;
  width:36% !important;
}
@media (max-width:880px) {
  .threshold-fox { left:55% !important; width:min(34vw,255px) !important; height:55vh !important; }
}


/* v53 — composite tunnel slices so depth is clearly visible ---------------- */
.portal-dark-core {
  background: radial-gradient(ellipse at 50% 60%, rgba(33,24,17,.12) 0 10%, rgba(10,10,10,.36) 24%, rgba(3,4,5,.56) 46%, rgba(2,3,4,.76) 72%, rgba(1,2,3,.92) 100%) !important;
}
.tunnel-slice {
  z-index: 10 !important;
  left:50% !important;
  top:57.8% !important;
  width:92% !important;
  background-repeat:no-repeat !important;
  background-position:50% 50% !important;
  background-size:100% 100% !important;
}
.tunnel-slice > * { display:none !important; }
.slice-no-lamp { background-image:url('assets/tunnel-slice-unlit.png') !important; }
.slice-lamp { background-image:url('assets/tunnel-slice-lit.png') !important; }
.portal-depth-glow { width:5.2% !important; }


/* v54 — force visible tunnel stack through exact alpha aperture ------------ */
.journey-entrance-frame { z-index:100 !important; }
.portal-interior {
  z-index:110 !important;
  background:#020304 !important;
  -webkit-mask-image:url('assets/tunnel-aperture-alpha.png') !important;
  mask-image:url('assets/tunnel-aperture-alpha.png') !important;
  -webkit-mask-mode:alpha !important;
  mask-mode:alpha !important;
  -webkit-mask-size:100% 100% !important;
  mask-size:100% 100% !important;
  -webkit-mask-position:center !important;
  mask-position:center !important;
  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;
  overflow:hidden !important;
}
.portal-dark-core {
  z-index:1 !important;
  background:
    linear-gradient(rgba(1,3,4,.28),rgba(1,3,4,.54)),
    url('assets/tunnel-slice-unlit.png') 50% 58% / 112% auto no-repeat !important;
}
.tunnel-slice {
  z-index:20 !important;
  left:50% !important;
  top:59.0% !important;
  width:110% !important;
  aspect-ratio:1672 / 941 !important;
  transform-origin:50% 59% !important;
  background-repeat:no-repeat !important;
  background-position:50% 50% !important;
  background-size:100% 100% !important;
}
.slice-no-lamp { background-image:url('assets/tunnel-slice-unlit.png') !important; }
.slice-lamp { background-image:url('assets/tunnel-slice-lit.png') !important; }
.portal-depth-glow { z-index:95 !important; }


/* v55 — no CSS aperture mask ---------------------------------------------
   The supplied entrance already has the centre physically cut out. The tunnel
   sits behind it in the exact opening bounding box; the opaque entrance artwork
   naturally hides the rectangular corners. */
.journey-entrance-frame {
  z-index:120 !important;
}
.portal-interior {
  z-index:90 !important;
  left:36.00% !important;
  top:33.27% !important;
  right:auto !important;
  bottom:auto !important;
  width:27.65% !important;
  height:49.03% !important;
  overflow:hidden !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  background:#020304 !important;
  isolation:isolate !important;
}
.portal-dark-core {
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  background:
    linear-gradient(rgba(1,3,4,.12),rgba(1,3,4,.38)),
    url('assets/tunnel-slice-unlit.png') 50% 50% / auto 105% no-repeat !important;
  opacity:1 !important;
}
.tunnel-slice {
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:236.5% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  transform-origin:50% 50% !important;
  background-repeat:no-repeat !important;
  background-position:50% 50% !important;
  background-size:100% 100% !important;
  pointer-events:none !important;
}
.tunnel-slice > * { display:none !important; }
.slice-no-lamp { background-image:url('assets/tunnel-slice-unlit.png') !important; }
.slice-lamp { background-image:url('assets/tunnel-slice-lit.png') !important; }
.portal-depth-glow {
  z-index:95 !important;
  left:50% !important;
  top:49% !important;
  width:13% !important;
}


/* v60 — smooth corridor master, matched lighting, near-locked motion ------- */
.portal-dark-core {
  background:
    linear-gradient(rgba(1,2,3,.04),rgba(1,2,3,.18)),
    url('assets/tunnel-smooth-unlit.jpg') 50% 50% / 100% 100% no-repeat !important;
}
.tunnel-slice {
  left:50% !important;
  top:50% !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  background-position:50% 50% !important;
  background-size:100% 100% !important;
  transform-origin:50% 55% !important;
}
.tunnel-slice > * { display:none !important; }
.slice-no-lamp { background-image:url('assets/tunnel-smooth-unlit.jpg') !important; }
.slice-lamp-left { background-image:url('assets/tunnel-smooth-lamp-left.jpg') !important; }
.slice-lamp-right { background-image:url('assets/tunnel-smooth-lamp-right.jpg') !important; }
/* Anchor RÆDEL's glow to the visible lantern. The fox artwork is bottom aligned
   in a taller container, so the flame is much lower than the old percentage. */
.threshold-fox-glow {
  left:1.5% !important;
  top:36.6% !important;
  width:33% !important;
  filter:blur(10px) !important;
}
.threshold-fox::after {
  left:15.0% !important;
  top:44.4% !important;
  width:8% !important;
  filter:blur(2px) !important;
}


/* v63 — post-whiteout player choice scene -------------------------------- */
.players-scene {
  position:absolute;
  inset:0;
  z-index:170;
  opacity:var(--players-scene-o,0);
  pointer-events:none;
  overflow:hidden;
}
.players-panorama,
.players-copy {
  position:absolute;
  inset:0;
}
.players-panorama {
  transform:translate3d(var(--players-pan-x,0vw),0,0);
  will-change:transform,opacity;
}
.players-sky,
.players-sun-haze,
.players-field-back,
.players-field-mid,
.players-field-front,
.players-wood-edge,
.players-woods,
.players-woods-front,
.players-windmill {
  position:absolute;
  pointer-events:none;
}
.players-sky {
  inset:0;
  background:
    radial-gradient(circle at 58% 26%, rgba(255,244,212,.18), transparent 24%),
    linear-gradient(180deg, #c2d8ef 0%, #b6d2e6 23%, #9dbfd6 44%, #87aebc 58%, #79965d 59%, #86a45f 69%, #759051 100%);
}
.players-sun-haze {
  right:22%; top:16%; width:34vmax; height:34vmax; border-radius:50%;
  background:radial-gradient(circle, rgba(255,247,224,.76) 0%, rgba(255,239,200,.42) 18%, rgba(255,239,200,.16) 34%, transparent 68%);
  filter:blur(12px);
}
.players-field-back {
  left:-6%; right:-6%; bottom:18%; height:28%;
  background:
    radial-gradient(ellipse at 20% 32%, rgba(217,192,118,.55), transparent 22%),
    linear-gradient(180deg, #94af68 0%, #88a458 24%, #759148 64%, #65803e 100%);
  clip-path:polygon(0 53%, 20% 42%, 42% 48%, 61% 36%, 79% 47%, 100% 34%, 100% 100%, 0 100%);
}
.players-field-mid {
  left:-8%; right:-8%; bottom:6%; height:36%;
  background:
    repeating-linear-gradient(100deg, rgba(183,154,89,.22) 0 12px, rgba(116,141,76,.08) 12px 24px),
    linear-gradient(180deg, #8aa655 0%, #7b9449 26%, #6b8340 56%, #5d7337 100%);
  clip-path:polygon(0 42%, 15% 39%, 30% 46%, 49% 34%, 70% 44%, 84% 40%, 100% 48%, 100% 100%, 0 100%);
}
.players-field-front {
  left:-10%; right:-10%; bottom:-4%; height:30%;
  background:
    repeating-linear-gradient(92deg, rgba(120,97,49,.16) 0 10px, rgba(0,0,0,0) 10px 20px),
    linear-gradient(180deg, #6f8842 0%, #5d7338 40%, #4d5f2f 100%);
  clip-path:polygon(0 26%, 16% 33%, 32% 24%, 47% 30%, 64% 22%, 80% 28%, 100% 19%, 100% 100%, 0 100%);
}
.players-windmill {
  left:9%; bottom:15%; width:min(19vw,280px); height:min(52vh,500px);
  transform:translate3d(var(--players-windmill-x,0vw), var(--players-windmill-y,0vh), 0) scale(var(--players-windmill-s,1));
  transform-origin:50% 100%;
}
.windmill-body {
  position:absolute; left:50%; bottom:0; width:42%; height:70%; transform:translateX(-50%);
  background:linear-gradient(180deg, #d8c39a 0%, #c8af84 38%, #b39468 70%, #9d7b50 100%);
  clip-path:polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  box-shadow:inset 0 0 0 2px rgba(102,72,34,.18), inset -18px 0 26px rgba(86,58,22,.20);
}
.windmill-cap {
  position:absolute; left:50%; bottom:67%; width:48%; height:14%; transform:translateX(-50%);
  background:linear-gradient(180deg, #5d4737 0%, #3e2d23 100%);
  clip-path:polygon(8% 100%, 50% 0, 92% 100%);
}
.windmill-door {
  position:absolute; left:50%; bottom:0; width:10%; height:16%; transform:translateX(-50%);
  background:linear-gradient(180deg, #5e4026 0%, #412914 100%); border-radius:8px 8px 0 0;
}
.windmill-window { position:absolute; left:50%; transform:translateX(-50%); width:8%; height:6%; background:#5c4636; border:1px solid rgba(255,244,220,.32); }
.windmill-window-top { bottom:43%; }
.windmill-window-mid { bottom:26%; }
.windmill-blades {
  position:absolute; left:50%; bottom:62%; width:60%; aspect-ratio:1; transform:translate(-50%,0) rotate(var(--windmill-rot,0deg));
  transform-origin:50% 50%;
}
.blade {
  position:absolute; left:50%; top:50%; width:10%; height:46%; transform-origin:50% 92%;
  background:linear-gradient(180deg, rgba(244,236,214,.98) 0%, rgba(236,224,197,.95) 58%, rgba(180,153,108,.94) 100%);
  clip-path:polygon(50% 0, 86% 16%, 74% 100%, 26% 100%, 14% 16%);
  box-shadow:inset 0 0 0 1px rgba(104,74,41,.18);
}
.blade-a { transform:translate(-50%,-96%) rotate(0deg); }
.blade-b { transform:translate(-50%,-96%) rotate(90deg); }
.blade-c { transform:translate(-50%,-96%) rotate(180deg); }
.blade-d { transform:translate(-50%,-96%) rotate(270deg); }
.blade-hub {
  position:absolute; left:50%; top:50%; width:12%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, #7f6034 0%, #614623 72%, #3f2a16 100%);
  box-shadow:0 0 0 2px rgba(236,214,168,.15);
}
.players-wood-edge {
  right:16%; bottom:18%; width:22%; height:38%;
  background:linear-gradient(180deg, rgba(76,104,68,.65) 0%, rgba(44,67,36,.92) 100%);
  clip-path:polygon(0 100%, 0 38%, 8% 22%, 16% 32%, 24% 14%, 31% 26%, 42% 8%, 53% 24%, 63% 10%, 74% 28%, 83% 16%, 90% 34%, 96% 26%, 100% 100%);
  filter:brightness(.92);
}
.players-woods {
  right:-4%; bottom:13%; width:48%; height:58%;
  background:
    linear-gradient(180deg, rgba(74,102,69,.35) 0%, rgba(35,57,31,.55) 36%, rgba(22,34,20,.92) 100%),
    radial-gradient(circle at 20% 42%, rgba(159,182,115,.18), transparent 28%),
    radial-gradient(circle at 72% 28%, rgba(120,145,92,.16), transparent 24%);
  clip-path:polygon(0 100%, 0 24%, 4% 14%, 8% 23%, 12% 12%, 16% 25%, 20% 10%, 24% 22%, 28% 8%, 33% 20%, 39% 7%, 44% 23%, 49% 10%, 55% 24%, 61% 12%, 67% 25%, 74% 11%, 80% 28%, 86% 16%, 93% 34%, 100% 25%, 100% 100%);
}
.players-woods-front {
  left:48%; right:-12%; bottom:-3%; height:38%;
  background:
    linear-gradient(180deg, rgba(61,84,43,.20) 0%, rgba(31,44,23,.92) 54%, rgba(18,24,14,1) 100%);
  clip-path:polygon(0 100%, 0 50%, 4% 40%, 8% 48%, 12% 34%, 17% 44%, 22% 30%, 27% 42%, 33% 28%, 38% 40%, 44% 26%, 50% 42%, 57% 29%, 63% 45%, 69% 33%, 75% 46%, 82% 36%, 89% 49%, 95% 41%, 100% 52%, 100% 100%);
}
.players-copy {
  z-index:4;
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  width:min(38vw,540px); left:58%; right:auto; top:0; bottom:0;
  padding:0 3vw 0 0;
  opacity:var(--players-copy-o,0);
  transform:translate3d(var(--players-copy-x,4vw), var(--players-copy-y,0vh), 0);
  pointer-events:auto;
}
.players-copy .eyebrow {
  color:rgba(224,190,105,.95);
}
.players-copy h2 {
  margin:.5rem 0 .9rem; color:#f7f5ed; font-size:clamp(3rem,5vw,5.6rem); line-height:.94; text-transform:uppercase;
}
.players-copy p {
  max-width:30rem; color:rgba(245,244,236,.82); line-height:1.7; font-size:1.05rem;
}
.players-actions { display:flex; gap:14px; flex-wrap:wrap; margin-top:1.5rem; }
@keyframes windmillSpin {
  from { transform:translate(-50%,0) rotate(0deg); }
  to { transform:translate(-50%,0) rotate(360deg); }
}
.players-scene .windmill-blades {
  animation:windmillSpin 16s linear infinite;
}
@media (max-width: 880px) {
  .players-copy { width:min(70vw,420px); left:44%; padding-right:4vw; }
  .players-windmill { left:4%; width:min(27vw,180px); height:min(40vh,330px); }
  .players-wood-edge { right:9%; width:28%; }
  .players-woods { width:60%; }
}
/* Allow more scroll for the new post-whiteout scene. */
.journey-chapter { height: 920vh !important; }


/* v64 — proper whiteout handoff into player scene ------------------------ */
.journey-exterior {
  opacity: var(--pre-players-o, 1) !important;
}
.interior-world {
  opacity: calc(var(--interior-o,0) * var(--pre-players-o,1)) !important;
}
.players-scene {
  background: linear-gradient(180deg, #f7f8fb 0%, #eef2f7 18%, transparent 34%) !important;
}
.players-panorama {
  opacity: var(--players-panorama-o,1) !important;
}
.players-copy {
  opacity: var(--players-copy-o,0) !important;
}


/* v65 — white must fully complete before the field reveal ---------------- */
.players-scene {
  background:#f7f8fb !important;
}


/* v66 — scene-aware asset lifecycle ---------------------------------------
   These are resource-only overrides. Visual geometry/timing remains v65. */
:root {
  /* Opening scene is available immediately. */
  --asset-hero-backplate: url('assets/backplate.webp');
  --asset-hero-night: url('assets/backplate-night.webp');
  --asset-hero-castle: url('assets/castle-cutout.webp');
  --asset-hero-path: url('assets/path-cutout.webp');
  --asset-hero-atmosphere: url('assets/atmosphere.webp');
  --asset-hero-left: url('assets/foreground-right.webp');
  --asset-hero-right: url('assets/foreground-left.webp');
  --asset-hero-moon: url('assets/moon.webp');
  --asset-hero-fox: url('assets/fox.webp');

  /* Later cinematic scene starts cold and is warmed by asset-manager.js. */
  --asset-journey-backplate: none;
  --asset-journey-left: none;
  --asset-journey-right: none;
  --asset-journey-overlap-left: none;
  --asset-journey-overlap-right: none;
  --asset-journey-entrance: none;
  --asset-journey-fox: none;
  --asset-tunnel-unlit: none;
  --asset-tunnel-lamp-left: none;
  --asset-tunnel-lamp-right: none;

  --tunnel-anim-state: paused;
  --players-anim-state: paused;
}

/* Hero resource hooks. */
.p-backplate { background-image:var(--asset-hero-backplate) !important; }
.p-backplate-night { background-image:var(--asset-hero-night) !important; }
.p-castle { background-image:var(--asset-hero-castle) !important; }
.p-path { background-image:var(--asset-hero-path) !important; }
.p-atmosphere { background-image:var(--asset-hero-atmosphere) !important; }
.p-left { background-image:var(--asset-hero-left) !important; }
.p-right { background-image:var(--asset-hero-right) !important; }
.hero-artboard .moon-orbit { background-image:var(--asset-hero-moon) !important; }
.fox-image { background-image:var(--asset-hero-fox) !important; }

/* Tunnel/approach resource hooks. */
.journey-backplate { background-image:var(--asset-journey-backplate) !important; }
.journey-left { background-image:var(--asset-journey-left) !important; }
.journey-right { background-image:var(--asset-journey-right) !important; }
.journey-overlap-left { background-image:var(--asset-journey-overlap-left) !important; }
.journey-overlap-right { background-image:var(--asset-journey-overlap-right) !important; }
.journey-entrance-frame { background-image:var(--asset-journey-entrance) !important; }
.threshold-fox-image { background-image:var(--asset-journey-fox) !important; }
.portal-dark-core {
  background:
    linear-gradient(rgba(1,2,3,.04),rgba(1,2,3,.18)),
    var(--asset-tunnel-unlit) 50% 50% / 100% 100% no-repeat !important;
}
.slice-no-lamp { background-image:var(--asset-tunnel-unlit) !important; }
.slice-lamp-left { background-image:var(--asset-tunnel-lamp-left) !important; }
.slice-lamp-right { background-image:var(--asset-tunnel-lamp-right) !important; }

/* Off-screen perpetual animations consume no animation frames. */
.threshold-fox-glow,
.threshold-fox::after,
.scan-line {
  animation-play-state:var(--tunnel-anim-state) !important;
}
.players-scene .windmill-blades {
  animation-play-state:var(--players-anim-state) !important;
}

/* Help the browser isolate the heavy cinematic layers. */
.hero-artboard,
.journey-exterior,
.players-panorama {
  contain:paint;
}

/* v68 — semantic, indexable content layer ---------------------------------
   The cinematic chapters above remain untouched. This conventional content
   starts only after the scroll experience and remains in the document at all
   times for visitors, assistive technology and search engines. */
.skip-link {
  position:fixed;
  z-index:1000;
  left:18px;
  top:14px;
  padding:10px 14px;
  border-radius:6px;
  background:#fffdf6;
  color:#071c28;
  font-weight:800;
  transform:translateY(-180%);
  transition:transform .15s ease;
}
.skip-link:focus { transform:translateY(0); }

.seo-content {
  position:relative;
  z-index:5;
  background:#061721;
  color:var(--white);
}
.seo-section {
  scroll-margin-top:82px;
  padding:clamp(78px,9vw,138px) 6vw;
  background:
    radial-gradient(circle at 8% 8%, rgba(215,162,77,.08), transparent 25%),
    #071c28;
}
.seo-section-alt {
  background:
    radial-gradient(circle at 86% 10%, rgba(22,82,96,.22), transparent 30%),
    linear-gradient(180deg,#061721,#04131c);
}
.seo-section-inner { width:min(1180px,100%); margin:0 auto; }
.seo-intro {
  border-top:1px solid rgba(240,202,121,.18);
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 30%),
    #071c28;
}
.seo-intro-grid,
.seo-feature-layout,
.seo-faq-layout {
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:clamp(42px,7vw,110px);
  align-items:start;
}
.seo-section h2 {
  margin:.6rem 0 1.2rem;
  max-width:920px;
  font-size:clamp(2.5rem,5vw,5.2rem);
  line-height:.96;
  letter-spacing:-.04em;
  text-transform:uppercase;
  text-wrap:balance;
}
.seo-lead p,
.seo-section-copy,
.seo-cta p {
  color:rgba(255,253,246,.78);
  font-size:clamp(1.02rem,1.3vw,1.2rem);
  line-height:1.78;
}
.seo-lead p:first-child { margin-top:0; }
.seo-section-copy { max-width:830px; margin:0 0 2.2rem; }
.seo-card-grid {
  display:grid;
  gap:18px;
  margin-top:clamp(38px,5vw,68px);
}
.seo-card-grid-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.seo-card-grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.seo-card {
  min-height:220px;
  padding:28px;
  border:1px solid rgba(240,202,121,.16);
  border-radius:14px;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}
.seo-card h3 {
  margin:.75rem 0 .7rem;
  color:#fffdf6;
  font-size:1.25rem;
}
.seo-card p { margin:0; color:rgba(255,253,246,.68); line-height:1.68; }
.seo-step {
  color:var(--gold-soft);
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.1rem;
  letter-spacing:.08em;
}
.seo-feature-list {
  list-style:none;
  margin:18px 0 0;
  padding:0;
  border-top:1px solid rgba(240,202,121,.18);
}
.seo-feature-list li {
  position:relative;
  padding:18px 10px 18px 34px;
  border-bottom:1px solid rgba(240,202,121,.13);
  color:rgba(255,253,246,.82);
  line-height:1.5;
}
.seo-feature-list li::before {
  content:'✦';
  position:absolute;
  left:4px;
  top:18px;
  color:var(--gold-soft);
}
.seo-faq-list { border-top:1px solid rgba(240,202,121,.18); }
.seo-faq-list details { border-bottom:1px solid rgba(240,202,121,.15); }
.seo-faq-list summary {
  cursor:pointer;
  padding:20px 34px 20px 0;
  color:#fffdf6;
  font-weight:760;
  line-height:1.45;
}
.seo-faq-list details p {
  margin:0;
  padding:0 34px 22px 0;
  color:rgba(255,253,246,.7);
  line-height:1.7;
}
.seo-cta {
  text-align:center;
  background:
    radial-gradient(circle at 50% 30%,rgba(215,162,77,.14),transparent 34%),
    linear-gradient(180deg,#061721,#020b10);
}
.seo-cta-inner { max-width:900px; }
.seo-cta h2 { margin-left:auto; margin-right:auto; }
.seo-cta p { max-width:700px; margin:0 auto 2rem; }
.site-footer {
  position:relative;
  z-index:5;
  padding:34px 6vw;
  background:#02090d;
  border-top:1px solid rgba(240,202,121,.12);
  color:rgba(255,253,246,.62);
}
.site-footer-inner {
  width:min(1180px,100%);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:28px;
}
.footer-brand {
  color:var(--gold-soft);
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:.16em;
  font-size:1.35rem;
}
.site-footer p { margin:0; flex:1; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:18px; }
.site-footer nav a:hover { color:var(--gold-soft); }

@media (max-width:980px) {
  .seo-card-grid-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .seo-card-grid-three { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .seo-intro-grid,
  .seo-feature-layout,
  .seo-faq-layout { grid-template-columns:1fr; gap:26px; }
  .seo-card-grid-four,
  .seo-card-grid-three { grid-template-columns:1fr; }
  .seo-card { min-height:0; }
  .site-footer-inner { align-items:flex-start; flex-direction:column; }
}