/* public/css/feature-anim.css — scroll-reveal + per-feature motifs for features.html
   ---------------------------------------------------------------------------
   Reuses the site's EXISTING reveal mechanism: /js/anim.js observes .reveal,
   adds .in, and auto-assigns --d (stagger index) to .reveal children of .grid.
   No new JS, no new dependency. Nothing here injects text, so /js/i18n.js
   (which matches whole text nodes) is unaffected.

   Every rule animates opacity / transform / translate only — no size, margin,
   or position property is touched, so nothing reflows.

   Load AFTER /css/styles.css. Do NOT also load /css/anim.css on this page: it
   defines .reveal with `transform`, which would stack with the `translate`
   used here (cards would start 40px low instead of 20px).
   =========================================================================== */

/* ---------- 1. scroll reveal (same contract as /css/anim.css line 4) --------
   Same classes, same .65s cubic-bezier(.2,.7,.2,1), same 70ms-per-index delay.
   One deliberate difference: this uses the `translate` property rather than
   `transform`, because styles.css already owns `transform` on `.card:hover`
   (translateY(-3px), .15s). Keeping them on separate properties lets the
   reveal and the hover lift compose instead of fighting for one property —
   the hover stays snappy after the card has landed. */
.reveal{
  opacity:0;
  translate:0 20px;
  transition:opacity .65s cubic-bezier(.2,.7,.2,1), translate .65s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d,0) * 70ms);
}
.reveal.in{opacity:1;translate:none}

/* ---------- 2. reading-progress bar ----------------------------------------
   /js/anim.js unconditionally appends <div id="awProgress"> (it skips this only
   under reduced motion). Without a rule it is an unstyled empty div on this
   page, so this is copied from anim.css to match index.html exactly. */
#awProgress{
  position:fixed;top:0;left:0;height:2.5px;width:0;z-index:999;pointer-events:none;
  background:var(--brand-gradient);
  box-shadow:0 0 12px rgba(125,86,214,.55);
  transition:width .12s linear;
}

/* ---------- 3. feature motifs ----------------------------------------------
   One-shot as its own card lands, mapped to what the feature actually does.
   .feature-icon is a fixed 44x44 inline-flex box, so scaling/rotating it moves
   nothing around it. ::before/::after are absolutely positioned inside it and
   sit at opacity 0 at rest.

   fill-mode is `backwards`, never `forwards`: the first keyframe holds during
   the stagger delay (no flash of the un-animated state), and once the motif
   finishes nothing persists — so the hover transform below still works. */
.card .feature-icon{
  position:relative;transform-origin:50% 58%;
  transition:transform .18s cubic-bezier(.2,.7,.2,1);
}
.card .feature-icon::before,
.card .feature-icon::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  pointer-events:none;opacity:0;
}
/* the icon leans in with the card on hover — one gesture shared by the grid */
.card:hover .feature-icon{transform:scale(1.07)}

/* each motif fires in step with its card's stagger index */
.card.reveal.in .feature-icon,
.card.reveal.in .feature-icon::before,
.card.reveal.in .feature-icon::after{
  animation-delay:calc(var(--d,0) * 70ms + 220ms);
}

