/* LA.IO hub transition, feature side. Loaded by every feature page with
   _shared/hub-transition.js and the inline head script that sets html.from-hub and
   html.hub-arrival. Nothing here applies without those classes, so a direct visit is
   unchanged.

   Page contract: the hero's media element carries data-hero (or the older data-vt-hero)
   and is a direct child of the hero <header> or <section>. */

/* The handoff layer: a measured copy of the page's own hero image (same file, box, crop and
   zoom) without the page's tint. Inside the hero it sits above the hero media and below the
   hero's type; on the way back to the hub it sits above everything. */
.hub-poster{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.hub-poster > i{position:absolute;display:block;background-repeat:no-repeat}
.hub-poster--top{z-index:2147483646}

@media (prefers-reduced-motion:no-preference){
  /* Nothing of the page paints until the handoff layer is decoded and in place
     (html.hub-poster-in). Until then this black placeholder is non-contentful, so the browser
     keeps showing the hub's last frame, which is the same image. */
  html.from-hub:not(.hub-poster-in)::before{content:"";position:fixed;inset:0;z-index:2147483646;
    pointer-events:none;background:#000}
  html.from-hub:not(.hub-poster-in) body{opacity:0} /* opacity: a descendant can override visibility */

  /* Everything but the hero waits: the back bar, the hero's type, and what follows the hero. */
  html.from-hub:not(.hub-shown) .hubbar{opacity:0;transform:translateY(16px)}
  html.from-hub:not(.hub-shown) :is(header,section):has(> [data-hero], > [data-vt-hero]) > :not([data-hero]):not([data-vt-hero]):not(.hub-poster),
  html.from-hub:not(.hub-shown) :is(header,section):has(> [data-hero], > [data-vt-hero]) ~ :not(.hub-poster){opacity:0;transform:translateY(16px)}
}

@media (prefers-reduced-motion:reduce){
  html.from-hub:not(.hub-shown) body{opacity:0}
}

/* Page animations (Shipbuilding's drift, for one) hold until the crossfade starts. */
html.from-hub:not(.hub-reveal) body *,
html.from-hub:not(.hub-reveal) body *::before,
html.from-hub:not(.hub-reveal) body *::after{animation-play-state:paused !important}

/* The hero's own entrance steps aside for a hub arrival: its type rises with the reveal. */
html.hub-arrival :is(header,section):has(> [data-hero], > [data-vt-hero]) .reveal{animation:none;opacity:1;transform:none;filter:none}