/*
 * EPOH Animations — animations.css
 * data-reveal scroll system, stagger delays, header scroll transition CSS,
 * phase card micro-interactions, reduced-motion overrides.
 * Source: EPOH_STYLE_ANCHOR.md §8, Anchor 4 (calm authority — no theatrics)
 *
 * Load order: 6th (after components.css)
 * JS partner: scroll-reveal.js (S3)
 */


/* ============================================================
   SCROLL REVEAL SYSTEM
   Uses data-reveal attribute set via JS IntersectionObserver.
   Variants: fade-up (default), fade-in, slide-left, slide-right, scale-up
   ============================================================ */

/* Base state — hidden */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

/* ── fade-up (default) ── */
[data-reveal],
[data-reveal="fade-up"] {
  transform: translateY(24px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

/* ── fade-in (no movement) ── */
[data-reveal="fade-in"] {
  transform: none;
  transition: opacity var(--transition-reveal);
}

/* ── slide-left ── */
[data-reveal="slide-left"] {
  transform: translateX(-28px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

/* ── slide-right ── */
[data-reveal="slide-right"] {
  transform: translateX(28px);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

/* ── scale-up (phase cards, trust numbers) ── */
[data-reveal="scale-up"] {
  transform: scale(0.96);
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
}

/* ── Revealed state (JS adds .is-revealed) ── */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}


/* ============================================================
   STAGGER DELAYS
   Apply data-delay="1" through data-delay="8" on child elements.
   JS sets these or they can be set inline via HTML.
   ============================================================ */

[data-delay="1"] { transition-delay: 0.05s; }
[data-delay="2"] { transition-delay: 0.10s; }
[data-delay="3"] { transition-delay: 0.15s; }
[data-delay="4"] { transition-delay: 0.20s; }
[data-delay="5"] { transition-delay: 0.25s; }
[data-delay="6"] { transition-delay: 0.30s; }
[data-delay="7"] { transition-delay: 0.40s; }
[data-delay="8"] { transition-delay: 0.50s; }

/* Already-revealed elements ignore the delay */
[data-reveal].is-revealed {
  transition-delay: 0s !important;
}

/*
 * NOTE: The is-revealed class overrides transition-delay above.
 * This rule intentionally uses !important to ensure a smooth
 * re-trigger doesn't leave items stuck in delayed state.
 * JS should not re-trigger once revealed.
 */


/* ============================================================
   HERO ENTRANCE SEQUENCE
   Runs once on page load (no JS required).
   Cascading delays on .hero__* children.
   ============================================================ */

.hero__eyebrow {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}

.hero__headline {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.22s;
}

.hero__subheadline {
  animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.36s;
}

.hero__cta {
  animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.50s;
}

.hero__trust {
  animation: heroFadeIn 0.7s ease both;
  animation-delay: 0.70s;
}

.hero__visual {
  animation: heroFadeIn 1s ease both;
  animation-delay: 0.30s;
}

@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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


/* ============================================================
   EMBER GLOW PULSE
   Subtle ambient animation on hero::before glow.
   Very slow — not distracting. Stops on reduced-motion.
   ============================================================ */

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

.hero::before {
  animation: glowPulse 8s ease-in-out infinite;
}


/* ============================================================
   PHASE CARD HOVER MICRO-INTERACTION
   Letter scales up slightly; handled in CSS only.
   ============================================================ */

.phase-card__letter {
  transition: transform var(--transition-normal), color var(--transition-normal);
}

.phase-card:hover .phase-card__letter {
  transform: scale(1.05);
}

.phase-card--l:hover .phase-card__letter { color: var(--color-phase-1); }
.phase-card--i:hover .phase-card__letter { color: var(--color-phase-2); }
.phase-card--f:hover .phase-card__letter { color: var(--color-phase-3); }
.phase-card--e:hover .phase-card__letter { color: var(--color-phase-4); }
.phase-card--s:hover .phase-card__letter { color: var(--color-phase-5); }


/* ============================================================
   UNDERLINE DRAW ANIMATION
   Used on section headlines — optional enhancement.
   Apply .headline--underline to activate.
   ============================================================ */

.headline--underline {
  position: relative;
  display: inline-block;
}

.headline--underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.headline--underline.is-revealed::after {
  transform: scaleX(1);
}


/* ============================================================
   COUNTER ANIMATION
   Used on trust-card__number — JS handles counting,
   CSS handles the entrance.
   ============================================================ */

.trust-card__number[data-count] {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.trust-card__number[data-count].is-counting {
  opacity: 1;
  transform: none;
}


/* ============================================================
   SMOOTH PAGE TRANSITIONS
   Fade body in on load — prevents FOUC on dark pages.
   ============================================================ */

body {
  animation: bodyReveal 0.4s ease both;
}

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


/* ============================================================
   FOCUS RING ANIMATION
   Subtle ring expansion on keyboard focus.
   ============================================================ */

@keyframes focusRing {
  0% {
    outline-offset: 0px;
    outline-color: transparent;
  }
  100% {
    outline-offset: var(--focus-ring-offset);
    outline-color: var(--focus-ring-color);
  }
}

:focus-visible {
  animation: focusRing 0.15s ease both;
}


/* ============================================================
   LOADING STATE — Skeleton shimmer
   For async content placeholders if needed.
   ============================================================ */

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

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-midnight) 25%,
    rgba(255, 255, 255, 0.04) 50%,
    var(--color-midnight) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-subtle);
}


/* ============================================================
   REDUCED MOTION OVERRIDES
   Respect user system preference — all animations cancelled.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Hero sequence */
  .hero__eyebrow,
  .hero__headline,
  .hero__subheadline,
  .hero__cta,
  .hero__trust,
  .hero__visual {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Glow pulse */
  .hero::before {
    animation: none;
  }

  /* Body reveal */
  body {
    animation: none;
  }

  /* Scroll reveal — show immediately */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Phase letter */
  .phase-card__letter {
    transition: none;
  }

  /* Headline underline */
  .headline--underline::after {
    transition: none;
    transform: scaleX(1);
  }

  /* Skeleton */
  .skeleton {
    animation: none;
    background: var(--color-midnight);
  }

  /* Counter */
  .trust-card__number[data-count] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}