/* ==========================================================================
   IMMIGRATIONTRIAL.COM: motion and the hero video slot
   Loaded directly after it.css. Nothing in here restyles a component; it only
   adds movement, and every movement is switched off under
   prefers-reduced-motion. SOUL.md: calm light, never marketing. No parallax,
   nothing that moves text, no timers.
   ========================================================================== */

/* ---- 1. Ambient light on the hero -------------------------------------
   A single soft brass pool, about 10% opacity, drifting across the slate navy
   ground over 18s and back. It sits behind the copy (the .wrap is lifted
   above it), so the h1 and lede never move and their contrast stays where
   it.css put it: white over the slate navy mixed with 10% brass is still
   roughly 11:1. The hero already has overflow:hidden and position:relative. */
.hero::before{
  content:"";position:absolute;inset:-25% -15%;pointer-events:none;z-index:0;
  background:radial-gradient(34% 48% at 50% 50%,rgba(212,162,78,.11),rgba(212,162,78,0) 72%);
  transform:translate3d(-12%,-8%,0);
  animation:it-drift 18s ease-in-out infinite alternate;
  will-change:transform}
.hero>.wrap{position:relative;z-index:1}
@keyframes it-drift{
  from{transform:translate3d(-12%,-8%,0)}
  to  {transform:translate3d(14%,9%,0)}}

/* ---- 2. The hero figure: still, poster and clip in one 21:9 box --------
   .framed already gives the box its aspect ratio, border, radius and
   overflow:hidden, so the video cannot change the box height. The <img> is
   the base layer. The <video> lies on top, transparent until it is actually
   playing, then fades in over 1.2s. If the file is missing, the browser
   never fires "playing", the video stays transparent and the still shows.
   The poster attribute is the same JPEG, so even a browser that paints the
   poster early shows the identical picture. */
.hero-figure{position:relative}
.hero-figure .hero-video{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;background:transparent;
  opacity:0;transition:opacity 1.2s ease}
.hero-figure.is-playing .hero-video{opacity:1}
.hero-figure.no-video .hero-video{display:none}
.no-js .hero-figure .hero-video{opacity:1}   /* no script: let the browser handle it */

/* ---- 3. Interim slow push-in on the still (Ken Burns, 1.00 -> 1.05, 20s)
   Applied to both layers so the crossfade from still to clip lands on the
   same scale. Once the clip is playing the animation is paused where it is,
   not reset, so there is no snap; the clip's own push-in takes over. */
.hero-figure .shot,
.hero-figure .hero-video{
  transform-origin:50% 45%;
  animation:it-kenburns 20s ease-out both;
  will-change:transform}
.hero-figure.is-playing .shot,
.hero-figure.is-playing .hero-video{animation-play-state:paused}
@keyframes it-kenburns{
  from{transform:scale(1)}
  to  {transform:scale(1.05)}}

/* ---- 4. Reduced motion: the still, and nothing else -------------------
   The inline script on index.html also strips the <source> elements and
   removes the <video> under this media query, so no bytes are requested.
   This block is the CSS half, for browsers where the script did not run. */
@media (prefers-reduced-motion:reduce){
  .hero::before{display:none}
  .hero-figure .shot,
  .hero-figure .hero-video{animation:none;transform:none}
  .hero-figure .hero-video{display:none}
}

/* Print: no video, no transform. */
@media print{
  .hero::before{display:none}
  .hero-figure .hero-video{display:none}
  .hero-figure .shot{animation:none;transform:none}
}