/* ============================================================
   PICHI AI — Animations
   Scroll-triggered entrance · Typography reveals · Data viz
   Based on design-system.json animation spec
   ============================================================ */

/* ── Keyframes ── */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpSm {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealUp {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes heroEntrance {
  from {
    opacity: 0;
    transform: translateY(200px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes lineDrawIn {
  from { stroke-dashoffset: var(--path-length, 1000); }
  to   { stroke-dashoffset: 0; }
}

@keyframes barGrow {
  from {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  to {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

@keyframes spinnerRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Scroll-triggered animation states ── */

/* Default state: hidden (applied via JS) */
[data-animate] {
  opacity: 0;
}

[data-animate].is-visible {
  opacity: 1;
}

/* fadeUp */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--dur-entrance) var(--ease-expressive),
    transform var(--dur-entrance) var(--ease-expressive);
}

[data-animate="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* fadeUpSm */
[data-animate="fade-up-sm"] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-expressive),
    transform var(--dur-slow) var(--ease-expressive);
}

[data-animate="fade-up-sm"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* scaleIn (modals, popovers) */
[data-animate="scale-in"] {
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--dur-slow) var(--ease-expressive),
    transform var(--dur-slow) var(--ease-expressive);
}

[data-animate="scale-in"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grids */
[data-animate][data-delay="1"] { transition-delay: 80ms; }
[data-animate][data-delay="2"] { transition-delay: 160ms; }
[data-animate][data-delay="3"] { transition-delay: 240ms; }
[data-animate][data-delay="4"] { transition-delay: 320ms; }
[data-animate][data-delay="5"] { transition-delay: 400ms; }

/* ── revealUp: text line mask reveal ── */

.reveal-wrap {
  overflow: hidden;
  display: block;
}

.reveal-line {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-entrance) var(--ease-expressive);
}

.reveal-wrap.is-visible .reveal-line {
  transform: translateY(0);
}

/* Stagger for multi-line reveals */
.reveal-wrap.is-visible .reveal-line:nth-child(1) { transition-delay: 0ms; }
.reveal-wrap.is-visible .reveal-line:nth-child(2) { transition-delay: 80ms; }
.reveal-wrap.is-visible .reveal-line:nth-child(3) { transition-delay: 160ms; }
.reveal-wrap.is-visible .reveal-line:nth-child(4) { transition-delay: 240ms; }

/* ── Hero entrance ── */

.hero-title {
  animation: none;
}

[data-hero] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--dur-cinematic) var(--ease-expressive),
    transform var(--dur-cinematic) var(--ease-expressive);
}

[data-hero].is-loaded {
  opacity: 1;
  transform: translateY(0);
}

[data-hero][data-delay="1"] { transition-delay: 100ms; }
[data-hero][data-delay="2"] { transition-delay: 220ms; }
[data-hero][data-delay="3"] { transition-delay: 360ms; }
[data-hero][data-delay="4"] { transition-delay: 480ms; }
[data-hero][data-delay="5"] { transition-delay: 580ms; }

/* ── Counter number animation ── */

.counter-value {
  display: inline-block;
  tabular-nums: auto;
  font-variant-numeric: tabular-nums;
}

/* ── Highlight underline ── */

.text-highlight {
  background-image: linear-gradient(var(--color-primary-500), var(--color-primary-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 500ms var(--ease-expressive) 200ms;
}

.text-highlight.is-visible {
  background-size: 100% 1.5px;
}

/* ── Parallax (subtle) ── */
/* Applied via JS, CSS defines the transition smoothing */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── Chart animations ── */

.chart-line {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset 900ms var(--ease-decelerate);
}

.chart-line.is-visible {
  stroke-dashoffset: 0;
}

.chart-bar {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--dur-entrance) var(--ease-expressive);
}

.chart-bar.is-visible {
  transform: scaleY(1);
}

/* Stagger bars */
.chart-bar:nth-child(1) { transition-delay: 0ms; }
.chart-bar:nth-child(2) { transition-delay: 40ms; }
.chart-bar:nth-child(3) { transition-delay: 80ms; }
.chart-bar:nth-child(4) { transition-delay: 120ms; }
.chart-bar:nth-child(5) { transition-delay: 160ms; }
.chart-bar:nth-child(6) { transition-delay: 200ms; }
.chart-bar:nth-child(7) { transition-delay: 240ms; }

/* ── Page transition ── */

.page-enter {
  animation: fadeUpSm var(--dur-deliberate) var(--ease-expressive) both;
  animation-delay: 180ms;
}

/* ── Spinner ── */

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--color-primary-500);
  border-radius: 50%;
  animation: spinnerRotate 900ms linear infinite;
}

/* ── Reduce motion overrides ── */

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-hero],
  .reveal-line,
  .text-highlight,
  .chart-line,
  .chart-bar {
    transition: opacity 300ms var(--ease-default) !important;
    transform: none !important;
    clip-path: none !important;
    background-size: 100% 1.5px !important;
    stroke-dashoffset: 0 !important;
  }

  .spinner {
    animation-duration: 2s;
  }
}