/* ==========================================================================
   Hero animation (homepage) — "Guided hybrid" storefront loop
   Turned on with $site['hero_visual'] = 'animation' in config.php.
   Pure CSS, ~8s seamless loop; colors follow --ink / --accent.
   ========================================================================== */

/* Layout: the headline keeps its full width; the animation sits in a right-hand
   column beside the intro, buttons and "We build on" row. */
.hero-visual { width: 100%; max-width: 520px; margin-top: 48px; }

@media (min-width: 1100px) {
  .hero--animated .hero-content {
    width: 100%; /* align with the header logo (auto margins would otherwise shrink-wrap it) */
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(380px, 34vw, 500px);
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: 0;
    align-items: start;
  }
  .hero--animated .hero-intro { display: contents; }
  .hero--animated .eyebrow,
  .hero--animated .hero-title { grid-column: 1 / -1; }
  .hero--animated .hero-sub,
  .hero--animated .hero-actions,
  .hero--animated .hero-stack { grid-column: 1; }
  .hero--animated .hero-stack { margin-top: 48px; }
  .hero--animated .hero-visual {
    grid-column: 2;
    grid-row: 3 / span 4; /* the extra empty row absorbs the visual's height so the text rows keep their spacing */
    max-width: none;
    margin-top: 8px;
  }
}

