/* MONO motion layer: intro states, ambient loops, pointer tools. Layout stays in style.css.
   Every loop animates transform or opacity; sections that are off screen get .is-off and their loops pause. */
.is-off,.is-off *,.is-off *::before,.is-off *::after{animation-play-state:paused!important}
.progress{position:fixed;left:0;top:0;width:100%;height:2px;z-index:70;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,#4a6d7f,#e9f8fe 70%,#ffc24d);box-shadow:0 0 12px #b9dceb55}

/* masked words */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .06em .24em;margin:-.12em -.06em -.24em}
.wi{display:inline-block}

/* ---------- hero: intro states ---------- */
[data-motion=full] .hero:not(.is-ready) .car-box,[data-motion=full] .hero:not(.is-ready) .hot,[data-motion=full] .hero:not(.is-ready) .hero-foot>*,[data-motion=full] .hero:not(.is-ready) .hero-copy .eyebrow{opacity:0}
[data-motion=full] .hero:not(.is-ready) .h-line{visibility:hidden}
.hero-car,.h-line{will-change:transform}
@keyframes ping{0%{transform:scale(1);opacity:.85}70%,100%{transform:scale(3.4);opacity:0}}
.hot .ring::before{animation:ping 3.4s cubic-bezier(.2,.6,.3,1) infinite}.hot .ring::after{animation:ping 3.4s cubic-bezier(.2,.6,.3,1) 1.7s infinite}
.hot-correct .ring::before{animation-delay:.6s}.hot-correct .ring::after{animation-delay:2.3s}.hot-coat .ring::before{animation-delay:1.2s}.hot-coat .ring::after{animation-delay:2.9s}
@keyframes glint{0%{transform:translate3d(-140%,0,0) skewX(-22deg);opacity:0}5%{opacity:1}30%{transform:translate3d(560%,0,0) skewX(-22deg);opacity:1}32%,100%{transform:translate3d(560%,0,0) skewX(-22deg);opacity:0}}
.glint{animation:glint 9s cubic-bezier(.45,.05,.3,1) 3.4s infinite;will-change:transform}
@keyframes beam{0%,100%{opacity:.55}50%{opacity:1}}
.hero-bg .beam-a{animation:beam 6s ease-in-out infinite}.hero-bg .beam-b{animation:beam 7.5s ease-in-out -2s infinite}
@keyframes gloss{0%{background-position:100% 0}48%,100%{background-position:0 0}}
.h-2 .wi{animation:gloss 8.5s cubic-bezier(.5,0,.2,1) 2.2s infinite}
@keyframes drop{0%{transform:translateY(-16px)}100%{transform:translateY(46px)}}
.cue-line b{animation:drop 2.4s var(--ease) infinite}
@keyframes standby{0%,100%{background-color:#34444e}50%{background-color:#7d96a4}}
.led-large .led{animation:standby 3.4s ease-in-out infinite}

/* ---------- story diagram ---------- */
@keyframes sheen{0%{transform:translateX(-30px)}55%,100%{transform:translateX(250px)}}
.layers .sheen{animation:sheen 6.4s cubic-bezier(.45,0,.3,1) infinite}
@keyframes twinkle{0%,100%{opacity:.1}50%{opacity:.95}}
.layers .flakes circle{animation:twinkle 3.6s ease-in-out infinite}
.stone{will-change:transform}

/* ---------- bench loops, only for the active direction ---------- */
@keyframes slideGloss{0%{transform:translate3d(-150%,0,0) skewX(-22deg)}55%,100%{transform:translate3d(var(--to,620%),0,0) skewX(-22deg)}}
.bench[data-service=coat] .fx-gloss{animation:slideGloss 5.6s cubic-bezier(.4,0,.2,1) infinite}
.bench[data-service=coat] .fx-gloss-b{--to:1500%;animation-delay:.18s}
@keyframes lampScan{0%{transform:translate3d(-100%,0,0)}100%{transform:translate3d(1000%,0,0)}}
.bench[data-service=correct] .fx-lamp{animation:lampScan 4.8s cubic-bezier(.5,0,.5,1) infinite alternate}
@keyframes zoneSheen{0%{transform:translateX(0) skewX(-18deg)}60%,100%{transform:translateX(2300px) skewX(-18deg)}}
.zone .sheen{animation:zoneSheen 4.6s cubic-bezier(.45,0,.3,1) infinite}
@keyframes dwEdge{0%{transform:translateX(-102%)}60%,100%{transform:translateX(102%)}}
.bench[data-service=ppf] .dw-ppf{animation:dwEdge 4.6s cubic-bezier(.5,0,.3,1) infinite}
.bench[data-service=coat] .dw-coat{animation:dwEdge 5.4s cubic-bezier(.5,0,.3,1) infinite}
@keyframes dwScan{0%{transform:translateX(-20%)}100%{transform:translateX(480%)}}
.bench[data-service=correct] .dw-correct{animation:dwScan 3.8s cubic-bezier(.5,0,.5,1) infinite alternate}

/* ---------- lamp / lens ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
.ring-ticks{animation:spin 160s linear infinite;will-change:transform}.ring-arc{animation:spin 12s linear infinite;will-change:transform}
.mo-torch{position:absolute;left:0;top:0;width:200%;height:200%;pointer-events:none;z-index:1;will-change:transform;transform:translate3d(-50%,-50%,0);background:radial-gradient(circle 150px at 50% 50%,#cde9f633,#0000 70%),radial-gradient(circle 230px at 50% 50%,#0000 0,#04090c1f 40%,#030507a3 100%)}
.lamp-bloom::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 50% 50%,#ffd98a66,#ffc24d00 70%);animation:breathe 4.4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.7}50%{transform:scale(1.06);opacity:1}}
.lamp-lens{cursor:crosshair}

/* ---------- reel ---------- */
.frame-window::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:#05080b;opacity:0;transition:opacity .9s var(--ease)}
.frame-window::before{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:30%;z-index:3;pointer-events:none;opacity:0;transform:translate3d(-130%,0,0) skewX(-22deg);background:linear-gradient(90deg,#d6f4ff00,#e9f8fe66 50%,#d6f4ff00)}
.reel-on .frame-window::after{opacity:.6}.reel-on .frame.is-lit .frame-window::after{opacity:0}
.reel-on .frame figcaption{opacity:.45;transform:translateY(6px);transition:opacity .8s var(--ease),transform .9s var(--ease)}.reel-on .frame.is-lit figcaption{opacity:1;transform:none}
@keyframes frameGlint{0%{opacity:1;transform:translate3d(-130%,0,0) skewX(-22deg)}100%{opacity:0;transform:translate3d(520%,0,0) skewX(-22deg)}}
.frame.is-lit .frame-window::before{animation:frameGlint 1.7s var(--ease) 1 both}
.frame-window img{will-change:transform}
.reel-hint i{animation:hint 2.2s var(--ease) infinite;transform-origin:left}
@keyframes hint{0%{transform:scaleX(.2)}60%,100%{transform:scaleX(1)}}

/* ---------- specialist ---------- */
@keyframes scanY{0%{transform:translate3d(0,-110%,0)}52%,100%{transform:translate3d(0,360%,0)}}
.portrait-scan{position:absolute;left:0;right:0;top:0;height:30%;pointer-events:none;background:linear-gradient(180deg,#b9dceb00,#b9dceb22 72%,#e9f8fed9 99%,#fff);animation:scanY 7.5s cubic-bezier(.45,0,.2,1) infinite;will-change:transform}

/* ---------- contact ---------- */
@keyframes pass{0%{transform:translate3d(-130%,0,0) skewX(-22deg)}38%,100%{transform:translate3d(560%,0,0) skewX(-22deg)}}
.contact-bands::before{animation:pass 11s cubic-bezier(.4,0,.2,1) infinite}.contact-bands::after{animation:pass 11s cubic-bezier(.4,0,.2,1) .35s infinite}
.bezel-ticks{animation:spin 60s linear infinite;will-change:transform}.bezel-sweep{animation:spin 5.5s linear infinite;will-change:transform}
.bezel:hover .bezel-ticks{animation-duration:14s}
@keyframes wmSweep{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.wm-fill{animation:wmSweep 8s cubic-bezier(.45,0,.25,1) infinite}

/* ---------- dialog ---------- */
@keyframes dlgIn{from{opacity:0;transform:translateY(20px) scale(.97)}}
@keyframes fadeIn{from{opacity:0}}
.consultation-dialog[open]{animation:dlgIn .6s var(--ease)}.consultation-dialog[open]::backdrop{animation:fadeIn .45s}

/* ---------- dust and pointer tools ---------- */
.dust{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:25;pointer-events:none;transition:opacity .8s}
.dust.is-hidden{opacity:0}
:root{--mo-ease:cubic-bezier(.16,1,.3,1)}
.mo-reticle{position:fixed;left:0;top:0;z-index:120;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s}
.mo-reticle.is-on{opacity:1}.mo-reticle.is-lens{opacity:0}
.mo-reticle b{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border:1px solid #b9dceb;border-radius:50%;transition:transform .55s var(--mo-ease),border-color .3s,background-color .3s}
.mo-reticle i{position:absolute;display:block;background:var(--ice);transition:transform .55s var(--mo-ease)}
.mo-reticle i:nth-child(2){left:-.5px;top:-27px;width:1px;height:8px}.mo-reticle i:nth-child(3){left:-.5px;top:19px;width:1px;height:8px}.mo-reticle i:nth-child(4){left:-27px;top:-.5px;width:8px;height:1px}.mo-reticle i:nth-child(5){left:19px;top:-.5px;width:8px;height:1px}
.mo-reticle.is-link b{transform:scale(1.65);background:#b9dceb1a;border-color:var(--amber)}
.mo-reticle.is-link i:nth-child(2){transform:translateY(-10px)}.mo-reticle.is-link i:nth-child(3){transform:translateY(10px)}.mo-reticle.is-link i:nth-child(4){transform:translateX(-10px)}.mo-reticle.is-link i:nth-child(5){transform:translateX(10px)}
.mo-reticle.is-down b{transform:scale(.7)}
.mo-loupe{position:fixed;left:0;top:0;z-index:118;width:190px;height:190px;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.mo-loupe.is-on{opacity:1}
.mo-lens{position:absolute;inset:0;border-radius:50%;overflow:hidden;transform:scale(.7);transition:transform .5s var(--mo-ease);background:radial-gradient(circle at 50% 40%,#16232b,#0a1013);border:1px solid #d5eef8b3;box-shadow:0 0 0 6px #b9dceb14,0 24px 60px #0008,inset 0 0 30px #0008}
.mo-loupe.is-on .mo-lens{transform:scale(1)}
.mo-lens img{position:absolute;left:0;top:0;max-width:none;filter:contrast(1.14) saturate(1.3) brightness(1.04);will-change:transform}
.mo-lens::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,#ffffff24,#0000 38%);pointer-events:none}
.mo-lens::before{content:'';position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;z-index:2;border:1px solid #dcf4fce6;border-radius:50%}
.has-reticle .car-box,.has-reticle .bench-stage{cursor:none}
.has-reticle .hot{cursor:pointer}
@media(max-width:700px),(hover:none){.mo-reticle,.mo-loupe{display:none}}

/* Inside the portfolio showreel the page is a small preview sharing the main thread with its host: no loops, no extras. */
html.zp-embedded *,html.zp-embedded *::before,html.zp-embedded *::after{animation-play-state:paused!important}
html.zp-embedded .dust,html.zp-embedded .mo-reticle,html.zp-embedded .mo-loupe,html.zp-embedded .progress,html.zp-embedded .rail{display:none!important}