/* ==========================================================================
   Apex Motion System — shared interaction/animation layer (apexit)
   Elite + fast: GPU-only transforms, reduced-motion + desktop gating,
   zero layout shift. Loaded after the theme CSS so tokens/utilities win.
   ========================================================================== */

:root{
  /* Brand */
  --apex-primary: #1478be;           /* electric blue */
  --apex-primary-rgb: 20,120,190;
  --apex-glow: #00eaff;
  --apex-ink: #000;
  --apex-light: #fff;
  /* Motion tokens */
  --dur-fast: .25s;
  --dur-base: .6s;
  --dur-slow: 1s;
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-out-quart: cubic-bezier(.25,1,.5,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* --------------------------------------------------------------------------
   Reactive hero canvas (electric-blue particle field). Sits behind the hero
   content; never intercepts clicks; desktop-only (JS adds .is-on).
   -------------------------------------------------------------------------- */
.apex-hero-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
  opacity:0; transition:opacity 1.2s var(--ease-out-quart);
  display:none;                      /* JS reveals on capable desktops */
}
.apex-hero-canvas.is-on{ display:block; }
.apex-hero-canvas.is-visible{ opacity:1; }

/* WebGL showpiece canvas (apex-webgl.js) — the 3D upgrade of the field. Same
   stacking as the 2D canvas; revealed only when the WebGL layer activates. */
.apex-webgl-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
  opacity:0; transition:opacity 1.2s var(--ease-out-quart);
  display:none;
}
.apex-webgl-canvas.is-on{ display:block; }
.apex-webgl-canvas.is-visible{ opacity:1; }
/* When the WebGL showpiece owns the hero, hide the 2D fallback field entirely. */
html.apex-webgl-on .apex-hero-canvas{ display:none !important; }

/* Keep hero text/CTAs above the canvas */
.mil-banner .mil-banner-content{ position:relative; z-index:3; }
.mil-banner .mil-gradient{ z-index:1; }
.mil-banner .mil-animation-frame{ z-index:0; }

/* --------------------------------------------------------------------------
   Headline keyword shimmer — animated electric-blue sweep on accent words.
   Pure CSS, cheap; respects reduced-motion (falls back to solid color).
   -------------------------------------------------------------------------- */
.apex-shimmer{ color:#fff; }   /* safe fallback: solid white if clip:text unsupported */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .apex-shimmer{
    background:linear-gradient(100deg,
        var(--apex-light) 0%, var(--apex-light) 38%,
        var(--apex-glow) 50%,
        var(--apex-light) 62%, var(--apex-light) 100%);
    background-size:220% 100%;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:apex-shimmer 6s var(--ease-out-quart) infinite;
  }
}
@keyframes apex-shimmer{ 0%{background-position:135% 0} 60%,100%{background-position:-35% 0} }

/* --------------------------------------------------------------------------
   Scroll-reveal utility (IntersectionObserver adds .is-in). Transform/opacity
   only → no CLS. Generic so it can roll out site-wide later.
   -------------------------------------------------------------------------- */
/* Hidden state applies ONLY when JS is running (html.apex-js) → no-JS shows content. */
html.apex-js [data-reveal]{
  opacity:0; transform:translate3d(0,24px,0);
  transition:opacity var(--dur-base) var(--ease-out-quart),
             transform var(--dur-base) var(--ease-out-expo);
}
html.apex-js [data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-reveal-delay="3"]{ transition-delay:.24s; }

/* --------------------------------------------------------------------------
   Homepage hero polish (from the UI/UX audit). Scoped to the homepage where
   this file loads + the hero (banner.php) renders; loads after the theme so
   these win the cascade without touching style.css.
   -------------------------------------------------------------------------- */
@media (max-width:480px){
  .mil-banner h1{ font-size:clamp(18px,5.4vw,30px); hyphens:auto; }   /* extra small-phone breathing room */
}
@media (min-width:992px){
  .mil-circle-text{ right:90px; }   /* clear the floating call / WhatsApp buttons */
}
/* The hero is a fixed 100vh banner with bottom-anchored content inside an
   ABSOLUTE overlay (.mi-invert-fix) — it cannot grow with its content. On
   shorter desktop windows (browser chrome leaves <~880px tall) the big headline
   + the injected proof strip overflowed and clipped the TOP headline line.
   Fix: compact the hero on short windows so everything fits the fixed height. */
