/* =====================================================================
   Million Beers Club: Halloween 2026. Jules, 2026-10-29.
   On from the release (Fri 30 Oct) to Mon 2 Nov 2026, 11:00 UTC (6:00 AM ET).
   Applies only under <html data-event="halloween">. Needs events.css.
   Look only: same layout, same rules, same words.

   The idea: the pint is a pumpkin ale lit like a lantern, glowing orange at
   the top and sinking into a purple night at the bottom. Midnight purple ink
   replaces the stout brown, the button turns witch purple, the +1 cap turns
   pumpkin, and a few small friends move in: a cobweb under the foam, a spider
   on a thread, bats, ghosts among the bubbles, two jack-o'-lanterns at the
   bottom of the glass. On a milestone the spider drops in.
   ===================================================================== */

html[data-event="halloween"] {
  /* ---- Colours: the everyday tokens ---- */
  --beer-1: #FFC45A;   /* candle glow, under the foam */
  --beer-2: #FFA238;   /* pumpkin, light */
  --beer-3: #F8822A;   /* pumpkin */
  --beer-4: #E4691F;   /* deep pumpkin; also the rim along the top of the sheets */
  --beer-5: #2B1242;   /* midnight, the bottom of the glass */
  --stout: #241034;    /* midnight ink: dark text, every outline, the sheets */
  --stout-2: #3A1D52;
  --tap: #6B2FA3;      /* witch purple: buttons, kickers, links, your row */
  --tap-deep: #46196E;
  --tap-lite: #9356D1;
  /* unchanged on purpose: --cream (labels, cards), --gold (candy corn yellow
     already), --foam (the head, and the status bar colour), --ember (remove). */

  /* ---- Colours: the event-only slots (events.css) ---- */
  --ev-dusk: #7C2C72;                        /* plum, between the pumpkin and the night */
  --ev-at-2: 28%; --ev-at-3: 50%; --ev-at-4: 67%; --ev-at-dusk: 84%;   /* the night starts below every line of plain text */
  --ev-glow-rgb: 255, 224, 150;              /* the lantern glow at the top */
  --ev-streak: .13;                          /* the light down the glass, softer so it is no beam in the dark */
  --ev-shade-rgb: 52, 14, 70;                /* shade down the right side */
  --ev-night-rgb: 22, 9, 34;                 /* the see-through dark layers */
  --ev-tap-rgb: 107, 47, 163;
  --ev-tap-deep-rgb: 70, 25, 110;
  --ev-cap-lite: #FFB656; --ev-cap: #F57A1F; --ev-cap-deep: #B5470E;   /* the pumpkin cap */
  --ev-pour-1: #FFC15A; --ev-pour-2: #F7841F; --ev-pour-3: #B44A10;    /* pumpkin ale in the glass */
  --ev-stream-1: #F07A1E; --ev-stream-2: #FFC86A;
  --ev-meter: linear-gradient(90deg, #FFC93C 0%, #FF8A1F 62%, #FFB45C 86%, #FFF4DF 100%);  /* candy corn */
  --ev-desk:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 140, 40, .26), transparent 60%),
    radial-gradient(900px 500px at 50% 110%, rgba(124, 44, 114, .4), transparent 60%),
    #150A21;

  /* ---- Placement knobs (per screen, below) ---- */
  --hw-ink: #241034;
  --hw-hang: 0px;                            /* how far the spider hangs, from the top of the screen */
}

/* =====================================================================
   Decorations. All under every screen (.deco is inside .beer), so they can
   never cover the count, the cap, a card or a message. Sizes in px; the
   spots per screen are set further down.
   ===================================================================== */

/* the cobweb, strung under the foam in the top left corner */
html[data-event="halloween"] .deco__corner {
  left: 0; top: calc(var(--foam-h) - 16px);   /* the top of it tucked up into the foam */
  width: min(19vw, 76px); height: min(19vw, 76px);
  background-image: url("assets/events/halloween/cobweb.svg");
}

/* the spider on its thread, hanging from the foam on the right */
html[data-event="halloween"] .deco__hang {
  right: 6%; top: 0;
  width: 32px; height: var(--hw-hang);
  background-image: url("assets/events/halloween/spider.svg"), linear-gradient(var(--hw-ink), var(--hw-ink));
  background-size: 32px 30px, 1.5px calc(100% - 26px);
  background-position: 50% 100%, 50% 0;
  transform-origin: 50% 0;
  animation: hw-swing 6s ease-in-out infinite;
  transition: opacity .25s ease;
}

/* two bats */
html[data-event="halloween"] .deco__fly {
  width: 44px; height: 32px;
  background-image: url("assets/events/halloween/bat.svg");
  background-size: 200% 100%;
  background-position: 0 0;
  animation: hw-flap .4s linear infinite, hw-hover 3.6s ease-in-out infinite;
  transition: opacity .25s ease;
}
html[data-event="halloween"] .deco__fly--2 {
  width: 34px; height: 25px;
  animation-duration: .34s, 4.4s;
  animation-delay: -.1s, -1.7s;
}

/* two jack-o'-lanterns at the bottom of the glass, either side of the cap */
html[data-event="halloween"] .deco__floor {
  bottom: calc(var(--safe-bottom) + 10px);
  background-image: url("assets/events/halloween/pumpkin.svg");
  background-position: 50% 100%;
}
html[data-event="halloween"] .deco__floor--l { left: 3.5%; width: 60px; height: 53px; }
html[data-event="halloween"] .deco__floor--r { right: 4%; width: 44px; height: 39px; }

