/* ─── Extra motion styles ─── */

/* Scroll progress bar at top */
.scroll-prog{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg, var(--cobalt-accent), var(--emerald-accent), var(--plum-accent));z-index:100;transition:width .08s linear;pointer-events:none;box-shadow:0 0 12px color-mix(in oklab, var(--cobalt-accent) 60%, transparent)}

/* Full-fold backdrop layers */
.bg-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.fold > .wrap{position:relative;z-index:1}
.fold{isolation:isolate}

/* Animated grid (cobalt) */
.grid-bg{
  position:absolute;inset:-2px;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--cobalt-fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--cobalt-fg) 6%, transparent) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 80%);
  animation:gridPan 28s linear infinite;
}
@keyframes gridPan{to{background-position:64px 64px}}

/* Floating orbs */
.orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.45;will-change:transform}
.orb-a{width:520px;height:520px;background:radial-gradient(circle, color-mix(in oklab, var(--cobalt-accent) 55%, transparent), transparent 65%);top:-120px;right:-80px;animation:floatY 14s ease-in-out infinite alternate}
.orb-b{width:420px;height:420px;background:radial-gradient(circle, color-mix(in oklab, var(--cobalt-fg) 14%, transparent), transparent 65%);bottom:-140px;left:-80px;animation:floatY 18s ease-in-out infinite alternate-reverse}
.orb-em{width:460px;height:460px;background:radial-gradient(circle, color-mix(in oklab, var(--emerald-accent) 40%, transparent), transparent 65%);top:10%;left:-100px;animation:floatY 16s ease-in-out infinite alternate;filter:blur(60px);opacity:.35}
.orb-pl{width:520px;height:520px;background:radial-gradient(circle, color-mix(in oklab, var(--plum-accent) 40%, transparent), transparent 65%);top:20%;right:-120px;animation:floatY 20s ease-in-out infinite alternate-reverse;filter:blur(60px);opacity:.35}
@keyframes floatY{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-4%, 5%, 0) scale(1.06)}
  100%{transform:translate3d(4%, -3%, 0) scale(1.02)}
}

/* Constellation (hero) */
.constellation{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.constellation circle{fill:var(--obsidian-fg);animation:twinkle 4s ease-in-out infinite}
.constellation circle:nth-child(3n){animation-delay:1.2s}
.constellation circle:nth-child(5n){animation-delay:2.4s}
.constellation line{stroke:var(--obsidian-fg);stroke-opacity:.12;stroke-width:1}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}

/* Morphing blob (hero) */
.blob{position:absolute;width:320px;height:320px;right:6%;top:8%;opacity:.7;filter:blur(2px);mix-blend-mode:screen;pointer-events:none}
.blob path{fill:color-mix(in oklab, var(--cobalt-accent) 80%, var(--obsidian));animation:blobMorph 16s ease-in-out infinite}
@keyframes blobMorph{
  0%,100%{d:path("M160,40 C230,40 290,90 290,160 C290,240 230,290 160,290 C90,290 40,230 40,160 C40,90 90,40 160,40 Z")}
  33%   {d:path("M170,30 C250,50 300,110 280,180 C260,260 180,300 110,270 C40,240 20,160 50,100 C80,40 120,20 170,30 Z")}
  66%   {d:path("M150,50 C220,30 300,80 300,160 C310,230 240,300 160,290 C80,290 30,220 40,150 C50,80 100,60 150,50 Z")}
}

/* Emerald: diagonal shimmering lines */
.shimmer-lines{position:absolute;inset:0;background:
  repeating-linear-gradient(135deg, transparent 0 44px, color-mix(in oklab, var(--emerald-fg) 3%, transparent) 44px 45px);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, black, transparent 85%);
  animation:shimmerPan 40s linear infinite}
@keyframes shimmerPan{to{background-position:180px 180px}}

