#beginning.forest-hero{display:block;position:relative;isolation:isolate;aspect-ratio:2048/684;min-height:0;height:auto;padding:0;overflow:hidden;background:#000}
#beginning.forest-hero .hero-picture{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0}
#beginning.forest-hero .immersive-hero{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:none}
#beginning.forest-hero .hero-vignette{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0003,transparent 40%);pointer-events:none}
#beginning.forest-hero .hero-heading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;width:100%;max-width:none;margin:0;padding:clamp(18px,2.4vw,46px) 6vw 0 20px;text-align:center;pointer-events:none}
#beginning.forest-hero .eyebrow{font:700 clamp(11px,1.1vw,17px)/1.3 Fell,Georgia,serif;letter-spacing:2.5px;color:#fff;text-shadow:1px 2px 3px #000;margin:0 0 10px}
#beginning.forest-hero h1{font-family:Uncial,Georgia,serif;font-size:clamp(92px,10vw,178px);font-weight:700;line-height:1.06;letter-spacing:.025em;color:#fff;-webkit-text-stroke:1.5px #07170e;paint-order:stroke fill;text-shadow:0 5px 0 #07170e,0 12px 16px #000c;filter:drop-shadow(0 7px 5px #000b);transform:none;margin:0;padding:0 5px;max-width:100%}


@media(max-width:900px) and (min-width:601px){#beginning.forest-hero h1{font-size:clamp(65px,9.5vw,100px)}}
@media(max-width:600px){
 #beginning.forest-hero{display:flex;flex-direction:column;aspect-ratio:auto;padding:0;background:#000}
 #beginning.forest-hero .hero-heading{position:relative;inset:auto;order:1;padding:26px 20px 14px}
 #beginning.forest-hero .hero-picture{position:relative;inset:auto;order:2;aspect-ratio:2048/684;height:auto;width:100%;margin:0}
 #beginning.forest-hero .immersive-hero{position:relative;inset:auto;height:auto;width:100%;object-fit:contain}
 #beginning.forest-hero h1{font-size:clamp(60px,18.4vw,112px);letter-spacing:.015em;-webkit-text-stroke:1px #07170e;text-shadow:0 4px 0 #07170e,0 9px 12px #000c}
 #beginning.forest-hero .eyebrow{font-size:12px;letter-spacing:1.5px;margin-bottom:10px}
 #beginning.forest-hero .hero-vignette{display:none}


}

/* Preserve every part of the hero foreground; the next scene starts below it. */
#river{margin-top:0;mask-image:none;-webkit-mask-image:none}

/* A soft feather joins the forest floor to the next scene’s night sky. */
#beginning.forest-hero .hero-picture:after{content:"";position:absolute;inset:auto 0 0;height:clamp(18px,4vw,64px);background:linear-gradient(transparent 0%,#0001 25%,#0009 72%,#000 100%);pointer-events:none}
.scene-bridge{height:0;background:#000;position:relative;z-index:2}
#river{background:#000;position:relative}
#river:before{content:"";position:absolute;inset:0 0 auto;height:clamp(10px,1.8vw,24px);background:linear-gradient(#000,transparent);z-index:1;pointer-events:none}
@media(max-width:600px){#beginning.forest-hero .hero-picture:after{height:clamp(11px,3.5vw,20px)}.scene-bridge{height:0}#river:before{height:12px}}

/* Twinkles are anchored to the star positions in the full, uncropped artwork. */
.hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.hero-stars i{position:absolute;left:var(--x);top:var(--y);display:block;width:clamp(8px,1.2vw,23px);height:clamp(8px,1.2vw,23px);opacity:.2;transform:translate(-50%,-50%);animation:hero-star-twinkle var(--speed) ease-in-out var(--delay) infinite;filter:drop-shadow(0 0 6px #ffffd5b3)}
.hero-stars i:before{content:"";position:absolute;inset:0;background:#fffce8;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.hero-stars i:after{content:"";position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(circle,#fffbc757,transparent 68%)}
@keyframes hero-star-twinkle{0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(.65)}45%,60%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}}
.still .hero-stars i{animation:none;opacity:.4}
@media(prefers-reduced-motion:reduce){.hero-stars i{animation:none;opacity:.4}}

/* The halo follows the moon in the image coordinate system, beneath the title. */
.hero-moon-glow{position:absolute;left:66.6%;top:16.4%;width:6.5%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;box-shadow:0 0 clamp(8px,2vw,32px) clamp(3px,.8vw,13px) #fff3bd99,0 0 clamp(18px,5vw,80px) clamp(6px,2vw,32px) #e9ec9e44;animation:moon-halo-breathe 7s ease-in-out infinite;mix-blend-mode:screen}
@keyframes moon-halo-breathe{0%,100%{opacity:.65}50%{opacity:1}}
.still .hero-moon-glow{animation:none;opacity:.85}
@media(prefers-reduced-motion:reduce){.hero-moon-glow{animation:none;opacity:.85}}