/* V3 · Flavour Wave: every switch floods the screen with the next flavour. */
:root { --bh: 66vh; }
body { transition: color var(--pour) var(--ease-out); }
.v3-wave { position: absolute; inset: 6% -4% auto -4%; height: 100%; pointer-events: none; }
.v3-wave::before { content: ""; position: absolute; inset: 0; background: var(--liquid); -webkit-mask: url("../img/gen/wave-mask.webp") center / cover no-repeat; mask: url("../img/gen/wave-mask.webp") center / cover no-repeat; transition: background-color 600ms; }
.v3-wave img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: .55; }
.v3-mascot { position: absolute; z-index: 3; right: -3vw; top: 22vh; width: clamp(180px, 20vw, 360px); transform: rotate(-14deg); filter: drop-shadow(0 30px 40px rgba(0,0,0,.3)); }
.v3-copy { position: absolute; z-index: 3; left: var(--gutter); top: 30vh; max-width: 44vw; }
.v3-copy h1 { font-size: clamp(4rem, 10.5vw, 11rem); font-style: italic; font-weight: 900; line-height: .84; letter-spacing: -0.045em; text-shadow: 0 24px 60px rgba(0,0,0,.18); }
.v3-copy p { margin-top: 20px; font-size: clamp(1.1rem, 1.6vw, 1.6rem); font-weight: 500; max-width: 24ch; }
.v3-rail { position: absolute; z-index: 3; left: var(--gutter); right: var(--gutter); bottom: clamp(16px, 3vh, 34px); display: flex; gap: clamp(8px, 2vw, 30px); justify-content: flex-start; }
.v3-rail__b { appearance: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; display: grid; justify-items: center; gap: 8px; padding: 0 6px 8px; position: relative; }
.v3-rail__b img { height: clamp(96px, 15vh, 170px); width: auto; transition: transform 500ms var(--ease-out); filter: drop-shadow(0 14px 14px rgba(0,0,0,.3)); }
.v3-rail__b span { font-style: italic; font-weight: 800; font-size: clamp(.95rem, 1.2vw, 1.25rem); }
.v3-rail__b:hover img { transform: translateY(-8px) rotate(-4deg); }
.v3-rail__b[aria-pressed="true"] img { transform: translateY(-16px) scale(1.08); }
.v3-rail__b[aria-pressed="true"]::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 4px; border-radius: 2px; background: var(--ink); }
/* the flood that carries a flavour change across the whole screen, bursting from the tapped bottle */
.liquid-wipe { display: block; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: var(--next, transparent); clip-path: circle(0 at 50% 90%); visibility: hidden; overflow: hidden; }
.liquid-wipe.is-run { visibility: visible; }
.liquid-wipe img { position: absolute; top: 0; left: -10%; width: 120%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: .5; }
[data-variant="v3"] .spheres__title { left: var(--gutter); }
[data-variant="v3"] .spheres__pin { --col: 1; }
@media (max-width: 760px) {
  :root { --bh: 46vh; }
  .v3-copy { top: 104px; max-width: none; right: var(--gutter); }
  .v3-copy h1 { font-size: 17vw; }
  .v3-mascot { width: 140px; top: auto; bottom: 32vh; right: -30px; }
  .v3-rail { overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .v3-rail__b { flex: none; }
  .v3-rail__b img { height: 92px; }
  [data-variant="v3"] .spheres__title { right: auto; left: var(--gutter); text-align: left; }
}