/* ============================================================================
   animations.css — motion language for Club A
   ALLOWED (per brief): product reveal · fade-up · slide · light parallax ·
     controlled metal sheen · card hover · technical line-draw · number-in ·
     controlled macro-zoom.
   FORBIDDEN (per brief): neon · glitch · gamer fx · random particles ·
     exaggerated movement · "AI-looking" motion.
   Everything is subtle, single-pass on entrance, and honours reduced-motion.
   ========================================================================== */

/* ---- REVEAL ENGINE -------------------------------------------------------
   Elements carry [data-reveal]; JS adds .is-in when they enter the viewport.
   --d = per-element delay (set inline or by stagger). */
.js [data-reveal] {
  --d: 0ms;
  opacity: 0;
  transition:
    opacity var(--dur-3) var(--ease-out) var(--d),
    transform var(--dur-3) var(--ease-out) var(--d),
    clip-path var(--dur-3) var(--ease-out) var(--d),
    filter var(--dur-3) var(--ease-out) var(--d);
  will-change: opacity, transform;
}
.js [data-reveal="up"]    { transform: translateY(34px); }
.js [data-reveal="down"]  { transform: translateY(-28px); }
.js [data-reveal="left"]  { transform: translateX(40px); }
.js [data-reveal="right"] { transform: translateX(-40px); }
.js [data-reveal="scale"] { transform: scale(0.94); }
.js [data-reveal="fade"]  { transform: none; }
/* "reveal de produto" — image wipes up under a soft mask while easing in */
.js [data-reveal="product"] {
  clip-path: inset(14% 6% 14% 6% round 18px);
  transform: scale(1.05);
}
/* "slide suave" of a whole block */
.js [data-reveal="rise"]  { transform: translateY(56px) scale(0.985); }

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 18px);
}

/* Stagger helper: parent sets steps on children automatically via JS, but a
   pure-CSS fallback for direct children: */
[data-stagger] > * { --d: calc(var(--i, 0) * 90ms); }

/* ---- TECHNICAL LINE-DRAW ("linha técnica desenhando") --------------------
   Any SVG path/circle/ellipse with .draw is dashed and draws on reveal. JS sets
   --len to the path length; we animate stroke-dashoffset len → 0. */
.js .draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset var(--dur-5) var(--ease-inout) var(--d, 0ms);
}
.is-in .draw, .draw.is-in { stroke-dashoffset: 0; }

/* ---- NUMBER-IN ("número entrando") --------------------------------------
   JS counts the value up; the unit/figure also slides a touch. */
.count { font-variant-numeric: tabular-nums; }
.stat__figure { display: inline-block; transition: transform var(--dur-3) var(--ease-out); }
[data-reveal] .stat__figure { transform: translateY(0.25em); }
[data-reveal].is-in .stat__figure { transform: none; }

/* ---- CONTROLLED MACRO-ZOOM ----------------------------------------------
   Slow, contained scale on a focal image — never beyond 1.06. */
.zoom-macro { overflow: hidden; }
.zoom-macro > img,
.zoom-macro > picture > img {
  transform: scale(1.001);
  transition: transform 1400ms var(--ease-out);
  will-change: transform;
}
.zoom-macro.is-in > img,
.zoom-macro.is-in > picture > img,
[data-reveal].is-in .zoom-macro > img,
[data-reveal].is-in .zoom-macro > picture > img { transform: scale(1.055); }

/* ---- CONTROLLED METAL SHEEN ("brilho controlado em metal") ---------------
   A single restrained highlight sweep across gold elements when revealed, and
   a gentle one on hover. Low opacity, slow, one pass. */
.sheen { position: relative; overflow: hidden; isolation: isolate; }
.sheen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 248, 230, 0.0) 42%,
    rgba(255, 248, 230, 0.55) 50%,
    rgba(255, 248, 230, 0.0) 58%,
    transparent 70%);
  transform: translateX(-130%);
  pointer-events: none;
  z-index: 2;
}
.sheen.is-in::after { animation: sheen-sweep var(--dur-5) var(--ease-out) 220ms 1 both; }
.sheen:hover::after { animation: sheen-sweep 1100ms var(--ease-out) 1; }
@keyframes sheen-sweep {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}

/* gold text gets a soft metallic gradient (static, tasteful) */
.metal-gold {
  background: linear-gradient(95deg, var(--t-gold-deep), var(--t-gold-soft) 45%, var(--t-gold) 70%, var(--t-gold-deep));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- AMBIENT (very subtle, optional) ------------------------------------ */
.float-soft { animation: float-soft 9s var(--ease-inout) infinite; }
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* The hint chevron in the hero */
.scroll-hint { animation: nudge 2.4s var(--ease-inout) infinite; }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50%      { transform: translateY(7px); opacity: 1; }
}

/* ---- PARALLAX (light) ----------------------------------------------------
   JS writes --py. Uses the standalone `translate` longhand (not `transform`) so
   parallax composes with reveal/zoom/rotation transforms on the same node. */
[data-parallax] { will-change: transform; translate: 0 var(--py, 0); }

/* ---- HARD STOP for reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .draw { stroke-dashoffset: 0 !important; }
  .sheen::after { display: none !important; }
  .zoom-macro > img { transform: none !important; }
  .float-soft, .scroll-hint { animation: none !important; }
  [data-parallax] { translate: none !important; }
}