/* --- stack: pages settling onto a pile → 📚 Train on your knowledge -------- */
.card.reveal.in[data-fx="stack"] .feature-icon{animation:fxStack .72s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes fxStack{
  0%{transform:translateY(-5px) scale(.94)}
  55%{transform:translateY(2px) scale(1.03)}
  100%{transform:none}
}

/* --- swap: one side turns over to show another → 🧠 model, ⚖️ compare ------ */
.card.reveal.in[data-fx="swap"] .feature-icon{animation:fxSwap .8s cubic-bezier(.4,0,.2,1) backwards}
@keyframes fxSwap{
  0%{transform:perspective(240px) rotateY(0)}
  50%{transform:perspective(240px) rotateY(88deg) scale(.96)}
  100%{transform:perspective(240px) rotateY(0)}
}

/* --- ring: a boundary drawn around it → 🎭 guardrails, 🛡️ security --------- */
.card.reveal.in[data-fx="ring"] .feature-icon::after{
  border:2px solid rgba(125,86,214,.55);
  animation:fxRing 1.05s cubic-bezier(.2,.7,.2,1) backwards;
}
@keyframes fxRing{
  0%{opacity:0;transform:scale(.9)}
  18%{opacity:.6;transform:scale(1)}
  100%{opacity:0;transform:scale(1.6)}
}

/* --- spark: something fires → 🪄 actions, 🎛️ widget studio ----------------- */
.card.reveal.in[data-fx="spark"] .feature-icon{animation:fxSpark .78s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes fxSpark{
  0%{transform:rotate(0)}
  28%{transform:rotate(-14deg) scale(1.06)}
  62%{transform:rotate(9deg) scale(1.02)}
  100%{transform:none}
}
.card.reveal.in[data-fx="spark"] .feature-icon::before{
  background:radial-gradient(circle at 78% 20%, rgba(214,36,159,.75), transparent 42%);
  animation:fxSparkGlow .78s ease-out backwards;
}
@keyframes fxSparkGlow{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

/* --- spin: it reaches all the way round → 🌍 channels, 🌐 translation ------ */
.card.reveal.in[data-fx="spin"] .feature-icon{animation:fxSpin .95s cubic-bezier(.45,0,.2,1) backwards}
@keyframes fxSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* --- chart: a number climbing → 📊 insights -------------------------------- */
.card.reveal.in[data-fx="chart"] .feature-icon{animation:fxChart .75s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes fxChart{
  0%{transform:translateY(4px) scale(.93)}
  58%{transform:translateY(-4px) scale(1.05)}
  100%{transform:none}
}

/* --- wave: sound leaving the source → 🎙️ voice, 📣 campaigns ---------------
   two rings out of one motif, the second half a beat behind. */
.card.reveal.in[data-fx="wave"] .feature-icon::before,
.card.reveal.in[data-fx="wave"] .feature-icon::after{
  border:2px solid rgba(214,36,159,.5);
  animation:fxRing 1.3s cubic-bezier(.2,.7,.2,1) backwards;
}
.card.reveal.in[data-fx="wave"] .feature-icon::after{
  animation-delay:calc(var(--d,0) * 70ms + 500ms);
}

/* --- radar: a sweep looking over the fleet → 🛰️ Synthia ------------------- */
.card.reveal.in[data-fx="radar"] .feature-icon::after{
  background:conic-gradient(from 0deg, rgba(125,86,214,.5), rgba(125,86,214,0) 55%);
  animation:fxRadar 1.5s cubic-bezier(.35,0,.3,1) backwards;
}
@keyframes fxRadar{
  0%{opacity:0;transform:rotate(0)}
  18%{opacity:.9}
  100%{opacity:0;transform:rotate(360deg)}
}

/* --- tilt: a mechanism turning → ⚙️ developer-friendly -------------------- */
.card.reveal.in[data-fx="tilt"] .feature-icon{animation:fxTilt .8s cubic-bezier(.3,0,.2,1) backwards}
@keyframes fxTilt{0%{transform:rotate(0)}100%{transform:rotate(90deg)}}

/* ---------- 4. product-tour screenshots ------------------------------------
   Mirrors anim.css line 678-679 (`.card img` settles rather than pops). */
.shotfig .shot{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.shotfig:hover .shot{transform:scale(1.015)}

/* ---------- 5. reduced motion ----------------------------------------------
   Same posture as anim.css line 113 and line 687: motion is decoration; if the
   visitor asked for less they get none of it, and everything lands in its
   final, fully readable state. */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;translate:none !important;transition:none !important}
  .card .feature-icon,
  .card .feature-icon::before,
  .card .feature-icon::after,
  .shotfig .shot{animation:none !important;transition:none !important}
  .card:hover .feature-icon,
  .shotfig:hover .shot{transform:none !important}
  .card .feature-icon::before,
  .card .feature-icon::after{opacity:0 !important}
  #awProgress{display:none}
}