/* ==========================================================================
   HOME FX
   Scroll choreography for the front page only. Loaded by va_assets() when
   is_front_page() is true, so style.css and every inner page are untouched.

   Progressive enhancement throughout: every "hidden until animated" rule is
   gated behind a class that assets/js/home-fx.js adds at runtime. With JS
   off, or before the script runs, the page renders exactly as it did before.
   ========================================================================== */

/* --- 1. scroll progress hairline ----------------------------------------- */
.va-fxprog{
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 1200;
  transform-origin: 0 50%;
  transform: scaleX(var(--sp, 0));
  background: linear-gradient(90deg, var(--va-blue, #00B2FF), #9FE3FF);
  box-shadow: 0 0 12px rgba(0, 178, 255, 0.8);
  pointer-events: none;
}

/* --- 2. film grain -------------------------------------------------------- */
.va-fxgrain{
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* --- 3. hero stage -------------------------------------------------------- */
.va-hero--fx{
  min-height: 46svh;
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
}
.va-hero--fx > .va-shell{
  width: 100%;
  /* front-page.php sets this inline, so it has to be beaten */
  padding-block: var(--va-s10, 2.75rem) var(--va-s8, 2rem) !important;
}

.va-fxaurs{
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.va-fxaur{
  position: absolute;
  border-radius: 50%;
  filter: blur(62px);
  will-change: transform;
}
.va-fxaur--a{
  left: 54%; top: 36%;
  width: min(820px, 98vw);
  aspect-ratio: 1.45;
  translate: -50% -50%;
  background: radial-gradient(ellipse, rgba(0, 178, 255, 0.26), transparent 62%);
  animation: va-fxdrift1 18s ease-in-out infinite alternate;
}
.va-fxaur--b{
  left: 16%; top: 66%;
  width: min(480px, 72vw);
  aspect-ratio: 1.2;
  translate: -50% -50%;
  background: radial-gradient(ellipse, rgba(110, 194, 255, 0.15), transparent 64%);
  animation: va-fxdrift2 22s ease-in-out infinite alternate;
}
.va-fxaur--c{
  left: 86%; top: 24%;
  width: min(440px, 68vw);
  aspect-ratio: 1.1;
  translate: -50% -50%;
  background: radial-gradient(ellipse, rgba(255, 176, 90, 0.09), transparent 66%);
  animation: va-fxdrift3 26s ease-in-out infinite alternate;
}
@keyframes va-fxdrift1{ to{ transform: translate(-4%, 5%) scale(1.10); } }
@keyframes va-fxdrift2{ to{ transform: translate(9%, -7%) scale(1.14); } }
@keyframes va-fxdrift3{ to{ transform: translate(-8%, 8%) scale(1.08); } }

/* hero parallax exit, driven by --hp */
.va-hero--fx.fx-ready > .va-shell{
  transform: translateY(calc(var(--hp, 0) * -64px));
  opacity: calc(1 - var(--hp, 0) * 1.05);
  will-change: transform, opacity;
}

/* hero headline, word by word. Only hidden once JS has split it. */
.va-display.fx-split .va-fxw{
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em) rotate(2.5deg);
  filter: blur(7px);
  transition:
    opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.72s;
}
.va-display.fx-split.is-lit .va-fxw{
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- 4. pinned statement: progressive word illumination ------------------- */
.va-statement.fx-ready .va-words span{
  color: #2A3038;
  transition: color 0.3s linear, text-shadow 0.3s linear;
}
.va-statement.fx-ready .va-words span.is-on{
  color: var(--va-ink, #FFFFFF);
}
/* the closing clause lands in cyan with a halo */
.va-statement.fx-ready .va-words span.is-on.is-key{
  color: #9FE3FF;
  text-shadow: 0 0 34px rgba(0, 178, 255, 0.6);
}
.va-statement.fx-ready .va-statement__glow{
  opacity: calc(0.1 + 0.9 * var(--pg, 0));
  transform: scale(calc(0.74 + 0.44 * var(--pg, 0)));
}

/* --- 5. how a deal works: rail that draws itself -------------------------- */
.va-fxtl{
  position: relative;
  margin-top: var(--va-s10, 2.75rem);
  padding-left: 76px;
}
.va-fxtl__rail{
  position: absolute;
  left: 25px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: #1B1E23;
  border-radius: 2px;
  overflow: hidden;
}
.va-fxtl__fill{
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--tp, 0) * 100%);
  background: linear-gradient(180deg, #9FE3FF, var(--va-blue, #00B2FF));
  box-shadow: 0 0 14px rgba(0, 178, 255, 0.75);
}
.va-fxtl__row{
  position: relative;
  padding: 24px 0 30px;
}
.va-fxtl__row:last-child{ padding-bottom: 0; }
.va-fxtl__dot{
  position: absolute;
  left: -57px;
  top: 30px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #14171C;
  border: 2px solid #2A2F36;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.va-fxtl__row.is-hit .va-fxtl__dot{
  background: var(--va-blue, #00B2FF);
  border-color: #9FE3FF;
  transform: scale(1.25);
  box-shadow: 0 0 0 6px rgba(0, 178, 255, 0.14), 0 0 18px rgba(0, 178, 255, 0.8);
}
.va-fxtl__n{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--va-ink-muted, #8A94A0);
  margin-bottom: 9px;
  transition: color 0.3s;
}
.va-fxtl__row.is-hit .va-fxtl__n{ color: var(--va-blue, #00B2FF); }
.va-fxtl__row h3{
  margin: 0 0 8px;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.va-fxtl__row p{
  margin: 0;
  max-width: 62ch;
  font-size: 15.2px;
  color: var(--va-ink-soft, #C9D0D7);
  line-height: 1.62;
}

/* --- 6. card tilt and cursor spotlight ----------------------------------- */
.va-fxtiltwrap{ perspective: 1100px; }
.va-fxtilt{
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.25s;
  will-change: transform;
  position: relative;
}
.va-fxtilt::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 178, 255, 0.14),
    transparent 70%
  );
}
.va-fxtilt:hover::after{ opacity: 1; }

/* --- 7. blur and rise reveal --------------------------------------------- */
.va-fx{
  opacity: 0;
  transform: translateY(28px) scale(0.987);
  filter: blur(5px);
  transition:
    opacity 0.78s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.78s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.78s;
}
.va-fx.is-in{
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- 8. narrow screens ---------------------------------------------------- */
@media (max-width: 760px){
  .va-fxtl{ padding-left: 46px; }
  .va-fxtl__rail{ left: 9px; }
  .va-fxtl__dot{ left: -42px; width: 12px; height: 12px; }
  .va-hero--fx{ min-height: 0; display: block; }
}

/* --- 9. reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .va-fxaur{ animation: none; }
  .va-fx{ opacity: 1; transform: none; filter: none; }
  .va-display.fx-split .va-fxw{ opacity: 1; transform: none; filter: none; }
  .va-statement.fx-ready .va-words span{ color: var(--va-ink, #FFFFFF); }
  .va-fxtilt{ transition: none; }
  .va-hero--fx.fx-ready > .va-shell{ transform: none; opacity: 1; }
}

/* --- 10. talk to us, under the closing reveal caption ------------------- */
.va-reveal__cta{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: var(--va-s6, 1.5rem);
  padding: 13px 26px;
  border: 1px solid rgba(0, 178, 255, 0.45);
  border-radius: 999px;
  background: rgba(0, 178, 255, 0.10);
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.va-reveal__cta:hover,
.va-reveal__cta:focus-visible{
  background: rgba(0, 178, 255, 0.20);
  border-color: var(--va-blue, #00B2FF);
  transform: translateY(-2px);
}
.va-reveal__cta span{ transition: transform 0.2s; }

/* While the section is pinned the stage is a grid of absolutely placed
   layers, so the link has to be placed the same way the caption is, and
   fade in with it rather than hanging over the logo the whole time. */
.va-reveal.is-live{
  --va-cta-bottom: max(3.5vh, 26px);
  --va-cta-height: 51px;
  --va-cta-gap: 34px;
}
.va-reveal.is-live .va-reveal__cta{
  position: absolute;
  bottom: var(--va-cta-bottom);
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s, border-color 0.2s;
}
.va-reveal.is-live .va-reveal__cta.is-on{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.va-reveal.is-live .va-reveal__cta.is-on:hover{ transform: translateY(-2px); }
.va-reveal__cta:hover span{ transform: translateX(4px); }
@media (prefers-reduced-motion: reduce){
  .va-reveal__cta,
  .va-reveal__cta span{ transition: none; }
  .va-reveal__cta:hover{ transform: none; }
}

/* Below 860px the theme moves the caption down to 9vh, which put it on top
   of the link. Deriving the caption offset from the link own numbers holds
   a constant gap at every screen height, however many lines it wraps to. */
@media (max-width: 860px){
  .va-reveal.is-live .va-reveal__caption{
    bottom: calc(var(--va-cta-bottom) + var(--va-cta-height) + var(--va-cta-gap));
  }
}