/* ══════════════════════════════
   ANIMATIONS & TRANSITIONS
   index_fx.css
══════════════════════════════ */

/* ── Scroll reveal base ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.reveal--left {
  transform: translateX(-28px);
}
.reveal.reveal--right {
  transform: translateX(28px);
}
.reveal.reveal--scale {
  transform: scale(0.94);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for grid children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* ── Hero heading — word reveal ── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotate(2deg);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-word.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Stat counter ── */
.stat-n { transition: color 0.3s; }
.stat:hover .stat-n { color: #FF6B00; }
.stat::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: #FF6B00;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat:hover::after { transform: scaleX(1); }

/* ── Skill cards ── */
.skill {
  transition: background 0.25s, border-left-color 0.25s, transform 0.25s;
}
.skill:hover {
  transform: translateY(-3px);
}
.skill-n {
  transition: letter-spacing 0.3s;
}
.skill:hover .skill-n {
  letter-spacing: 5px;
}

/* ── For-who cards ── */
.fw-card {
  transition: background 0.25s, transform 0.25s;
}
.fw-card:hover {
  transform: translateY(-4px);
}
.fw-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.25s, border-color 0.25s;
}
.fw-card:hover .fw-icon {
  transform: scale(1.15) rotate(-5deg);
  background: rgba(255,107,0,0.08);
  border-color: rgba(255,107,0,0.3);
}

/* ── Review cards ── */
.rv {
  transition: background 0.25s, transform 0.25s;
}
.rv:hover {
  transform: translateY(-4px);
}
.rv-stars {
  display: inline-block;
  transition: letter-spacing 0.3s;
}
.rv:hover .rv-stars {
  letter-spacing: 5px;
}

/* ── Contact link ── */
.contact-link-icon {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.2s, background 0.2s;
}
.contact-link:hover .contact-link-icon {
  transform: scale(1.1) rotate(8deg);
  background: rgba(255,107,0,0.06);
}

/* ── btn-hero pulse ring on hover ── */
.btn-hero {
  position: relative;
  overflow: hidden;
}
.btn-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.btn-hero:hover::after {
  transform: translateX(100%);
}

/* ── Eyebrow line grow ── */
.sec-eyebrow::before {
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sec-eyebrow.is-visible::before {
  width: 40px;
}

/* ── Chart card shimmer on hover ── */
.chart-card {
  transition: border-color 0.3s, box-shadow 0.3s;
}
.chart-card:hover {
  border-color: rgba(255,107,0,0.25);
  box-shadow: 0 0 40px rgba(255,107,0,0.06);
}

/* ── Orange underline for hero heading ── */


/* ── CTA block ── */
.btn-cta {
  position: relative;
  overflow: hidden;
}
.btn-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,107,0,0.12);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
}
.btn-cta:hover::after {
  transform: translateX(100%);
}

/* ── Ticker pause on hover ── */
.ticker:hover .ticker-inner {
  animation-play-state: paused;
}

/* ── Mobile: disable heavy transforms ── */
@media (max-width: 768px) {
  .reveal {
    transform: translateY(16px);
  }
  .reveal.reveal--left,
  .reveal.reveal--right {
    transform: translateY(16px);
  }
  .skill:hover,
  .fw-card:hover,
  .rv:hover { transform: none; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-word,
  .skill,
  .fw-card,
  .rv,
  .fw-icon,
  .stat::after,
  .btn-hero::after,
  .btn-cta::after,
  .orange::after {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}