/* ============================================
   ANIMATIONS & SCROLL REVEALS
   ============================================ */

/* ── Scroll Reveal ── */
/* Initial hidden state — GSAP overrides via gsap.set() when loaded (DE-2).
   CSS transition kept as no-JS / GSAP-fail fallback. */

.reveal {
  opacity: 0;
}

.reveal--visible {
  opacity: 1;
  transform: none !important;
}

/* ── Progress Bar ── */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-red) 0%, var(--color-blue) 100%);
  z-index: 1001;
  pointer-events: none;
}

/* ── Ticker / Marquee ── */

.ticker {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) 0;
  background-color: var(--color-bg);
}

.ticker__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  animation: ticker-scroll 40s linear infinite;
  will-change: transform;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__item {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker__item--logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ticker__item--logo img {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(30%);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.ticker:hover .ticker__item--logo img {
  opacity: 1;
  filter: grayscale(0%);
}

.ticker__separator {
  color: var(--color-red);
  font-size: var(--text-xs);
  opacity: 0.5;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Morphing Text (Glitch-Resolve) ── */

.morph-text {
  display: block;
  color: var(--color-red);
  font-weight: var(--weight-bold);
  font-size: 1.15em;
  line-height: var(--leading-tight);
  margin: var(--space-1) 0;
}

.morph-text--glitch {
  animation: glitch-chromatic 0.24s steps(4) forwards;
}

.morph-text--resolve {
  text-shadow: none;
}

@keyframes glitch-chromatic {
  0%   { text-shadow: 1px 0 rgba(0, 155, 222, 0.6), -1px 0 rgba(196, 30, 58, 0.6); }
  25%  { text-shadow: -1.5px 0 rgba(0, 155, 222, 0.7), 1.5px 0 rgba(196, 30, 58, 0.7); }
  50%  { text-shadow: 1px 0 rgba(0, 155, 222, 0.4), -0.5px 0 rgba(196, 30, 58, 0.5); }
  75%  { text-shadow: -0.5px 0 rgba(0, 155, 222, 0.3), 1px 0 rgba(196, 30, 58, 0.3); }
  100% { text-shadow: none; }
}

/* ── Dot Grid Drift (DE-5) ── */

@keyframes grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 24px 24px; }
}

/* ── Film Grain ── */

@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  12.5%    { transform: translate(-2%, -3%); }
  25%      { transform: translate(3%, 1%); }
  37.5%    { transform: translate(-1%, 2%); }
  50%      { transform: translate(2%, -2%); }
  62.5%    { transform: translate(-3%, 3%); }
  75%      { transform: translate(1%, -1%); }
  87.5%    { transform: translate(-2%, 2%); }
}

/* ── Counter Animation ── */

.stat-card__number {
  font-variant-numeric: tabular-nums;
}

/* ── Card Filter Transitions ── */

.card--filtering {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.card--hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

/* ── Pillar Card Hover Glow ── */

.pillar-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(
    ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(var(--glow-rgb, 0, 0, 0), 0.1) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
}

.pillar-card:hover::before {
  opacity: 1;
}

/* ── Page Transitions (DE-7) ── */
/* Cross-document View Transitions — gracefully ignored by unsupported browsers */

@view-transition {
  navigation: auto;
}

/* Header persists across pages — smooth crossfade */
.header {
  view-transition-name: header;
}

/* Main content slides in/out */
#main-content {
  view-transition-name: main-content;
}

/* Footer persists */
.footer {
  view-transition-name: footer;
}

/* Root: fast crossfade for anything not named */
::view-transition-old(root) {
  animation: vt-fade-out 180ms ease-out;
}

::view-transition-new(root) {
  animation: vt-fade-in 180ms ease-in;
}

/* Header: instant crossfade for stability */
::view-transition-old(header),
::view-transition-new(header) {
  animation-duration: 120ms;
}

/* Main content: fade + subtle slide */
::view-transition-old(main-content) {
  animation: vt-slide-out 200ms ease-in;
}

::view-transition-new(main-content) {
  animation: vt-slide-in 200ms ease-out;
}

/* Footer: instant crossfade */
::view-transition-old(footer),
::view-transition-new(footer) {
  animation-duration: 120ms;
}

@keyframes vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vt-slide-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

@keyframes vt-slide-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .ticker__track {
    animation: none;
  }

  .morph-text {
    animation: none;
    transition: none;
  }

  .hero__grain {
    animation: none;
  }

  .section--dark::before {
    animation: none;
  }

  /* Disable view transition animations */
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(main-content),
  ::view-transition-new(main-content),
  ::view-transition-old(header),
  ::view-transition-new(header),
  ::view-transition-old(footer),
  ::view-transition-new(footer) {
    animation: none !important;
  }
}