/* vuk.beer: a neon installation on a gallery wall. The tubes themselves live in tubes.css. */

:root {
  --wall-hi: #b9b2a8;
  --wall: #918a81;
  --wall-lo: #645e57;
  --focus: rgba(255, 246, 236, .78);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { background: var(--wall-lo); }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--wall);
  -webkit-tap-highlight-color: transparent;
}

::selection { background: rgba(255, 61, 28, .32); color: inherit; }


.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- the wall ---------- */

#sign {
  --ring-d: min(62vw, 36svh, 520px);
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 6.5svh, 72px);
  padding: clamp(56px, 12svh, 140px) 24px clamp(40px, 7svh, 80px);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(130% 70% at 50% -14%, var(--wall-hi) 0%, var(--wall) 46%, var(--wall-lo) 100%);
}

/* plaster: fine grain plus a soft, uneven trowel */
#sign::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .011' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23t)'/%3E%3C/svg%3E");
  background-size: 240px 240px, 900px 900px;
}

/* the floor's shadow line at the foot of the wall */
#sign::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 22svh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(40, 34, 30, .28));
}

/* ---------- the ring is the button ---------- */

#press {
  all: unset;
  display: block;
  flex: none;
  cursor: pointer;
  border-radius: 50%;
  touch-action: manipulation;
}
#press { --u: calc(var(--ring-d) / 200); position: relative; }
#press .ring { transition: transform .12s ease-out; }
#press.is-pressing .ring { transform: scale(.982); }
#press.is-pressing .t-shadow { transform: translate(calc(var(--t) * .1px), calc(var(--t) * .45px)); }
#press:focus-visible { outline: 2px dashed var(--focus); outline-offset: calc(var(--ring-d) * .08); }
/* a sign of life under the pointer, only while it's live */
@media (hover: hover) {
  #press:hover .tube[data-state="lit"] .gas { filter: brightness(1.14) saturate(1.06); }
}
/* the lit ring floods the wall, edge to edge */
#press .ring > .wash { left: -185%; top: -185%; width: 470%; height: 470%; }

/* ---------- the stages ---------- */

#tracker {
  --u: min(.9px, calc((100vw - 48px) / 474), calc((100svh - var(--ring-d) - 300px) / 290));
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#tracker li + li { margin-top: calc(var(--u) * -14); }
/* stacked, five washes overlap: keep each one low so a fully struck column never clips the wall to white */
#tracker { --wash-0: 17%; --wash-1: 11%; --wash-2: 5%; --wash-3: 1.5%; }
#tracker .word > .wash { top: -120%; height: 340%; }

@media (min-width: 960px) and (min-aspect-ratio: 5/4) {
  #press .ring > .wash { left: -330%; top: -330%; width: 760%; height: 760%; }
  #sign {
    --ring-d: min(44svh, 30vw);
    padding-top: clamp(64px, 13svh, 150px);
    gap: clamp(56px, 10svh, 120px);
  }
  #tracker {
    --u: min(.86px, calc((100vw - 18vw - 2 * 3.4vw) / 1209));
    flex-direction: row;
    align-items: flex-start;
    gap: 3.4vw;
  }
  #tracker li + li { margin-top: 0; }
  #tracker { --wash-0: 44%; --wash-1: 30%; --wash-2: 15%; --wash-3: 5%; }
  #tracker .word > .wash { top: -170%; height: 440%; }
}

/* ---------- the beer inside the ring ---------- */

/* a round window of it behind the glass, backlit by the ring */
.beer { position: absolute; inset: calc(var(--u) * var(--inset)); border-radius: 50%; overflow: hidden;
  pointer-events: none; }
.beer svg { display: block; width: 100%; height: 100%; }
.beer-glass { fill: rgba(40, 32, 26, .16); }
.beer-gloss { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 3; stroke-linecap: round; }
.beer-body { fill: url(#beer-amber); }
.beer-head { fill: url(#beer-foam); animation: slosh 7s ease-in-out infinite alternate; }
.beer-light { fill: url(#beer-light); opacity: 0; mix-blend-mode: screen; transition: opacity .5s; }
#press:has(.ring[data-state="lit"]) .beer-light { opacity: 1; }
.fizz { fill: rgba(255, 246, 214, .75); animation: fizz var(--rise) var(--wait) linear infinite; }
/* empty unless armed: it drains when he presses and pours itself full when it's re-armed */
.beer-level { transform: translateY(185px); transition: transform 2.6s cubic-bezier(.6, 0, .85, .45); }
#sign[data-mode="armed"] .beer-level { transform: translateY(0); transition: transform 2.9s cubic-bezier(.25, .7, .3, 1) .35s; }
.beer-stream { fill: #f4ac30; opacity: 0; transform-origin: 0 -100px; }
#sign[data-mode="armed"] .beer-stream { animation: pour 3.2s ease-out both; }
@keyframes slosh { from { transform: translateX(-14px); } to { transform: translateX(10px); } }
@keyframes fizz {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: .9; }
  100% { transform: translateY(-150px); opacity: 0; }
}
@keyframes pour {
  0% { opacity: 0; transform: scaleY(0); }
  8% { opacity: 1; transform: scaleY(1); }
  78% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(.15); }
}

@media (prefers-reduced-motion: reduce) {
  .beer-level, #sign[data-mode="armed"] .beer-level { transition: transform .6s ease-out; }
  .beer-head, .fizz, #sign[data-mode="armed"] .beer-stream { animation: none; }
}