@media (min-width:993px) and (max-height:880px){
  .mil-banner .mil-mb-60{ margin-bottom:26px; }
  .mil-banner .mil-banner-content{ padding-bottom:48px; }
  .apex-command-strip{ margin:14px 0 0; }
  .apex-command-chip{ min-height:60px; padding:10px 14px; }
}
@media (min-width:993px) and (max-height:760px){
  .mil-banner h1{ font-size:clamp(24px,4vw,54px); }
  .apex-command-strip{ display:none; }   /* drop the proof strip on very short windows */
}

/* --------------------------------------------------------------------------
   Reduced motion: kill the canvas + shimmer + reveal transforms entirely.
   (Global theme rule already neutralizes durations; this guarantees the
   canvas never renders and revealed content is immediately visible.)
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Homepage dark-theme UI fixes (loaded on the homepage only). The theme's
   default hamburger + heading colors are black, which is invisible on the
   dark homepage hero/sections.
   -------------------------------------------------------------------------- */
.mil-menu-btn span,
.mil-menu-btn span:after,
.mil-menu-btn span:before{ background:#fff !important; }   /* white hamburger on the dark hero */
#faq-heading{ color:#fff; }                                /* FAQ title was black-on-dark (invisible) */

/* --------------------------------------------------------------------------
   "Find the right next step" explore cards — the base cards are flat. Add a
   richer, GPU-only hover: stronger lift, brand glow, a heading nudge, and an
   arrow cue that slides in. Builds on the theme's existing top-bar grow.
   -------------------------------------------------------------------------- */
.apex-link-card{
  position:relative; overflow:hidden;
  transition:transform .45s var(--ease-out-expo), border-color .4s ease,
             background-color .4s ease, box-shadow .45s var(--ease-out-expo);
}
.apex-link-card h5{ transition:color .35s ease, transform .45s var(--ease-out-expo); }
.apex-link-card .apex-link-card-label{ transition:letter-spacing .4s ease, color .35s ease; }
.apex-link-card:after{                 /* arrow cue, revealed on hover */
  content:""; position:absolute; right:22px; bottom:20px; width:22px; height:22px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231478be' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  opacity:0; transform:translateX(-8px);
  transition:opacity .4s ease, transform .45s var(--ease-out-expo);
}
.apex-link-card:hover{
  transform:translateY(-10px);
  box-shadow:0 22px 50px -22px rgba(20,120,190,.6);
}
.apex-link-card:hover h5{ color:#fff; transform:translateX(4px); }
.apex-link-card:hover .apex-link-card-label{ letter-spacing:1.6px; }
.apex-link-card:hover:after{ opacity:1; transform:translateX(0); }

/* --------------------------------------------------------------------------
   Hero "Scroll down" indicator: the arrow button is position:absolute, so its
   static position falls AFTER the rotating-text SVG in the flex flow and it
   lands beside the ring instead of inside it. Pin it to the ring's dead center.
   -------------------------------------------------------------------------- */
.mil-banner .mil-circle-text .mil-button{   /* beat home-animations' .mil-banner .mil-button{position:relative} */
  position:absolute;                         /* take it out of the flex flow… */
  top:0; right:0; bottom:0; left:0;
  width:70px; height:70px;
  margin:auto;                               /* …and pin it dead-center of the ring */
  padding:15px;
}

@media (prefers-reduced-motion: reduce){
  .apex-hero-canvas,
  .apex-webgl-canvas{ display:none !important; }
  .apex-shimmer{ animation:none !important; background:none !important;
    -webkit-text-fill-color:currentColor !important; color:#fff !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .apex-link-card, .apex-link-card h5, .apex-link-card:after{ transition:none !important; }
  .apex-link-card:hover{ transform:none !important; }
}