/* Cover reveal: a solid cover over a picture collapses toward its top edge 100ms after the picture comes into
   view, over 800ms outQuad, so the picture is uncovered from the bottom up. part.js (with band-trigger) adds
   .is-live; everything you see is here. Source: Rayleigh's Burgers IX2 a-28 (height 100% -> 0, top-anchored). */
.cover-reveal {
  --cover-color: #162748;                          /* the cover (the source's navy) */
  --cover-dur: 800ms;                              /* collapse time */
  --cover-delay: 100ms;                            /* wait after it comes into view */
  --cover-ease: cubic-bezier(.25, .46, .45, .94);  /* outQuad (Webflow's) */
  position: relative;
  overflow: hidden;
  overflow: clip;
}
.cover-reveal__cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--cover-color);
  pointer-events: none;
  transform-origin: 50% 0%;                        /* collapses toward the top edge: bottom edge rises */
}
/* which edge it collapses toward (default top, as in the source) */
.cover-reveal[data-cover-to="bottom"] > .cover-reveal__cover { transform-origin: 50% 100%; }
.cover-reveal[data-cover-to="left"] > .cover-reveal__cover { transform-origin: 0% 50%; }
.cover-reveal[data-cover-to="right"] > .cover-reveal__cover { transform-origin: 100% 50%; }

/* live: shrink to nothing. Written as scale (a composited transform) instead of the source's height: on a solid
   fill they draw the same frames. Taking .is-live off snaps the cover back (no transition at rest), ready to replay. */
.cover-reveal.is-live > .cover-reveal__cover {
  scale: 1 0;
  transition: scale var(--cover-dur) var(--cover-ease) var(--cover-delay);
}
.cover-reveal.is-live:is([data-cover-to="left"], [data-cover-to="right"]) > .cover-reveal__cover { scale: 0 1; }

/* slant drop (Imperiale Bolgheri .o-reveal-mask): the cover is a slab with a SLANTED top edge, 1.5 x --cover-slant
   taller than the picture, and when live it drops straight off the bottom (translate 0 100%): the slanted edge wipes
   the picture in from the top. Source clock: .8s cubic-bezier(.77,0,.175,1), no wait; stagger with --cover-delay. */
.cover-reveal[data-cover-mode="slant-drop"] {
  --cover-slant: 10%;
  --cover-dur: 800ms;
  --cover-delay: 0ms;
  --cover-ease: cubic-bezier(.77, 0, .175, 1);
}
.cover-reveal[data-cover-mode="slant-drop"] > .cover-reveal__cover {
  inset: calc(var(--cover-slant) * -1.5) 0 0 0;
  clip-path: polygon(0 var(--cover-slant), 100% calc(var(--cover-slant) * .4), 100% 100%, 0 100%);
}
.cover-reveal.is-live[data-cover-mode="slant-drop"] > .cover-reveal__cover {
  scale: none;
  translate: 0 100%;
  transition: translate var(--cover-dur) var(--cover-ease) var(--cover-delay);
}

@media (prefers-reduced-motion: reduce) {
  .cover-reveal > .cover-reveal__cover { display: none; }
}