/* ============================================================
   MOOVLI — Motion layer
   Modern scroll-driven animation, micro-interactions & polish.
   Loaded AFTER site.css. Additive only — degrades to static
   under prefers-reduced-motion and during capture/print.
   ============================================================ */

/* ---------------------------------------------------------------
   0 · Tunables
--------------------------------------------------------------- */
:root{
  --ease-out:cubic-bezier(.22,.7,.26,1);
  --ease-soft:cubic-bezier(.33,1,.5,1);
  --anim-dur:.85s;
}

/* ---------------------------------------------------------------
   1 · Scroll progress bar (top hairline)
--------------------------------------------------------------- */
.scroll-prog{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:230;
  transform-origin:0 50%; transform:scaleX(0); pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 12px var(--accent-sh);
  will-change:transform;
}
body.has-announce .scroll-prog{ top:42px; }

/* ---------------------------------------------------------------
   2 · Enhanced scroll reveal
   Upgrades the existing .reveal system with blur + scale + lift,
   plus directional & stagger variants driven by [data-rv].
--------------------------------------------------------------- */
/* CAPTURE-SAFE: content is NEVER hidden via opacity. Elements rest at
   opacity:1 and reveals animate transform only — so a frozen/printed
   frame always shows content (the preview harness pauses the anim clock). */
@media (prefers-reduced-motion: no-preference){

  /* richer base reveal — slide + subtle scale, opacity stays 1 */
  .reveal.in{ animation:mvReveal var(--anim-dur) var(--ease-out) both; }
  @keyframes mvReveal{
    from{ transform:translateY(36px) scale(.97); }
    to{ transform:none; }
  }

  /* directional reveal variants (transform-only; rest state visible) */
  [data-rv]{ will-change:transform;
    transition:transform var(--anim-dur) var(--ease-out); transition-delay:var(--rvd,0ms); }
  [data-rv].in{ transform:none; }
  [data-rv="up"]{ transform:translateY(42px); }
  [data-rv="left"]{ transform:translateX(-52px); }
  [data-rv="right"]{ transform:translateX(52px); }
  [data-rv="scale"]{ transform:scale(.88); }
}

/* ---------------------------------------------------------------
   3 · Hero entrance choreography (transform-only, capture-safe)
--------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .hero-inner > *{ transform:translateY(28px); }
  .hero-loaded .hero-inner > *{ transform:none;
    transition:transform 1s var(--ease-out); }
  .hero-loaded .hero-inner > *:nth-child(1){ transition-delay:.05s; }
  .hero-loaded .hero-inner > *:nth-child(2){ transition-delay:.14s; }
  .hero-loaded .hero-inner > *:nth-child(3){ transition-delay:.23s; }
  .hero-loaded .hero-inner > *:nth-child(4){ transition-delay:.32s; }
  .hero-loaded .hero-inner > *:nth-child(5){ transition-delay:.41s; }
  .hero-loaded .hero-inner > *:nth-child(6){ transition-delay:.50s; }

  /* parallax target gets a transform the JS feeds (.hero-showcase
     entrance is already handled by the legacy .reveal system) */
  .hero-dash{ will-change:transform; }
}

/* drifting accent glow behind hero — alive but subtle */
@media (prefers-reduced-motion: no-preference){
  .hero::after{ animation:heroGlow 16s ease-in-out infinite alternate; }
  @keyframes heroGlow{
    0%{ transform:translateX(-50%) translateY(0) scale(1); opacity:.95; }
    100%{ transform:translateX(-46%) translateY(24px) scale(1.08); opacity:1; }
  }
}

/* ---------------------------------------------------------------
   4 · Floating hero KPI cards — depth + pop-in
--------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .hero-loaded .f-fill{ animation:fCardIn .8s var(--ease-out) .7s both, floaty 5.5s ease-in-out 1.6s infinite; }
  .hero-loaded .f-new{ animation:fCardIn .8s var(--ease-out) .9s both, floaty 6.4s ease-in-out 1.8s infinite .7s; }
  @keyframes fCardIn{
    from{ transform:translateY(16px) scale(.86); }
    to{ transform:none; }
  }
}

/* ---------------------------------------------------------------
   5 · Animated counter shimmer (stats band)
--------------------------------------------------------------- */
.stat .n{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------------
   6 · Card interactions — 3D tilt + cursor spotlight
--------------------------------------------------------------- */
.cell, .quote, .step{
  transform-style:preserve-3d;
  transition:transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
/* cursor-tracked spotlight overlay */
.cell::after, .quote::after, .step::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .3s ease; z-index:1;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
            color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%);
}
.cell:hover::after, .quote:hover::after, .step:hover::after{ opacity:1; }
.cell > *, .quote > *, .step > *{ position:relative; z-index:2; }
/* keep the tilt subtle and snappy */
@media (prefers-reduced-motion: no-preference){
  .cell.tilt, .quote.tilt, .step.tilt{ transition:transform .12s linear, box-shadow .35s var(--ease-soft); }
}

