: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-primary:hover,.button-primary:focus-visible { background:linear-gradient(180deg,#efc36e,#c78a37); color:#061a25; filter:brightness(1.03); }
.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:.92; 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;
}

#faq {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#04131c;
}
#faq::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--asset-faq-raedel-backdrop,none) left center / cover no-repeat;
  opacity:.96;
  z-index:0;
}
#faq::after {
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(4,15,24,.88) 0%, rgba(4,15,24,.78) 26%, rgba(4,15,24,.64) 48%, rgba(4,15,24,.86) 100%),
    radial-gradient(circle at 18% 46%, rgba(239,178,80,.10), transparent 28%),
    linear-gradient(180deg, rgba(2,9,14,.18), rgba(2,9,14,.48));
  z-index:0;
  pointer-events:none;
}
#faq .seo-section-inner {
  position:relative;
  z-index:1;
}
.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;
  justify-content:space-between;
  gap:40px;
}
.footer-identity {
  display:flex;
  align-items:center;
  gap:24px;
  min-width:0;
}
.footer-brand {
  flex:0 0 auto;
  color:var(--gold-soft);
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:.16em;
  font-size:1.35rem;
}
.footer-copy { display:grid; gap:5px; }
.site-footer p { margin:0; }
.footer-product-credit {
  color:rgba(255,253,246,.46);
  font-size:.82rem;
  line-height:1.45;
}
.footer-product-credit a {
  color:rgba(240,202,121,.82);
  text-decoration:none;
}
.footer-product-credit a:hover { color:var(--gold-soft); }
.site-footer nav { display:flex; flex-wrap:wrap; justify-content:flex-end; 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; }
  .footer-identity { align-items:flex-start; flex-direction:column; gap:10px; }
  .site-footer nav { justify-content:flex-start; }
}

/* v72 — final field / woodland environment framework ----------------------
   Artwork-free geometry for chapter 3. Real generated assets will replace
   the placeholder fills one layer at a time; the scroll contract remains.
   IMPORTANT: this block affects only the post-whiteout .players-scene. */
.players-scene {
  --players-world-w: 166vw;
}

.players-panorama {
  inset:0 !important;
  transform:none !important;
  overflow:visible;
  will-change:opacity;
}

.players-layer {
  position:absolute;
  pointer-events:none;
  will-change:transform;
  backface-visibility:hidden;
}

/* Far atmosphere: deliberately moves least. */
.players-sky {
  inset:auto !important;
  left:0;
  top:0;
  width:var(--players-world-w);
  height:100%;
  transform:translate3d(var(--players-sky-x,0vw),0,0);
  background:
    radial-gradient(circle at 36vw 21vh, rgba(255,246,218,.36), transparent 18vw),
    linear-gradient(180deg,#bad4e7 0%,#c8dce8 36%,#d9dfcf 57%,#9aae72 58%,#81965d 100%) !important;
}

.players-sun-haze {
  inset:auto !important;
  left:20vw;
  top:10vh;
  width:42vmax;
  height:42vmax;
  transform:translate3d(var(--players-haze-x,0vw),0,0);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,247,224,.68) 0%,rgba(255,238,192,.30) 23%,rgba(255,238,192,.10) 44%,transparent 70%) !important;
  filter:blur(7px);
  opacity:.82;
}

/* Rolling South-East England / Downs silhouette. */
.players-horizon {
  left:-2vw;
  bottom:32vh;
  width:168vw;
  height:31vh;
  transform:translate3d(var(--players-horizon-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 13% 75%,rgba(119,143,87,.82) 0 16%,transparent 16.5%),
    radial-gradient(ellipse at 33% 83%,rgba(112,138,80,.92) 0 20%,transparent 20.5%),
    radial-gradient(ellipse at 58% 78%,rgba(106,130,76,.92) 0 23%,transparent 23.5%),
    radial-gradient(ellipse at 83% 84%,rgba(96,122,70,.96) 0 22%,transparent 22.5%);
  opacity:.82;
}

.players-field-back {
  inset:auto !important;
  left:-2vw;
  bottom:17vh;
  width:170vw;
  height:42vh;
  transform:translate3d(var(--players-field-back-x,0vw),0,0);
  background:
    linear-gradient(93deg,transparent 0 10%,rgba(190,164,99,.22) 10% 12%,transparent 12% 28%,rgba(122,143,76,.18) 28% 31%,transparent 31%),
    linear-gradient(180deg,#9caf68 0%,#8fa25c 32%,#7d934d 72%,#728642 100%) !important;
  clip-path:polygon(0 32%,10% 27%,22% 34%,35% 23%,48% 31%,63% 20%,77% 29%,89% 20%,100% 28%,100% 100%,0 100%);
}

.players-field-mid {
  inset:auto !important;
  left:-4vw;
  bottom:3vh;
  width:174vw;
  height:47vh;
  transform:translate3d(var(--players-field-mid-x,0vw),0,0);
  background:
    repeating-linear-gradient(101deg,rgba(182,153,84,.12) 0 9px,rgba(76,103,51,.04) 9px 22px),
    linear-gradient(180deg,#8fa353 0%,#809548 34%,#6e843e 70%,#637638 100%) !important;
  clip-path:polygon(0 28%,12% 34%,25% 24%,39% 31%,52% 21%,67% 29%,80% 19%,92% 27%,100% 23%,100% 100%,0 100%);
}

/* Placeholder walking line. This will become a transparent path artwork. */
.players-path {
  left:19vw;
  bottom:-2vh;
  width:105vw;
  height:43vh;
  transform:translate3d(var(--players-path-x,0vw),0,0);
  background:linear-gradient(102deg,transparent 0 25%,rgba(213,193,145,.55) 26% 28%,rgba(192,169,118,.72) 31% 37%,rgba(201,181,134,.45) 41% 45%,transparent 48% 100%);
  clip-path:polygon(0 100%,9% 100%,25% 58%,42% 36%,61% 26%,84% 18%,100% 14%,100% 22%,86% 25%,64% 34%,47% 45%,31% 66%,18% 100%);
  opacity:.78;
}

.players-field-front {
  inset:auto !important;
  left:-7vw;
  bottom:-8vh;
  width:180vw;
  height:39vh;
  transform:translate3d(var(--players-field-front-x,0vw),0,0);
  background:
    repeating-linear-gradient(88deg,rgba(76,91,41,.18) 0 3px,transparent 3px 12px),
    linear-gradient(180deg,#718543 0%,#607338 50%,#4c5c2d 100%) !important;
  clip-path:polygon(0 19%,9% 24%,18% 17%,29% 25%,42% 16%,54% 24%,68% 15%,82% 23%,94% 14%,100% 18%,100% 100%,0 100%);
}

/* Windmill is an independent object. Body and sails are separate art slots. */
.players-windmill {
  inset:auto !important;
  left:9vw;
  bottom:15vh;
  width:clamp(190px,19vw,310px);
  height:clamp(330px,53vh,520px);
  transform:translate3d(var(--players-windmill-x,0vw),var(--players-windmill-y,0vh),0) scale(var(--players-windmill-s,1)) !important;
  transform-origin:50% 100%;
  will-change:transform;
  z-index:7;
}

/* Temporary UK tower-mill silhouette; to be replaced by generated body art. */
.windmill-body {
  width:49% !important;
  height:68% !important;
  background:
    repeating-radial-gradient(ellipse at 40% 55%,rgba(79,70,54,.10) 0 2px,transparent 2px 8px),
    linear-gradient(100deg,#b5ab94 0%,#d6ceba 48%,#aaa18d 100%) !important;
  clip-path:polygon(23% 0,77% 0,94% 100%,6% 100%) !important;
  box-shadow:inset -20px 0 30px rgba(49,44,35,.18),0 7px 18px rgba(42,48,30,.15) !important;
}
.windmill-cap {
  bottom:66% !important;
  width:55% !important;
  height:13% !important;
  border-radius:50% 50% 10% 10% / 65% 65% 20% 20%;
  clip-path:none !important;
  background:linear-gradient(180deg,#f4f1e7 0%,#ddd8cc 58%,#b9b5ac 100%) !important;
  box-shadow:0 4px 8px rgba(39,41,30,.16);
}
.windmill-door { width:13% !important; height:15% !important; background:#3e3125 !important; }
.windmill-window { width:9% !important; height:5.5% !important; background:#33403e !important; border:2px solid rgba(237,236,221,.52) !important; }

/* Temporary lattice-like sails, intentionally still separate from the body. */
.windmill-blades {
  left:50% !important;
  bottom:59% !important;
  width:78% !important;
  z-index:4;
}
.blade {
  width:9% !important;
  height:48% !important;
  background:
    repeating-linear-gradient(90deg,rgba(101,95,82,.42) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(101,95,82,.38) 0 1px,transparent 1px 7px),
    rgba(245,244,235,.94) !important;
  border:1px solid rgba(104,99,86,.35);
  clip-path:polygon(42% 0,78% 7%,72% 100%,28% 100%,22% 7%) !important;
}
.blade-hub { width:13% !important; background:radial-gradient(circle,#e4ded1 0%,#9c9485 60%,#5d5548 100%) !important; }

/* Woodland occupies the unseen right side of the panorama at first and moves
   into the viewport with progressively stronger foreground parallax. */
.players-wood-edge {
  inset:auto !important;
  left:72vw;
  bottom:18vh;
  width:37vw;
  height:51vh;
  transform:translate3d(var(--players-wood-edge-x,0vw),0,0);
  background:
    radial-gradient(circle at 10% 36%,#647b4b 0 15%,transparent 16%),
    radial-gradient(circle at 31% 30%,#506b42 0 19%,transparent 20%),
    radial-gradient(circle at 56% 35%,#47603a 0 22%,transparent 23%),
    radial-gradient(circle at 81% 29%,#3e5836 0 20%,transparent 21%),
    linear-gradient(180deg,transparent 0 31%,#354d32 32% 100%) !important;
  clip-path:none !important;
  filter:none !important;
  opacity:.96;
  z-index:8;
}

.players-woods-back {
  left:83vw;
  bottom:12vh;
  width:86vw;
  height:72vh;
  transform:translate3d(var(--players-woods-back-x,0vw),0,0);
  background:
    repeating-linear-gradient(91deg,transparent 0 7%,rgba(57,63,42,.62) 7.2% 8.2%,transparent 8.4% 13%),
    radial-gradient(ellipse at 24% 26%,rgba(92,117,72,.92) 0 20%,transparent 21%),
    radial-gradient(ellipse at 56% 22%,rgba(70,96,59,.98) 0 27%,transparent 28%),
    radial-gradient(ellipse at 88% 28%,rgba(57,82,49,.98) 0 23%,transparent 24%),
    linear-gradient(180deg,transparent 0 25%,rgba(50,69,43,.88) 26% 100%);
  opacity:.90;
  z-index:9;
}

.players-woods-mid {
  left:88vw;
  bottom:0;
  width:82vw;
  height:78vh;
  transform:translate3d(var(--players-woods-mid-x,0vw),0,0);
  background:
    repeating-linear-gradient(92deg,transparent 0 10%,rgba(40,43,30,.82) 10.5% 12%,transparent 12.4% 20%),
    radial-gradient(ellipse at 18% 24%,rgba(75,98,59,.92) 0 19%,transparent 20%),
    radial-gradient(ellipse at 46% 19%,rgba(59,82,49,.98) 0 26%,transparent 27%),
    radial-gradient(ellipse at 76% 25%,rgba(45,68,42,.98) 0 25%,transparent 26%),
    linear-gradient(180deg,transparent 0 30%,rgba(36,51,31,.90) 31% 100%);
  z-index:10;
}

.players-woods-front {
  inset:auto !important;
  left:90vw;
  bottom:-5vh;
  width:84vw;
  height:55vh;
  transform:translate3d(var(--players-woods-front-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 9% 72%,#3d5634 0 12%,transparent 13%),
    radial-gradient(ellipse at 28% 68%,#314a2d 0 16%,transparent 17%),
    radial-gradient(ellipse at 51% 73%,#294127 0 19%,transparent 20%),
    radial-gradient(ellipse at 75% 69%,#253b24 0 19%,transparent 20%),
    linear-gradient(180deg,transparent 0 35%,#243720 36% 100%) !important;
  clip-path:none !important;
  z-index:12;
}

.players-woods-canopy {
  left:79vw;
  top:-8vh;
  width:92vw;
  height:52vh;
  transform:translate3d(var(--players-woods-canopy-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 8% 10%,rgba(48,70,42,.94) 0 17%,transparent 18%),
    radial-gradient(ellipse at 29% 4%,rgba(42,65,39,.98) 0 22%,transparent 23%),
    radial-gradient(ellipse at 54% 7%,rgba(35,57,35,.98) 0 24%,transparent 25%),
    radial-gradient(ellipse at 80% 2%,rgba(30,51,32,.98) 0 25%,transparent 26%),
    radial-gradient(ellipse at 100% 14%,rgba(27,47,30,.98) 0 22%,transparent 23%);
  z-index:13;
}

/* Copy is anchored to the clearing rather than travelling with the field. */
.players-copy {
  left:auto !important;
  right:5vw !important;
  width:min(39vw,560px) !important;
  z-index:20 !important;
}

/* Art replacement contract: generated files can be attached directly to any
   data-art-slot layer without changing its geometry. */
.players-panorama [data-art-slot] {
  background-repeat:no-repeat;
  background-position:center;
}

@media (max-width:880px) {
  .players-scene { --players-world-w:190vw; }
  .players-windmill {
    left:7vw !important;
    width:clamp(150px,28vw,210px) !important;
    height:clamp(280px,44vh,390px) !important;
  }
  .players-wood-edge { left:76vw !important; width:48vw !important; }
  .players-woods-back { left:87vw !important; width:108vw !important; }
  .players-woods-mid { left:91vw !important; width:104vw !important; }
  .players-woods-front { left:94vw !important; width:104vw !important; }
  .players-woods-canopy { left:83vw !important; width:110vw !important; }
  .players-copy {
    right:7vw !important;
    width:min(72vw,430px) !important;
  }
}

/* v74 — slightly larger header logo only ------------------------------- */
.brand-logo {
  width: 188px !important;
  max-height: 64px !important;
}

/* v75 — Chapter 4: woodland trail mechanics ------------------------------
   Independent post-hero scroll chapter. It deliberately does not alter the
   locked hero/tunnel timeline in app.js. Generated artwork can replace the
   data-art-slot placeholders without changing this scroll geometry. */
.how-chapter {
  position:relative;
  z-index:6;
  height:400vh;
  padding:0 !important;
  scroll-margin-top:0;
  background:#102116;
  color:var(--white);
}

.how-sticky {
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 70% 20%,rgba(235,190,96,.12),transparent 28%),
    linear-gradient(180deg,#243a26 0%,#172d1c 48%,#0b1a11 100%);
}

.how-trail-art,
.how-layer {
  position:absolute;
  pointer-events:none;
}
.how-trail-art { inset:0; z-index:0; overflow:hidden; }
.how-layer {
  top:0;
  height:100%;
  width:270vw;
  left:0;
  will-change:transform;
  backface-visibility:hidden;
  background-repeat:no-repeat;
  background-position:center;
}

.how-sky {
  transform:translate3d(var(--how-sky-x,0vw),0,0);
  background:
    radial-gradient(circle at 18% 20%,rgba(255,224,159,.22),transparent 22%),
    linear-gradient(180deg,#496045 0%,#6d7c55 36%,#42543b 70%,transparent 100%);
  z-index:1;
}
.how-back {
  transform:translate3d(var(--how-back-x,0vw),0,0);
  background:
    repeating-linear-gradient(90deg,transparent 0 11vw,rgba(28,52,31,.42) 11.2vw 12.2vw,transparent 12.5vw 21vw),
    radial-gradient(ellipse at 8% 42%,#29472e 0 9%,transparent 9.5%),
    radial-gradient(ellipse at 24% 39%,#315237 0 11%,transparent 11.5%),
    radial-gradient(ellipse at 43% 41%,#26482f 0 10%,transparent 10.5%),
    radial-gradient(ellipse at 62% 38%,#32543a 0 12%,transparent 12.5%),
    radial-gradient(ellipse at 81% 40%,#294930 0 11%,transparent 11.5%),
    linear-gradient(180deg,transparent 0 37%,#27452d 38% 100%);
  opacity:.92;
  z-index:2;
}
.how-mid {
  transform:translate3d(var(--how-mid-x,0vw),0,0);
  background:
    repeating-linear-gradient(90deg,transparent 0 14vw,rgba(17,37,23,.86) 14.2vw 16vw,transparent 16.2vw 27vw),
    radial-gradient(ellipse at 15% 63%,#203d27 0 10%,transparent 10.5%),
    radial-gradient(ellipse at 33% 61%,#1d3924 0 12%,transparent 12.5%),
    radial-gradient(ellipse at 52% 62%,#234229 0 11%,transparent 11.5%),
    radial-gradient(ellipse at 72% 61%,#1a3521 0 12%,transparent 12.5%),
    radial-gradient(ellipse at 91% 64%,#24432a 0 12%,transparent 12.5%);
  z-index:4;
}
.how-path {
  top:auto;
  bottom:-5vh;
  height:58vh;
  transform:translate3d(var(--how-path-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 12% 104%,rgba(211,172,104,.72) 0 12%,transparent 12.5%),
    radial-gradient(ellipse at 30% 102%,rgba(186,147,85,.69) 0 13%,transparent 13.5%),
    radial-gradient(ellipse at 49% 104%,rgba(206,164,94,.67) 0 12%,transparent 12.5%),
    radial-gradient(ellipse at 68% 103%,rgba(181,143,82,.68) 0 13%,transparent 13.5%),
    radial-gradient(ellipse at 87% 103%,rgba(202,161,91,.66) 0 12%,transparent 12.5%),
    linear-gradient(180deg,transparent 0 26%,rgba(43,55,31,.18) 27% 100%);
  filter:saturate(.88);
  z-index:5;
}
.how-front {
  top:auto;
  bottom:-2vh;
  height:45vh;
  transform:translate3d(var(--how-front-x,0vw),0,0);
  background:
    repeating-linear-gradient(102deg,transparent 0 1.8vw,rgba(25,58,31,.75) 1.9vw 2.05vw,transparent 2.15vw 4vw),
    radial-gradient(ellipse at 8% 85%,#122c1b 0 8%,transparent 8.4%),
    radial-gradient(ellipse at 27% 88%,#183420 0 10%,transparent 10.4%),
    radial-gradient(ellipse at 48% 86%,#112b1a 0 9%,transparent 9.4%),
    radial-gradient(ellipse at 69% 89%,#17341f 0 10%,transparent 10.4%),
    radial-gradient(ellipse at 90% 86%,#102718 0 10%,transparent 10.4%);
  z-index:8;
}
.how-canopy {
  height:40vh;
  transform:translate3d(var(--how-canopy-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 4% 0%,#102719 0 12%,transparent 12.4%),
    radial-gradient(ellipse at 18% 2%,#17331f 0 14%,transparent 14.4%),
    radial-gradient(ellipse at 36% -2%,#11291a 0 15%,transparent 15.4%),
    radial-gradient(ellipse at 55% 2%,#16321e 0 15%,transparent 15.4%),
    radial-gradient(ellipse at 74% -1%,#102819 0 15%,transparent 15.4%),
    radial-gradient(ellipse at 93% 2%,#17331f 0 15%,transparent 15.4%);
  z-index:9;
}

.how-object {
  position:absolute;
  z-index:7;
  pointer-events:none;
  transform:translate3d(var(--how-object-x,0vw),0,0);
  will-change:transform;
}
.how-marker {
  left:70vw;
  bottom:20vh;
  width:160px;
  height:300px;
}
.how-marker-post {
  position:absolute;
  left:70px;
  bottom:0;
  width:18px;
  height:220px;
  border-radius:8px 8px 2px 2px;
  background:linear-gradient(90deg,#49311e,#7a5430 45%,#3b281a);
  box-shadow:0 12px 24px rgba(0,0,0,.28);
}
.how-marker-sign {
  position:absolute;
  left:3px;
  top:18px;
  width:154px;
  padding:18px 10px;
  border:1px solid rgba(240,202,121,.48);
  border-radius:8px;
  background:linear-gradient(180deg,#63452a,#3c291b);
  color:#f0ca79;
  text-align:center;
  font-family:Georgia,'Times New Roman',serif;
  letter-spacing:.16em;
  box-shadow:0 16px 35px rgba(0,0,0,.28);
}
.how-marker-glyph {
  position:absolute;
  left:60px;
  top:95px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid rgba(240,202,121,.5);
  border-radius:50%;
  color:#f0ca79;
  background:#18301e;
}

.how-puzzle-object {
  left:140vw;
  bottom:15vh;
  width:300px;
  height:300px;
}
.puzzle-stone {
  position:absolute;
  border-radius:50%;
  border:12px solid #766e57;
  background:
    repeating-conic-gradient(from 5deg,rgba(32,53,39,.75) 0 7deg,rgba(184,156,97,.32) 8deg 13deg),
    radial-gradient(circle,#405044 0 46%,#1e3026 47% 100%);
  box-shadow:0 24px 45px rgba(0,0,0,.38), inset 0 0 22px rgba(240,202,121,.12);
}
.puzzle-stone-a { width:230px; height:230px; left:34px; top:36px; }
.puzzle-stone-b { width:166px; height:166px; left:66px; top:68px; transform:rotate(14deg); }
.puzzle-stone-c { width:102px; height:102px; left:98px; top:100px; transform:rotate(-12deg); }
.puzzle-core {
  position:absolute;
  left:125px;
  top:126px;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#f3d58c;
  font-size:32px;
  text-shadow:0 0 18px rgba(240,202,121,.65);
}

.how-story-object {
  left:210vw;
  bottom:16vh;
  width:330px;
  height:250px;
}
.story-table {
  position:absolute;
  left:10px;
  right:10px;
  bottom:0;
  height:95px;
  border-radius:50% 50% 8px 8px / 22% 22% 8px 8px;
  background:linear-gradient(180deg,#6a4829,#342319 72%);
  box-shadow:0 22px 45px rgba(0,0,0,.42);
}
.story-map {
  position:absolute;
  left:58px;
  bottom:69px;
  width:190px;
  height:120px;
  transform:rotate(-6deg);
  border:1px solid rgba(74,52,31,.5);
  border-radius:4px;
  background:
    linear-gradient(24deg,transparent 46%,rgba(123,80,45,.32) 47% 49%,transparent 50%),
    linear-gradient(-18deg,transparent 52%,rgba(123,80,45,.26) 53% 55%,transparent 56%),
    #d8c394;
  box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.story-lantern {
  position:absolute;
  right:10px;
  bottom:83px;
  width:48px;
  height:86px;
  border:4px solid #47331f;
  border-radius:20px 20px 8px 8px;
  background:radial-gradient(circle at 50% 58%,#ffe39b 0 18%,#d99838 19% 38%,rgba(96,57,26,.72) 39% 100%);
  box-shadow:0 0 35px rgba(236,173,73,.42);
}

.how-scene-heading,
.how-beat {
  position:absolute;
  z-index:20;
  pointer-events:none;
  text-shadow:0 2px 28px rgba(0,0,0,.5);
}
.how-scene-heading {
  left:7vw;
  top:20vh;
  width:min(760px,70vw);
  opacity:var(--how-heading-o,1);
  transform:translate3d(0,var(--how-heading-y,0px),0);
}
.how-scene-heading h2 {
  margin:.55rem 0 1rem;
  max-width:760px;
  color:#fffdf6;
  font-size:clamp(3.1rem,6.4vw,7rem);
  line-height:.89;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-wrap:balance;
}
.how-scene-heading p {
  max-width:670px;
  margin:0;
  color:rgba(255,253,246,.83);
  font-size:clamp(1rem,1.45vw,1.25rem);
  line-height:1.7;
}

.how-beat {
  left:7vw;
  bottom:12vh;
  width:min(590px,47vw);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  padding:24px 28px 26px 0;
}
.how-beat-discover { opacity:var(--how-discover-o,0); transform:translate3d(var(--how-discover-x,0px),var(--how-discover-y,0px),0); }
.how-beat-solve { opacity:var(--how-solve-o,0); transform:translate3d(var(--how-solve-x,0px),var(--how-solve-y,0px),0); }
.how-beat-story { opacity:var(--how-story-o,0); transform:translate3d(var(--how-story-x,0px),var(--how-story-y,0px),0); }
.how-step {
  min-width:52px;
  color:#f0ca79;
  font:600 1rem/1 Georgia,'Times New Roman',serif;
  letter-spacing:.08em;
  padding-top:8px;
}
.how-beat h3 {
  margin:.3rem 0 .55rem;
  color:#fffdf6;
  font:600 clamp(2rem,3.8vw,4.3rem)/.98 Georgia,'Times New Roman',serif;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.how-beat p {
  margin:0;
  max-width:560px;
  color:rgba(255,253,246,.82);
  font-size:clamp(.98rem,1.2vw,1.12rem);
  line-height:1.65;
}

.how-progress {
  position:absolute;
  z-index:25;
  left:50%;
  bottom:5.5vh;
  width:min(360px,36vw);
  height:20px;
  transform:translateX(-50%);
  opacity:.7;
}
.how-progress-line {
  position:absolute;
  left:0;
  right:0;
  top:9px;
  height:1px;
  background:rgba(240,202,121,.3);
}
.how-progress-line::after {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--how-progress,0) * 100%);
  background:#f0ca79;
}
.how-progress-dot {
  position:absolute;
  top:5px;
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid rgba(240,202,121,.8);
  background:#18301e;
  transform:translateX(-50%);
}
.how-progress-dot-1 { left:10%; }
.how-progress-dot-2 { left:50%; }
.how-progress-dot-3 { left:90%; }

@media (max-width:760px) {
  .how-chapter { height:370vh; }
  .how-sticky { min-height:560px; }
  .how-scene-heading { left:6vw; top:17vh; width:88vw; }
  .how-scene-heading h2 { font-size:clamp(2.65rem,13vw,4.6rem); }
  .how-beat {
    left:6vw;
    bottom:11vh;
    width:88vw;
    grid-template-columns:42px 1fr;
    gap:12px;
    padding-right:0;
  }
  .how-beat h3 { font-size:clamp(1.9rem,9vw,3rem); }
  .how-progress { width:54vw; bottom:4vh; }
  .how-marker { transform:translate3d(var(--how-object-x,0vw),0,0) scale(.78); transform-origin:bottom center; }
  .how-puzzle-object { transform:translate3d(var(--how-object-x,0vw),0,0) scale(.72); transform-origin:bottom center; }
  .how-story-object { transform:translate3d(var(--how-object-x,0vw),0,0) scale(.76); transform-origin:bottom center; }
}

/* v76 — Chapter 5: What can you create? -----------------------------------
   Placeholder-only cinematic mechanics. The generated woodland clearing,
   foreground tree frames and four world glimpses can replace the art slots
   later without changing this chapter's scroll geometry. */
.worlds-chapter {
  position:relative;
  height:500vh;
  min-height:2800px;
  scroll-margin-top:82px;
  color:#fffdf6;
  background:#10291c;
}
.worlds-deep-anchor {
  position:absolute;
  inset:0 auto auto 0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.worlds-sticky {
  position:sticky;
  top:0;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 52% 28%,rgba(245,205,121,.14),transparent 28%),
    linear-gradient(180deg,#395840 0%,#1d3b29 54%,#0c2016 100%);
}
.worlds-art,
.worlds-layer,
.worlds-track,
.world-portal,
.worlds-atmosphere {
  position:absolute;
  pointer-events:none;
}
.worlds-art { inset:0; z-index:0; overflow:hidden; }
.worlds-layer {
  left:0;
  top:0;
  height:100%;
  width:235vw;
  will-change:transform;
  backface-visibility:hidden;
  background-repeat:no-repeat;
  background-position:center;
}
.worlds-sky {
  z-index:1;
  transform:translate3d(var(--worlds-sky-x,0vw),0,0);
  background:
    radial-gradient(circle at 20% 18%,rgba(255,229,167,.2),transparent 18%),
    radial-gradient(circle at 76% 25%,rgba(212,234,196,.08),transparent 24%),
    linear-gradient(180deg,#56765a 0%,#718366 36%,#3c5d43 72%,transparent 100%);
}
.worlds-back {
  z-index:2;
  transform:translate3d(var(--worlds-back-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 4% 48%,#294d31 0 8%,transparent 8.5%),
    radial-gradient(ellipse at 18% 44%,#31583a 0 10%,transparent 10.5%),
    radial-gradient(ellipse at 34% 46%,#264a2f 0 10%,transparent 10.5%),
    radial-gradient(ellipse at 51% 42%,#31573a 0 11%,transparent 11.5%),
    radial-gradient(ellipse at 69% 45%,#284c31 0 11%,transparent 11.5%),
    radial-gradient(ellipse at 88% 43%,#31573a 0 11%,transparent 11.5%),
    linear-gradient(180deg,transparent 0 43%,rgba(31,67,39,.96) 44% 100%);
}
.worlds-ground {
  z-index:3;
  top:auto;
  bottom:-1vh;
  height:52vh;
  transform:translate3d(var(--worlds-ground-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 10% 105%,#52613a 0 16%,transparent 16.5%),
    radial-gradient(ellipse at 31% 104%,#465a35 0 17%,transparent 17.5%),
    radial-gradient(ellipse at 52% 104%,#53643b 0 16%,transparent 16.5%),
    radial-gradient(ellipse at 73% 105%,#425631 0 17%,transparent 17.5%),
    radial-gradient(ellipse at 94% 103%,#52623a 0 17%,transparent 17.5%),
    linear-gradient(180deg,rgba(51,81,47,.1),rgba(20,48,29,.9));
}

.worlds-track {
  z-index:4;
  left:0;
  top:0;
  width:390vw;
  height:100%;
  transform:translate3d(var(--worlds-track-x,0vw),0,0);
  will-change:transform;
  backface-visibility:hidden;
}
.world-portal {
  top:13vh;
  width:min(58vw,920px);
  height:68vh;
  min-height:450px;
  overflow:hidden;
  border-radius:46% 48% 18% 22% / 22% 26% 12% 12%;
  border:1px solid rgba(238,211,150,.12);
  box-shadow:
    0 28px 90px rgba(0,0,0,.38),
    inset 0 0 90px rgba(4,20,12,.35);
  background:#18301f;
  isolation:isolate;
  transform-origin:50% 60%;
}
.world-portal::before,
.world-portal::after {
  content:'';
  position:absolute;
  z-index:9;
  pointer-events:none;
}
.world-portal::before {
  inset:-8% -6%;
  border-radius:48%;
  box-shadow:inset 0 0 0 4vw rgba(8,30,17,.28), inset 0 0 65px rgba(2,13,8,.78);
}
.world-portal::after {
  inset:0;
  background:radial-gradient(ellipse at 50% 48%,transparent 0 55%,rgba(4,19,11,.22) 78%,rgba(3,14,8,.7) 100%);
}
.world-history { left:42vw; filter:saturate(calc(.8 + .2 * var(--world-history-focus,0))) brightness(calc(.82 + .18 * var(--world-history-focus,0))); }
.world-wildlife { left:132vw; filter:saturate(calc(.8 + .2 * var(--world-wildlife-focus,0))) brightness(calc(.82 + .18 * var(--world-wildlife-focus,0))); }
.world-science { left:222vw; filter:saturate(calc(.8 + .2 * var(--world-science-focus,0))) brightness(calc(.82 + .18 * var(--world-science-focus,0))); }
.world-seasonal { left:312vw; filter:saturate(calc(.8 + .2 * var(--world-seasonal-focus,0))) brightness(calc(.82 + .18 * var(--world-seasonal-focus,0))); }

.world-glimpse { position:absolute; inset:0; overflow:hidden; }

/* History placeholder: an old fort beyond a moody clearing. */
.world-history-art {
  background:
    radial-gradient(circle at 72% 23%,rgba(232,196,119,.22),transparent 16%),
    linear-gradient(180deg,#687168 0%,#8a806a 34%,#555f4e 54%,#283a2c 100%);
}
.history-hill {
  position:absolute;
  left:-10%; right:-10%; bottom:0;
  height:45%;
  background:linear-gradient(180deg,#42543b,#223827);
  clip-path:polygon(0 38%,15% 22%,31% 32%,47% 14%,65% 28%,81% 18%,100% 36%,100% 100%,0 100%);
}
.history-fort {
  position:absolute;
  left:27%;
  bottom:27%;
  width:46%;
  height:22%;
  background:linear-gradient(180deg,#756e5d,#454b42);
  clip-path:polygon(0 28%,11% 28%,11% 10%,25% 10%,25% 23%,63% 23%,63% 6%,78% 6%,78% 23%,100% 23%,100% 100%,0 100%);
  box-shadow:0 20px 35px rgba(0,0,0,.25);
}
.history-tower {
  position:absolute;
  left:58%;
  bottom:43%;
  width:9%;
  height:18%;
  background:#5c5b4f;
  clip-path:polygon(8% 100%,0 13%,18% 13%,18% 0,82% 0,82% 13%,100% 13%,92% 100%);
}
.history-light {
  position:absolute;
  left:61%; top:22%;
  width:42%; height:18%;
  transform:rotate(-13deg);
  transform-origin:left center;
  background:linear-gradient(90deg,rgba(244,221,164,.3),transparent 78%);
  filter:blur(7px);
}

/* Wildlife placeholder: bright rolling habitat beyond the trees. */
.world-wildlife-art {
  background:linear-gradient(180deg,#7fa0a4 0%,#abc2ae 45%,#7f9d65 46%,#4b7146 100%);
}
.wildlife-sun {
  position:absolute;
  width:18%; aspect-ratio:1;
  left:16%; top:13%;
  border-radius:50%;
  background:rgba(255,229,166,.62);
  box-shadow:0 0 50px rgba(255,225,155,.35);
}
.wildlife-hill {
  position:absolute;
  left:-10%; width:120%;
  border-radius:50% 50% 0 0;
}
.wildlife-hill-a { bottom:-10%; height:50%; background:#587e4c; transform:rotate(-2deg); }
.wildlife-hill-b { bottom:-24%; height:53%; left:28%; background:#385f3c; transform:rotate(4deg); }
.wildlife-tree {
  position:absolute;
  bottom:22%;
  width:5%; height:31%;
  background:#33492c;
  border-radius:40% 40% 10% 10%;
}
.wildlife-tree::before {
  content:'';
  position:absolute;
  left:-190%; top:-22%;
  width:480%; height:58%;
  border-radius:50%;
  background:#426c41;
}
.wildlife-tree-a { left:68%; transform:scale(1.15); }
.wildlife-tree-b { left:81%; bottom:19%; transform:scale(.82); }

/* Science placeholder: luminous crystals in a strange laboratory opening. */
.world-science-art {
  background:
    radial-gradient(circle at 50% 62%,rgba(100,230,218,.22),transparent 28%),
    linear-gradient(180deg,#243849,#152631 54%,#09181f 100%);
}
.science-arch {
  position:absolute;
  left:17%; right:17%; top:10%; bottom:0;
  border:18px solid #34464a;
  border-bottom:0;
  border-radius:50% 50% 0 0 / 28% 28% 0 0;
  box-shadow:inset 0 0 40px rgba(96,223,216,.09);
}
.science-crystal {
  position:absolute;
  bottom:16%;
  width:13%;
  background:linear-gradient(145deg,#d7f7de 0%,#74d6c6 35%,#4591a1 75%,#274c69 100%);
  clip-path:polygon(50% 0,92% 30%,82% 100%,18% 100%,8% 30%);
  box-shadow:0 0 35px rgba(96,232,218,.3);
}
.science-crystal-a { left:38%; height:45%; }
.science-crystal-b { left:27%; height:29%; transform:rotate(-9deg); }
.science-crystal-c { left:52%; height:33%; transform:rotate(11deg); }
.science-glow {
  position:absolute;
  left:25%; right:25%; bottom:7%; height:25%;
  border-radius:50%;
  background:rgba(91,226,213,.18);
  filter:blur(12px);
}

/* Seasonal placeholder: one opening carrying autumn, lights and winter magic. */
.world-seasonal-art {
  background:
    radial-gradient(circle at 68% 20%,rgba(255,232,193,.12),transparent 20%),
    linear-gradient(180deg,#283348 0%,#3a3740 39%,#4a382e 68%,#1c2b24 100%);
}
.seasonal-moon {
  position:absolute;
  right:15%; top:10%;
  width:16%; aspect-ratio:1;
  border-radius:50%;
  background:#f0dcc0;
  box-shadow:0 0 42px rgba(244,222,187,.22);
}
.seasonal-lights {
  position:absolute;
  left:5%; right:5%; top:24%; height:20%;
  border-top:2px solid rgba(53,40,28,.62);
  transform:rotate(-4deg);
  background:
    radial-gradient(circle at 10% 2%,#ffd98c 0 3px,transparent 4px),
    radial-gradient(circle at 23% 5%,#eaa668 0 3px,transparent 4px),
    radial-gradient(circle at 38% 1%,#ffe2a0 0 3px,transparent 4px),
    radial-gradient(circle at 53% 4%,#d98561 0 3px,transparent 4px),
    radial-gradient(circle at 69% 0%,#ffdd8e 0 3px,transparent 4px),
    radial-gradient(circle at 84% 4%,#f0b974 0 3px,transparent 4px);
}
.seasonal-pumpkin {
  position:absolute;
  bottom:18%;
  width:12%; aspect-ratio:1.2;
  border-radius:48% 48% 42% 42%;
  background:radial-gradient(ellipse at 50% 45%,#eaa348 0 28%,#c96e31 60%,#7f3d24 100%);
  box-shadow:0 12px 22px rgba(0,0,0,.25);
}
.seasonal-pumpkin::before {
  content:'';
  position:absolute;
  left:44%; top:-12%; width:12%; height:20%;
  border-radius:3px;
  background:#385338;
}
.seasonal-pumpkin-a { left:25%; }
.seasonal-pumpkin-b { left:38%; bottom:14%; transform:scale(.72); }
.seasonal-snow {
  position:absolute;
  inset:0;
  opacity:.42;
  background-image:
    radial-gradient(circle,#fff 0 1.5px,transparent 2px),
    radial-gradient(circle,#fff 0 1px,transparent 1.5px);
  background-size:72px 72px,108px 108px;
  background-position:12px 18px,44px 57px;
}

.worlds-tree-line {
  z-index:7;
  transform:translate3d(var(--worlds-tree-x,0vw),0,0);
  background:
    repeating-linear-gradient(90deg,transparent 0 15vw,rgba(13,40,22,.98) 15.2vw 17.3vw,transparent 17.5vw 29vw),
    radial-gradient(ellipse at 6% 28%,#173d25 0 9%,transparent 9.5%),
    radial-gradient(ellipse at 24% 24%,#1d482a 0 10%,transparent 10.5%),
    radial-gradient(ellipse at 44% 28%,#153b23 0 10%,transparent 10.5%),
    radial-gradient(ellipse at 64% 23%,#1d482a 0 10%,transparent 10.5%),
    radial-gradient(ellipse at 84% 27%,#153b23 0 11%,transparent 11.5%);
}
.worlds-front {
  z-index:10;
  top:auto;
  bottom:-2vh;
  height:42vh;
  transform:translate3d(var(--worlds-front-x,0vw),0,0);
  background:
    repeating-linear-gradient(104deg,transparent 0 2vw,rgba(12,42,22,.85) 2.1vw 2.3vw,transparent 2.4vw 4.4vw),
    radial-gradient(ellipse at 4% 88%,#0a2717 0 7%,transparent 7.5%),
    radial-gradient(ellipse at 20% 91%,#12331d 0 9%,transparent 9.5%),
    radial-gradient(ellipse at 38% 88%,#0b2918 0 8%,transparent 8.5%),
    radial-gradient(ellipse at 58% 91%,#13351f 0 9%,transparent 9.5%),
    radial-gradient(ellipse at 78% 89%,#0b2918 0 9%,transparent 9.5%),
    radial-gradient(ellipse at 96% 91%,#12331d 0 9%,transparent 9.5%);
}
.worlds-canopy {
  z-index:11;
  height:35vh;
  transform:translate3d(var(--worlds-canopy-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 3% -3%,#082416 0 13%,transparent 13.5%),
    radial-gradient(ellipse at 18% 0%,#10351f 0 15%,transparent 15.5%),
    radial-gradient(ellipse at 36% -4%,#092718 0 15%,transparent 15.5%),
    radial-gradient(ellipse at 55% 0%,#113620 0 16%,transparent 16.5%),
    radial-gradient(ellipse at 74% -4%,#092718 0 16%,transparent 16.5%),
    radial-gradient(ellipse at 93% 0%,#10351f 0 15%,transparent 15.5%);
}
.worlds-atmosphere {
  z-index:12;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 34%,rgba(246,214,151,.11),transparent 38%),
    linear-gradient(90deg,rgba(4,22,13,.25),transparent 18%,transparent 82%,rgba(4,22,13,.3));
  mix-blend-mode:screen;
}

.worlds-heading,
.world-beat {
  position:absolute;
  z-index:20;
  pointer-events:none;
  text-shadow:0 2px 28px rgba(0,0,0,.55);
}
.worlds-heading {
  left:7vw;
  top:17vh;
  width:min(820px,74vw);
  opacity:var(--worlds-heading-o,1);
  transform:translate3d(0,var(--worlds-heading-y,0px),0);
}
.worlds-heading h2 {
  margin:.55rem 0 1rem;
  max-width:830px;
  color:#fffdf6;
  font-size:clamp(3rem,5.8vw,6.5rem);
  line-height:.91;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-wrap:balance;
}
.worlds-heading p {
  max-width:720px;
  margin:0;
  color:rgba(255,253,246,.84);
  font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.7;
}
.world-beat {
  left:7vw;
  bottom:11vh;
  width:min(650px,50vw);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  padding:24px 28px 24px 0;
}
.world-beat-history { opacity:var(--world-history-o,0); transform:translate3d(var(--world-history-x,0px),0,0); }
.world-beat-wildlife { opacity:var(--world-wildlife-o,0); transform:translate3d(var(--world-wildlife-x,0px),0,0); }
.world-beat-science { opacity:var(--world-science-o,0); transform:translate3d(var(--world-science-x,0px),0,0); }
.world-beat-seasonal { opacity:var(--world-seasonal-o,0); transform:translate3d(var(--world-seasonal-x,0px),0,0); }
.world-number {
  min-width:52px;
  color:#f0ca79;
  font:600 1rem/1 Georgia,'Times New Roman',serif;
  letter-spacing:.08em;
  padding-top:8px;
}
.world-beat h3 {
  margin:.3rem 0 .55rem;
  color:#fffdf6;
  font:600 clamp(2rem,3.5vw,4rem)/.98 Georgia,'Times New Roman',serif;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.world-beat p {
  margin:0;
  max-width:600px;
  color:rgba(255,253,246,.83);
  font-size:clamp(.98rem,1.18vw,1.1rem);
  line-height:1.65;
}
.worlds-progress {
  position:absolute;
  z-index:25;
  left:50%;
  bottom:5vh;
  width:min(420px,40vw);
  height:20px;
  transform:translateX(-50%);
  opacity:calc(.72 * var(--worlds-progress-o,0));
}
.worlds-progress-line {
  position:absolute;
  left:0; right:0; top:9px;
  height:1px;
  background:rgba(240,202,121,.28);
}
.worlds-progress-line::after {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--worlds-progress,0) * 100%);
  background:#f0ca79;
}
.worlds-progress-dot {
  position:absolute;
  top:5px;
  width:9px; height:9px;
  border-radius:50%;
  border:1px solid rgba(240,202,121,.82);
  background:#173520;
  transform:translateX(-50%);
}
.worlds-progress-dot-1 { left:7%; }
.worlds-progress-dot-2 { left:36%; }
.worlds-progress-dot-3 { left:65%; }
.worlds-progress-dot-4 { left:94%; }

@media (max-width:760px) {
  .worlds-chapter { height:760vh; min-height:4600px; }
  .worlds-sticky { min-height:560px; }
  .worlds-heading { left:6vw; top:14vh; width:88vw; }
  .worlds-heading h2 { font-size:clamp(2.45rem,11.8vw,4.5rem); }
  .worlds-heading p { max-width:86vw; }
  .world-portal {
    top:16vh;
    width:78vw;
    height:57vh;
    min-height:390px;
  }
  .world-history { left:34vw; }
  .world-wildlife { left:124vw; }
  .world-science { left:214vw; }
  .world-seasonal { left:304vw; }
  .world-beat {
    left:6vw;
    bottom:10vh;
    width:88vw;
    grid-template-columns:42px 1fr;
    gap:12px;
    padding-right:0;
  }
  .world-beat h3 { font-size:clamp(1.85rem,8.7vw,2.9rem); }
  .world-beat p { font-size:.96rem; line-height:1.58; }
  .worlds-progress { width:58vw; bottom:3.5vh; }
}

/* v77 — Chapter 6: places worth exploring ---------------------------------
   One calm, wide venue landscape following the Chapter 5 woodland reveals.
   Placeholder geometry only: generated artwork will replace the data-art-slot
   layers and destination groups without changing this scroll contract. */
.venues-chapter {
  position:relative;
  height:520vh;
  min-height:3700px;
  background:#243b45;
  color:#fffdf6;
  isolation:isolate;
  scroll-margin-top:0;
}
.venues-sticky {
  position:sticky;
  top:0;
  width:100%;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  background:#829fa8;
}
.venues-art,
.venues-layer,
.venues-track,
.venue-destination,
.venues-light {
  position:absolute;
  pointer-events:none;
}
.venues-art { inset:0; overflow:hidden; }
.venues-layer {
  left:0;
  top:0;
  width:122vw;
  height:100%;
  will-change:transform;
  backface-visibility:hidden;
}

/* Far atmosphere. The restrained movement is intentional: this section is
   the visual exhale after the more fantastical Chapter 5 portals. */
.venues-sky {
  z-index:1;
  width:118vw;
  transform:translate3d(var(--venues-sky-x,0vw),0,0);
  background:
    radial-gradient(circle at 24% 22%,rgba(255,244,207,.65) 0 4%,rgba(255,233,184,.24) 8%,transparent 22%),
    linear-gradient(180deg,#8eb1c5 0%,#adc3c9 37%,#d2cfb5 62%,#9fa56c 63%,#869057 100%);
}
.venues-haze {
  z-index:2;
  width:128vw;
  transform:translate3d(var(--venues-haze-x,0vw),0,0);
  background:
    linear-gradient(180deg,transparent 0 38%,rgba(242,231,196,.25) 46%,rgba(238,222,179,.10) 60%,transparent 75%),
    radial-gradient(ellipse at 56% 43%,rgba(255,246,220,.28),transparent 38%);
  filter:blur(6px);
}
.venues-distant {
  z-index:3;
  left:-3vw;
  top:auto;
  bottom:30vh;
  width:132vw;
  height:35vh;
  transform:translate3d(var(--venues-distant-x,0vw),0,0);
  opacity:.86;
  background:
    radial-gradient(ellipse at 8% 92%,rgba(104,126,93,.80) 0 17%,transparent 17.5%),
    radial-gradient(ellipse at 28% 96%,rgba(111,132,94,.86) 0 22%,transparent 22.5%),
    radial-gradient(ellipse at 51% 91%,rgba(101,123,87,.87) 0 25%,transparent 25.5%),
    radial-gradient(ellipse at 74% 96%,rgba(96,118,82,.90) 0 23%,transparent 23.5%),
    radial-gradient(ellipse at 94% 91%,rgba(91,113,80,.92) 0 20%,transparent 20.5%);
}

/* Main panorama: the four destinations live in a single shared world rather
   than four cards. It travels behind slower/faster depth layers. */
.venues-track {
  z-index:4;
  left:0;
  top:0;
  width:392vw;
  height:100%;
  transform:translate3d(var(--venues-track-x,0vw),0,0);
  will-change:transform;
  backface-visibility:hidden;
  background:
    linear-gradient(180deg,transparent 0 58%,rgba(127,145,79,.18) 58.5%,rgba(98,121,64,.34) 75%,rgba(75,99,55,.58) 100%);
}
.venue-destination {
  top:15vh;
  width:64vw;
  height:70vh;
  min-height:470px;
  transform-origin:50% 62%;
  filter:saturate(.94);
}
.venue-destination::after {
  content:'';
  position:absolute;
  left:4%; right:4%; bottom:4%; height:34%;
  border-radius:50%;
  background:rgba(52,76,47,.32);
  filter:blur(18px);
  z-index:-1;
}
.venue-destination-heritage {
  left:36vw;
  filter:saturate(calc(.83 + .17 * var(--venue-heritage-focus,0))) brightness(calc(.89 + .11 * var(--venue-heritage-focus,0)));
}
.venue-destination-wildlife {
  left:126vw;
  filter:saturate(calc(.83 + .17 * var(--venue-wildlife-focus,0))) brightness(calc(.89 + .11 * var(--venue-wildlife-focus,0)));
}
.venue-destination-attraction {
  left:216vw;
  filter:saturate(calc(.83 + .17 * var(--venue-attraction-focus,0))) brightness(calc(.89 + .11 * var(--venue-attraction-focus,0)));
}
.venue-destination-outdoors {
  left:306vw;
  filter:saturate(calc(.83 + .17 * var(--venue-outdoors-focus,0))) brightness(calc(.89 + .11 * var(--venue-outdoors-focus,0)));
}

/* Museums & heritage placeholder: a stone site with a museum/manor beyond. */
.heritage-hill {
  position:absolute;
  left:-4%; right:-4%; bottom:8%; height:42%;
  border-radius:52% 48% 0 0;
  background:linear-gradient(180deg,#738555,#4f6b43);
  clip-path:polygon(0 48%,12% 38%,24% 44%,39% 26%,55% 34%,72% 22%,87% 33%,100% 29%,100% 100%,0 100%);
}
.heritage-castle {
  position:absolute;
  left:17%; bottom:31%; width:34%; height:25%;
  background:linear-gradient(180deg,#8b8573,#5d6256);
  clip-path:polygon(0 18%,10% 18%,10% 4%,26% 4%,26% 17%,70% 17%,70% 0,87% 0,87% 18%,100% 18%,100% 100%,0 100%);
  box-shadow:0 18px 32px rgba(45,50,39,.18);
}
.heritage-tower {
  position:absolute;
  bottom:48%; width:7%; height:18%;
  background:#6f7063;
  clip-path:polygon(8% 100%,0 12%,20% 12%,20% 0,80% 0,80% 12%,100% 12%,92% 100%);
}
.heritage-tower-a { left:24%; }
.heritage-tower-b { left:40%; transform:scale(.83); transform-origin:bottom; }
.heritage-museum {
  position:absolute;
  left:55%; bottom:27%; width:26%; height:19%;
  background:linear-gradient(180deg,#c2b79d,#8b8b77);
  clip-path:polygon(0 25%,11% 25%,11% 13%,45% 0,89% 13%,89% 25%,100% 25%,100% 100%,0 100%);
  box-shadow:0 14px 25px rgba(44,48,38,.16);
}

/* Zoo / wildlife placeholder: open habitat, water and broad tree canopies. */
.wildlife-meadow {
  position:absolute;
  left:-2%; right:-2%; bottom:5%; height:43%;
  background:linear-gradient(180deg,#879d5f,#5e7c49);
  clip-path:polygon(0 43%,17% 31%,32% 38%,50% 21%,66% 32%,84% 20%,100% 30%,100% 100%,0 100%);
}
.wildlife-water {
  position:absolute;
  left:17%; bottom:19%; width:41%; height:10%;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(164,197,190,.86),rgba(88,137,132,.68));
  transform:skewX(-12deg);
}
.wildlife-shelter {
  position:absolute;
  left:59%; bottom:29%; width:21%; height:17%;
  background:#7c735e;
  clip-path:polygon(0 28%,50% 0,100% 28%,92% 28%,92% 100%,8% 100%,8% 28%);
}
.wildlife-canopy {
  position:absolute;
  bottom:35%; width:9%; height:25%;
  border-radius:20% 20% 8% 8%;
  background:#455941;
}
.wildlife-canopy::before {
  content:'';
  position:absolute;
  left:-150%; top:-25%; width:400%; height:58%;
  border-radius:50%;
  background:#527047;
}
.wildlife-canopy-a { left:12%; transform:scale(1.18); }
.wildlife-canopy-b { left:83%; transform:scale(.88); transform-origin:bottom; }

/* Visitor attraction placeholder: a recognisable destination pavilion and
   viewing tower without tying the art to any one sector. */
.attraction-hill {
  position:absolute;
  left:-3%; right:-3%; bottom:6%; height:44%;
  background:linear-gradient(180deg,#829059,#5a7147);
  clip-path:polygon(0 38%,15% 29%,31% 35%,47% 20%,62% 31%,78% 21%,100% 34%,100% 100%,0 100%);
}
.attraction-pavilion {
  position:absolute;
  left:27%; bottom:31%; width:35%; height:20%;
  background:linear-gradient(180deg,#c3aa80,#8f7d65);
  clip-path:polygon(0 28%,9% 28%,9% 20%,50% 0,91% 20%,91% 28%,100% 28%,100% 100%,0 100%);
  box-shadow:0 17px 30px rgba(48,50,38,.18);
}
.attraction-tower {
  position:absolute;
  left:67%; bottom:29%; width:6%; height:37%;
  background:linear-gradient(90deg,#71746b,#9b9685,#6c7067);
  clip-path:polygon(33% 0,67% 0,72% 68%,100% 100%,0 100%,28% 68%);
}
.attraction-tower::before {
  content:'';
  position:absolute;
  left:-92%; top:-9%; width:284%; height:9%;
  border-radius:50%;
  background:#5a6059;
}
.attraction-banner {
  position:absolute;
  bottom:30%; width:2px; height:22%;
  background:#665b49;
}
.attraction-banner::before {
  content:'';
  position:absolute;
  left:2px; top:7%; width:34px; height:19px;
  background:#a46d4f;
  clip-path:polygon(0 0,100% 8%,80% 52%,100% 96%,0 100%);
}
.attraction-banner-a { left:18%; }
.attraction-banner-b { left:79%; transform:scale(.82); transform-origin:bottom; }

/* Parks / outdoor placeholder: lake, bridge, formal garden and mature trees. */
.outdoors-lake {
  position:absolute;
  left:13%; bottom:15%; width:55%; height:16%;
  border-radius:50%;
  background:linear-gradient(180deg,#9cb8ab,#628b83);
  transform:skewX(-7deg);
}
.outdoors-bridge {
  position:absolute;
  left:43%; bottom:25%; width:25%; height:10%;
  border:7px solid #8e8067;
  border-bottom:0;
  border-radius:50% 50% 0 0;
}
.outdoors-garden {
  position:absolute;
  left:5%; right:5%; bottom:4%; height:34%;
  background:
    radial-gradient(ellipse at 16% 86%,#7c9556 0 11%,transparent 11.5%),
    radial-gradient(ellipse at 34% 88%,#70884d 0 12%,transparent 12.5%),
    radial-gradient(ellipse at 58% 90%,#7b9555 0 13%,transparent 13.5%),
    radial-gradient(ellipse at 82% 88%,#6c864c 0 12%,transparent 12.5%);
}
.outdoors-tree {
  position:absolute;
  bottom:29%; width:7%; height:30%;
  border-radius:35% 35% 5% 5%;
  background:#4c6043;
}
.outdoors-tree::before {
  content:'';
  position:absolute;
  left:-170%; top:-27%; width:440%; height:60%;
  border-radius:50%;
  background:#617a4c;
}
.outdoors-tree-a { left:11%; transform:scale(1.2); transform-origin:bottom; }
.outdoors-tree-b { right:12%; transform:scale(.94); transform-origin:bottom; }

.venues-mid {
  z-index:6;
  top:auto;
  bottom:-2vh;
  width:150vw;
  height:37vh;
  transform:translate3d(var(--venues-mid-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 8% 100%,rgba(84,107,59,.92) 0 10%,transparent 10.5%),
    radial-gradient(ellipse at 27% 101%,rgba(92,114,63,.94) 0 13%,transparent 13.5%),
    radial-gradient(ellipse at 47% 102%,rgba(77,101,56,.94) 0 12%,transparent 12.5%),
    radial-gradient(ellipse at 68% 101%,rgba(88,111,61,.96) 0 13%,transparent 13.5%),
    radial-gradient(ellipse at 89% 100%,rgba(73,98,54,.96) 0 12%,transparent 12.5%),
    linear-gradient(180deg,transparent 0 45%,rgba(65,91,51,.82) 46% 100%);
}
.venues-woodland-edge {
  z-index:8;
  left:-16vw;
  width:48vw;
  transform:translate3d(var(--venues-edge-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 16% 5%,#153622 0 25%,transparent 25.5%),
    radial-gradient(ellipse at 46% 12%,#1a4228 0 27%,transparent 27.5%),
    radial-gradient(ellipse at 32% 42%,#133522 0 24%,transparent 24.5%),
    repeating-linear-gradient(88deg,transparent 0 8vw,rgba(39,56,34,.94) 8.2vw 10vw,transparent 10.2vw 15vw);
  filter:drop-shadow(28px 0 30px rgba(12,27,18,.18));
}
.venues-front {
  z-index:9;
  left:-8vw;
  top:auto;
  bottom:-5vh;
  width:170vw;
  height:31vh;
  transform:translate3d(var(--venues-front-x,0vw),0,0);
  background:
    repeating-linear-gradient(102deg,transparent 0 2.8vw,rgba(43,74,42,.65) 2.9vw 3.1vw,transparent 3.2vw 5.6vw),
    radial-gradient(ellipse at 5% 100%,#314e32 0 7%,transparent 7.5%),
    radial-gradient(ellipse at 21% 103%,#3d5a36 0 9%,transparent 9.5%),
    radial-gradient(ellipse at 41% 101%,#2f4c31 0 8%,transparent 8.5%),
    radial-gradient(ellipse at 62% 103%,#405c37 0 9%,transparent 9.5%),
    radial-gradient(ellipse at 83% 101%,#304e32 0 9%,transparent 9.5%);
}
.venues-light {
  z-index:10;
  inset:0;
  background:
    radial-gradient(ellipse at 27% 28%,rgba(255,235,186,.12),transparent 31%),
    linear-gradient(90deg,rgba(17,42,28,.15),transparent 20%,transparent 83%,rgba(38,55,42,.11));
  mix-blend-mode:screen;
}

.venues-heading,
.venue-beat {
  position:absolute;
  z-index:20;
  pointer-events:none;
  text-shadow:0 2px 30px rgba(37,47,35,.46);
}
.venues-heading {
  left:7vw;
  top:16vh;
  width:min(860px,76vw);
  opacity:var(--venues-heading-o,1);
  transform:translate3d(0,var(--venues-heading-y,0px),0);
}
.venues-heading h2 {
  margin:.55rem 0 1rem;
  max-width:850px;
  color:#fffdf6;
  font-size:clamp(3rem,5.7vw,6.4rem);
  line-height:.91;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-wrap:balance;
}
.venues-heading p {
  margin:0;
  max-width:730px;
  color:rgba(255,253,246,.88);
  font-size:clamp(1rem,1.35vw,1.2rem);
  line-height:1.7;
}
.venue-beat {
  left:7vw;
  bottom:10vh;
  width:min(680px,52vw);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  padding:24px 28px 24px 0;
}
.venue-beat-heritage { opacity:var(--venue-heritage-o,0); transform:translate3d(var(--venue-heritage-x,0px),0,0); }
.venue-beat-wildlife { opacity:var(--venue-wildlife-o,0); transform:translate3d(var(--venue-wildlife-x,0px),0,0); }
.venue-beat-attraction { opacity:var(--venue-attraction-o,0); transform:translate3d(var(--venue-attraction-x,0px),0,0); }
.venue-beat-outdoors { opacity:var(--venue-outdoors-o,0); transform:translate3d(var(--venue-outdoors-x,0px),0,0); }
.venue-number {
  min-width:52px;
  padding-top:8px;
  color:#f0ca79;
  font:600 1rem/1 Georgia,'Times New Roman',serif;
  letter-spacing:.08em;
}
.venue-beat h3 {
  margin:.3rem 0 .55rem;
  color:#fffdf6;
  font:600 clamp(2rem,3.45vw,3.95rem)/.98 Georgia,'Times New Roman',serif;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.venue-beat p {
  margin:0;
  max-width:610px;
  color:rgba(255,253,246,.88);
  font-size:clamp(.98rem,1.18vw,1.1rem);
  line-height:1.65;
}
.venues-progress {
  position:absolute;
  z-index:25;
  left:50%;
  bottom:4.5vh;
  width:min(420px,40vw);
  height:20px;
  transform:translateX(-50%);
  opacity:.74;
}
.venues-progress-line {
  position:absolute;
  left:0; right:0; top:9px;
  height:1px;
  background:rgba(240,202,121,.30);
}
.venues-progress-line::after {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--venues-progress,0) * 100%);
  background:#f0ca79;
}
.venues-progress-dot {
  position:absolute;
  top:5px;
  width:9px; height:9px;
  border-radius:50%;
  border:1px solid rgba(240,202,121,.84);
  background:#516449;
  transform:translateX(-50%);
}
.venues-progress-dot-1 { left:7%; }
.venues-progress-dot-2 { left:36%; }
.venues-progress-dot-3 { left:65%; }
.venues-progress-dot-4 { left:94%; }

@media (max-width:760px) {
  .venues-chapter { height:520vh; min-height:3100px; }
  .venues-sticky { min-height:560px; }
  .venues-heading { left:6vw; top:14vh; width:88vw; }
  .venues-heading h2 { font-size:clamp(2.4rem,11.4vw,4.4rem); }
  .venues-heading p { max-width:86vw; }
  .venue-destination { top:18vh; width:80vw; height:58vh; min-height:400px; }
  .venue-destination-heritage { left:28vw; }
  .venue-destination-wildlife { left:118vw; }
  .venue-destination-attraction { left:208vw; }
  .venue-destination-outdoors { left:298vw; }
  .venue-beat {
    left:6vw;
    bottom:9vh;
    width:88vw;
    grid-template-columns:42px 1fr;
    gap:12px;
    padding-right:0;
  }
  .venue-beat h3 { font-size:clamp(1.8rem,8.4vw,2.85rem); }
  .venue-beat p { font-size:.96rem; line-height:1.58; }
  .venues-progress { width:58vw; bottom:3.2vh; }
  .venues-woodland-edge { width:63vw; }
}

/* v78 — Chapter 7: Adventures in action ------------------------------------
   A single physical trail table carries three different adventure examples.
   Placeholder props establish composition only; generated art can replace each
   data-art-slot / data-object-slot without changing scroll geometry. */
.examples-chapter {
  position:relative;
  height:430vh;
  min-height:3300px;
  background:#17231d;
  color:#fffdf6;
}
.examples-sticky {
  position:sticky;
  top:0;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 70% 18%,rgba(205,161,93,.11),transparent 32%),
    linear-gradient(180deg,#1b2a23 0%,#19231e 35%,#2d251d 72%,#1a1714 100%);
}
.examples-art,
.examples-layer,
.examples-table,
.examples-light,
.examples-vignette {
  position:absolute;
  inset:0;
}
.examples-art { z-index:1; overflow:hidden; }
.examples-backdrop {
  z-index:1;
  width:120vw;
  transform:translate3d(var(--examples-back-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 22% 35%,rgba(91,113,78,.28),transparent 22%),
    radial-gradient(ellipse at 74% 28%,rgba(80,99,71,.25),transparent 25%),
    repeating-linear-gradient(88deg,transparent 0 7vw,rgba(24,45,34,.62) 7.2vw 8.4vw,transparent 8.6vw 14vw),
    linear-gradient(180deg,#26392f 0%,#1a2a23 58%,#181b17 100%);
}
.examples-back-haze {
  z-index:2;
  width:125vw;
  transform:translate3d(var(--examples-haze-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 58% 32%,rgba(239,204,142,.15),transparent 34%),
    linear-gradient(180deg,rgba(216,231,210,.035),transparent 55%);
  filter:blur(1px);
}
.examples-table {
  z-index:4;
  left:-5vw;
  right:auto;
  top:40vh;
  bottom:auto;
  width:330vw;
  height:77vh;
  min-height:520px;
  transform:translate3d(var(--examples-table-x,0vw),0,0) rotate(-1.1deg);
  transform-origin:20% 30%;
  background:
    linear-gradient(90deg,rgba(53,36,24,.95),rgba(89,58,34,.96) 18%,rgba(100,66,39,.97) 50%,rgba(72,46,29,.98) 82%,rgba(47,32,23,.98)),
    #6b472e;
  box-shadow:0 -28px 70px rgba(3,8,5,.45), inset 0 22px 50px rgba(255,214,146,.06);
  clip-path:polygon(0 5%,100% 0,100% 100%,0 96%);
}
.examples-table-grain {
  position:absolute;
  inset:0;
  opacity:.38;
  background:
    repeating-linear-gradient(2deg,transparent 0 5px,rgba(32,18,10,.15) 6px,transparent 8px 22px),
    repeating-linear-gradient(91deg,transparent 0 12vw,rgba(37,20,12,.25) 12.1vw 12.3vw,transparent 12.4vw 25vw);
  mix-blend-mode:multiply;
}
.examples-track {
  position:absolute;
  left:0;
  top:0;
  width:285vw;
  height:100%;
  transform:translate3d(var(--examples-track-x,0vw),0,0);
  will-change:transform;
}
.example-prop {
  position:absolute;
  top:8%;
  width:64vw;
  height:78%;
  min-height:390px;
  filter:saturate(calc(.72 + var(--prop-focus,0) * .28)) brightness(calc(.82 + var(--prop-focus,0) * .18));
  transition:filter .16s linear;
}
.example-prop-wildlife { left:24vw; --prop-focus:var(--prop-wildlife-focus,0); }
.example-prop-fort { left:121vw; --prop-focus:var(--prop-fort-focus,0); }
.example-prop-science { left:218vw; --prop-focus:var(--prop-science-focus,0); }
.prop-shadow {
  position:absolute;
  left:12%; right:12%; bottom:8%; height:20%;
  border-radius:50%;
  background:rgba(19,12,8,.38);
  filter:blur(16px);
}

/* Missing animal mystery placeholders. */
.keeper-notebook {
  position:absolute;
  left:13%; top:11%;
  width:43%; height:58%;
  transform:rotate(-7deg);
  border-radius:10px 7px 9px 12px;
  background:linear-gradient(135deg,#556348,#344637 60%,#27372c);
  box-shadow:0 24px 38px rgba(23,13,7,.34), inset 0 0 0 2px rgba(240,218,168,.13);
}
.notebook-spine {
  position:absolute; left:7%; top:0; bottom:0; width:6%;
  background:rgba(30,34,26,.56);
  box-shadow:2px 0 rgba(236,213,163,.08);
}
.notebook-page {
  position:absolute;
  background:#e7dfc8;
  box-shadow:0 10px 20px rgba(25,14,8,.18);
}
.notebook-page-a {
  left:31%; top:16%; width:59%; height:66%;
  transform:rotate(4deg);
  background:
    repeating-linear-gradient(180deg,transparent 0 19px,rgba(84,94,81,.18) 20px,transparent 21px),
    #e9e1ca;
}
.notebook-page-b {
  left:22%; top:10%; width:58%; height:68%;
  transform:rotate(-3deg);
  background:
    repeating-linear-gradient(180deg,transparent 0 20px,rgba(84,94,81,.14) 21px,transparent 22px),
    #f0e8d3;
}
.notebook-pencil {
  position:absolute;
  left:73%; top:8%; width:4%; height:77%;
  border-radius:4px;
  background:linear-gradient(90deg,#b87c43,#deb06f,#9a6033);
  transform:rotate(18deg);
  box-shadow:0 7px 8px rgba(19,12,7,.26);
}
.notebook-paw {
  position:absolute;
  left:49%; top:31%; width:15%; aspect-ratio:1;
  border-radius:50%;
  background:rgba(77,92,66,.24);
}
.notebook-paw::before,
.notebook-paw::after {
  content:''; position:absolute; border-radius:50%; background:inherit;
}
.notebook-paw::before { width:36%; height:36%; left:-20%; top:-18%; box-shadow:28px -5px 0 rgba(77,92,66,.24),50px 4px 0 rgba(77,92,66,.24); }
.notebook-paw::after { width:75%; height:55%; left:12%; top:37%; }
.wildlife-map-scrap {
  position:absolute;
  left:48%; top:45%; width:34%; height:32%;
  transform:rotate(9deg);
  background:
    radial-gradient(circle at 28% 43%,rgba(77,107,68,.32) 0 6%,transparent 6.5%),
    radial-gradient(circle at 69% 62%,rgba(77,107,68,.28) 0 8%,transparent 8.5%),
    repeating-linear-gradient(33deg,transparent 0 24px,rgba(96,78,54,.10) 25px,transparent 26px 48px),
    #d8cba7;
  clip-path:polygon(2% 7%,97% 0,100% 92%,6% 100%,0 36%);
  box-shadow:0 18px 30px rgba(27,15,8,.25);
}

/* Wartime signal placeholders. */
.fort-map {
  position:absolute;
  left:8%; top:13%; width:54%; height:63%;
  transform:rotate(4deg);
  background:
    repeating-linear-gradient(32deg,transparent 0 34px,rgba(67,73,59,.12) 35px,transparent 36px 68px),
    repeating-linear-gradient(118deg,transparent 0 42px,rgba(75,69,53,.10) 43px,transparent 44px 84px),
    #cfc5a2;
  clip-path:polygon(2% 3%,96% 0,100% 92%,5% 100%,0 56%);
  box-shadow:0 24px 38px rgba(24,14,8,.3);
}
.fort-map-fold { position:absolute; background:rgba(78,68,51,.16); }
.fort-map-fold.fold-a { left:33%; top:0; bottom:0; width:1px; }
.fort-map-fold.fold-b { left:66%; top:0; bottom:0; width:1px; }
.fort-map-route {
  position:absolute;
  left:14%; top:28%; width:69%; height:42%;
  border:3px dashed rgba(113,51,42,.65);
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(-14deg);
}
.coded-message {
  position:absolute;
  left:50%; top:28%; width:35%; height:42%;
  transform:rotate(-8deg);
  background:#e5dcc0;
  box-shadow:0 22px 32px rgba(24,14,8,.3);
}
.code-line {
  position:absolute; left:10%; right:10%; height:3%;
  background:repeating-linear-gradient(90deg,#635d50 0 8%,transparent 8% 11%);
  opacity:.7;
}
.code-line-a { top:24%; }
.code-line-b { top:39%; }
.code-line-c { top:54%; }
.code-stamp {
  position:absolute; right:8%; bottom:10%;
  padding:6px 9px;
  border:2px solid rgba(128,51,43,.64);
  color:rgba(128,51,43,.68);
  font:700 clamp(.7rem,1.1vw,1rem)/1 Arial,sans-serif;
  letter-spacing:.12em;
  transform:rotate(-8deg);
}

/* Scientific disaster placeholders. */
.crystal-cluster {
  position:absolute;
  left:13%; top:12%; width:43%; height:64%;
  filter:drop-shadow(0 18px 25px rgba(16,14,23,.35));
}
.crystal {
  position:absolute;
  bottom:10%;
  width:22%;
  background:linear-gradient(90deg,#63809c,#b8d1d6 47%,#66789a 77%,#474c78);
  clip-path:polygon(50% 0,84% 17%,100% 100%,0 100%,14% 17%);
  opacity:.92;
}
.crystal-a { left:28%; height:72%; }
.crystal-b { left:8%; height:51%; transform:rotate(-12deg); }
.crystal-c { left:53%; height:58%; transform:rotate(11deg); }
.crystal-d { left:66%; height:40%; transform:rotate(21deg); }
.crystal-glow {
  position:absolute;
  left:-10%; right:-10%; bottom:0; height:62%;
  border-radius:50%;
  background:rgba(123,164,194,.28);
  filter:blur(30px);
  mix-blend-mode:screen;
}
.science-notes {
  position:absolute;
  left:48%; top:21%; width:38%; height:52%;
  transform:rotate(7deg);
  background:
    repeating-linear-gradient(180deg,transparent 0 24px,rgba(80,82,75,.16) 25px,transparent 26px),
    #ddd6bf;
  box-shadow:0 22px 34px rgba(24,14,8,.28);
}
.science-ring {
  position:absolute;
  left:25%; top:15%; width:45%; aspect-ratio:1;
  border:4px solid rgba(83,87,107,.48);
  border-radius:50%;
  box-shadow:inset 0 0 0 8px transparent,0 0 0 1px rgba(83,87,107,.25);
}
.science-ring::before,
.science-ring::after {
  content:''; position:absolute; left:50%; top:-18%; width:2px; height:136%; background:rgba(83,87,107,.38); transform-origin:center;
}
.science-ring::after { transform:rotate(60deg); }
.science-line { position:absolute; left:12%; height:2px; background:rgba(65,69,65,.35); }
.science-line.line-a { right:10%; bottom:25%; }
.science-line.line-b { right:25%; bottom:18%; }
.science-line.line-c { right:18%; bottom:11%; }

.examples-lantern {
  position:absolute;
  left:102vw; top:7%; width:11vw; min-width:90px; max-width:150px; aspect-ratio:.68;
  opacity:var(--examples-lantern-o,.7);
  filter:drop-shadow(0 18px 19px rgba(18,10,5,.35));
}
.lantern-body {
  position:absolute;
  inset:20% 14% 8%;
  border:4px solid #4e4434;
  border-radius:14px 14px 8px 8px;
  background:linear-gradient(180deg,rgba(236,193,112,.22),rgba(106,74,42,.32));
}
.lantern-body::before {
  content:'';
  position:absolute;
  left:16%; right:16%; top:-28%; height:33%;
  border:4px solid #4e4434;
  border-bottom:0;
  border-radius:50% 50% 0 0;
}
.lantern-light {
  position:absolute;
  left:-80%; right:-80%; top:3%; bottom:-20%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(244,185,84,.36),rgba(244,185,84,.12) 33%,transparent 69%);
  filter:blur(9px);
  mix-blend-mode:screen;
}
.examples-compass {
  position:absolute;
  left:181vw; top:66%; width:8vw; min-width:70px; max-width:120px; aspect-ratio:1;
  border-radius:50%;
  border:7px solid #6b5535;
  background:
    conic-gradient(from 45deg,#7e6a48 0 12.5%,#d6c393 12.5% 25%,#7e6a48 25% 37.5%,#d6c393 37.5% 50%,#7e6a48 50% 62.5%,#d6c393 62.5% 75%,#7e6a48 75% 87.5%,#d6c393 87.5% 100%);
  box-shadow:0 13px 20px rgba(21,12,7,.3), inset 0 0 0 7px #b9a879;
  transform:rotate(var(--examples-compass-r,-9deg));
}
.examples-compass::after {
  content:'';
  position:absolute;
  left:46%; top:12%; width:8%; height:38%;
  background:#7e302a;
  clip-path:polygon(50% 0,100% 100%,50% 82%,0 100%);
}
.examples-light {
  z-index:8;
  width:125vw;
  transform:translate3d(var(--examples-light-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 46% 67%,rgba(243,190,103,.16),transparent 31%),
    radial-gradient(ellipse at 74% 59%,rgba(163,190,213,.07),transparent 23%);
  mix-blend-mode:screen;
}
.examples-vignette {
  z-index:9;
  pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 42%,rgba(7,12,9,.24) 77%,rgba(4,7,5,.62) 100%);
}

.examples-heading,
.example-beat {
  position:absolute;
  z-index:20;
  pointer-events:none;
  text-shadow:0 2px 30px rgba(11,16,12,.56);
}
.examples-heading {
  left:7vw;
  top:13vh;
  width:min(850px,75vw);
  opacity:var(--examples-heading-o,1);
  transform:translate3d(0,var(--examples-heading-y,0px),0);
}
.examples-heading h2 {
  margin:.55rem 0 1rem;
  max-width:830px;
  color:#fffdf6;
  font-size:clamp(3rem,5.55vw,6.2rem);
  line-height:.91;
  letter-spacing:-.05em;
  text-transform:uppercase;
  text-wrap:balance;
}
.examples-heading p {
  margin:0;
  max-width:720px;
  color:rgba(255,253,246,.88);
  font-size:clamp(1rem,1.32vw,1.18rem);
  line-height:1.7;
}
.example-beat {
  left:7vw;
  bottom:9.5vh;
  width:min(710px,56vw);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
}
.example-beat-wildlife { opacity:var(--example-wildlife-o,0); transform:translate3d(var(--example-wildlife-x,0px),0,0); }
.example-beat-fort { opacity:var(--example-fort-o,0); transform:translate3d(var(--example-fort-x,0px),0,0); }
.example-beat-science { opacity:var(--example-science-o,0); transform:translate3d(var(--example-science-x,0px),0,0); }
.example-number {
  min-width:52px;
  padding-top:8px;
  color:#e6bd72;
  font:600 1rem/1 Georgia,'Times New Roman',serif;
  letter-spacing:.08em;
}
.example-beat h3 {
  margin:.3rem 0 .55rem;
  color:#fffdf6;
  font:600 clamp(2rem,3.45vw,3.95rem)/.98 Georgia,'Times New Roman',serif;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.example-beat p {
  margin:0;
  max-width:640px;
  color:rgba(255,253,246,.88);
  font-size:clamp(.98rem,1.18vw,1.1rem);
  line-height:1.65;
}
.examples-progress {
  position:absolute;
  z-index:25;
  left:50%;
  bottom:4.3vh;
  width:min(340px,34vw);
  height:20px;
  transform:translateX(-50%);
  opacity:.78;
}
.examples-progress-line {
  position:absolute;
  left:0; right:0; top:9px;
  height:1px;
  background:rgba(230,189,114,.28);
}
.examples-progress-line::after {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:calc(var(--examples-progress,0) * 100%);
  background:#e6bd72;
}
.examples-progress-dot {
  position:absolute;
  top:5px;
  width:9px; height:9px;
  border-radius:50%;
  border:1px solid rgba(230,189,114,.84);
  background:#493b2d;
  transform:translateX(-50%);
}
.examples-progress-dot-1 { left:6%; }
.examples-progress-dot-2 { left:50%; }
.examples-progress-dot-3 { left:94%; }

@media (max-width:760px) {
  .examples-chapter { height:410vh; min-height:2950px; }
  .examples-sticky { min-height:560px; }
  .examples-heading { left:6vw; top:12vh; width:88vw; }
  .examples-heading h2 { font-size:clamp(2.4rem,11.1vw,4.35rem); }
  .examples-heading p { max-width:86vw; }
  .examples-table { top:40vh; height:68vh; width:390vw; }
  .examples-track { width:350vw; }
  .example-prop { width:88vw; top:7%; }
  .example-prop-wildlife { left:18vw; }
  .example-prop-fort { left:133vw; }
  .example-prop-science { left:248vw; }
  .example-beat {
    left:6vw;
    bottom:8.5vh;
    width:88vw;
    grid-template-columns:42px 1fr;
    gap:12px;
  }
  .example-beat h3 { font-size:clamp(1.8rem,8.1vw,2.85rem); }
  .example-beat p { font-size:.96rem; line-height:1.58; }
  .examples-progress { width:50vw; bottom:3.1vh; }
  .examples-lantern { left:119vw; }
  .examples-compass { left:210vw; }
}

/* v79 — Chapter 8: final cinematic CTA ------------------------------------
   The journey settles into a quiet evening landscape. Placeholder geometry is
   intentionally simple so generated artwork can replace every art slot without
   changing the motion or semantic content. */
.finale-chapter {
  position:relative;
  height:330vh;
  min-height:2450px;
  scroll-margin-top:0;
  background:#07151d;
  color:#fffdf6;
}
.finale-sticky {
  position:sticky;
  top:0;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  isolation:isolate;
  background:#1b2630;
}
.finale-art,
.finale-layer,
.finale-vignette,
.finale-end-fade {
  position:absolute;
  inset:0;
}
.finale-art {
  z-index:1;
  overflow:hidden;
  opacity:var(--finale-arrive-o,1);
  background:#cfa275;
}
.finale-sky {
  z-index:1;
  width:106vw;
  left:-2vw;
  transform:translate3d(var(--finale-sky-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 73% 34%,rgba(255,221,164,.44),transparent 18%),
    linear-gradient(180deg,#718598 0%,#b18b79 42%,#d6a66f 70%,#e1b77d 100%);
}
.finale-sun {
  position:absolute;
  z-index:2;
  left:72%;
  top:35%;
  width:clamp(58px,7vw,116px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate3d(-50%,var(--finale-sun-y,0vh),0);
  background:#f4d28d;
  box-shadow:0 0 45px rgba(247,199,119,.42),0 0 110px rgba(246,177,92,.22);
  opacity:.9;
}
.finale-distant {
  z-index:3;
  width:112vw;
  left:-4vw;
  transform:translate3d(var(--finale-distant-x,0vw),0,0);
  clip-path:polygon(0 58%,8% 53%,17% 55%,27% 46%,37% 51%,47% 43%,58% 49%,69% 39%,80% 44%,90% 37%,100% 43%,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(83,94,88,.78),#536157 72%,#46524c 100%);
  filter:saturate(.82);
}
.finale-mid {
  z-index:5;
  width:120vw;
  left:-6vw;
  transform:translate3d(var(--finale-mid-x,0vw),0,0);
  clip-path:polygon(0 69%,9% 65%,18% 67%,28% 58%,39% 63%,50% 56%,62% 64%,73% 54%,84% 60%,93% 55%,100% 58%,100% 100%,0 100%);
  background:
    linear-gradient(180deg,rgba(89,101,71,.96),rgba(56,70,56,.98)),
    #536148;
}
.finale-windmill {
  position:absolute;
  z-index:4;
  left:17.5%;
  top:45%;
  width:clamp(58px,6.6vw,112px);
  height:clamp(105px,12vw,190px);
  transform:translate3d(var(--finale-windmill-x,0vw),0,0) scale(.86);
  transform-origin:50% 100%;
  opacity:.6;
  filter:brightness(.72) saturate(.72);
}
.finale-windmill-body {
  position:absolute;
  left:27%;
  right:27%;
  top:23%;
  bottom:0;
  clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);
  background:#625f55;
}
.finale-windmill-cap {
  position:absolute;
  left:19%; right:19%; top:15%; height:16%;
  border-radius:50% 50% 22% 22%;
  background:#454843;
}
.finale-windmill-sails {
  position:absolute;
  left:50%; top:27%;
  width:148%;
  aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(var(--finale-windmill-r,-4deg));
  transform-origin:center;
}
.finale-sail {
  position:absolute;
  left:49%; top:0;
  width:2.4%; height:100%;
  transform-origin:50% 50%;
  background:rgba(68,70,65,.92);
}
.finale-sail::after {
  content:'';
  position:absolute;
  left:-150%; top:7%;
  width:400%; height:35%;
  border:1px solid rgba(68,70,65,.85);
  background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(68,70,65,.65) 5px 6px);
}
.finale-sail-a { transform:rotate(45deg); }
.finale-sail-b { transform:rotate(135deg); }
.finale-haze {
  z-index:6;
  opacity:var(--finale-haze-o,.65);
  background:
    linear-gradient(180deg,transparent 0 42%,rgba(232,202,156,.16) 55%,rgba(211,179,131,.12) 67%,transparent 78%),
    radial-gradient(ellipse at 73% 50%,rgba(255,218,153,.22),transparent 30%);
  filter:blur(1px);
  mix-blend-mode:screen;
}
.finale-front {
  z-index:7;
  width:126vw;
  left:-9vw;
  transform:translate3d(var(--finale-front-x,0vw),0,0);
  clip-path:polygon(0 82%,8% 77%,15% 80%,22% 73%,31% 79%,41% 72%,50% 78%,59% 71%,67% 76%,77% 68%,86% 75%,94% 69%,100% 73%,100% 100%,0 100%);
  background:linear-gradient(180deg,#2f473a,#1f332b 64%,#182820);
}
.finale-grass {
  z-index:8;
  width:132vw;
  left:-12vw;
  transform:translate3d(var(--finale-grass-x,0vw),0,0);
  top:auto;
  height:28vh;
  min-height:170px;
  bottom:-4vh;
  opacity:.92;
  background:
    repeating-linear-gradient(76deg,transparent 0 16px,rgba(19,39,29,.82) 17px 20px,transparent 21px 31px),
    linear-gradient(180deg,transparent,#15261e 48%,#0d1d17 100%);
  clip-path:polygon(0 30%,3% 16%,5% 35%,8% 4%,10% 34%,14% 11%,17% 39%,21% 8%,23% 36%,27% 17%,31% 42%,35% 6%,38% 33%,42% 14%,46% 40%,50% 9%,53% 34%,57% 15%,61% 40%,65% 4%,69% 37%,73% 18%,77% 43%,81% 7%,84% 35%,88% 13%,92% 39%,96% 5%,100% 31%,100% 100%,0 100%);
}
.finale-vignette {
  z-index:9;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(6,13,17,.08),transparent 25%,transparent 70%,rgba(4,12,14,.38)),
    radial-gradient(ellipse at center,transparent 46%,rgba(5,11,13,.19) 78%,rgba(3,8,10,.52) 100%);
}
.finale-end-fade {
  z-index:12;
  pointer-events:none;
  opacity:var(--finale-end-o,0);
  background:#061721;
}
.finale-copy {
  position:absolute;
  z-index:20;
  left:50%;
  top:50%;
  width:min(1040px,88vw);
  text-align:center;
  transform:translate3d(-50%,calc(-50% + var(--finale-copy-y,24px)),0);
  opacity:var(--finale-copy-o,0);
  text-shadow:0 3px 34px rgba(13,18,17,.42);
}
.finale-copy .eyebrow { color:#f0ca79; }
.finale-copy h2 {
  margin:.65rem auto 1.3rem;
  max-width:1040px;
  color:#fffdf6;
  font-size:clamp(3.1rem,6.25vw,7.2rem);
  line-height:.91;
  letter-spacing:-.055em;
  text-transform:uppercase;
  text-wrap:balance;
}
.finale-copy p {
  margin:0 auto 2.1rem;
  max-width:760px;
  color:rgba(255,253,246,.86);
  font-size:clamp(1rem,1.35vw,1.22rem);
  line-height:1.72;
}
.finale-cta-button {
  display:inline-flex;
  opacity:var(--finale-button-o,0);
  transform:translate3d(0,var(--finale-button-y,14px),0);
}
.finale-horizon-label {
  position:absolute;
  z-index:21;
  left:50%;
  bottom:4.1vh;
  transform:translateX(-50%);
  color:rgba(255,243,219,.62);
  font:600 .72rem/1.2 Arial,sans-serif;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
  opacity:var(--finale-label-o,0);
}
@media (max-width:760px) {
  .finale-chapter { height:300vh; min-height:2200px; }
  .finale-sticky { min-height:560px; }
  .finale-copy { width:88vw; top:48%; }
  .finale-copy h2 { font-size:clamp(2.55rem,12vw,4.5rem); }
  .finale-copy p { max-width:84vw; font-size:.98rem; line-height:1.62; }
  .finale-windmill { left:13%; top:49%; transform:translate3d(var(--finale-windmill-x,0vw),0,0) scale(.72); }
  .finale-sun { left:76%; top:38%; }
  .finale-horizon-label { bottom:3.2vh; font-size:.62rem; letter-spacing:.15em; }
}

/* v80 — real Chapter 3 field / windmill / woodland artwork -----------------
   Generated environment assets replace only the v72 placeholders. The tunnel
   and its whiteout timing are untouched. */
.players-scene {
  --players-world-w: 166vw;
  background:#f7f8fb !important;
}

/* One coherent golden-hour countryside master forms the far field. */
.players-sky {
  left:0 !important;
  top:0 !important;
  width:var(--players-world-w) !important;
  height:100% !important;
  background:var(--asset-players-field-master, none) center center / cover no-repeat !important;
  filter:saturate(.96) contrast(1.015);
}

/* The master already contains sky, Downs, fields and path. */
.players-sun-haze,
.players-horizon,
.players-field-back,
.players-field-mid,
.players-path {
  display:none !important;
}

/* A trimmed transparent foreground gives the lower edge depth without
   duplicating the distant path painted into the master. */
.players-field-front {
  display:block !important;
  left:0 !important;
  bottom:0 !important;
  width:var(--players-world-w) !important;
  height:100% !important;
  background:var(--asset-players-field-foreground, none) center center / cover no-repeat !important;
  clip-path:none !important;
  transform:translate3d(var(--players-field-front-x,0vw),var(--players-field-front-y,0vh),0) !important;
  z-index:11 !important;
}

/* Real woodland edge generated from the same lighting/composition. */
.players-wood-edge {
  display:block !important;
  left:0 !important;
  bottom:0 !important;
  width:var(--players-world-w) !important;
  height:100% !important;
  background:var(--asset-players-woodland-edge, none) center center / cover no-repeat !important;
  clip-path:none !important;
  filter:none !important;
  opacity:1 !important;
  z-index:9 !important;
}
.players-woods-back,
.players-woods-mid,
.players-woods-front,
.players-woods-canopy {
  display:none !important;
}

/* The windmill remains a true independent object: transparent stone tower
   plus a second transparent sail image. */
.players-windmill {
  left:8vw !important;
  bottom:7vh !important;
  width:clamp(190px,18vw,305px) !important;
  height:clamp(360px,58vh,540px) !important;
  background:var(--asset-players-windmill-body, none) center bottom / contain no-repeat !important;
  z-index:10 !important;
}
.players-windmill > .windmill-body,
.players-windmill > .windmill-cap,
.players-windmill > .windmill-door,
.players-windmill > .windmill-window {
  display:none !important;
}
.players-scene .windmill-blades {
  display:block !important;
  position:absolute !important;
  /* v87: front-facing mill head and front-facing sail plane. The sail hub is
     centred directly on the cap face so the blades rotate on the spindle,
     rather than trying to fake a second perspective with CSS. */
  left:50% !important;
  top:27% !important;
  bottom:auto !important;
  width:135% !important;
  height:auto !important;
  aspect-ratio:1 / 1;
  background:var(--asset-players-windmill-sails, none) center / contain no-repeat !important;
  transform-origin:50% 50% !important;
  z-index:4 !important;
  animation:raedelRealWindmillSpin 20s linear infinite !important;
  animation-play-state:var(--players-anim-state,running) !important;
}
.players-scene .windmill-blades > * { display:none !important; }
@keyframes raedelRealWindmillSpin {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}

/* Gentle readable falloff over the woodland only; this is not a panel. */
.players-scene::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:15;
  background:linear-gradient(90deg,transparent 0 47%,rgba(7,16,12,.04) 58%,rgba(7,16,12,.30) 100%);
  opacity:var(--players-copy-o,0);
}
.players-copy { z-index:20 !important; }

@media (max-width:880px) {
  .players-scene { --players-world-w:190vw; }
  .players-windmill {
    left:7vw !important;
    bottom:10vh !important;
    width:clamp(145px,28vw,215px) !important;
    height:clamp(300px,48vh,410px) !important;
  }
  .players-scene .windmill-blades {
    left:50% !important;
    top:27% !important;
    width:138% !important;
  }
}


/* v83 — Chapter 3 second movement: woodland pushes settled copy left -------
   The first copy entrance is unchanged in app.js. This only gives the
   post-whiteout chapter enough scroll runway for the second environmental
   movement and keeps the windmill readable until that movement begins. */
.journey-chapter {
  height:1040vh !important;
}
.players-scene {
  --players-world-w:190vw;
}
.players-windmill {
  left:14vw !important;
  bottom:15vh !important;
  width:clamp(220px,20vw,340px) !important;
  height:clamp(390px,61vh,570px) !important;
}
.players-copy {
  will-change:transform,opacity;
}
@media (max-width:880px) {
  .journey-chapter { height:1020vh !important; }
  .players-scene { --players-world-w:210vw; }
  .players-windmill {
    left:10vw !important;
    bottom:15vh !important;
    width:clamp(165px,31vw,235px) !important;
    height:clamp(320px,51vh,430px) !important;
  }
}


/* v88 — mechanically correct windmill rotor --------------------------------
   The sail bitmap is now a true flat orthographic rotor: four identical
   blades, equal radius, exact 90-degree spacing and a hub at image centre.
   Perspective belongs to this stationary wrapper only. The child rotor spins
   in its own plane, so perspective is never baked into the rotating artwork. */
.players-scene .windmill-sail-plane {
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:36.5% !important;
  width:136% !important;
  aspect-ratio:1 / 1;
  transform:translate(-50%,-50%) perspective(900px) rotateY(-7deg) rotateX(1.5deg) !important;
  transform-origin:50% 50% !important;
  transform-style:preserve-3d;
  z-index:4 !important;
  pointer-events:none;
}
.players-scene .windmill-sail-plane .windmill-blades {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  aspect-ratio:1 / 1;
  background:var(--asset-players-windmill-sails, none) center / contain no-repeat !important;
  transform-origin:50% 50% !important;
  animation:raedelFlatWindmillSpin 20s linear infinite !important;
  animation-play-state:var(--players-anim-state,running) !important;
  will-change:transform;
}
.players-scene .windmill-sail-plane .windmill-blades > * { display:none !important; }
@keyframes raedelFlatWindmillSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@media (max-width:880px) {
  .players-scene .windmill-sail-plane {
    left:50% !important;
    top:36.5% !important;
    width:140% !important;
    transform:translate(-50%,-50%) perspective(760px) rotateY(-7deg) rotateX(1.5deg) !important;
  }
}


/* v89 — lower flat rotor onto the actual cap/spindle line. */


/* v90 — Chapter 3: single player RÆDEL + woodland team --------------------
   These appear only once the woodland takeover is well underway. They are
   separate decorative layers so future pose changes do not affect the scene. */
.players-character {
  position:absolute;
  bottom:0;
  pointer-events:none;
  opacity:var(--players-characters-o,0);
  background-repeat:no-repeat !important;
  background-position:center bottom !important;
  background-size:contain !important;
  will-change:transform,opacity;
  z-index:17;
}
.players-raedel {
  left:40.5vw;
  bottom:-1.2vh;
  width:clamp(235px,20vw,350px);
  height:76vh;
  background-image:var(--asset-players-raedel,none) !important;
  transform:translate3d(0,var(--players-raedel-y,4vh),0) scale(var(--players-raedel-s,.94));
  transform-origin:50% 100%;
}
.players-team {
  right:-1.5vw;
  bottom:-.5vh;
  width:clamp(430px,36vw,650px);
  height:70vh;
  background-image:var(--asset-players-team,none) !important;
  transform:translate3d(0,var(--players-team-y,5vh),0) scale(var(--players-team-s,.94));
  transform-origin:50% 100%;
}

@media (max-width:1100px) {
  .players-raedel {
    left:39.5vw;
    width:clamp(210px,23vw,300px);
    height:68vh;
  }
  .players-team {
    right:-4vw;
    width:clamp(380px,43vw,540px);
    height:64vh;
  }
}
@media (max-width:880px) {
  .players-raedel {
    left:39vw;
    bottom:0;
    width:clamp(150px,29vw,220px);
    height:52vh;
  }
  .players-team {
    right:-11vw;
    bottom:0;
    width:clamp(290px,55vw,420px);
    height:52vh;
  }
}


/* v92 — final Chapter 3 choice composition + interaction ------------------ */
/* At the end of the woodland takeover the copy finishes fully on the left,
   RÆDEL sits with the solo side, and the team has clear separation. */
.players-raedel {
  left:31.5vw !important;
  bottom:-2.2vh !important;
  width:clamp(230px,19vw,335px) !important;
}
.players-team {
  right:1.5vw !important;
  bottom:-.4vh !important;
  width:clamp(405px,34vw,610px) !important;
}

/* Hovering or keyboard-focusing a choice visually identifies who it means. */
.players-raedel,
.players-team {
  transition:filter .22s ease, opacity .22s ease;
}
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-raedel {
  filter:brightness(1.10) saturate(1.08) drop-shadow(0 0 22px rgba(234,174,63,.38));
}
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-team {
  opacity:calc(var(--players-characters-o,0) * .34) !important;
  filter:saturate(.72) brightness(.78);
}
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-team {
  filter:brightness(1.08) saturate(1.08) drop-shadow(0 0 24px rgba(234,174,63,.32));
}
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-raedel {
  opacity:calc(var(--players-characters-o,0) * .34) !important;
  filter:saturate(.72) brightness(.78);
}

@media (max-width:1100px) {
  .players-raedel {
    left:30vw !important;
    width:clamp(205px,21vw,290px) !important;
  }
  .players-team {
    right:0 !important;
    width:clamp(360px,40vw,520px) !important;
  }
}
@media (max-width:880px) {
  .players-raedel {
    left:27vw !important;
    bottom:-.5vh !important;
    width:clamp(145px,27vw,210px) !important;
  }
  .players-team {
    right:-3vw !important;
    width:clamp(270px,50vw,390px) !important;
  }
}


/* v93 — Chapter 3 play-mode controls are selectors, not navigation -------- */
.players-actions .button {
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  cursor:pointer;
}
.players-actions .button-primary { border:1px solid transparent; }

/* A clicked choice stays highlighted until the other choice is selected. */
.players-scene[data-player-choice="solo"] .players-raedel {
  filter:brightness(1.10) saturate(1.08) drop-shadow(0 0 22px rgba(234,174,63,.38));
}
.players-scene[data-player-choice="solo"] .players-team {
  opacity:calc(var(--players-characters-o,0) * .34) !important;
  filter:saturate(.72) brightness(.78);
}
.players-scene[data-player-choice="team"] .players-team {
  filter:brightness(1.08) saturate(1.08) drop-shadow(0 0 24px rgba(234,174,63,.32));
}
.players-scene[data-player-choice="team"] .players-raedel {
  opacity:calc(var(--players-characters-o,0) * .34) !important;
  filter:saturate(.72) brightness(.78);
}

/* Hover/focus is always a live preview, even if the other mode is selected. */
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-raedel {
  opacity:var(--players-characters-o,0) !important;
  filter:brightness(1.10) saturate(1.08) drop-shadow(0 0 22px rgba(234,174,63,.38)) !important;
}
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-team {
  opacity:calc(var(--players-characters-o,0) * .34) !important;
  filter:saturate(.72) brightness(.78) !important;
}
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-team {
  opacity:var(--players-characters-o,0) !important;
  filter:brightness(1.08) saturate(1.08) drop-shadow(0 0 24px rgba(234,174,63,.32)) !important;
}
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-raedel {
  opacity:calc(var(--players-characters-o,0) * .34) !important;
  filter:saturate(.72) brightness(.78) !important;
}
.players-actions .button[aria-pressed="true"] {
  box-shadow:0 0 0 2px rgba(234,174,63,.30), 0 10px 30px rgba(0,0,0,.25);
}


/* v95 — Chapter 3 owns pointer hit testing while visible ------------------
   The hero and Chapter 3 share one sticky stage. Firefox can otherwise hit
   the invisible hero CTA anchors through the visual player controls. */
.players-choice-active .hero-copy,
.players-choice-active .hero-copy * {
  pointer-events:none !important;
}
.players-choice-active .players-scene {
  pointer-events:auto !important;
}
.players-choice-active .players-panorama,
.players-choice-active .players-character,
.players-choice-active .players-windmill,
.players-choice-active .players-layer {
  pointer-events:none !important;
}
.players-choice-active .players-copy,
.players-choice-active .players-actions,
.players-choice-active .players-actions .button {
  pointer-events:auto !important;
}
.players-choice-active .players-actions {
  position:relative;
  z-index:260;
}
.players-choice-active .site-header {
  z-index:300 !important;
}

/* v96 — play mode highlight without dimming the other choice ------------- */
/* User request: the selected or hovered side should glow, while the other
   remains fully visible rather than fading back. */
.players-scene[data-player-choice="solo"] .players-raedel,
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-raedel {
  opacity:var(--players-characters-o,0) !important;
  filter:brightness(1.10) saturate(1.08) drop-shadow(0 0 22px rgba(234,174,63,.38)) !important;
}
.players-scene[data-player-choice="solo"] .players-team,
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-team {
  opacity:var(--players-characters-o,0) !important;
  filter:none !important;
}
.players-scene[data-player-choice="team"] .players-team,
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-team {
  opacity:var(--players-characters-o,0) !important;
  filter:brightness(1.08) saturate(1.08) drop-shadow(0 0 24px rgba(234,174,63,.32)) !important;
}
.players-scene[data-player-choice="team"] .players-raedel,
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-raedel {
  opacity:var(--players-characters-o,0) !important;
  filter:none !important;
}

/* v97 — Chapter 3 -> Chapter 4 forward woodland handoff ------------------
   The player choice remains the last horizontal move. Chapter 4 starts by
   holding the same clearing for a beat, then the camera commits forward into
   the woodland. No hero/tunnel styles are touched here. */
.how-chapter {
  height:430vh !important;
  background:#0d1c12 !important;
}
.how-sticky {
  background:linear-gradient(180deg,#273a26 0%,#15281a 50%,#09150e 100%) !important;
}

/* Visual bridge from the final Chapter 3 frame. */
.how-entry-clearing {
  position:absolute;
  inset:0;
  z-index:14;
  overflow:hidden;
  pointer-events:none;
  opacity:var(--how-entry-o,1);
  background:#d6b979;
}
.how-entry-field,
.how-entry-woodland {
  position:absolute;
  inset:-4%;
  background-repeat:no-repeat !important;
  will-change:transform;
  transform-origin:82% 53%;
  transform:translate3d(var(--how-entry-x,0vw),var(--how-entry-y,0vh),0) scale(var(--how-entry-scale,1));
}
.how-entry-field {
  background:var(--asset-players-field-master,none) 44% center / cover no-repeat !important;
}
.how-entry-woodland {
  background:var(--asset-players-woodland-edge,none) center center / cover no-repeat !important;
}
.how-entry-clearing::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(9,18,12,.02) 0 42%,rgba(9,18,12,.12) 66%,rgba(9,18,12,.30) 100%);
  pointer-events:none;
}
.how-entry-choice {
  position:absolute;
  z-index:4;
  left:5.8vw;
  top:18vh;
  width:min(39vw,560px);
  color:#fffdf6;
  opacity:var(--how-entry-choice-o,1);
  text-shadow:0 2px 26px rgba(0,0,0,.26);
  will-change:opacity,transform;
}
.how-entry-choice .how-entry-title {
  margin:.55rem 0 1.25rem;
  font-size:clamp(3.2rem,5.7vw,6.2rem);
  line-height:.89;
  font-weight:780;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
.how-entry-choice p {
  max-width:520px;
  margin:0;
  font-size:clamp(.98rem,1.2vw,1.1rem);
  line-height:1.62;
}
.how-entry-buttons {
  display:flex;
  gap:14px;
  margin-top:1.5rem;
}
.how-entry-buttons .button { pointer-events:none; }
.how-entry-raedel,
.how-entry-team {
  position:absolute;
  z-index:5;
  bottom:-2vh;
  height:74vh;
  background-repeat:no-repeat !important;
  background-position:center bottom !important;
  background-size:contain !important;
  opacity:var(--how-entry-character-o,1);
  transform:translate3d(0,var(--how-entry-character-y,0vh),0) scale(var(--how-entry-character-s,1));
  transform-origin:50% 100%;
  will-change:opacity,transform;
}
.how-entry-raedel {
  left:31.5vw;
  width:clamp(230px,19vw,335px);
  background-image:var(--asset-players-raedel,none) !important;
}
.how-entry-team {
  right:1.5vw;
  width:clamp(405px,34vw,610px);
  background-image:var(--asset-players-team,none) !important;
}

/* The new trail begins beneath the clearing and fades into view as the
   clearing rushes past. From this point on all motion is depth/scale based. */
.how-trail-art {
  opacity:var(--how-trail-o,0);
  transition:none !important;
  background:linear-gradient(180deg,#516148 0%,#324632 37%,#172b1c 72%,#0b1a11 100%);
}
.how-layer {
  left:-6vw !important;
  width:112vw !important;
  transform-origin:50% 62%;
}
.how-sky {
  transform:scale(var(--how-sky-s,1)) !important;
}
.how-back {
  transform:translate3d(var(--how-back-x,0vw),var(--how-back-y,0vh),0) scale(var(--how-back-s,1)) !important;
}
.how-mid {
  transform:translate3d(var(--how-mid-x,0vw),var(--how-mid-y,0vh),0) scale(var(--how-mid-s,1)) !important;
}
.how-path {
  left:-6vw !important;
  width:112vw !important;
  transform-origin:50% 100%;
  transform:translate3d(var(--how-path-x,0vw),var(--how-path-y,0vh),0) scale(var(--how-path-s,1)) !important;
  background:
    radial-gradient(ellipse at 50% 105%,rgba(213,178,112,.78) 0 19%,transparent 19.5%),
    radial-gradient(ellipse at 50% 70%,rgba(188,151,91,.58) 0 13%,transparent 13.5%),
    radial-gradient(ellipse at 50% 49%,rgba(184,148,90,.42) 0 8%,transparent 8.5%),
    linear-gradient(180deg,transparent 0 24%,rgba(58,67,40,.22) 25% 100%) !important;
}
.how-front {
  transform-origin:50% 100%;
  transform:translate3d(var(--how-front-x,0vw),var(--how-front-y,0vh),0) scale(var(--how-front-s,1)) !important;
}
.how-canopy {
  transform-origin:50% 0%;
  transform:translate3d(var(--how-canopy-x,0vw),var(--how-canopy-y,0vh),0) scale(var(--how-canopy-s,1)) !important;
}

/* Objects now live down the centre/right of the same trail and approach the
   camera in sequence rather than travelling horizontally across the page. */
.how-object { will-change:transform,opacity; }
.how-marker {
  left:66% !important;
  bottom:19vh !important;
  opacity:var(--how-marker-o,0);
  transform:translate3d(-50%,var(--how-marker-y,4vh),0) scale(var(--how-marker-s,.2)) !important;
  transform-origin:50% 100%;
}
.how-puzzle-object {
  left:62% !important;
  bottom:12vh !important;
  opacity:var(--how-puzzle-o,0);
  transform:translate3d(-50%,var(--how-puzzle-y,4vh),0) scale(var(--how-puzzle-s,.2)) !important;
  transform-origin:50% 100%;
}
.how-story-object {
  left:64% !important;
  bottom:13vh !important;
  opacity:var(--how-story-object-o,0);
  transform:translate3d(-50%,var(--how-story-object-y,4vh),0) scale(var(--how-story-object-s,.2)) !important;
  transform-origin:50% 100%;
}
.how-scene-heading { z-index:24 !important; }
.how-beat { z-index:25 !important; }
.how-progress { z-index:26 !important; }

@media (max-width:880px) {
  .how-chapter { height:410vh !important; }
  .how-entry-choice {
    left:6vw;
    top:16vh;
    width:58vw;
  }
  .how-entry-choice .how-entry-title { font-size:clamp(2.7rem,11.5vw,4.7rem); }
  .how-entry-choice p { font-size:.9rem; }
  .how-entry-buttons { gap:8px; flex-wrap:wrap; }
  .how-entry-raedel {
    left:42vw;
    width:clamp(145px,27vw,210px);
    height:54vh;
  }
  .how-entry-team {
    right:-4vw;
    width:clamp(270px,50vw,390px);
    height:54vh;
  }
  .how-marker { left:72% !important; }
  .how-puzzle-object,
  .how-story-object { left:68% !important; }
}

/* v98 — Chapter 4 lives on the SAME sticky stage as Chapter 3 -------------
   This prevents the forward transition from appearing as a second panel below
   the player scene. The semantic Chapter 4 section is now an overlay in the
   existing journey stage and its progress is driven by journey scroll. */
.journey-chapter {
  height:1420vh !important;
}
#how-it-works.how-chapter {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  z-index:169 !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  pointer-events:none !important;
}
#how-it-works .how-sticky {
  position:absolute !important;
  inset:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:transparent !important;
}
#how-it-works .how-entry-clearing {
  display:none !important;
}
#how-it-works .how-trail-art {
  opacity:var(--how-trail-o,0) !important;
}

/* Recede the REAL final player scene while Chapter 4 appears beneath it. */
.players-panorama {
  opacity:calc(var(--players-panorama-o,1) * var(--players-exit-panorama-o,1)) !important;
  transform:translate3d(var(--players-exit-x,0vw),var(--players-exit-y,0vh),0) scale(var(--players-exit-scale,1)) !important;
  transform-origin:82% 54% !important;
}
.players-copy {
  opacity:calc(var(--players-copy-o,0) * var(--players-exit-copy-o,1)) !important;
}
.players-scene .players-raedel,
.players-scene .players-team,
.players-scene[data-player-choice="solo"] .players-raedel,
.players-scene[data-player-choice="solo"] .players-team,
.players-scene[data-player-choice="team"] .players-raedel,
.players-scene[data-player-choice="team"] .players-team,
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-raedel,
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-team,
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-raedel,
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-team {
  opacity:calc(var(--players-characters-o,0) * var(--players-exit-characters-o,1)) !important;
}

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

/* v99 — Chapter 4 must reveal ABOVE the Chapter 3 backing layer -----------
   v98 placed the forward trail one stacking level below .players-scene.
   When the real clearing panorama faded, the player's pale scene backing was
   therefore exposed and looked like a fade to white. Keep Chapter 4 fully
   transparent at first, but stack it above Chapter 3 so its woodland trail
   can dissolve directly over the live clearing in the same viewport. */
#how-it-works.how-chapter {
  z-index:171 !important;
}
#how-it-works .how-sticky {
  background:transparent !important;
}
#how-it-works .how-trail-art {
  opacity:var(--how-trail-o,0) !important;
  visibility:visible !important;
}


/* v100 — Scene 3 -> woodland path: one continuous horizontal world ---------
   The accepted alpha transition plate is the only Chapter 4 background art.
   It slides over the still-live Scene 3 field, settles with the path centred,
   then receives a small forward zoom. Later world panels can continue from
   its deliberately dark right edge. */
:root { --asset-how-transition:none; }

#how-it-works .how-trail-art {
  inset:0 !important;
  overflow:hidden !important;
  background:transparent !important;
  opacity:var(--how-trail-o,0) !important;
}
#how-it-works .how-transition-master {
  position:absolute;
  left:0;
  top:0;
  width:112.5vw;
  height:100vh;
  min-height:620px;
  background:var(--asset-how-transition,none) center center / 100% 100% no-repeat;
  transform:translate3d(var(--how-master-x,104vw),var(--how-master-y,0vh),0) scale(var(--how-master-s,1));
  transform-origin:69% 57%;
  will-change:transform;
  pointer-events:none;
  z-index:1;
}

/* Retire the old generated-CSS forest placeholders without deleting the
   semantic/art slots yet; they can become true parallax layers later. */
#how-it-works .how-sky,
#how-it-works .how-back,
#how-it-works .how-mid,
#how-it-works .how-path,
#how-it-works .how-front,
#how-it-works .how-canopy {
  display:none !important;
}

/* Compact gold waypoints anchored to the real path rather than giant scene
   props. Existing semantic labels remain in the live beat cards. */
#how-it-works .how-object {
  width:68px !important;
  height:68px !important;
  border:1px solid rgba(240,202,121,.72);
  border-radius:50%;
  background:rgba(8,22,15,.58);
  box-shadow:0 0 0 7px rgba(240,202,121,.07),0 0 28px rgba(240,202,121,.22);
  backdrop-filter:blur(4px);
  display:grid;
  place-items:center;
  color:#f0ca79;
  z-index:8 !important;
}
#how-it-works .how-marker {
  left:58% !important;
  bottom:31vh !important;
  opacity:var(--how-marker-o,0);
  transform:translate3d(-50%,var(--how-marker-y,2vh),0) scale(var(--how-marker-s,.76)) !important;
}
#how-it-works .how-puzzle-object {
  left:66% !important;
  bottom:24vh !important;
  opacity:var(--how-puzzle-o,0);
  transform:translate3d(-50%,var(--how-puzzle-y,2vh),0) scale(var(--how-puzzle-s,.76)) !important;
}
#how-it-works .how-story-object {
  left:74% !important;
  bottom:18vh !important;
  opacity:var(--how-story-object-o,0);
  transform:translate3d(-50%,var(--how-story-object-y,2vh),0) scale(var(--how-story-object-s,.76)) !important;
}
#how-it-works .how-marker-post,
#how-it-works .how-marker-sign,
#how-it-works .puzzle-stone,
#how-it-works .story-table,
#how-it-works .story-map,
#how-it-works .story-lantern {
  display:none !important;
}
#how-it-works .how-marker-glyph,
#how-it-works .puzzle-core {
  position:static !important;
  inset:auto !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  background:none !important;
  color:#f0ca79 !important;
  font-size:28px;
}
#how-it-works .how-story-object::before {
  content:'▤';
  font-size:26px;
  line-height:1;
}

/* Keep the explanatory cards compact and away from the path markers. */
#how-it-works .how-beat {
  width:min(320px,25vw) !important;
  padding:16px 18px !important;
  background:rgba(7,18,12,.54) !important;
  border-color:rgba(240,202,121,.22) !important;
  backdrop-filter:blur(8px);
}

@media (max-width:880px) {
  #how-it-works .how-transition-master {
    width:150vw;
    transform-origin:69% 58%;
  }
  #how-it-works .how-beat { width:min(72vw,310px) !important; }
}

/* v101 — Chapter 4 handoff refinement + single information panel ---------- */
:root {
  --players-exit-wood-edge-x:0vw;
  --players-exit-wood-edge-o:1;
}
.players-wood-edge {
  transform:translate3d(calc(var(--players-wood-edge-x,0vw) + var(--players-exit-wood-edge-x,0vw)),0,0) !important;
  opacity:var(--players-exit-wood-edge-o,1) !important;
  will-change:transform,opacity;
}

/* The alpha path plate is intentionally narrower than its final viewport
   coverage. The right side resolves into deep woodland-black, so the old
   countryside can never show through after the path is centred. */
#how-it-works .how-trail-art::after {
  content:'';
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:22vw;
  z-index:0;
  pointer-events:none;
  opacity:var(--how-right-shade-o,0);
  background:linear-gradient(90deg,rgba(2,5,3,0) 0%,rgba(2,5,3,.76) 34%,#020403 68%,#020403 100%);
}
#how-it-works .how-transition-master { z-index:1 !important; }

/* Rendered artefacts replace flat circular UI glyphs. */
#how-it-works .how-object {
  width:116px !important;
  height:116px !important;
  display:block !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  filter:drop-shadow(0 10px 12px rgba(0,0,0,.52));
}
#how-it-works .how-object img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
#how-it-works .how-marker { left:57% !important; bottom:31vh !important; }
#how-it-works .how-puzzle-object { left:66% !important; bottom:23vh !important; }
#how-it-works .how-story-object { left:75% !important; bottom:16vh !important; }

/* One live panel occupies the former Explore / Solve / Discover copy area.
   Its three semantic states crossfade inside the same physical panel. */
#how-it-works .how-scene-heading,
#how-it-works .how-beat { display:none !important; }
#how-it-works .how-info-panel {
  position:absolute;
  left:7.4vw;
  top:19vh;
  width:min(430px,31vw);
  min-height:220px;
  z-index:25;
  opacity:var(--how-panel-o,0);
  pointer-events:none;
  border:1px solid rgba(240,202,121,.26);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(6,17,11,.82),rgba(6,17,11,.58));
  box-shadow:0 18px 55px rgba(0,0,0,.38);
  backdrop-filter:blur(12px);
  overflow:hidden;
}
#how-it-works .how-panel-state {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  align-items:start;
  padding:24px 26px;
  transition:none;
}
#how-it-works .how-panel-state .how-step {
  color:#e7bd63;
  font-size:.78rem;
  letter-spacing:.15em;
  padding-top:5px;
}
#how-it-works .how-panel-state .eyebrow {
  color:#e7bd63;
  margin-bottom:8px;
}
#how-it-works .how-panel-state h2 {
  margin:0 0 10px;
  color:#fff9eb;
  font-size:clamp(1.55rem,2.35vw,2.45rem);
  line-height:1.02;
  letter-spacing:-.035em;
}
#how-it-works .how-panel-state p {
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:.96rem;
  line-height:1.55;
}
#how-it-works .how-panel-discover { opacity:var(--how-discover-o,0); }
#how-it-works .how-panel-solve { opacity:var(--how-solve-o,0); }
#how-it-works .how-panel-story { opacity:var(--how-story-o,0); }

@media (max-width:880px) {
  #how-it-works .how-trail-art::after { width:29vw; }
  #how-it-works .how-object { width:84px !important; height:84px !important; }
  #how-it-works .how-info-panel {
    left:6vw;
    top:15vh;
    width:min(78vw,350px);
    min-height:205px;
  }
  #how-it-works .how-panel-state {
    grid-template-columns:38px 1fr;
    padding:19px 20px;
    gap:10px;
  }
}

/* v102 — Scene 4 open cinematic copy + tangible artefacts ---------------- */
.players-wood-edge { opacity:1 !important; }

#how-it-works .how-info-panel { display:none !important; }
#how-it-works .how-copy-stage {
  position:absolute;
  left:6.9vw;
  top:17.5vh;
  width:min(560px,40vw);
  min-height:58vh;
  z-index:25;
  opacity:var(--how-copy-o,0);
  pointer-events:none;
  color:#fffdf6;
  text-shadow:0 2px 28px rgba(0,0,0,.34);
}
#how-it-works .how-copy-state {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:none !important;
}
#how-it-works .how-copy-intro { opacity:var(--how-intro-o,0); }
#how-it-works .how-copy-discover { opacity:var(--how-discover-o,0); }
#how-it-works .how-copy-solve { opacity:var(--how-solve-o,0); }
#how-it-works .how-copy-story { opacity:var(--how-story-o,0); }
#how-it-works .how-copy-stage .eyebrow,
#how-it-works .how-kicker {
  display:block;
  margin:0 0 .8rem;
  color:#e8bd60;
  font-size:clamp(.76rem,.95vw,.94rem);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
#how-it-works .how-kicker b { margin-right:1.1rem; color:#f0c76b; font:inherit; }
#how-it-works .how-copy-stage h2 {
  margin:0 0 1.35rem;
  color:#fffdf6;
  font-family:inherit;
  font-size:clamp(3.3rem,5.35vw,6.15rem);
  font-weight:780;
  line-height:.89;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
#how-it-works .how-copy-intro h2 { font-size:clamp(3.7rem,6vw,6.6rem); }
#how-it-works .how-copy-stage p {
  margin:0;
  width:min(520px,100%);
  color:rgba(255,255,255,.92);
  font-size:clamp(.98rem,1.22vw,1.12rem);
  line-height:1.62;
  text-shadow:0 2px 18px rgba(0,0,0,.46);
}
#how-it-works .how-object {
  filter:drop-shadow(0 14px 15px rgba(0,0,0,.58)) drop-shadow(0 0 12px rgba(231,189,99,.12)) !important;
}
#how-it-works .how-marker { width:124px !important; height:124px !important; }
#how-it-works .how-puzzle-object {
  width:172px !important;
  height:172px !important;
  left:67% !important;
  bottom:20vh !important;
}
#how-it-works .how-story-object {
  width:176px !important;
  height:150px !important;
  left:76% !important;
  bottom:12vh !important;
}
#how-it-works .how-story-object img { object-fit:contain !important; }
@media (max-width:880px) {
  #how-it-works .how-copy-stage { left:6vw; top:14vh; width:min(78vw,430px); }
  #how-it-works .how-copy-stage h2 { font-size:clamp(2.65rem,10.6vw,4.55rem); }
  #how-it-works .how-copy-intro h2 { font-size:clamp(2.9rem,11.5vw,4.85rem); }
  #how-it-works .how-puzzle-object { width:122px !important; height:122px !important; }
  #how-it-works .how-story-object { width:124px !important; height:108px !important; }
}


/* v103 — rolling hills night → dawn journey; tunnel removed ---------------- */
.journey-world{opacity:1!important;background:transparent!important;pointer-events:none!important;overflow:hidden!important;}
.night-guide-layer,.night-product-beat{position:absolute;inset:0;pointer-events:none;}
.night-guide-layer{z-index:125;}
.night-product-beat,.interior-world.night-product-beat{z-index:130!important;opacity:1!important;background:transparent!important;overflow:visible!important;}
.p-castle{opacity:1!important;filter:brightness(var(--p-castle-bright,1)) saturate(.88) contrast(1.08) drop-shadow(0 12px 28px rgba(0,0,0,.18))!important;will-change:transform,filter;}
.threshold-fox{z-index:145!important;}
.threshold-fox-glow,.threshold-fox::after,.scan-line{animation-play-state:var(--night-guide-anim-state,paused)!important;}
.players-panorama{filter:brightness(var(--players-dawn-bright,1)) saturate(.94)!important;}
.players-scene::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--players-dawn-glow-o,0);background:radial-gradient(ellipse at 19% 78%,rgba(255,190,86,.72) 0 8%,rgba(255,160,55,.30) 20%,transparent 50%),linear-gradient(180deg,rgba(25,55,84,.20),transparent 46%);mix-blend-mode:screen;}
.players-scene::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:var(--players-dawn-black-o,0);background:#000;}
.players-copy,.players-character{z-index:6!important;}
.journey-exterior,.journey-portal,.portal-interior,.tunnel-slice,.tunnel-whiteout,.portal-depth-glow{display:none!important;}

/* v104 — fixed fox anchor + centred phone + horizon-led dawn -------------- */
/* The lantern pose is not a second character entrance. It occupies exactly
   the same screen box and uses the same transform as the normal hero fox, so
   the feet/body remain locked while the artwork crossfades. */
.threshold-fox {
  left:auto !important;
  right:6.2vw !important;
  bottom:-2.6vh !important;
  width:min(22.4vw,350px) !important;
  height:min(67vh,680px) !important;
  transform:translate3d(var(--hero-fox-x,0vw),var(--hero-fox-y,0vh),0)
            scale(var(--hero-fox-scale,1)) !important;
  transform-origin:50% 85% !important;
  will-change:opacity !important;
}
.threshold-fox-image {
  background-position:center bottom !important;
  background-size:contain !important;
}
/* Phone sits between the left copy and the right-hand fox rather than
   competing with either of them. */
.viewport-phone {
  left:56.5% !important;
  top:55% !important;
  width:min(23.5vw,335px) !important;
}

/* Sunrise is a reveal from the lower-left horizon. The player scene is
   already present behind this night mask, so it does not read as a page fade. */
.players-scene::after {
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:var(--players-dawn-black-o,1) !important;
  background:#000 !important;
  -webkit-mask-image:radial-gradient(circle at 18% 76%,
    transparent 0 var(--players-dawn-hole,2%),
    rgba(0,0,0,.48) calc(var(--players-dawn-hole,2%) + 7%),
    #000 calc(var(--players-dawn-hole,2%) + 18%)) !important;
  mask-image:radial-gradient(circle at 18% 76%,
    transparent 0 var(--players-dawn-hole,2%),
    rgba(0,0,0,.48) calc(var(--players-dawn-hole,2%) + 7%),
    #000 calc(var(--players-dawn-hole,2%) + 18%)) !important;
}
.players-scene::before {
  opacity:var(--players-dawn-glow-o,0) !important;
  background:
    radial-gradient(ellipse at 18% 77%,rgba(255,238,174,.92) 0 3%,rgba(255,192,92,.58) 10%,rgba(255,142,45,.24) 25%,transparent 52%),
    radial-gradient(ellipse at 38% 65%,rgba(255,186,79,.20),transparent 50%),
    linear-gradient(180deg,rgba(25,48,73,.22),rgba(255,154,65,.07) 58%,transparent 82%) !important;
  mix-blend-mode:screen !important;
}
.players-panorama {
  transition:none !important;
  filter:brightness(var(--players-dawn-bright,1)) saturate(var(--players-dawn-sat,.94)) contrast(1.03) !important;
}

@media (max-width:880px) {
  .threshold-fox {
    left:auto !important;
    right:-1vw !important;
    bottom:-2.6vh !important;
    width:min(45vw,285px) !important;
    height:55vh !important;
  }
  .viewport-phone {
    left:51% !important;
    top:61% !important;
    width:min(47vw,285px) !important;
  }
}

/* v105 — sunrise originates in the sky ------------------------------------
   The dawn aperture now starts at a small sun in the low left sky and opens
   outward from there. The sun lifts slightly during the reveal, so sky and
   horizon appear before hills, windmill and foreground. */
.players-scene::after {
  -webkit-mask-image:radial-gradient(circle at 9% var(--players-dawn-sun-y,39%),
    transparent 0 var(--players-dawn-hole,1.2%),
    rgba(0,0,0,.42) calc(var(--players-dawn-hole,1.2%) + 7%),
    #000 calc(var(--players-dawn-hole,1.2%) + 19%)) !important;
  mask-image:radial-gradient(circle at 9% var(--players-dawn-sun-y,39%),
    transparent 0 var(--players-dawn-hole,1.2%),
    rgba(0,0,0,.42) calc(var(--players-dawn-hole,1.2%) + 7%),
    #000 calc(var(--players-dawn-hole,1.2%) + 19%)) !important;
}
.players-scene::before {
  background:
    radial-gradient(circle at 9% var(--players-dawn-sun-y,39%),
      rgba(255,250,214,.98) 0 .7%,
      rgba(255,224,154,.96) 1.15%,
      rgba(255,185,83,.62) 2.6%,
      rgba(255,145,48,.24) 7.5%,
      transparent 17%),
    radial-gradient(ellipse at 9% var(--players-dawn-sun-y,39%),
      rgba(255,229,160,.48) 0 7%,
      rgba(255,178,72,.24) 17%,
      transparent 39%),
    linear-gradient(180deg,
      rgba(31,55,84,.16) 0%,
      rgba(255,174,92,.10) 48%,
      transparent 78%) !important;
}

/* v107 — Scene 3 -> Scene 4 overlap stack ---------------------------------
   Requested visual order while the path enters:
   field background -> existing woodland edge -> RÆDEL/team -> incoming scene.
   The incoming Chapter 4 plate remains the top transition layer and naturally
   occludes the characters as it crosses them. The old edge simply scrolls
   left beneath it and never fades. */
.players-scene .players-character,
.players-scene .players-raedel,
.players-scene .players-team {
  z-index:14 !important;
}
.players-scene .players-wood-edge {
  z-index:9 !important;
  opacity:1 !important;
}
/* Keep the outgoing edge visually continuous underneath the transparent entry
   side of the new plate. Chapter 4 itself is already stacked above Scene 3. */
#how-it-works.how-chapter {
  z-index:171 !important;
}
#how-it-works .how-transition-master {
  z-index:1 !important;
}


/* v108 — retain original RÆDEL through the night product beat ------------- */
.fox-wrap {
  filter:brightness(var(--hero-fox-bright,1)) drop-shadow(-24px 26px 30px rgba(0,0,0,.26)) !important;
}

/* v109 — Scene 3 team exit + physical Chapter 4 artefacts ---------------- */
/* Team sits on the ground line rather than floating above it. */
.players-team {
  bottom:-4.2vh !important;
}
/* The team leaves with the Scene 3 copy. RÆDEL remains independently timed
   so the incoming path can naturally pass over him before the distant guide
   appears further into the woodland. */
.players-scene .players-team,
.players-scene[data-player-choice="solo"] .players-team,
.players-scene[data-player-choice="team"] .players-team,
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-team,
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-team {
  opacity:calc(var(--players-characters-o,0) * var(--players-exit-team-o,1)) !important;
}

/* Chapter 4 markers are rendered artefacts, not flat UI symbols. */
#how-it-works .how-marker img,
#how-it-works .how-puzzle-object img,
#how-it-works .how-story-object img {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:drop-shadow(0 14px 17px rgba(0,0,0,.48)) !important;
}
#how-it-works .how-marker {
  width:112px !important;
  height:112px !important;
}
#how-it-works .how-puzzle-object {
  width:154px !important;
  height:154px !important;
}

/* RÆDEL ahead on the trail: deliberately small, with a feathered patch from
   the generated rear-view reference so it blends into the existing path. */
#how-it-works .how-raedel-away {
  position:absolute;
  z-index:7;
  left:50.3%;
  top:48.5%;
  width:clamp(50px,5.1vw,84px);
  aspect-ratio:125 / 200;
  opacity:var(--how-raedel-away-o,0);
  transform:translate(-50%,-50%) translate3d(0,var(--how-raedel-away-y,5vh),0) scale(var(--how-raedel-away-s,.92));
  transform-origin:50% 95%;
  pointer-events:none;
  will-change:transform,opacity;
}
#how-it-works .how-raedel-away img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.24));
}
@media (max-width:880px) {
  .players-team { bottom:-2.8vh !important; }
  #how-it-works .how-raedel-away { width:clamp(42px,8vw,62px); left:52%; top:48%; }
}

/* v110 — clean exits + corrected Chapter 4 artefacts ---------------------- */
/* The original hero fox must be gone before dawn. Opacity is now driven in
   app.js; ensure every part of the grounded fox belongs to the same fade. */
.fox-wrap { opacity:var(--hero-fox-opacity,1) !important; }

/* Scene 3: both choices leave with the copy, and the team is grounded lower. */
.players-scene .players-raedel,
.players-scene .players-team,
.players-scene[data-player-choice="solo"] .players-raedel,
.players-scene[data-player-choice="solo"] .players-team,
.players-scene[data-player-choice="team"] .players-raedel,
.players-scene[data-player-choice="team"] .players-team,
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-raedel,
.players-scene:has(.choice-solo:is(:hover,:focus-visible)) .players-team,
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-raedel,
.players-scene:has(.choice-team:is(:hover,:focus-visible)) .players-team {
  opacity:calc(var(--players-characters-o,0) * var(--players-exit-characters-o,1)) !important;
}
.players-team { bottom:-7vh !important; }

/* Clear outgoing low foreground pieces with the Scene 3 copy so fence/post
   fragments cannot survive along the bottom of the incoming path scene. */
.players-field-front {
  opacity:calc(var(--players-panorama-o,1) * var(--players-exit-field-front-o,1)) !important;
}
.players-windmill {
  opacity:var(--players-exit-windmill-o,1) !important;
}

/* Discovery is now a physical antique explorer's glass, not a UI-style icon. */
#how-it-works .how-marker {
  width:146px !important;
  height:146px !important;
  left:58% !important;
  bottom:27vh !important;
}
#how-it-works .how-marker img {
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.55)) !important;
}

/* The book is the artefact itself. Remove the obsolete glyph above it. */
#how-it-works .how-story-object::before,
#how-it-works .how-story-object::after {
  content:none !important;
  display:none !important;
}

/* Put the rear-view guide clearly on the path as soon as Scene 4 settles. */
#how-it-works .how-raedel-away {
  left:50.7% !important;
  top:52.5% !important;
  width:clamp(54px,5.4vw,88px) !important;
}

@media (max-width:880px) {
  .players-team { bottom:-4.5vh !important; }
  #how-it-works .how-marker { width:112px !important; height:112px !important; }
  #how-it-works .how-raedel-away { left:52% !important; top:51% !important; width:clamp(44px,8vw,64px) !important; }
}

/* v112 — continuous woodland world strip ---------------------------------- */
#how-it-works .how-transition-master { width:122vw !important; background-size:100% 100% !important; }
#how-it-works .how-trail-art::after { width:12vw !important; background:linear-gradient(90deg,rgba(5,13,8,0),rgba(5,13,8,.42) 48%,rgba(5,13,8,.82) 100%) !important; }
#how-it-works .how-raedel-away { left:53.2% !important; top:50.8% !important; width:clamp(42px,4.6vw,76px) !important; transform-origin:50% 100% !important; }
#how-it-works .how-raedel-away::after { content:'';position:absolute;left:50%;bottom:0;width:48%;height:7%;transform:translate(-50%,38%);border-radius:50%;background:rgba(0,0,0,.22);filter:blur(4px);z-index:-1; }
.worlds-art { background:#061008 !important; }
.worlds-continuous-background,.worlds-continuous-midground,.worlds-continuous-foreground { position:absolute;top:0;left:0;height:100%;width:max(168vw,2160px);background-position:center center;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none;will-change:transform; }
.worlds-continuous-background { z-index:2;background-image:none;transform:translate3d(var(--worlds-bg-x,-28vw),0,0) scale(1.015);transform-origin:50% 54%; }
.worlds-continuous-midground { z-index:8;background-image:none;transform:translate3d(var(--worlds-mid-x,-28vw),0,0) scale(1.02); }
.worlds-continuous-foreground { z-index:13;background-image:none;transform:translate3d(var(--worlds-fg-x,-28vw),0,0) scale(1.035); }
.worlds-sky,.worlds-back,.worlds-ground,.worlds-track,.worlds-tree-line,.worlds-front,.worlds-canopy { display:none !important; }
.world-beat-wildlife,.world-beat-science,.world-beat-seasonal { display:none !important; }
.worlds-progress-dot-2,.worlds-progress-dot-3,.worlds-progress-dot-4 { opacity:.42; }
.worlds-chapter { height:1240vh !important; min-height:7600px !important; }
.worlds-heading { z-index:22 !important; }
.world-beat-history { z-index:24 !important; }


/* v113 — keep the woodland world reveal in the same viewport -------------
   The next chapter should not appear as a normal section below Scene 4.
   Pull the semantic content stack up by one viewport so the adventures/worlds
   sequence starts in the same pinned screen space and feels like a sideways
   continuation rather than a downward page jump. */
#journey-end {
  position:relative;
  z-index:180;
  margin-top:-100vh;
  padding-top:100vh;
  background:transparent !important;
}
#adventures.worlds-chapter {
  position:relative;
  z-index:190;
  margin-top:0;
}
#adventures .worlds-sticky {
  top:0;
}


/* v114 — Chapters 4 and 5 share one pinned journey stage ------------------
   #adventures is now physically inside .forest-world after #how-it-works.
   It is therefore an absolute scene layer on the same sticky viewport rather
   than a later document section that can enter from below. */
.journey-chapter {
  height:2720vh !important;
}
#journey-end {
  margin-top:0 !important;
  padding-top:0 !important;
  background:#061721 !important;
}
#adventures.worlds-chapter {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  z-index:172 !important;
  background:transparent !important;
  pointer-events:none !important;
  color:#fffdf6 !important;
  opacity:var(--worlds-stage-o,0) !important;
  overflow:hidden !important;
}
#adventures .worlds-sticky {
  position:absolute !important;
  inset:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  overflow:hidden !important;
  background:#061008 !important;
}
#adventures .worlds-art {
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
}
/* The panorama is sized by height so its native 3:1 geometry remains intact
   on a 16:9 viewport and has enough horizontal travel to reveal the ruins. */
#adventures .worlds-continuous-background,
#adventures .worlds-continuous-midground,
#adventures .worlds-continuous-foreground {
  width:300vh !important;
  min-width:168vw !important;
  height:100vh !important;
  left:0 !important;
  top:0 !important;
  background-size:100% 100% !important;
}
#adventures .worlds-heading {
  opacity:var(--worlds-heading-o,0) !important;
  transform:translate3d(0,var(--worlds-heading-y,0px),0) !important;
}
#adventures .world-beat-history {
  opacity:var(--world-history-o,0) !important;
  transform:translate3d(var(--world-history-x,0px),0,0) !important;
}
@media (max-width:880px) {
  .journey-chapter { height:2680vh !important; }
  #adventures .worlds-continuous-background,
  #adventures .worlds-continuous-midground,
  #adventures .worlds-continuous-foreground {
    width:300vh !important;
    min-width:300vw !important;
  }
}


/* v115 — Scene 4 path is panel zero; heading before horizontal travel -------
   No replacement woodland path. The v114 World 1 strip is retired as the
   opening frame: Chapter 5 stays transparent while its heading appears over
   the exact Scene 4 path, then the Scene 4 artwork and World 1 move together
   as adjacent horizontal panels. */
#adventures .worlds-sticky,
#adventures .worlds-art {
  background:transparent !important;
}

/* Slide the real Scene 4 picture itself. */
#how-it-works .how-trail-art {
  transform:translate3d(var(--how-worlds-x,0vw),0,0) !important;
  will-change:transform;
}
/* Its artefacts and distant guide leave as the world carousel begins rather
   than floating over World 1. */
#how-it-works .how-marker {
  opacity:calc(var(--how-marker-o,0) * var(--how-worlds-exit-o,1)) !important;
}
#how-it-works .how-puzzle-object {
  opacity:calc(var(--how-puzzle-o,0) * var(--how-worlds-exit-o,1)) !important;
}
#how-it-works .how-story-object {
  opacity:calc(var(--how-story-object-o,0) * var(--how-worlds-exit-o,1)) !important;
}
#how-it-works .how-raedel-away {
  opacity:calc(var(--how-raedel-away-o,0) * var(--how-worlds-exit-o,1)) !important;
}

/* World 1 is the NEXT panel, not another woodland-path panel. */
#adventures .worlds-continuous-background,
#adventures .worlds-continuous-midground,
#adventures .worlds-continuous-foreground {
  position:absolute !important;
  left:-8vw !important;
  top:0 !important;
  width:116vw !important;
  min-width:0 !important;
  height:100vh !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  transform-origin:center center !important;
  pointer-events:none !important;
  will-change:transform;
}
#adventures .worlds-continuous-background {
  z-index:2 !important;
  background-image:var(--asset-history-panel,none) !important;
  transform:translate3d(var(--worlds-bg-x,100vw),0,0) !important;
}
#adventures .worlds-continuous-midground {
  z-index:8 !important;
  background-image:var(--asset-history-mid,none) !important;
  transform:translate3d(var(--worlds-mid-x,100vw),0,0) !important;
  opacity:.62 !important;
}
#adventures .worlds-continuous-foreground {
  z-index:13 !important;
  background-image:var(--asset-history-front,none) !important;
  transform:translate3d(var(--worlds-fg-x,100vw),0,0) !important;
  opacity:.68 !important;
}

/* The opening statement must be readable before any scenery moves. */
#adventures .worlds-heading {
  z-index:30 !important;
  width:min(760px,52vw) !important;
  text-shadow:0 3px 24px rgba(0,0,0,.46) !important;
}
#adventures .world-beat-history { z-index:31 !important; }

@media (max-width:880px) {
  #adventures .worlds-continuous-background,
  #adventures .worlds-continuous-midground,
  #adventures .worlds-continuous-foreground {
    left:-13vw !important;
    width:126vw !important;
    min-width:0 !important;
  }
  #adventures .worlds-heading { width:min(88vw,620px) !important; }
}


/* v116 — Scene 3 copy lock + clean handoff to approved World 1 ------------ */
/* The player-choice statement stays in the same left-hand cinematic safe
   area as the other scene headings. It no longer travels off screen with the
   woodland background. */
.players-scene .players-copy {
  left:6.1vw !important;
  right:auto !important;
  width:min(560px,39vw) !important;
  padding:0 !important;
  transform:translate3d(var(--players-copy-x,0vw),var(--players-copy-y,0vh),0) !important;
}

/* The approved moonlit ruins plate is World 1 itself. There is no second
   woodland-path panel between Scene 4 and this world. */
#adventures .worlds-continuous-background {
  background-image:var(--asset-history-panel,none) !important;
  background-size:cover !important;
  background-position:center center !important;
}

@media (max-width:880px) {
  .players-scene .players-copy {
    left:6vw !important;
    right:auto !important;
    width:min(88vw,430px) !important;
  }
}


/* v117 — World 1 seam bridge + world-specific parallax ------------------- */
/* World 1 remains the approved moonlit ruins. Its extra layers frame the top
   and bottom only, adding depth without hiding the ruins in the centre. */
#adventures .worlds-continuous-midground {
  z-index:8 !important;
  background-image:var(--asset-history-canopy,none) !important;
  background-size:cover !important;
  background-position:center center !important;
  opacity:.54 !important;
  transform:translate3d(var(--worlds-mid-x,100vw),var(--worlds-mid-y,0vh),0) scale(1.125) !important;
}
#adventures .worlds-continuous-foreground {
  z-index:13 !important;
  background-image:var(--asset-history-foreground,none) !important;
  background-size:cover !important;
  background-position:center center !important;
  opacity:.66 !important;
  transform:translate3d(var(--worlds-fg-x,100vw),var(--worlds-fg-y,0vh),0) scale(1.075) !important;
}

/* Organic bridge over the moving join between the warm path and World 1. */
#adventures .worlds-seam-bridge {
  position:absolute;
  left:var(--worlds-seam-x,100vw);
  top:0;
  width:clamp(210px,20vw,360px);
  height:100vh;
  z-index:16;
  pointer-events:none;
  opacity:var(--worlds-seam-o,0);
  background:var(--asset-history-seam,none) center center / contain no-repeat;
  transform:translate3d(-50%,0,0) scale(var(--worlds-seam-s,1));
  transform-origin:50% 54%;
  filter:drop-shadow(0 0 22px rgba(1,8,10,.34));
  will-change:left,opacity,transform;
}

/* Refined supporting-scene typography. The intro remains the large cinematic
   title; Discover, Solve and Story use the World 1 number/category/serif style. */
#how-it-works .how-copy-discover h2,
#how-it-works .how-copy-solve h2,
#how-it-works .how-copy-story h2 {
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:clamp(2.9rem,4.45vw,5.35rem) !important;
  font-weight:600 !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
  text-transform:none !important;
  max-width:620px;
}
#how-it-works .how-copy-discover p,
#how-it-works .how-copy-solve p,
#how-it-works .how-copy-story p {
  width:min(590px,100%) !important;
  font-size:clamp(1rem,1.16vw,1.12rem) !important;
  line-height:1.58 !important;
}
#how-it-works .how-copy-discover .how-kicker,
#how-it-works .how-copy-solve .how-kicker,
#how-it-works .how-copy-story .how-kicker {
  margin-bottom:.9rem !important;
}

@media (max-width:880px) {
  #adventures .worlds-seam-bridge { width:clamp(150px,28vw,240px); }
  #how-it-works .how-copy-discover h2,
  #how-it-works .how-copy-solve h2,
  #how-it-works .how-copy-story h2 {
    font-size:clamp(2.45rem,9.4vw,4rem) !important;
  }
}


/* v118 — clean World 1 join, true alpha parallax, refined scene beats ------ */
/* The generated parallax artwork already has alpha. Do not fade the entire
   layer: doing so lets the outgoing warm scene ghost through the moonlit
   ruins and creates the double-image/transparency artefact. */
#adventures .worlds-continuous-midground {
  opacity:1 !important;
  background-size:100% 100% !important;
  background-position:center center !important;
}
#adventures .worlds-continuous-foreground {
  opacity:1 !important;
  background-size:100% 100% !important;
  background-position:center center !important;
}

/* Dedicated cropped full-height seam bridge. The original generated file had
   a huge transparent 16:9 canvas, so `contain` made the actual divider look
   like a small clipped rectangle. */
#adventures .worlds-seam-bridge {
  width:clamp(250px,18vw,360px) !important;
  height:112vh !important;
  top:-6vh !important;
  overflow:visible !important;
  background-image:var(--asset-history-seam-clean,none) !important;
  background-size:100% 100% !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  filter:drop-shadow(0 0 22px rgba(1,8,10,.48)) !important;
}

/* Supporting Scene 4 beats use the same restrained editorial hierarchy as
   the World cards: small gold number/category, serif title, compact body.
   The intro `Explore / Solve / Discover` remains the large cinematic title. */
#how-it-works .how-copy-stage {
  height:74vh !important;
  min-height:0 !important;
}
#how-it-works .how-copy-discover,
#how-it-works .how-copy-solve,
#how-it-works .how-copy-story {
  justify-content:flex-end !important;
  padding-bottom:3.5vh !important;
}
#how-it-works .how-copy-discover h2,
#how-it-works .how-copy-solve h2,
#how-it-works .how-copy-story h2 {
  max-width:590px !important;
  margin:.3rem 0 .7rem !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:clamp(2.15rem,3.2vw,4rem) !important;
  font-weight:600 !important;
  line-height:.98 !important;
  letter-spacing:-.025em !important;
  text-transform:none !important;
  text-wrap:balance !important;
}
#how-it-works .how-copy-discover p,
#how-it-works .how-copy-solve p,
#how-it-works .how-copy-story p {
  max-width:590px !important;
  font-size:clamp(.96rem,1.05vw,1.08rem) !important;
  line-height:1.62 !important;
}
#how-it-works .how-kicker {
  margin-bottom:.35rem !important;
  font-size:clamp(.72rem,.82vw,.86rem) !important;
}

@media (max-width:880px) {
  #adventures .worlds-seam-bridge {
    width:clamp(210px,34vw,285px) !important;
  }
  #how-it-works .how-copy-stage { height:76vh !important; }
  #how-it-works .how-copy-discover h2,
  #how-it-works .how-copy-solve h2,
  #how-it-works .how-copy-story h2 {
    font-size:clamp(2rem,8.4vw,3.4rem) !important;
  }
}


/* v119 — divider sync on Scene 4 -> World 1 -------------------------------
   The seam bridge needs to lead slightly into the outgoing panel on mobile
   and appear from the first beat of sideways motion. This prevents the left
   side of the organic divide from arriving later than the ruins side. */


/* v121 — visible World 1 parallax -----------------------------------------
   Use the proper moonlit alpha canopy and foreground as the depth planes.
   Their differential horizontal travel is now large enough to read on mobile
   without turning the ruins scene into an exaggerated carousel effect. */


/* v122 — persistent World 1 parallax --------------------------------------
   Parallax no longer finishes with the panel entrance. The background,
   canopy and foreground continue at separate rates through the World 1 hold,
   making the depth shift visible during normal scroll. */


/* v123 — World 1 overscan for persistent parallax -------------------------
   The continuing foreground/canopy drift in v122 could expose a hard right
   edge on mobile because the alpha planes were only viewport width. Keep the
   effect, but give every World 1 plane horizontal overscan so no layer edge
   can break into view while the parallax continues. */


/* v124 — desktop World 1 parallax overscan -------------------------------
   v122's persistent parallax was correct, but the alpha layers could travel
   farther than their viewport-wide canvases and expose a hard right edge on
   desktop. These padded assets preserve the original artwork scale while
   adding transparent horizontal breathing room for the full parallax range. */
#adventures .worlds-continuous-background {
  left:0 !important;
  width:100vw !important;
}
#adventures .worlds-continuous-midground {
  left:-20vw !important;
  width:140vw !important;
  background-image:var(--asset-history-canopy-overscan,none) !important;
  background-size:100% 100% !important;
}
#adventures .worlds-continuous-foreground {
  left:-20vw !important;
  width:140vw !important;
  background-image:var(--asset-history-foreground-overscan,none) !important;
  background-size:100% 100% !important;
}
@media (max-width:880px) {
  #adventures .worlds-continuous-midground,
  #adventures .worlds-continuous-foreground {
    left:-20vw !important;
    width:140vw !important;
  }
}



/* v126 — removed ghosted extra foreground -------------------------------
   The added decorative foreground layer has been removed because it read as
   a ghost of the existing scene layers. World 1 keeps the core stitched
   composition with no duplicate moving overlay. */


/* v134 — woodland matched World 2 + true transition overlay ------------
   World 2 is a newly drawn woodland scene that stays in the same forest
   corridor as World 1. The handoff is concealed by a separate transparent
   transition object, not by blending the two scene plates together. */
#adventures .worlds-wildlife-panel {
  position:absolute;
  inset:0;
  z-index:18;
  width:100vw;
  height:100vh;
  pointer-events:none;
  background:var(--asset-wildlife-panel,none) 50% center / cover no-repeat;
  transform:translate3d(var(--world-wildlife-panel-x,100vw),0,0);
  will-change:transform;
  box-shadow:none;
}
#adventures .worlds-wildlife-blend {
  position:absolute;
  inset:0;
  z-index:19;
  width:100vw;
  height:100vh;
  opacity:1;
  pointer-events:none;
  background:var(--asset-wildlife-history-overlay,none) center center / 100% 100% no-repeat;
  transform:translate3d(var(--world-wildlife-overlay-x,105vw),0,0);
  will-change:transform;
}
#adventures .world-beat-wildlife {
  display:grid !important;
  z-index:31 !important;
  opacity:var(--world-wildlife-o,0) !important;
  transform:translate3d(var(--world-wildlife-x,26px),0,0) !important;
  text-shadow:0 3px 24px rgba(0,0,0,.50);
}
#adventures .worlds-progress-dot-3 {
  opacity:calc(.22 + (.78 * var(--world-seasonal-focus,0))) !important;
}
#adventures .worlds-progress-dot-4 {
  opacity:calc(.22 + (.78 * var(--world-science-focus,0))) !important;
}


/* v219 — Wildlife ambient life treatment --------------------------------
   The unreliable animated stag has been removed. Instead, World 2 now comes
   alive through ambient motion: slow drifting dappled light, pollen / insect
   motes, a subtle owl blink / head turn, a gentle rabbit twitch, slight plant
   sway and the occasional falling leaf. The scene should feel alive without
   introducing large, obvious hero animation. */
#adventures .worlds-wildlife-panel { overflow:hidden; }
#adventures .wildlife-dapple-layer,
#adventures .wildlife-sunshaft-layer,
#adventures .wildlife-shadow-sweep,
#adventures .wildlife-motes,
#adventures .wildlife-owl-living,
#adventures .wildlife-rabbit-living,
#adventures .wildlife-fern-sway,
#adventures .wildlife-flower-sway,
#adventures .wildlife-falling-leaf {
  position:absolute;
  pointer-events:none;
}
#adventures .wildlife-dapple-layer {
  inset:-3%;
  z-index:1;
  opacity:.78;
  mix-blend-mode:screen;
  filter:blur(10px);
  mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.94) 64%, rgba(0,0,0,1) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, transparent 34%, rgba(0,0,0,.42) 48%, rgba(0,0,0,.94) 64%, rgba(0,0,0,1) 100%);
}
#adventures .wildlife-dapple-layer-a {
  background:
    radial-gradient(28% 24% at 69% 23%, rgba(255,228,150,.34), rgba(255,228,150,0) 70%),
    radial-gradient(22% 22% at 59% 47%, rgba(241,209,126,.18), rgba(241,209,126,0) 72%),
    radial-gradient(18% 18% at 81% 60%, rgba(255,233,168,.16), rgba(255,233,168,0) 76%);
  animation:wildlifeDappleDriftA 19s ease-in-out infinite alternate;
}
#adventures .wildlife-dapple-layer-b {
  inset:-4%;
  z-index:1;
  opacity:.32;
  mix-blend-mode:multiply;
  filter:blur(16px);
  background:
    radial-gradient(26% 28% at 63% 28%, rgba(13,22,10,.52), rgba(13,22,10,0) 72%),
    radial-gradient(20% 22% at 75% 54%, rgba(9,17,9,.44), rgba(9,17,9,0) 72%),
    radial-gradient(18% 20% at 56% 64%, rgba(10,16,8,.32), rgba(10,16,8,0) 72%);
  animation:wildlifeDappleDriftB 23s ease-in-out infinite alternate;
}

@keyframes wildlifeDappleDriftA {
  0%   { transform:translate3d(-1.6%,0,0) scale(1); opacity:.54; }
  50%  { transform:translate3d(1.2%,-1.8%,0) scale(1.04); opacity:.82; }
  100% { transform:translate3d(2.3%,.8%,0) scale(1.06); opacity:.58; }
}
@keyframes wildlifeDappleDriftB {
  0%   { transform:translate3d(1.3%,.9%,0) scale(1); opacity:.24; }
  50%  { transform:translate3d(-1.5%,-.7%,0) scale(1.03); opacity:.38; }
  100% { transform:translate3d(-2.4%,1.3%,0) scale(1.05); opacity:.22; }
}


/* v221: visibly moving woodland sun shafts. These are deliberately stronger
   than the earlier dapple layer so the user can perceive the lighting change
   against the already bright painted background. */
#adventures .wildlife-sunshaft-layer {
  inset:-12% -8% -6% 25%;
  z-index:2;
  opacity:.72;
  mix-blend-mode:screen;
  filter:blur(8px);
  transform-origin:75% 0%;
  background:
    linear-gradient(116deg,
      transparent 0 16%,
      rgba(255,238,172,0) 18%,
      rgba(255,238,172,.30) 22%,
      rgba(255,244,194,.55) 25%,
      rgba(255,238,172,.18) 29%,
      rgba(255,238,172,0) 34%,
      transparent 40% 47%,
      rgba(255,233,155,0) 49%,
      rgba(255,233,155,.38) 53%,
      rgba(255,244,196,.66) 56%,
      rgba(255,233,155,.14) 60%,
      rgba(255,233,155,0) 64%,
      transparent 70% 77%,
      rgba(255,228,137,0) 79%,
      rgba(255,228,137,.26) 83%,
      rgba(255,240,180,.52) 86%,
      rgba(255,228,137,0) 91%,
      transparent 94% 100%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 13%, rgba(0,0,0,.55) 30%, rgba(0,0,0,1) 52%, rgba(0,0,0,1) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.08) 13%, rgba(0,0,0,.55) 30%, rgba(0,0,0,1) 52%, rgba(0,0,0,1) 100%);
  animation:wildlifeSunshaftSweep 12.5s ease-in-out infinite alternate;
}

#adventures .wildlife-shadow-sweep {
  inset:-7% -5% -5% 30%;
  z-index:1;
  opacity:.34;
  mix-blend-mode:multiply;
  filter:blur(22px);
  background:
    radial-gradient(30% 33% at 46% 22%, rgba(9,18,8,.58), rgba(9,18,8,0) 72%),
    radial-gradient(28% 30% at 69% 44%, rgba(8,16,7,.52), rgba(8,16,7,0) 74%),
    radial-gradient(24% 26% at 52% 67%, rgba(7,14,7,.44), rgba(7,14,7,0) 74%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.82) 42%, rgba(0,0,0,1) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 18%, rgba(0,0,0,.82) 42%, rgba(0,0,0,1) 100%);
  animation:wildlifeShadowSweep 15.5s ease-in-out infinite alternate-reverse;
}

@keyframes wildlifeSunshaftSweep {
  0%   { transform:translate3d(-3.2%,1.4%,0) rotate(-1deg) scale(1.02); opacity:.48; }
  35%  { transform:translate3d(-.8%,-.8%,0) rotate(.3deg) scale(1.035); opacity:.82; }
  67%  { transform:translate3d(2.1%,-1.8%,0) rotate(1.1deg) scale(1.045); opacity:.64; }
  100% { transform:translate3d(4.1%,.8%,0) rotate(.2deg) scale(1.03); opacity:.88; }
}

@keyframes wildlifeShadowSweep {
  0%   { transform:translate3d(2.2%,0,0) scale(1); opacity:.22; }
  45%  { transform:translate3d(-1.6%,-1.2%,0) scale(1.035); opacity:.40; }
  100% { transform:translate3d(-3.4%,1.1%,0) scale(1.06); opacity:.28; }
}

#adventures .wildlife-motes {
  inset:0;
  z-index:2;
}
#adventures .wildlife-mote {
  position:absolute;
  width:var(--size,4px);
  height:var(--size,4px);
  border-radius:50%;
  opacity:0;
  background:rgba(255,246,210,.96);
  box-shadow:0 0 14px rgba(255,234,166,.55);
  filter:blur(.25px);
  animation:wildlifeMoteFloat var(--dur,12s) linear infinite;
  animation-delay:var(--delay,0s);
}
#adventures .wildlife-mote-1 { left:61%; top:28%; --size:5px; --dur:11s; --delay:.7s; }
#adventures .wildlife-mote-2 { left:67%; top:21%; --size:6px; --dur:13s; --delay:2.8s; }
#adventures .wildlife-mote-3 { left:74%; top:36%; --size:4px; --dur:10s; --delay:1.2s; }
#adventures .wildlife-mote-4 { left:79%; top:48%; --size:5px; --dur:16s; --delay:3.6s; }
#adventures .wildlife-mote-5 { left:71%; top:58%; --size:5px; --dur:14s; --delay:5.1s; }
#adventures .wildlife-mote-6 { left:58%; top:44%; --size:4px; --dur:9.5s; --delay:4.2s; }
#adventures .wildlife-mote-7 { left:84%; top:29%; --size:6px; --dur:15s; --delay:7s; }
#adventures .wildlife-mote-8 { left:89%; top:53%; --size:5px; --dur:12.5s; --delay:1.8s; }
#adventures .wildlife-mote-9 { left:65%; top:66%; --size:6px; --dur:17s; --delay:6.2s; }
#adventures .wildlife-mote-10 { left:77%; top:17%; --size:4px; --dur:8.5s; --delay:2.4s; }
@keyframes wildlifeMoteFloat {
  0%   { transform:translate3d(0,9px,0) scale(.85); opacity:0; }
  15%  { opacity:.32; }
  50%  { transform:translate3d(9px,-12px,0) scale(1.05); opacity:.52; }
  85%  { opacity:.18; }
  100% { transform:translate3d(-4px,-26px,0) scale(.88); opacity:0; }
}

#adventures .wildlife-owl-living {
  left:22.61%;
  top:19.34%;
  width:6.46%;
  height:16.79%;
  z-index:4;
}
#adventures .wildlife-owl-living::before,
#adventures .wildlife-owl-living::after {
  content:'';
  position:absolute;
  top:29.4%;
  width:8.5%;
  height:2.2%;
  border-radius:999px;
  background:rgba(25,17,8,.96);
  opacity:0;
  transform:scaleY(.18);
  box-shadow:0 0 1px rgba(0,0,0,.3);
  animation:wildlifeOwlBlink 9.5s linear infinite;
}
#adventures .wildlife-owl-living::before { left:40.8%; }
#adventures .wildlife-owl-living::after { left:53.7%; }
#adventures .wildlife-owl-sprite,
#adventures .wildlife-rabbit-living,
#adventures .wildlife-rabbit-sprite {
  display:none !important;
}
@keyframes wildlifeOwlBlink {
  0%, 6%, 45%, 48%, 80%, 100% { opacity:0; transform:scaleY(.18); }
  5%, 46%, 81%                 { opacity:.96; transform:scaleY(1); }
}

#adventures .wildlife-fern-sway,
#adventures .wildlife-flower-sway {
  z-index:3;
  opacity:1;
}
#adventures .wildlife-fern-sway-a {
  left:25.96%;
  top:53.67%;
  width:17.22%;
  height:31.56%;
  transform-origin:22% 88%;
  background:var(--asset-wildlife-fern-a,none) center center / 100% 100% no-repeat;
  animation:wildlifePlantSwayA 8.8s ease-in-out infinite;
}
#adventures .wildlife-fern-sway-b {
  left:41.15%;
  top:49.42%;
  width:11.48%;
  height:24.44%;
  transform-origin:28% 92%;
  background:var(--asset-wildlife-fern-b,none) center center / 100% 100% no-repeat;
  animation:wildlifePlantSwayB 10.4s ease-in-out infinite -1.2s;
}
#adventures .wildlife-flower-sway {
  left:77.03%;
  top:68.23%;
  width:10.29%;
  height:23.91%;
  transform-origin:42% 94%;
  background:var(--asset-wildlife-flower,none) center center / 100% 100% no-repeat;
  animation:wildlifePlantSwayC 11.2s ease-in-out infinite -2.4s;
}
@keyframes wildlifePlantSwayA {
  0%,100% { transform:rotate(0deg) translate3d(0,0,0); }
  25%     { transform:rotate(-1.1deg) translate3d(-.2%,0,0); }
  60%     { transform:rotate(.9deg) translate3d(.25%,0,0); }
}
@keyframes wildlifePlantSwayB {
  0%,100% { transform:rotate(0deg) translate3d(0,0,0); }
  35%     { transform:rotate(.9deg) translate3d(.15%,0,0); }
  70%     { transform:rotate(-.8deg) translate3d(-.18%,0,0); }
}
@keyframes wildlifePlantSwayC {
  0%,100% { transform:rotate(0deg) translate3d(0,0,0); }
  32%     { transform:rotate(-1.2deg) translate3d(-.12%,0,0); }
  68%     { transform:rotate(.95deg) translate3d(.18%,0,0); }
}

#adventures .wildlife-falling-leaf {
  z-index:4;
  width:12px;
  height:20px;
  opacity:0;
  border-radius:70% 35% 70% 35% / 80% 35% 70% 30%;
  background:linear-gradient(180deg, rgba(247,198,82,.96), rgba(173,99,20,.96));
  box-shadow:0 0 5px rgba(255,216,146,.24);
  filter:blur(.1px);
}
#adventures .wildlife-falling-leaf-a {
  left:72%;
  top:14%;
  animation:wildlifeLeafFallA 18s linear infinite 3.2s;
}
#adventures .wildlife-falling-leaf-b {
  left:81%;
  top:9%;
  width:9px;
  height:16px;
  animation:wildlifeLeafFallB 22s linear infinite 9.8s;
}
@keyframes wildlifeLeafFallA {
  0%, 12%   { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  18%       { opacity:.78; }
  50%       { transform:translate3d(-28px,138px,0) rotate(165deg); opacity:.52; }
  82%       { transform:translate3d(12px,290px,0) rotate(320deg); opacity:.12; }
  100%      { transform:translate3d(34px,360px,0) rotate(390deg); opacity:0; }
}
@keyframes wildlifeLeafFallB {
  0%, 18%   { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  24%       { opacity:.38; }
  56%       { transform:translate3d(-14px,122px,0) rotate(-150deg); opacity:.42; }
  84%       { transform:translate3d(24px,268px,0) rotate(-285deg); opacity:.08; }
  100%      { transform:translate3d(8px,340px,0) rotate(-338deg); opacity:0; }
}

@media (max-width:880px) {
  #adventures .wildlife-owl-living {
    left:23.3%;
    top:21%;
    width:8.8%;
    height:18.3%;
  }
  #adventures .wildlife-fern-sway-a {
    left:22.8%;
    top:55.4%;
    width:20.6%;
    height:28.4%;
  }
  #adventures .wildlife-fern-sway-b {
    left:40.4%;
    top:50.4%;
    width:14.2%;
    height:21.8%;
  }
  #adventures .wildlife-flower-sway {
    left:76%;
    top:70.1%;
    width:12.8%;
    height:21.4%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #adventures .wildlife-dapple-layer,
  #adventures .wildlife-sunshaft-layer,
  #adventures .wildlife-shadow-sweep,
  #adventures .wildlife-mote,
  #adventures .wildlife-owl-living,
  #adventures .wildlife-owl-living::after,
  #adventures .wildlife-rabbit-living,
  #adventures .wildlife-fern-sway,
  #adventures .wildlife-flower-sway,
  #adventures .wildlife-falling-leaf {
    animation:none !important;
  }
  #adventures .wildlife-mote,
  #adventures .wildlife-falling-leaf {
    opacity:0 !important;
  }
}

/* v139 — remaining woodland worlds --------------------------------------
   World 3 and World 4 now continue the same woodland corridor. World 3 is
   an autumn / seasonal woodland. World 4 is an enchanted crystal woodland.
   Each handoff uses its own separate sliding overlay object rather than a
   crossfade between full scene plates. */
#adventures .worlds-seasonal-panel,
#adventures .worlds-crystal-panel,
#adventures .worlds-seasonal-blend,
#adventures .worlds-crystal-blend {
  position:absolute;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
}
#adventures .worlds-seasonal-panel {
  z-index:20;
  overflow:hidden;
  background:var(--asset-seasonal-panel,none) 50% center / cover no-repeat;
  transform:translate3d(var(--world-seasonal-panel-x,100vw),0,0);
  will-change:transform;
  filter:saturate(1.08) sepia(.08) hue-rotate(-9deg) brightness(.97) contrast(1.04);
}
#adventures .worlds-seasonal-blend {
  inset:auto;
  left:var(--world-seasonal-join-x,100vw);
  top:0;
  width:74.07vh;
  height:100vh;
  max-width:none;
  min-width:0;
  z-index:23;
  opacity:1;
  background:var(--asset-seasonal-wildlife-separator,none) center center / 100% 100% no-repeat;
  transform:translate3d(-50%,0,0);
  transform-origin:50% 50%;
  will-change:left;
  transition:none;
  filter:saturate(1.14) sepia(.12) hue-rotate(-12deg) brightness(.95) contrast(1.03)
         drop-shadow(0 0 16px rgba(26,12,3,.24));
}
#adventures .worlds-crystal-panel {
  z-index:20;
  background:var(--asset-crystal-panel,none) 50% center / cover no-repeat;
  transform:translate3d(var(--world-crystal-panel-x,100vw),0,0);
  will-change:transform;
}
#adventures .worlds-crystal-blend {
  z-index:21;
  background:var(--asset-crystal-seasonal-overlay,none) 50% center / 100% 100% no-repeat;
  transform:translate3d(var(--world-crystal-overlay-x,105vw),0,0);
  will-change:transform;
}
#adventures .world-beat-science,
#adventures .world-beat-seasonal {
  display:grid !important;
  z-index:31 !important;
  text-shadow:0 3px 24px rgba(0,0,0,.50);
}
#adventures .world-beat-science {
  opacity:var(--world-science-o,0) !important;
  transform:translate3d(var(--world-science-x,26px),0,0) !important;
}
#adventures .world-beat-seasonal {
  opacity:var(--world-seasonal-o,0) !important;
  transform:translate3d(var(--world-seasonal-x,26px),0,0) !important;
  isolation:isolate;
}
#adventures .world-beat-seasonal::before {
  content:'';
  position:absolute;
  inset:-18px -12px -18px -26px;
  border-radius:26px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(120% 150% at 18% 48%, rgba(22,10,4,.76) 0%, rgba(22,10,4,.54) 40%, rgba(22,10,4,.26) 68%, transparent 100%);
  box-shadow:0 16px 42px rgba(0,0,0,.16);
}
#adventures .world-beat-seasonal > * {
  position:relative;
  z-index:1;
}


/* v231 — Nature canopy and Seasonal ambience -----------------------------
   Add a subtle foreground canopy to the woodland world, and bring the autumn
   world to life with falling leaves, moving shafts of warm light, floating
   particles and a little undergrowth sway. */
#adventures .world-wildlife-near-canopy {
  position:absolute;
  pointer-events:none;
  z-index:22;
  left:-10vw;
  top:-4vh;
  width:124vw;
  height:30vh;
  opacity:.34;
  background:var(--asset-wildlife-panel,none) 50% top / cover no-repeat;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.16) 82%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.16) 82%, transparent 100%);
  filter:blur(3px) brightness(.58) saturate(.78);
  transform:translate3d(-3vw,-1vh,0) scale(1.05);
}

#adventures .seasonal-dapple-layer,
#adventures .seasonal-sunshaft-layer,
#adventures .seasonal-particles,
#adventures .seasonal-frond-sway,
#adventures .seasonal-falling-leaf {
  position:absolute;
  pointer-events:none;
}
#adventures .seasonal-dapple-layer,
#adventures .seasonal-sunshaft-layer,
#adventures .seasonal-particles {
  inset:0;
}
#adventures .seasonal-dapple-layer-a {
  z-index:1;
  opacity:.42;
  mix-blend-mode:screen;
  filter:blur(18px);
  background:
    radial-gradient(30% 26% at 61% 22%, rgba(255,170,78,.30), rgba(255,170,78,0) 74%),
    radial-gradient(24% 22% at 76% 31%, rgba(255,196,109,.24), rgba(255,196,109,0) 72%),
    radial-gradient(20% 20% at 56% 54%, rgba(255,144,60,.14), rgba(255,144,60,0) 72%);
  animation:seasonalDappleGlowA 13s ease-in-out infinite alternate;
}
#adventures .seasonal-dapple-layer-b {
  z-index:1;
  opacity:.28;
  mix-blend-mode:multiply;
  filter:blur(20px);
  background:
    radial-gradient(34% 26% at 48% 20%, rgba(36,15,6,.42), rgba(36,15,6,0) 72%),
    radial-gradient(30% 24% at 75% 37%, rgba(31,12,4,.34), rgba(31,12,4,0) 74%),
    radial-gradient(22% 18% at 57% 64%, rgba(21,10,4,.28), rgba(21,10,4,0) 72%);
  animation:seasonalDappleGlowB 16s ease-in-out infinite alternate-reverse;
}
#adventures .seasonal-sunshaft-layer {
  inset:-8% -8% -6% 34%;
  z-index:2;
  opacity:.78;
  mix-blend-mode:screen;
  filter:blur(8px);
  background:
    linear-gradient(118deg,
      transparent 0 16%,
      rgba(255,205,117,0) 18%,
      rgba(255,165,64,.30) 22%,
      rgba(255,213,137,.82) 25%,
      rgba(255,150,52,.22) 29%,
      rgba(255,205,117,0) 33%,
      transparent 39% 47%,
      rgba(255,190,96,0) 49%,
      rgba(255,145,48,.34) 53%,
      rgba(255,204,118,.88) 56%,
      rgba(255,145,48,.20) 60%,
      rgba(255,190,96,0) 64%,
      transparent 69% 77%,
      rgba(255,177,83,0) 79%,
      rgba(255,132,34,.30) 83%,
      rgba(255,190,98,.78) 86%,
      rgba(255,132,34,0) 91%,
      transparent 94% 100%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 16%, rgba(0,0,0,.75) 40%, rgba(0,0,0,1) 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.12) 16%, rgba(0,0,0,.75) 40%, rgba(0,0,0,1) 100%);
  animation:seasonalSunshaftSweep 10.5s ease-in-out infinite alternate;
}
@keyframes seasonalDappleGlowA {
  0%   { transform:translate3d(-2%,0,0) scale(1); opacity:.30; }
  50%  { transform:translate3d(1.4%,-1.2%,0) scale(1.04); opacity:.52; }
  100% { transform:translate3d(2.8%,.8%,0) scale(1.06); opacity:.38; }
}
@keyframes seasonalDappleGlowB {
  0%   { transform:translate3d(1.2%,.8%,0) scale(1); opacity:.18; }
  50%  { transform:translate3d(-1.2%,-.8%,0) scale(1.04); opacity:.34; }
  100% { transform:translate3d(-2.6%,1.2%,0) scale(1.06); opacity:.22; }
}
@keyframes seasonalSunshaftSweep {
  0%   { transform:translate3d(-2.8%,1.2%,0) rotate(-1deg) scale(1.02); opacity:.54; }
  50%  { transform:translate3d(.7%,-.8%,0) rotate(.45deg) scale(1.045); opacity:.86; }
  100% { transform:translate3d(3.4%,.6%,0) rotate(1.2deg) scale(1.03); opacity:.68; }
}

#adventures .seasonal-particles { z-index:3; }
#adventures .seasonal-particle {
  position:absolute;
  width:var(--size,4px);
  height:var(--size,4px);
  border-radius:50%;
  background:rgba(255,224,158,.94);
  box-shadow:0 0 12px rgba(255,204,112,.48);
  opacity:0;
  filter:blur(.2px);
  animation:seasonalParticleFloat var(--dur,10s) linear infinite;
  animation-delay:var(--delay,0s);
}
#adventures .seasonal-particle-1 { left:56%; top:24%; --size:5px; --dur:9s; --delay:.2s; }
#adventures .seasonal-particle-2 { left:63%; top:20%; --size:4px; --dur:11s; --delay:1.6s; }
#adventures .seasonal-particle-3 { left:70%; top:27%; --size:6px; --dur:13s; --delay:2.9s; }
#adventures .seasonal-particle-4 { left:78%; top:34%; --size:4px; --dur:10.5s; --delay:4.1s; }
#adventures .seasonal-particle-5 { left:66%; top:45%; --size:5px; --dur:14s; --delay:5.7s; }
#adventures .seasonal-particle-6 { left:73%; top:54%; --size:4px; --dur:12.5s; --delay:3.4s; }
#adventures .seasonal-particle-7 { left:83%; top:46%; --size:6px; --dur:15.5s; --delay:6.8s; }
#adventures .seasonal-particle-8 { left:88%; top:28%; --size:4px; --dur:9.5s; --delay:2.1s; }
@keyframes seasonalParticleFloat {
  0%   { transform:translate3d(0,10px,0) scale(.82); opacity:0; }
  15%  { opacity:.28; }
  52%  { transform:translate3d(9px,-14px,0) scale(1.05); opacity:.50; }
  86%  { opacity:.14; }
  100% { transform:translate3d(-3px,-30px,0) scale(.86); opacity:0; }
}

#adventures .seasonal-frond-sway {
  z-index:4;
  opacity:.46;
  filter:blur(.15px) drop-shadow(0 0 10px rgba(19,8,3,.18));
  transform-origin:50% 100%;
  background:
    linear-gradient(74deg, transparent 0 36%, rgba(72,38,12,0) 36% 45%, rgba(72,38,12,.82) 46% 54%, rgba(72,38,12,0) 55% 100%),
    linear-gradient(96deg, transparent 0 28%, rgba(98,57,16,0) 28% 39%, rgba(98,57,16,.86) 40% 48%, rgba(98,57,16,0) 49% 100%),
    linear-gradient(115deg, transparent 0 52%, rgba(123,76,27,.88) 53% 59%, rgba(123,76,27,0) 60% 100%);
}
#adventures .seasonal-frond-sway-a {
  left:2.4%; bottom:-1%; width:9.2%; height:19%;
  animation:seasonalFrondSwayA 8.6s ease-in-out infinite;
}
#adventures .seasonal-frond-sway-b {
  right:8.4%; bottom:-1%; width:8%; height:15%;
  animation:seasonalFrondSwayB 9.8s ease-in-out infinite -1.4s;
}
#adventures .seasonal-frond-sway-c {
  left:15%; bottom:-1%; width:6.4%; height:13%; opacity:.34;
  animation:seasonalFrondSwayC 10.4s ease-in-out infinite -2.2s;
}
@keyframes seasonalFrondSwayA {
  0%,100% { transform:rotate(0deg) translate3d(0,0,0); }
  32%     { transform:rotate(-1.35deg) translate3d(-.2%,0,0); }
  68%     { transform:rotate(1.05deg) translate3d(.25%,0,0); }
}
@keyframes seasonalFrondSwayB {
  0%,100% { transform:rotate(0deg) translate3d(0,0,0); }
  35%     { transform:rotate(1deg) translate3d(.16%,0,0); }
  70%     { transform:rotate(-.9deg) translate3d(-.14%,0,0); }
}
@keyframes seasonalFrondSwayC {
  0%,100% { transform:rotate(0deg) translate3d(0,0,0); }
  28%     { transform:rotate(-.9deg) translate3d(-.1%,0,0); }
  72%     { transform:rotate(.8deg) translate3d(.12%,0,0); }
}

#adventures .seasonal-falling-leaf {
  z-index:5;
  width:15px;
  height:22px;
  opacity:0;
  border-radius:72% 36% 72% 34% / 82% 40% 72% 28%;
  background:
    radial-gradient(118% 118% at 32% 24%, rgba(255,226,156,.98), rgba(255,226,156,0) 41%),
    linear-gradient(180deg, rgba(255,157,54,.98), rgba(154,68,14,.98));
  box-shadow:0 0 8px rgba(255,170,72,.34);
  filter:blur(.05px) saturate(1.12);
}
#adventures .seasonal-falling-leaf-a { left:58%; top:6%; animation:seasonalLeafFallA 13.2s linear infinite .4s; }
#adventures .seasonal-falling-leaf-b { left:66%; top:3%; width:12px; height:18px; animation:seasonalLeafFallB 16.8s linear infinite 3.1s; }
#adventures .seasonal-falling-leaf-c { left:74%; top:9%; width:13px; height:20px; animation:seasonalLeafFallC 15.6s linear infinite 6.3s; }
#adventures .seasonal-falling-leaf-d { left:84%; top:5%; width:11px; height:17px; animation:seasonalLeafFallD 18.6s linear infinite 9.6s; }
#adventures .seasonal-falling-leaf-e { left:70%; top:0%; width:10px; height:16px; animation:seasonalLeafFallE 19.8s linear infinite 1.4s; }
#adventures .seasonal-falling-leaf-f { left:63%; top:11%; width:14px; height:21px; animation:seasonalLeafFallC 17.2s linear infinite 4.8s; }
#adventures .seasonal-falling-leaf-g { left:79%; top:2%; width:9px; height:14px; animation:seasonalLeafFallB 12.9s linear infinite 2.2s; }
#adventures .seasonal-falling-leaf-h { left:88%; top:12%; width:16px; height:24px; animation:seasonalLeafFallA 20.4s linear infinite 8.2s; }
#adventures .seasonal-falling-leaf-i { left:73%; top:14%; width:12px; height:19px; animation:seasonalLeafFallD 15.1s linear infinite 5.7s; }
@keyframes seasonalLeafFallA {
  0%,10% { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  14%    { opacity:.78; }
  52%    { transform:translate3d(-34px,184px,0) rotate(178deg); opacity:.46; }
  82%    { transform:translate3d(18px,356px,0) rotate(320deg); opacity:.12; }
  100%   { transform:translate3d(30px,430px,0) rotate(392deg); opacity:0; }
}
@keyframes seasonalLeafFallB {
  0%,16% { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  22%    { opacity:.52; }
  58%    { transform:translate3d(-18px,140px,0) rotate(-154deg); opacity:.36; }
  88%    { transform:translate3d(24px,320px,0) rotate(-302deg); opacity:.08; }
  100%   { transform:translate3d(8px,388px,0) rotate(-340deg); opacity:0; }
}
@keyframes seasonalLeafFallC {
  0%,12% { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  18%    { opacity:.66; }
  54%    { transform:translate3d(26px,168px,0) rotate(162deg); opacity:.40; }
  86%    { transform:translate3d(-14px,352px,0) rotate(302deg); opacity:.10; }
  100%   { transform:translate3d(10px,418px,0) rotate(352deg); opacity:0; }
}
@keyframes seasonalLeafFallD {
  0%,18% { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  24%    { opacity:.44; }
  60%    { transform:translate3d(-12px,148px,0) rotate(-146deg); opacity:.32; }
  90%    { transform:translate3d(16px,332px,0) rotate(-292deg); opacity:.06; }
  100%   { transform:translate3d(4px,392px,0) rotate(-336deg); opacity:0; }
}
@keyframes seasonalLeafFallE {
  0%,14% { transform:translate3d(0,0,0) rotate(0deg); opacity:0; }
  20%    { opacity:.34; }
  56%    { transform:translate3d(-24px,160px,0) rotate(172deg); opacity:.28; }
  90%    { transform:translate3d(10px,344px,0) rotate(332deg); opacity:.05; }
  100%   { transform:translate3d(-6px,406px,0) rotate(388deg); opacity:0; }
}

@media (max-width:880px) {
  #adventures .world-wildlife-near-canopy {
    left:-16vw;
    width:138vw;
    height:24vh;
    opacity:.28;
  }
  #adventures .worlds-seasonal-blend {
    width:74.07vh;
    height:100vh;
  }
  #adventures .seasonal-frond-sway-a { left:1%; width:13%; height:16%; }
  #adventures .seasonal-frond-sway-b { right:4%; width:11%; height:13%; }
  #adventures .seasonal-frond-sway-c { left:11%; width:9%; height:11%; }
}

@media (prefers-reduced-motion: reduce) {
  #adventures .world-wildlife-near-canopy,
  #adventures .seasonal-dapple-layer,
  #adventures .seasonal-sunshaft-layer,
  #adventures .seasonal-particle,
  #adventures .seasonal-frond-sway,
  #adventures .seasonal-falling-leaf {
    animation:none !important;
  }
}

@media (max-width:880px) {
  #adventures .worlds-seasonal-panel,
  #adventures .worlds-crystal-panel { background-position:52% center; }
  #adventures .world-beat-science,
  #adventures .world-beat-seasonal {
    left:6vw !important;
    width:min(88vw,520px) !important;
  }
}


/* v138 — transition overlay enters and exits physically ------------------
   The World 1 -> World 2 foreground transition object no longer fades. It
   starts beyond the right edge, slides across the world boundary, then keeps
   travelling left until it has fully cleared the viewport. */


/* v141 — assembled four-world site timing -------------------------------
   The parent journey must remain pinned through all four woodland worlds.
   Earlier experimental builds extended only the absolute Chapter 5 child,
   which could not create additional document scroll range. The parent now
   carries the full journey and Chapter 5 remains visible until the final
   crystal world has completed its stationary reading beat. */


/* v142 — transition overlays actually cover the scene seams --------------
   World 2->3 and World 3->4 now use central foreground tree/root clusters
   instead of frame-shaped overlays with empty centres. Each moving panel
   boundary passes behind solid foreground artwork while the overlay slides. */


/* v146 — slimmer autumn to crystal divider -------------------------------
   The World 3 -> World 4 transition now uses the less imposing, tall narrow
   divider artwork. It remains a physical foreground object that slides in,
   masks the moving seam, then continues sliding out to the left. */


/* v152 venues rebuild: crystal woodland exit -> grassland -> short lateral venue reveal */
.venues-chapter {
  height:440vh;
  min-height:3000px;
  background:#0e1713;
}
.venues-sticky {
  background:#101814;
}
.venues-art::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:11;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,14,11,.45) 0 16%,rgba(8,14,11,.16) 28%,transparent 52%),
    linear-gradient(180deg,rgba(10,14,17,.22) 0,transparent 24%,transparent 78%,rgba(8,12,16,.12) 100%);
}
.venues-sky {
  width:115vw;
  transform:translate3d(var(--venues-sky-x,0vw),0,0);
  background:
    radial-gradient(circle at 22% 20%,rgba(255,243,208,.20) 0 5%,rgba(255,239,192,.07) 10%,transparent 24%),
    linear-gradient(180deg,#98b3c3 0%,#b9c8cc 35%,#ded6b8 58%,#97a36c 62%,#728250 100%);
}
.venues-haze {
  width:122vw;
  transform:translate3d(var(--venues-haze-x,0vw),0,0);
  background:
    radial-gradient(ellipse at 48% 42%,rgba(255,247,225,.18),transparent 38%),
    linear-gradient(180deg,transparent 0 42%,rgba(242,229,197,.15) 50%,transparent 76%);
  filter:blur(10px);
}
.venues-distant {
  z-index:3;
  left:-6vw;
  top:-2vh;
  bottom:auto;
  width:112vw;
  height:104vh;
  opacity:1;
  background:var(--asset-venues-countryside-master,none) center center / cover no-repeat;
  transform:translate3d(var(--venues-distant-x,0vw),0,0) scale(var(--venues-distant-scale,1));
  transform-origin:50% 55%;
  filter:saturate(.98) brightness(.98);
}
.venues-track {
  opacity:var(--venues-track-o,0);
  visibility:hidden;
}
.venues-mid {
  z-index:6;
  left:-4vw;
  width:118vw;
  height:44vh;
  bottom:-1vh;
  top:auto;
  background:var(--asset-venues-countryside-midground,none) center bottom / cover no-repeat;
  transform:translate3d(var(--venues-mid-x,0vw),0,0) scale(var(--venues-mid-scale,1));
  transform-origin:50% 100%;
}
.venues-woodland-edge {
  z-index:8;
  left:-2vw;
  width:48vw;
  height:100%;
  background:var(--asset-venues-woodland-exit,none) left center / contain no-repeat;
  transform:translate3d(var(--venues-edge-x,0vw),0,0) scale(var(--venues-edge-scale,1));
  transform-origin:left center;
  opacity:var(--venues-edge-o,1);
  filter:drop-shadow(24px 0 28px rgba(10,18,14,.28));
}
.venues-front {
  z-index:9;
  left:-7vw;
  width:126vw;
  height:34vh;
  bottom:-3vh;
  top:auto;
  background:var(--asset-venues-countryside-foreground,none) center bottom / cover no-repeat;
  transform:translate3d(var(--venues-front-x,0vw),0,0) scale(var(--venues-front-scale,1));
  transform-origin:50% 100%;
}
.venues-light {
  inset:0;
  z-index:10;
  opacity:var(--venues-light-o,.5);
  background:
    radial-gradient(ellipse at 24% 26%,rgba(255,239,191,.15),transparent 24%),
    radial-gradient(ellipse at 76% 32%,rgba(255,240,202,.08),transparent 28%),
    linear-gradient(90deg,rgba(11,26,16,.10),transparent 24%,transparent 78%,rgba(18,28,22,.10));
  mix-blend-mode:screen;
}
.venues-heading,
.venue-beat {
  text-shadow:0 2px 28px rgba(19,25,20,.45);
}
.venues-heading {
  width:min(820px,72vw);
}
.venues-heading p,
.venue-beat p {
  color:rgba(255,253,246,.92);
}
.venues-progress-dot {
  background:#4b5a43;
}
@media (max-width:760px) {
  .venues-chapter { height:460vh; min-height:3000px; }
  .venues-distant { left:-10vw; width:134vw; }
  .venues-woodland-edge { width:72vw; }
  .venues-mid { left:-9vw; width:138vw; height:41vh; }
  .venues-front { left:-12vw; width:146vw; height:31vh; }
  .venues-heading { width:88vw; }
  .venue-beat { width:min(86vw,520px); }
}


/* v153 — seamless crystal exit and full-canvas countryside depth planes --- */
.journey-chapter { height:2550vh !important; }
@media (max-width:880px) {
  .journey-chapter { height:2520vh !important; }
}

.venues-crystal-exit {
  position:absolute;
  inset:0;
  z-index:12;
  pointer-events:none;
  opacity:var(--venues-crystal-o,1);
  background:var(--asset-crystal-panel,none) 50% center / cover no-repeat;
  transform:scale(var(--venues-crystal-scale,1));
  transform-origin:50% 53%;
  will-change:transform,opacity;
  -webkit-mask-image:radial-gradient(ellipse at 52% 52%, transparent 0 var(--venues-crystal-hole,0%), #000 calc(var(--venues-crystal-hole,0%) + 9%));
  mask-image:radial-gradient(ellipse at 52% 52%, transparent 0 var(--venues-crystal-hole,0%), #000 calc(var(--venues-crystal-hole,0%) + 9%));
}

/* Every countryside plane uses exactly the same viewport canvas at rest.
   Parallax comes only from the transparent depth masks moving afterwards. */
.venues-distant,
.venues-mid,
.venues-woodland-edge,
.venues-front {
  left:-6vw !important;
  top:-2vh !important;
  bottom:auto !important;
  width:112vw !important;
  height:104vh !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  transform-origin:50% 55% !important;
}
.venues-distant {
  background-image:var(--asset-venues-countryside-master,none) !important;
  transform:translate3d(var(--venues-distant-x,0vw),0,0) scale(var(--venues-distant-scale,1)) !important;
  filter:saturate(.98) brightness(var(--venues-scene-bright,.82)) !important;
}
.venues-mid {
  background-image:var(--asset-venues-countryside-midground,none) !important;
  transform:translate3d(var(--venues-mid-x,0vw),0,0) scale(var(--venues-mid-scale,1)) !important;
}
.venues-woodland-edge {
  background-image:var(--asset-venues-woodland-exit,none) !important;
  transform:translate3d(var(--venues-edge-x,0vw),0,0) scale(var(--venues-edge-scale,1)) !important;
  opacity:var(--venues-edge-o,1) !important;
  filter:drop-shadow(18px 0 24px rgba(10,18,14,.18)) !important;
}
.venues-front {
  background-image:var(--asset-venues-countryside-foreground,none) !important;
  transform:translate3d(var(--venues-front-x,0vw),0,0) scale(var(--venues-front-scale,1)) !important;
}

/* Hide the old rectangular crop treatment completely. */
.venues-mid,
.venues-front,
.venues-woodland-edge { overflow:visible !important; }

@media (max-width:760px) {
  .venues-distant,
  .venues-mid,
  .venues-woodland-edge,
  .venues-front {
    left:-14vw !important;
    width:128vw !important;
    height:104vh !important;
  }
}


/* v154 crystal handoff -------------------------------------------------- */
@keyframes raedelCrystalPulse {
  0%,100% { transform:scale(1); filter:brightness(1) saturate(1); }
  50% { transform:scale(1.04); filter:brightness(1.12) saturate(1.08); }
}

#adventures .worlds-exit-crystal,
.venues-seed-crystal {
  position:absolute;
  left:50%;
  bottom:3vh;
  width:clamp(170px, 16vw, 310px);
  height:clamp(280px, 48vh, 520px);
  pointer-events:none;
  z-index:24;
  transform-origin:50% 100%;
}
#adventures .worlds-exit-crystal {
  opacity:var(--worlds-seed-crystal-o,0);
  transform:translate3d(-50%, var(--worlds-seed-crystal-y,22vh), 0) scale(var(--worlds-seed-crystal-scale,.7));
}
.venues-seed-crystal {
  z-index:13;
  opacity:var(--venues-seed-o,0);
  transform:translate3d(-50%, var(--venues-seed-y,0px), 0) scale(var(--venues-seed-scale,1));
}
#adventures .worlds-exit-crystal .seed-crystal-core,
.venues-seed-crystal .seed-crystal-core {
  position:absolute;
  left:50%;
  bottom:0;
  width:56%;
  height:100%;
  transform:translateX(-50%);
  clip-path:polygon(50% 0%, 72% 10%, 86% 36%, 77% 72%, 60% 100%, 40% 100%, 23% 72%, 14% 36%, 28% 10%);
  background:
    linear-gradient(90deg, rgba(155,112,255,.08) 0%, rgba(120,171,255,.38) 22%, rgba(231,244,255,.94) 48%, rgba(120,171,255,.36) 72%, rgba(155,112,255,.10) 100%),
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(171,140,255,.82) 24%, rgba(93,86,255,.88) 58%, rgba(82,171,255,.84) 100%);
  box-shadow:
    0 0 26px rgba(144,110,255,.34),
    0 0 74px rgba(96,150,255,.32),
    inset 0 0 28px rgba(255,255,255,.32);
  animation:raedelCrystalPulse 2.8s ease-in-out infinite;
}
#adventures .worlds-exit-crystal .seed-crystal-glow,
.venues-seed-crystal .seed-crystal-glow {
  position:absolute;
  left:50%;
  bottom:4%;
  width:120%;
  height:42%;
  transform:translateX(-50%) scale(var(--worlds-seed-crystal-pulse,1));
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(122,112,255,.34) 0%, rgba(83,165,255,.22) 28%, rgba(55,92,171,.12) 54%, transparent 72%);
  filter:blur(18px);
}
.venues-seed-crystal .seed-crystal-glow {
  transform:translateX(-50%) scale(var(--venues-seed-pulse,1));
}
#adventures .worlds-exit-crystal .seed-crystal-shine,
.venues-seed-crystal .seed-crystal-shine {
  position:absolute;
  left:50%;
  bottom:10%;
  width:12%;
  height:70%;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,0));
  opacity:.8;
  filter:blur(1px);
}
#adventures .worlds-exit-crystal .seed-crystal-glow { opacity:var(--worlds-seed-crystal-glow,.5); }
.venues-seed-crystal .seed-crystal-glow { opacity:var(--venues-seed-glow,.5); }

/* Overlap the next section with the end of the crystal chapter so there is no dead gap or split viewport. */
.venues-chapter {
  position:relative;
  z-index:5;
  margin-top:-100vh;
  padding-top:100vh;
}
#adventures.worlds-chapter { z-index:4; }

/* The reveal now grows out of the seed crystal rather than from the screen centre. */
.venues-crystal-exit {
  z-index:12;
  transform-origin:50% 74%;
  -webkit-mask-image:radial-gradient(ellipse at 50% 74%, transparent 0 var(--venues-crystal-hole,0%), #000 calc(var(--venues-crystal-hole,0%) + 8%));
  mask-image:radial-gradient(ellipse at 50% 74%, transparent 0 var(--venues-crystal-hole,0%), #000 calc(var(--venues-crystal-hole,0%) + 8%));
}

/* Slightly dim the woodland edge so it can peel away cleanly from the crystal scene. */
.venues-woodland-edge {
  filter:drop-shadow(18px 0 24px rgba(10,18,14,.18)) brightness(.92) !important;
}

@media (max-width:760px) {
  .venues-chapter {
    margin-top:-100svh;
    padding-top:100svh;
  }
  #adventures .worlds-exit-crystal,
  .venues-seed-crystal {
    width:clamp(140px, 28vw, 230px);
    height:clamp(240px, 42vh, 380px);
    bottom:4vh;
  }
}


/* v155 crystal placement and seamless overlap fixes --------------------- */
#adventures .worlds-exit-crystal,
.venues-seed-crystal {
  left:54%;
  bottom:9vh;
  width:clamp(120px, 10vw, 180px);
  height:clamp(240px, 42vh, 440px);
}
#adventures .worlds-exit-crystal {
  z-index:24;
  opacity:var(--worlds-seed-crystal-o,0);
  transform:translate3d(-50%, var(--worlds-seed-crystal-y,28vh), 0) scale(var(--worlds-seed-crystal-scale,.6));
}
.venues-seed-crystal {
  left:54%;
  bottom:9vh;
  z-index:13;
  opacity:var(--venues-seed-o,0);
  transform:translate3d(-50%, var(--venues-seed-y,0px), 0) scale(var(--venues-seed-scale,.95));
}
#adventures .seed-crystal-sprite,
.venues-seed-crystal .seed-crystal-sprite {
  position:absolute;
  inset:0;
  display:block;
  filter:drop-shadow(0 0 22px rgba(126,118,255,.34)) drop-shadow(0 0 46px rgba(104,182,255,.26));
}
#adventures .seed-crystal-aura,
.venues-seed-crystal .seed-crystal-aura {
  position:absolute;
  left:50%;
  bottom:-2%;
  width:260%;
  height:54%;
  transform:translateX(-50%) scale(var(--worlds-seed-crystal-pulse,1));
  border-radius:50%;
  background:
    radial-gradient(ellipse at center, rgba(148,121,255,.32) 0%, rgba(100,176,255,.22) 28%, rgba(76,132,255,.11) 44%, transparent 72%),
    radial-gradient(ellipse at center, rgba(255,255,255,.32) 0%, transparent 52%);
  filter:blur(18px);
  opacity:var(--worlds-seed-crystal-glow,.48);
}
.venues-seed-crystal .seed-crystal-aura {
  transform:translateX(-50%) scale(var(--venues-seed-pulse,1));
  opacity:var(--venues-seed-glow,.48);
}
/* hide obsolete span styles from v154 */
#adventures .seed-crystal-core,
#adventures .seed-crystal-glow,
#adventures .seed-crystal-shine,
.venues-seed-crystal .seed-crystal-core,
.venues-seed-crystal .seed-crystal-glow,
.venues-seed-crystal .seed-crystal-shine { display:none !important; }

/* overlap the venues chapter without creating a blank spacer */
.venues-chapter {
  margin-top:-100vh !important;
  padding-top:0 !important;
  background:transparent !important;
}
.venues-sticky {
  background:#08100d !important;
}
@media (max-width:760px) {
  .venues-chapter {
    margin-top:-100svh !important;
    padding-top:0 !important;
  }
  #adventures .worlds-exit-crystal,
  .venues-seed-crystal {
    left:56%;
    bottom:11vh;
    width:clamp(110px, 18vw, 160px);
    height:clamp(220px, 36vh, 320px);
  }
}


/* v156 — transition completes inside the existing World 4 viewport --------
   No second crystal panel is drawn below. The countryside grows from the
   path crystal while Chapter 5 is still pinned, then Chapter 6 starts on the
   exact same countryside frame. */
#adventures .worlds-countryside-reveal {
  position:absolute;
  inset:0;
  z-index:22;
  pointer-events:none;
  opacity:var(--worlds-countryside-o,0);
  background:var(--asset-venues-countryside-master,none) center center / cover no-repeat;
  -webkit-mask-image:radial-gradient(circle at 54% 70%, #000 0 var(--worlds-countryside-r,0%), rgba(0,0,0,.95) calc(var(--worlds-countryside-r,0%) + 2%), transparent calc(var(--worlds-countryside-r,0%) + 8%));
  mask-image:radial-gradient(circle at 54% 70%, #000 0 var(--worlds-countryside-r,0%), rgba(0,0,0,.95) calc(var(--worlds-countryside-r,0%) + 2%), transparent calc(var(--worlds-countryside-r,0%) + 8%));
  will-change:opacity,mask-image;
}
#adventures .worlds-countryside-rim {
  position:absolute;
  left:54%;
  top:70%;
  width:24vw;
  aspect-ratio:1;
  z-index:23;
  pointer-events:none;
  opacity:var(--worlds-countryside-rim-o,0);
  transform:translate(-50%,-50%) scale(var(--worlds-countryside-rim-s,.25));
  border-radius:50%;
  border:2px solid rgba(169,145,255,.32);
  box-shadow:
    0 0 28px rgba(126,106,255,.34),
    0 0 74px rgba(94,169,255,.22),
    inset 0 0 34px rgba(225,241,255,.12);
  filter:blur(.3px);
}

/* Use a rendered crystal cluster cropped from the exact World 4 artwork. */
#adventures .worlds-exit-crystal {
  left:54% !important;
  bottom:7vh !important;
  width:clamp(180px,17vw,320px) !important;
  height:clamp(300px,48vh,540px) !important;
  z-index:30 !important;
  opacity:var(--worlds-seed-crystal-o,0) !important;
  transform:translate3d(-50%,var(--worlds-seed-crystal-y,30vh),0) scale(var(--worlds-seed-crystal-scale,.55)) !important;
}
#adventures .seed-crystal-rendered {
  position:absolute;
  inset:0;
  display:block;
  background:var(--asset-crystal-seed-approved,none) center bottom / contain no-repeat;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse at 52% 55%,#000 0 48%,rgba(0,0,0,.92) 68%,transparent 100%);
  mask-image:radial-gradient(ellipse at 52% 55%,#000 0 48%,rgba(0,0,0,.92) 68%,transparent 100%);
  filter:drop-shadow(0 0 22px rgba(126,106,255,.38)) drop-shadow(0 0 52px rgba(86,169,255,.28));
}
#adventures .worlds-exit-crystal .seed-crystal-aura {
  position:absolute;
  left:50%;
  bottom:3%;
  width:145%;
  height:35%;
  transform:translateX(-50%) scale(var(--worlds-seed-crystal-pulse,1));
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(156,121,255,.36),rgba(94,165,255,.17) 38%,transparent 72%);
  filter:blur(18px);
  opacity:var(--worlds-seed-crystal-glow,.45);
}
/* Retire all old synthetic/carry crystal elements. */
#adventures .seed-crystal-sprite,
#adventures .seed-crystal-core,
#adventures .seed-crystal-glow,
#adventures .seed-crystal-shine,
.venues-crystal-exit,
.venues-seed-crystal { display:none !important; }

/* Chapter 6 is a normal following chapter again: no negative overlap, no
   padding spacer, no duplicate crystal world below the sticky stage. */
.venues-chapter {
  margin-top:0 !important;
  padding-top:0 !important;
  background:#101814 !important;
  z-index:auto !important;
}
.venues-sticky {
  background:#101814 !important;
}

/* First frame of Chapter 6 must match the completed Chapter 5 reveal. */
.venues-distant {
  background-image:var(--asset-venues-countryside-master,none) !important;
  filter:saturate(.98) brightness(.98) !important;
}

@media (max-width:760px) {
  .venues-chapter { margin-top:0 !important; padding-top:0 !important; }
  #adventures .worlds-exit-crystal {
    left:55% !important;
    bottom:9vh !important;
    width:clamp(150px,28vw,230px) !important;
    height:clamp(260px,42vh,400px) !important;
  }
  #adventures .worlds-countryside-reveal {
    -webkit-mask-image:radial-gradient(circle at 55% 72%, #000 0 var(--worlds-countryside-r,0%), rgba(0,0,0,.95) calc(var(--worlds-countryside-r,0%) + 2%), transparent calc(var(--worlds-countryside-r,0%) + 9%));
    mask-image:radial-gradient(circle at 55% 72%, #000 0 var(--worlds-countryside-r,0%), rgba(0,0,0,.95) calc(var(--worlds-countryside-r,0%) + 2%), transparent calc(var(--worlds-countryside-r,0%) + 9%));
  }
}


/* v157 — World 4 -> venues is one pinned scene, not two vertical sections */
.journey-chapter { height:3230vh !important; }
#adventures .worlds-sticky { overflow:hidden !important; }

#adventures .worlds-venues-continuation {
  position:absolute;
  inset:0;
  z-index:26;
  opacity:var(--worlds-venues-o,0);
  pointer-events:none;
  overflow:hidden;
}
#adventures .worlds-venues-continuation .venues-art {
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
#adventures .worlds-venues-continuation .venues-heading,
#adventures .worlds-venues-continuation .venue-beat,
#adventures .worlds-venues-continuation .venues-progress {
  z-index:34;
}
#adventures .worlds-venues-continuation .venues-heading {
  opacity:var(--venues-heading-o,0);
  transform:translate3d(0,var(--venues-heading-y,0px),0);
}

/* The countryside art starts as the exact image already growing through the crystal. */
#adventures .worlds-venues-continuation .venues-distant {
  background-image:var(--asset-venues-countryside-master,none) !important;
  filter:saturate(.98) brightness(.98) !important;
}
#adventures .worlds-venues-continuation .venues-track { display:none !important; }

/* Purpose-built crystal cluster — transparent asset, no rectangular scene crop. */
#adventures .worlds-exit-crystal {
  left:51.3% !important;
  bottom:24vh !important;
  width:clamp(210px,16vw,360px) !important;
  height:clamp(360px,50vh,650px) !important;
  z-index:35 !important;
  opacity:var(--worlds-seed-crystal-o,0) !important;
  transform:translate3d(-50%,0,0) !important;
  transform-origin:50% 100% !important;
}
#adventures .seed-crystal-rendered {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  background:var(--asset-crystal-seed-legacy,none) center bottom / contain no-repeat !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  transform:scale(var(--worlds-seed-crystal-breathe,1)) !important;
  transform-origin:50% 100% !important;
  filter:blur(var(--worlds-seed-crystal-blur,0px)) brightness(var(--worlds-seed-crystal-brightness,1)) drop-shadow(0 0 16px rgba(144,118,255,.26)) drop-shadow(0 0 34px rgba(101,176,255,.18)) !important;
}
#adventures .worlds-exit-crystal .seed-crystal-aura {
  left:50% !important;
  bottom:4% !important;
  width:160% !important;
  height:28% !important;
  background:radial-gradient(ellipse at center,rgba(170,140,255,.28),rgba(95,160,255,.12) 42%,transparent 72%) !important;
  opacity:var(--worlds-seed-crystal-glow,.46) !important;
}

/* Venue chapter no longer exists as a normal vertical section. */
.seo-content > .venues-chapter { display:none !important; }

@media (max-width:760px) {
  .journey-chapter { height:3330vh !important; }
  #adventures .worlds-exit-crystal {
    left:51.3% !important;
    bottom:18vh !important;
    width:clamp(150px,26vw,230px) !important;
    height:clamp(255px,39vh,390px) !important;
  }
}


/* v161 — crystal dissolves in at its final position, then breathes and emits sparks. */
#adventures .seed-crystal-sparks {
  position:absolute;
  inset:-18% -24% -8%;
  display:block;
  pointer-events:none;
  opacity:var(--worlds-seed-sparks-o,0);
  overflow:visible;
}
#adventures .seed-crystal-sparks > span {
  position:absolute;
  left:50%;
  bottom:18%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(211,226,255,.96);
  box-shadow:0 0 6px rgba(149,125,255,.96),0 0 12px rgba(77,171,255,.70);
  opacity:0;
  animation:raedelCrystalSpark 2.7s ease-out infinite;
}
@keyframes raedelCrystalSpark {
  0% { opacity:0; transform:translate3d(0,0,0) scale(.55); }
  14% { opacity:.9; }
  72% { opacity:.78; }
  100% { opacity:0; transform:translate3d(var(--spark-x),var(--spark-y),0) scale(.18); }
}
#adventures .seed-crystal-sparks > span:nth-child(1)  { left:38%; --spark-x:-48px; --spark-y:-118px; animation-delay:-.2s; }
#adventures .seed-crystal-sparks > span:nth-child(2)  { left:48%; --spark-x:-22px; --spark-y:-154px; animation-delay:-1.0s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(3)  { left:58%; --spark-x:38px;  --spark-y:-132px; animation-delay:-1.8s; }
#adventures .seed-crystal-sparks > span:nth-child(4)  { left:66%; --spark-x:61px;  --spark-y:-96px;  animation-delay:-.7s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(5)  { left:32%; --spark-x:-70px; --spark-y:-82px;  animation-delay:-2.2s; }
#adventures .seed-crystal-sparks > span:nth-child(6)  { left:53%; --spark-x:16px;  --spark-y:-184px; animation-delay:-1.4s; width:2px; height:2px; }
#adventures .seed-crystal-sparks > span:nth-child(7)  { left:43%; --spark-x:-34px; --spark-y:-104px; animation-delay:-2.5s; width:2px; height:2px; }
#adventures .seed-crystal-sparks > span:nth-child(8)  { left:61%; --spark-x:50px;  --spark-y:-168px; animation-delay:-.35s; }
#adventures .seed-crystal-sparks > span:nth-child(9)  { left:35%; --spark-x:-58px; --spark-y:-146px; animation-delay:-1.65s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(10) { left:69%; --spark-x:72px;  --spark-y:-120px; animation-delay:-2.0s; width:2px; height:2px; }
#adventures .seed-crystal-sparks > span:nth-child(11) { left:51%; --spark-x:5px;   --spark-y:-126px; animation-delay:-.9s; }
#adventures .seed-crystal-sparks > span:nth-child(12) { left:46%; --spark-x:-15px; --spark-y:-198px; animation-delay:-2.35s; width:2px; height:2px; }


/* v162 — much more energetic crystal spark field ----------------------- */
#adventures .seed-crystal-sparks {
  inset:-46% -75% -18% !important;
  opacity:var(--worlds-seed-sparks-o,0) !important;
  filter:brightness(1.22) saturate(1.12);
}
#adventures .seed-crystal-sparks > span {
  bottom:14% !important;
  width:5px;
  height:5px;
  background:rgba(238,246,255,.99) !important;
  box-shadow:
    0 0 5px 2px rgba(255,255,255,.88),
    0 0 12px 5px rgba(164,129,255,.90),
    0 0 25px 8px rgba(78,174,255,.56) !important;
  animation-name:raedelCrystalSparkV162 !important;
  animation-duration:1.55s !important;
  animation-timing-function:cubic-bezier(.18,.72,.28,1) !important;
  animation-iteration-count:infinite !important;
}
@keyframes raedelCrystalSparkV162 {
  0%   { opacity:0; transform:translate3d(0,5px,0) scale(.22); }
  7%   { opacity:1; transform:translate3d(0,0,0) scale(1.35); }
  28%  { opacity:.96; }
  72%  { opacity:.70; }
  100% { opacity:0; transform:translate3d(var(--spark-x),var(--spark-y),0) scale(.15); }
}

/* Existing twelve particles, widened and made faster. */
#adventures .seed-crystal-sparks > span:nth-child(1)  { left:36%; --spark-x:-86px;  --spark-y:-164px; animation-delay:-.12s; }
#adventures .seed-crystal-sparks > span:nth-child(2)  { left:47%; --spark-x:-38px;  --spark-y:-218px; animation-delay:-.54s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(3)  { left:58%; --spark-x:66px;   --spark-y:-188px; animation-delay:-.92s; }
#adventures .seed-crystal-sparks > span:nth-child(4)  { left:69%; --spark-x:104px;  --spark-y:-132px; animation-delay:-.34s; width:4px; height:4px; }
#adventures .seed-crystal-sparks > span:nth-child(5)  { left:29%; --spark-x:-124px; --spark-y:-118px; animation-delay:-1.20s; }
#adventures .seed-crystal-sparks > span:nth-child(6)  { left:54%; --spark-x:28px;   --spark-y:-246px; animation-delay:-.72s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(7)  { left:42%; --spark-x:-62px;  --spark-y:-152px; animation-delay:-1.40s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(8)  { left:62%; --spark-x:88px;   --spark-y:-226px; animation-delay:-.20s; }
#adventures .seed-crystal-sparks > span:nth-child(9)  { left:33%; --spark-x:-102px; --spark-y:-206px; animation-delay:-.86s; width:4px; height:4px; }
#adventures .seed-crystal-sparks > span:nth-child(10) { left:73%; --spark-x:132px;  --spark-y:-168px; animation-delay:-1.04s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(11) { left:51%; --spark-x:9px;    --spark-y:-178px; animation-delay:-.46s; }
#adventures .seed-crystal-sparks > span:nth-child(12) { left:45%; --spark-x:-24px;  --spark-y:-266px; animation-delay:-1.30s; width:3px; height:3px; }

/* Additional 24 sparks for a continuous energetic spray. */
#adventures .seed-crystal-sparks > span:nth-child(13) { left:23%; --spark-x:-148px; --spark-y:-146px; animation-delay:-.08s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(14) { left:28%; --spark-x:-116px; --spark-y:-226px; animation-delay:-.64s; }
#adventures .seed-crystal-sparks > span:nth-child(15) { left:39%; --spark-x:-74px;  --spark-y:-282px; animation-delay:-1.12s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(16) { left:48%; --spark-x:-12px;  --spark-y:-304px; animation-delay:-.28s; width:6px; height:6px; }
#adventures .seed-crystal-sparks > span:nth-child(17) { left:57%; --spark-x:48px;   --spark-y:-288px; animation-delay:-.78s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(18) { left:67%; --spark-x:112px;  --spark-y:-248px; animation-delay:-1.38s; }
#adventures .seed-crystal-sparks > span:nth-child(19) { left:77%; --spark-x:164px;  --spark-y:-196px; animation-delay:-.50s; width:4px; height:4px; }
#adventures .seed-crystal-sparks > span:nth-child(20) { left:81%; --spark-x:184px;  --spark-y:-118px; animation-delay:-1.06s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(21) { left:18%; --spark-x:-174px; --spark-y:-104px; animation-delay:-.38s; width:4px; height:4px; }
#adventures .seed-crystal-sparks > span:nth-child(22) { left:34%; --spark-x:-106px; --spark-y:-260px; animation-delay:-.96s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(23) { left:44%; --spark-x:-46px;  --spark-y:-326px; animation-delay:-.18s; }
#adventures .seed-crystal-sparks > span:nth-child(24) { left:52%; --spark-x:18px;   --spark-y:-338px; animation-delay:-.82s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(25) { left:61%; --spark-x:76px;   --spark-y:-312px; animation-delay:-1.28s; width:4px; height:4px; }
#adventures .seed-crystal-sparks > span:nth-child(26) { left:72%; --spark-x:142px;  --spark-y:-264px; animation-delay:-.42s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(27) { left:84%; --spark-x:206px;  --spark-y:-162px; animation-delay:-.90s; }
#adventures .seed-crystal-sparks > span:nth-child(28) { left:14%; --spark-x:-202px; --spark-y:-176px; animation-delay:-1.46s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(29) { left:31%; --spark-x:-132px; --spark-y:-310px; animation-delay:-.24s; width:5px; height:5px; }
#adventures .seed-crystal-sparks > span:nth-child(30) { left:41%; --spark-x:-58px;  --spark-y:-352px; animation-delay:-.70s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(31) { left:55%; --spark-x:42px;   --spark-y:-366px; animation-delay:-1.16s; width:4px; height:4px; }
#adventures .seed-crystal-sparks > span:nth-child(32) { left:65%; --spark-x:104px;  --spark-y:-330px; animation-delay:-.14s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(33) { left:75%; --spark-x:166px;  --spark-y:-292px; animation-delay:-.60s; width:5px; height:5px; }
#adventures .seed-crystal-sparks > span:nth-child(34) { left:88%; --spark-x:224px;  --spark-y:-214px; animation-delay:-1.24s; width:3px; height:3px; }
#adventures .seed-crystal-sparks > span:nth-child(35) { left:10%; --spark-x:-232px; --spark-y:-214px; animation-delay:-.76s; width:4px; height:4px; }
#adventures .seed-crystal-sparks > span:nth-child(36) { left:50%; --spark-x:0px;    --spark-y:-392px; animation-delay:-1.50s; width:6px; height:6px; }


/* v164 — clean countryside depth stack ---------------------------------
   Each moving plane owns unique artwork. All five planes use the same canvas
   geometry at rest, so the crystal reveal can hand over pixel-for-pixel before
   parallax begins. No repeated source-image strips remain underneath. */
#adventures .worlds-countryside-reveal {
  background-image:var(--asset-venues-clean-master,none) !important;
}
#adventures .worlds-venues-continuation .venues-sky,
#adventures .worlds-venues-continuation .venues-distant,
#adventures .worlds-venues-continuation .venues-mid,
#adventures .worlds-venues-continuation .venues-front,
#adventures .worlds-venues-continuation .venues-woodland-edge {
  position:absolute !important;
  left:-20vw !important;
  top:-8vh !important;
  right:auto !important;
  bottom:auto !important;
  width:140vw !important;
  height:116vh !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  transform-origin:50% 50% !important;
  will-change:transform,opacity !important;
}
#adventures .worlds-venues-continuation .venues-sky {
  z-index:1 !important;
  background-image:var(--asset-venues-clean-sky,none) !important;
  transform:translate3d(var(--venues-sky-x,0vw),0,0) !important;
  filter:none !important;
}
#adventures .worlds-venues-continuation .venues-haze {
  z-index:2 !important;
  inset:-4vh -8vw !important;
  width:auto !important;
  height:auto !important;
  transform:translate3d(var(--venues-haze-x,0vw),0,0) !important;
  background:
    radial-gradient(ellipse at 47% 45%,rgba(255,245,218,.18),transparent 38%),
    linear-gradient(180deg,transparent 0 48%,rgba(235,230,205,.10) 58%,transparent 75%) !important;
  filter:blur(10px) !important;
}
#adventures .worlds-venues-continuation .venues-distant {
  z-index:3 !important;
  background-image:var(--asset-venues-clean-distant,none) !important;
  transform:translate3d(var(--venues-distant-x,0vw),0,0) !important;
  filter:none !important;
}
#adventures .worlds-venues-continuation .venues-mid {
  z-index:5 !important;
  background-image:var(--asset-venues-clean-buildings,none) !important;
  transform:translate3d(var(--venues-mid-x,0vw),0,0) !important;
  filter:none !important;
}
#adventures .worlds-venues-continuation .venues-front {
  z-index:8 !important;
  background-image:var(--asset-venues-clean-foreground,none) !important;
  transform:translate3d(var(--venues-front-x,0vw),var(--venues-front-y,0vh),0) !important;
  filter:none !important;
}
/* v166: foreground remains aligned for the reveal, then settles much lower to frame the bottom edge and expose the architecture. */
#adventures .worlds-venues-continuation .venues-woodland-edge {
  z-index:9 !important;
  background-image:var(--asset-venues-clean-canopy,none) !important;
  transform:translate3d(var(--venues-edge-x,0vw),0,0) !important;
  opacity:var(--venues-edge-o,1) !important;
  filter:drop-shadow(16px 0 22px rgba(9,17,11,.18)) !important;
}
#adventures .worlds-venues-continuation .venues-light {
  z-index:10 !important;
  opacity:var(--venues-light-o,.34) !important;
  background:
    radial-gradient(ellipse at 18% 22%,rgba(255,234,176,.13),transparent 25%),
    linear-gradient(90deg,rgba(8,16,10,.08),transparent 24%,transparent 82%,rgba(8,16,10,.05)) !important;
  mix-blend-mode:screen !important;
}
#adventures .worlds-venues-continuation .venues-art::after {
  background:
    linear-gradient(90deg,rgba(7,14,9,.34) 0 13%,rgba(7,14,9,.12) 25%,transparent 46%),
    linear-gradient(180deg,rgba(7,11,12,.15),transparent 22%,transparent 82%,rgba(8,12,9,.08)) !important;
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venues-sky,
  #adventures .worlds-venues-continuation .venues-distant,
  #adventures .worlds-venues-continuation .venues-mid,
  #adventures .worlds-venues-continuation .venues-front,
  #adventures .worlds-venues-continuation .venues-woodland-edge {
    left:-28vw !important;
    top:-6vh !important;
    width:156vw !important;
    height:112vh !important;
  }
}


/* v167 — right-edge countryside cap -------------------------------------
   Purpose-built vegetation / dry-stone-wall end cap masks the finite edge
   of the moving estate layer. It is a foreground framing object, not a
   duplicated panorama, so there is no repeated architecture or ghosting. */
#adventures .worlds-venues-continuation .venues-right-cap {
  position:absolute;
  z-index:12;
  top:-2vh;
  right:-1.5vw;
  width:clamp(360px,34vw,650px);
  height:104vh;
  pointer-events:none;
  background:var(--asset-venues-right-edge-cap,none) right bottom / contain no-repeat;
  transform:translate3d(0,0,0);
  transform-origin:100% 100%;
  filter:drop-shadow(-12px 2px 22px rgba(8,16,10,.12));
  will-change:transform;
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venues-right-cap {
    top:0;
    right:-8vw;
    width:clamp(260px,58vw,430px);
    height:102vh;
  }
}


/* v169 — staged venue sets inside persistent countryside ---------------- */
#adventures .worlds-venues-continuation .venues-mid {
  opacity:var(--venues-heritage-scene-o,1) !important;
  transform:translate3d(var(--venues-mid-x,0vw),var(--venues-heritage-y,0vh),0) !important;
}
#adventures .worlds-venues-continuation .venues-front {
  opacity:var(--venues-heritage-scene-o,1) !important;
  transform:translate3d(var(--venues-front-x,0vw),calc(var(--venues-front-y,0vh) + var(--venues-heritage-y,0vh)),0) !important;
}
#adventures .worlds-venues-continuation .venues-right-cap {
  opacity:var(--venues-heritage-scene-o,1) !important;
  transform:translate3d(0,var(--venues-heritage-y,0vh),0) !important;
}
#adventures .worlds-venues-continuation .venues-woodland-edge {
  opacity:calc(var(--venues-edge-o,1) * var(--venues-heritage-scene-o,1)) !important;
}

#adventures .worlds-venues-continuation .venue-stage {
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:visible;
  will-change:opacity;
}
#adventures .worlds-venues-continuation .venue-stage-layer {
  position:absolute;
  left:-9vw;
  bottom:-3vh;
  width:118vw;
  height:94vh;
  background-position:center bottom;
  background-size:contain;
  background-repeat:no-repeat;
  transform-origin:50% 100%;
  will-change:transform,opacity;
}
#adventures .worlds-venues-continuation .venue-stage-zoo {
  z-index:11;
  opacity:var(--venue-zoo-o,0);
}
#adventures .worlds-venues-continuation .venue-zoo-rear {
  z-index:1;
  background-image:var(--asset-zoo-rear,none);
  transform:translate3d(var(--venue-zoo-rear-x,0vw),var(--venue-zoo-rear-y,80vh),0);
}
#adventures .worlds-venues-continuation .venue-zoo-front {
  z-index:2;
  background-image:var(--asset-zoo-front,none);
  transform:translate3d(var(--venue-zoo-front-x,0vw),var(--venue-zoo-front-y,90vh),0);
}
#adventures .worlds-venues-continuation .venue-stage-fort {
  z-index:11;
  opacity:var(--venue-fort-o,0);
}
#adventures .worlds-venues-continuation .venue-fort-rear {
  z-index:1;
  background-image:var(--asset-fort-rear,none);
  transform:translate3d(var(--venue-fort-rear-x,0vw),var(--venue-fort-rear-y,80vh),0);
}
#adventures .worlds-venues-continuation .venue-fort-front {
  z-index:2;
  background-image:var(--asset-fort-front,none);
  transform:translate3d(var(--venue-fort-front-x,0vw),var(--venue-fort-front-y,90vh),0);
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-stage-layer {
    left:-27vw;
    width:154vw;
    height:90vh;
    bottom:-2vh;
  }
}


/* v170 — robust open-valley handoff and restored venue copy sequence ----- */
#adventures .worlds-venues-continuation .venues-distant {
  opacity:var(--venues-distant-o,1) !important;
}
#adventures .worlds-venues-continuation .venues-open-base {
  position:absolute;
  z-index:4;
  left:-10vw;
  top:-6vh;
  width:120vw;
  height:112vh;
  pointer-events:none;
  opacity:var(--venues-open-base-o,0);
  background:var(--asset-venues-open-valley,none) center center / cover no-repeat;
  transform:translate3d(calc(var(--venues-distant-x,0vw) * .35),0,0);
  transform-origin:50% 50%;
  filter:saturate(.94) brightness(.98);
  will-change:opacity,transform;
}
/* Copy must always sit above all staged physical scenery. */
#adventures .worlds-venues-continuation .venues-heading,
#adventures .worlds-venues-continuation .venue-beat,
#adventures .worlds-venues-continuation .venues-progress {
  z-index:40 !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venues-open-base {
    left:-22vw;
    width:144vw;
    top:-4vh;
    height:108vh;
  }
}


/* v171 — correct semantic sequence: four manor beats, THEN story examples */
.journey-chapter { height:3750vh !important; }
#adventures .worlds-venues-continuation .venues-progress {
  opacity:calc(.74 * var(--venues-progress-o,1)) !important;
}
#adventures .worlds-venues-continuation .venue-examples-heading,
#adventures .worlds-venues-continuation .venue-example-beat {
  position:absolute;
  z-index:42;
  pointer-events:none;
  color:#fffdf6;
  text-shadow:0 2px 28px rgba(19,25,20,.48);
}
#adventures .worlds-venues-continuation .venue-examples-heading {
  left:7vw;
  top:16vh;
  width:min(820px,62vw);
  opacity:var(--venue-examples-heading-o,0);
  transform:translate3d(0,var(--venue-examples-heading-y,0px),0);
}
#adventures .worlds-venues-continuation .venue-examples-heading h2 {
  margin:.45rem 0 .75rem;
  color:#fffdf6;
  font:700 clamp(3rem,5.7vw,6.6rem)/.92 Arial,Helvetica,sans-serif;
  letter-spacing:-.045em;
  text-transform:uppercase;
  text-wrap:balance;
}
#adventures .worlds-venues-continuation .venue-examples-heading p {
  margin:0;
  max-width:760px;
  color:rgba(255,253,246,.90);
  font-size:clamp(1rem,1.25vw,1.18rem);
  line-height:1.65;
}
#adventures .worlds-venues-continuation .venue-example-beat {
  left:7vw;
  bottom:10vh;
  width:min(700px,54vw);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  align-items:start;
  padding:24px 28px 24px 0;
}
#adventures .worlds-venues-continuation .venue-example-wildlife {
  opacity:var(--venue-example-wildlife-o,0);
  transform:translate3d(var(--venue-example-wildlife-x,0px),0,0);
}
#adventures .worlds-venues-continuation .venue-example-fort {
  opacity:var(--venue-example-fort-o,0);
  transform:translate3d(var(--venue-example-fort-x,0px),0,0);
}
#adventures .worlds-venues-continuation .venue-example-beat .example-number {
  min-width:52px;
  padding-top:8px;
  color:#f0ca79;
  font:600 1rem/1 Georgia,'Times New Roman',serif;
  letter-spacing:.08em;
}
#adventures .worlds-venues-continuation .venue-example-beat h3 {
  margin:.3rem 0 .55rem;
  color:#fffdf6;
  font:600 clamp(2rem,3.45vw,3.95rem)/.98 Georgia,'Times New Roman',serif;
  letter-spacing:-.025em;
  text-wrap:balance;
}
#adventures .worlds-venues-continuation .venue-example-beat p {
  margin:0;
  max-width:620px;
  color:rgba(255,253,246,.90);
  font-size:clamp(.98rem,1.18vw,1.1rem);
  line-height:1.65;
}
/* The old tabletop version is superseded by the in-place countryside sequence. */
.examples-chapter { display:none !important; }
@media (max-width:760px) {
  .journey-chapter { height:3730vh !important; }
  #adventures .worlds-venues-continuation .venue-examples-heading {
    left:6vw;
    top:14vh;
    width:88vw;
  }
  #adventures .worlds-venues-continuation .venue-examples-heading h2 {
    font-size:clamp(2.4rem,11vw,4.5rem);
  }
  #adventures .worlds-venues-continuation .venue-example-beat {
    left:6vw;
    bottom:11vh;
    width:88vw;
    gap:12px;
  }
}


/* v172 — preserve the original countryside background -------------------
   The v170 full-canvas open valley replacement is no longer used. Instead
   this transparent landscape cover sits over the exposed edge of the
   original distant cutout after the manor scenery drops. The sky and valley
   beneath never change. */
#adventures .worlds-venues-continuation .venues-distant {
  opacity:1 !important;
}
#adventures .worlds-venues-continuation .venues-open-base {
  z-index:4 !important;
  left:-9vw !important;
  top:10vh !important;
  width:118vw !important;
  height:88vh !important;
  opacity:var(--venues-open-base-o,0) !important;
  background:var(--asset-venues-distant-cover,none) center bottom / 100% auto no-repeat !important;
  transform:translate3d(calc(var(--venues-distant-x,0vw) * .38),0,0) !important;
  filter:saturate(.97) brightness(.99) !important;
  pointer-events:none !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venues-open-base {
    left:-20vw !important;
    top:15vh !important;
    width:140vw !important;
    height:82vh !important;
    background-size:115% auto !important;
  }
}


/* v173 — lock the original manor countryside background -----------------
   No alternate valley, no misty landscape cover. The exact same sky and
   distant parallax layers remain visible through manor, zoo and fort. Set
   swaps overlap so foreground scenery hides the finite cutout naturally. */
#adventures .worlds-venues-continuation .venues-open-base {
  display:none !important;
  opacity:0 !important;
  background:none !important;
}
#adventures .worlds-venues-continuation .venues-sky,
#adventures .worlds-venues-continuation .venues-distant {
  opacity:1 !important;
}
/* Let incoming venue scenery cover the exposed middle ground during swaps. */
#adventures .worlds-venues-continuation .venue-stage-zoo,
#adventures .worlds-venues-continuation .venue-stage-fort {
  z-index:13 !important;
}


/* v174 — persistent valley underlay + alternating background parallax -----
   Keep the exact existing countryside background. The main distant-hills
   cutout remains the visible parallax plane; this matching underlay sits
   behind only its lower transparent edge so the scalloped alpha boundary can
   never be exposed when the manor scenery drops. Both move from the same CSS
   x variable, so they behave as one background rather than two scenes. */
#adventures .worlds-venues-continuation .venues-distant-underlay {
  position:absolute !important;
  z-index:2.8 !important;
  left:-20vw !important;
  top:-8vh !important;
  width:140vw !important;
  height:116vh !important;
  pointer-events:none !important;
  background:var(--asset-venues-clean-distant,none) center center / cover no-repeat !important;
  transform:translate3d(var(--venues-distant-x,0vw),18vh,0) scale(1.015) !important;
  transform-origin:50% 50% !important;
  opacity:.88 !important;
  filter:saturate(.94) brightness(.91) blur(1.1px) !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0 38%,rgba(0,0,0,.12) 47%,rgba(0,0,0,.72) 61%,#000 74% 100%) !important;
  mask-image:linear-gradient(to bottom,transparent 0 38%,rgba(0,0,0,.12) 47%,rgba(0,0,0,.72) 61%,#000 74% 100%) !important;
  will-change:transform !important;
}

/* Feather the very bottom of the primary cutout into its matching underlay.
   The artwork itself is unchanged; this only removes the visible hard alpha
   boundary when foreground venue sets are between positions. */
#adventures .worlds-venues-continuation .venues-distant {
  -webkit-mask-image:linear-gradient(to bottom,#000 0 64%,rgba(0,0,0,.98) 72%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.34) 94%,transparent 100%) !important;
  mask-image:linear-gradient(to bottom,#000 0 64%,rgba(0,0,0,.98) 72%,rgba(0,0,0,.82) 82%,rgba(0,0,0,.34) 94%,transparent 100%) !important;
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venues-distant-underlay {
    left:-28vw !important;
    top:-6vh !important;
    width:156vw !important;
    height:112vh !important;
    transform:translate3d(var(--venues-distant-x,0vw),16vh,0) scale(1.02) !important;
  }
}


/* v175 — exact edge extrusion for the persistent valley -----------------
   The v174 shifted underlay is removed. This skirt is generated from the
   lower pixels of venue-clean-distant.webp itself, so it cannot introduce
   a second valley. It shares the exact transform of the distant cutout. */
#adventures .worlds-venues-continuation .venues-distant-underlay {
  display:none !important;
}
#adventures .worlds-venues-continuation .venues-distant-skirt {
  position:absolute !important;
  z-index:2.9 !important;
  left:-20vw !important;
  top:-8vh !important;
  width:140vw !important;
  height:116vh !important;
  pointer-events:none !important;
  background:var(--asset-venues-distant-skirt,none) center center / cover no-repeat !important;
  transform:translate3d(var(--venues-distant-x,0vw),0,0) !important;
  transform-origin:50% 50% !important;
  opacity:1 !important;
  filter:saturate(.98) brightness(.98) !important;
  will-change:transform !important;
}
/* Do not re-mask the original cutout: its native alpha edge now lands over
   the matching extrusion and remains visually continuous. */
#adventures .worlds-venues-continuation .venues-distant {
  -webkit-mask-image:none !important;
  mask-image:none !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venues-distant-skirt {
    left:-20vw !important;
    top:-8vh !important;
    width:140vw !important;
    height:116vh !important;
  }
}


/* v176 — cover the visible alpha boundary from ABOVE -------------------
   The new countryside band is deliberately not a replacement background.
   It is a narrow bridge placed above the finite distant cutout and below
   every venue set, following the same alternating horizontal parallax. */
#adventures .worlds-venues-continuation .venues-distant-skirt,
#adventures .worlds-venues-continuation .venues-distant-underlay {
  display:none !important;
}
#adventures .worlds-venues-continuation .venues-distant-transition-cover {
  position:absolute !important;
  z-index:4 !important;
  left:-20vw !important;
  top:30vh !important;
  width:140vw !important;
  height:68vh !important;
  pointer-events:none !important;
  background:var(--asset-venues-distant-transition-cover,none) center 52% / 108% auto no-repeat !important;
  transform:translate3d(var(--venues-distant-x,0vw),0,0) !important;
  transform-origin:50% 50% !important;
  opacity:1 !important;
  filter:saturate(.98) brightness(.99) !important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.25) 8%,rgba(0,0,0,.88) 18%,#000 28%,#000 80%,rgba(0,0,0,.72) 90%,transparent 100%) !important;
  mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.25) 8%,rgba(0,0,0,.88) 18%,#000 28%,#000 80%,rgba(0,0,0,.72) 90%,transparent 100%) !important;
  will-change:transform !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venues-distant-transition-cover {
    left:-28vw !important;
    top:29vh !important;
    width:156vw !important;
    height:68vh !important;
    background-size:118% auto !important;
  }
}

/* v183 — laboratory uses the SAME venue-stage system as zoo and fort ----
   Persistent countryside stays underneath. The lab is transparent scenery
   on the standard 118vw x 94vh stage layer, rising from below, settling,
   drifting left, then dropping out. No replacement background or special
   full-screen lab composition. */
.journey-chapter { height:3925vh !important; }
#adventures .worlds-venues-continuation .venue-stage-lab {
  z-index:11 !important;
  inset:0 !important;
  overflow:visible !important;
  opacity:var(--venue-lab-o,0) !important;
  background:none !important;
  transform:none !important;
  pointer-events:none !important;
}
#adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-rear {
  display:block !important;
  z-index:1 !important;
  left:-9vw !important;
  right:auto !important;
  top:auto !important;
  bottom:-3vh !important;
  width:118vw !important;
  height:94vh !important;
  background-image:var(--asset-lab-rear,none) !important;
  background-position:center bottom !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  transform-origin:50% 100% !important;
  transform:translate3d(var(--venue-lab-rear-x,0vw),var(--venue-lab-rear-y,80vh),0) !important;
  will-change:transform,opacity !important;
  filter:none !important;
}
#adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-front {
  display:none !important;
  background:none !important;
}
#adventures .worlds-venues-continuation .venue-example-lab {
  opacity:var(--venue-example-lab-o,0) !important;
  visibility:visible !important;
  transform:translate3d(var(--venue-example-lab-x,0px),0,0) !important;
}
@media (max-width:760px) {
  .journey-chapter { height:3905vh !important; }
  #adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-rear {
    left:-27vw !important;
    width:154vw !important;
    height:90vh !important;
    bottom:-2vh !important;
  }
}


/* v184 — lab now uses the exact same two-plane venue mechanics as zoo/fort.
   Both assets are 1916×821 transparent WebPs, matching the existing venue
   asset canvas. Rear and foreground rise separately, settle, parallax left,
   and drop while the persistent countryside remains underneath. */
#adventures .worlds-venues-continuation .venue-stage-lab {
  z-index:13 !important;
  inset:0 !important;
  overflow:visible !important;
  opacity:var(--venue-lab-o,0) !important;
  background:none !important;
  transform:none !important;
  pointer-events:none !important;
}
#adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-rear,
#adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-front {
  display:block !important;
  position:absolute !important;
  left:-9vw !important;
  right:auto !important;
  top:auto !important;
  bottom:-3vh !important;
  width:118vw !important;
  height:94vh !important;
  background-position:center bottom !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  transform-origin:50% 100% !important;
  will-change:transform,opacity !important;
  filter:none !important;
}
#adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-rear {
  z-index:1 !important;
  background-image:var(--asset-lab-rear,none) !important;
  transform:translate3d(var(--venue-lab-rear-x,0vw),var(--venue-lab-rear-y,80vh),0) !important;
}
#adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-front {
  z-index:2 !important;
  background-image:var(--asset-lab-front,none) !important;
  transform:translate3d(var(--venue-lab-front-x,0vw),var(--venue-lab-front-y,90vh),0) !important;
}
#adventures .worlds-venues-continuation .venue-example-lab {
  opacity:var(--venue-example-lab-o,0) !important;
  visibility:visible !important;
  transform:translate3d(var(--venue-example-lab-x,0px),0,0) !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-rear,
  #adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-front {
    left:-27vw !important;
    width:154vw !important;
    height:90vh !important;
    bottom:-2vh !important;
  }
}

/* v185 — lower laboratory foreground -----------------------------------
   Replace only the lab foreground plane with the approved lower composition.
   Keep the same zoo/fort two-plane stage mechanics, but bias this near plane
   slightly lower so the greenhouse architecture remains clearly readable. */
#adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-front {
  bottom:-7vh !important;
  height:94vh !important;
  background-position:center bottom !important;
  background-size:contain !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-front {
    bottom:-5vh !important;
    height:88vh !important;
  }
}

/* v186 — real finale: the same countryside turns to evening -------------
   The lab clears to the existing valley. The valley recentres, the movement
   axis changes from sideways travel to a slow forward push, sunset light
   develops over the same image, and the early windmill returns as a distant
   callback before the final statement resolves. */
.finale-chapter {
  height:365vh !important;
  min-height:2750px !important;
  background:#07151d !important;
}
.finale-sticky {
  background:#0b1c20 !important;
}
.finale-art {
  opacity:1 !important;
  background:#7190a3 !important;
}

/* Exact persistent countryside plate used by the preceding venue sequence. */
.finale-sky {
  z-index:1 !important;
  left:-20vw !important;
  top:-8vh !important;
  width:140vw !important;
  height:116vh !important;
  right:auto !important;
  bottom:auto !important;
  background:var(--asset-venues-clean-sky,none) center center / cover no-repeat !important;
  transform:translate3d(var(--finale-sky-x,-.55vw),0,0) scale(var(--finale-sky-scale,1)) !important;
  transform-origin:50% 52% !important;
  filter:saturate(.96) contrast(1.015) !important;
  will-change:transform !important;
}

/* The old polygon landscape placeholders are retired. The mid slot is now
   the genuine left-side woodland canopy from the same countryside artwork. */
.finale-distant {
  display:none !important;
}
.finale-mid {
  display:block !important;
  z-index:6 !important;
  left:-20vw !important;
  top:-8vh !important;
  width:140vw !important;
  height:116vh !important;
  right:auto !important;
  bottom:auto !important;
  clip-path:none !important;
  background:var(--asset-venues-clean-canopy,none) center center / cover no-repeat !important;
  transform:translate3d(var(--finale-canopy-x,-1.6vw),0,0) scale(var(--finale-canopy-scale,1)) !important;
  transform-origin:33% 46% !important;
  opacity:.72 !important;
  filter:brightness(.78) saturate(.86) !important;
  will-change:transform !important;
}

/* The real meadow/path layer is kept low so it frames rather than obscures. */
.finale-front {
  display:block !important;
  z-index:7 !important;
  left:-20vw !important;
  top:-8vh !important;
  width:140vw !important;
  height:116vh !important;
  right:auto !important;
  bottom:auto !important;
  clip-path:none !important;
  opacity:var(--finale-front-o,0) !important;
  background:var(--asset-venues-clean-foreground,none) center center / cover no-repeat !important;
  transform:translate3d(var(--finale-front-x,0vw),var(--finale-front-y,11.5vh),0) scale(var(--finale-front-scale,1)) !important;
  transform-origin:50% 76% !important;
  filter:brightness(.74) saturate(.82) !important;
  will-change:transform,opacity !important;
}
.finale-grass {
  display:block !important;
  z-index:8 !important;
  inset:auto 0 0 0 !important;
  width:100% !important;
  height:24vh !important;
  min-height:150px !important;
  transform:none !important;
  opacity:.74 !important;
  clip-path:none !important;
  background:linear-gradient(180deg,transparent 0%,rgba(9,27,20,.12) 22%,rgba(6,21,16,.60) 100%) !important;
  pointer-events:none !important;
}

/* Low sun on the already-bright side of the valley so the lighting remains
   believable rather than suddenly jumping to the opposite side. */
.finale-sun {
  z-index:4 !important;
  left:18% !important;
  top:39% !important;
  width:clamp(54px,5.9vw,104px) !important;
  opacity:var(--finale-sun-o,0) !important;
  transform:translate3d(-50%,var(--finale-sun-y,1vh),0) !important;
  background:#ffd58a !important;
  box-shadow:0 0 34px rgba(255,215,142,.62),0 0 105px rgba(250,165,83,.36),0 0 190px rgba(244,135,60,.15) !important;
  mix-blend-mode:screen !important;
}

/* Warm and dusk grading occur over the same art, rather than swapping image. */
.finale-sunset-grade,
.finale-dusk-grade,
.finale-fireflies {
  position:absolute;
  inset:0;
  pointer-events:none;
}
.finale-sunset-grade {
  z-index:5;
  opacity:var(--finale-warm-o,0);
  background:
    radial-gradient(ellipse at 15% 47%,rgba(255,173,76,.56),transparent 34%),
    linear-gradient(180deg,rgba(255,174,104,.05),rgba(219,126,72,.20) 58%,rgba(122,75,51,.14));
  mix-blend-mode:soft-light;
}
.finale-dusk-grade {
  z-index:10;
  opacity:var(--finale-dusk-o,0);
  background:
    linear-gradient(180deg,rgba(30,48,70,.32),rgba(73,57,64,.16) 46%,rgba(25,34,28,.31) 100%),
    radial-gradient(ellipse at 50% 74%,transparent 22%,rgba(15,25,25,.16) 70%,rgba(5,15,18,.31));
  mix-blend-mode:multiply;
}
.finale-haze {
  z-index:9 !important;
  opacity:var(--finale-haze-o,.16) !important;
  background:
    radial-gradient(ellipse at 18% 47%,rgba(255,219,155,.38),transparent 26%),
    linear-gradient(180deg,transparent 0 43%,rgba(247,205,148,.14) 52%,rgba(208,168,123,.10) 65%,transparent 78%) !important;
  filter:blur(3px) !important;
  mix-blend-mode:screen !important;
}

/* Real windmill callback from the opening field scene. */
.finale-windmill {
  z-index:6 !important;
  left:29% !important;
  top:47% !important;
  width:clamp(48px,5.2vw,92px) !important;
  height:clamp(92px,10.2vw,176px) !important;
  opacity:var(--finale-windmill-o,0) !important;
  transform:translate3d(var(--finale-windmill-x,0vw),0,0) scale(var(--finale-windmill-scale,.60)) !important;
  transform-origin:50% 100% !important;
  filter:brightness(.55) saturate(.68) drop-shadow(0 8px 10px rgba(16,20,16,.15)) !important;
}
.finale-windmill-body {
  inset:0 !important;
  clip-path:none !important;
  background:var(--asset-finale-windmill-body,none) center bottom / contain no-repeat !important;
}
.finale-windmill-cap {
  display:none !important;
}
.finale-windmill-sails {
  left:48% !important;
  top:22% !important;
  width:137% !important;
  aspect-ratio:1 !important;
  background:var(--asset-finale-windmill-sails,none) center center / contain no-repeat !important;
  transform:translate(-50%,-50%) rotate(var(--finale-windmill-r,-8deg)) !important;
}
.finale-windmill-sails .finale-sail {
  display:none !important;
}

/* A few late-evening points of light appear only once the message has landed. */
.finale-fireflies {
  z-index:14;
  opacity:var(--finale-fireflies-o,0);
  overflow:hidden;
}
.finale-fireflies span {
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(255,226,143,.96);
  box-shadow:0 0 6px 2px rgba(255,213,111,.60),0 0 13px rgba(255,185,76,.32);
  animation:raedelFinaleFirefly 3.8s ease-in-out infinite;
}
.finale-fireflies span:nth-child(1){left:12%;top:70%;animation-delay:-.4s}
.finale-fireflies span:nth-child(2){left:20%;top:61%;animation-delay:-2.1s}
.finale-fireflies span:nth-child(3){left:31%;top:74%;animation-delay:-1.2s}
.finale-fireflies span:nth-child(4){left:40%;top:66%;animation-delay:-3.0s}
.finale-fireflies span:nth-child(5){left:53%;top:72%;animation-delay:-.9s}
.finale-fireflies span:nth-child(6){left:62%;top:63%;animation-delay:-2.6s}
.finale-fireflies span:nth-child(7){left:71%;top:75%;animation-delay:-1.8s}
.finale-fireflies span:nth-child(8){left:82%;top:67%;animation-delay:-3.4s}
.finale-fireflies span:nth-child(9){left:91%;top:73%;animation-delay:-.2s}
.finale-fireflies span:nth-child(10){left:47%;top:81%;animation-delay:-2.8s}
.finale-fireflies span:nth-child(11){left:76%;top:84%;animation-delay:-1.4s}
.finale-fireflies span:nth-child(12){left:27%;top:83%;animation-delay:-3.3s}
@keyframes raedelFinaleFirefly {
  0%,100%{opacity:.16;transform:translate3d(0,4px,0) scale(.7)}
  45%{opacity:1;transform:translate3d(8px,-8px,0) scale(1.15)}
  70%{opacity:.44;transform:translate3d(-4px,-13px,0) scale(.8)}
}

.finale-vignette {
  z-index:15 !important;
  background:
    linear-gradient(180deg,rgba(4,13,17,.16),transparent 22%,transparent 63%,rgba(4,13,13,.43)),
    radial-gradient(ellipse at center,transparent 43%,rgba(4,11,13,.16) 73%,rgba(2,8,10,.55) 100%) !important;
}
.finale-end-fade {
  z-index:30 !important;
  background:#06171b !important;
}

/* Finale message: intentionally narrower and calmer than the placeholder. */
.finale-copy {
  z-index:22 !important;
  top:48.5% !important;
  width:min(940px,82vw) !important;
  padding:3vh 3vw !important;
  text-shadow:0 3px 28px rgba(8,16,16,.60) !important;
}
.finale-copy::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:-8% -5%;
  background:radial-gradient(ellipse at center,rgba(8,22,20,.34),rgba(8,22,20,.10) 50%,transparent 72%);
  filter:blur(10px);
}
.finale-copy h2 {
  max-width:900px !important;
  margin:.62rem auto 1.25rem !important;
  font-size:clamp(3rem,5.35vw,6.45rem) !important;
  line-height:.88 !important;
  letter-spacing:-.052em !important;
}
.finale-copy p {
  max-width:720px !important;
  margin-bottom:1.7rem !important;
}
.finale-cta-button {
  border-color:rgba(244,199,105,.62) !important;
  background:rgba(8,21,18,.22) !important;
  backdrop-filter:blur(7px);
}
.finale-horizon-label {
  z-index:23 !important;
  color:rgba(255,229,180,.66) !important;
}

@media (max-width:760px) {
  .finale-chapter { height:340vh !important; min-height:2450px !important; }
  .finale-sky,
  .finale-mid,
  .finale-front {
    left:-42vw !important;
    top:-5vh !important;
    width:184vw !important;
    height:110vh !important;
  }
  .finale-front { transform:translate3d(var(--finale-front-x,0vw),var(--finale-front-y,12vh),0) scale(var(--finale-front-scale,1)) !important; }
  .finale-windmill { left:20% !important; top:50% !important; }
  .finale-sun { left:15% !important; top:40% !important; }
  .finale-copy { width:91vw !important; padding:2vh 2vw !important; top:47% !important; }
  .finale-copy h2 { font-size:clamp(2.4rem,10.4vw,4.3rem) !important; line-height:.91 !important; }
  .finale-copy p { font-size:.96rem !important; line-height:1.58 !important; }
}

/* v187 — approved cinematic sunset finale ------------------------------
   The finale begins on the persistent venue countryside, then crossfades into
   the approved golden-hour end shot. The live site header and live HTML copy
   remain above it; the artwork itself contains no baked-in interface. */
.finale-approved-scene {
  position:absolute;
  z-index:3;
  inset:-4vh -4vw;
  pointer-events:none;
  opacity:var(--finale-approved-o,0);
  background:var(--asset-finale-approved-sunset,none) center center / cover no-repeat;
  transform:translate3d(0,var(--finale-approved-y,0vh),0) scale(var(--finale-approved-scale,1));
  transform-origin:50% 56%;
  will-change:opacity,transform;
}

/* The original countryside exists only for the handoff from the lab. */
.finale-sky,
.finale-mid,
.finale-front,
.finale-grass,
.finale-haze,
.finale-sunset-grade {
  opacity:calc(var(--finale-base-o,1) * var(--finale-arrive-o,1)) !important;
}
.finale-dusk-grade {
  opacity:calc(var(--finale-dusk-o,0) * var(--finale-approved-o,0)) !important;
  background:
    linear-gradient(180deg,rgba(19,28,45,.10),transparent 34%,rgba(27,22,22,.14) 78%,rgba(8,13,14,.30) 100%),
    radial-gradient(ellipse at 52% 70%,transparent 35%,rgba(6,10,11,.10) 75%,rgba(3,8,10,.22));
}

/* The approved plate already contains its sun and windmill; the separate
   transition callbacks vanish as the plate reaches full opacity. */
.finale-approved-scene + .finale-sun { }

.finale-vignette {
  background:
    linear-gradient(180deg,rgba(3,9,13,.16),transparent 20%,transparent 66%,rgba(4,8,9,.36)),
    radial-gradient(ellipse at center,transparent 50%,rgba(3,8,10,.10) 77%,rgba(2,6,8,.43) 100%) !important;
}

/* Match the approved end-frame composition: large but not overwhelming. */
.finale-copy {
  top:47.5% !important;
  width:min(860px,76vw) !important;
  padding:2.4vh 2.6vw !important;
}
.finale-copy::before {
  inset:-10% -7% !important;
  background:radial-gradient(ellipse at center,rgba(7,12,12,.27),rgba(7,12,12,.08) 54%,transparent 76%) !important;
}
.finale-copy h2 {
  max-width:820px !important;
  font-size:clamp(2.9rem,4.55vw,5.7rem) !important;
  line-height:.91 !important;
  letter-spacing:-.045em !important;
}
.finale-copy p {
  max-width:760px !important;
  font-size:clamp(1rem,1.18vw,1.28rem) !important;
  line-height:1.55 !important;
}
/* Keep the end frame clean like the approved composition. */
.finale-cta-button { display:none !important; }
.finale-horizon-label { color:rgba(255,219,145,.82) !important; }

@media (max-width:760px) {
  .finale-approved-scene {
    inset:-3vh -32vw;
    background-position:51% center;
  }
  .finale-copy {
    width:92vw !important;
    top:46.5% !important;
  }
  .finale-copy h2 {
    font-size:clamp(2.35rem,10.0vw,4.1rem) !important;
    line-height:.93 !important;
  }
}

/* v188 — direct lab-to-finale handoff -----------------------------------
   Remove the spare pinned-valley run after the lab and make the sunset take
   over immediately inside the finale sticky viewport. This collapses the
   previous sequence of repeated countryside screens into one continuous
   transition: lab clears -> valley recentres -> sunset -> final message. */
.journey-chapter { height:3805vh !important; }
.finale-chapter {
  height:300vh !important;
  min-height:2200px !important;
}
/* Keep the approved sunset ready underneath from the first finale frame;
   chapter8.js performs the quick crossfade rather than waiting a viewport. */
.finale-approved-scene {
  inset:-5vh -5vw !important;
  transform-origin:50% 58% !important;
}
@media (max-width:760px) {
  .journey-chapter { height:3785vh !important; }
  .finale-chapter { height:285vh !important; min-height:2050px !important; }
}


/* v189 — finale is part of the existing pinned venue stage ----------------
   No separate chapter or alternate transition valley. The approved sunset
   dissolves directly over the current countryside in the same viewport. */
.journey-chapter { height:4090vh !important; }
.finale-chapter { display:none !important; }
#adventures .worlds-venues-continuation .venue-embedded-finale {
  position:absolute;
  z-index:40;
  inset:0;
  pointer-events:none;
  opacity:var(--venue-finale-o,0);
  overflow:hidden;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset {
  position:absolute;
  z-index:1;
  inset:-5vh -5vw;
  background:var(--asset-finale-approved-sunset,none) center center / cover no-repeat;
  transform:translate3d(0,var(--venue-finale-y,0vh),0) scale(var(--venue-finale-scale,1));
  transform-origin:50% 58%;
  will-change:transform,opacity;
}
#adventures .worlds-venues-continuation .venue-embedded-dusk {
  position:absolute;
  z-index:2;
  inset:0;
  opacity:var(--venue-finale-dusk-o,.08);
  background:
    linear-gradient(180deg,rgba(13,20,30,.08),transparent 36%,rgba(21,17,16,.11) 76%,rgba(5,10,11,.28) 100%),
    radial-gradient(ellipse at 52% 70%,transparent 38%,rgba(4,8,9,.08) 76%,rgba(2,6,8,.21));
}
#adventures .worlds-venues-continuation .venue-embedded-finale::after {
  content:'';
  position:absolute;
  z-index:3;
  inset:0;
  background:
    linear-gradient(180deg,rgba(3,9,13,.14),transparent 19%,transparent 66%,rgba(4,8,9,.34)),
    radial-gradient(ellipse at center,transparent 50%,rgba(3,8,10,.10) 77%,rgba(2,6,8,.40) 100%);
}
#adventures .worlds-venues-continuation .venue-embedded-finale-copy {
  position:absolute;
  z-index:6;
  left:50%;
  top:47.5%;
  width:min(860px,76vw);
  transform:translate3d(-50%,calc(-50% + var(--venue-finale-copy-y,20px)),0);
  opacity:var(--venue-finale-copy-o,0);
  text-align:center;
  color:#fff;
  text-shadow:0 3px 28px rgba(8,16,16,.62);
}
#adventures .worlds-venues-continuation .venue-embedded-finale-copy::before {
  content:'';
  position:absolute;
  z-index:-1;
  inset:-10% -7%;
  background:radial-gradient(ellipse at center,rgba(7,12,12,.27),rgba(7,12,12,.08) 54%,transparent 76%);
  filter:blur(10px);
}
#adventures .worlds-venues-continuation .venue-embedded-finale-copy .eyebrow {
  color:#f2c66d;
}
#adventures .worlds-venues-continuation .venue-embedded-finale-copy h2 {
  max-width:820px;
  margin:.62rem auto 1.25rem;
  font-family:var(--font-display);
  font-size:clamp(2.9rem,4.55vw,5.7rem);
  font-weight:700;
  line-height:.91;
  letter-spacing:-.045em;
  text-transform:uppercase;
}
#adventures .worlds-venues-continuation .venue-embedded-finale-copy p {
  max-width:760px;
  margin:0 auto;
  font-size:clamp(1rem,1.18vw,1.28rem);
  line-height:1.55;
}
#adventures .worlds-venues-continuation .venue-embedded-finale-label {
  position:absolute;
  z-index:7;
  left:50%;
  bottom:calc(var(--ui-rail-bottom, 24px) + 42px);
  transform:translateX(-50%);
  opacity:var(--venue-finale-label-o,0);
  color:rgba(255,219,145,.82);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  white-space:nowrap;
}
#adventures .worlds-venues-continuation .venue-embedded-fireflies {
  position:absolute;
  z-index:5;
  inset:0;
  opacity:var(--venue-finale-fireflies-o,0);
  overflow:hidden;
}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span {
  position:absolute;
  width:3px; height:3px; border-radius:50%;
  background:rgba(255,226,143,.96);
  box-shadow:0 0 6px 2px rgba(255,213,111,.60),0 0 13px rgba(255,185,76,.32);
  animation:raedelFinaleFirefly 3.8s ease-in-out infinite;
}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(1){left:12%;top:70%;animation-delay:-.4s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(2){left:20%;top:61%;animation-delay:-2.1s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(3){left:31%;top:74%;animation-delay:-1.2s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(4){left:40%;top:66%;animation-delay:-3.0s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(5){left:53%;top:72%;animation-delay:-.9s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(6){left:62%;top:63%;animation-delay:-2.6s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(7){left:71%;top:75%;animation-delay:-1.8s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(8){left:82%;top:67%;animation-delay:-3.4s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(9){left:91%;top:73%;animation-delay:-.2s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(10){left:47%;top:81%;animation-delay:-2.8s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(11){left:76%;top:84%;animation-delay:-1.4s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(12){left:27%;top:83%;animation-delay:-3.3s}
@media (max-width:760px) {
  .journey-chapter { height:4060vh !important; }
  #adventures .worlds-venues-continuation .venue-embedded-sunset {
    inset:-3vh -32vw;
    background-position:51% center;
  }
  #adventures .worlds-venues-continuation .venue-embedded-finale-copy {
    width:92vw;
    top:46.5%;
  }
  #adventures .worlds-venues-continuation .venue-embedded-finale-copy h2 {
    font-size:clamp(2.35rem,10vw,4.1rem);
    line-height:.93;
  }
}

/* v190 — layered finale, no whole-picture zoom --------------------------
   The approved sunset plate remains fixed. The windmill tower stays baked
   into that plate for exact visual continuity, but its static sails have been
   removed from the source image and replaced by this independently rotating
   transparent sail layer. */
#adventures .worlds-venues-continuation .venue-embedded-sunset {
  inset:0 !important;
  transform:none !important;
  background-size:cover !important;
  background-position:center center !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
  position:absolute;
  z-index:2;
  left:21.0%;
  top:36.9%;
  width:5.45%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  transform-origin:50% 50%;
  background:var(--asset-finale-windmill-sails,none) center / contain no-repeat;
  filter:brightness(.48) saturate(.58) sepia(.18) contrast(1.08)
         drop-shadow(0 1px 2px rgba(37,20,11,.24));
  animation:raedelFinaleWindmillSpin 17s linear infinite;
  will-change:transform;
  pointer-events:none;
}
@keyframes raedelFinaleWindmillSpin {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to   { transform:translate(-50%,-50%) rotate(360deg); }
}
@media (max-width:760px) {
  /* The plate remains overscanned horizontally on mobile; compensate the
     windmill sails so they stay registered to the tower in the artwork. */
  #adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
    left:28.8%;
    top:36.9%;
    width:7.1%;
  }
}
@media (prefers-reduced-motion:reduce) {
  #adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
    animation-duration:42s;
  }
}

/* v191 — real finale depth movement -------------------------------------
   Split the approved sunset into three feathered planes made from the exact
   same approved artwork. At rest they reconstruct the approved frame; during
   the finale the mid and foreground planes advance independently while the
   distant sky/hills/windmill tower stay nearly locked. */
#adventures .worlds-venues-continuation .venue-embedded-sunset {
  inset:0 !important;
  background:none !important;
  transform:none !important;
  overflow:hidden !important;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-layer {
  position:absolute;
  inset:-1.5vh -1.5vw;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  will-change:transform;
  backface-visibility:hidden;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-distant {
  z-index:1;
  background-image:var(--asset-finale-approved-distant,none);
  transform:translate3d(0,0,0) scale(1.004);
  transform-origin:50% 58%;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-mid {
  z-index:2;
  background-image:var(--asset-finale-approved-mid,none);
  transform:translate3d(var(--venue-finale-mid-x,0vw),var(--venue-finale-mid-y,0vh),0)
            scale(var(--venue-finale-mid-scale,1));
  transform-origin:50% 70%;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-front {
  z-index:3;
  background-image:var(--asset-finale-approved-front,none);
  transform:translate3d(var(--venue-finale-front-x,0vw),var(--venue-finale-front-y,0vh),0)
            scale(var(--venue-finale-front-scale,1));
  transform-origin:50% 88%;
}
/* Keep the rotor above every sunset depth plane while the tower itself stays
   part of the distant approved artwork. */
#adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
  z-index:4 !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-sunset-layer {
    inset:-2vh -20vw;
    background-position:51% center;
  }
}
@media (prefers-reduced-motion:reduce) {
  #adventures .worlds-venues-continuation .venue-embedded-sunset-mid,
  #adventures .worlds-venues-continuation .venue-embedded-sunset-front {
    transform:none !important;
  }
}

/* v192 — same countryside, transformed into evening --------------------
   The final windmill scene no longer swaps to a separate landscape image.
   It keeps the exact persistent valley already behind the lab and changes
   only lighting/colour. Windmill and left tree are independent layers. */
#adventures .worlds-venues-continuation .venue-embedded-finale {
  background:none !important;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset {
  position:absolute !important;
  z-index:1 !important;
  inset:0 !important;
  background:none !important;
  transform:none !important;
  overflow:hidden !important;
  opacity:1 !important;
  pointer-events:none !important;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-layer {
  display:none !important;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-warm,
#adventures .worlds-venues-continuation .venue-embedded-sunset-horizon,
#adventures .worlds-venues-continuation .venue-embedded-sunset-sun {
  position:absolute;
  inset:0;
  pointer-events:none;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-warm {
  z-index:1;
  opacity:var(--venue-finale-grade-o,0);
  background:
    linear-gradient(180deg,rgba(39,25,34,.28) 0%,rgba(183,91,36,.18) 34%,rgba(239,151,58,.26) 58%,rgba(118,57,23,.20) 100%);
  mix-blend-mode:color;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-horizon {
  z-index:2;
  opacity:var(--venue-finale-grade-o,0);
  background:
    radial-gradient(ellipse at 18% 47%,rgba(255,194,88,.52) 0%,rgba(255,151,45,.22) 20%,transparent 48%),
    linear-gradient(180deg,rgba(16,24,39,.10),transparent 32%,rgba(245,145,57,.16) 54%,rgba(31,20,18,.18) 100%);
  mix-blend-mode:screen;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-sun {
  z-index:3;
  opacity:var(--venue-finale-sun-o,0);
  background:
    radial-gradient(circle at 18% 43%,rgba(255,248,210,.98) 0 1.25%,rgba(255,205,106,.80) 1.5%,rgba(255,157,50,.26) 6%,transparent 13%);
  filter:blur(.15px);
}

/* Animate the EXISTING persistent countryside, rather than a sunset plate. */
#adventures .worlds-venues-continuation .venues-sky {
  transform:translate3d(var(--venues-sky-x,0vw),0,0) scale(var(--venue-finale-sky-scale,1)) !important;
  transform-origin:50% 62% !important;
}
#adventures .worlds-venues-continuation .venues-distant {
  transform:translate3d(var(--venues-distant-x,0vw),var(--venue-finale-distant-y,0vh),0) scale(var(--venue-finale-distant-scale,1)) !important;
  transform-origin:50% 72% !important;
}
#adventures .worlds-venues-continuation .venues-distant-transition-cover {
  transform:translate3d(var(--venues-distant-x,0vw),var(--venue-finale-cover-y,0vh),0) scale(var(--venue-finale-cover-scale,1)) !important;
  transform-origin:50% 84% !important;
}

/* Independent windmill callback. */
#adventures .worlds-venues-continuation .venue-embedded-windmill {
  position:absolute;
  z-index:4;
  left:19.2%;
  top:44.5%;
  width:8.2vw;
  min-width:104px;
  max-width:158px;
  aspect-ratio:1122/1402;
  opacity:var(--venue-finale-windmill-o,0);
  transform:translate3d(-50%,calc(-50% + var(--venue-finale-windmill-y,0vh)),0);
  transform-origin:50% 100%;
  pointer-events:none;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-body {
  position:absolute;
  inset:0;
  background:var(--asset-finale-windmill-body,none) center bottom / contain no-repeat;
  filter:brightness(.62) saturate(.78) sepia(.18) drop-shadow(0 6px 12px rgba(32,20,12,.24));
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
  position:absolute !important;
  z-index:2 !important;
  left:50% !important;
  top:14.1% !important;
  width:148% !important;
  aspect-ratio:1 !important;
  background:var(--asset-finale-windmill-sails,none) center / contain no-repeat !important;
  filter:brightness(.58) saturate(.72) sepia(.16) drop-shadow(0 2px 3px rgba(35,20,11,.24)) !important;
  transform-origin:50% 50% !important;
  animation:raedelFinaleWindmillSpin 17s linear infinite !important;
}

/* Near tree/foliage frame slides in from the left as its own parallax plane. */
#adventures .worlds-venues-continuation .venue-embedded-left-tree {
  position:absolute;
  z-index:5;
  left:-3.5vw;
  top:-6vh;
  width:37vw;
  min-width:440px;
  height:112vh;
  opacity:var(--venue-finale-tree-o,0);
  background:var(--asset-finale-left-tree,none) left center / contain no-repeat;
  transform:translate3d(var(--venue-finale-tree-x,-38vw),0,0) scale(var(--venue-finale-tree-scale,1));
  transform-origin:0 58%;
  filter:brightness(.76) saturate(.92) drop-shadow(12px 0 28px rgba(10,12,10,.24));
  pointer-events:none;
  will-change:transform,opacity;
}

/* Keep the finale text above the incoming tree. */
#adventures .worlds-venues-continuation .venue-embedded-finale-copy { z-index:8 !important; }
#adventures .worlds-venues-continuation .venue-embedded-finale-label { z-index:9 !important; }
#adventures .worlds-venues-continuation .venue-embedded-fireflies { z-index:7 !important; }
#adventures .worlds-venues-continuation .venue-embedded-dusk { z-index:6 !important; }

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-windmill {
    left:20%;
    top:49%;
    width:15vw;
    min-width:80px;
  }
  #adventures .worlds-venues-continuation .venue-embedded-left-tree {
    left:-16vw;
    top:-4vh;
    width:72vw;
    min-width:0;
    height:108vh;
  }
}

/* v193 — finale keeps the scene's mid + foreground depth -----------------
   “Background” means the rear layers only. The existing transition-cover is
   still the midground; this foreground reuses the exact venue path/meadow
   layer from the countryside scene. The windmill sits behind it, so the
   tower base is occluded by real grass/ground instead of floating in space. */
#adventures .worlds-venues-continuation .venue-embedded-windmill {
  z-index:3 !important;
  left:19.2% !important;
  top:45.5% !important;
  transform:translate3d(calc(-50% + var(--venue-finale-windmill-x,0vw)),calc(-50% + var(--venue-finale-windmill-y,0vh)),0)
            scale(var(--venue-finale-windmill-scale,1)) !important;
}
#adventures .worlds-venues-continuation .venue-embedded-final-ground {
  position:absolute;
  z-index:4;
  left:-20vw;
  top:-8vh;
  width:140vw;
  height:116vh;
  pointer-events:none;
  opacity:var(--venue-finale-ground-o,0);
  background:var(--asset-venues-clean-foreground,none) center center / cover no-repeat;
  transform:translate3d(var(--venue-finale-ground-x,0vw),var(--venue-finale-ground-y,4vh),0)
            scale(var(--venue-finale-ground-scale,1));
  transform-origin:50% 88%;
  filter:brightness(.76) saturate(.88) sepia(.12) contrast(1.02);
  will-change:transform,opacity;
}
/* The existing venue-distant-transition-cover remains the actual midground;
   keep it present through the finale and let the existing v192 depth vars
   continue moving it gently. */
#adventures .worlds-venues-continuation .venues-distant-transition-cover {
  opacity:1 !important;
}
#adventures .worlds-venues-continuation .venue-embedded-left-tree {
  z-index:5 !important;
}
#adventures .worlds-venues-continuation .venue-embedded-finale::after {
  z-index:6 !important;
  pointer-events:none !important;
}
#adventures .worlds-venues-continuation .venue-embedded-dusk { z-index:7 !important; }
#adventures .worlds-venues-continuation .venue-embedded-fireflies { z-index:8 !important; }
#adventures .worlds-venues-continuation .venue-embedded-finale-copy { z-index:10 !important; }
#adventures .worlds-venues-continuation .venue-embedded-finale-label { z-index:11 !important; }

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-final-ground {
    left:-28vw;
    top:-6vh;
    width:156vw;
    height:112vh;
  }
  #adventures .worlds-venues-continuation .venue-embedded-windmill {
    left:21% !important;
    top:49% !important;
  }
}


/* v194 — finale foreground inherits the EXACT countryside path position ----
   v193 used the correct venue-clean-foreground artwork but accidentally
   reintroduced it near its source position. In the live countryside scene
   this plane has already settled 20vh lower and 3.8vw left. Keep identical
   canvas geometry and start from that exact transform so the path does not
   change when the finale begins. */
#adventures .worlds-venues-continuation .venue-embedded-final-ground {
  left:-20vw !important;
  top:-8vh !important;
  width:140vw !important;
  height:116vh !important;
  background-image:var(--asset-venues-clean-foreground,none) !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  transform:translate3d(var(--venue-finale-ground-x,-3.8vw),var(--venue-finale-ground-y,20vh),0)
            scale(var(--venue-finale-ground-scale,1)) !important;
  transform-origin:50% 88% !important;
}
/* Seat the windmill just behind the correctly lowered path/meadow plane. */
#adventures .worlds-venues-continuation .venue-embedded-windmill {
  top:49.2% !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-final-ground {
    left:-20vw !important;
    top:-8vh !important;
    width:140vw !important;
    height:116vh !important;
  }
  #adventures .worlds-venues-continuation .venue-embedded-windmill {
    top:52% !important;
  }
}


/* v195 — use the APPROVED sunset path image as the near scene plane.
   Only the nearer sunset path / meadow / wall artwork changes. The sky and
   distant mountain horizon remain the live countryside layers underneath so
   the horizon stays continuous with the previous scene. */
#adventures .worlds-venues-continuation .venue-embedded-final-ground {
  left:-8vw !important;
  top:-4vh !important;
  width:112vw !important;
  height:110vh !important;
  background-image:var(--asset-finale-path-sunset,none) !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  /* fade out the sunset artwork's sky so the existing countryside horizon
     remains visible and continuous beneath it */
  -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 17%,
      rgba(0,0,0,.18) 24%,
      rgba(0,0,0,.55) 31%,
      rgba(0,0,0,.88) 39%,
      rgba(0,0,0,1) 48%,
      rgba(0,0,0,1) 100%);
  mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 17%,
      rgba(0,0,0,.18) 24%,
      rgba(0,0,0,.55) 31%,
      rgba(0,0,0,.88) 39%,
      rgba(0,0,0,1) 48%,
      rgba(0,0,0,1) 100%);
  clip-path:inset(0 0 0 8%);
  transform:translate3d(var(--venue-finale-ground-x,0vw),var(--venue-finale-ground-y,0vh),0)
            scale(var(--venue-finale-ground-scale,1)) !important;
  transform-origin:52% 84% !important;
  filter:brightness(.96) saturate(1.03) contrast(1.02) !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill {
  left:18.7% !important;
  top:43.8% !important;
}
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-final-ground {
    left:-16vw !important;
    top:-2vh !important;
    width:128vw !important;
    height:108vh !important;
    clip-path:inset(0 0 0 7%);
  }
  #adventures .worlds-venues-continuation .venue-embedded-windmill {
    left:20.5% !important;
    top:46.5% !important;
  }
}

/* v196 — correct finale layering -----------------------------------------
   Use the approved sunset PATH image only for the near/mid parallax plane.
   The live countryside sky and distant mountains from the previous scene stay
   underneath so the horizon remains continuous. The left tree stays separate
   and slides in from the left. The windmill tower is baked into the sunset
   path plane and only the sails are animated independently. */
#adventures .worlds-venues-continuation .venue-embedded-final-ground {
  left:-2vw !important;
  top:-1vh !important;
  width:104vw !important;
  height:103vh !important;
  background-image:var(--asset-finale-path-foreground,none) !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  clip-path:none !important;
  opacity:var(--venue-finale-ground-o,0) !important;
  transform:translate3d(var(--venue-finale-ground-x,0vw),var(--venue-finale-ground-y,0vh),0)
            scale(var(--venue-finale-ground-scale,1)) !important;
  transform-origin:50% 82% !important;
  filter:brightness(.98) saturate(1.03) contrast(1.01) !important;
  will-change:transform,opacity !important;
}

/* The sunset path plane already includes the correct windmill body/hill.
   Keep only the rotor as the independent animated element. */
#adventures .worlds-venues-continuation .venue-embedded-windmill {
  z-index:6 !important;
  left:19.6% !important;
  top:36.9% !important;
  width:6.1vw !important;
  min-width:62px !important;
  max-width:96px !important;
  aspect-ratio:1 !important;
  transform:translate3d(calc(-50% + var(--venue-finale-windmill-x,0vw)),calc(-50% + var(--venue-finale-windmill-y,0vh)),0)
            scale(var(--venue-finale-windmill-scale,1)) !important;
  transform-origin:50% 50% !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-body {
  display:none !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
  left:50% !important;
  top:50% !important;
  width:100% !important;
  aspect-ratio:1 !important;
  background-size:contain !important;
  filter:brightness(.52) saturate(.62) sepia(.16) contrast(1.08)
         drop-shadow(0 1px 2px rgba(37,20,11,.24)) !important;
}

#adventures .worlds-venues-continuation .venue-embedded-left-tree {
  z-index:7 !important;
  left:-4.5vw !important;
  top:-5vh !important;
  width:39vw !important;
  min-width:440px !important;
  height:111vh !important;
  background-image:var(--asset-finale-left-tree,none) !important;
  background-position:left center !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  transform:translate3d(var(--venue-finale-tree-x,-38vw),0,0) scale(var(--venue-finale-tree-scale,1)) !important;
  transform-origin:0 56% !important;
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-final-ground {
    left:-10vw !important;
    top:-1vh !important;
    width:120vw !important;
    height:102vh !important;
    background-position:55% center !important;
  }
  #adventures .worlds-venues-continuation .venue-embedded-windmill {
    left:24.8% !important;
    top:38.2% !important;
    width:10.8vw !important;
    min-width:52px !important;
  }
  #adventures .worlds-venues-continuation .venue-embedded-left-tree {
    left:-15vw !important;
    top:-4vh !important;
    width:72vw !important;
    min-width:0 !important;
    height:108vh !important;
  }
}


/* v197 — clean path foreground + recoloured EXISTING valley --------------
   Previous sky / mountains / hills remain the scene. Only the near path,
   meadow and wall are taken from the sunset artwork. The windmill is once
   again a clean independent tower + rotating sails, with no baked glow/hill
   surround. */
#adventures .worlds-venues-continuation .venues-sky {
  filter:sepia(var(--venue-finale-bg-sepia,0))
         saturate(var(--venue-finale-bg-sat,1))
         brightness(var(--venue-finale-bg-bright,1))
         contrast(var(--venue-finale-bg-contrast,1)) !important;
}
#adventures .worlds-venues-continuation .venues-distant,
#adventures .worlds-venues-continuation .venues-distant-transition-cover {
  filter:sepia(var(--venue-finale-bg-sepia,0))
         saturate(var(--venue-finale-bg-sat,1))
         brightness(var(--venue-finale-bg-bright,1))
         contrast(var(--venue-finale-bg-contrast,1)) !important;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-warm {
  background:
    linear-gradient(180deg,rgba(65,37,31,.24) 0%,rgba(202,100,34,.24) 31%,rgba(242,142,47,.34) 57%,rgba(93,42,22,.25) 100%) !important;
  mix-blend-mode:color !important;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-horizon {
  background:
    radial-gradient(ellipse at 18% 47%,rgba(255,189,82,.42) 0%,rgba(255,139,38,.18) 22%,transparent 46%),
    linear-gradient(180deg,rgba(25,28,35,.08),transparent 34%,rgba(230,122,39,.11) 57%,rgba(27,19,17,.15) 100%) !important;
}

#adventures .worlds-venues-continuation .venue-embedded-final-ground {
  z-index:4 !important;
  left:-2vw !important;
  top:-1vh !important;
  width:104vw !important;
  height:103vh !important;
  background-image:var(--asset-finale-near-path-clean,none) !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  clip-path:none !important;
  transform:translate3d(var(--venue-finale-ground-x,0vw),var(--venue-finale-ground-y,0vh),0)
            scale(var(--venue-finale-ground-scale,1)) !important;
  transform-origin:52% 86% !important;
  filter:brightness(.91) saturate(.94) contrast(1.015) !important;
}

/* Clean independent windmill. Its base is kept low enough to sit naturally
   into the existing valley hill, while the nearest path plane remains in
   front. */
#adventures .worlds-venues-continuation .venue-embedded-windmill {
  z-index:3 !important;
  left:19.0% !important;
  top:48.4% !important;
  width:5.9vw !important;
  min-width:88px !important;
  max-width:118px !important;
  aspect-ratio:1122/1402 !important;
  transform:translate3d(calc(-50% + var(--venue-finale-windmill-x,0vw)),calc(-50% + var(--venue-finale-windmill-y,0vh)),0)
            scale(var(--venue-finale-windmill-scale,1)) !important;
  transform-origin:50% 100% !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-body {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background:var(--asset-finale-windmill-body,none) center bottom / contain no-repeat !important;
  filter:brightness(.72) saturate(.82) sepia(.16) contrast(1.02)
         drop-shadow(0 5px 9px rgba(28,18,12,.24)) !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
  display:block !important;
  z-index:2 !important;
  left:50% !important;
  top:14.1% !important;
  width:148% !important;
  aspect-ratio:1 !important;
  background:var(--asset-finale-windmill-sails,none) center / contain no-repeat !important;
  filter:brightness(.66) saturate(.76) sepia(.12) contrast(1.03)
         drop-shadow(0 1px 2px rgba(28,18,12,.20)) !important;
  transform-origin:50% 50% !important;
  animation:raedelFinaleWindmillSpin 17s linear infinite !important;
}

/* Tree is still the closest plane and arrives from the left. */
#adventures .worlds-venues-continuation .venue-embedded-left-tree {
  z-index:5 !important;
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-final-ground {
    left:-10vw !important;
    top:-1vh !important;
    width:120vw !important;
    height:102vh !important;
    background-position:55% center !important;
  }
  #adventures .worlds-venues-continuation .venue-embedded-windmill {
    left:21% !important;
    top:49.5% !important;
    width:10.5vw !important;
    min-width:68px !important;
  }
}


/* v198 — exact earlier-scene windmill geometry + descending sun ----------
   The finale now uses the same tower/sail registration as the field scene.
   It is scaled as one distant object rather than rebuilding the rotor around
   a different aspect ratio. The sun is a live layer that moves from the top
   of the sky down to the mountain ridge. */
#adventures .worlds-venues-continuation .venues-sky,
#adventures .worlds-venues-continuation .venues-distant,
#adventures .worlds-venues-continuation .venues-distant-transition-cover {
  filter:sepia(var(--venue-finale-bg-sepia,0))
         saturate(var(--venue-finale-bg-sat,1))
         brightness(var(--venue-finale-bg-bright,1))
         contrast(var(--venue-finale-bg-contrast,1))
         hue-rotate(var(--venue-finale-bg-hue,0deg)) !important;
}

#adventures .worlds-venues-continuation .venue-embedded-sunset-warm {
  background:
    linear-gradient(180deg,
      rgba(95,48,32,.30) 0%,
      rgba(201,96,34,.30) 31%,
      rgba(244,142,48,.29) 57%,
      rgba(82,37,21,.31) 100%) !important;
  mix-blend-mode:color !important;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-horizon {
  background:
    radial-gradient(ellipse at 18% var(--venue-finale-sun-glow-y,4%),
      rgba(255,183,72,.38) 0%,
      rgba(255,128,32,.18) 20%,
      transparent 49%),
    linear-gradient(180deg,rgba(31,27,31,.12),transparent 31%,rgba(220,111,36,.14) 59%,rgba(28,18,16,.19) 100%) !important;
}
#adventures .worlds-venues-continuation .venue-embedded-sunset-sun {
  background:
    radial-gradient(circle at 18% var(--venue-finale-sun-y,3%),
      rgba(255,251,220,.99) 0 1.05%,
      rgba(255,210,112,.92) 1.3%,
      rgba(255,157,50,.36) 4.2%,
      rgba(255,132,35,.12) 8.5%,
      transparent 13%) !important;
}

/* Same windmill layer geometry as the earlier field scene, scaled down as a
   whole.  The body and rotor therefore retain exactly the same registration. */
#adventures .worlds-venues-continuation .venue-embedded-windmill {
  z-index:3 !important;
  left:18.5% !important;
  top:48.0% !important;
  width:clamp(190px,18vw,305px) !important;
  height:clamp(360px,58vh,540px) !important;
  min-width:0 !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  opacity:var(--venue-finale-windmill-o,0) !important;
  transform:translate3d(calc(-50% + var(--venue-finale-windmill-x,0vw)),calc(-50% + var(--venue-finale-windmill-y,0vh)),0)
            scale(calc(.42 * var(--venue-finale-windmill-scale,1))) !important;
  transform-origin:50% 100% !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-body {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background:var(--asset-finale-windmill-body,none) center bottom / contain no-repeat !important;
  filter:brightness(.70) saturate(.80) sepia(.17) contrast(1.03)
         drop-shadow(0 6px 10px rgba(28,18,12,.24)) !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:27% !important;
  bottom:auto !important;
  width:135% !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
  background:var(--asset-finale-windmill-sails,none) center / contain no-repeat !important;
  transform-origin:50% 50% !important;
  filter:brightness(.64) saturate(.74) sepia(.12) contrast(1.03)
         drop-shadow(0 1px 2px rgba(28,18,12,.20)) !important;
  animation:raedelFinaleWindmillSpin 20s linear infinite !important;
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-windmill {
    left:20.5% !important;
    top:50% !important;
    width:clamp(160px,32vw,230px) !important;
    height:clamp(300px,52vh,440px) !important;
    transform:translate3d(calc(-50% + var(--venue-finale-windmill-x,0vw)),calc(-50% + var(--venue-finale-windmill-y,0vh)),0)
              scale(calc(.43 * var(--venue-finale-windmill-scale,1))) !important;
  }
}


/* v199 — supplied golden hill/meadow is the real windmill parallax layer ---
   The source windmill and its baked sun/glow are removed from the asset.
   This land plane sits over the recoloured original countryside, while the
   existing clean windmill body + rotating sails remain independent above it. */
#adventures .worlds-venues-continuation .venue-embedded-windmill-hill {
  position:absolute;
  z-index:3;
  inset:-1vh -2vw -2vh -2vw;
  opacity:var(--venue-finale-windmill-hill-o,0);
  background:var(--asset-finale-windmill-hill,none) center center / cover no-repeat;
  transform:translate3d(var(--venue-finale-windmill-hill-x,0vw),var(--venue-finale-windmill-hill-y,0vh),0)
            scale(var(--venue-finale-windmill-hill-scale,1));
  transform-origin:48% 76%;
  pointer-events:none;
  will-change:transform,opacity;
  filter:brightness(.94) saturate(.94) contrast(1.01);
}

/* The near path remains in front of the hill plane. */
#adventures .worlds-venues-continuation .venue-embedded-final-ground {
  z-index:4 !important;
}

/* Seat the original field-scene windmill high on the new hill crest. */
#adventures .worlds-venues-continuation .venue-embedded-windmill {
  z-index:5 !important;
  left:30.1% !important;
  top:29.6% !important;
  width:clamp(190px,18vw,305px) !important;
  height:clamp(360px,58vh,540px) !important;
  transform:translate3d(calc(-50% + var(--venue-finale-windmill-x,0vw)),calc(-50% + var(--venue-finale-windmill-y,0vh)),0)
            scale(calc(.36 * var(--venue-finale-windmill-scale,1))) !important;
  transform-origin:50% 100% !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-body {
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  background:var(--asset-finale-windmill-body,none) center bottom / contain no-repeat !important;
}
#adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
  display:block !important;
  left:50% !important;
  top:27% !important;
  width:135% !important;
  aspect-ratio:1 !important;
  background:var(--asset-finale-windmill-sails,none) center / contain no-repeat !important;
  animation:raedelFinaleWindmillSpin 20s linear infinite !important;
}

/* Tree remains the closest incoming framing plane. */
#adventures .worlds-venues-continuation .venue-embedded-left-tree { z-index:6 !important; }
#adventures .worlds-venues-continuation .venue-embedded-dusk { z-index:7 !important; }
#adventures .worlds-venues-continuation .venue-embedded-fireflies { z-index:8 !important; }
#adventures .worlds-venues-continuation .venue-embedded-finale-copy { z-index:10 !important; }

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-windmill-hill {
    inset:-1vh -18vw -2vh -18vw;
    background-position:48% center;
  }
  #adventures .worlds-venues-continuation .venue-embedded-windmill {
    left:31% !important;
    top:32% !important;
    width:clamp(160px,32vw,230px) !important;
    height:clamp(300px,52vh,440px) !important;
    transform:translate3d(calc(-50% + var(--venue-finale-windmill-x,0vw)),calc(-50% + var(--venue-finale-windmill-y,0vh)),0)
              scale(calc(.38 * var(--venue-finale-windmill-scale,1))) !important;
  }
}


/* v200 — rotor registration, brighter fireflies, autumn leaf drift --------
   Rotor is returned to the exact hub registration used by the earlier field
   scene. Fireflies are denser/brighter, and lightweight CSS leaves cross the
   finale independently of the parallax scene. */
#adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
  top:36.5% !important;
  width:136% !important;
  opacity:.96 !important;
  filter:brightness(.84) saturate(.90) sepia(.08) contrast(1.10)
         drop-shadow(0 1px 2px rgba(20,12,7,.32)) !important;
}

/* More visible fireflies: denser field, larger hot core and stronger bloom. */
#adventures .worlds-venues-continuation .venue-embedded-fireflies span {
  width:4px !important;
  height:4px !important;
  background:rgba(255,239,168,.99) !important;
  box-shadow:
    0 0 7px 3px rgba(255,226,130,.88),
    0 0 16px 6px rgba(255,197,72,.44),
    0 0 28px 8px rgba(255,174,52,.16) !important;
}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(3n) {
  width:3px !important; height:3px !important;
}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(5n) {
  width:5px !important; height:5px !important;
}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(13){left:8%;top:78%;animation-delay:-2.4s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(14){left:16%;top:68%;animation-delay:-.7s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(15){left:24%;top:76%;animation-delay:-3.6s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(16){left:36%;top:59%;animation-delay:-1.5s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(17){left:44%;top:79%;animation-delay:-2.9s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(18){left:58%;top:68%;animation-delay:-.3s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(19){left:66%;top:81%;animation-delay:-2.2s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(20){left:73%;top:60%;animation-delay:-1.0s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(21){left:86%;top:80%;animation-delay:-3.1s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(22){left:94%;top:64%;animation-delay:-1.7s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(23){left:50%;top:86%;animation-delay:-.5s}
#adventures .worlds-venues-continuation .venue-embedded-fireflies span:nth-child(24){left:33%;top:88%;animation-delay:-2.7s}

#adventures .worlds-venues-continuation .venue-embedded-autumn-leaves {
  position:absolute;
  z-index:9;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:var(--venue-finale-leaves-o,0);
}
#adventures .worlds-venues-continuation .venue-embedded-autumn-leaves span {
  --leaf-size:14px;
  --leaf-top:24%;
  --leaf-duration:10s;
  --leaf-delay:0s;
  --leaf-y1:7vh;
  --leaf-y2:-4vh;
  --leaf-y3:10vh;
  --leaf-rot:32deg;
  position:absolute;
  left:-10vw;
  top:var(--leaf-top);
  width:var(--leaf-size);
  height:calc(var(--leaf-size) * .62);
  border-radius:85% 12% 85% 18%;
  background:linear-gradient(135deg,#e59a35 0%,#b95e22 54%,#743619 100%);
  box-shadow:0 1px 2px rgba(46,24,10,.25);
  transform-origin:48% 50%;
  animation:raedelAutumnLeafRight var(--leaf-duration) linear var(--leaf-delay) infinite;
  will-change:transform;
}
#adventures .worlds-venues-continuation .venue-embedded-autumn-leaves span::after {
  content:'';
  position:absolute;
  left:47%; top:18%;
  width:1px; height:68%;
  background:rgba(91,48,20,.55);
  transform:rotate(-18deg);
  transform-origin:50% 100%;
}
@keyframes raedelAutumnLeafRight {
  0%   { transform:translate3d(-8vw,0,0) rotate(var(--leaf-rot)) scale(.74); opacity:0; }
  6%   { opacity:.92; }
  27%  { transform:translate3d(27vw,var(--leaf-y1),0) rotate(calc(var(--leaf-rot) + 210deg)) scale(1); }
  55%  { transform:translate3d(62vw,var(--leaf-y2),0) rotate(calc(var(--leaf-rot) + 510deg)) scale(.82); }
  82%  { transform:translate3d(96vw,var(--leaf-y3),0) rotate(calc(var(--leaf-rot) + 790deg)) scale(1.08); opacity:.9; }
  100% { transform:translate3d(126vw,4vh,0) rotate(calc(var(--leaf-rot) + 1040deg)) scale(.78); opacity:0; }
}
@keyframes raedelAutumnLeafLeft {
  0%   { transform:translate3d(126vw,0,0) rotate(var(--leaf-rot)) scale(.72); opacity:0; }
  8%   { opacity:.82; }
  30%  { transform:translate3d(90vw,var(--leaf-y1),0) rotate(calc(var(--leaf-rot) - 230deg)) scale(.92); }
  61%  { transform:translate3d(49vw,var(--leaf-y2),0) rotate(calc(var(--leaf-rot) - 530deg)) scale(.78); }
  84%  { transform:translate3d(18vw,var(--leaf-y3),0) rotate(calc(var(--leaf-rot) - 760deg)) scale(1.04); opacity:.78; }
  100% { transform:translate3d(-16vw,2vh,0) rotate(calc(var(--leaf-rot) - 980deg)) scale(.70); opacity:0; }
}
/* Individual timing/height/scale combinations make the flow feel irregular. */
#adventures .venue-embedded-autumn-leaves span:nth-child(1) {--leaf-top:18%;--leaf-size:11px;--leaf-duration:11.8s;--leaf-delay:-3.8s;--leaf-y1:9vh;--leaf-y2:-2vh;--leaf-y3:7vh;--leaf-rot:18deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(2) {--leaf-top:31%;--leaf-size:16px;--leaf-duration:14.4s;--leaf-delay:-9.1s;--leaf-y1:-6vh;--leaf-y2:5vh;--leaf-y3:12vh;--leaf-rot:62deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(3) {--leaf-top:12%;--leaf-size:9px;--leaf-duration:9.7s;--leaf-delay:-5.2s;--leaf-y1:5vh;--leaf-y2:13vh;--leaf-y3:3vh;--leaf-rot:-14deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(4) {--leaf-top:42%;--leaf-size:14px;--leaf-duration:12.6s;--leaf-delay:-1.4s;--leaf-y1:-7vh;--leaf-y2:-1vh;--leaf-y3:8vh;--leaf-rot:35deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(5) {--leaf-top:22%;--leaf-size:18px;--leaf-duration:16.2s;--leaf-delay:-12.0s;--leaf-y1:12vh;--leaf-y2:3vh;--leaf-y3:15vh;--leaf-rot:83deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(6) {--leaf-top:52%;--leaf-size:10px;--leaf-duration:10.9s;--leaf-delay:-6.2s;--leaf-y1:-4vh;--leaf-y2:-9vh;--leaf-y3:4vh;--leaf-rot:9deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(7) {--leaf-top:14%;--leaf-size:13px;--leaf-duration:13.5s;--leaf-delay:-7.7s;--leaf-y1:7vh;--leaf-y2:-6vh;--leaf-y3:6vh;--leaf-rot:47deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(8) {--leaf-top:38%;--leaf-size:8px;--leaf-duration:8.8s;--leaf-delay:-2.9s;--leaf-y1:3vh;--leaf-y2:9vh;--leaf-y3:-2vh;--leaf-rot:-22deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(9) {--leaf-top:26%;--leaf-size:20px;--leaf-duration:17.8s;--leaf-delay:-14.2s;--leaf-y1:-8vh;--leaf-y2:4vh;--leaf-y3:10vh;--leaf-rot:71deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(10){--leaf-top:47%;--leaf-size:12px;--leaf-duration:12.1s;--leaf-delay:-8.3s;--leaf-y1:6vh;--leaf-y2:-5vh;--leaf-y3:7vh;--leaf-rot:24deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(11){--leaf-top:16%;--leaf-size:15px;--leaf-duration:14.7s;--leaf-delay:-4.6s;--leaf-y1:10vh;--leaf-y2:1vh;--leaf-y3:13vh;--leaf-rot:91deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(12){--leaf-top:58%;--leaf-size:9px;--leaf-duration:10.4s;--leaf-delay:-7.1s;--leaf-y1:-5vh;--leaf-y2:-10vh;--leaf-y3:2vh;--leaf-rot:-6deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(13){--leaf-top:34%;--leaf-size:17px;--leaf-duration:15.5s;--leaf-delay:-10.6s;--leaf-y1:8vh;--leaf-y2:-2vh;--leaf-y3:11vh;--leaf-rot:54deg;animation-name:raedelAutumnLeafLeft}
#adventures .venue-embedded-autumn-leaves span:nth-child(14){--leaf-top:20%;--leaf-size:10px;--leaf-duration:12.8s;--leaf-delay:-2.2s;--leaf-y1:-8vh;--leaf-y2:4vh;--leaf-y3:-3vh;--leaf-rot:13deg;animation-name:raedelAutumnLeafLeft}
#adventures .venue-embedded-autumn-leaves span:nth-child(15){--leaf-top:49%;--leaf-size:13px;--leaf-duration:14.1s;--leaf-delay:-11.1s;--leaf-y1:5vh;--leaf-y2:-6vh;--leaf-y3:8vh;--leaf-rot:77deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(16){--leaf-top:28%;--leaf-size:7px;--leaf-duration:9.3s;--leaf-delay:-5.8s;--leaf-y1:-4vh;--leaf-y2:5vh;--leaf-y3:1vh;--leaf-rot:-28deg}
#adventures .venue-embedded-autumn-leaves span:nth-child(17){--leaf-top:11%;--leaf-size:16px;--leaf-duration:16.8s;--leaf-delay:-13.4s;--leaf-y1:12vh;--leaf-y2:2vh;--leaf-y3:9vh;--leaf-rot:39deg;animation-name:raedelAutumnLeafLeft}
#adventures .venue-embedded-autumn-leaves span:nth-child(18){--leaf-top:55%;--leaf-size:11px;--leaf-duration:11.4s;--leaf-delay:-8.8s;--leaf-y1:-3vh;--leaf-y2:-7vh;--leaf-y3:5vh;--leaf-rot:66deg}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-embedded-windmill-sails {
    top:36.5% !important;
    width:140% !important;
  }
  #adventures .worlds-venues-continuation .venue-embedded-autumn-leaves span {
    --leaf-size:10px;
  }
}
@media (prefers-reduced-motion:reduce) {
  #adventures .worlds-venues-continuation .venue-embedded-autumn-leaves span {
    animation-duration:28s !important;
  }
}

/* v202 — History & Mystery atmosphere polish -----------------------------
   Keep the approved moonlit ruins as the base scene. These are true extra
   depth planes: drifting mist in the middle distance, a registered ghost in
   the far archway, and a very close softly focused canopy that travels a
   little faster than the world beneath it. */
#adventures .world-history-mist-layer,
#adventures .world-history-ghost,
#adventures .world-history-near-canopy {
  position:absolute;
  pointer-events:none;
  opacity:var(--history-fx-o,0);
  will-change:transform,opacity;
}

#adventures .world-history-mist-layer {
  z-index:15;
  opacity:var(--history-mist-o,0);
  inset:-4vh -11vw -3vh -11vw;
  overflow:hidden;
  transform:translate3d(var(--history-mist-x,100vw),0,0);
  filter:blur(.3px) saturate(.82) brightness(.98);
  mix-blend-mode:screen;
}
#adventures .world-history-mist-sheet {
  position:absolute;
  inset:0;
  width:122vw;
  height:107vh;
  background:var(--asset-history-mist,none) center 56% / 100% 100% no-repeat;
  opacity:.38;
  will-change:transform,opacity;
}
#adventures .world-history-mist-sheet-a {
  animation:historyMistDriftA 12s ease-in-out infinite alternate;
}
#adventures .world-history-mist-sheet-b {
  opacity:.24;
  animation:historyMistDriftB 16s ease-in-out infinite alternate;
}
@keyframes historyMistDriftA {
  from { transform:translate3d(-4.5vw,.35vh,0) scale(1.035); }
  to   { transform:translate3d(5.5vw,-.9vh,0) scale(1.06); }
}
@keyframes historyMistDriftB {
  from { transform:translate3d(4.5vw,-.55vh,0) scaleX(-1) scale(1.04); }
  to   { transform:translate3d(-3.5vw,1vh,0) scaleX(-1) scale(1.075); }
}

#adventures .world-history-ghost {
  z-index:17;
  opacity:var(--history-ghost-o,0);
  inset:0;
  transform:translate3d(var(--history-ghost-x,100vw),0,0);
}
#adventures .world-history-ghost-image {
  position:absolute;
  left:81.95%;
  top:37.8%;
  width:clamp(72px,6.8vw,118px);
  aspect-ratio:80 / 205;
  background:var(--asset-history-ghost,none) center / contain no-repeat;
  opacity:.985;
  mix-blend-mode:screen;
  filter:brightness(1.36) contrast(1.07) drop-shadow(0 0 12px rgba(180,226,255,.86)) drop-shadow(0 0 28px rgba(111,184,238,.54));
  transform-origin:50% 100%;
  animation:historyGhostShimmer 5.8s ease-in-out infinite;
}
@keyframes historyGhostShimmer {
  0%,100% { opacity:.90; transform:translate3d(0,0,0) scale(1); }
  48%     { opacity:1; transform:translate3d(.10vw,-.30vh,0) scale(1.024); }
  62%     { opacity:.95; }
}

#adventures .world-history-near-canopy {
  /* Keep the soft foreground canopy behind the fixed History → Nature seam tree. */
  z-index:21;
  left:-8vw;
  top:-4vh;
  width:116vw;
  height:82vh;
  background:var(--asset-history-near-canopy,none) center top / 100% 100% no-repeat;
  transform:translate3d(var(--history-canopy-x,100vw),0,0) scale(1.035);
  transform-origin:50% 0;
  opacity:var(--history-canopy-o,0);
  filter:blur(1.65px) brightness(.69) saturate(.72);
}

@media (max-width:880px) {
  #adventures .world-history-mist-layer { inset:-3vh -18vw -2vh -18vw; }
  #adventures .world-history-mist-sheet { width:136vw; }
  #adventures .world-history-near-canopy {
    left:-13vw;
    width:126vw;
    height:72vh;
    opacity:var(--history-canopy-o,0);
    filter:blur(1.35px) brightness(.67) saturate(.70);
  }
  #adventures .world-history-ghost-image {
    left:81.6%;
    top:38.5%;
    width:clamp(66px,11vw,96px);
  }
}

@media (prefers-reduced-motion:reduce) {
  #adventures .world-history-mist-sheet,
  #adventures .world-history-ghost-image { animation:none !important; }
}


/* v212 — History → Nature join tree --------------------------------------
   The separator is now a single pre-composited transparent asset. Its cool
   History grade and dark dappled Nature grade are baked only into the tree
   pixels, eliminating the rectangular CSS tint layers used in v211. */
#adventures .worlds-wildlife-blend {
  inset:auto !important;
  left:var(--world-wildlife-join-x,100vw) !important;
  top:0 !important;
  z-index:23 !important;
  /* v232: register the trunk itself over the true seam. The asset remains
     static and moves only with the boundary, but we centre the artwork over
     that boundary so the tree sits on the join rather than too far into the
     Nature scene. */
  width:75vh !important;
  height:100vh !important;
  max-width:none !important;
  min-width:0 !important;
  opacity:1 !important;
  background:var(--asset-wildlife-history-separator,none) center center / 100% 100% no-repeat !important;
  transform:translate3d(-50%,0,0) !important;
  transform-origin:50% 50% !important;
  will-change:left !important;
  transition:none !important;
  filter:drop-shadow(0 0 14px rgba(1,7,10,.18)) !important;
  overflow:visible !important;
}
#adventures .worlds-wildlife-blend::before,
#adventures .worlds-wildlife-blend::after {
  content:none !important;
  display:none !important;
}

/* Register the ghost to the 2172×724 History plate rather than to the
   cropped viewport. That keeps each apparition locked inside its arch on
   different screen shapes. */
#adventures .world-history-ghost {
  inset:auto !important;
  left:calc(50% + var(--history-ghost-x,100vw)) !important;
  top:50% !important;
  width:max(100vw,300vh) !important;
  height:max(100vh,33.333333vw) !important;
  transform:translate3d(-50%,-50%,0) !important;
  opacity:var(--history-ghost-o,0);
  transition:opacity .38s ease;
}
#adventures .world-history-ghost.is-relocating {
  opacity:0 !important;
}
#adventures .world-history-ghost-image {
  left:var(--history-ghost-left,65.25%) !important;
  top:var(--history-ghost-top,34.6%) !important;
  width:var(--history-ghost-width,3.55%) !important;
  max-width:none !important;
  min-width:0 !important;
}

@media (max-width:880px) {
  #adventures .worlds-wildlife-blend {
    width:75vh !important;
    height:100vh !important;
    top:0 !important;
  }
  /* Arch registration comes from the full History plate, so mobile does not
     need a second set of hand-tuned viewport coordinates. */
  #adventures .world-history-ghost-image {
    left:var(--history-ghost-left,65.25%) !important;
    top:var(--history-ghost-top,34.6%) !important;
    width:var(--history-ghost-width,3.55%) !important;
  }
}


/* v245 — authoritative seam tree registration ----------------------------
   The JS now supplies the actual shared world boundary throughout the whole
   carousel, including the periods before and after each immediate handoff.
   These separator trees have no movement function of their own: they are
   simply centred over that boundary. No fade, no direction state and no
   secondary easing. */
#adventures .worlds-art > .worlds-wildlife-blend,
#adventures .worlds-art > .worlds-seasonal-blend {
  position:absolute !important;
  inset:auto !important;
  top:0 !important;
  height:100vh !important;
  opacity:1 !important;
  pointer-events:none !important;
  overflow:visible !important;
  z-index:28 !important;
  transition:none !important;
  will-change:left !important;
  transform:translate3d(-50%,0,0) !important;
  transform-origin:50% 50% !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;
}
#adventures .worlds-art > .worlds-wildlife-blend {
  left:var(--world-wildlife-join-x,200vw) !important;
  width:75vh !important;
  background-image:var(--asset-wildlife-history-separator,none) !important;
  filter:drop-shadow(0 0 14px rgba(1,7,10,.18)) !important;
}
#adventures .worlds-art > .worlds-seasonal-blend {
  left:var(--world-seasonal-join-x,200vw) !important;
  width:74.07vh !important;
  background-image:var(--asset-seasonal-wildlife-separator,none) !important;
  filter:saturate(1.18) sepia(.12) hue-rotate(-8deg) brightness(1.01) contrast(1.04)
         drop-shadow(0 0 16px rgba(26,12,3,.22)) !important;
}
#adventures .worlds-art > .worlds-wildlife-blend::before,
#adventures .worlds-art > .worlds-wildlife-blend::after,
#adventures .worlds-art > .worlds-seasonal-blend::before,
#adventures .worlds-art > .worlds-seasonal-blend::after {
  content:none !important;
  display:none !important;
}
@media (max-width:880px) {
  #adventures .worlds-art > .worlds-wildlife-blend { width:75vh !important; }
  #adventures .worlds-art > .worlds-seasonal-blend { width:74.07vh !important; }
}

/* v246 — stronger woodland/seasonal canopy + fixed pumpkin→crystal tree -----
   Nature now has a clearer top canopy presence like History. Seasonal gains
   its own warm leaf canopy. The autumn → crystal tree no longer slides into
   place; JS supplies its seam-locked X and this layer simply renders there. */
#adventures .world-wildlife-near-canopy {
  left:-9vw;
  top:-5vh;
  width:122vw;
  height:34vh;
  opacity:.43;
  background-position:50% top;
  background-size:cover;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.90) 44%, rgba(0,0,0,.28) 82%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.90) 44%, rgba(0,0,0,.28) 82%, transparent 100%);
  filter:blur(2.6px) brightness(.54) saturate(.82);
  transform:translate3d(-2vw,-1.4vh,0) scale(1.06);
}

#adventures .world-seasonal-near-canopy {
  position:absolute;
  pointer-events:none;
  z-index:4;
  left:-8vw;
  top:-5vh;
  width:124vw;
  height:35vh;
  opacity:.48;
  background:var(--asset-seasonal-panel,none) 54% top / cover no-repeat;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.99) 0%, rgba(0,0,0,.92) 42%, rgba(0,0,0,.36) 80%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.99) 0%, rgba(0,0,0,.92) 42%, rgba(0,0,0,.36) 80%, transparent 100%);
  filter:blur(2.2px) brightness(.70) saturate(1.08) sepia(.12);
  transform:translate3d(-2vw,-1.3vh,0) scale(1.06);
}

#adventures .worlds-crystal-blend {
  opacity:1 !important;
  transition:none !important;
}

@media (max-width:880px) {
  #adventures .world-wildlife-near-canopy {
    left:-14vw;
    width:132vw;
    height:29vh;
    opacity:.40;
    filter:blur(2.2px) brightness(.53) saturate(.80);
  }
  #adventures .world-seasonal-near-canopy {
    left:-14vw;
    width:134vw;
    height:30vh;
    opacity:.45;
    background-position:56% top;
    filter:blur(1.9px) brightness(.68) saturate(1.04) sepia(.10);
  }
}

@media (prefers-reduced-motion:reduce) {
  #adventures .worlds-crystal-blend {
    transition:none !important;
  }
}


/* v248 — visible scroll-parallax canopies ---------------------------------
   These override the earlier static canopy styling. Both layers are now
   deliberately obvious near-camera foliage, softly defocused, and use the
   scroll-derived local offsets supplied by chapter5.js. */
#adventures .world-wildlife-near-canopy {
  z-index:12 !important;
  left:-13vw !important;
  top:-8vh !important;
  width:132vw !important;
  height:39vh !important;
  opacity:.62 !important;
  background:var(--asset-wildlife-panel,none) 48% 2% / 118% auto no-repeat !important;
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.98) 38%, rgba(0,0,0,.72) 61%, rgba(0,0,0,.18) 86%, transparent 100%) !important;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.98) 38%, rgba(0,0,0,.72) 61%, rgba(0,0,0,.18) 86%, transparent 100%) !important;
  filter:blur(3.4px) brightness(.46) saturate(.74) contrast(1.08) !important;
  transform:translate3d(var(--world-wildlife-canopy-x,0vw),var(--world-wildlife-canopy-y,0vh),0) scale(1.075) !important;
  transform-origin:50% 0 !important;
  will-change:transform !important;
}

#adventures .world-seasonal-near-canopy {
  z-index:12 !important;
  left:-13vw !important;
  top:-8vh !important;
  width:132vw !important;
  height:40vh !important;
  opacity:.66 !important;
  background:var(--asset-seasonal-panel,none) 51% 1% / 118% auto no-repeat !important;
  mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.99) 38%, rgba(0,0,0,.76) 62%, rgba(0,0,0,.20) 87%, transparent 100%) !important;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, rgba(0,0,0,.99) 38%, rgba(0,0,0,.76) 62%, rgba(0,0,0,.20) 87%, transparent 100%) !important;
  filter:blur(3.1px) brightness(.53) saturate(1.16) sepia(.17) hue-rotate(-7deg) contrast(1.08) !important;
  transform:translate3d(var(--world-seasonal-canopy-x,0vw),var(--world-seasonal-canopy-y,0vh),0) scale(1.075) !important;
  transform-origin:50% 0 !important;
  will-change:transform !important;
}

/* The crystal seam tree is either present or absent; opacity never eases. */
#adventures .worlds-crystal-blend {
  opacity:1 !important;
  transition:none !important;
}

@media (max-width:880px) {
  #adventures .world-wildlife-near-canopy {
    left:-20vw !important;
    top:-7vh !important;
    width:145vw !important;
    height:34vh !important;
    opacity:.58 !important;
    background-size:126% auto !important;
    filter:blur(2.8px) brightness(.44) saturate(.72) contrast(1.08) !important;
  }
  #adventures .world-seasonal-near-canopy {
    left:-20vw !important;
    top:-7vh !important;
    width:145vw !important;
    height:35vh !important;
    opacity:.62 !important;
    background-size:126% auto !important;
    filter:blur(2.7px) brightness(.51) saturate(1.14) sepia(.17) hue-rotate(-7deg) contrast(1.08) !important;
  }
}


/* v251 — approved forest-matched crystal/soil asset -----------------------
   The centre crystal uses the approved transparent artwork with its own
   forest-coloured soil and stones. There is no separate CSS soil treatment. */
#adventures .worlds-exit-crystal .seed-crystal-rendered {
  z-index:3 !important;
  background:var(--asset-crystal-seed-approved,none) center bottom / contain no-repeat !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter:drop-shadow(0 0 20px rgba(126,106,255,.32)) drop-shadow(0 0 42px rgba(86,169,255,.18)) !important;
}

/* v252 — approved dark-soil crystal, no glow below the base ----------------
   The crystal artwork itself supplies all illumination. The separate CSS aura
   and external drop shadows are removed so no light pool extends underneath
   the soil/stone cutout. */
#adventures .worlds-exit-crystal .seed-crystal-rendered {
  background:var(--asset-crystal-seed-approved,none) center bottom / contain no-repeat !important;
  mix-blend-mode:normal !important;
  -webkit-mask-image:none !important;
  mask-image:none !important;
  filter:brightness(var(--worlds-seed-crystal-brightness,1)) !important;
}
#adventures .worlds-exit-crystal .seed-crystal-aura {
  display:none !important;
  opacity:0 !important;
  background:none !important;
}


/* v253 — crystal base cleanup --------------------------------------------
   Remove the entrance blur that was bleeding below the soil cutout, and move
   the spark emitter a touch higher so particles start above the ground line. */
#adventures .worlds-exit-crystal .seed-crystal-rendered {
  filter:brightness(var(--worlds-seed-crystal-brightness,1)) !important;
}
#adventures .worlds-exit-crystal .seed-crystal-sparks > span {
  bottom:16.5% !important;
}

/* v254 — crystal energy pulse arcs ---------------------------------------
   Thin perspective ellipses expand from the crystal and fade away. They are
   CSS only, live behind the crystal cutout, and do not alter the approved
   artwork or the soil at its base. */
#adventures .worlds-exit-crystal .seed-crystal-energy-pulses {
  position:absolute;
  left:50%;
  bottom:24%;
  width:100%;
  height:30%;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:visible;
  z-index:1;
}

#adventures .worlds-exit-crystal .seed-crystal-energy-pulse {
  position:absolute;
  left:50%;
  bottom:0;
  width:88%;
  height:46%;
  border:1.5px solid rgba(117,196,255,.74);
  border-radius:50%;
  box-shadow:
    0 0 8px rgba(100,178,255,.35),
    0 0 18px rgba(154,113,255,.18);
  opacity:0;
  transform:translate3d(-50%,0,0) scale(.38,.38);
  transform-origin:50% 50%;
  clip-path:inset(0 0 39% 0);
  animation:raedelCrystalEnergyPulse 3.8s cubic-bezier(.18,.72,.26,1) infinite;
}

#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-b {
  border-color:rgba(190,118,255,.66);
  box-shadow:
    0 0 8px rgba(178,104,255,.30),
    0 0 18px rgba(83,177,255,.16);
  animation-delay:-.95s;
}
#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-c {
  border-color:rgba(91,217,255,.58);
  animation-delay:-1.90s;
}
#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-d {
  border-color:rgba(216,137,255,.52);
  animation-delay:-2.85s;
}

@keyframes raedelCrystalEnergyPulse {
  0% {
    opacity:0;
    transform:translate3d(-50%,0,0) scale(.36,.36);
    filter:blur(.1px);
  }
  10% { opacity:.60; }
  46% { opacity:.36; }
  78% { opacity:.13; }
  100% {
    opacity:0;
    transform:translate3d(-50%,-8%,0) scale(2.65,2.15);
    filter:blur(.55px);
  }
}

#adventures .worlds-exit-crystal .seed-crystal-rendered {
  z-index:3 !important;
}
#adventures .worlds-exit-crystal .seed-crystal-sparks {
  z-index:4 !important;
}

@media (max-width:760px) {
  #adventures .worlds-exit-crystal .seed-crystal-energy-pulses {
    bottom:25%;
    width:108%;
    height:28%;
  }
  #adventures .worlds-exit-crystal .seed-crystal-energy-pulse {
    border-width:1.25px;
  }
}

@media (prefers-reduced-motion:reduce) {
  #adventures .worlds-exit-crystal .seed-crystal-energy-pulse {
    animation:none !important;
    opacity:0 !important;
  }
}

/* v255 — crystal pulses also travel towards the viewer -------------------
   Keep the original upper arcs behind the crystal, then add a second lower
   pulse plane in front of the base. These front arcs grow broader, move down
   the frame and soften slightly so the wave feels as though it is travelling
   out of the woodland towards the camera. */
#adventures .worlds-exit-crystal .seed-crystal-energy-pulses-front {
  position:absolute;
  left:50%;
  bottom:22.5%;
  width:108%;
  height:32%;
  transform:translateX(-50%);
  pointer-events:none;
  overflow:visible;
  z-index:4;
}

#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-front {
  position:absolute;
  left:50%;
  bottom:0;
  width:90%;
  height:42%;
  border:1.35px solid rgba(111,204,255,.54);
  border-radius:50%;
  box-shadow:
    0 0 7px rgba(89,184,255,.24),
    0 0 15px rgba(169,111,255,.12);
  opacity:0;
  transform:translate3d(-50%,0,0) scale(.44,.34);
  transform-origin:50% 50%;
  /* Show the near/front half of the ellipse only. */
  clip-path:inset(47% 0 0 0);
  animation:raedelCrystalEnergyPulseForward 4.35s cubic-bezier(.16,.70,.24,1) infinite;
}

#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-front-a {
  border-color:rgba(103,210,255,.56);
  animation-delay:-.35s;
}
#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-front-b {
  border-color:rgba(202,129,255,.48);
  box-shadow:
    0 0 7px rgba(184,105,255,.22),
    0 0 15px rgba(79,184,255,.10);
  animation-delay:-2.45s;
}

@keyframes raedelCrystalEnergyPulseForward {
  0% {
    opacity:0;
    transform:translate3d(-50%,-2%,0) scale(.42,.32);
    filter:blur(.05px);
  }
  10% { opacity:.46; }
  42% { opacity:.30; }
  72% { opacity:.14; }
  100% {
    opacity:0;
    transform:translate3d(-50%,88%,0) scale(3.25,2.55);
    filter:blur(.85px);
  }
}

/* Let the front wave pass in front of the lower crystal, but keep the sparks
   as the top-most crystal effect. */
#adventures .worlds-exit-crystal .seed-crystal-rendered { z-index:3 !important; }
#adventures .worlds-exit-crystal .seed-crystal-energy-pulses-front { z-index:4 !important; }
#adventures .worlds-exit-crystal .seed-crystal-sparks { z-index:5 !important; }

@media (max-width:760px) {
  #adventures .worlds-exit-crystal .seed-crystal-energy-pulses-front {
    bottom:23.5%;
    width:116%;
    height:30%;
  }
  #adventures .worlds-exit-crystal .seed-crystal-energy-pulse-front {
    border-width:1.1px;
  }
}

@media (prefers-reduced-motion:reduce) {
  #adventures .worlds-exit-crystal .seed-crystal-energy-pulse-front {
    animation:none !important;
    opacity:0 !important;
  }
}

/* v256 — pulse origin corrected to the crystal base ----------------------
   Both pulse planes now share the same physical origin at the centre of the
   crystal/soil base. The near waves remain visible long enough to cross the
   crystal and continue towards the viewer before they fade. */
#adventures .worlds-exit-crystal .seed-crystal-energy-pulses,
#adventures .worlds-exit-crystal .seed-crystal-energy-pulses-front {
  left:50% !important;
  bottom:9% !important;
  width:110% !important;
  height:32% !important;
  transform:translateX(-50%) !important;
}

#adventures .worlds-exit-crystal .seed-crystal-energy-pulse {
  bottom:0 !important;
  width:88% !important;
  height:42% !important;
  transform:translate3d(-50%,0,0) scale(.22,.18);
  animation:raedelCrystalEnergyPulseBackV256 4.15s cubic-bezier(.18,.72,.26,1) infinite !important;
}
#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-b { animation-delay:-1.04s !important; }
#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-c { animation-delay:-2.08s !important; }
#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-d { animation-delay:-3.12s !important; }

@keyframes raedelCrystalEnergyPulseBackV256 {
  0% {
    opacity:0;
    transform:translate3d(-50%,0,0) scale(.22,.18);
    filter:blur(.05px);
  }
  8%  { opacity:.60; }
  48% { opacity:.40; }
  82% { opacity:.15; }
  100% {
    opacity:0;
    transform:translate3d(-50%,-34%,0) scale(2.85,2.20);
    filter:blur(.55px);
  }
}

#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-front {
  bottom:0 !important;
  width:90% !important;
  height:42% !important;
  transform:translate3d(-50%,0,0) scale(.20,.15);
  /* Only the near half is visible, so the wave appears to emerge from the
     crystal base and travel out over the path towards the camera. */
  clip-path:inset(49% 0 0 0) !important;
  animation:raedelCrystalEnergyPulseForwardV256 4.8s cubic-bezier(.14,.68,.22,1) infinite !important;
}
#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-front-a {
  animation-delay:-.20s !important;
}
#adventures .worlds-exit-crystal .seed-crystal-energy-pulse-front-b {
  animation-delay:-2.60s !important;
}

@keyframes raedelCrystalEnergyPulseForwardV256 {
  0% {
    opacity:0;
    transform:translate3d(-50%,0,0) scale(.20,.15);
    filter:blur(.02px);
  }
  7%  { opacity:.52; }
  48% { opacity:.42; }
  76% { opacity:.29; }
  91% { opacity:.13; }
  100% {
    opacity:0;
    transform:translate3d(-50%,165%,0) scale(3.75,3.00);
    filter:blur(1.0px);
  }
}

@media (max-width:760px) {
  #adventures .worlds-exit-crystal .seed-crystal-energy-pulses,
  #adventures .worlds-exit-crystal .seed-crystal-energy-pulses-front {
    bottom:10% !important;
    width:118% !important;
    height:31% !important;
  }
}

/* v257 — Seasonal copy: artwork stays open, readability via shadow only ----
   Remove the dark backing panel and keep the seasonal woodland visible.
   Shadows are tuned separately for display copy and smaller body text. */
#adventures .world-beat-seasonal::before {
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
}
#adventures .world-beat-seasonal {
  isolation:auto !important;
  text-shadow:none !important;
}
#adventures .world-beat-seasonal h3 {
  text-shadow:
    0 2px 3px rgba(0,0,0,.92),
    0 5px 16px rgba(0,0,0,.62),
    0 0 28px rgba(0,0,0,.28);
}
#adventures .world-beat-seasonal p {
  text-shadow:
    0 1px 2px rgba(0,0,0,.98),
    0 3px 8px rgba(0,0,0,.76),
    0 0 16px rgba(0,0,0,.32);
}
#adventures .world-beat-seasonal .eyebrow,
#adventures .world-beat-seasonal .world-number {
  text-shadow:
    0 1px 2px rgba(0,0,0,.96),
    0 3px 9px rgba(0,0,0,.68);
}

/* v258 — standard cinematic text readability -----------------------------
   Use the Seasonal scene's approved shadow-led readability treatment across
   the cinematic site. Artwork stays open behind copy: large display text,
   smaller body copy and labels each get a tuned shadow strength. Navigation
   uses a tighter version so it remains crisp. */
:root {
  --raedel-shadow-display:
    0 2px 3px rgba(0,0,0,.92),
    0 5px 16px rgba(0,0,0,.62),
    0 0 28px rgba(0,0,0,.28);
  --raedel-shadow-body:
    0 1px 2px rgba(0,0,0,.98),
    0 3px 8px rgba(0,0,0,.76),
    0 0 16px rgba(0,0,0,.32);
  --raedel-shadow-label:
    0 1px 2px rgba(0,0,0,.96),
    0 3px 9px rgba(0,0,0,.68);
  --raedel-shadow-ui:
    0 1px 2px rgba(0,0,0,.82),
    0 2px 7px rgba(0,0,0,.42);
}

/* Display / story headings over artwork. */
.hero-copy h1,
.journey-end h2,
.interior-copy h2,
.players-copy h2,
.how-copy h2,
.how-scene-heading h2,
.how-beat h3,
#how-it-works .how-copy-stage h2,
#how-it-works .how-panel-state h2,
.worlds-heading h2,
.world-beat h3,
.venues-heading h2,
.venue-beat h3,
.examples-heading h2,
.example-beat h3,
.finale-copy h2,
#adventures .worlds-venues-continuation .venue-examples-heading h2,
#adventures .worlds-venues-continuation .venue-example-beat h3,
#adventures .worlds-venues-continuation .venue-embedded-finale-copy h2 {
  text-shadow:var(--raedel-shadow-display) !important;
}

/* Supporting copy over photography / artwork. */
.hero-copy p,
.journey-end p,
.interior-copy p,
.players-copy p,
.how-copy p,
.how-scene-heading p,
.how-beat p,
#how-it-works .how-copy-stage p,
#how-it-works .how-panel-state p,
.worlds-heading p,
.world-beat p,
.venues-heading p,
.venue-beat p,
.examples-heading p,
.example-beat p,
.finale-copy p,
#adventures .worlds-venues-continuation .venue-examples-heading p,
#adventures .worlds-venues-continuation .venue-example-beat p,
#adventures .worlds-venues-continuation .venue-embedded-finale-copy p {
  text-shadow:var(--raedel-shadow-body) !important;
}

/* Eyebrows and step / section numbers. */
.hero-copy .eyebrow,
.journey-end .eyebrow,
.interior-copy .eyebrow,
.players-copy .eyebrow,
.how-copy .eyebrow,
.how-scene-heading .eyebrow,
.how-beat .eyebrow,
#how-it-works .how-copy-stage .eyebrow,
#how-it-works .how-panel-state .eyebrow,
.worlds-heading .eyebrow,
.world-beat .eyebrow,
.world-number,
.venues-heading .eyebrow,
.venue-beat .eyebrow,
.venue-number,
.examples-heading .eyebrow,
.example-beat .eyebrow,
.example-number,
.finale-copy .eyebrow,
#adventures .worlds-venues-continuation .eyebrow,
#adventures .worlds-venues-continuation .venue-embedded-finale-label {
  text-shadow:var(--raedel-shadow-label) !important;
}

/* UI text remains sharper than display copy. */
.site-header .nav-links a,
.nav-cta,
.scroll-cue,
.worlds-progress,
.venues-progress,
.examples-progress {
  text-shadow:var(--raedel-shadow-ui);
}

/* The standard is shadow-led readability, not local dark copy panels. */
#adventures .world-beat-seasonal::before,
.finale-copy::before,
#adventures .worlds-venues-continuation .venue-embedded-finale-copy::before {
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}


/* v264 — History entrance containment without changing layer transforms ----
   The History alpha depth planes and atmospheric effects use intentional
   overscan/parallax. Keep their existing v258 positions exactly intact, but
   crop the portion that would extend left of the REAL History entrance edge.
   This wrapper is viewport aligned and has NO transform, preventing the
   double-motion/vertical-band artefacts seen in the later wrapper attempts. */
#adventures .world-history-entry-clip {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:14;
  pointer-events:none;
  overflow:hidden;
  clip-path:inset(0 0 0 var(--history-entry-clip-x,100vw));
  -webkit-clip-path:inset(0 0 0 var(--history-entry-clip-x,100vw));
  contain:paint;
}

/* The children keep their original absolute viewport geometry and every
   existing transform variable. Their z-order remains meaningful inside this
   one History-only stacking context. */
#adventures .world-history-entry-clip > .worlds-continuous-midground,
#adventures .world-history-entry-clip > .worlds-continuous-foreground,
#adventures .world-history-entry-clip > .world-history-mist-layer,
#adventures .world-history-entry-clip > .world-history-ghost,
#adventures .world-history-entry-clip > .world-history-near-canopy {
  pointer-events:none;
}

/* The entrance seam cover is deliberately outside the clipped group and
   above it. Its v258 position/movement is untouched. */
#adventures .worlds-art > .worlds-seam-bridge {
  z-index:16 !important;
}

/* Nature remains above the contained History stack at the later handoff. */
#adventures .worlds-art > .worlds-wildlife-panel {
  z-index:18 !important;
}

/* v265 — angled demo phones for Zoo / Fort / Lumen Lab --------------------
   The phone itself is part of the live site, not baked into the title art.
   Each phone follows the same visibility/x state as its matching example beat
   and uses perspective on an inner shell so the scroll transform stays clean. */
#adventures .worlds-venues-continuation .venue-demo-phone {
  position:absolute;
  z-index:40;
  right:7.2vw;
  top:13.5vh;
  width:clamp(220px,18.6vw,350px);
  pointer-events:none;
  transform-style:preserve-3d;
  perspective:1300px;
  will-change:opacity,transform;
}
#adventures .worlds-venues-continuation .venue-demo-phone-zoo {
  opacity:var(--venue-example-wildlife-o,0);
  transform:translate3d(var(--venue-example-wildlife-x,0px),0,0);
}
#adventures .worlds-venues-continuation .venue-demo-phone-fort {
  opacity:var(--venue-example-fort-o,0);
  transform:translate3d(var(--venue-example-fort-x,0px),0,0);
}
#adventures .worlds-venues-continuation .venue-demo-phone-lab {
  opacity:var(--venue-example-lab-o,0);
  transform:translate3d(var(--venue-example-lab-x,0px),0,0);
}
#adventures .worlds-venues-continuation .venue-demo-phone-shell {
  position:relative;
  width:100%;
  aspect-ratio:9 / 19.45;
  padding:7px;
  border-radius:clamp(32px,3.1vw,52px);
  background:linear-gradient(105deg,#4c4d50 0%,#0b0c0e 14%,#292b2f 48%,#07080a 82%,#5b5c60 100%);
  box-shadow:
    0 26px 58px rgba(0,0,0,.46),
    0 8px 18px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.28),
    inset 0 0 0 3px rgba(0,0,0,.86);
  transform-style:preserve-3d;
  transform-origin:50% 65%;
  overflow:visible;
}
#adventures .worlds-venues-continuation .venue-demo-phone-shell::before,
#adventures .worlds-venues-continuation .venue-demo-phone-shell::after {
  content:'';
  position:absolute;
  z-index:-1;
  top:20%;
  width:5px;
  border-radius:4px;
  background:linear-gradient(#4b4c50,#151619 45%,#050506);
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
#adventures .worlds-venues-continuation .venue-demo-phone-shell::before {
  left:-5px;
  height:20%;
}
#adventures .worlds-venues-continuation .venue-demo-phone-shell::after {
  right:-5px;
  height:12%;
  top:28%;
}
#adventures .worlds-venues-continuation .venue-demo-phone-screen {
  position:absolute;
  inset:7px;
  border-radius:calc(clamp(32px,3.1vw,52px) - 8px);
  overflow:hidden;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 -22px 42px rgba(0,0,0,.08);
}
#adventures .worlds-venues-continuation .venue-demo-phone-zoo .venue-demo-phone-shell,
#adventures .worlds-venues-continuation .venue-demo-phone-fort .venue-demo-phone-shell,
#adventures .worlds-venues-continuation .venue-demo-phone-lab .venue-demo-phone-shell {
  /* v266: keep the three demo phones as one consistent visual set. */
  transform:rotateY(-15deg) rotateX(2.5deg) rotateZ(2.7deg) translateZ(0);
}
#adventures .worlds-venues-continuation .venue-demo-phone-zoo .venue-demo-phone-screen {
  background-image:var(--asset-zoo-phone,none);
}
#adventures .worlds-venues-continuation .venue-demo-phone-fort .venue-demo-phone-screen {
  background-image:var(--asset-fort-phone,none);
}
#adventures .worlds-venues-continuation .venue-demo-phone-lab .venue-demo-phone-screen {
  background-image:var(--asset-lab-phone,none);
}

@media (max-width:900px) {
  #adventures .worlds-venues-continuation .venue-demo-phone {
    right:3.5vw;
    top:16vh;
    width:clamp(175px,27vw,250px);
  }
}
@media (max-width:640px) {
  #adventures .worlds-venues-continuation .venue-demo-phone {
    right:3vw;
    top:18vh;
    width:min(40vw,210px);
    opacity:calc(var(--venue-example-wildlife-o,0) * .90);
  }
  #adventures .worlds-venues-continuation .venue-demo-phone-fort {
    opacity:calc(var(--venue-example-fort-o,0) * .90);
  }
  #adventures .worlds-venues-continuation .venue-demo-phone-lab {
    opacity:calc(var(--venue-example-lab-o,0) * .90);
  }
}

/* v267 — Fort scene left-edge cover --------------------------------------
   The transparent Fort foreground plate leaves a narrow sliver of the valley
   visible at the far-left edge. Extend only the artwork's own left foliage/
   stone edge so the cover travels with the Fort foreground and preserves the
   existing composition. */
#adventures .worlds-venues-continuation .venue-fort-front::before {
  content:'';
  position:absolute;
  pointer-events:none;
  left:-7.5vw;
  bottom:0;
  width:8.2vw;
  height:100%;
  background-image:var(--asset-fort-front,none);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:118vw 94vh;
  filter:saturate(.98) brightness(.98);
  transform:translateZ(0);
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-fort-front::before {
    left:-13vw;
    width:14vw;
    background-size:154vw 90vh;
  }
}


/* v268 — RÆDEL follows the actual woodland path ---------------------------
   The distant guide is now a child of .how-transition-master, which means he
   inherits the exact horizontal handoff and the slight path zoom. The only
   transform left here is local movement deeper along the painted path. */
#how-it-works .how-transition-master > .how-raedel-away {
  left:67.15% !important;
  top:50.8% !important;
  width:clamp(42px,4.6vw,76px) !important;
  z-index:7 !important;
  transform:
    translate(-50%,-50%)
    translate3d(var(--how-raedel-away-x,0vw),var(--how-raedel-away-y,4vh),0)
    scale(var(--how-raedel-away-s,.82)) !important;
  transform-origin:50% 100% !important;
}
@media (max-width:880px) {
  #how-it-works .how-transition-master > .how-raedel-away {
    left:67.4% !important;
    top:50.8% !important;
    width:clamp(44px,8vw,64px) !important;
  }
}

/* v269 — remove flying fox and restage artefacts on the path ------------- */
/* The distant guide is retired for now. It was not reading as grounded on the
   path, so the section now focuses purely on the artefact examples. */
#how-it-works .how-transition-master > .how-raedel-away,
#how-it-works .how-raedel-away {
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Arrange the artefacts as a cleaner stepped display that follows the right
   shoulder of the path. They now read as a curated feature trio rather than
   oversized floating cutouts. */
#how-it-works .how-object {
  position:absolute !important;
  z-index:10 !important;
  pointer-events:none !important;
  filter:
    drop-shadow(0 18px 22px rgba(0,0,0,.42))
    drop-shadow(0 5px 10px rgba(0,0,0,.45)) !important;
}
#how-it-works .how-object::before {
  content:'';
  position:absolute;
  left:50%;
  bottom:2%;
  width:58%;
  height:12%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,.32) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,0) 100%);
  filter:blur(7px);
  opacity:.9;
  z-index:-1;
}
#how-it-works .how-object img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  transform-origin:50% 75%;
}

/* farthest up the trail */
#how-it-works .how-marker {
  left:63.2% !important;
  bottom:26.5vh !important;
  width:102px !important;
  height:102px !important;
  transform:translate3d(-50%,var(--how-marker-y,2vh),0) scale(var(--how-marker-s,.74)) !important;
}
#how-it-works .how-marker img {
  transform:rotate(-12deg);
  animation:howArtifactBobLens 5.8s ease-in-out infinite;
}

/* mid trail */
#how-it-works .how-story-object {
  left:70.5% !important;
  bottom:20.5vh !important;
  width:138px !important;
  height:116px !important;
  transform:translate3d(-50%,var(--how-story-object-y,2vh),0) scale(var(--how-story-object-s,.76)) !important;
}
#how-it-works .how-story-object img {
  object-fit:contain !important;
  transform:rotate(12deg);
  animation:howArtifactBobBook 6.6s ease-in-out infinite;
}

/* nearest the viewer */
#how-it-works .how-puzzle-object {
  left:79% !important;
  bottom:13.8vh !important;
  width:152px !important;
  height:152px !important;
  transform:translate3d(-50%,var(--how-puzzle-y,2vh),0) scale(var(--how-puzzle-s,.82)) !important;
}
#how-it-works .how-puzzle-object img {
  transform:rotate(-10deg);
  animation:howArtifactBobWheel 6.1s ease-in-out infinite;
}

@keyframes howArtifactBobLens {
  0%,100% { transform:rotate(-12deg) translate3d(0,0,0); }
  50% { transform:rotate(-9deg) translate3d(0,-6px,0); }
}
@keyframes howArtifactBobBook {
  0%,100% { transform:rotate(12deg) translate3d(0,0,0); }
  50% { transform:rotate(9deg) translate3d(0,-5px,0); }
}
@keyframes howArtifactBobWheel {
  0%,100% { transform:rotate(-10deg) translate3d(0,0,0); }
  50% { transform:rotate(-7deg) translate3d(0,-6px,0); }
}

@media (max-width:880px) {
  #how-it-works .how-marker {
    left:61.5% !important;
    bottom:25.8vh !important;
    width:78px !important;
    height:78px !important;
  }
  #how-it-works .how-story-object {
    left:69.5% !important;
    bottom:20.2vh !important;
    width:108px !important;
    height:90px !important;
  }
  #how-it-works .how-puzzle-object {
    left:79% !important;
    bottom:14.5vh !important;
    width:118px !important;
    height:118px !important;
  }
}

/* v270 — phone-led artefact reveal -----------------------------------------
   One angled mobile rises from the woodland path and carries the changing
   artefact file. The old loose artefacts are retired entirely. */
#how-it-works .how-marker,
#how-it-works .how-puzzle-object,
#how-it-works .how-story-object {
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

#how-it-works .how-artifact-phone {
  position:absolute;
  z-index:12;
  left:67.5%;
  bottom:8.8vh;
  width:clamp(188px,16.8vw,286px);
  aspect-ratio:9 / 18.7;
  opacity:calc(var(--how-artifact-phone-o,0) * var(--how-worlds-exit-o,1));
  transform:
    translate3d(-50%,var(--how-artifact-phone-y,9vh),0)
    perspective(1100px)
    rotateZ(5.5deg)
    rotateY(-13deg)
    rotateX(2deg)
    scale(var(--how-artifact-phone-s,.60));
  transform-origin:50% 100%;
  pointer-events:none;
  will-change:transform,opacity;
  filter:drop-shadow(0 25px 27px rgba(0,0,0,.50));
}
#how-it-works .how-artifact-phone-shadow {
  position:absolute;
  z-index:-1;
  left:50%;
  bottom:-2.6%;
  width:82%;
  height:7.5%;
  border-radius:50%;
  transform:translateX(-50%) rotate(-4deg);
  background:radial-gradient(ellipse,rgba(0,0,0,.52) 0%,rgba(0,0,0,.26) 48%,transparent 76%);
  filter:blur(7px);
}
#how-it-works .how-artifact-phone-shell {
  position:absolute;
  inset:0;
  border-radius:clamp(28px,2.8vw,44px);
  padding:8px;
  overflow:hidden;
  background:linear-gradient(135deg,#34383b 0%,#080a0b 24%,#151719 62%,#4a4d50 100%);
  border:1px solid rgba(225,225,225,.44);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.09),
    inset 0 0 0 7px #050607,
    0 0 0 1px rgba(0,0,0,.75);
}
#how-it-works .how-artifact-phone-shell::before {
  content:'';
  position:absolute;
  z-index:8;
  left:-3px;
  top:22%;
  width:4px;
  height:18%;
  border-radius:3px 0 0 3px;
  background:linear-gradient(180deg,#666,#191a1b 22%,#777 50%,#151617 76%,#555);
}
#how-it-works .how-artifact-phone-island {
  position:absolute;
  z-index:10;
  top:13px;
  left:50%;
  width:31%;
  height:20px;
  transform:translateX(-50%);
  border-radius:14px;
  background:#010202;
  box-shadow:inset -8px 0 8px rgba(26,45,62,.28);
}
#how-it-works .how-artifact-phone-screen {
  position:absolute;
  inset:8px;
  overflow:hidden;
  border-radius:clamp(23px,2.4vw,37px);
  background:
    radial-gradient(90% 52% at 50% 25%,rgba(147,103,27,.18),transparent 72%),
    linear-gradient(180deg,#17130e,#080706 64%,#030303);
  box-shadow:inset 0 0 28px rgba(0,0,0,.78);
}
#how-it-works .how-artifact-phone-screen::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.08),transparent 19%,transparent 69%,rgba(255,255,255,.035));
}
#how-it-works .how-artifact-file {
  position:absolute;
  inset:0;
  padding:15% 10% 9%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  opacity:0;
  transform:scale(.97);
  transition:none;
  color:#eee5cf;
}
#how-it-works .how-artifact-file-discover { opacity:var(--how-artifact-discover-o,0); transform:scale(calc(.97 + .03 * var(--how-artifact-discover-o,0))); }
#how-it-works .how-artifact-file-solve { opacity:var(--how-artifact-solve-o,0); transform:scale(calc(.97 + .03 * var(--how-artifact-solve-o,0))); }
#how-it-works .how-artifact-file-story { opacity:var(--how-artifact-story-o,0); transform:scale(calc(.97 + .03 * var(--how-artifact-story-o,0))); }
#how-it-works .how-artifact-file-label {
  margin-top:3%;
  font-size:clamp(7px,.56vw,10px);
  font-weight:700;
  letter-spacing:.15em;
  color:#c7a25c;
  text-transform:uppercase;
}
#how-it-works .how-artifact-file-image {
  width:78%;
  height:43%;
  margin:8% auto 4%;
  display:flex;
  align-items:center;
  justify-content:center;
}
#how-it-works .how-artifact-file-image img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 9px 10px rgba(0,0,0,.42));
}
#how-it-works .how-artifact-file-discover .how-artifact-file-image img { transform:rotate(-8deg); }
#how-it-works .how-artifact-file-solve .how-artifact-file-image img { transform:rotate(-4deg) scale(.92); }
#how-it-works .how-artifact-file-story .how-artifact-file-image img { transform:rotate(7deg) scale(.94); }
#how-it-works .how-artifact-file strong {
  display:block;
  margin-top:1%;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(12px,1.08vw,18px);
  font-weight:600;
  line-height:1.12;
  color:#f4ead4;
  text-shadow:0 2px 3px rgba(0,0,0,.82);
}
#how-it-works .how-artifact-file p {
  margin:5% 0 0;
  max-width:92%;
  font-size:clamp(8px,.68vw,11px);
  line-height:1.45;
  color:#bdb29d;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
}
#how-it-works .how-artifact-file-button {
  margin-top:auto;
  padding:6% 14%;
  min-width:68%;
  border:1px solid rgba(197,151,69,.58);
  border-radius:5px;
  font-size:clamp(7px,.55vw,9px);
  font-weight:700;
  letter-spacing:.09em;
  color:#d7b36e;
  background:rgba(43,30,14,.36);
}

@media (max-width:880px) {
  #how-it-works .how-artifact-phone {
    left:70%;
    bottom:10.5vh;
    width:clamp(150px,31vw,218px);
    transform:
      translate3d(-50%,var(--how-artifact-phone-y,9vh),0)
      perspective(950px)
      rotateZ(4deg)
      rotateY(-10deg)
      rotateX(2deg)
      scale(var(--how-artifact-phone-s,.60));
  }
}

@media (prefers-reduced-motion:reduce) {
  #how-it-works .how-artifact-phone,
  #how-it-works .how-artifact-file { transition:none !important; }
}

@media (max-width: 900px) {
  #faq::before {
    background-position:22% center;
  }
  #faq::after {
    background:linear-gradient(180deg, rgba(4,15,24,.82) 0%, rgba(4,15,24,.72) 34%, rgba(4,15,24,.88) 100%);
  }
}

/* v286 — venue example edge overlap caps -----------------------------------
   The venue example cut-outs deliberately pan left/right, but their artwork is
   finite. At tablet / narrow desktop widths (the real failing captures were
   832, 875 and 1022px wide) that pan can expose a clean vertical edge. The
   approved treatment is a SMALL overlapping piece of the same venue scenery.
   Keep these caps screen-edge locked horizontally while they share only the
   venue's rise/drop. This preserves the parallax movement without exposing the
   finite canvas. */
@media (max-width:1180px) {
  /* The old v267 Fort extension was attached to the horizontally moving front
     plane. Disable it while the edge-locked cap below is in use. */
  #adventures .worlds-venues-continuation .venue-fort-front::before {
    content:none !important;
    display:none !important;
  }

  #adventures .worlds-venues-continuation .venue-stage-fort::before,
  #adventures .worlds-venues-continuation .venue-stage-zoo::after,
  #adventures .worlds-venues-continuation .venue-stage-lab::after {
    content:'';
    position:absolute;
    z-index:4;
    pointer-events:none;
    bottom:-3vh;
    height:94vh;
    background-repeat:no-repeat;
    will-change:transform;
  }

  /* Fort moves right, so retain a little of Fort's own LEFT scenery at the
     viewport edge. Front + rear are layered so the overlap remains organic
     from the tall lantern/foliage down into the stone foreground. */
  #adventures .worlds-venues-continuation .venue-stage-fort::before {
    left:-1.2vw;
    width:18vw;
    background-image:var(--asset-fort-front,none), var(--asset-fort-rear,none);
    background-position:left bottom,left bottom;
    background-size:118vw auto,118vw auto;
    transform:translate3d(0,var(--venue-fort-front-y,90vh),0);
    transform-origin:0 100%;
    filter:saturate(.985) brightness(.99);
  }

  /* Zoo moves left. Use the zoo's OWN right-hand reeds / lantern / planting,
     rather than the generic venue cap, and let it overlap the moving set by a
     small amount. */
  #adventures .worlds-venues-continuation .venue-stage-zoo::after {
    right:-1.2vw;
    width:18vw;
    background-image:var(--asset-zoo-front,none), var(--asset-zoo-rear,none);
    background-position:right bottom,right bottom;
    background-size:118vw auto,118vw auto;
    transform:translate3d(0,var(--venue-zoo-front-y,90vh),0);
    transform-origin:100% 100%;
    filter:saturate(.99) brightness(.995);
  }

  /* Lab uses the same leftward rhythm as Zoo. The rear greenhouse supplies
     the tall edge and the front layer supplies foliage / equipment at ground
     level, so there is no bare valley strip beside the set. */
  #adventures .worlds-venues-continuation .venue-stage-lab::after {
    right:-1.2vw;
    width:18vw;
    background-image:var(--asset-lab-front,none), var(--asset-lab-rear,none);
    background-position:right bottom,right bottom;
    background-size:118vw auto,118vw auto;
    transform:translate3d(0,var(--venue-lab-front-y,90vh),0);
    transform-origin:100% 100%;
    filter:saturate(.99) brightness(.995);
  }
}

/* Phone-sized layouts use the wider 154vw scene canvas, therefore the small
   edge overlaps must use the same source scale to stay registered. */
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-stage-fort::before,
  #adventures .worlds-venues-continuation .venue-stage-zoo::after,
  #adventures .worlds-venues-continuation .venue-stage-lab::after {
    bottom:-2vh;
    width:22vw;
    height:90vh;
  }
  #adventures .worlds-venues-continuation .venue-stage-fort::before {
    left:-1.5vw;
    background-size:154vw auto,154vw auto;
  }
  #adventures .worlds-venues-continuation .venue-stage-zoo::after,
  #adventures .worlds-venues-continuation .venue-stage-lab::after {
    right:-1.5vw;
    background-size:154vw auto,154vw auto;
  }
}

/* v287 — simple fixed scenery strips for venue example edges ---------------
   These are not extra parallax layers. They are narrow pieces of each venue's
   own artwork pinned to the viewport edge, with a small overlap into the main
   moving set so the finite scene canvas can never expose the valley behind. */

/* Disable the older Fort extension attached to the moving foreground. */
#adventures .worlds-venues-continuation .venue-fort-front::before {
  content:none !important;
  display:none !important;
}

/* One shared strip geometry. */
#adventures .worlds-venues-continuation .venue-stage-fort::before,
#adventures .worlds-venues-continuation .venue-stage-zoo::after,
#adventures .worlds-venues-continuation .venue-stage-lab::after {
  content:'' !important;
  display:block !important;
  position:absolute !important;
  z-index:6 !important;
  pointer-events:none !important;
  bottom:-3vh !important;
  width:10vw !important;
  height:94vh !important;
  background-repeat:no-repeat !important;
  background-size:118vw 94vh,118vw 94vh !important;
  opacity:1 !important;
  will-change:transform;
}

/* Fort: existing left scenery, now actually over the gap. */
#adventures .worlds-venues-continuation .venue-stage-fort::before {
  left:0 !important;
  right:auto !important;
  background-image:var(--asset-fort-front,none),var(--asset-fort-rear,none) !important;
  background-position:left bottom,left bottom !important;
  transform:translate3d(0,var(--venue-fort-front-y,90vh),0) !important;
  transform-origin:0 100% !important;
}

/* Zoo and Lab: equivalent right-hand scenery strips. */
#adventures .worlds-venues-continuation .venue-stage-zoo::after {
  right:0 !important;
  left:auto !important;
  background-image:var(--asset-zoo-front,none),var(--asset-zoo-rear,none) !important;
  background-position:right bottom,right bottom !important;
  transform:translate3d(0,var(--venue-zoo-front-y,90vh),0) !important;
  transform-origin:100% 100% !important;
}
#adventures .worlds-venues-continuation .venue-stage-lab::after {
  right:0 !important;
  left:auto !important;
  background-image:var(--asset-lab-front,none),var(--asset-lab-rear,none) !important;
  background-position:right bottom,right bottom !important;
  transform:translate3d(0,var(--venue-lab-front-y,90vh),0) !important;
  transform-origin:100% 100% !important;
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-stage-fort::before,
  #adventures .worlds-venues-continuation .venue-stage-zoo::after,
  #adventures .worlds-venues-continuation .venue-stage-lab::after {
    bottom:-2vh !important;
    width:18vw !important;
    height:90vh !important;
    background-size:154vw 90vh,154vw 90vh !important;
  }
}

/* v288 — venue edge overlap strips move with the venue artwork -------------
   The static viewport-pinned strips solved the raw gaps but made the joins
   easier to notice. Revert to moving overlap pieces that are attached to the
   same venue planes as the scenery itself, so the extensions travel with the
   art and read as one continuous composition. */

/* Retire the viewport-pinned stage strips from v287. */
#adventures .worlds-venues-continuation .venue-stage-fort::before,
#adventures .worlds-venues-continuation .venue-stage-zoo::after,
#adventures .worlds-venues-continuation .venue-stage-lab::after {
  content:none !important;
  display:none !important;
}

/* Shared moving-edge geometry. These extensions are children of the moving
   front plane, so they inherit the exact same horizontal parallax movement as
   the rest of the active venue scene. The extension needs to OVERLAP the main
   artwork, not sit beside it, so leave roughly 1vw inside the main plate and
   let the rest hang outward to cover the finite canvas edge. */
#adventures .worlds-venues-continuation .venue-fort-front::before,
#adventures .worlds-venues-continuation .venue-zoo-front::after,
#adventures .worlds-venues-continuation .venue-lab-front::after {
  content:'' !important;
  position:absolute !important;
  z-index:3 !important;
  top:0 !important;
  bottom:0 !important;
  width:16vw !important;
  pointer-events:none !important;
  background-repeat:no-repeat !important;
  background-size:118vw 94vh, 118vw 94vh !important;
  opacity:1 !important;
  will-change:transform;
}

/* Fort example: keep the overlap travelling with the Fort scenery, but move
   it far enough inward that it actually bridges the left slit. */
#adventures .worlds-venues-continuation .venue-fort-front::before {
  left:-15vw !important;
  background-image:var(--asset-fort-front,none), var(--asset-fort-rear,none) !important;
  background-position:left bottom, left bottom !important;
}

/* Zoo and Lab examples: same idea on the right-hand side. */
#adventures .worlds-venues-continuation .venue-zoo-front::after {
  right:-15vw !important;
  background-image:var(--asset-zoo-front,none), var(--asset-zoo-rear,none) !important;
  background-position:right bottom, right bottom !important;
}

#adventures .worlds-venues-continuation .venue-lab-front::after {
  right:-15vw !important;
  background-image:var(--asset-lab-front,none), var(--asset-lab-rear,none) !important;
  background-position:right bottom, right bottom !important;
}

/* Phone / tablet layouts use the wider 154vw venue canvas. Use a wider moving
   overlap so the cover still lands over the gap instead of leaving daylight
   between the extension and the main scene plate. */
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-fort-front::before,
  #adventures .worlds-venues-continuation .venue-zoo-front::after,
  #adventures .worlds-venues-continuation .venue-lab-front::after {
    width:24vw !important;
    background-size:154vw 90vh, 154vw 90vh !important;
  }
  #adventures .worlds-venues-continuation .venue-fort-front::before {
    left:-23vw !important;
  }
  #adventures .worlds-venues-continuation .venue-zoo-front::after,
  #adventures .worlds-venues-continuation .venue-lab-front::after {
    right:-23vw !important;
  }
}


/* v290 — real venue scenery extensions ------------------------------------
   Previous versions tried to create the edge covers by reusing the whole
   source image inside pseudo-elements. That made registration fragile and, in
   the Zoo scene, could sample the capybara itself. These are now real cropped
   scenery assets inside the MOVING front plane. They therefore inherit the
   exact same rise/drop and horizontal parallax as the rest of the scene. */

/* Completely retire all historical pseudo-element edge fixes. */
#adventures .worlds-venues-continuation .venue-stage-fort::before,
#adventures .worlds-venues-continuation .venue-stage-zoo::after,
#adventures .worlds-venues-continuation .venue-stage-lab::after,
#adventures .worlds-venues-continuation .venue-fort-front::before,
#adventures .worlds-venues-continuation .venue-zoo-front::after,
#adventures .worlds-venues-continuation .venue-lab-front::after {
  content:none !important;
  display:none !important;
}

#adventures .worlds-venues-continuation .venue-edge-extension {
  position:absolute;
  top:0;
  bottom:0;
  z-index:3;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:100% 100%;
  opacity:1;
}

/* 360px crop from a 1916px source = 18.79% of the moving front canvas.
   Leave ~1.3% inside the main Fort artwork as a real overlap. */
#adventures .worlds-venues-continuation .venue-edge-extension-fort {
  left:-17.5%;
  width:18.8%;
  background-image:var(--asset-fort-left-extension,none);
  background-position:right bottom;
}

/* The Zoo/Lab strips are clean 180px crops from the far-right side of the
   1916px scene source = 9.39%. They overlap the parent artwork by ~1.2%.
   The Zoo crop contains only reeds/lantern/vegetation — no capybara. */
#adventures .worlds-venues-continuation .venue-edge-extension-zoo,
#adventures .worlds-venues-continuation .venue-edge-extension-lab {
  right:-8.2%;
  width:9.4%;
  background-position:left bottom;
}
#adventures .worlds-venues-continuation .venue-edge-extension-zoo {
  background-image:var(--asset-zoo-right-extension,none);
}
#adventures .worlds-venues-continuation .venue-edge-extension-lab {
  background-image:var(--asset-lab-right-extension,none);
}

/* At the narrow breakpoint the parent plane itself becomes 154vw, but these
   child percentages stay registered because they are relative to that moving
   parent rather than to the viewport. Give a little more physical overlap. */
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-edge-extension-fort {
    left:-17.0%;
    width:18.8%;
  }
  #adventures .worlds-venues-continuation .venue-edge-extension-zoo,
  #adventures .worlds-venues-continuation .venue-edge-extension-lab {
    right:-7.7%;
    width:9.4%;
  }
}

/* v291 — register moving scenery strips to the visible scene edge ----------
   The v290 extension assets were correct, but their coordinates were based on
   the outside of the overscan canvas. During the venue pan that placed them
   beside, rather than over, the exposed edge. Keep the same moving children
   and simply register them to the visible artwork with a deliberate overlap. */

/* Fort: on normal / tablet layouts the stage begins offscreen left, then pans
   right. -4% leaves the crop just outside the source edge while still carrying
   enough of it over the visible seam to cover the valley slit. */
#adventures .worlds-venues-continuation .venue-edge-extension-fort {
  left:-4% !important;
  width:18.8% !important;
}

/* Zoo and Lab pan left. A -4% right offset makes the 9.4%-wide strip overlap
   the real right edge of the moving source instead of sitting beyond it. */
#adventures .worlds-venues-continuation .venue-edge-extension-zoo,
#adventures .worlds-venues-continuation .venue-edge-extension-lab {
  right:-4% !important;
  width:9.4% !important;
}

/* On the genuinely narrow layout the 154vw stage starts much farther left.
   Fort therefore needs its strip moved inward on that larger moving canvas;
   the right-hand Zoo/Lab registration remains correct at -4%. */
@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-edge-extension-fort {
    left:8.5% !important;
    width:18.8% !important;
  }
  #adventures .worlds-venues-continuation .venue-edge-extension-zoo,
  #adventures .worlds-venues-continuation .venue-edge-extension-lab {
    right:-4% !important;
    width:9.4% !important;
  }
}


/* v293 — clean rendered venue overlap scenery ------------------------------
   Use the FIRST clean transparent overlap renders, not the later opaque
   black/gold versions. The clean artwork is horizontally flipped so the solid
   scenery sits on the exposed viewport side while its transparent edge fades
   inward over the live venue plane. This gives each venue fresh edge scenery
   without duplicating the main plate and without a glowing seam. */
#adventures .worlds-venues-continuation .venue-edge-extension {
  top:0 !important;
  bottom:0 !important;
  width:28.6% !important;
  background-size:contain !important;
  background-repeat:no-repeat !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}

/* Fort pans right and exposes the left edge. The flipped transparent render
   is mostly outside the moving plate, then feathers inward over the Fort. */
#adventures .worlds-venues-continuation .venue-edge-extension-fort {
  left:-10.5% !important;
  right:auto !important;
  background-image:var(--asset-fort-left-extension,none) !important;
  background-position:left bottom !important;
}

/* Zoo and Lab pan left and expose the right edge. Their flipped renders put
   the new scenery on the outside and feather back into the live set. */
#adventures .worlds-venues-continuation .venue-edge-extension-zoo,
#adventures .worlds-venues-continuation .venue-edge-extension-lab {
  right:-10.5% !important;
  left:auto !important;
  width:28.6% !important;
  background-position:right bottom !important;
}
#adventures .worlds-venues-continuation .venue-edge-extension-zoo {
  background-image:var(--asset-zoo-right-extension,none) !important;
}
#adventures .worlds-venues-continuation .venue-edge-extension-lab {
  background-image:var(--asset-lab-right-extension,none) !important;
}

/* Desktop build is the active target. Keep the same overlap relationship on
   narrower desktop/tablet previews rather than falling back to the retired
   narrow crop geometry. */
@media (max-width:1180px) {
  #adventures .worlds-venues-continuation .venue-edge-extension-fort {
    left:-10.5% !important;
    width:28.6% !important;
  }
  #adventures .worlds-venues-continuation .venue-edge-extension-zoo,
  #adventures .worlds-venues-continuation .venue-edge-extension-lab {
    right:-10.5% !important;
    width:28.6% !important;
  }
}

/* v294 — keep Zoo/Lab edge scenery behind their foreground subjects -------
   The clean transparent overlap renders were correct, but in v293 they lived
   inside the front plane and therefore painted over subjects already present
   in that plane (the Zoo capybara and the Lab bench). Give those two scenes a
   dedicated moving overlap plane between rear and front. It uses the same
   transform variables as the front artwork, so the seam behaviour is unchanged
   while the original foreground remains visually on top. Fort stays exactly as
   v293 because its left-hand overlap is already approved. */
#adventures .worlds-venues-continuation .venue-edge-extension-plane {
  z-index:1 !important;
  background:none !important;
  pointer-events:none !important;
  overflow:visible !important;
}
#adventures .worlds-venues-continuation .venue-edge-extension-plane-zoo {
  transform:translate3d(var(--venue-zoo-front-x,0vw),var(--venue-zoo-front-y,90vh),0) !important;
}
#adventures .worlds-venues-continuation .venue-edge-extension-plane-lab {
  transform:translate3d(var(--venue-lab-front-x,0vw),var(--venue-lab-front-y,90vh),0) !important;
  bottom:-7vh !important;
}

/* The rear layer is z1 and the foreground is z2. Put the extension planes in
   the same stage order after rear and before front; DOM order resolves the z1
   tie so the extension remains above rear but below the original foreground. */
#adventures .worlds-venues-continuation .venue-stage-zoo .venue-zoo-front,
#adventures .worlds-venues-continuation .venue-stage-lab .venue-lab-front {
  z-index:2 !important;
}

@media (max-width:760px) {
  #adventures .worlds-venues-continuation .venue-edge-extension-plane-lab {
    bottom:-5vh !important;
  }
}


/* v295 — bottom navigation / progress UI consistency ---------------------
   Treat the intro cue and the chapter progress rails as one shared bottom UI
   family. They now sit on the same baseline, use the same visual density and
   the intro cue fades out before any later rail becomes active. */
:root {
  --ui-rail-bottom: clamp(18px, 2.5vh, 28px);
  --ui-rail-width: min(470px, 42vw);
  --ui-rail-height: 20px;
  --ui-rail-opacity: .76;
}

.scroll-cue,
.worlds-progress,
.venues-progress,
.examples-progress {
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: var(--ui-rail-bottom) !important;
  text-shadow: var(--raedel-shadow-ui, 0 2px 8px rgba(0,0,0,.42));
}

.scroll-cue {
  position: absolute;
  z-index: 90 !important;
  width: min(620px, 56vw);
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto auto minmax(90px, 1fr);
  align-items: center;
  column-gap: 12px;
  opacity: var(--hero-scroll-opacity, .72) !important;
  pointer-events: none;
}
.scroll-cue::before,
.scroll-cue::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, rgba(240,202,121,.08), rgba(240,202,121,.7), rgba(240,202,121,.14));
}
.scroll-cue .mouse {
  justify-self: center;
}
.scroll-cue span:last-child {
  justify-self: center;
  white-space: nowrap;
}

.worlds-progress,
.venues-progress,
.examples-progress {
  height: var(--ui-rail-height) !important;
  width: var(--ui-rail-width) !important;
  opacity: var(--ui-rail-opacity) !important;
}
.worlds-progress-line,
.venues-progress-line,
.examples-progress-line {
  top: 9px !important;
}
.worlds-progress-dot,
.venues-progress-dot,
.examples-progress-dot {
  top: 5px !important;
  width: 9px !important;
  height: 9px !important;
}

@media (max-width:760px) {
  :root {
    --ui-rail-bottom: 16px;
    --ui-rail-width: min(78vw, 360px);
  }
  .scroll-cue {
    width: min(88vw, 430px);
    grid-template-columns: minmax(44px, 1fr) auto auto minmax(44px, 1fr);
    column-gap: 10px;
  }
}


/* v296 — functional opening hero progress rail ---------------------------
   v295 normalised the bottom position but the opening line was still purely
   decorative. The opening cue now has a real track driven by --hero-progress,
   a gold fill and a moving marker. It completes before fading away. */
.scroll-cue {
  position:fixed !important;
  z-index:110 !important;
  left:50% !important;
  bottom:var(--ui-rail-bottom) !important;
  width:min(620px,56vw) !important;
  height:48px;
  display:block !important;
  transform:translateX(-50%) !important;
  opacity:var(--hero-scroll-opacity,.76) !important;
  pointer-events:none;
  text-transform:uppercase;
  font-size:.66rem;
  letter-spacing:.12em;
}
.scroll-cue::before,
.scroll-cue::after {
  content:none !important;
  display:none !important;
}
.scroll-cue-track {
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  height:1px;
  background:rgba(240,202,121,.24);
  box-shadow:0 1px 7px rgba(0,0,0,.34);
}
.scroll-cue-fill {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:calc(var(--hero-progress,0) * 100%);
  background:linear-gradient(90deg,rgba(240,202,121,.62),#f0ca79);
  box-shadow:0 0 8px rgba(240,202,121,.24);
  will-change:width;
}
.scroll-cue-dot {
  position:absolute;
  top:50%;
  width:8px;
  height:8px;
  border:1px solid rgba(240,202,121,.64);
  border-radius:50%;
  background:rgba(7,28,40,.86);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(3,18,27,.15);
}
.scroll-cue-dot-1 { left:7%; }
.scroll-cue-dot-2 { left:36%; }
.scroll-cue-dot-3 { left:65%; }
.scroll-cue-dot-4 { left:94%; }
.scroll-cue-marker {
  position:absolute;
  z-index:3;
  left:calc(var(--hero-progress,0) * 100%);
  top:50%;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#f0ca79;
  border:1px solid rgba(255,245,218,.78);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px rgba(215,162,77,.16),0 0 10px rgba(240,202,121,.46);
  will-change:left;
}
.scroll-cue-content {
  position:absolute;
  z-index:4;
  left:50%;
  top:0;
  height:30px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 14px;
  transform:translateX(-50%);
  white-space:nowrap;
  background:linear-gradient(90deg,transparent 0%,rgba(3,18,27,.68) 15%,rgba(3,18,27,.68) 85%,transparent 100%);
  text-shadow:var(--raedel-shadow-ui,0 2px 8px rgba(0,0,0,.42));
}
.scroll-cue-content .mouse {
  flex:0 0 auto;
}
.scroll-cue-label {
  display:inline !important;
}

@media (max-width:760px) {
  .scroll-cue {
    width:min(88vw,430px) !important;
    height:42px;
  }
  .scroll-cue-label {
    display:none !important;
  }
  .scroll-cue-content {
    padding:0 10px;
    height:24px;
  }
  #adventures .worlds-venues-continuation .venue-embedded-finale-label {
    bottom:calc(var(--ui-rail-bottom, 16px) + 36px);
    font-size:.64rem;
    letter-spacing:.16em;
  }
}


/* v298 — one shared site progress rail ----------------------------------
   Replace the multiple chapter-specific rails with one global fixed progress
   indicator so the bottom UI never duplicates or appears to reset mid-journey. */
.how-progress,
.worlds-progress,
.venues-progress,
.examples-progress {
  display:none !important;
}

/* v301 — primary navigation prepared for the full product site ------------
   The homepage now mirrors the future information architecture. Keep all five
   desktop destinations readable without making the header feel crowded. */
@media (min-width:761px) and (max-width:1380px) {
  .site-header { padding-left:3.2vw; padding-right:3.2vw; }
  .nav-links { gap:clamp(13px,1.65vw,23px); font-size:.78rem; }
  .nav-cta { padding:9px 13px; }
  .brand-logo { width:clamp(166px,13vw,218px); }
}