/* kc-bleed-grow: a photo or video that grows to full bleed as it scrolls into view.

   Kaʻo, 2026-08-07: "DO use the effect of full width wide photos videos coming into view and going
   full width as you scroll. LOVE this, do this a lot on your options. Every page on every website
   here https://secretidentity-five.vercel.app/ has those kinds of wide photos that get revealed."

   The mechanism is lifted from that site so the movement matches exactly. The element is ALWAYS
   100vw and pulled full bleed with a negative inline margin; a clip-path inset driven by --p (0 to 1)
   is what opens. Nothing animates layout, so it cannot cause reflow or shift the page.

   --p is written by /assets/js/kc-bleed-grow.js, or by the CSS scroll timeline where supported.

   Head safety, which matters because Kaʻo flagged cropped heads twice: object-position keeps the
   face high in the frame at every size. Change it per image if a subject sits lower, never remove it.
*/

.kc-bleed-grow {
  --p: 0;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  clip-path: inset(
    calc((1 - var(--p)) * 8%)
    calc((1 - var(--p)) * 12%)
    round calc((1 - var(--p)) * 22px)
  );
  /* clip-path alone is cheap to animate; keep it off the main thread where possible */
  will-change: clip-path;
}

.kc-bleed-grow > img,
.kc-bleed-grow > video,
.kc-bleed-grow > picture > img {
  display: block;
  width: 100%;
  max-height: 92svh;
  object-fit: cover;
  object-position: center 30%;   /* keeps heads and faces in frame */
}

/* A caption sits under the media, inside the growing container, so it travels with it. */
.kc-bleed-grow figcaption {
  margin: .75rem auto 0;
  max-width: 68ch;
  padding-inline: 1.25rem;
  font-size: .875rem;
  line-height: 1.5;
}

/* ONE driver on purpose: /assets/js/kc-bleed-grow.js writes --p.

   An earlier version also carried a CSS scroll-timeline path under
   @supports (animation-timeline: view()). It was removed because it did not work and the failure was
   silent: the `animation` shorthand resets animation-duration to 0s, a scroll timeline needs `auto`,
   so --p stayed pinned at 0 while the browser still reported support, which made the JS stand down.
   The result was media that never opened. Two code paths where one is untested is worse than one
   tested path, so this keeps the path that can be verified.
*/

/* --p has to be registered as a real custom property or it cannot be interpolated. */
@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Motion is a nicety, never a requirement. Reduced motion gets the finished state immediately. */
@media (prefers-reduced-motion: reduce) {
  .kc-bleed-grow {
    --p: 1;
    clip-path: none;
    animation: none;
    will-change: auto;
  }
}

/* On a narrow screen the inset reveal reads as a wobble, so open it less and finish sooner. */
@media (max-width: 600px) {
  .kc-bleed-grow {
    clip-path: inset(
      calc((1 - var(--p)) * 4%)
      calc((1 - var(--p)) * 6%)
      round calc((1 - var(--p)) * 14px)
    );
  }
  .kc-bleed-grow > img,
  .kc-bleed-grow > video,
  .kc-bleed-grow > picture > img { max-height: 70svh; }
}