/* Encounters on the route, before the door. */
.storybook{height:375svh}.cabin-book{height:290svh;position:relative}
.aerial-depth{position:absolute;top:50%;left:62%;width:max(100%,177.77778svh);aspect-ratio:16/9;transform:translate(-62%,-50%);pointer-events:none}
.oxber-occlusion{position:absolute;inset:0;clip-path:url(#aerial-cabin-occlusion)}
.oxber-guest{position:absolute;width:4.8%;left:61.66%;bottom:44.21%;opacity:0;transform-origin:80% 95%}
/* Window spill is rendered onto the model, preserving directional amber light. */
.oxber-guest img{display:block;width:100%;height:auto;max-width:none;filter:brightness(.82)}
.oxber-shadow{position:absolute;left:15%;bottom:1%;width:73%;height:7%;border-radius:50%;background:#050a08;opacity:.48;filter:blur(2px)}
html[data-motion="reduced"] .oxber-guest{left:57.60%!important;opacity:1!important;transform:none!important}
.canopy-mid{background:linear-gradient(transparent 65%,#07100c 75%)}
.path-ferns-near{clip-path:none;filter:brightness(.70) saturate(.84)}
.descent-layers .canopy-far{filter:brightness(.75) saturate(.75)}
.descent-layers .canopy-mid{filter:brightness(.88) saturate(.85)}
.door-back{background:none;filter:brightness(.70) saturate(.84)}
.door-back>img{position:absolute;max-width:none;width:1000%;height:371.75%;left:-449%;top:-162.45%;transform:scaleX(-1)}
.door-edge{width:7px;overflow:hidden;background:#3b291a;clip-path:polygon(0 0,85% .5%,100% 5%,76% 12%,100% 19%,82% 27%,100% 39%,72% 50%,100% 61%,82% 74%,100% 88%,70% 99%,0 100%)}
.door-edge>img{position:absolute;max-width:none;width:24000%;height:371.75%;left:-12600%;top:-162.45%;filter:brightness(.62)}
h2 em{position:relative;display:inline-block}
.light-word{position:relative;display:inline-block}
.light-word::after{content:'';position:absolute;left:-3%;width:106%;height:.3em;bottom:-.23em;background:url('assets/story-v10/keyword-flourish.svg') center/100% 100% no-repeat;opacity:.75;pointer-events:none}
.mischief-copy h2::after,.studio-title h2::after{display:none}
.studio{display:block;min-height:740px;padding-top:105px;padding-bottom:100px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 76% 47%,#34332566,transparent 62%),#10130f}
.studio-copy{position:relative;max-width:470px;width:46%;z-index:2}
.studio h2{font-size:clamp(46px,4.7vw,76px)}
.studio-words{padding:0;margin-top:46px;border:0;background:none;box-shadow:none;font-size:16px;max-width:430px}
.studio-words::before,.studio-words::after{display:none}
.studio-words .quiet-note{font-size:15px;margin-top:25px}
.grunk-portrait{position:absolute;left:31%;top:4%;width:80%;height:94%;z-index:1;pointer-events:none;mask-image:linear-gradient(to right,transparent,black 13%),linear-gradient(to bottom,black 78%,transparent 100%);mask-composite:intersect}
.grunk-portrait img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:43% center;filter:brightness(.76) saturate(.85)}
.studio:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#10130f 20%,#10130fcc 34%,#10130f33 47%,transparent 60%),linear-gradient(transparent 85%,#10130f);pointer-events:none}
.mischief{background:radial-gradient(ellipse at 76% 48%,#4c382345,transparent 60%),#10130f;border:0;padding-top:90px;padding-bottom:100px}
.mischief-copy>p:not(.eyebrow){margin-top:40px}.mischief-copy .secondary-copy{margin-top:24px!important}
/* The release plate owns the table throughout the result. Only faces and upper
   bodies change, so neither landed die nor the lantern can jump between plates. */
.trog-gathering.has-result .trogs-throw{opacity:1}
.trog-gathering .trogs-reaction{mask-image:linear-gradient(black 41%,transparent 47%)}
.cabin-book:before{content:'';position:absolute;left:0;right:0;top:0;height:65px;background:linear-gradient(#10130f,transparent);z-index:15;pointer-events:none}
html[data-motion="reduced"] .cabin-book{height:auto}
@media(max-width:699px){
 .aerial-depth{left:64%;transform:translate(-64%,-50%)}
 .storybook{height:395svh}.cabin-book{height:305svh}
 .studio{min-height:0;padding-top:76px;padding-bottom:60px;display:flex;flex-direction:column}
 .studio-copy{width:100%;max-width:none}.studio h2{font-size:46px}
 .studio-words{font-size:15px;margin-top:40px}.studio-words p+p{margin-top:20px}
 .grunk-portrait{position:relative;left:auto;top:auto;align-self:center;width:123%;height:360px;margin-top:25px;margin-bottom:-20px;mask-image:linear-gradient(black 78%,transparent)}
 .grunk-portrait img{object-position:center 40%;object-fit:cover}
 .studio:after{display:none}.mischief{padding-top:55px;padding-bottom:80px}
 /* Frame the hearth through the doorway; all room layers share this crop. */
 .workshop-plane{left:44.5%;transform:translate(-44.5%,-50%)}
 .workshop-copy{top:58%}
 .workshop-copy .scene-description{max-width:250px}
 .path-ferns-near img{position:absolute;left:-20%;bottom:0;width:140%;height:auto;object-fit:contain}
 .light-word::after{height:.3em;bottom:-.23em}
}

/* Keep sky landmarks and the walking character on one responsive image plane. */
.aerial-media>img,.aerial-media>video{left:var(--opening-left,0px);top:0;width:var(--opening-width,100%);height:var(--opening-height,100%);object-fit:fill;object-position:center}
.aerial-depth{top:0;left:var(--opening-left,0px);width:var(--opening-width,100%);height:var(--opening-height,auto);transform:none}
.aerial-media::before{content:'';position:absolute;inset:-2%;background:url('assets/scenes/grimshack-moonlit-forest-3840.webp') center bottom/cover no-repeat;filter:blur(14px);opacity:0}
[data-sky-gutters="true"] .aerial-media::before{opacity:1}
[data-sky-gutters="true"] .aerial-media>img,[data-sky-gutters="true"] .aerial-media>video{mask-image:linear-gradient(90deg,transparent,black 5%,black 95%,transparent)}
.aerial-moon{display:none;position:absolute;left:var(--opening-moon-left);top:var(--opening-moon-top);width:var(--opening-moon-size);height:var(--opening-moon-size);overflow:hidden;pointer-events:none;mask-image:radial-gradient(ellipse 48% 48% at 50% 36%,black 47%,transparent 98%)}
.aerial-moon>img{position:absolute;max-width:none;width:1500%;height:843.75%;left:-1315%;top:0}
[data-sky-crop="true"] .aerial-moon{display:block}
/* Portrait uses a separate visible moon; the video's original bats are cropped.
   Anchor these silhouettes to that same moon rather than the wide film plane. */
.moon-bats{display:none;position:absolute;left:calc(var(--opening-moon-left) - var(--opening-moon-size));top:var(--opening-moon-top);width:calc(var(--opening-moon-size) * 3);height:var(--opening-moon-size);pointer-events:none;z-index:1}
html[data-motion="full"] [data-sky-crop="true"] .moon-bats{display:block}
.moon-bat{position:absolute;left:0;top:30%;width:clamp(11px,3.3vw,19px);height:auto;fill:#070c10;opacity:0;animation:moon-bat-pass 13s linear infinite;animation-play-state:paused}
.moon-bat path{transform-origin:center;animation:moon-bat-flap .23s ease-in-out infinite alternate;animation-play-state:paused}
.moon-bat:nth-child(2){top:41%;width:clamp(9px,2.8vw,16px);animation-delay:1.1s}
.moon-bat:nth-child(3){top:24%;width:clamp(10px,3vw,17px);animation-delay:2.4s}
.opening-is-active .moon-bat,.opening-is-active .moon-bat path{animation-play-state:running}
@keyframes moon-bat-pass{0%{left:0;opacity:0;transform:translateY(7px) rotate(-9deg)}3%{opacity:.85}30%{opacity:.85}34%{left:100%;opacity:0;transform:translateY(-8px) rotate(7deg)}100%{left:100%;opacity:0;transform:translateY(-8px) rotate(7deg)}}
@keyframes moon-bat-flap{from{transform:scaleY(.45)}to{transform:scaleY(1)}}

@media(min-width:1000px) and (max-height:630px){
 .aerial-copy{top:24%;width:45%}
 .aerial-copy h1{font-size:clamp(40px,10vh,64px)}
 .aerial-copy .eyebrow{margin-bottom:14px}
 .aerial-copy .scene-description{font-size:14px;line-height:1.6;margin-top:18px}
 .aerial-copy .scroll-cue{margin-top:20px;font-size:9px}
}