/* ============================================================
   Steel Power Co. — Scroll Animations
   ============================================================ */

/* ── Base: all animatable elements start hidden ─────────────── */
[data-animate] {
  opacity: 0;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-property: opacity, transform;
  will-change: opacity, transform;
}

/* Respect user preference */
@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Initial states per animation type ──────────────────────── */
[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(40px); }
[data-animate="fade-right"] { transform: translateX(-40px); }
[data-animate="zoom-in"]    { transform: scale(0.88); }
[data-animate="zoom-out"]   { transform: scale(1.12); }
[data-animate="flip-up"]    { transform: perspective(600px) rotateX(30deg); }

/* ── Animated (visible) state ───────────────────────────────── */
[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* ── Delay helpers ──────────────────────────────────────────── */
[data-delay="100"]  { transition-delay: 0.10s; }
[data-delay="150"]  { transition-delay: 0.15s; }
[data-delay="200"]  { transition-delay: 0.20s; }
[data-delay="250"]  { transition-delay: 0.25s; }
[data-delay="300"]  { transition-delay: 0.30s; }
[data-delay="350"]  { transition-delay: 0.35s; }
[data-delay="400"]  { transition-delay: 0.40s; }
[data-delay="500"]  { transition-delay: 0.50s; }
[data-delay="600"]  { transition-delay: 0.60s; }
[data-delay="700"]  { transition-delay: 0.70s; }
[data-delay="800"]  { transition-delay: 0.80s; }

/* ── Duration helpers ───────────────────────────────────────── */
[data-duration="400"] { transition-duration: 0.4s; }
[data-duration="500"] { transition-duration: 0.5s; }
[data-duration="600"] { transition-duration: 0.6s; }
[data-duration="800"] { transition-duration: 0.8s; }
[data-duration="1000"]{ transition-duration: 1.0s; }

/* ── Reveal underline animation ─────────────────────────────── */
.reveal-underline {
  position: relative;
  display: inline-block;
}
.reveal-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.5s ease;
}
.reveal-underline.animated::after { width: 100%; }

/* ── Counter animation wrapper ──────────────────────────────── */
.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Stagger children (parent gets .stagger-children class) ─── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.stagger-children.animated > * { opacity: 1; transform: none; }
.stagger-children.animated > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger-children.animated > *:nth-child(2)  { transition-delay: 0.15s; }
.stagger-children.animated > *:nth-child(3)  { transition-delay: 0.25s; }
.stagger-children.animated > *:nth-child(4)  { transition-delay: 0.35s; }
.stagger-children.animated > *:nth-child(5)  { transition-delay: 0.45s; }
.stagger-children.animated > *:nth-child(6)  { transition-delay: 0.55s; }
.stagger-children.animated > *:nth-child(7)  { transition-delay: 0.65s; }
.stagger-children.animated > *:nth-child(8)  { transition-delay: 0.75s; }

/* ── Parallax (JS-driven, just the CSS base) ─────────────────── */
.parallax { will-change: transform; }

/* ── Shimmer loading skeleton ───────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--light) 25%, #e8e8e8 50%, var(--light) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius);
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Page transition ────────────────────────────────────────── */
.page-transition {
  animation: pageIn 0.4s ease forwards;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ── Pulse (used on CTA badge) ──────────────────────────────── */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

/* ── Spin (loading indicator) ───────────────────────────────── */
.spin {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}