/* ============================================================
   PRIME CLEAN SOLUTIONS — Animation Layer
   All transitions 250–700ms. Reduced motion fully respected.
   ============================================================ */

/* ---------- Scroll reveal (Intersection Observer adds .is-in) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-slow), transform var(--t-slow);
  will-change: opacity, transform;
}

.reveal-left { opacity: 0; transform: translateX(-28px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal-right { opacity: 0; transform: translateX(28px); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal-scale { opacity: 0; transform: scale(.96); transition: opacity var(--t-slow), transform var(--t-slow); }
.reveal-blur { opacity: 0; filter: blur(10px); transform: translateY(16px); transition: opacity var(--t-slow), transform var(--t-slow), filter var(--t-slow); }

.reveal.is-in,
.reveal-left.is-in,
.reveal-right.is-in,
.reveal-scale.is-in,
.reveal-blur.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Staggering inside grids */
.stagger > *:nth-child(1) { transition-delay: 0ms; }
.stagger > *:nth-child(2) { transition-delay: 70ms; }
.stagger > *:nth-child(3) { transition-delay: 140ms; }
.stagger > *:nth-child(4) { transition-delay: 210ms; }
.stagger > *:nth-child(5) { transition-delay: 280ms; }
.stagger > *:nth-child(6) { transition-delay: 350ms; }
.stagger > *:nth-child(7) { transition-delay: 420ms; }
.stagger > *:nth-child(8) { transition-delay: 490ms; }

/* ---------- Entrance for hero (runs once on load) ---------- */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -22px, 0) scale(1.05); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.hero-inner > * > .anim-1 { animation: riseIn 700ms cubic-bezier(.22, .61, .36, 1) both; }
.anim-rise { animation: riseIn 700ms cubic-bezier(.22, .61, .36, 1) both; }
.anim-fade { animation: fadeIn 600ms ease both; }
.anim-scale { animation: scaleIn 700ms cubic-bezier(.22, .61, .36, 1) both; }

.d-1 { animation-delay: 80ms; }
.d-2 { animation-delay: 160ms; }
.d-3 { animation-delay: 240ms; }
.d-4 { animation-delay: 320ms; }
.d-5 { animation-delay: 400ms; }
.d-6 { animation-delay: 480ms; }

.hero-orb { animation: drift 18s ease-in-out infinite alternate; }
.hero-orb--b { animation-duration: 24s; animation-direction: alternate-reverse; }

.float-card--tl { animation: riseIn 700ms cubic-bezier(.22, .61, .36, 1) 420ms both; }
.float-card--br { animation: riseIn 700ms cubic-bezier(.22, .61, .36, 1) 520ms both; }
.float-card--bl { animation: riseIn 700ms cubic-bezier(.22, .61, .36, 1) 620ms both; }

/* Gentle float on the badge only (subtle, non-distracting) */
.ms-badge { animation: floatY 6s ease-in-out infinite; }

/* ---------- Hover micro-interactions ---------- */
.lift { transition: transform var(--t-fast), box-shadow var(--t-fast); }
.lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.glow-hover { transition: box-shadow var(--t-base), border-color var(--t-base); }
.glow-hover:hover { box-shadow: var(--shadow-glow); border-color: var(--primary); }

/* Aqua underline sweep for text links in prose */
.prose a {
  background-image: linear-gradient(var(--primary), var(--primary));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-fast), color var(--t-fast);
  text-decoration-color: rgba(0, 194, 203, .45);
}

.prose a:hover { background-size: 100% 1px; }

/* Skeleton shimmer for lazily inserted media */
.is-loading {
  background: linear-gradient(90deg, var(--surface-2) 25%, #F7FBFC 37%, var(--surface-2) 63%);
  background-size: 200% 100%;
  animation: shimmer 1400ms linear infinite;
}

/* Counter numbers avoid layout shift while animating */
.stat-num { font-variant-numeric: tabular-nums; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .hero-orb,
  .ms-badge { animation: none !important; }
}