/* ==========================================================================
   Scroll reveal + preferences
   ========================================================================== */

/* Short and shallow on purpose: a long fade reads as "not loaded" when the
   reader is scrolling quickly. */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-in { opacity: 1; transform: none; }

[data-reveal][data-delay="1"] { transition-delay: .06s; }
[data-reveal][data-delay="2"] { transition-delay: .12s; }
[data-reveal][data-delay="3"] { transition-delay: .18s; }
[data-reveal][data-delay="4"] { transition-delay: .24s; }
[data-reveal][data-delay="5"] { transition-delay: .30s; }

/* Line that draws itself in */
[data-draw] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out);
}

[data-draw].is-in { transform: scaleX(1); }

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

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

  [data-reveal] { opacity: 1; transform: none; }
  [data-draw] { transform: none; }
  .hero__media img { animation: none; transform: none; }
}

/* ==========================================================================
   Title wipe — headings clear from behind a moving edge, like a title card.
   Used only on page headlines, so it stays an event rather than a texture.
   ========================================================================== */

[data-wipe] {
  --wipe-delay: 0s;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .95s var(--ease-out);
  transition-delay: var(--wipe-delay);
}

[data-wipe].is-in { clip-path: inset(0 0 0 0); }

/* Failsafe: if scripting never runs, headings must still be readable. */
.no-js [data-wipe] { clip-path: none; }

/* Brass edge that travels with the wipe. */
[data-wipe] { position: relative; }

[data-wipe]::after {
  content: "";
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 0;
  width: 2px;
  background: var(--brass-lite);
  opacity: 0;
  transform: translateX(0);
  transition: transform .95s var(--ease-out), opacity .3s linear;
  transition-delay: var(--wipe-delay);
  pointer-events: none;
}

[data-wipe].is-in::after { opacity: 0; transform: translateX(100%); }
[data-wipe]:not(.is-in)::after { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  [data-wipe] { clip-path: none; }
  [data-wipe]::after { display: none; }
}