/* Twenty-one small motion studies, one visual language for each project.
   JS owns .is-motion-active: one pass on deliberate hover/focus or mobile visibility.
   The image and all decorative layers finish in their original/transparent state. */
.premium-preview[data-demo]{position:relative;isolation:isolate;overflow:hidden}
.premium-preview[data-demo]>.preview-open{z-index:2}
.premium-site .premium-preview[data-demo]>img{transition:none;transform:none;transform-origin:50% 50%}
.project-motion{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;contain:paint}
.project-motion i{position:absolute;display:none;box-sizing:border-box;font-style:normal;opacity:0;pointer-events:none}
.premium-preview.is-motion-active>.project-motion{opacity:var(--motion-intensity,1)}
.premium-preview.is-motion-active>.project-motion i{animation-duration:var(--motion-duration,3.6s);animation-timing-function:cubic-bezier(.2,.7,.25,1);animation-iteration-count:1;animation-fill-mode:both}
.premium-preview.is-motion-active>img{animation-duration:var(--motion-duration,3.6s);animation-timing-function:cubic-bezier(.2,.7,.25,1);animation-iteration-count:1;animation-fill-mode:both}

/* NEXUS — a narrow RGB sweep across the hardware, then a quiet signal trace. */
[data-demo="nexus"]{--motion-duration:2.8s}
[data-demo="nexus"] .project-motion i:nth-child(1){display:block;left:24%;top:-20%;width:17%;height:140%;background:linear-gradient(90deg,transparent,#62edff55,#b889fc38,transparent);transform:skewX(-22deg);mix-blend-mode:screen}
[data-demo="nexus"] .project-motion i:nth-child(2){display:block;left:57%;right:7%;top:76%;height:2px;background:linear-gradient(90deg,#bdff38,transparent);transform-origin:left}
[data-demo="nexus"] .project-motion i:nth-child(3){display:block;left:57%;right:17%;top:78%;height:1px;background:#5fe4fc;transform-origin:left}
[data-demo="nexus"].is-motion-active .project-motion i:nth-child(1){animation-name:np-nexus-sweep}
[data-demo="nexus"].is-motion-active .project-motion i:nth-child(2){animation-name:np-nexus-signal;animation-delay:.12s}
[data-demo="nexus"].is-motion-active .project-motion i:nth-child(3){animation-name:np-nexus-signal;animation-delay:.24s}
@keyframes np-nexus-sweep{0%{opacity:0;transform:translateX(-180%) skewX(-22deg)}20%{opacity:.8}75%{opacity:.65}100%{opacity:0;transform:translateX(430%) skewX(-22deg)}}
@keyframes np-nexus-signal{0%,15%{opacity:0;transform:scaleX(0)}35%,65%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(.1)}}

/* ORLA — four architectural corner marks assemble a photographic frame. */
[data-demo="orla"]{--motion-duration:4s}
[data-demo="orla"] .project-motion i:nth-child(-n+4){display:block;width:9%;height:13%;border-color:#fffbedb3;border-style:solid;border-width:0}
[data-demo="orla"] .project-motion i:nth-child(1){top:17%;left:7%;border-top-width:1px;border-left-width:1px;--x:18px;--y:18px}
[data-demo="orla"] .project-motion i:nth-child(2){top:17%;right:7%;border-top-width:1px;border-right-width:1px;--x:-18px;--y:18px}
[data-demo="orla"] .project-motion i:nth-child(3){bottom:12%;right:7%;border-bottom-width:1px;border-right-width:1px;--x:-18px;--y:-18px}
[data-demo="orla"] .project-motion i:nth-child(4){bottom:12%;left:7%;border-bottom-width:1px;border-left-width:1px;--x:18px;--y:-18px}
[data-demo="orla"].is-motion-active .project-motion i{animation-name:np-orla-frame}
@keyframes np-orla-frame{0%{opacity:0;transform:translate(var(--x),var(--y))}25%,70%{opacity:.85;transform:translate(0,0)}100%{opacity:0;transform:translate(0,0)}}

/* FERRO — one precise orange cut, accompanied by a small hot edge. */
[data-demo="ferro"]{--motion-duration:3.2s}
[data-demo="ferro"] .project-motion i:nth-child(1){display:block;left:7%;top:59%;width:84%;height:1px;background:linear-gradient(90deg,transparent,#ff7132,#ffc58b);transform-origin:left}
[data-demo="ferro"] .project-motion i:nth-child(2){display:block;left:7%;top:calc(59% - 3px);width:8%;height:7px;background:radial-gradient(ellipse at center,#fff6ce 0,#ff76377a 30%,transparent 72%)}
[data-demo="ferro"] .project-motion i:nth-child(3){display:block;right:9%;top:37%;height:22%;width:1px;background:#ff8246;transform-origin:bottom}
[data-demo="ferro"].is-motion-active .project-motion i:nth-child(1){animation-name:np-ferro-cut}
[data-demo="ferro"].is-motion-active .project-motion i:nth-child(2){animation-name:np-ferro-edge}
[data-demo="ferro"].is-motion-active .project-motion i:nth-child(3){animation-name:np-ferro-rise;animation-delay:.3s}
@keyframes np-ferro-cut{0%,8%{opacity:0;transform:scaleX(0)}20%{opacity:.9}65%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes np-ferro-edge{0%,9%{opacity:0;transform:translateX(-50%)}20%{opacity:.85}65%{opacity:.9;transform:translateX(1000%)}100%{opacity:0;transform:translateX(1000%)}}
@keyframes np-ferro-rise{0%,45%{opacity:0;transform:scaleY(0)}68%{opacity:.65;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}

/* AURA — a silk-like reflection travels over the product photography. */
[data-demo="aura"]{--motion-duration:4s}
[data-demo="aura"] .project-motion i:nth-child(1){display:block;top:8%;left:40%;height:75%;width:22%;background:linear-gradient(90deg,transparent,#ffffff99,#eadcf363,transparent);transform:skewX(-18deg);mix-blend-mode:screen}
[data-demo="aura"] .project-motion i:nth-child(2){display:block;right:12%;top:24%;width:24%;height:38%;border:1px solid #fff9fc99;border-radius:50%}
[data-demo="aura"].is-motion-active .project-motion i:nth-child(1){animation-name:np-aura-silk}
[data-demo="aura"].is-motion-active .project-motion i:nth-child(2){animation-name:np-aura-halo;animation-delay:.15s}
@keyframes np-aura-silk{0%{opacity:0;transform:translateX(-110%) skewX(-18deg)}25%{opacity:.75}75%{opacity:.6}100%{opacity:0;transform:translateX(250%) skewX(-18deg)}}
@keyframes np-aura-halo{0%,12%{opacity:0;transform:scale(.9)}42%{opacity:.45;transform:scale(1.08)}100%{opacity:0;transform:scale(1.2)}}

/* VIA — a route draws in two legs and its destination softly lights up. */
[data-demo="via"]{--motion-duration:3.7s}
[data-demo="via"] .project-motion i:nth-child(1){display:block;left:53%;top:73%;width:19%;height:2px;background:#ff9360;transform-origin:left}
[data-demo="via"] .project-motion i:nth-child(2){display:block;left:72%;top:73%;width:18%;height:2px;background:#ff9360;transform:rotate(-38deg);transform-origin:left}
[data-demo="via"] .project-motion i:nth-child(3){display:block;left:85%;top:56%;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#f27b42;box-shadow:0 0 0 5px #ed7a4130}
[data-demo="via"].is-motion-active .project-motion i:nth-child(1){animation-name:np-via-first}
[data-demo="via"].is-motion-active .project-motion i:nth-child(2){animation-name:np-via-second}
[data-demo="via"].is-motion-active .project-motion i:nth-child(3){animation-name:np-via-arrive}
@keyframes np-via-first{0%,5%{opacity:0;transform:scaleX(0)}30%,75%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes np-via-second{0%,25%{opacity:0;transform:rotate(-38deg) scaleX(0)}55%,75%{opacity:.8;transform:rotate(-38deg) scaleX(1)}100%{opacity:0;transform:rotate(-38deg) scaleX(1)}}
@keyframes np-via-arrive{0%,48%{opacity:0;transform:scale(.4)}65%{opacity:.9;transform:scale(1.2)}82%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}

/* SORRISO — a portrait focus ring and a coral underline greet the visitor. */
[data-demo="sorriso"]{--motion-duration:3.6s}
[data-demo="sorriso"] .project-motion i:nth-child(1){display:block;right:10%;top:20%;width:33%;height:48%;border:1px solid #eff9ffd9;border-radius:48% 48% 12% 12%}
[data-demo="sorriso"] .project-motion i:nth-child(2){display:block;left:8%;top:56%;height:3px;width:23%;background:#eaa08a;transform-origin:left;border-radius:3px}
[data-demo="sorriso"].is-motion-active .project-motion i:nth-child(1){animation-name:np-sorriso-focus}
[data-demo="sorriso"].is-motion-active .project-motion i:nth-child(2){animation-name:np-sorriso-welcome;animation-delay:.2s}
@keyframes np-sorriso-focus{0%{opacity:0;transform:scale(1.16)}30%,65%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes np-sorriso-welcome{0%,20%{opacity:0;transform:scaleX(0)}45%,70%{opacity:.7;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

/* HABITAR — the photograph becomes a measured, quietly drawn floor plan. */
[data-demo="habitar"]{--motion-duration:4.1s}
[data-demo="habitar"] .project-motion i:nth-child(1){display:block;left:53%;top:23%;width:39%;height:48%;border:1px solid #f8f1e9b3;transform-origin:bottom left}
[data-demo="habitar"] .project-motion i:nth-child(2){display:block;left:76%;top:23%;width:1px;height:48%;background:#f8f1e9a8;transform-origin:bottom}
[data-demo="habitar"] .project-motion i:nth-child(3){display:block;left:53%;top:49%;width:39%;height:1px;background:#f8f1e9a8;transform-origin:left}
[data-demo="habitar"].is-motion-active .project-motion i:nth-child(1){animation-name:np-habitar-plan}
[data-demo="habitar"].is-motion-active .project-motion i:nth-child(2){animation-name:np-habitar-wall;animation-delay:.15s}
[data-demo="habitar"].is-motion-active .project-motion i:nth-child(3){animation-name:np-habitar-room;animation-delay:.3s}
@keyframes np-habitar-plan{0%{opacity:0;transform:scale(.96)}25%,72%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes np-habitar-wall{0%,20%{opacity:0;transform:scaleY(0)}50%,70%{opacity:.8;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes np-habitar-room{0%,25%{opacity:0;transform:scaleX(0)}55%,70%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

/* VELOUR — two translucent editorial sheets part over the campaign image. */
[data-demo="velour"]{--motion-duration:3.6s}
[data-demo="velour"] .project-motion i:nth-child(1){display:block;left:4%;top:20%;width:34%;height:58%;background:#f3efe464;transform-origin:left}
[data-demo="velour"] .project-motion i:nth-child(2){display:block;left:38%;top:20%;width:27%;height:58%;background:#1d201c22;transform-origin:right}
[data-demo="velour"].is-motion-active .project-motion i:nth-child(1){animation-name:np-velour-left}
[data-demo="velour"].is-motion-active .project-motion i:nth-child(2){animation-name:np-velour-right}
@keyframes np-velour-left{0%{opacity:0;transform:scaleX(.02)}18%{opacity:.7;transform:scaleX(1)}65%,100%{opacity:0;transform:translateX(-25%) scaleX(.02)}}
@keyframes np-velour-right{0%{opacity:0;transform:scaleX(.02)}25%{opacity:.8;transform:scaleX(1)}75%,100%{opacity:0;transform:translateX(25%) scaleX(.02)}}

/* SERRA — a slow camera breath, with a thin veil of mist leaving the landscape. */
[data-demo="serra"]{--motion-duration:4.5s}
[data-demo="serra"] .project-motion i:nth-child(1){display:block;left:-5%;right:-5%;bottom:8%;height:42%;background:linear-gradient(0deg,#cfdbcf45,transparent);mix-blend-mode:screen}
[data-demo="serra"].is-motion-active>img{animation-name:np-serra-camera;transform-origin:77% 40%}
[data-demo="serra"].is-motion-active .project-motion i:nth-child(1){animation-name:np-serra-mist}
@keyframes np-serra-camera{0%,100%{transform:scale(1)}45%{transform:scale(1.045) translateX(-.4%)}75%{transform:scale(1.025) translateX(.15%)}}
@keyframes np-serra-mist{0%{opacity:0;transform:translateY(25%)}35%{opacity:.65}100%{opacity:0;transform:translateY(-20%)}}

/* FLUXO — five analytical columns grow in sequence, then settle away. */
[data-demo="fluxo"]{--motion-duration:3.5s}
[data-demo="fluxo"] .project-motion i:nth-child(-n+5){display:block;bottom:8%;width:2.1%;background:#356bffb3;transform-origin:bottom;border-radius:2px 2px 0 0}
[data-demo="fluxo"] .project-motion i:nth-child(1){left:27%;height:7%}
[data-demo="fluxo"] .project-motion i:nth-child(2){left:33%;height:11%;animation-delay:.12s}
[data-demo="fluxo"] .project-motion i:nth-child(3){left:39%;height:9%;animation-delay:.24s}
[data-demo="fluxo"] .project-motion i:nth-child(4){left:45%;height:15%;animation-delay:.36s}
[data-demo="fluxo"] .project-motion i:nth-child(5){left:51%;height:12%;animation-delay:.48s}
[data-demo="fluxo"].is-motion-active .project-motion i{animation-name:np-fluxo-columns}
@keyframes np-fluxo-columns{0%{opacity:0;transform:scaleY(0)}30%{opacity:.8;transform:scaleY(1)}52%{opacity:.7;transform:scaleY(.78)}75%{opacity:.5;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}

/* LEXA — measured gold underlines move through the editorial headline. */
[data-demo="lexa"]{--motion-duration:3.7s}
[data-demo="lexa"] .project-motion i:nth-child(-n+3){display:block;left:7%;height:1px;background:#d5bb8fa8;transform-origin:left}
[data-demo="lexa"] .project-motion i:nth-child(1){top:38%;width:27%}
[data-demo="lexa"] .project-motion i:nth-child(2){top:45%;width:21%;animation-delay:.2s}
[data-demo="lexa"] .project-motion i:nth-child(3){top:52%;width:17%;animation-delay:.4s}
[data-demo="lexa"].is-motion-active .project-motion i{animation-name:np-lexa-underline}
@keyframes np-lexa-underline{0%,8%{opacity:0;transform:scaleX(0)}40%,72%{opacity:.8;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

/* ONDA — the stage gains a short, irregular eight-band equalizer. */
[data-demo="onda"]{--motion-duration:3.5s}
[data-demo="onda"] .project-motion i{display:block;bottom:17%;width:1.1%;height:18%;background:#ceff3d;transform-origin:bottom;border-radius:1px}
[data-demo="onda"] .project-motion i:nth-child(1){left:66%;--level:.55}
[data-demo="onda"] .project-motion i:nth-child(2){left:69%;--level:.9;animation-delay:.07s}
[data-demo="onda"] .project-motion i:nth-child(3){left:72%;--level:.7;animation-delay:.14s}
[data-demo="onda"] .project-motion i:nth-child(4){left:75%;--level:1;animation-delay:.21s}
[data-demo="onda"] .project-motion i:nth-child(5){left:78%;--level:.5;animation-delay:.28s;background:#edffe5}
[data-demo="onda"] .project-motion i:nth-child(6){left:81%;--level:.8;animation-delay:.35s}
[data-demo="onda"] .project-motion i:nth-child(7){left:84%;--level:.65;animation-delay:.42s}
[data-demo="onda"] .project-motion i:nth-child(8){left:87%;--level:.95;animation-delay:.49s}
[data-demo="onda"].is-motion-active .project-motion i{animation-name:np-onda-equalizer;animation-timing-function:ease-in-out}
@keyframes np-onda-equalizer{0%,100%{opacity:0;transform:scaleY(.1)}15%,35%,55%{opacity:.75;transform:scaleY(var(--level))}25%,45%,65%{opacity:.7;transform:scaleY(.3)}80%{opacity:.35;transform:scaleY(.65)}}

/* LUME — a small photographic push-in brings the object under a warm spotlight. */
[data-demo="lume"]{--motion-duration:4.2s}
[data-demo="lume"] .project-motion i:nth-child(1){display:block;right:3%;top:12%;width:57%;height:66%;border-radius:50%;background:radial-gradient(ellipse,#f9df9861 0,#f9df981f 38%,transparent 70%);mix-blend-mode:screen}
[data-demo="lume"].is-motion-active>img{animation-name:np-lume-object;transform-origin:73% 45%}
[data-demo="lume"].is-motion-active .project-motion i:nth-child(1){animation-name:np-lume-spotlight}
@keyframes np-lume-object{0%,100%{transform:perspective(1100px) rotateY(0) scale(1)}45%{transform:perspective(1100px) rotateY(-1deg) scale(1.028)}75%{transform:perspective(1100px) rotateY(.2deg) scale(1.015)}}
@keyframes np-lume-spotlight{0%{opacity:0;transform:translate(-14%,-5%) scale(.85)}40%{opacity:.6;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(5%,0) scale(1.1)}}

/* RAIZ — contour lines grow along the field, resembling a terrain reading. */
[data-demo="raiz"]{--motion-duration:3.7s}
[data-demo="raiz"] .project-motion i:nth-child(-n+4){display:block;left:12%;width:74%;height:37%;border-top:1px solid #d8eb9f91;border-radius:50%;transform-origin:left center}
[data-demo="raiz"] .project-motion i:nth-child(1){top:46%}
[data-demo="raiz"] .project-motion i:nth-child(2){top:51%;animation-delay:.16s}
[data-demo="raiz"] .project-motion i:nth-child(3){top:56%;animation-delay:.32s}
[data-demo="raiz"] .project-motion i:nth-child(4){top:61%;animation-delay:.48s}
[data-demo="raiz"].is-motion-active .project-motion i{animation-name:np-raiz-contours}
@keyframes np-raiz-contours{0%{opacity:0;transform:rotate(-10deg) scaleX(.15)}35%,65%{opacity:.7;transform:rotate(-10deg) scaleX(1)}100%{opacity:0;transform:rotate(-10deg) scaleX(1)}}

/* BRASA — restrained warmth and a few tiny embers rise from the fire. */
[data-demo="brasa"]{--motion-duration:3.7s}
[data-demo="brasa"] .project-motion i:nth-child(1){display:block;right:9%;top:26%;width:44%;height:55%;background:radial-gradient(ellipse at 60% 75%,#e9762e3d,transparent 65%);transform-origin:bottom;mix-blend-mode:screen}
[data-demo="brasa"] .project-motion i:nth-child(n+2):nth-child(-n+5){display:block;top:67%;width:2px;height:3px;background:#ffc98c;border-radius:50%;--drift:-5px}
[data-demo="brasa"] .project-motion i:nth-child(2){right:19%}
[data-demo="brasa"] .project-motion i:nth-child(3){right:26%;animation-delay:.19s;--drift:7px}
[data-demo="brasa"] .project-motion i:nth-child(4){right:34%;animation-delay:.38s;--drift:-8px}
[data-demo="brasa"] .project-motion i:nth-child(5){right:42%;animation-delay:.57s;--drift:5px}
[data-demo="brasa"].is-motion-active .project-motion i:nth-child(1){animation-name:np-brasa-warmth}
[data-demo="brasa"].is-motion-active .project-motion i:nth-child(n+2){animation-name:np-brasa-embers}
@keyframes np-brasa-warmth{0%,100%{opacity:0;transform:skewX(0)}30%{opacity:.6;transform:skewX(2deg)}60%{opacity:.4;transform:skewX(-2deg)}80%{opacity:.3;transform:skewX(1deg)}}
@keyframes np-brasa-embers{0%{opacity:0;transform:translate(0,7px) scale(.5)}25%{opacity:.8}85%,100%{opacity:0;transform:translate(var(--drift),-45px) scale(.2)}}

/* RITMO — three short kinetic tracks pass the athlete and dissolve. */
[data-demo="ritmo"]{--motion-duration:2.7s}
[data-demo="ritmo"] .project-motion i:nth-child(-n+3){display:block;left:44%;width:38%;height:2px;background:linear-gradient(90deg,transparent,#ff543d,transparent);transform-origin:center}
[data-demo="ritmo"] .project-motion i:nth-child(1){top:34%}
[data-demo="ritmo"] .project-motion i:nth-child(2){top:49%;animation-delay:.12s;background:linear-gradient(90deg,transparent,#fff8edaa,transparent)}
[data-demo="ritmo"] .project-motion i:nth-child(3){top:64%;animation-delay:.24s}
[data-demo="ritmo"].is-motion-active .project-motion i{animation-name:np-ritmo-speed}
@keyframes np-ritmo-speed{0%,5%{opacity:0;transform:translateX(-55%) rotate(-12deg) scaleX(.2)}30%{opacity:.8;transform:translateX(0) rotate(-12deg) scaleX(1)}65%,100%{opacity:0;transform:translateX(90%) rotate(-12deg) scaleX(.4)}}

/* PÉTALA — organic, oversized petal contours bloom around the arrangement. */
[data-demo="petala"]{--motion-duration:4s}
[data-demo="petala"] .project-motion i:nth-child(-n+3){display:block;left:52%;top:22%;width:31%;height:46%;border:1px solid #ffe3e7b0;border-radius:65% 35% 65% 35%;transform-origin:50% 70%}
[data-demo="petala"] .project-motion i:nth-child(1){--petal:-27deg}
[data-demo="petala"] .project-motion i:nth-child(2){--petal:20deg;animation-delay:.15s}
[data-demo="petala"] .project-motion i:nth-child(3){--petal:68deg;animation-delay:.3s}
[data-demo="petala"].is-motion-active .project-motion i{animation-name:np-petala-bloom}
@keyframes np-petala-bloom{0%{opacity:0;transform:rotate(var(--petal)) scale(.45)}45%{opacity:.6;transform:rotate(var(--petal)) scale(1)}100%{opacity:0;transform:rotate(var(--petal)) scale(1.2)}}

/* SOLAR — light advances across a photovoltaic grid in a single wave. */
[data-demo="solar"]{--motion-duration:3.4s}
[data-demo="solar"] .project-motion i:nth-child(-n+6){display:block;top:48%;width:13%;height:29%;background:linear-gradient(160deg,#e6f7ff8c,#3f85dc21);border-left:1px solid #d6f1ff5c;transform:skewY(-6deg)}
[data-demo="solar"] .project-motion i:nth-child(1){left:9%}
[data-demo="solar"] .project-motion i:nth-child(2){left:22%;animation-delay:.15s}
[data-demo="solar"] .project-motion i:nth-child(3){left:35%;animation-delay:.3s}
[data-demo="solar"] .project-motion i:nth-child(4){left:48%;animation-delay:.45s}
[data-demo="solar"] .project-motion i:nth-child(5){left:61%;animation-delay:.6s}
[data-demo="solar"] .project-motion i:nth-child(6){left:74%;animation-delay:.75s}
[data-demo="solar"].is-motion-active .project-motion i{animation-name:np-solar-grid}
@keyframes np-solar-grid{0%,6%{opacity:0;transform:skewY(-6deg) translateY(4px)}24%{opacity:.48;transform:skewY(-6deg) translateY(0)}55%,100%{opacity:0;transform:skewY(-6deg) translateY(-4px)}}

/* ATLAS — a miniature booking sequence highlights successive calendar cells. */
[data-demo="atlas"]{--motion-duration:3.6s}
[data-demo="atlas"] .project-motion i:nth-child(-n+5){display:block;top:78%;width:3.3%;height:4.7%;border-radius:2px;background:#79915c99;box-shadow:inset 0 0 0 1px #546e3b42}
[data-demo="atlas"] .project-motion i:nth-child(1){left:74%}
[data-demo="atlas"] .project-motion i:nth-child(2){left:78%;animation-delay:.18s}
[data-demo="atlas"] .project-motion i:nth-child(3){left:82%;animation-delay:.36s}
[data-demo="atlas"] .project-motion i:nth-child(4){left:86%;animation-delay:.54s}
[data-demo="atlas"] .project-motion i:nth-child(5){left:78%;top:84%;animation-delay:.72s;background:#d3deb3b3}
[data-demo="atlas"].is-motion-active .project-motion i{animation-name:np-atlas-booking}
@keyframes np-atlas-booking{0%,8%{opacity:0;transform:translateY(5px) scale(.75)}25%,55%{opacity:.75;transform:translateY(0) scale(1)}75%,100%{opacity:0;transform:translateY(0) scale(1)}}

/* TORQUE — two white headlight glints travel across the car's front edge. */
[data-demo="torque"]{--motion-duration:3.4s}
[data-demo="torque"] .project-motion i:nth-child(1){display:block;left:41%;top:55%;width:31%;height:2px;background:linear-gradient(90deg,transparent,#ecf5ff,transparent);transform-origin:right;box-shadow:0 0 7px #c4eaff70}
[data-demo="torque"] .project-motion i:nth-child(2){display:block;left:27%;top:61%;width:14%;height:1px;background:linear-gradient(90deg,transparent,#f2f7ff,transparent);transform-origin:left;box-shadow:0 0 6px #deefff66}
[data-demo="torque"].is-motion-active .project-motion i:nth-child(1){animation-name:np-torque-headlight}
[data-demo="torque"].is-motion-active .project-motion i:nth-child(2){animation-name:np-torque-grille;animation-delay:.25s}
@keyframes np-torque-headlight{0%,8%{opacity:0;transform:rotate(-8deg) scaleX(.1)}35%{opacity:.85;transform:rotate(-8deg) scaleX(1)}60%{opacity:.3;transform:rotate(-8deg) scaleX(.85)}100%{opacity:0;transform:rotate(-8deg) scaleX(1)}}
@keyframes np-torque-grille{0%,20%{opacity:0;transform:rotate(8deg) scaleX(.1)}48%{opacity:.75;transform:rotate(8deg) scaleX(1)}100%{opacity:0;transform:rotate(8deg) scaleX(.8)}}

/* LAB — two outlined sheets fan out and return, like an editorial sketchbook. */
[data-demo="lab"]{--motion-duration:3.8s}
[data-demo="lab"] .project-motion i:nth-child(1){display:block;left:52%;top:23%;width:38%;height:43%;border:3px solid #fff9daaa;background:#fff9da08;transform-origin:50% 90%}
[data-demo="lab"] .project-motion i:nth-child(2){display:block;left:53%;top:24%;width:36%;height:41%;border:2px solid #1f252448;transform-origin:50% 90%}
[data-demo="lab"].is-motion-active .project-motion i:nth-child(1){animation-name:np-lab-paper-front}
[data-demo="lab"].is-motion-active .project-motion i:nth-child(2){animation-name:np-lab-paper-back;animation-delay:.12s}
@keyframes np-lab-paper-front{0%{opacity:0;transform:rotate(0) translate(0,0)}35%{opacity:.7;transform:rotate(-4deg) translate(-3%,-3%)}70%{opacity:.4;transform:rotate(1deg) translate(1%,0)}100%{opacity:0;transform:rotate(0) translate(0,0)}}
@keyframes np-lab-paper-back{0%{opacity:0;transform:rotate(0) translate(0,0)}35%{opacity:.65;transform:rotate(4deg) translate(3%,-1%)}70%{opacity:.4;transform:rotate(-1deg) translate(-1%,0)}100%{opacity:0;transform:rotate(0) translate(0,0)}}

/* Pause applies to a slide's decorative motion as well as its presentation. */
.project-slider[data-paused="true"] .is-motion-active>.project-motion i,
.project-slider[data-paused="true"] .is-motion-active>img{animation-play-state:paused!important}
@media(max-width:900px){
 .premium-preview[data-demo]{--motion-intensity:.7}
 [data-demo="serra"].is-motion-active>img{animation-name:np-serra-camera-small}
 [data-demo="lume"].is-motion-active>img{animation-name:np-lume-object-small}
 @keyframes np-serra-camera-small{0%,100%{transform:scale(1)}45%{transform:scale(1.02)}}
 @keyframes np-lume-object-small{0%,100%{transform:scale(1)}45%{transform:scale(1.015)}}
}
@media(prefers-reduced-motion:reduce){
 .premium-preview[data-demo]>.project-motion{display:none!important}
 .premium-site .premium-preview[data-demo]>img{animation:none!important;transition:none!important;transform:none!important}
}