/* V9: overlapping depths, a continuous doorway, and small discoveries. */
.storybook{height:565svh}
.descent-layers .canopy{position:absolute;left:0;top:0;width:100%;will-change:transform;pointer-events:none}
.descent-layers .canopy img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none;will-change:auto}
.descent-layers .canopy-far{height:100%;z-index:0;transform:translateY(60svh)}
.descent-layers .canopy-mid{height:130%;z-index:1;transform:translateY(45svh)}
.descent-layers .canopy-near{height:220%;z-index:2;transform:translateY(110svh);background:linear-gradient(transparent 20%,#07100c 25%,#07100c 73%,transparent 79%)}
.descent-whisper{top:41%;padding:20px;font-size:clamp(26px,3vw,48px);text-shadow:0 3px 16px #000}
.path-ferns{filter:brightness(.63) saturate(.85)}
.path-ferns-near{clip-path:polygon(0 48%,22% 72%,34% 90%,68% 94%,83% 76%,100% 50%,100% 100%,0 100%);transform-origin:50% 65%;filter:brightness(.45) saturate(.8);z-index:1}
.path-copy{z-index:3}.path-beat .scene-shade{z-index:2}
.workshop-beat{z-index:2}.shack-beat{z-index:3;pointer-events:none}
.shack-plate{clip-path:url(#shack-aperture)}
.door-leaf{overflow:visible;transform-style:preserve-3d;backface-visibility:visible;background:none;box-shadow:none}
.door-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;box-shadow:0 0 1px #38291a}
.door-front{transform:translateZ(3px)}
.door-front img{position:absolute;max-width:none;width:1000%;height:371.75%;left:-449%;top:-162.45%}
.door-back{transform:rotateY(180deg) translateZ(3px);background:linear-gradient(90deg,#160f0a33,transparent 35%,#120c0a66),repeating-linear-gradient(90deg,transparent 0 23%,#160f0abb 24%,#ab815222 25%),url('assets/cabin-wood.png') center/200% 100%;filter:brightness(.72)}
.door-edge{position:absolute;left:100%;top:0;width:6px;height:100%;background:#4e3721;transform-origin:left;transform:translateZ(3px) rotateY(90deg)}
.shack-beat .scene-shade{opacity:calc(1 - var(--entry,0))}
.workshop-beat .scene-shade{opacity:var(--entry,0);z-index:4}
.workshop-copy{z-index:5}
.workshop-plane{position:absolute;width:max(100%,calc(100svh * 1672 / 941));aspect-ratio:1672/941;left:48%;top:50%;transform:translate(-48%,-50%)}
.workshop-plane>.workshop-plate,.workshop-plane>.bench-occlusion{width:100%;height:100%;max-width:none}
.bench-occlusion{position:absolute;inset:0;clip-path:polygon(60% 54%,100% 57%,100% 100%,60% 100%);z-index:3;pointer-events:none}
.twix-stage{position:absolute;left:60%;top:32%;width:20%;aspect-ratio:1.5;z-index:2;overflow:hidden;clip-path:inset(0 0 0);opacity:0;transform:translateY(55%);filter:brightness(.84) saturate(.83);transition:opacity .18s,transform .7s cubic-bezier(.18,.85,.24,1.2)}
.twix-stage>img{width:100%;height:auto}
.twix-revealed .twix-stage{opacity:1;transform:translateY(0)}
.hearth-glow{position:absolute;left:37%;top:42%;width:16%;height:29%;background:radial-gradient(ellipse,#ffb84599 0,#fa862f55 18%,#ffa84e1a 40%,transparent 70%);mix-blend-mode:screen;animation:hearth-light 2.9s infinite;pointer-events:none;z-index:1}
@keyframes hearth-light{0%,100%{opacity:.32;transform:scale(1)}17%{opacity:.50}30%{opacity:.34;transform:scale(.98)}43%{opacity:.57}60%{opacity:.4;transform:scale(1.03)}78%{opacity:.47}}
.chimney-smoke{position:absolute;left:55%;top:-7%;width:13%;height:23%;pointer-events:none;overflow:visible}
.chimney-smoke i{position:absolute;left:45%;bottom:0;width:28%;height:55%;border-radius:50%;background:radial-gradient(ellipse,#a6a39160,transparent 70%);filter:blur(8px);opacity:0;animation:smoke-drift 7s linear infinite}
.chimney-smoke i:nth-child(2){animation-delay:-2.6s}.chimney-smoke i:nth-child(3){animation-delay:-5.1s}
@keyframes smoke-drift{0%{opacity:0;transform:translate(0,10%) scale(.7)}20%{opacity:.22}70%{opacity:.12}100%{opacity:0;transform:translate(48%,-100%) scale(1.65)}}
.shack-bats{position:absolute;left:65%;top:0;width:28%;height:18%;overflow:visible;fill:#070c10;pointer-events:none}
.bat-one{animation:shack-bat-one 13s linear infinite}.bat-two{animation:shack-bat-two 17s linear infinite}
@keyframes shack-bat-one{0%,12%{opacity:0;transform:translate(5px,45px) scale(.26,.22)}17%{opacity:.9}23%{transform:translate(90px,22px) scale(.26,.12)}31%{transform:translate(170px,37px) scale(.26,.25)}40%{opacity:.8;transform:translate(280px,16px) scale(.26,.15)}44%,100%{opacity:0;transform:translate(310px,30px) scale(.26,.22)}}
@keyframes shack-bat-two{0%,30%{opacity:0;transform:translate(0,19px) scale(.19,.14)}35%{opacity:.8}42%{transform:translate(95px,41px) scale(.19,.2)}53%{transform:translate(190px,28px) scale(.19,.10)}63%{opacity:.8;transform:translate(290px,44px) scale(.19,.19)}67%,100%{opacity:0;transform:translate(320px,34px) scale(.19,.15)}}
.discovery-button{pointer-events:auto;display:inline-flex;align-items:center;gap:12px;background:#16170d80;border:1px solid #d0b67b55;border-radius:2px;padding:12px 17px;margin-top:24px;color:#d4c79f;font-size:12px;transition:background .2s}
.discovery-button:hover{background:#67513166}.discovery-button:disabled{pointer-events:none}.discovery-button span{font-size:19px}
.discovery-note{display:block;min-height:18px;margin-top:12px;color:#c7c2aa;font-size:11px;letter-spacing:.02em}
.studio{background:radial-gradient(ellipse at 17% 55%,#382b1c70,transparent 57%),linear-gradient(145deg,#11130f,#181710 62%,#10120e);padding-top:98px;padding-bottom:108px;gap:8%;align-items:center}
.studio-title{position:relative}.storybook-mark{width:126px;height:auto;opacity:.77;margin:-24px 0 28px -8px}
.studio-title h2::after{content:'';display:block;width:75%;max-width:350px;height:75px;margin-top:12px;background:url('assets/story-v9/flourish.svg') center/contain no-repeat;opacity:.43}
.studio-words{padding:38px 38px 34px;max-width:540px;position:relative;background:linear-gradient(135deg,#64442715,#322a201f);border:1px solid #b29a6629;box-shadow:inset 0 0 40px #090c0b45}
.studio-words:before,.studio-words:after{content:'';position:absolute;width:13px;height:13px;border:1px solid #baa06b70;transform:rotate(45deg);background:#1b1b12}
.studio-words:before{top:-7px;left:50%}.studio-words:after{bottom:-7px;left:50%}
.ink-corner{position:absolute;width:73px;height:38px;background:url('assets/story-v9/flourish.svg') center/150px auto no-repeat;opacity:.46;pointer-events:none}
.corner-top{top:-20px;left:-19px;transform:rotate(-28deg)}.corner-bottom{bottom:-20px;right:-19px;transform:rotate(152deg)}
.mischief{background:radial-gradient(ellipse at 78% 55%,#4c382360,transparent 59%),linear-gradient(#10120e,#12150f 65%,#090c0b);border-top-color:#b49b5d26}
.mischief-copy h2::after{content:'';display:block;width:180px;height:38px;margin-top:12px;background:url('assets/story-v9/flourish.svg') center/contain no-repeat;opacity:.47}
.trog-gathering .trogs-reaction,.trog-gathering .trogs-throw{position:absolute;inset:0;opacity:0;transition:opacity .12s ease;pointer-events:none}
.trog-gathering .trogs-ready{transition:opacity .12s ease}
.trog-gathering.is-throwing .trogs-ready,.trog-gathering.has-result .trogs-ready{opacity:0}
.trog-gathering.is-throwing .trogs-throw,.trog-gathering.has-result .trogs-reaction{opacity:1}
.thrown-die{position:absolute;width:4.3%;height:auto;left:30.3%;top:42.3%;opacity:0;pointer-events:none;transform:translate(-50%,-50%);z-index:3;filter:drop-shadow(1px 2px 2px #1118)}
.trog-trigger{position:absolute;left:3%;top:27%;width:35%;height:65%;border:0;background:transparent;z-index:4;display:flex;align-items:flex-end;justify-content:center;padding:0 0 2px}
.trog-trigger>span{padding:8px 11px;border-bottom:1px solid #c7ad7455;color:#cfbc8b;font-family:Georgia,serif;font-size:13px;font-style:italic;background:#10140bd9;border-radius:2px;white-space:nowrap;transition:color .2s,background .2s}
.trog-trigger:hover>span{background:#302817ee;color:#f1dfb5}.trog-trigger:disabled{cursor:wait}
.trog-result{position:absolute;left:29%;right:4%;top:100%;color:#c7b894;text-align:center;font-size:11px;line-height:1.6;min-height:2em;padding-top:12px}
html[data-motion="reduced"] .storybook{height:auto}
html[data-motion="reduced"] .shack-plate{clip-path:none}
html[data-motion="reduced"] .workshop-beat .scene-shade{opacity:1}
html[data-motion="reduced"] .shack-beat .scene-shade{opacity:1}
html[data-motion="reduced"] .path-ferns-near{display:none}
html[data-motion="reduced"] .twix-stage{transition:none}
html:not(.js) .twix-trigger,html:not(.js) .trog-trigger{display:none}
@media(max-width:699px){.storybook{height:580svh}.descent-whisper{font-size:29px;top:40%;padding:20px 10%;line-height:1.25}.workshop-plane{left:70%;transform:translate(-70%,-50%)}.workshop-copy{top:25%}.workshop-copy h2{font-size:48px}.workshop-copy .scene-description{max-width:200px}.discovery-button{font-size:11px;padding:10px 13px}.studio{padding-top:80px;padding-bottom:85px}.storybook-mark{width:105px;margin-top:0}.studio-title h2::after{width:250px;height:66px;margin:5px 0 20px}.studio-words{padding:30px 25px;margin-top:20px;font-size:15px}.mischief{padding-bottom:65px}.mischief-copy h2::after{margin-top:4px}.trog-trigger>span{font-size:10px;padding:7px}.trog-result{font-size:10px;left:25%;right:15%;padding-top:7px}}

.clip-definitions{position:absolute;overflow:hidden;pointer-events:none}

.twix-stage{filter:brightness(.84) saturate(.83) sepia(.10)}


@media(max-width:699px){.path-copy{top:23%}}
@media(max-width:699px){.twix-stage{width:16%;left:64%;top:36.5%}}
@media(max-width:699px){.trog-gathering{width:114%;margin-left:-7%}.trog-result{left:12%;right:12%;top:100%}}