/* icon lift inside feature cells */
.cell .f-ico{ transition:transform .35s var(--ease-soft), background .35s; }
.cell:hover .f-ico{ transform:translateY(-3px) scale(1.06) rotate(-3deg); }

/* ---------------------------------------------------------------
   7 · Magnetic / shiny buttons
--------------------------------------------------------------- */
.btn{ position:relative; overflow:hidden; will-change:transform; }
.btn-accent::before, .btn-primary::before{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .btn-accent:hover::before, .btn-primary:hover::before{ animation:btnShine .75s var(--ease-out); }
  @keyframes btnShine{ to{ left:130%; } }
}
.btn .arrow, .btn svg{ transition:transform .25s var(--ease-soft); }
.btn:hover svg{ transform:translateX(3px); }

/* primary CTA pulse halo while idle (gentle, finite-feeling) */
@media (prefers-reduced-motion: no-preference){
  .hero-cta .btn-accent{ animation:ctaPulse 3.6s ease-in-out infinite; }
  @keyframes ctaPulse{
    0%,100%{ box-shadow:0 8px 22px -8px var(--accent-sh); }
    50%{ box-shadow:0 8px 22px -8px var(--accent-sh), 0 0 0 8px color-mix(in srgb,var(--accent) 9%, transparent); }
  }
}

/* ---------------------------------------------------------------
   8 · Nav link animated underline
--------------------------------------------------------------- */
.nav-links a{ position:relative; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:2px; border-radius:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease-soft);
}
.nav-links a:hover::after{ transform:scaleX(1); }

/* (nav entrance intentionally omitted — a transform-based slide would
   freeze the nav off-screen in a captured/printed frame) */

/* ---------------------------------------------------------------
   9 · Marquee — hover to pause, doubled smoothness
--------------------------------------------------------------- */
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track .logo{ transition:color .3s, transform .3s; }
.marquee-track .logo:hover{ color:var(--accent); transform:translateY(-2px); }
.marquee-track .logo:hover .gem{ background:var(--accent); }

/* ---------------------------------------------------------------
   10 · Dashboard liveliness
--------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* live "new booking" row pulse in dashboard list */
  .dash-list .lr:nth-child(2) .cap-o{ animation:capPulse 2.4s ease-in-out infinite; }
  @keyframes capPulse{ 0%,100%{ box-shadow:0 0 0 0 transparent; } 50%{ box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%, transparent); } }
}

/* ---------------------------------------------------------------
   11 · Step number badge — animated ring on reveal
--------------------------------------------------------------- */
.step .num{ position:relative; overflow:visible; }
@media (prefers-reduced-motion: no-preference){
  .step.in .num::after{
    content:""; position:absolute; inset:-5px; border-radius:14px;
    border:2px solid var(--accent); opacity:0;
    animation:numRing .9s var(--ease-out) .15s both;
  }
  @keyframes numRing{
    0%{ opacity:.8; transform:scale(.7); }
    100%{ opacity:0; transform:scale(1.25); }
  }
}

/* ---------------------------------------------------------------
   12 · Form field focus lift
--------------------------------------------------------------- */
.field input, .field select{ transition:border-color .18s, background .18s, box-shadow .18s, transform .18s; }
.field input:focus, .field select:focus{ transform:translateY(-1px); }

/* ---------------------------------------------------------------
   13 · Lang button pop
--------------------------------------------------------------- */
.lang button{ transition:all .18s var(--ease-soft); }
.lang button:active{ transform:scale(.92); }

/* ---------------------------------------------------------------
   14 · Reduced motion / fallback — show everything, no transforms
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .reveal, [data-rv], [data-stagger] > *, .hero-inner > *, .hero-showcase,
  .rv-head, .f-hero, .kpi-bar span{
    opacity:1 !important; transform:none !important; filter:none !important;
    clip-path:none !important; animation:none !important;
  }
}