/* Foam transition — styles
   Everything here is driven by the custom properties below, so a page can
   retheme the beer or repoint the artwork without touching these rules. */

:root {
  --foam-head: clamp(140px, 26vh, 340px);   /* on-screen depth of the band */
  --foam-image: url("foam.svg");
  --foam-beer-top: #F0B824;
  --foam-beer-mid: #DD9A0D;
  --foam-beer-bottom: #C8860A;
  --foam-layer: 2147483000;
}

.foam {
  position: fixed; inset: 0; overflow: hidden;
  z-index: var(--foam-layer); pointer-events: none; visibility: hidden;
}
.foam.is-running { visibility: visible; }

/* carries the line; the stage inside is counter-translated to stay pinned */
.foam__rise { position: absolute; inset: 0; transform: translateY(100vh); will-change: transform; }
.foam__clip { position: absolute; left: 0; right: 0; top: 0; height: 120vh; overflow: hidden; }
.foam__stage { position: absolute; left: 0; right: 0; top: 0; height: 100vh;
               transform: translateY(-100vh); will-change: transform; }

/* drinking: the incoming view sits above the line, so the clip hangs off its underside */
.foam--drink .foam__clip  { top: auto; bottom: 100%; }
.foam--drink .foam__stage { top: auto; bottom: 0; }

/* the beer: always the region below the line, never tinting the foam */
.foam__wash {
  position: absolute; left: 0; right: 0; top: 0; height: 150vh; opacity: 0;
  background: linear-gradient(180deg, var(--foam-beer-top), var(--foam-beer-mid) 55%, var(--foam-beer-bottom));
}

.foam__head {
  position: absolute; left: -2vw; width: 104vw; height: var(--foam-head);
  top: calc(var(--foam-head) * -0.58);   /* 58% of the band sits below the line */
  background-image: var(--foam-image);
  background-repeat: repeat-x;
  background-size: auto 100%;            /* depth locks to --foam-head, width tiles across */
  transform: translateY(200vh); will-change: transform;
}

/* An arriving page paints this before anything else, so the moment of
   navigation happens behind solid beer and the swap is never seen. */
html.foam-arriving::before {
  content: ""; position: fixed; inset: 0; z-index: var(--foam-layer);
  background: linear-gradient(180deg, var(--foam-beer-top), var(--foam-beer-mid) 55%, var(--foam-beer-bottom));
}

@media (prefers-reduced-motion: reduce) {
  .foam, html.foam-arriving::before { display: none; }
}