/* ============================================================
   animations.css — Starry Stream visual effects
   Loaded after styles.css; all rules here safely override it.
   ============================================================ */

/* ── Custom properties ──────────────────────────────────────── */
:root {
  --reveal-duration: 0.65s;
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --shimmer-duration: 3s;
}

/* ============================================================
   1. PARTICLE CANVAS
   ============================================================ */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   2. ANIMATED HERO GRADIENT (breathing glow)
   ============================================================ */
@keyframes heroGlowPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

.hero-bg {
  animation: heroGlowPulse 8s ease-in-out infinite;
}

/* ============================================================
   3. HERO TITLE SHIMMER  (overrides color: var(--blue) in styles.css)
   ============================================================ */
@keyframes textShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.hero h1 em {
  background: linear-gradient(
    90deg,
    var(--blue)   0%,
    #4a6ef5      30%,
    var(--accent) 50%,
    #4a6ef5      70%,
    var(--blue)  100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: textShimmer var(--shimmer-duration) linear infinite;
  font-style: inherit;
}

/* ============================================================
   4. HERO TAG LETTER-BY-LETTER REVEAL
   ============================================================ */
@keyframes letterReveal {
  to { opacity: 1; transform: translateY(0); }
}

.hero-tag-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  animation: letterReveal 0.4s var(--reveal-easing) forwards;
}

/* ============================================================
   5. SCROLL-TRIGGERED REVEALS
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transition:
    opacity  var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
}

[data-reveal="fade-up"]    { transform: translateY(40px); }
[data-reveal="fade-left"]  { transform: translateX(-40px); }
[data-reveal="fade-right"] { transform: translateX(40px); }

[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* ============================================================
   6. INTERACTIVE CARDS — 3D TILT + INNER GLOW + GLASS OVERLAY
   ============================================================ */

/* Let JS own all transforms on hover; keep box-shadow transition */
.service-item:hover,
.value-card:hover {
  transform: none;
  transition: box-shadow 0.1s ease-out;
}

/* Cursor-tracking radial glow overlay */
.card-glow-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  background: radial-gradient(
    circle 200px at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(0, 204, 221, 0.15),
    transparent 70%
  );
  z-index: 1;
}

.service-item:hover .card-glow-overlay,
.value-card:hover .card-glow-overlay {
  opacity: 1;
}

/* Frosted-glass overlay */
.card-glass-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: opacity 0.3s;
  z-index: 1;
}

.service-item:hover .card-glass-overlay,
.value-card:hover .card-glass-overlay {
  opacity: 1;
}

/* Icon spring morph on card hover */
.service-icon,
.value-icon {
  display: inline-block;
  transition: transform 0.3s ease;
}

.service-item:hover .service-icon,
.value-card:hover .value-icon {
  transform: scale(1.18) rotate(-6deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   7. STAT NUMBER COUNTING STATE
   ============================================================ */
.stat-number.counting {
  color: var(--accent);
  transition: color 0.3s;
}

/* ============================================================
   8. REDUCED MOTION — override everything
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* Instant scroll reveals */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Letter reveal — show immediately */
  .hero-tag-letter {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Shimmer — fall back to plain colour */
  .hero h1 em {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: var(--blue) !important;
    color: var(--blue) !important;
  }

  /* Canvas hidden */
  #hero-canvas {
    display: none !important;
  }

  /* Hero glow pulse off */
  .hero-bg {
    animation: none !important;
  }

  /* No card icon morph */
  .service-item:hover .service-icon,
  .value-card:hover .value-icon {
    transform: none !important;
  }
}