/*!
 * Coach-Tools Design Bank — Animations (vanilla adaptation of animate-ui ideas)
 * animate-ui (github.com/imskyleen/animate-ui, MIT) is React/Motion-only, so these are
 * clean-room vanilla CSS/JS rebuilds of the effects — no React, no dependencies.
 *
 * Obeys coach-tools/CLAUDE.md §6 Motion:
 *   • animate transform/opacity only (never width/height/top/left)
 *   • ≤300ms for interactive transitions
 *   • ease / ease-out (no bounce/elastic/spring)
 *   • everything is OFF under prefers-reduced-motion
 *   • restraint by default — one celebratory pulse per page, not slop on every element
 *
 * Namespaced `ct-` so nothing collides with page styles or Tailwind.
 * Pair with animations.js. Most effects auto-init from data-* attributes.
 */

/* ── tokens (fall back to brand values if the page hasn't set them) ─────────── */
:root{
  --ct-accent:      var(--accent, #ff7733);
  --ct-accent-deep: var(--accent-deep, #df5002);
  --ct-ink:         var(--ink, #0F1A1B);
  --ct-ease: cubic-bezier(.22,.61,.36,1); /* ease-out, no overshoot */
}

/* ── 1. Reveal on view — opacity + small rise, ONE-SHOT ────────────────────── */
/* Use sparingly (hero stat row, a single feature band). Not on every section. */
[data-reveal]{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ct-ease), transform .5s var(--ct-ease);
  will-change:opacity, transform;
}
[data-reveal].ct-in{opacity:1;transform:none}
[data-reveal-stagger] > *{
  opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ct-ease), transform .45s var(--ct-ease);
}
[data-reveal-stagger].ct-in > *{opacity:1;transform:none}

/* ── 2. Count-up — no CSS needed; JS ticks the number. Prevent reflow jitter ── */
[data-countup]{font-variant-numeric:tabular-nums}

/* ── 3. Draw-on SVG line/path — stroke draws itself when scrolled into view ─── */
[data-draw]{
  stroke-dasharray:var(--ct-len,1);
  stroke-dashoffset:var(--ct-len,1);
  transition:stroke-dashoffset 1s var(--ct-ease);
}
[data-draw].ct-in{stroke-dashoffset:0}

/* ── 4. Ripple button — material-style ripple from the click point ─────────── */
.ct-ripple{position:relative;overflow:hidden;isolation:isolate}
.ct-ripple > .ct-ripple-ink{
  position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:currentColor;opacity:.28;
  animation:ct-ripple .55s var(--ct-ease) forwards;
}
@keyframes ct-ripple{to{transform:scale(2.4);opacity:0}}

/* ── 5. Flip button — front/back faces swap on hover/focus ─────────────────── */
.ct-flip{
  position:relative;display:inline-grid;perspective:600px;
  border:0;background:none;padding:0;cursor:pointer;font:inherit;
}
.ct-flip-inner{
  position:relative;transform-style:preserve-3d;
  transition:transform .3s var(--ct-ease);
}
.ct-flip:hover .ct-flip-inner,
.ct-flip:focus-visible .ct-flip-inner{transform:rotateX(180deg)}
.ct-flip-face{
  grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:8px;
  backface-visibility:hidden;border-radius:999px;
  padding:14px 26px;font-weight:700;
}
.ct-flip-back{transform:rotateX(180deg)}

/* ── 6. Copy button — label morphs to a check on success ───────────────────── */
.ct-copy{display:inline-flex;align-items:center;gap:8px}
.ct-copy .ct-copy-icon{display:inline-grid;place-items:center;width:18px;height:18px}
.ct-copy .ct-copy-icon svg{grid-area:1/1;width:18px;height:18px;transition:opacity .2s var(--ct-ease), transform .2s var(--ct-ease)}
.ct-copy .ct-ico-check{opacity:0;transform:scale(.6)}
.ct-copy.ct-copied .ct-ico-copy{opacity:0;transform:scale(.6)}
.ct-copy.ct-copied .ct-ico-check{opacity:1;transform:none;color:var(--green,#1f9d57)}

/* ── 7. Animated gradient background — slow, subtle, hero-only ─────────────── */
.ct-gradient-bg{
  background:linear-gradient(120deg,
    color-mix(in srgb, var(--ct-accent) 22%, transparent),
    color-mix(in srgb, var(--ct-accent-deep) 18%, transparent),
    color-mix(in srgb, var(--ct-ink) 10%, transparent),
    color-mix(in srgb, var(--ct-accent) 22%, transparent));
  background-size:300% 300%;
  animation:ct-grad 14s ease infinite;
}
@keyframes ct-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ── 8. Confetti — the ONE allowed celebratory pulse (JS-driven) ───────────── */
.ct-confetti-piece{
  position:fixed;top:0;left:0;width:9px;height:9px;pointer-events:none;z-index:9999;
  will-change:transform,opacity;
}

/* ── 9. Sliding-underline tabs — indicator glides between tabs ─────────────── */
.ct-tabs{position:relative;display:inline-flex;gap:4px}
.ct-tabs button{
  position:relative;z-index:1;font:inherit;font-weight:700;color:var(--ct-ink);
  opacity:.55;background:none;border:0;cursor:pointer;padding:10px 16px;transition:opacity .2s var(--ct-ease);
}
.ct-tabs button[aria-selected="true"]{opacity:1}
.ct-tabs .ct-tab-ink{
  position:absolute;bottom:0;left:0;height:2px;border-radius:2px;background:var(--ct-accent-deep);
  transform:translateX(0);width:0;
  transition:transform .28s var(--ct-ease), width .28s var(--ct-ease);
}

/* ── 10. Progress bar — fills via scaleX (cheap, no layout) ─────────────────── */
.ct-progress{position:relative;height:8px;border-radius:999px;background:var(--gray-200,#E5E7E8);overflow:hidden}
.ct-progress > .ct-progress-fill{
  position:absolute;inset:0;transform-origin:left;transform:scaleX(0);border-radius:999px;
  background:var(--ct-accent-deep);
  transition:transform .7s var(--ct-ease);
}

/* ── 11. Liquid button — a blob wells up to fill on hover ──────────────────── */
.ct-liquid{position:relative;overflow:hidden;isolation:isolate;z-index:0}
.ct-liquid::before{
  content:"";position:absolute;left:50%;bottom:-140%;z-index:-1;
  width:160%;aspect-ratio:1;border-radius:45%;
  background:var(--ct-accent);
  transform:translateX(-50%) scale(.2);
  transition:transform .34s var(--ct-ease);
}
.ct-liquid:hover::before,
.ct-liquid:focus-visible::before{transform:translateX(-50%) scale(1.15)}

/* ── 12. Shine sweep — a single light pass across a card/CTA on hover ──────── */
.ct-shine{position:relative;overflow:hidden}
.ct-shine::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg);opacity:0;
}
.ct-shine:hover::after{animation:ct-shine .7s var(--ct-ease)}
@keyframes ct-shine{0%{left:-60%;opacity:0}12%{opacity:1}100%{left:130%;opacity:0}}

/* ── Reduced motion: everything falls still, content stays visible ─────────── */
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
  [data-draw]{stroke-dashoffset:0!important;transition:none!important}
  .ct-gradient-bg{animation:none!important}
  .ct-flip-inner,.ct-tabs .ct-tab-ink,.ct-progress-fill,.ct-liquid::before,
  .ct-copy .ct-copy-icon svg{transition:none!important}
  .ct-shine::after{display:none!important}
  .ct-ripple > .ct-ripple-ink{animation:none!important;display:none!important}
}