/* ═══════════════════════════════════════════════════════════════
   animations.css  —  iOS-inspired site-wide animation system
   ═══════════════════════════════════════════════════════════════ */

/* ── CIRCUIT HERO CANVAS ─────────────────────────────────────── */
.circuit-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
}

/* ── PAGE FADE-IN ────────────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: pageFadeIn .38s ease both;
}

/* ── NAV SCROLL STATE ────────────────────────────────────────── */
nav {
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
nav.nav-scrolled {
  box-shadow: 0 2px 28px rgba(0,0,0,.10);
}

/* ── HERO ENTRANCE KEYFRAMES ─────────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes heroScale {
  from { opacity: 0; transform: scale(.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}

.anim-hero-badge {
  animation: heroFadeUp .62s .00s cubic-bezier(.25,.46,.45,.94) both;
}
.anim-hero-title {
  animation: heroFadeUp .72s .12s cubic-bezier(.25,.46,.45,.94) both;
}
.anim-hero-sub {
  animation: heroFadeUp .72s .28s cubic-bezier(.25,.46,.45,.94) both;
}
.anim-hero-btns {
  animation: heroFadeUp .72s .44s cubic-bezier(.25,.46,.45,.94) both;
}
.anim-hero-stats {
  animation: heroFadeUp .72s .56s cubic-bezier(.25,.46,.45,.94) both;
}

/* ── SCROLL REVEAL — FADE UP ─────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .62s cubic-bezier(.25,.46,.45,.94),
              transform .62s cubic-bezier(.25,.46,.45,.94);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── SCROLL REVEAL — SPRING (cards/tiles) ────────────────────── */
.reveal-spring {
  opacity: 0;
  transform: translateY(30px) scale(.97);
  transition: opacity .68s cubic-bezier(.34,1.30,.64,1),
              transform .68s cubic-bezier(.34,1.30,.64,1);
  will-change: opacity, transform;
}
.reveal-spring.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── SCROLL REVEAL — FADE ONLY ───────────────────────────────── */
.reveal-fade {
  opacity: 0;
  transition: opacity .7s ease;
  will-change: opacity;
}
.reveal-fade.is-visible { opacity: 1; }

/* ── STAGGER GROUPS ──────────────────────────────────────────── */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .55s cubic-bezier(.25,.46,.45,.94),
              transform .55s cubic-bezier(.25,.46,.45,.94);
  will-change: opacity, transform;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── PROCESS STEP NUMBERS ────────────────────────────────────── */
.process-steps { list-style: none; padding: 0; margin: 0; }
.process-steps li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.process-steps .step-num {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--cyan, #4da6ff);
  color: var(--blue-dark, #0a0f2c);
  font-weight: 800; flex-shrink: 0;
  opacity: 0; transform: translateY(14px) scale(.96);
  transition: opacity .75s ease, transform .85s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
.process-steps.is-visible .step-num {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.process-steps .step-text {
  opacity: 0; transform: translateY(10px);
  transition: opacity .65s ease, transform .8s cubic-bezier(.2,.9,.2,1);
  will-change: opacity, transform;
}
.process-steps.is-visible .step-text {
  opacity: 1; transform: translateY(0);
}

/* ── NAV LINK HOVER LIFT ─────────────────────────────────────── */
.nav-links a {
  transition: color .2s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.nav-links a:hover { transform: translateY(-2px); }

/* ── BTN MICRO-INTERACTION ───────────────────────────────────── */
.btn-nav,
.ios-btn-primary,
.ios-btn-ghost {
  transition: opacity .18s ease, transform .2s cubic-bezier(.34,1.30,.64,1),
              box-shadow .2s ease;
}
.btn-nav:hover,
.ios-btn-primary:hover,
.ios-btn-ghost:hover {
  transform: translateY(-2px);
}
.btn-nav:active,
.ios-btn-primary:active,
.ios-btn-ghost:active {
  transform: scale(.97);
}

/* ── CARD HOVER SPRING ───────────────────────────────────────── */
.feature-card,
.ios-card,
.value-card,
.team-card,
.prod-card,
.sp-card,
.svc-card,
.proj-card,
.info-card,
.form-card,
.why-prod-card,
.why-stat-card,
.ptile {
  transition: transform .32s cubic-bezier(.34,1.20,.64,1),
              box-shadow .32s ease;
}
.feature-card:hover,
.ios-card:hover,
.value-card:hover,
.team-card:hover,
.prod-card:hover,
.sp-card:hover,
.svc-card:hover,
.proj-card:hover,
.info-card:hover,
.form-card:hover,
.why-prod-card:hover,
.why-stat-card:hover,
.ptile:hover {
  transform: translateY(-5px);
}

/* ── COUNT-UP (prevent flash before JS) ─────────────────────── */
[data-count] { display: inline-block; }

/* ── REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body { animation: none !important; }
  .reveal, .reveal-spring, .reveal-fade,
  .reveal-stagger > *,
  .anim-hero-badge, .anim-hero-title,
  .anim-hero-sub, .anim-hero-btns, .anim-hero-stats,
  .process-steps .step-num, .process-steps .step-text {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .nav-links a:hover,
  .btn-nav:hover,
  .ios-btn-primary:hover,
  .feature-card:hover, .ios-card:hover,
  .value-card:hover, .team-card:hover,
  .prod-card:hover, .sp-card:hover,
  .svc-card:hover, .proj-card:hover,
  .ptile:hover {
    transform: none !important;
  }
}