/* Keep the backdrop and mascot registered in a shared 3:2 scene. */
.hero-layered{container-type:size;pointer-events:none}
.hero-scene{position:absolute;width:max(100cqw,150cqh);aspect-ratio:3/2;left:50%;top:57%;transform:translate(-50%,-57%) translateY(var(--scene-shift,0px)) scale(var(--scene-scale,1));transform-origin:center 70%}
.hero-layered .atelier-plate{display:block;width:100%;height:100%;transform:none;object-fit:fill}
.hero-fio{position:absolute;left:70%;top:37%;width:25%;aspect-ratio:1;transform:rotate(9deg);transform-origin:50% 94%}
/* Registered scene copies keep Fio behind the paper and foreground pencils. */
.hero-layered .atelier-occluder{position:absolute;inset:0;display:block;width:100%;height:100%;transform:none;object-fit:fill}
.atelier-paper{clip-path:polygon(63.15% 24.9%,84.44% 26.9%,84.310% 27.344%,84.115% 29.297%,83.984% 31.250%,83.789% 33.203%,83.594% 35.156%,83.398% 37.109%,83.268% 39.063%,83.073% 41.016%,82.813% 42.969%,82.617% 44.922%,82.357% 46.875%,82.096% 48.828%,81.771% 50.781%,81.380% 52.734%,81.055% 54.688%,80.664% 56.641%,80.143% 58.594%,79.557% 60.547%,79.167% 61.523%,78.776% 62.500%,78.451% 63.477%,77.995% 64.453%,77.474% 65.430%,76.953% 66.406%,76.497% 67.383%,76.237% 68.359%,83.464% 69.336%,84.570% 70.313%,84.831% 71.289%,82.878% 72.266%,80.729% 73.242%,79.036% 74.219%,75.651% 75.195%,71.875% 76.172%,68.294% 77.148%,64.583% 78.125%,43% 78%,43% 64%,55% 63%)}
.atelier-pencils{clip-path:polygon(46% 86%,48% 83%,86.8% 72.3%,88% 72.7%,88.5% 75%,90% 75%,94% 79%,94% 84%,80% 94%,67% 93%,55% 91%)}
.fio-idle,.fio-frame{width:100%;height:100%}
.fio-idle{transform-origin:50% 94%}
.fio-frame{overflow:hidden;transform:scaleX(-1)}
.hero-layered .fio-sprite{display:block;width:200%;max-width:none;height:100%;object-fit:fill;transform:none}
.hero[data-fio-motion="running"] .fio-idle{animation:fio-breathe 5.8s ease-in-out infinite}
.hero[data-fio-motion="running"] .fio-sprite{animation:fio-blink 7.3s steps(1,end) infinite}
@keyframes fio-breathe{0%,100%{transform:rotate(-.45deg) scaleY(1)}50%{transform:rotate(.45deg) scaleY(1.012)}}
@keyframes fio-blink{0%,43%,46%,100%{transform:translateX(0)}44%,45%{transform:translateX(-50%)}}
.hero-credit{display:flex;gap:14px;align-items:center}
.fio-motion-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #ffffff50;border-radius:6px;background:#173b2b;color:white;cursor:pointer}
.fio-motion-toggle[hidden]{display:none}
.fio-motion-toggle:hover{background:#24533e}
.fio-motion-toggle:focus-visible{outline:3px solid #b9efd9;outline-offset:3px}
.fio-motion-toggle .icon{grid-area:1/1;width:16px;height:16px}
.fio-motion-toggle .play-icon,.fio-motion-toggle[aria-pressed="true"] .pause-icon{display:none}
.fio-motion-toggle[aria-pressed="true"] .play-icon{display:block}
.fio-motion-toggle:disabled{opacity:.65;cursor:default}
.hero[data-fio-motion="stopped"] .hero-scene{--scene-shift:0px;--scene-scale:1}
@media(max-width:1100px) and (min-width:761px){.hero{min-height:900px}.hero-inner{padding-top:136px}.hero-layered{top:auto;height:46%;mask-image:linear-gradient(to bottom,transparent,#000 18%)}.hero-scene{left:auto;top:auto;right:0;bottom:0;transform:none}}
@media(max-width:760px){.hero-scene{left:auto;top:auto;right:0;bottom:0;transform:none}.hero-credit{gap:8px}.hero-credit .image-credit{max-width:95px;font-size:8px}}
@media(prefers-reduced-motion:reduce){.hero-scene{--scene-shift:0px;--scene-scale:1}.fio-idle,.hero-layered .fio-sprite{animation:none!important;transform:none}}