/* ============================================================
   MOOVLI — Hero motion layer
   Makes the hero feel alive: drifting gradient orbs, a flowing
   accent headline, pinging eyebrow, floating pills, a dashboard
   sheen sweep + live KPI count-up.
   Loaded AFTER anim.css / media.css. All motion is transform/
   decorative-only so frozen captures still show full content,
   and everything is gated on prefers-reduced-motion.
   ============================================================ */

/* ---------------------------------------------------------------
   1 · Gradient-mesh orbs (injected by hero-motion.js)
   Soft, blurred violet + mint light that drifts behind the grid.
   Whitespace stays the hero — orbs are low-opacity atmosphere.
--------------------------------------------------------------- */
.hero-orbs{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; will-change:transform; }
.orb{ position:absolute; border-radius:50%; will-change:transform; }
.orb-1{ width:560px; height:560px; top:-170px; left:-110px; filter:blur(76px); opacity:.34;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent) 62%, transparent), transparent 70%); }
.orb-2{ width:440px; height:440px; top:40px; right:-130px; filter:blur(72px); opacity:.28;
  background:radial-gradient(circle, color-mix(in srgb,var(--mint) 72%, transparent), transparent 70%); }
.orb-3{ width:520px; height:520px; bottom:-240px; left:36%; filter:blur(80px); opacity:.24;
  background:radial-gradient(circle, color-mix(in srgb,var(--accent-2) 70%, transparent), transparent 70%); }

@media (prefers-reduced-motion: no-preference){
  .orb-1{ animation:orb1 19s ease-in-out infinite alternate; }
  .orb-2{ animation:orb2 23s ease-in-out infinite alternate; }
  .orb-3{ animation:orb3 21s ease-in-out infinite alternate; }
  @keyframes orb1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(64px,42px) scale(1.12); } }
  @keyframes orb2{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-52px,34px) scale(1.1); } }
  @keyframes orb3{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(34px,-44px) scale(1.14); } }
}

/* let the decorative grid breathe (very slow drift) */
@media (prefers-reduced-motion: no-preference){
  .hero-grid-bg{ animation:gridDrift 40s linear infinite; }
  @keyframes gridDrift{ from{ background-position:0 0, 0 0; } to{ background-position:48px 48px, 48px 48px; } }
}

/* ---------------------------------------------------------------
   2 · Flowing accent headline + always-visible underline
   color:transparent over a gradient → rests as a static gradient
   in a frozen frame, just stops flowing. Underline is always drawn.
--------------------------------------------------------------- */
.hero h1 .accent{
  position:relative; color:transparent;
  background:linear-gradient(100deg,
    var(--accent) 0%, var(--accent-2) 30%, var(--mint-600) 52%, var(--accent-2) 74%, var(--accent) 100%);
  background-size:240% 100%; background-position:0% 50%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion: no-preference){
  .hero h1 .accent{ animation:accentFlow 7.5s ease-in-out infinite; }
  @keyframes accentFlow{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
}

/* ---------------------------------------------------------------
   3 · Eyebrow — pinging live dot
--------------------------------------------------------------- */
.eyebrow{ position:relative; }
@media (prefers-reduced-motion: no-preference){
  .eyebrow .dot{ position:relative; }
  .eyebrow .dot::after{
    content:""; position:absolute; inset:-3px; border-radius:50%;
    border:2px solid var(--accent); animation:dotPing 2.6s ease-out infinite;
  }
  @keyframes dotPing{ 0%{ transform:scale(.5); opacity:.8; } 80%,100%{ transform:scale(2.3); opacity:0; } }
}

/* ---------------------------------------------------------------
   4 · Benefit pills — gentle float + reactive hover
--------------------------------------------------------------- */
.hpill{ transition:transform .25s var(--ease-soft), box-shadow .25s, border-color .25s; }
.hpill svg{ color:var(--accent); transition:transform .25s var(--ease-soft); }
.hpill:hover{ transform:translateY(-3px); border-color:var(--accent-line); box-shadow:0 12px 26px -12px var(--accent-sh); }
.hpill:hover svg{ transform:scale(1.12) rotate(-4deg); }
@media (prefers-reduced-motion: no-preference){
  .hero-loaded .hpill{ animation:pillBob 6s ease-in-out infinite; }
  .hero-loaded .hpill:nth-child(2){ animation-delay:.6s; }
  .hero-loaded .hpill:nth-child(3){ animation-delay:1.2s; }
  .hpill:hover{ animation-play-state:paused; }
  @keyframes pillBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
}

/* ---------------------------------------------------------------
   5 · Dashboard sheen sweep (periodic, clipped by .dash overflow)
--------------------------------------------------------------- */
.hero-dash .dash{ position:relative; }
.hero-dash .dash::after{
  content:""; position:absolute; top:0; left:-65%; width:42%; height:100%; z-index:6; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent);
  transform:skewX(-16deg);
}
@media (prefers-reduced-motion: no-preference){
  .hero-dash .dash::after{ animation:dashSheen 8.5s ease-in-out 1.4s infinite; }
  @keyframes dashSheen{ 0%,68%{ left:-65%; } 84%,100%{ left:130%; } }
}
@media (prefers-reduced-motion: reduce){ .hero-dash .dash::after{ display:none; } }

/* ---------------------------------------------------------------
   6 · KPI numbers use tabular figures so count-up doesn't reflow
--------------------------------------------------------------- */
.hero-dash .kpi .kn{ font-variant-numeric:tabular-nums; }

