/* ------------------------------------------------------------------
   VAM hero — two acts on a silent loop.
   Act 1: a converging lattice with the VAM mark at its centre (WebGL).
   Act 2: product cards over a grid horizon (CSS 3D).
   Everything is prefixed .vam-* so it cannot collide with the theme.
   ------------------------------------------------------------------ */

#home { position: relative; overflow: hidden; }

/* Scoped under #home deliberately: the theme applies
   `.has-ovm > :not(.nk-ovm):not(.header-main):not(.nk-header):not([class*="ui-mask"])`
   { position: relative; z-index: 5 } to every direct child of this section. That selector
   scores (0,5,0), so a bare `.vam-hero` loses to it and the layer collapses to zero height.
   The ID takes it to (1,1,0) and wins. */
#home .vam-hero {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;            /* the copy and its buttons stay clickable */
  overflow: hidden;
}
.vam-scene { position: absolute; inset: 0; opacity: 0; transition: opacity 1.7s cubic-bezier(.4, 0, .3, 1); }
.vam-scene.is-on { opacity: 1; }

/* ---------- act 1 ---------- */
#vamCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vam-halo {
  position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease;
  background: radial-gradient(38% 42% at var(--vam-hx, 68%) var(--vam-hy, 50%), rgba(70, 224, 184, .16), transparent 70%);
}
.vam-halo.is-lit { opacity: 1; }
.vam-mark {
  position: absolute; left: 68%; top: 50%; width: 19%; max-width: 230px; height: auto;
  transform: translate(-50%, -50%) scale(.8); opacity: 0;
  transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 0 18px rgba(70, 224, 184, .55)) drop-shadow(0 0 60px rgba(70, 224, 184, .25));
}
.vam-mark.is-lit { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---------- act 2 ---------- */
.vam-floor-wrap { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 64% 46%; overflow: hidden; }
.vam-grid {
  position: absolute; left: -40%; right: -40%; bottom: -12%; height: 120%;
  transform-origin: 50% 100%; transform: rotateX(74deg) translateZ(-40px);
  background-image:
    linear-gradient(rgba(70, 224, 184, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 224, 184, .22) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 45%, #000 100%);
  opacity: 0; transition: opacity 1.6s ease; animation: vam-fly 6s linear infinite;
}
.vam-scene.is-on .vam-grid { opacity: .5; }
@keyframes vam-fly { from { background-position: 0 0, 0 0; } to { background-position: 0 64px, 0 0; } }
.vam-dglow { position: absolute; inset: 0; background: radial-gradient(56% 54% at 66% 48%, rgba(70, 224, 184, .14), transparent 70%); }
.vam-stage { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 62% 45%; }
.vam-orbit { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.vam-card {
  position: absolute; width: 25%; max-width: 330px; border-radius: 14px; padding: 14px 16px;
  background: linear-gradient(160deg, rgba(20, 30, 26, .88), rgba(9, 14, 12, .94));
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(70, 224, 184, .05);
  /* deliberately no backdrop-filter: the orbit's transform changes every frame, which would
     force the blur to re-sample the backdrop each time — that was the main source of jitter.
     The card fill is 88-94% opaque, so the blur contributed almost nothing visually. */
  transform-style: preserve-3d; font-size: clamp(9px, .8vw, 12px); line-height: 1.5; color: #d6e2dc;
  opacity: 0; transition: transform 1.3s cubic-bezier(.2, .8, .2, 1), opacity 1.1s ease; will-change: transform, opacity;
}
.vam-card .vam-ch { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.vam-card .vam-ch b { font-weight: 600; color: #fff; font-size: 1.06em; }
.vam-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; color: #46e0b8;
  border: 1px solid rgba(70, 224, 184, .18); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.vam-big { font-size: 2.1em; font-weight: 600; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.vam-big small { font-size: .42em; color: #93a59d; font-weight: 400; margin-left: .3em; }
.vam-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
.vam-row span:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #93a59d; font-size: .92em; white-space: nowrap; }
.vam-card svg { display: block; width: 100%; height: 40px; }
.vam-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 9px; }
.vam-bar i { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, #1ebf95, #46e0b8); }

/* Clustered in the right half, clear of the banner copy, and sized so the perspective
   scale (up to 1.22x at z=200) still lands inside the viewport. The phone leads the group;
   the two drawn cards sit behind it, lower and further right. */
.vam-c1 { width: 19%; left: 70%; top: 17%; transform: translate3d(0, 0, -520px) rotateY(-30deg); }
.vam-c2 { width: 20%; left: 66%; top: 54%; transform: translate3d(0, 0, -520px) rotateY(-22deg); }
.vam-c3 { width: 12%; left: 52%; top: 21%; transform: translate3d(0, 0, -520px) rotateY(-10deg); }

/* a real product screen, framed as glass rather than a drawn card */
.vam-phone {
  padding: 0; background: none; border: 0; overflow: hidden;
  border-radius: 9% / 4.15%;
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .14), 0 0 70px -18px rgba(70, 224, 184, .4);
}
.vam-phone img { display: block; width: 100%; height: auto; }
.vam-phone::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .03) 22%, transparent 45%);
}
.vam-scene.is-on .vam-c1 { opacity: 1; transform: translate3d(0, 0, 40px)  rotateY(-16deg) rotateX(4deg);  transition-delay: .2s; }
.vam-scene.is-on .vam-c2 { opacity: 1; transform: translate3d(0, 0, 120px) rotateY(-10deg) rotateX(2deg);  transition-delay: .4s; }
.vam-scene.is-on .vam-c3 { opacity: 1; transform: translate3d(0, 0, 200px) rotateY(-6deg)  rotateX(-2deg); transition-delay: .6s; }
.vam-scene.is-settled .vam-c1 { animation: vam-bob 6s ease-in-out infinite; }
.vam-scene.is-settled .vam-c2 { animation: vam-bob 7s ease-in-out -2s infinite; }
.vam-scene.is-settled .vam-c3 { animation: vam-bob 8s ease-in-out -4s infinite; }
@keyframes vam-bob { 0%, 100% { translate: 0 0 } 50% { translate: 0 -10px } }

.vam-vignette { position: absolute; inset: 0; z-index: 2; background: radial-gradient(90% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, .55) 100%); }

/* keep the banner copy above the visual and readable over it */
#home .nk-banner { position: relative; z-index: 3; }
/* particles stay, but as faint dust *behind* the lattice — the theme pins them to z-index 5
   with !important, which would otherwise float them over the headline */
#home #particles-bg.particles-container { z-index: 1 !important; opacity: .55; }
/* Cap the copy so "AI-Native by Design" wraps to two lines. Unconstrained it runs to x=800
   at 1690px wide while the sphere's left edge is x=782, and the two collide. */
@media (min-width: 992px) {
  /* .wide-auto sets margin:auto, which re-centres the caption inside its column (129px of
     offset at 1690px) and undoes the container shift — pin it to the left edge instead. */
  #home .banner-caption { max-width: 27rem; margin-left: 0; margin-right: auto; }
  /* Widen the hero container so the copy sits further left, well clear of the sphere.
     Scoped to #home, so every other section keeps the theme's normal container width. */
  #home .banner-wrap > .container { max-width: min(1440px, 94vw); }
  /* the theme centres .title and .lead from inside, so text-lg-start on the wrapper is not
     enough — pin the children left too, otherwise the copy reads as a centred block */
  #home .banner-caption,
  #home .banner-caption .cpn-head,
  #home .banner-caption .title,
  #home .banner-caption .token-box,
  #home .banner-caption .lead { text-align: left; }
}
#home .banner-caption .title,
#home .banner-caption .lead { text-shadow: 0 2px 26px rgba(0, 0, 0, .55); }

/* ---------- stacked layout: visual on top, copy beneath, cards deal as one deck ----------
   Breakpoint is 991.98px on purpose: that is where Bootstrap drops col-lg-6 and the theme
   lets the banner copy span the full width. Switching any later leaves a band of tablet
   widths where the copy is full-width but the lattice is still offset right, and they overlap. */
@media (max-width: 991.98px) {
  /* copy first, visual underneath it */
  #home .nk-banner .banner-wrap { padding-top: 16vh; padding-bottom: 52vh; }
  .vam-mark { width: 36%; max-width: 200px; }
  .vam-halo { background: radial-gradient(46% 22% at var(--vam-hx, 50%) var(--vam-hy, 26%), rgba(70, 224, 184, .18), transparent 70%); }
  .vam-dglow { background: radial-gradient(74% 26% at 50% 66%, rgba(70, 224, 184, .15), transparent 70%); }
  .vam-floor-wrap { perspective-origin: 50% 62%; }
  .vam-stage { perspective-origin: 50% 60%; perspective: 1000px; }

  /* one card at a time, dealt downward off the top of the stack */
  .vam-card {
    left: 10%; right: 10%; top: 50%; width: auto; max-width: none;
    font-size: 12px; padding: 14px 15px; border-radius: 14px;
    transform: translate3d(0, 44px, -200px) scale(.92);
    transition: transform .72s cubic-bezier(.2, .8, .2, 1), opacity .72s ease;
  }
  .vam-card svg { height: 38px; }
  .vam-phone { left: 29%; right: 29%; top: 42%; }
  .vam-scene.is-on .vam-card[data-deck="0"]   { opacity: 1;   z-index: 3; transform: translate3d(0, 0, 60px) rotateX(2deg); }
  .vam-scene.is-on .vam-card[data-deck="1"]   { opacity: .3; z-index: 2; transform: translate3d(0, -15px, 0) scale(.94); }
  .vam-scene.is-on .vam-card[data-deck="2"]   { opacity: .13;  z-index: 1; transform: translate3d(0, -28px, -50px) scale(.88); }
  .vam-scene.is-on .vam-card[data-deck="out"] { opacity: 0;   z-index: 4; transform: translate3d(0, 92px, 90px) scale(.96); }
  .vam-scene.is-settled .vam-card { animation: none; }
  .vam-vignette { background: radial-gradient(100% 76% at 50% 66%, transparent 38%, rgba(0, 0, 0, .7) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .vam-mark, .vam-halo, .vam-card, .vam-grid { transition: none !important; animation: none !important; }
}