/* ==========================================================================
   CHAOS KIT — maximum stimulation, shared by every page (see js/chaos.js)
   starbursts · CLICK HERE arrows · corner caution tickers · neon signs ·
   sirens · sunburst rays · chasing marquee bulbs · conveyor belt
   Decoration never takes clicks and never sits on top of body text.
   ========================================================================== */

/* ---------- Starburst sticker ---------- */
.starburst {
  position: absolute; z-index: 6; pointer-events: none;
  width: var(--sb, 110px); aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  font: 400 calc(var(--sb, 110px) * .19)/.95 'Anton', Impact, sans-serif; text-transform: uppercase;
  color: var(--sb-ink, #0d0418);
  animation: sb-spin var(--sb-t, 9s) linear infinite;
  filter: drop-shadow(3px 4px 0 rgba(0,0,0,.55));
}
.starburst::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--sb-bg, #ffd400);
  clip-path: polygon(50% 0, 57% 17%, 72% 6%, 71% 24%, 89% 18%, 81% 34%, 99% 37%, 85% 49%, 99% 62%, 81% 65%, 89% 82%, 71% 76%, 72% 94%, 57% 83%, 50% 100%, 43% 83%, 28% 94%, 29% 76%, 11% 82%, 19% 65%, 1% 62%, 15% 49%, 1% 37%, 19% 34%, 11% 18%, 29% 24%, 28% 6%, 43% 17%);
  box-shadow: inset 0 0 0 4px #0d0418;
  animation: sb-pulse 1.2s ease-in-out infinite;
}
.starburst span { rotate: -8deg; padding: 0 12%; }
@keyframes sb-spin { to { rotate: 360deg; } }
@keyframes sb-pulse { 50% { scale: 1.08; } }
.starburst--still { animation: none; rotate: -10deg; }