/* ghosts among the bubbles: three of the ten slow, big bubbles (children 25 to 34 in #bubbles).
   They rise with the beer, so they only exist while motion is allowed; with reduce motion on,
   those three stay plain, still bubbles, exactly as every day. */
@media (prefers-reduced-motion: no-preference) {
  html[data-event="halloween"] .bubble:nth-child(26) { width: 28px; height: 32px; }
  html[data-event="halloween"] .bubble:nth-child(30) { width: 24px; height: 28px; }
  html[data-event="halloween"] .bubble:nth-child(33) { width: 32px; height: 37px; }
  html[data-event="halloween"] .bubble:nth-child(26) i,
  html[data-event="halloween"] .bubble:nth-child(30) i,
  html[data-event="halloween"] .bubble:nth-child(33) i {
    border-radius: 0;
    background: url("assets/events/halloween/ghost.svg") no-repeat 50% 50% / contain;
  }
}

/* the milestone: the spider drops in above "Cheers!" and climbs back up as the party ends */
html[data-event="halloween"] .party__drop {
  display: block;
  right: 4%; top: 0;
  width: 40px; height: calc(50% - var(--hw-party-gap, 150px));
  background-image: url("assets/events/halloween/spider.svg"), linear-gradient(var(--hw-ink), var(--hw-ink));
  background-size: 40px 38px, 1.5px calc(100% - 32px);
  background-position: 50% 100%, 50% 0;
  animation: hw-drop 4.5s cubic-bezier(.3, .7, .3, 1) .15s both;
}
html[data-event="halloween"] .app.is-partying .deco__hang,
html[data-event="halloween"] .app.is-partying .deco__fly { opacity: 0; }

/* =====================================================================
   Where each decoration sits, screen by screen (.app[data-screen]).
   Checked clear of every word, card, button and the count, allowing for
   how far each one moves, at nine phone sizes in Safari's and Chrome's
   engines (README, section 9).
   ===================================================================== */

/* the cobweb: everywhere except the start form, which runs from the very top */
html[data-event="halloween"] .app:not([data-screen="start"]) .deco__corner { display: block; }

/* main screen: the spider ends level with the "You" chip, off to its right */
html[data-event="halloween"] .app[data-screen="main"] .deco__hang { display: block; --hw-hang: calc(var(--foam-h) + 236px); }
html[data-event="halloween"] .app[data-screen="main"] .deco__fly,
html[data-event="halloween"] .app[data-screen="main"] .deco__floor { display: block; }
html[data-event="halloween"] .app[data-screen="main"] .deco__fly--1 { left: 3%; top: calc(var(--foam-h) + 186px); }
html[data-event="halloween"] .app[data-screen="main"] .deco__fly--2 { right: 4%; bottom: calc(var(--safe-bottom) + 62px); }

/* the 21+ check and the other first screens: the spider beside the badge or title */
html[data-event="halloween"] .app[data-screen="age"] .deco__hang,
html[data-event="halloween"] .app[data-screen="move"] .deco__hang { display: block; --hw-hang: calc(var(--foam-h) + 150px); }
html[data-event="halloween"] .app[data-screen="age"] .deco__fly { display: block; }
html[data-event="halloween"] .app[data-screen="age"] .deco__fly--1 { left: 5%; top: calc(var(--foam-h) + 130px); }
html[data-event="halloween"] .app[data-screen="age"] .deco__fly--2 { left: 13%; top: calc(var(--foam-h) + 196px); }

/* a small phone: the 21+ check is full, so the bats sit this one out */
@media (max-height: 650px) {
  html[data-event="halloween"] .app[data-screen="age"] .deco__fly { display: none; }
}

/* join: the club's cap is the only thing up top, so a short spider fits beside it */
html[data-event="halloween"] .app[data-screen="join"] .deco__hang { display: block; --hw-hang: calc(var(--foam-h) + 56px); }

/* the front screen: the public total runs edge to edge, so the web and the spider only come out
   when the phone is tall enough to leave room above it */
@media (max-height: 789px) {
  html[data-event="halloween"] .app[data-screen="front"] .deco__corner { display: none; }
}
@media (min-height: 790px) {
  html[data-event="halloween"] .app[data-screen="front"] .deco__hang { display: block; --hw-hang: calc(var(--foam-h) + 56px); }
}

/* a phone on its side: the words can sit anywhere down the screen, so the pumpkin ale runs all
   the way down and the night stays out (every line keeps its contrast) */
@media (max-height: 520px) {
  html[data-event="halloween"] { --ev-at-4: 100%; --ev-at-dusk: 100%; }
}

/* =====================================================================
   Motion. Transform and background position only, so it stays light.
   ===================================================================== */
@keyframes hw-swing {
  0%, 100% { transform: rotate(-2deg) translateY(0); }
  50%      { transform: rotate(2deg) translateY(6px); }
}
@keyframes hw-flap {
  0%, 49.9% { background-position: 0 0; }
  50%, 100% { background-position: 100% 0; }
}
@keyframes hw-hover {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-9px) rotate(4deg); }
}
@keyframes hw-drop {
  0%       { transform: translateY(-104%); }
  18%      { transform: translateY(5%); }
  26%      { transform: translateY(-3%); }
  34%, 84% { transform: translateY(0); }
  100%     { transform: translateY(-104%); }
}

/* reduce motion: events.css stops every decoration where it rests (bats wings up, the spider
   hanging straight, the milestone spider already down), and the ghosts stay plain bubbles. */