/* ==========================================================================
   Sky-reveal transition overlay
   ==========================================================================
   A full-screen sky rises over the page, a white horse settles into its
   centre, and then the horse becomes a growing hole that reveals the
   destination page. js/transition.js owns the choreography and draws the
   reveal; this file is the overlay's structure.

   COVER   the <video> sky is shown directly, with the <img> horse above it.
   REVEAL  the video is hidden and a <canvas> takes over, drawing the same sky
           each frame and cutting the horse out of it with `destination-out`.
           The canvas is transparent where the horse is, so the page shows
           through. Nothing in this file animates.
   ========================================================================== */

/* The overlay. Fixed over the whole viewport, above the site chrome. Starts
   transparent — the cover fade in js/transition.js brings it up. The dark
   ground stops the first frame before the video decodes from flashing white;
   it is dropped for the reveal, or it would fill the hole instead of the page. */
.skyfx {
  position: fixed;
  inset: 0;
  z-index: var(--z-transition);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: #05060a;
  transform: translateZ(0);
  will-change: opacity;
}
.skyfx.is-revealing { background: transparent; }

/* The drifting-cloud loop. During the reveal it keeps playing (the canvas
   samples its frames) but is invisible — opacity rather than display/visibility,
   so the browser still treats it as on screen and keeps decoding. */
.skyfx__sky {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  pointer-events: none;
}
.skyfx.is-revealing .skyfx__sky { opacity: 0; }

/* The reveal surface: sky with the horse punched out. Sized to the viewport in
   CSS px; its backing store is scaled by devicePixelRatio in JS. */
.skyfx__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: none;
  pointer-events: none;
}
.skyfx.is-revealing .skyfx__canvas { display: block; }

/* The white horse, centred. Width is the hole's starting size, so when the
   visible logo fades out and the hole takes over they are the same size in the
   same place. JS drives its transform during the settle, so the centring
   translate lives in the keyframes; the origin keeps any fallback rendering
   pivoting about the middle. */
.skyfx__logo {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 110px;
  block-size: auto;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  pointer-events: none;
}

/* Reduced motion: no sky, no horse, no hole — a plain dark veil that fades in,
   hands the page over underneath it, and fades out. */
.skyfx--veil {
  background: #05060a;
}