/* Living atelier. Every enhancement is optional; content and controls stay usable. */
.hero-line,.hero-word{display:block}
.hero-line{overflow:clip;padding-inline:4px;margin-inline:-4px}
.scene-stage{position:absolute;bottom:0;left:0;width:100%;aspect-ratio:3/2;transform-origin:50% 65%;isolation:isolate;mask-image:linear-gradient(to right,#000 76%,transparent),linear-gradient(to bottom,transparent,#000 13%,#000 84%,transparent);mask-composite:intersect}
.hero-scene .scene-stage>img{position:static;width:100%;height:auto;object-fit:fill;mask-image:none;transform:none;transition:none}
.arch-glow,.studio-beam{position:absolute;pointer-events:none;opacity:0;mix-blend-mode:screen}
.arch-glow{left:35%;top:27%;width:13%;height:33%;background:radial-gradient(ellipse,#ffab55a0,transparent 70%);filter:blur(14px)}
.studio-beam{left:57%;top:39%;width:26%;height:34%;background:linear-gradient(150deg,transparent,#ffc37926,transparent 80%);clip-path:polygon(100% 0,90% 100%,0 70%);transform-origin:100% 0;filter:blur(6px)}
.mascot{position:relative;display:block;aspect-ratio:1;width:80px;perspective:420px;direction:ltr}
.scene-mascot{position:absolute;left:49.2%;top:57%;width:7.6%;z-index:2}
.mascot-body{position:absolute;inset:0 5% 13%;border-radius:24%;background:linear-gradient(120deg,#fff9eb 2%,#e7decf 55%,#b6a78f);box-shadow:inset 2px 2px 5px #fff9, inset -3px -3px 7px #89785d38,3px 8px 12px #080f1b50;transform:rotateY(-12deg) rotateX(6deg);transform-origin:50% 85%}
.mascot-body::before{content:'';position:absolute;inset:2% 3% 6% 84%;background:linear-gradient(90deg,transparent,#82735f33);border-radius:30%}
.mascot-body::after{content:'';position:absolute;inset:4% 15% 78% 9%;border-radius:50%;background:#fff8;filter:blur(3px)}
.mascot-face{position:absolute;top:39%;left:27%;right:15%;height:24%;display:flex;align-items:center;justify-content:space-around;transform:translate(var(--look-x,0px),var(--look-y,0px))}
.mascot-eye{display:block;width:14%;height:83%;border-radius:45%;background:#231d1b;box-shadow:inset 1px 0 2px #0009;transform-origin:center}
.mascot-feet{position:absolute;bottom:4%;left:24%;width:17%;height:18%;background:#27231f;border-radius:30% 20% 15% 15%;box-shadow:28px 0 0 #27231f;transform:skewX(-9deg)}
.scene-mascot .mascot-feet{left:22%;width:18%;box-shadow:none}
.scene-mascot .mascot-feet:after{content:'';position:absolute;left:205%;width:100%;height:100%;background:inherit;border-radius:inherit}
.mascot-shadow{position:absolute;left:0;bottom:-4%;width:109%;height:17%;background:radial-gradient(ellipse,#0a0807b3,transparent 70%);filter:blur(2px)}
.mascot-smile{position:absolute;left:40%;top:62%;width:23%;height:15%;border-bottom:2px solid #3c2c24;border-radius:0 0 50% 50%}
.motion-toggle{background:transparent;border:0;color:#aab3be;display:inline-flex;align-items:center;gap:8px;font:9px var(--font);letter-spacing:0;direction:rtl;padding:5px 8px;min-height:30px;border-radius:3px}
.motion-toggle:hover{color:var(--orange);background:#ff7a3d0b}
.motion-toggle-icon{width:9px;height:11px;border-left:2px solid currentColor;border-right:2px solid currentColor;display:block}
.motion-toggle[aria-pressed=true] .motion-toggle-icon{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid currentColor;border-left:0}
.motion-toggle:disabled{cursor:default;opacity:.65}
.project-preview{position:absolute;top:0;bottom:0;left:0;right:auto;height:100%;width:66%;object-fit:contain;object-position:center;opacity:0;transition:opacity .55s;pointer-events:none;background:#080f1b;mask-image:linear-gradient(to left,transparent,#000 14%)}
.chera-visual.is-previewing .project-preview{opacity:1}
.chera-visual.is-previewing .chera-title{opacity:.95;transform:translateY(-3px)}
.chera-visual.is-previewing .film-label{opacity:.5}
.chera-title,.film-label{transition:opacity .35s,transform .45s}
.preview-note{position:absolute;top:18px;left:20px;padding:4px 9px;font-size:8px;letter-spacing:0;border:1px solid #ffffff24;border-radius:3px;background:#080f1b90;opacity:0;transition:opacity .35s}
.is-previewing .preview-note{opacity:1}
.preview-lamp{position:absolute;inset:0;background:radial-gradient(ellipse at 35% 20%,#ffad5e38,transparent 58%);opacity:0;transition:opacity .7s;pointer-events:none}
.is-previewing .preview-lamp{opacity:.4}
.chera-visual.is-previewing .play-button{background:#080f1b88;color:var(--paper);border-color:#f0ede788}
.contact-thread{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;fill:none;stroke:#df8953;stroke-width:1;opacity:.4}
.contact-thread path{vector-effect:non-scaling-stroke}
.success-delivery{position:relative;width:150px;height:122px;margin:0 auto 28px;display:grid;place-items:center}
.success-mascot{width:88px}
.success-mascot .mascot-feet{box-shadow:30px 0 0 #27231f}
.mascot-envelope{position:absolute;bottom:2%;left:-19%;width:68%;height:42%;background:#ff8b4d;border-radius:4px;box-shadow:0 5px 14px #0003;transform:rotate(-12deg);border:1px solid #e36728}
.mascot-envelope:before{content:'';position:absolute;inset:0;background:#ffad76;clip-path:polygon(0 0,50% 61%,100% 0);border-radius:3px}
.mascot-envelope>span{position:absolute;right:10%;bottom:0;color:#6b321b;font:15px Arial}

/* Opt in only after the module has initialized and checked motion preferences. */
.motion-enabled .scene-stage{transform:perspective(1300px) translate3d(var(--scene-x,0px),calc(var(--scene-y,0px) + var(--scene-scroll,0px)),0) rotateY(var(--scene-ry,0deg)) scale(var(--scene-scale,1));will-change:transform}
.motion-enabled .arch-glow{opacity:.18}
.motion-enabled .studio-beam{opacity:.45}
.motion-enabled .hero.is-in-view .mascot-eye{animation:mascot-blink 6.7s 2.4s infinite}
.motion-enabled .hero.is-in-view .mascot-body{animation:mascot-breathe 5s 2.4s infinite}
.motion-enabled .hero.is-curious .mascot-body{animation:none;transform:rotateY(-22deg) rotateZ(-7deg) translateY(-3%);transition:transform .4s}
.motion-enabled .hero.is-curious .mascot-face{transform:translate(2px,-1px)}
.motion-enabled .scene-mascot .mascot-body{transition:transform .6s}
.motion-enabled.page-hidden .hero .mascot-eye,.motion-enabled.page-hidden .hero .mascot-body{animation-play-state:paused!important}
.motion-enabled .web-visual img{transition:transform .8s,object-position 1.1s}
.motion-enabled .web-visual:is(:hover,:focus-visible) img{animation:website-preview 6s .15s ease-in-out both}
.motion-enabled .project-visual.is-tilting{transform:perspective(1100px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .16s;will-change:transform}
.motion-enabled .project-visual{transition:transform .6s}
.motion-enabled .project-visual.is-tilting .visual-corner{transform:translate(3px,-3px);transition:transform .3s}
.motion-enabled dialog[open]{animation:dialog-arrive .34s cubic-bezier(.2,.7,.2,1)}
.motion-enabled dialog[open]::backdrop{animation:backdrop-arrive .3s both}
.motion-enabled .contact:not(.thread-arrived) .contact-thread path{stroke-dasharray:1;stroke-dashoffset:1}
.motion-enabled .contact.thread-arrived .contact-thread path{stroke-dasharray:1;animation:thread-draw 1.8s cubic-bezier(.4,0,.2,1) both}
.motion-enabled .contact.thread-arrived .contact-orbit{animation:orbit-arrive 1.8s ease-out both}
.motion-enabled .is-celebrating .success-mascot{animation:mascot-delivery 1.15s cubic-bezier(.2,.7,.2,1) both}
.motion-enabled .is-celebrating .mascot-envelope{animation:envelope-receive .9s .25s cubic-bezier(.2,.7,.2,1) both}
.motion-enabled .is-celebrating .mascot-eye{animation:happy-blink .9s .4s both}
.motion-enabled .is-entering .hero-line:nth-child(1) .hero-word{animation:word-arrive .9s .12s cubic-bezier(.16,1,.3,1) both}
.motion-enabled .is-entering .hero-line:nth-child(2) .hero-word{animation:word-arrive .9s .26s cubic-bezier(.16,1,.3,1) both}
.motion-enabled .is-entering .hero-line:nth-child(3) .hero-word{animation:word-arrive .9s .4s cubic-bezier(.16,1,.3,1) both}
.motion-enabled .is-entering .scene-stage>img{animation:atelier-light 1.5s cubic-bezier(.2,.6,.2,1) both}
.motion-enabled .is-entering .scene-mascot{animation:mascot-arrive 1s .45s cubic-bezier(.2,.8,.2,1) both}
.motion-enabled .is-entering .arch-glow{animation:arch-ignite 1.7s .1s both}
.motion-enabled .is-entering .hero-description{animation:soft-arrive .8s .55s both}
.motion-enabled .is-entering .eyebrow{animation:soft-arrive .6s both}
.motion-enabled .hero-baseline a>span{animation:scroll-nudge 2.6s 2.5s 2}
.motion-enabled .button span{transition:transform .3s}
.motion-enabled .button:hover span{transform:translate(-2px,-2px)}
.motion-enabled .reveal.is-visible .project-number,.motion-enabled .reveal.is-visible .section-index{animation:index-arrive .7s .1s both}
.motion-enabled .service:is(:hover,:focus-visible) .square{animation:blocks-assemble .7s both}
.motion-enabled .service:is(:hover,:focus-visible) .ring{animation:identity-stamp .75s both}
.motion-enabled .service:is(:hover,:focus-visible) .triangle{animation:frame-cut .7s both}

@keyframes word-arrive{from{transform:translateY(112%);opacity:.3}to{transform:translateY(0);opacity:1}}
@keyframes soft-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes atelier-light{0%{opacity:.5;filter:brightness(.4) saturate(.6)}45%{opacity:1;filter:brightness(.8) saturate(.85)}100%{opacity:1;filter:brightness(1) saturate(1)}}
@keyframes arch-ignite{0%{opacity:0}45%{opacity:.55}100%{opacity:.18}}
@keyframes mascot-arrive{0%{transform:translateY(10%);opacity:0}65%{transform:translateY(-4%);opacity:1}100%{transform:translateY(0);opacity:1}}
@keyframes mascot-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.08)}}
@keyframes mascot-breathe{0%,100%{transform:rotateY(-12deg) rotateX(6deg) translateY(0)}50%{transform:rotateY(-10deg) rotateX(5deg) translateY(-1.7%)}}
@keyframes scroll-nudge{0%,70%,100%{transform:translateY(0)}82%{transform:translateY(5px)}}
@keyframes website-preview{0%,100%{object-position:50% 0%}65%{object-position:50% 100%}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes thread-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes orbit-arrive{from{transform:translate(-14px,8px)}to{transform:translate(0,0)}}
@keyframes mascot-delivery{0%{transform:translateY(10px) rotate(0)}32%{transform:translateY(-13px) rotate(-7deg)}60%{transform:translateY(3px) rotate(4deg)}80%,100%{transform:translateY(0) rotate(0)}}
@keyframes envelope-receive{from{opacity:0;transform:translate(-50px,-15px) rotate(-28deg)}65%{opacity:1;transform:translate(3px,0) rotate(-7deg)}to{opacity:1;transform:translate(0,0) rotate(-12deg)}}
@keyframes happy-blink{0%,100%{transform:scaleY(1)}45%,65%{transform:scaleY(.16)}}
@keyframes index-arrive{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
@keyframes blocks-assemble{0%{box-shadow:10px -10px 0 -5px #ff7a3d55,-10px 10px 0 -5px #ff7a3d55;transform:scale(.8)}60%{box-shadow:0 0 0 0 #ff7a3d33,0 0 0 0 #ff7a3d33;transform:scale(1.08)}100%{box-shadow:0 0 0 0 transparent;transform:scale(1)}}
@keyframes identity-stamp{0%{transform:scale(.7);box-shadow:0 0 0 9px #ff7a3d0a}60%{transform:scale(1.12);box-shadow:0 0 0 0 #ff7a3d20}100%{transform:scale(1);box-shadow:0 0 0 0 transparent}}
@keyframes frame-cut{0%{transform:translateX(0);opacity:1}30%{transform:translateX(9px);opacity:0}31%{transform:translateX(-9px);opacity:0}100%{transform:translateX(0);opacity:1}}
@media(max-width:760px){.hero-scene .scene-stage{position:absolute;bottom:0;left:0;width:100%}.scene-mascot{width:8%}.motion-toggle{font-size:8px;padding:5px;gap:6px}.hero-baseline>span{max-width:100px;line-height:1.7}.hero-baseline{gap:8px}.hero-baseline a{font-size:8px;gap:7px}.hero-baseline>span{font-size:5px}.hero-line{padding-inline:3px;margin-inline:-3px}.preview-note{font-size:7px;top:13px;left:13px}}
@media(prefers-reduced-motion:reduce){.scene-stage,.mascot-body,.mascot-face{transform:none!important}.project-preview{display:none!important}.motion-enabled .hero-word,.motion-enabled .eyebrow,.motion-enabled .hero-description,.motion-enabled .scene-stage>img,.motion-enabled .scene-mascot{opacity:1!important;filter:none!important;transform:none!important}.contact-thread path{stroke-dashoffset:0!important}}
.motion-paused .reveal{opacity:1;transform:none;transition:none}
.motion-paused .hero-word,.motion-paused .eyebrow,.motion-paused .hero-description,.motion-paused .scene-stage>img,.motion-paused .scene-mascot{opacity:1;filter:none;transform:none}
.motion-paused .scene-stage,.motion-paused .mascot-face{transform:none!important}
.motion-paused .contact-thread path{stroke-dashoffset:0}
.motion-paused *, .motion-paused *::before,.motion-paused *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-paused .button:hover{transform:none}
.motion-paused .project-visual:hover img{transform:none}
.motion-paused .web-visual:hover img{transform:rotate(-5deg) translateY(44px)}
@media(max-width:760px){.motion-paused .web-visual:hover img{transform:rotate(-5deg) translateY(39px)}}
@media(max-width:760px){.hero-scene{aspect-ratio:1.5;margin-top:0}}