/* The stage */
/* Stage is cropped to 100:78 and its contents lifted 6cqw, trimming empty dot rows top and bottom. */
.nxth-stage > .nxth-abs{translate:0 -6cqw}
.nxth-stage{position:relative;width:100%;aspect-ratio:100/78;container-type:inline-size;overflow:hidden}
.nxth-field{position:absolute;inset:0;background-image:radial-gradient(circle,#C9CFD9 1.15px,transparent 1.65px);background-size:4cqw 4cqw;-webkit-mask-image:radial-gradient(130% 120% at 70% 46%,#000 50%,transparent 92%);mask-image:radial-gradient(130% 120% at 70% 46%,#000 50%,transparent 92%)}
.nxth-abs{position:absolute;box-sizing:border-box}
.nxth-loop{animation-duration:8s;animation-iteration-count:infinite;animation-fill-mode:both}
@media (prefers-reduced-motion: reduce){.nxth-stage *,.nxth-stage *::before,.nxth-stage *::after{animation:none !important}}
.nxth-stage.nxth-still *,.nxth-stage.nxth-still *::before,.nxth-stage.nxth-still *::after{animation:none !important}


.nxth-d3-card{animation-name:nxth-d3card;transform-origin:0 0;box-shadow:0 0.4cqw 1.2cqw rgba(20,33,61,0.06),0 2.4cqw 5cqw -2cqw rgba(20,33,61,0.12)}
.nxth-k1{--fx:-24cqw;--fy:0cqw;--bx:-4cqw;--by:4cqw;--bm:1.125;--bs:1.25;--ex:-4cqw;--ey:0cqw;animation-delay:0s}
.nxth-k2{--fx:0cqw;--fy:-20cqw;--bx:16cqw;--by:-8cqw;--bm:1;--bs:1;--ex:0cqw;--ey:-4cqw;animation-delay:.2s}
.nxth-k3{--fx:24cqw;--fy:0cqw;--bx:-4cqw;--by:12cqw;--bm:1;--bs:1;--ex:4cqw;--ey:0cqw;animation-delay:.4s}
.nxth-k4{--fx:0cqw;--fy:20cqw;--bx:-16cqw;--by:16cqw;--bm:1;--bs:1;--ex:0cqw;--ey:4cqw;animation-delay:.6s}
.nxth-dl0{animation-delay:0s}
.nxth-dl1{animation-delay:.2s}
.nxth-dl2{animation-delay:.4s}
.nxth-dl3{animation-delay:.6s}
.nxth-d3-gh{animation-name:nxth-d3gh;opacity:0}
.nxth-d3-gv{animation-name:nxth-d3gv;opacity:0}
.nxth-d3-gbh{animation-name:nxth-d3gbh;opacity:0}
.nxth-d3-gbv{animation-name:nxth-d3gbv;opacity:0}
.nxth-guide{background:rgba(20,33,61,0.2)}
.nxth-metal{background:linear-gradient(90deg,#BCC3CE 0%,#E9ECF1 36%,#D3D8E0 66%,#B6BDC9 100%)}
.nxth-metal-h{background:linear-gradient(180deg,#E6E9EE 0%,#D3D8E0 45%,#B6BDC9 100%)}
.nxth-pump{background:#FFFFFF;border:1px solid #CBD1DB}
.nxth-route{background:var(--accent);opacity:0}
.nxth-d3-rh{animation-name:nxth-d3rh}
.nxth-d3-rv{animation-name:nxth-d3rv}
.nxth-d3-anchor{width:1.2cqw;height:1.2cqw;margin:-0.6cqw 0 0 -0.6cqw;border-radius:50%;background:var(--accent);animation-name:nxth-d3anchor}
.nxth-d3-anchor::after{content:"";position:absolute;inset:-0.7cqw;border:1px solid var(--accent);border-radius:50%;opacity:0;animation:nxth-d3ring 8s infinite both;animation-delay:inherit}
@keyframes nxth-d3card{
0%,4%{transform:translate(var(--fx),var(--fy)) scale(1);opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
15%,52%{transform:translate(0cqw,0cqw) scale(1);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
58%{transform:translate(var(--bx),0cqw) scale(var(--bm));opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
64%,84%{transform:translate(var(--bx),var(--by)) scale(var(--bs));opacity:1;animation-timing-function:cubic-bezier(.5,0,.75,0)}
92%,100%{transform:translate(calc(var(--bx) + var(--ex)),calc(var(--by) + var(--ey))) scale(var(--bs));opacity:0}}
@keyframes nxth-d3anchor{
0%{transform:translate(0cqw,0cqw) scale(0);opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
3%,47%{transform:translate(0cqw,0cqw) scale(1);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
51%{transform:translate(var(--bx),0cqw) scale(1);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}
55%,86%{transform:translate(var(--bx),var(--by)) scale(1);opacity:1;animation-timing-function:cubic-bezier(.5,0,.75,0)}
93%,100%{transform:translate(var(--bx),var(--by)) scale(0);opacity:0}}
@keyframes nxth-d3ring{0%,2%{transform:scale(.4);opacity:0}4%{transform:scale(.7);opacity:.8}14%,55%{transform:scale(2.4);opacity:0}55.1%{transform:scale(.4);opacity:0}57%{transform:scale(.7);opacity:.8}67%,100%{transform:scale(2.4);opacity:0}}
@keyframes nxth-d3gh{0%,2%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}11%,16%{transform:scaleX(1);opacity:1}25%,100%{transform:scaleX(1);opacity:0}}
@keyframes nxth-d3gv{0%,2%{transform:scaleY(0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}11%,16%{transform:scaleY(1);opacity:1}25%,100%{transform:scaleY(1);opacity:0}}
@keyframes nxth-d3gbh{0%,58%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}65%,69%{transform:scaleX(1);opacity:1}78%,100%{transform:scaleX(1);opacity:0}}
@keyframes nxth-d3gbv{0%,58%{transform:scaleY(0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}65%,69%{transform:scaleY(1);opacity:1}78%,100%{transform:scaleY(1);opacity:0}}
@keyframes nxth-d3rh{0%,45%{transform:scaleX(0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}49%,58%{transform:scaleX(1);opacity:1}66%,100%{transform:scaleX(1);opacity:0}}
@keyframes nxth-d3rv{0%,48%{transform:scaleY(0);opacity:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}52%,58%{transform:scaleY(1);opacity:1}66%,100%{transform:scaleY(1);opacity:0}}

.nxth-stage.nxth-paused *,.nxth-stage.nxth-paused *::before,.nxth-stage.nxth-paused *::after{animation-play-state:paused !important}