/* Plum: dot field */
.dotfield{position:absolute;inset:0;
  background-image:radial-gradient(circle, color-mix(in oklab, var(--plum-fg) 20%, transparent) 1px, transparent 1.5px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent 80%);
  animation:dotsPan 30s linear infinite}
@keyframes dotsPan{to{background-position:22px 22px}}

/* Parallax wrappers (JS sets --py) */
.plx{transform:translate3d(0, calc(var(--py, 0) * 1px), 0);transition:transform .1s linear;will-change:transform}

/* Tilt cards (JS sets --rx --ry) */
.tilt{transform:perspective(800px) rotateX(calc(var(--rx,0) * 1deg)) rotateY(calc(var(--ry,0) * 1deg));transform-style:preserve-3d;transition:transform .2s cubic-bezier(.2,.7,.2,1);will-change:transform}

/* Case row shimmering reveal bar on scroll */
.case{position:relative}
.case .prog-bar{position:absolute;right:0;bottom:0;height:2px;width:0%;background:var(--emerald-accent);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.case.in .prog-bar{width:100%}

/* Use case number counter bar */
.use{position:relative}
.use .under{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--plum-accent);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
.use:hover .under{transform:scaleX(1)}

/* Animated chevron on nav CTA */
.nav .btn-primary .btn-arrow{animation:nudge 2.2s ease-in-out infinite}
@keyframes nudge{0%,80%,100%{transform:translateX(0)}40%{transform:translateX(4px)}}

/* Product shot ambient activity */
.product-shot .body{position:relative}
.ps-bars{position:absolute;inset:28px 28px auto 28px;display:grid;grid-template-columns:repeat(6,1fr);gap:14px;z-index:1}
.ps-bar{height:72px;border:1px solid var(--obsidian-line);border-radius:4px;background:color-mix(in oklab, var(--obsidian) 70%, var(--obsidian-2));padding:10px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--mono);font-size:9px;color:var(--obsidian-mute);text-transform:uppercase;letter-spacing:0.1em;overflow:hidden}
.ps-bar .val{font-family:var(--display);font-weight:700;font-size:18px;color:var(--obsidian-fg);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.ps-spark{position:absolute;left:28px;right:28px;bottom:28px;top:120px;border:1px solid var(--obsidian-line);border-radius:4px;background:color-mix(in oklab, var(--obsidian) 70%, var(--obsidian-2));padding:14px;overflow:hidden}
.ps-spark svg{width:100%;height:100%}
.ps-spark .line{fill:none;stroke:var(--obsidian-fg);stroke-width:1.5;stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawLine 4s ease-out forwards infinite}
.ps-spark .line.b{stroke:color-mix(in oklab, var(--cobalt-accent) 70%, white);animation-delay:.6s;opacity:.6}
@keyframes drawLine{0%{stroke-dashoffset:1200}60%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:.9}}

/* Orbit ring in the service fold */
.orbit{position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;border:1px solid color-mix(in oklab, var(--cobalt-fg) 10%, transparent);pointer-events:none;opacity:.5;animation:spin 80s linear infinite}
.orbit.sm{width:560px;height:560px;margin:-280px 0 0 -280px;animation-duration:50s;animation-direction:reverse;opacity:.4}
.orbit .node{position:absolute;width:6px;height:6px;background:var(--cobalt-accent);border-radius:50%;top:-3px;left:50%;transform:translateX(-50%);box-shadow:0 0 14px var(--cobalt-accent)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Marquee already exists — give emerald orb for variety */
.marquee-item .sep{box-shadow:0 0 10px var(--emerald-accent)}

/* Cursor trail (small glow that follows the mouse over hero) */
.cursor-glow{position:fixed;width:320px;height:320px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle, color-mix(in oklab, var(--cobalt-accent) 18%, transparent), transparent 70%);mix-blend-mode:screen;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s}
.cursor-glow.show{opacity:.6}

/* Fold transition divider */
.divider{height:1px;width:100%;background:linear-gradient(90deg, transparent, currentColor, transparent);opacity:.2;margin:0}