/* ============================================================
   OUINESS — plain mode is a deadpan fact sheet.
   Chaos mode (body[data-chaos] 1–5) is the gig posters come alive.
   ============================================================ */

:root{
  --pink:#ff3ea5;
  --yellow:#f7e018;
  --cyan:#00c2d1;
  --red:#ff4911;
  --green:#21d375;
  --ink:#1a1a1a;
  --paper:#fdfdf8;
  --chaos-bg:#13002b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Georgia,'Times New Roman',serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
  overflow-x:hidden;
  transition:background-color .6s ease;
}
img,video{max-width:100%;display:block}
a{color:inherit}

.page{max-width:980px;margin:0 auto;padding:0 20px}

/* ---------------- PLAIN MODE ---------------- */
.masthead{padding:64px 0 8px;border-bottom:1px solid #999;text-align:left}
.wordmark{font-size:clamp(2.2rem,6vw,3.6rem);font-weight:400;letter-spacing:.04em;margin:0}
.wordmark span{display:inline-block}
.tagline{margin:6px 0 18px;color:#555;font-style:italic}

.factsheet{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:36px;padding:40px 0;align-items:start}
@media(max-width:760px){.factsheet{grid-template-columns:1fr}}
.lead-photo img{border:1px solid #ccc}
.lead-photo figcaption{font-size:.82rem;color:#777;margin-top:6px}

.facts-copy h2{font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid #999;padding-bottom:6px;font-weight:400}
.facts-table{border-collapse:collapse;width:100%;font-size:.95rem}
.facts-table th{vertical-align:top;text-align:left;padding:8px 14px 8px 0;white-space:nowrap;font-weight:700;width:1%}
.facts-table td{padding:8px 0;border-bottom:1px dotted #ccc}

.button-zone{margin-top:34px;text-align:center}
.more-btn{
  font-family:'Shrikhand',Georgia,serif;
  font-size:clamp(1.3rem,3.4vw,1.9rem);
  padding:.55em 1.1em;
  border:3px solid var(--ink);
  background:var(--yellow);
  color:var(--ink);
  cursor:pointer;
  border-radius:10px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .2s;
}
.more-btn:hover{transform:translate(-2px,-2px) rotate(-1deg);box-shadow:8px 8px 0 var(--ink);background:var(--pink);color:#fff}
/* on the plain landing page the button beckons — mostly still, then a wiggle */
body[data-chaos="0"] .more-btn{animation:beckon 3.2s ease-in-out infinite}
@keyframes beckon{
  0%,78%,100%{transform:rotate(0) scale(1)}
  82%{transform:rotate(-2.5deg) scale(1.06)}
  86%{transform:rotate(2.5deg) scale(1.08)}
  90%{transform:rotate(-1.5deg) scale(1.05)}
  94%{transform:rotate(.8deg) scale(1.02)}
}
.more-btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn-warning{font-size:.8rem;color:#888;font-style:italic;margin-top:8px}

/* venues + booking, plain styling */
.section-title{font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid #999;padding-bottom:6px;font-weight:400;margin-top:48px}
.venue-list{columns:3;column-gap:32px;list-style:square;padding-left:20px;font-size:.93rem}
@media(max-width:700px){.venue-list{columns:2}}
.venue-list em{color:#777;font-size:.85em}
.booking p{max-width:48ch}
.book-btn{
  display:inline-block;font-family:'Shrikhand',Georgia,serif;font-size:1.15rem;
  background:var(--ink);color:#fff;text-decoration:none;padding:.6em 1.2em;border-radius:8px;margin:10px 0 30px;
  transition:transform .15s,background .2s;
}
.book-btn:hover{background:var(--pink);transform:rotate(-1.5deg) scale(1.04)}

.foot{border-top:1px solid #999;margin-top:40px;padding:22px 0 60px;font-size:.85rem;color:#666}
.foot-disclaimer{font-size:.75rem;color:#999;font-style:italic}

/* chaos-only blocks hidden in plain mode */
.chaos-only[hidden]{display:none}

/* ============================================================
   CHAOS MODE
   ============================================================ */

body.chaos{
  background:var(--chaos-bg);
  color:#fff;
  font-family:'Corben',Georgia,serif;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,62,165,.45), transparent 42%),
    radial-gradient(circle at 85% 12%, rgba(0,194,209,.4), transparent 40%),
    radial-gradient(circle at 70% 80%, rgba(247,224,24,.28), transparent 45%),
    radial-gradient(circle at 25% 90%, rgba(255,73,17,.35), transparent 40%);
  background-attachment:fixed;
}

body.chaos .masthead{border-bottom:4px dashed var(--yellow);text-align:center;padding-top:46px}
body.chaos .wordmark{
  font-family:'Bungee Shade',cursive;
  font-size:clamp(2.6rem,9vw,6rem);
  color:var(--yellow);
  text-shadow:4px 4px 0 var(--pink),8px 8px 0 rgba(0,0,0,.35);
}
body.chaos .wordmark span{animation:bounce 1.6s ease-in-out infinite;animation-delay:calc(var(--i)*.12s)}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-12px) rotate(-4deg)}60%{transform:translateY(4px) rotate(3deg)}}
body.chaos .tagline{color:var(--cyan);font-weight:700;font-style:normal;letter-spacing:.06em}

body.chaos .facts-copy h2,body.chaos .section-title{
  font-family:'Shrikhand',cursive;font-size:clamp(1.6rem,4.5vw,2.6rem);
  color:var(--pink);border-bottom:4px dotted var(--cyan);text-transform:none;letter-spacing:0;
  transform:rotate(-1.2deg);
}
body.chaos .facts-table td{border-bottom:1px dotted rgba(255,255,255,.35)}
body.chaos .facts-table a{color:var(--yellow)}

/* once chaos starts, the button floats at the bottom so the next dose
   (or mercy) is always one thumb-tap away */
body.chaos .button-zone{
  position:fixed;bottom:calc(28px + env(safe-area-inset-bottom,0px));
  left:50%;transform:translateX(-50%);
  z-index:100;margin:0;width:max-content;
}
body.chaos .btn-warning{display:none}
body.chaos .more-btn{
  background:var(--pink);color:#fff;border-color:var(--yellow);
  box-shadow:6px 6px 0 var(--cyan),0 10px 30px rgba(0,0,0,.5);
  font-size:clamp(1.05rem,2.6vw,1.4rem);
  animation:throb 1.1s ease-in-out infinite;
}
@keyframes throb{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.07) rotate(1.5deg)}}

/* tiltables get their per-element rotation */
body.chaos .tiltable{transform:rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
body.chaos .tiltable:hover{transform:rotate(calc(var(--r,0deg)*-1.4)) scale(1.04);z-index:5}

body.chaos .lead-photo img{border:6px solid #fff;box-shadow:0 14px 34px rgba(0,0,0,.5)}
body.chaos .lead-photo figcaption{color:var(--yellow)}

/* marquee */
.marquee{overflow:hidden;background:var(--yellow);color:var(--ink);font-family:'Shrikhand',cursive;font-size:1.5rem;padding:6px 0;margin:34px -40px;transform:rotate(-1deg);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.marquee.m2{background:var(--cyan);transform:rotate(1.2deg)}
.marquee-track{display:inline-block;white-space:nowrap;animation:crawl 16s linear infinite}
@keyframes crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* hero chaos */
.hero-chaos{position:relative;margin:30px 0 10px}
.hero-chaos .scream{
  position:absolute;right:-10px;bottom:-26px;margin:0;
  font-family:'Bungee Shade',cursive;font-size:clamp(2rem,7vw,4.4rem);line-height:.95;
  color:var(--red);text-shadow:3px 3px 0 var(--yellow);transform:rotate(4deg);
}

/* video wall */
.wall-note{font-family:'Shrikhand',cursive;color:var(--yellow);font-size:1.35rem;margin:-4px 0 16px;transform:rotate(-1.2deg)}
.wall{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;align-items:start}
.tv{margin:0;background:#000;border:6px solid #fff;border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.55);overflow:hidden;cursor:pointer;position:relative}
/* big pulsing sound badge on every TV */
.tv::after{
  content:'🔇 TAP FOR SOUND';
  position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) rotate(-4deg);
  font-family:'Shrikhand',cursive;font-size:1.05rem;white-space:nowrap;
  background:var(--yellow);color:var(--ink);padding:.4em .8em;border-radius:999px;
  border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.45);
  pointer-events:none;animation:badgePulse 1.3s ease-in-out infinite;
}
.tv.unmuted::after{content:'🔊 SOUND ON';background:var(--green);animation:none;opacity:.92}
@keyframes badgePulse{0%,100%{transform:translate(-50%,-50%) rotate(-4deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(-1deg) scale(1.12)}}
.tv video{width:100%;aspect-ratio:9/16;object-fit:cover}
.tv figcaption{font-family:'Shrikhand',cursive;text-align:center;padding:6px;background:var(--pink);color:#fff;font-size:.95rem}
.tv.unmuted figcaption{background:var(--green)}
.tv.unmuted{outline:4px solid var(--green)}

.sub-title{font-family:'Shrikhand',cursive;color:var(--cyan);font-size:1.5rem;margin-top:40px;transform:rotate(1deg)}
.yt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}
.yt{display:block;text-decoration:none;background:#000;border:4px solid #fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.yt img{width:100%;aspect-ratio:16/10;object-fit:cover;opacity:.85}
.yt span{display:block;font-family:'Corben',serif;font-weight:700;font-size:.82rem;padding:7px 9px;background:var(--red);color:#fff}
.yt:hover img{opacity:1}

/* collage piles — masonry via CSS columns so portrait & landscape pack
   to their natural heights instead of stretching to a shared grid row */
.pile{columns:3 240px;column-gap:30px;margin-top:18px}
.snap{margin:0 0 30px;background:#fff;padding:10px 10px 26px;box-shadow:0 12px 26px rgba(0,0,0,.5);break-inside:avoid;display:inline-block;width:100%}
.snap img{width:100%}
.pile.posters .snap{padding:8px}
.snap .credit{font-family:'Corben',Georgia,serif;font-size:.7rem;color:#666;text-align:right;padding:6px 2px 0;margin:0}

/* sounds */
.sounds-copy{font-size:1.2rem}
body.chaos .sounds-copy a{color:var(--yellow);font-family:'Shrikhand',cursive}

/* venues & booking in chaos */
body.chaos .venue-list{list-style:'\2605  ';font-weight:700}
body.chaos .venue-list em{color:var(--cyan)}
body.chaos .book-btn{
  background:var(--green);color:var(--ink);font-size:1.5rem;border:4px solid #fff;
  box-shadow:6px 6px 0 var(--pink);animation:throb 1.4s ease-in-out infinite;
}
body.chaos .foot{border-top:4px dashed var(--pink);color:#cdb9ff}
body.chaos .foot-disclaimer{color:#9a86d6}

/* ---------------- FLOATING BACKGROUND PHOTOS ---------------- */
.floaters{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body[data-chaos="2"] .floaters{display:block}
.page{position:relative;z-index:1}
.floaters img{
  position:absolute;width:200px;opacity:.32;border:4px solid #fff;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  animation:driftA calc(var(--d)*1s) ease-in-out infinite alternate;
}
.floaters img:nth-child(1){top:6%;left:3%;--d:17;transform:rotate(-7deg)}
.floaters img:nth-child(2){top:55%;left:84%;--d:21;width:160px;animation-name:driftB}
.floaters img:nth-child(3){top:78%;left:6%;--d:19;width:180px;animation-name:driftB}
.floaters img:nth-child(4){top:24%;left:86%;--d:15;width:170px}
.floaters img:nth-child(5){top:42%;left:42%;--d:23;width:220px;animation-name:driftB}
@keyframes driftA{
  from{transform:translate(0,0) rotate(-7deg)}
  to{transform:translate(60px,-90px) rotate(8deg)}
}
@keyframes driftB{
  from{transform:translate(0,0) rotate(6deg)}
  to{transform:translate(-80px,70px) rotate(-9deg)}
}
body[data-chaos="2"] .floaters img{opacity:.55;width:240px}

/* L4 penguin walk-by */
.penguin{display:none;position:fixed;bottom:1vh;left:0;font-size:5.5rem;z-index:98;pointer-events:none}
body[data-chaos="2"] .penguin{display:block;animation:waddle 13s linear infinite}
@keyframes waddle{
  0%{transform:translateX(-12vw) rotate(0)}
  25%{transform:translateX(22vw) rotate(-6deg)}
  50%{transform:translateX(56vw) rotate(6deg)}
  75%{transform:translateX(86vw) rotate(-6deg)}
  100%{transform:translateX(112vw) rotate(0)}
}

/* marquees speed up with the levels */
body[data-chaos="2"] .marquee-track{animation-duration:6s}

/* L4: the wordmark letters do barrel rolls */
body[data-chaos="2"] .wordmark span{animation:barrel 2.2s ease-in-out infinite;animation-delay:calc(var(--i)*.15s)}
@keyframes barrel{0%,100%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(360deg) translateY(-10px)}}

/* L4 = MAXIMUM OUINESS: everything on the page is moving */
@keyframes danceA{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(1.8deg) translateY(-6px)}}
@keyframes bob{from{transform:translateY(0) rotate(-1.2deg)}to{transform:translateY(-7px) rotate(1.6deg)}}
body[data-chaos="2"] .section-title{animation:danceA 2.4s ease-in-out infinite}
body[data-chaos="2"] .sub-title{animation:danceA 2.8s ease-in-out infinite reverse}
body[data-chaos="2"] .tagline{animation:bob 1.9s ease-in-out infinite alternate}
body[data-chaos="2"] .lead-photo{animation:wobble 3.2s ease-in-out infinite}
body[data-chaos="2"] .facts-copy{animation:danceA 4.2s ease-in-out infinite}
body[data-chaos="2"] .yt{animation:wobble 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*.3s)}
body[data-chaos="2"] .venue-list li{animation:bob 1.7s ease-in-out infinite alternate}
body[data-chaos="2"] .venue-list li:nth-child(odd){animation-delay:.4s}
body[data-chaos="2"] .venue-list li:nth-child(3n){animation-delay:.9s;animation-direction:alternate-reverse}
body[data-chaos="2"] .book-btn{animation:throb .85s ease-in-out infinite}
body[data-chaos="2"] .booking p{animation:bob 2.3s ease-in-out infinite alternate}
body[data-chaos="2"] .foot{animation:danceA 5s ease-in-out infinite}
body[data-chaos="2"] .scream{animation:throb 1.2s ease-in-out infinite}

/* ---------------- ESCALATION LEVELS ---------------- */

/* L2: everything wobbles gently */
body[data-chaos="2"] .snap, body[data-chaos="2"] .tv{
  animation:wobble 3.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0)*.3s);
}
@keyframes wobble{0%,100%{transform:rotate(var(--r,0deg))}50%{transform:rotate(calc(var(--r,0deg) + 2.5deg)) translateY(-6px)}}

/* disco — hue-rotate applied per-section, NEVER on body or .page:
   a filter/transform on an ancestor un-fixes position:fixed children,
   which made the floating button drift. Keep the button's ancestor
   chain (body > .page > main > .factsheet > .facts-copy) filter-free. */
body[data-chaos="2"] .masthead,
body[data-chaos="2"] .chaos-only,
body[data-chaos="2"] .venues,
body[data-chaos="2"] .booking,
body[data-chaos="2"] .foot,
body[data-chaos="2"] .floaters{animation:disco 9s linear infinite}
@keyframes disco{from{filter:hue-rotate(0)}to{filter:hue-rotate(360deg)}}

/* confetti / falling emoji */
.confetti-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:99}
.confetti-layer .bit{position:absolute;font-size:2.2rem;animation:zoom ease-out forwards;will-change:transform}
@keyframes zoom{
  from{transform:translate(0,0) rotate(0) scale(.4);opacity:1}
  70%{opacity:1}
  to{transform:translate(var(--dx),var(--dy)) rotate(var(--spin,720deg)) scale(1.15);opacity:0}
}

/* MAXIMUM OUINESS: everything spins, alternating directions, fast enough
   to be almost impossible to use. The floating button is the only way out. */
@keyframes spinCW{to{rotate:1turn}}
@keyframes spinCCW{to{rotate:-1turn}}
body[data-chaos="2"] .snap,
body[data-chaos="2"] .tv,
body[data-chaos="2"] .yt,
body[data-chaos="2"] .lead-photo,
body[data-chaos="2"] .section-title,
body[data-chaos="2"] .sub-title,
body[data-chaos="2"] .facts-table,
body[data-chaos="2"] .venue-list li,
body[data-chaos="2"] .book-btn,
body[data-chaos="2"] .scream,
body[data-chaos="2"] .floaters img{animation:spinCW 3s linear infinite}
body[data-chaos="2"] .snap:nth-child(even),
body[data-chaos="2"] .tv:nth-child(odd),
body[data-chaos="2"] .yt:nth-child(even),
body[data-chaos="2"] .section-title,
body[data-chaos="2"] .venue-list li:nth-child(even),
body[data-chaos="2"] .floaters img:nth-child(even){animation-name:spinCCW;animation-duration:2.6s}
body[data-chaos="2"] .venue-list li{animation-duration:2.2s}
/* these two live inside the button's ancestor chain, so they carry
   their own disco filter alongside the spin */
body[data-chaos="2"] .facts-table{animation:spinCW 4.5s linear infinite,disco 9s linear infinite}
body[data-chaos="2"] .lead-photo{animation:spinCW 3s linear infinite,disco 9s linear infinite}
body[data-chaos="2"] .wordmark span{animation:spinCW 1.6s linear infinite;animation-delay:calc(var(--i)*.1s)}
body[data-chaos="2"] .wordmark span:nth-child(even){animation-name:spinCCW}

/* shake on level-up */
@keyframes pageShake{
  0%,100%{transform:translate(0)}
  20%{transform:translate(-7px,4px) rotate(-.6deg)}
  40%{transform:translate(6px,-5px) rotate(.5deg)}
  60%{transform:translate(-5px,-4px) rotate(-.4deg)}
  80%{transform:translate(5px,5px) rotate(.5deg)}
}
body.shaking .page{animation:pageShake .5s ease}

/* ---------------- REDUCED MOTION: stay plain-ish ---------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .marquee-track{transform:none}
}