/* Motion system: page entrance, reveals, reduced-motion policy.
   GPU-friendly only (transform/opacity). Triggered via .in-view added by JS IntersectionObserver. */

/* Progressive enhancement: the hiding only applies once JS has confirmed it is
   running (the `js` class is added inline in <head>, before first paint).
   Without JS the content stays visible instead of sitting at opacity: 0. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Sideways reveal offsets are desktop-only. On a narrow screen these blocks are
   full-bleed, so a 24px offset makes the document wider than the viewport and
   the page grows a horizontal scrollbar for as long as the block is waiting
   below the fold — which is most of the page on a phone. Above 56em there is
   gutter to absorb the offset, so the horizontal entrance is kept there. */
html.js [data-reveal="left"],
html.js [data-reveal="right"] { transform: translateY(18px); }
@media (min-width: 56em) {
  html.js [data-reveal="left"]  { transform: translateX(-24px); }
  html.js [data-reveal="right"] { transform: translateX(24px); }
}
html.js [data-reveal="fade"]  { transform: none; }
html.js [data-reveal="down"]  { transform: translateY(-18px); }
html.js [data-reveal="zoom"]  { transform: scale(0.96); }
html.js [data-reveal="rise"]  { transform: translateY(32px); }
html.js [data-reveal].in-view { opacity: 1; transform: none; }

/* Slow drift for full-bleed bands (transform only) */
@keyframes band-drift { from { transform: scale(1.06) translateY(1.5%); } to { transform: scale(1.06) translateY(-1.5%); } }
.band__media img { animation: band-drift 26s var(--ease-inout) infinite alternate; }

/* Masked image reveal */
html.js [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(8% 4% 8% 4% round var(--radius-medium));
  transition: clip-path 900ms var(--ease-out);
}
html.js [data-reveal="mask"].in-view { clip-path: inset(0 0 0 0 round var(--radius-medium)); }

/* Hero entrance (CSS-only so it runs before JS) */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero__eyebrow { animation: rise 700ms var(--ease-out) both 150ms; }
.hero__title { animation: rise 800ms var(--ease-out) both 280ms; }
.hero__lede { animation: rise 800ms var(--ease-out) both 420ms; }
.hero__actions { animation: rise 800ms var(--ease-out) both 560ms; }
@keyframes hero-zoom { from { transform: scale(1.12); } to { transform: scale(1.06); } }
.hero__img img { animation: hero-zoom 2.2s var(--ease-out) both; }

/* Marquee for destination ticker (CSS only) */
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker { overflow: hidden; }
.ticker__track { display: inline-flex; gap: var(--space-6); padding-inline-end: var(--space-6); white-space: nowrap; animation: ticker 42s linear infinite; }
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
.ticker__track a { color: inherit; text-decoration: none; font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; }
.ticker__track a:hover { color: #e9c98f; }
.ticker__track li::after { content: "·"; margin-inline-start: var(--space-6); color: var(--color-accent); }
/* The global motion toggle on the landing page ([data-motion-toggle]) pauses
   every self-starting animation, this ticker included. */
html[data-motion="paused"] .ticker__track { animation-play-state: paused; }

/* Global reduced-motion policy */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .hero__img img { transform: none; }
  .band__media img { animation: none; transform: none; }
}