/* ---------- CLICK HERE arrow ---------- */
.click-arrow {
  position: absolute; z-index: 7; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ca, #39ff6a);
  font: 400 var(--ca-fs, 1.3rem)/1 'Permanent Marker', cursive; text-align: center; white-space: nowrap;
  text-shadow: 2px 2px 0 #0d0418, -1px -1px 0 #0d0418;
  animation: ca-bob .7s ease-in-out infinite alternate;
}
.click-arrow svg { width: var(--ca-w, 86px); height: auto; overflow: visible; }
.click-arrow path { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(2px 2px 0 #0d0418); }
.click-arrow--right svg { rotate: 0deg; }
.click-arrow--left  svg { scale: -1 1; }
.click-arrow--down  svg { rotate: 90deg; }
.click-arrow--up    svg { rotate: -90deg; }
@keyframes ca-bob { to { translate: var(--ca-dx, 0) var(--ca-dy, 0); } }
.click-arrow--right { --ca-dx: 10px; }
.click-arrow--left  { --ca-dx: -10px; }
.click-arrow--down  { --ca-dy: 10px; }
.click-arrow--up    { --ca-dy: -10px; }
.click-arrow b { animation: ca-flash .5s steps(1) infinite; }
@keyframes ca-flash { 50% { color: #ffd400; } }

/* ---------- Diagonal caution-tape tickers in the corners ---------- */
.corner-tape {
  position: fixed; z-index: 40; pointer-events: none;
  width: 460px; padding: 6px 0; overflow: hidden;
  background: repeating-linear-gradient(-45deg, var(--ct-a, #ffd400) 0 18px, var(--ct-b, #0d0418) 18px 36px);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
  font: 400 .95rem/1 'Anton', Impact, sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.corner-tape span {
  display: inline-block; padding: 4px 0; background: var(--ct-band, #0d0418); color: var(--ct-ink, #ffd400);
  animation: ct-scroll 14s linear infinite; padding-left: 100%;
}
@keyframes ct-scroll { to { transform: translateX(-100%); } }
.corner-tape--tl { top: 44px; left: -130px; rotate: -45deg; }
.corner-tape--tr { top: 44px; right: -130px; rotate: 45deg; }
.corner-tape--bl { bottom: 44px; left: -130px; rotate: 45deg; }
.corner-tape--br { bottom: 44px; right: -130px; rotate: -45deg; }
@media (max-width: 1000px) { .corner-tape { display: none; } }

/* ---------- Neon sign ---------- */
.neon {
  display: inline-block; pointer-events: none;
  font: 400 var(--neon-fs, 1.6rem)/1 'Monoton', 'Rye', cursive; letter-spacing: .06em; text-align: center;
  color: #fff; padding: .35em .6em;
  border: 3px solid var(--neon, #ff2d7a); border-radius: 12px;
  text-shadow: 0 0 6px #fff, 0 0 14px var(--neon, #ff2d7a), 0 0 28px var(--neon, #ff2d7a);
  box-shadow: 0 0 12px var(--neon, #ff2d7a), inset 0 0 12px var(--neon, #ff2d7a);
  background: rgba(10, 0, 20, .55);
  animation: neon-flicker 4s steps(1) infinite;
}
.neon:nth-of-type(2n) { animation-delay: -1.7s; }
@keyframes neon-flicker { 0%, 18%, 22%, 60%, 64%, 100% { opacity: 1; } 20%, 62% { opacity: .25; } }

/* ---------- Siren beacon ---------- */
.siren {
  position: relative; display: inline-block; pointer-events: none;
  width: var(--siren, 34px); height: calc(var(--siren, 34px) * .9);
  border-radius: 50% 50% 6px 6px / 70% 70% 6px 6px;
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, var(--siren-c, #ff2030) 30%, #7a0010);
  border: 2px solid #0d0418; box-shadow: 0 0 18px var(--siren-c, #ff2030);
  animation: siren-pulse .5s steps(2) infinite;
}
.siren::after { /* sweeping beam */
  content: ''; position: absolute; left: 50%; top: 40%; width: 420%; aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--siren-c, #ff2030) 55%, transparent) 0 22deg, transparent 22deg 180deg, color-mix(in srgb, var(--siren-c, #ff2030) 55%, transparent) 180deg 202deg, transparent 202deg);
  border-radius: 50%; mix-blend-mode: screen; animation: sb-spin 1.1s linear infinite;
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
}
@keyframes siren-pulse { 50% { filter: brightness(1.6); } }

/* ---------- Sunburst rays ---------- */
.sunburst {
  position: absolute; pointer-events: none; aspect-ratio: 1; border-radius: 50%;
  background: repeating-conic-gradient(var(--ray-a, rgba(255,214,0,.32)) 0 9deg, var(--ray-b, rgba(57,255,106,.12)) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: sb-spin 28s linear infinite;
}

/* ---------- Chasing marquee bulbs (around an element) ---------- */
.chase {
  position: absolute; inset: -14px; pointer-events: none; border-radius: 14px;
  border: 7px dotted #ffd400;
  animation: chase .45s steps(1) infinite;
  filter: drop-shadow(0 0 6px #ffd400);
}
@keyframes chase { 50% { border-color: #ff2d7a; filter: drop-shadow(0 0 6px #ff2d7a); } }

/* ---------- Conveyor belt ---------- */
.conveyor {
  position: relative; z-index: 2; width: 100%; height: 86px; pointer-events: none; overflow: hidden;
}
.conveyor__belt {
  position: absolute; left: 0; right: 0; bottom: 6px; height: 22px;
  background:
    repeating-linear-gradient(90deg, #2b2b3a 0 22px, #ffd400 22px 26px) 0 0 / 52px 100%,
    #2b2b3a;
  border: 3px solid #0d0418; border-radius: 12px;
  animation: belt-run .8s linear infinite;
}
.conveyor__belt::before, .conveyor__belt::after { /* rollers */
  content: ''; position: absolute; inset: 3px 6px; border-radius: 8px;
  background: radial-gradient(circle, #c99a2e 0 4px, #0d0418 5px 6px, transparent 7px) 0 50% / 40px 100% repeat-x;
  animation: belt-run 1.2s linear infinite reverse;
}
@keyframes belt-run { to { background-position-x: 52px; } }
.conveyor__item {
  position: absolute; bottom: 28px; left: -120px; height: var(--h, 52px); width: auto;
  animation: ride var(--dur, 14s) linear infinite; animation-delay: var(--delay, 0s);
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.5));
}
@keyframes ride {
  0% { left: -120px; rotate: 0deg; }
  48% { rotate: 0deg; }
  50% { rotate: -6deg; }
  52% { rotate: 0deg; }
  100% { left: calc(100% + 40px); }
}
.conveyor__item--emoji { font-size: 2.6rem; line-height: 1; height: auto; }

/* ---------- The golden ticket (ORDER HERE), used on every page ---------- */
.golden-ticket { --gt: var(--u, 11px); }
.golden-ticket {
  position: relative; display: grid; justify-items: center; gap: .2em;
  padding: calc(var(--gt) * 1) calc(var(--gt) * 3.4);
  border: 0; cursor: pointer; color: #3b2300;
  background: linear-gradient(105deg, #a8770a 0%, #ffe27a 16%, #fff6c4 24%, #d4a017 38%, #ffe27a 58%, #9c6b05 78%, #ffd95a 100%);
  background-size: 220% 100%;
  animation: ticket-shine 5s linear infinite, ticket-wobble 3.4s ease-in-out infinite;
  -webkit-mask:
    radial-gradient(circle at 0 50%, transparent 14px, #000 15px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 14px, #000 15px) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, transparent 14px, #000 15px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 14px, #000 15px) right / 51% 100% no-repeat;
  transition: scale .2s cubic-bezier(.3,1.8,.5,1);
}
.golden-ticket::before { /* engraved inner border */
  content: ''; position: absolute; inset: 7px 22px;
  border: 2px dashed rgba(59,35,0,.65); pointer-events: none;
}
.golden-ticket__main { font-family: 'Rye', serif; font-size: max(1.7rem, calc(var(--gt) * 4.4)); line-height: 1; text-shadow: 1px 1px 0 #fff6c4; }
.golden-ticket__top, .golden-ticket__bottom { font: 700 max(.62rem, calc(var(--gt) * .95))/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.golden-ticket:hover { scale: 1.07; }
.golden-ticket:active { scale: .96; }
.golden-ticket:focus-visible { outline: 4px dashed #39ff6a; outline-offset: 6px; }
@keyframes ticket-shine { to { background-position: -220% 0; } }
@keyframes ticket-wobble { 0%, 100% { rotate: -3deg; } 50% { rotate: -1deg; } }

/* ---------- Wobble-spin helpers for random factory junk ---------- */
.spin-slow    { animation: sb-spin 18s linear infinite; }
.spin-rev     { animation: sb-spin 12s linear infinite reverse; }
.flip-glass   { animation: glass-flip 4s ease-in-out infinite; }
@keyframes glass-flip { 0%, 40% { rotate: 0deg; } 50%, 90% { rotate: 180deg; } 100% { rotate: 360deg; } }
.boing        { transform-origin: 50% 100%; animation: boing 1.4s cubic-bezier(.3,1.6,.5,1) infinite; }
@keyframes boing { 0%, 100% { scale: 1 1; } 30% { scale: 1.1 .7; } 60% { scale: .9 1.2; } }
.dangle       { transform-origin: 50% 0; animation: dangle 3s ease-in-out infinite alternate; }
@keyframes dangle { from { rotate: -6deg; } to { rotate: 6deg; } }
.jitter       { animation: jitter .25s steps(2) infinite; }
@keyframes jitter { 50% { translate: 1px -1px; rotate: 1deg; } }

html[data-motion="calm"] .starburst,
html[data-motion="calm"] .sunburst,
html[data-motion="calm"] .siren::after { animation-duration: 40s; }
html[data-motion="calm"] .chase,
html[data-motion="calm"] .jitter,
html[data-motion="calm"] .neon,
html[data-motion="calm"] .siren { animation: none; }