/* ============================================================
   BURDS NERDS: bn-image-reveal.css
   Sitewide zoom-fade reveal for still content images.
   Behavior lives in js/bn-image-reveal.js.

   Images are visible by default. Every hidden or animated state
   sits inside the screen + motion-allowed query below, so print,
   prefers-reduced-motion, and no-JS all fall through to normal.

   Opt out: data-bn-image-reveal="off" on the image or any ancestor.
   ============================================================ */

/* Tells the script this stylesheet loaded before it touches the DOM. */
:root {
  --bn-image-reveal: 1;
}

/* The three layers are inert boxes that fill whatever the image used
   to fill, so percentage sizes on the image keep resolving the same. */
.bn-reveal,
.bn-reveal__inner,
.bn-reveal__media {
  display: block;
  width: 100%;
  height: 100%;
}

/* flow-root keeps the box identical when overflow is released at rest. */
.bn-reveal {
  display: flow-root;
}

/* For an image positioned absolutely: the frame covers the same area. */
.bn-reveal--abs {
  position: absolute;
  inset: 0;
}

/* Both start at 0.01, not 0 (Matt, 2026-11-04). It looks the same, but
   from 0 Chrome records LCP when the reveal ends, up to 2.5s later. */
@keyframes bn-reveal-inner {
  from { opacity: 0.01; transform: scale(1.15); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes bn-reveal-media {
  from { opacity: 0.01; transform: scale(1.25); }
  to   { opacity: 1; transform: scale(1); }
}

/* Self-releasing first-paint hold: ends on its own after 2.5s (keep in
   step with BOOT_HOLD_MS in the script), even if no script ever runs. */
@keyframes bn-reveal-boot-hold {
  from, to { opacity: 0; }
}

@media screen and (prefers-reduced-motion: no-preference) {
  html.bn-reveal-boot main img:not([data-bn-image-reveal="off"]):not([data-bn-image-reveal="off"] img) {
    animation: bn-reveal-boot-hold 2.5s linear;
  }

  /* Removing .bn-reveal-on from <html> frees every image at once. */
  .bn-reveal-on .bn-reveal--pending,
  .bn-reveal-on .bn-reveal--animating {
    overflow: hidden;
  }

  .bn-reveal-on .bn-reveal--pending > .bn-reveal__inner {
    opacity: 0;
  }

  .bn-reveal-on .bn-reveal--animating > .bn-reveal__inner,
  .bn-reveal-on .bn-reveal--animating > .bn-reveal__inner > .bn-reveal__media {
    transform-origin: center center;
    will-change: transform, opacity;
    animation-timing-function: cubic-bezier(0.26, 0.54, 0.32, 1);
    animation-delay: 0s;
    animation-fill-mode: both;
  }

  .bn-reveal-on .bn-reveal--animating > .bn-reveal__inner {
    animation-name: bn-reveal-inner;
    animation-duration: 1.5s;
  }

  .bn-reveal-on .bn-reveal--animating > .bn-reveal__inner > .bn-reveal__media {
    animation-name: bn-reveal-media;
    animation-duration: 2.5s;
  }
}