/* BADFOOT — single looping landing.
   Layers (live composite so the logo never crops and the video never gets cut off):
     #bgfill  — blurred copy of the footage; fills the side space ONLY on screens
                wider than the 16:9 video. Hidden where it isn't needed.
     #footage — the footage locked to fill by HEIGHT, so the whole frame (full
                subject) is always shown and it never zooms/crops as the window
                widens. On portrait it fills the width (sides crop) = full-bleed.
     #logo    — BADFOOT logo (white-on-black) via mix-blend-mode:screen (black
                background drops out). Locked 1:1 to the footage on landscape
                (so they scale together — no independent resizing), and capped on
                portrait so the word never crops.
     #hit     — transparent link sized tightly to the word -> contact email.

   --logo-size resolves to the footage's displayed width on landscape
   (177.9vh = the video's 1530/860 aspect x viewport height), and is capped at
   185vw on portrait so the word stays on-screen. min() makes it continuous —
   no breakpoint, no size "jump". */

:root {
  --logo-size: min(177.9vh, 185vw);
  --min-w: 1000px;   /* the main video won't shrink narrower than this on extreme-wide screens */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* iOS Safari/Chrome draws a large native "tap to play" button over any inline
   <video> when the OS blocks muted autoplay — most commonly when the phone is in
   Low Power Mode (independent of connection speed). Hide that native overlay so it
   never covers the logo; badfoot.js starts playback on the first touch as a
   fallback. (These videos have no `controls`, so nothing else is affected.) */
video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
          appearance: none;
}

html, body {
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  font-family: -apple-system, Helvetica, Arial, sans-serif;
}

#stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;          /* fallback */
  height: 100lvh;         /* fill behind mobile browser chrome */
  background: #989c9c;    /* curtain tone — only shows at the very edges / on extreme-wide screens */
  overflow: hidden;
}

/* Side fill: a <canvas> filled with a zoomed-in, NON-flipped copy of the footage,
   drawn from the single footage video each frame (see badfoot.js) so it stays in
   sync AND moves the same direction as the centre (a mirror would reverse the
   motion). Kept sharp. The hard line where it met the centre is removed by
   feathering the centre's edges (see #footage mask) so the sharp centre dissolves
   into this zoomed copy. Tiny overscan covers sub-pixel edges. */
#bgfill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scale(1.02);
  z-index: 0;
}
/* Not needed (and not worth the decode) where the sharp footage already fills
   the screen: portrait phones and any window narrower than the 16:9 video. */
@media (orientation: portrait) { #bgfill { display: none; } }

/* Footage: locked to fill by height -> whole frame always visible, never zooms.
   The left/right edges fade to transparent so the sharp centre dissolves into the
   zoomed #bgfill behind it (no hard line). The fade is over the curtain margins
   only (the centred subject stays fully opaque). On portrait / <=16:9 the footage
   is wider than the viewport, so these faded edges are off-screen -> no effect. */
#footage {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;                /* intrinsic 16:9 width at full height */
  transform: translate(-50%, -50%);
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* Logo: centered, blended, locked to the footage (see --logo-size). */
#logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--logo-size);
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: screen;
}

/* Transparent click-through layer -> email. Sized tightly to the "BADFOOT" word
   (~43% wide x 14% tall of the logo frame, dead-centred), so you have to click
   the logo, not the empty space around it. Tracks --logo-size. */
#hit {
  position: absolute;
  top: 50%;
  left: 50%;
  width:  calc(var(--logo-size) * 0.48);
  height: calc(var(--logo-size) * 0.11);
  transform: translate(-50%, -50%);
  z-index: 3;
  display: block;
  cursor: pointer;
}

/* Extreme-wide screens (aspect >= 2.5:1) — e.g. a window stretched into a thin
   strip. The height-driven video would shrink so tiny that the side-fill exposed
   and magnified the subject as distorted blobs. Fix: hold the video at a minimum
   width and anchor it TOP-centre (crop the bottom rather than shrink). The wider
   video now covers the subject, so the moving curtain side-fill lands on curtain
   and is kept. Normal and ultrawide (<2.5:1) are unaffected. */
@media (min-aspect-ratio: 5/2) {
  #footage {
    top: 0;
    transform: translateX(-50%);
    height: auto;
    width: max(var(--min-w), 177.9lvh);
  }
  #logo {
    top: 0;
    transform: translateX(-50%);
    height: auto;
    width: min(max(var(--min-w), 177.9lvh), 185vw);
  }
  #hit { inset: 0; width: auto; height: auto; transform: none; }   /* whole strip clickable at this size */
}

/* Stretched even farther — beyond ~5.5:1 (≈ 1905x345 and any wider/shorter). Here
   the zoom side-fill distorts, so drop it and let the flat curtain-tone #stage
   background fill the sides instead — glitch-proof at any stretch. The 2.5:1 rules
   above still hold the video at min-width + top-centre. */
@media (min-aspect-ratio: 11/2) {
  #bgfill { display: none; }
}