/* Page entrances, the scroll reveal and directory tile fades (site.js adds .reveal-wait/.is-in/.dir-in). Loaded after site.css. */
/* Motion: one entrance per page and a scroll reveal, opacity and translate only so the compositor runs them. */
/* Pages cross-fade into each other instead of cutting; the header is identical on both sides so it holds still. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }
@keyframes page-in { from { opacity: 0; } }
@keyframes rise-in { from { opacity: 0; translate: 0 22px; } }
@keyframes slide-in { from { opacity: 0; translate: 36px 0; } }
@keyframes reveal-in { from { opacity: 0; translate: 0 26px; } }
.hero-copy > *, .page-head-copy > *, .crumbs, .gd > :not(.gd-bg):not(.gd-frame), .gd-bar { animation: rise-in .8s var(--ease) backwards; }
.hero-copy > :nth-child(2), .page-head-copy > :nth-child(2), .gd > .gd-name { animation-delay: .07s; }
.hero-copy > :nth-child(3), .page-head-copy > :nth-child(3), .gd > .gd-panel { animation-delay: .14s; }
.hero-copy > :nth-child(4), .page-head-copy > :nth-child(4), .gd > .gd-info { animation-delay: .21s; }
.hero-copy > :nth-child(n+5), .page-head-copy > :nth-child(n+5), .gd-bar { animation-delay: .28s; }
.hero-art, .emblem { animation: slide-in .9s var(--ease) .1s backwards; }
.hero-fx, .page-slab, .gd-bg { animation: page-in .9s ease backwards; }
/* Sections below the fold are revealed by site.js instead (as a whole, or block by block when they hold cards). */
main > section:not(.hero):not(.page-head):not([data-reveal="none"]):not(.reveal-wait):not([data-reveal-host]) { animation: rise-in .8s var(--ease) .2s backwards; }
/* The reveal is an animation, not a transition, so cards keep their own hover transitions while and after they rise in.
   The rest state is the element's own opacity, so dimmed art stays dimmed. site.js drops the classes when it ends. */
.reveal-wait:not(.is-in) { opacity: 0; translate: 0 26px; }
.reveal-wait.is-in { animation: reveal-in .75s var(--ease) var(--reveal-delay, 0s) backwards; }
/* Tiles that a directory search, filter or Load more shows inside the viewport. */
.dir-in { animation: reveal-in .45s var(--ease) var(--reveal-delay, 0s) backwards; }

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion turns entrances into plain fades. The glows, pulses and rotating rings keep running
     because the user wants them moving (Windows "Animation effects" off is enough to match this query). */
  html { scroll-behavior: auto; }
  .hero-copy > *, .page-head-copy > *, .crumbs, .gd > :not(.gd-bg):not(.gd-frame), .gd-bar, .hero-art, .emblem, main > section { animation-name: page-in; }
  .reveal-wait:not(.is-in) { translate: none; }
  .reveal-wait.is-in, .dir-in { animation-name: page-in; }
}

/* Layered scenes, calmer pass. The mid and fore cutouts are feathered copies of plate pixels, so any shift against the
   plate doubles their edges: at 1440 doubling shows on barbed wire and rubble from about 3px. Each cutout now stays
   within 2px of the plate. Glow and embers breathe slowly instead of pulsing, and fog drifts at half speed.
   Opacity, translate and scale only (all composited); these loops keep running under reduced motion like the other ambient loops. */
.sl-stage { animation-duration: 22s; }
.sl-mid { animation: sl-mid-calm 14s ease-in-out infinite alternate; }
.sl-fore { animation: sl-fore-calm 11s ease-in-out infinite alternate; }
.sl-fog { animation: sl-drift 30s ease-in-out infinite alternate, sl-swell-calm 13s ease-in-out infinite; }
.sl-glow { animation: sl-breathe 9s ease-in-out infinite; }
.sl-embers { animation: sl-ember-calm 7s ease-in-out infinite, sl-wind-calm 19s ease-in-out infinite alternate; }
@keyframes sl-mid-calm { from { translate: -1.5px .5px; } to { translate: 1.5px -.5px; } }
@keyframes sl-fore-calm { from { translate: 2px 0; } to { translate: -2px -1px; } }
@keyframes sl-swell-calm { 0%, 100% { opacity: .72; } 50% { opacity: .95; } }
@keyframes sl-breathe { 0%, 100% { opacity: .5; } 50% { opacity: .9; } }
@keyframes sl-ember-calm { 0%, 100% { opacity: .9; } 50% { opacity: .6; } }
@keyframes sl-wind-calm { from { translate: -1% 0; } to { translate: 1% 0; } }

/* No VFX on foreground art (user): the chrome sweep across banners and wordmarks is off. It was also the only
   main-thread animation left (background-position), restyling every frame on idle pages. The .sheen wrapper keeps its sizing. */
.sheen::after { animation: none; display: none; }