/* ============================================================
   Animations — scroll reveal, page transitions, reduced motion
   ============================================================ */

/* Scroll reveal base states (applied by js/animations.js via IO) */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal       { transform: translateY(22px); }
.reveal-left  { transform: translateX(-26px); }
.reveal-right { transform: translateX(26px); }
.reveal-scale { transform: scale(0.96); }

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

/* Stagger support via [data-reveal-delay] inline transition-delay (set in JS) */

/* Gentle hero intro sequence */
.hero-badge, .hero h1, .hero .lede, .hero-ctas {
  animation: heroUp 0.7s var(--ease-out) both;
}
.hero h1     { animation-delay: 0.08s; }
.hero .lede  { animation-delay: 0.16s; }
.hero-ctas   { animation-delay: 0.24s; }
.hero-visual { animation: heroFade 0.9s var(--ease-out) 0.2s both; }

@keyframes heroUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFade {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

/* Rotating conic gradient border for featured tiles */
.animated-border {
  position: relative;
  isolation: isolate;
}
.animated-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg),
    var(--secondary), var(--accent), var(--secondary));
  animation: spinAngle 6s linear infinite;
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-soft);
}
.animated-border:hover::before { opacity: 1; }

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes spinAngle {
  to { --angle: 360deg; }
}

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

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

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

  .page-content { animation: none !important; }

  .hero-float { animation: none !important; }
  .notice-marquee .track {
    animation: none !important;
    flex-wrap: wrap;
    width: auto;
  }
}