/* A living canvas: all movement is governed by the global motion switch. */
.js-motion .hero-heading .eyebrow{animation:ink-arrive 1.2s both}
.js-motion .hero-heading h1{animation:ink-arrive 1.5s .15s both}
.js-motion .hero-heading>p{animation:ink-arrive 1.4s .4s both}
.js-motion .hero-art{animation:canvas-develop 2.8s cubic-bezier(.2,.7,.2,1) both}
.hero-art{will-change:transform}
.js-motion .hero-bottom{animation:ink-arrive 1.2s .8s both}
.hero-heading{transform:translateY(var(--scroll-drift,0px));transition:transform .15s linear}
.js-motion .service:nth-child(2){transition-delay:.09s}.js-motion .service:nth-child(3){transition-delay:.18s}
.js-motion .project-card{animation:ink-arrive .6s both;animation-delay:calc(var(--card-index,0)*65ms)}
.project-art:before{transition:transform 1s cubic-bezier(.2,.7,.2,1)}.project-art:after{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .project-art:before{transform:rotate(135deg)}.project-card:hover .project-art:after{transform:rotate(-30deg)}
.project-art span{transition:transform .7s}.project-card:hover .project-art span{transform:scale(1.12)}
.js-motion .workflow span{background:linear-gradient(90deg,#abb79d,#456eaf,#abb79d);background-size:200% 100%;animation:signal-flow 2s linear infinite}
.js-motion .strategy i{transform-origin:bottom;animation:bar-grow 3s ease-in-out infinite alternate}.js-motion .strategy i:nth-child(2){animation-delay:.3s}.js-motion .strategy i:nth-child(3){animation-delay:.6s}.js-motion .strategy i:nth-child(4){animation-delay:.9s}
.experience-controls #play-creation{color:#3559a0;border-bottom:1px solid #8aa0c1;padding-bottom:5px}
.scroll-thread{position:fixed;left:0;top:0;height:2px;background:linear-gradient(90deg,#b69b71,#517eac);width:100%;transform:scaleX(var(--read-progress,0));transform-origin:left;z-index:40;pointer-events:none}
#creation-film{padding:0;max-width:none;max-height:none;width:100vw;height:100dvh;border:0;background:#f8f7f2;overflow:hidden}
#creation-film .dialog-close{z-index:5;right:28px;top:20px;width:44px;height:44px;border:1px solid #bbc3ad;border-radius:50%;background:#f8f7f2c9}
.film-art{position:absolute;inset:0;background:url('assets/creation-canvas.png?v=20260926') center/cover no-repeat}
.film-wash{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 20%,#f8f7f2aa 95%)}
.film-copy{position:absolute;top:14%;left:7%;right:7%;text-align:center}.film-copy .eyebrow{justify-content:center}.film-copy h2{font-size:clamp(34px,5vw,80px);margin-top:20px}.film-copy p{font-size:14px}
.film-ring{position:absolute;left:50%;top:47%;width:40px;height:40px;margin:-20px;border-radius:50%;border:1px solid #638ec966;box-shadow:0 0 50px #7cbbff66}
.film-controls{position:absolute;left:7%;right:7%;bottom:7%;display:flex;justify-content:space-between;align-items:center;gap:20px}.film-controls p{font-size:10px;letter-spacing:2px}.film-progress{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#7193ba;transform-origin:left;transform:scaleX(var(--film-progress,0))}
.film-playing .film-art{animation:film-camera 14s linear both}.film-playing .film-ring{animation:film-energy 3s ease-out infinite}.film-copy.changing{animation:film-caption .7s both}
.film-paused *{animation-play-state:paused!important}.no-motion .hero-heading{transform:none}.no-motion .project-card:hover .project-art:before{transform:rotate(45deg)}.no-motion .project-card:hover .project-art:after{transform:rotate(60deg)}
@keyframes ink-arrive{from{opacity:0;transform:translateY(22px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes canvas-develop{from{opacity:.15;filter:blur(9px)}to{opacity:1;filter:blur(0)}}
@keyframes signal-flow{to{background-position:-200% 0}}
@keyframes bar-grow{to{transform:scaleY(.73)}}
@keyframes film-camera{0%{transform:scale(1.16) translateX(2%);filter:blur(2px)}35%{filter:blur(0)}100%{transform:scale(1) translateX(0);filter:blur(0)}}
@keyframes film-energy{0%{transform:scale(.5);opacity:0}20%{opacity:.8}100%{transform:scale(7);opacity:0}}
@keyframes film-caption{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.film-art{background-size:auto 72%;background-repeat:no-repeat}.film-copy{top:14%}.film-copy h2{font-size:40px}.film-controls{align-items:flex-end}.film-controls p{max-width:150px;font-size:8px}.film-controls .button{padding:12px;gap:15px}.experience-controls{gap:7px}}
@media(prefers-reduced-motion:reduce){.hero-heading{transform:none!important}}