/* =====================================================================
   Million Beers Club: event looks, the shared kit.
   Jules, 2026-10-29. Plain CSS, no build step. Load after styles.css.

   Inert unless <html data-event="..."> is set. app.js sets it from the event
   calendar, against the server's clock (Bob's switch). Every rule here starts
   with html[data-event], apart from the first block, which only touches the
   new, empty event elements. Without the attribute nothing changes.

   An event file (event-halloween.css is the first) does two things:
   1. sets colour tokens: the everyday ones from styles.css (--beer-1 to
      --beer-5, --stout, --tap, --gold, ...) and the event-only ones wired
      below (--ev-*). Anything it leaves out stays everyday.
   2. fills the decoration slots: .deco__corner, .deco__hang, .deco__fly--1
      and --2, .deco__floor--l and --r, .party__drop, and a few bubbles.
   ===================================================================== */

/* ---------- The decoration layer (new elements only; empty and harmless when off) ---------- */
/* .deco sits inside .beer, so it is under every screen, the header and every sheet.
   It never takes a tap and is never read out (.beer is aria-hidden). */
.deco { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.deco > i { position: absolute; display: none; background: no-repeat 50% 50% / contain; pointer-events: none; }
/* the milestone extra: a direct child of #party, out of the party's grid */
.party__drop { position: absolute; display: none; pointer-events: none; background: no-repeat 50% 50% / contain; }

/* ---------- The background: the whole screen is still the beer ---------- */
/* Same five tokens as everyday, plus one optional extra stop (--ev-dusk) and
   movable stop positions. With none of the --ev-* set, this draws the
   everyday gradient exactly. */
html[data-event] .beer {
  background: linear-gradient(180deg,
    var(--beer-1) 0%,
    var(--beer-2) var(--ev-at-2, 26%),
    var(--beer-3) var(--ev-at-3, 54%),
    var(--beer-4) var(--ev-at-4, 80%),
    var(--ev-dusk, var(--beer-4)) var(--ev-at-dusk, 80%),
    var(--beer-5) 100%);
}
/* light through the glass on the left, shade down the right */
html[data-event] .beer::before {
  background:
    linear-gradient(90deg, rgba(255, 250, 235, 0) 3%, rgba(255, 250, 235, var(--ev-streak, .22)) 7.5%, rgba(255, 250, 235, 0) 14%),
    linear-gradient(90deg, rgba(var(--ev-shade-rgb, 110, 45, 0), 0) 78%, rgba(var(--ev-shade-rgb, 110, 45, 0), .18) 100%);
}
html[data-event] .beer__glow {
  background: radial-gradient(closest-side, rgba(var(--ev-glow-rgb, 255, 238, 170), .42), rgba(var(--ev-glow-rgb, 255, 238, 170), 0));
}

/* ---------- The +1 cap and the camera's shutter cap ---------- */
/* Everyday they follow --tap. An event can give the cap its own colour. */
html[data-event] .cap__stop-lite { stop-color: var(--ev-cap-lite, var(--tap-lite)); }
html[data-event] .cap__stop-mid  { stop-color: var(--ev-cap, var(--tap)); }
html[data-event] .cap__stop-deep { stop-color: var(--ev-cap-deep, var(--tap-deep)); }
html[data-event] .cap__skirt     { fill: var(--ev-cap-deep, var(--tap-deep)); }
html[data-event] .shutter__face  { fill: var(--ev-cap, var(--tap)); }

/* ---------- The pour: the beer in the glass, the stream, the shadow ---------- */
/* These colours are written into index.html (the glass's gradients). CSS outranks
   an SVG colour attribute, so no change to index.html is needed. */
html[data-event] #beerFill stop:nth-child(1)  { stop-color: var(--ev-pour-1, #FFD660); }
html[data-event] #beerFill stop:nth-child(2)  { stop-color: var(--ev-pour-2, #F2A324); }
html[data-event] #beerFill stop:nth-child(3)  { stop-color: var(--ev-pour-3, #C8650F); }
html[data-event] #streamFill stop:nth-child(1),
html[data-event] #streamFill stop:nth-child(3) { stop-color: var(--ev-stream-1, #E8901D); }
html[data-event] #streamFill stop:nth-child(2) { stop-color: var(--ev-stream-2, #FFD660); }
html[data-event] #glassShadow stop            { stop-color: var(--stout); }

/* ---------- The two progress bars (next milestone, the club's timeline) ---------- */
html[data-event] .meter__fill,
html[data-event] .tl__meter i { background: var(--ev-meter, linear-gradient(180deg, #FFD660, #E8901D)); }

/* ---------- Colours written in place in styles.css, now following the event ---------- */
/* the dark see-through layers (behind sheets, the photo check, a yes or no, a big photo) */
html[data-event] .scrim  { background: rgba(var(--ev-night-rgb, 28, 15, 6), .55); }
html[data-event] .check  { background: rgba(var(--ev-night-rgb, 24, 12, 4), .9); }
html[data-event] .dialog { background: rgba(var(--ev-night-rgb, 24, 12, 4), .62); }
html[data-event] .viewer { background: rgba(var(--ev-night-rgb, 15, 8, 3), .93); }
/* the focus ring on the name fields, and the badges on your own member card */
html[data-event] .field:focus { box-shadow: 0 5px 0 rgba(42, 23, 9, .25), 0 0 0 4px rgba(var(--ev-tap-rgb, 31, 106, 70), .45); }
html[data-event] .field--sm:focus { box-shadow: 0 0 0 4px rgba(var(--ev-tap-rgb, 31, 106, 70), .4); }
html[data-event] .sheet .field:focus { box-shadow: 0 0 0 4px rgba(255, 201, 60, .45); }
html[data-event] .mcard.is-me .badge { background: rgba(var(--ev-tap-deep-rgb, 19, 74, 48), .72); }

/* the desktop surround and the phone's rim (screens 600px and wider) */
@media (min-width: 600px) {
  html[data-event] body {
    background: var(--ev-desk,
      radial-gradient(1200px 600px at 50% -10%, rgba(232, 144, 29, .22), transparent 60%),
      radial-gradient(900px 500px at 50% 110%, rgba(150, 70, 10, .25), transparent 60%),
      #1C0F06);
  }
  html[data-event] .app { box-shadow: 0 0 0 10px var(--stout), 0 0 0 11px rgba(255, 244, 223, .08), 0 40px 90px rgba(0, 0, 0, .55); }
}

/* ---------- Decorations step aside ---------- */
/* very short screens (a phone on its side): no room, so the decorations step aside */
@media (max-height: 520px) {
  html[data-event] .deco > i,
  html[data-event] .party__drop { display: none !important; }
}
/* reduce motion: every decoration holds still (the everyday bubbles already do) */
@media (prefers-reduced-motion: reduce) {
  html[data-event] .deco > i,
  html[data-event] .party__drop { animation: none !important; transition: none !important; }
}