/* ============ Reveal on scroll ============ */
.reveal,
.reveal-line {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}

.reveal-line {
  transform: translateY(100%);
}

.reveal.is-visible,
.reveal-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ Keyframes ============ */
@keyframes scan {
  0%, 100% { transform: translateY(-60%); opacity: 0; }
  50% { transform: translateY(160%); opacity: 1; }
}

/* The Y is stamped over the I, holds long enough to register, then dissolves outward without ever taking space */
@keyframes glyph-id-alt {
  0%, 35.7% { opacity: 0; transform: translate(-50%, -0.05em); }
  39.3%, 55.4% { opacity: 1; transform: translate(-50%, 0); }
  62%, 100% { opacity: 0; transform: translate(-50%, -0.04em); }
}

@keyframes credential-scan {
  0% { transform: translateY(-100%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateY(340%); opacity: 0; }
}

@keyframes credential-verified {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes scroll-line {
  0% { top: -100%; }
  60%, 100% { top: 100%; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% - var(--space-md))); }
}

@keyframes introspect-beam {
  0% { transform: translateY(-100%); opacity: 0; }
  12% { opacity: 0.85; }
  88% { opacity: 0.85; }
  100% { transform: translateY(460%); opacity: 0; }
}

@keyframes entity-lit {
  0% { opacity: 0; transform: scale(0.96); }
  30% { opacity: 0.24; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes tag-lit {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.7); }
}

@keyframes card-lit {
  0%, 100% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.22) rotate(90deg); }
}

/* ============ Locale ============ */
main {
  transition: opacity var(--dur-sm) var(--ease-out);
}

/* A fr-FR visitor sees nothing until the French is in place, then the page fades in */
.i18n-pending :is(.nav, main, .footer) {
  opacity: 0;
}

/* The toggle must already read [FR] when it appears, not slide there */
.i18n-pending .locale-toggle__brackets {
  transition: none;
}

/* Only what gets rewritten fades: the toggle stays put so its brackets can be followed */
.i18n-swapping :is(main, .footer, .nav__links > a:not(.nav__icon)) {
  opacity: 0;
  transition-duration: var(--dur-micro);
  transition-timing-function: var(--ease-in-out);
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .reveal,
  .reveal-line {
    opacity: 1;
    transform: none;
  }

  .hero__scanline,
  .hero__scroll-line::after {
    animation: none;
    opacity: 0;
  }

  .fonts-ready .glyph-id__alt {
    animation: none;
  }

  .marquee__track {
    animation: none;
  }

  .marquee {
    overflow-x: auto;
  }

  .introspect__beam {
    animation: none;
    opacity: 0;
  }

  .entity.is-lit::before,
  .tag.entity.is-lit::before,
  .card-trigger.is-lit::before {
    animation: none;
  }

  .introspect__body > * {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}