/* ===============================================================
   CINEMATIC HERO — full-bleed photo, violet grade, copy left,
   product dashboard right. Motion makes the still feel like film.
   =============================================================== */
.hero-cine{ padding:0; min-height:min(92vh,900px); display:flex; align-items:center; color:#fff; isolation:isolate; }
.hero-cine::after{ display:none; }                 /* drop the light-mode centre glow */

/* media layers */
.hero-cine .hero-media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% center; will-change:transform; }
.hero-cine .hero-bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; opacity:0; transition:opacity 1s ease; }
.hero-cine.has-video .hero-bg-video{ opacity:1; }

/* slow Ken-Burns push so the photo breathes like footage */
@media (prefers-reduced-motion: no-preference){
  .hero-photo{ animation:kenburns 28s ease-in-out infinite alternate; }
  @keyframes kenburns{ from{ transform:scale(1.05); } to{ transform:scale(1.16) translate(-2%,-1.5%); } }
}
/* phones: the 16:9 photo is already heavily upscaled to fill a portrait hero —
   the extra Ken-Burns zoom makes it visibly soft, so keep it still */
@media (max-width:760px){
  .hero-photo{ animation:none; transform:none; will-change:auto; }
}

/* violet cinematic grade — strong left for legible copy */
.hero-grade{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, color-mix(in srgb,var(--ink-2) 94%, transparent) 0%,
                            color-mix(in srgb,var(--ink-2) 66%, transparent) 36%,
                            color-mix(in srgb,var(--ink-2) 12%, transparent) 66%, transparent 82%),
    linear-gradient(0deg, color-mix(in srgb,var(--ink-2) 82%, transparent) 0%, transparent 40%),
    radial-gradient(120% 78% at 84% 8%, color-mix(in srgb,var(--accent) 32%, transparent), transparent 56%);
}

/* drifting light motes (injected by hero-motion.js) */
.hero-sparks{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.spark{ position:absolute; border-radius:50%; opacity:0;
  background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }
@media (prefers-reduced-motion: no-preference){
  .spark{ animation:sparkRise linear infinite; }
  @keyframes sparkRise{
    0%{ transform:translateY(24px) scale(.6); opacity:0; }
    18%{ opacity:.85; } 82%{ opacity:.6; }
    100%{ transform:translateY(-140px) scale(1.05); opacity:0; }
  }
}

/* layout */
/* Hero runs full-bleed so the dashboard gets real width, but the left padding
   tracks the centred .wrap so the headline stays aligned with the nav logo. */
.hero-cine .wrap{ position:relative; z-index:3; width:100%; max-width:none;
  padding-left:max(32px, calc((100vw - var(--maxw)) / 2 + 32px));
  padding-right:clamp(32px,3vw,56px); }
.hero-cine-grid{ display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr);
  gap:clamp(28px,3vw,56px); align-items:center; padding:124px 0 92px; }
.hero-cine .hero-inner{ max-width:560px; margin:0; text-align:left; }

/* copy recoloured for the dark cinematic field */
.hero-cine h1{ color:#fff; font-size:clamp(32px,3.1vw,46px); }
.hero-cine .hero-sub{ color:rgba(255,255,255,.84); max-width:520px; margin:0 0 32px; }
.hero-cine .hero-cta{ justify-content:flex-start; }
.hero-cine .eyebrow{ background:rgba(255,255,255,.12); color:#fff;
  border-color:rgba(255,255,255,.24); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hero-cine .eyebrow .dot{ background:var(--mint); }
.hero-cine .eyebrow .dot::after{ border-color:var(--mint); }
.hero-cine .hero-offer{ background:color-mix(in srgb,var(--mint) 20%, transparent); color:#eafff5;
  border-color:color-mix(in srgb,var(--mint) 42%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hero-cine .hero-offer svg{ color:var(--mint); }
.hero-cine .hpill{ background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22);
  color:#fff; box-shadow:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.hero-cine .hpill svg{ color:var(--mint); }
.hero-cine .hpill:hover{ background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.34); }

/* dashboard floats on the right over the photo */
.hero-cine .hero-showcase{ margin:0; max-width:none; display:block; padding:0; }
.hero-cine .hero-dash{ max-width:none; width:100%; margin:0 0 0 auto; }
.hero-cine .hero-dash .dash{ box-shadow:0 44px 100px -34px rgba(18,8,40,.74), 0 10px 34px rgba(18,8,40,.38); }
.hero-cine .f-fill{ top:-52px; left:-22px; width:200px; }
.hero-cine .f-new{ bottom:-52px; right:-22px; width:230px; }

/* responsive: stack copy over dashboard */
@media (max-width:980px){
  .hero-cine{ min-height:auto; }
  .hero-cine .wrap{ padding-left:32px; padding-right:32px; }
  .hero-cine-grid{ grid-template-columns:minmax(0,1fr); gap:84px; padding:118px 0 72px; }
  .hero-cine .hero-inner{ max-width:640px; }
  .hero-cine .hero-dash{ margin:0 auto; max-width:520px; }
}
@media (max-width:760px){
  .hero-cine-grid{ gap:42px; }                     /* float cards are hidden here */
}
@media (max-width:560px){
  .hero-cine .wrap{ padding-left:20px; padding-right:20px; }
  .hero-cine .f-fill{ left:-10px; }
  .hero-cine .f-new{ right:-10px; }
}

/* ---------------------------------------------------------------
   Reduced motion — freeze everything to its rest state
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .orb, .hero-grid-bg, .hero h1 .accent, .eyebrow .dot::after, .hero-loaded .hpill,
  .hero-photo, .spark{
    animation:none !important;
  }
}