/* ==========================================================
   RAVEOWEEN 2nd ANNIVERSARY
   Palette pulled from the flyers: black, blood red, a little bone.
   ========================================================== */

:root {
  --void: #030303;
  --blood: #6f0808;
  --red: #b80f0f;
  --hot: #ff2a1c;
  --bone: #e9e1d7;
  --ash: #9a8c86;

  --display: 'Pirata One', 'UnifrakturCook', Georgia, serif;
  --type: 'Special Elite', 'Courier New', monospace;

  --ease: cubic-bezier(.7, 0, .2, 1);
  --pad: clamp(1.25rem, 5vw, 5rem);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--void);
  color: var(--bone);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
html.locked, html.locked body { overflow: hidden; height: 100%; }

body {
  margin: 0;
  font-family: var(--type);
  font-size: clamp(.95rem, 1.6vw, 1.1rem);
  line-height: 1.6;
  background: var(--void);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--hot); outline-offset: 4px; }
::selection { background: var(--red); color: var(--void); }

/* ---------- atmosphere ---------- */

.grain, .vignette, .glow, .flash {
  position: fixed; pointer-events: none; z-index: 60;
}
.grain {
  inset: -50%;
  width: 200%; height: 200%;
  opacity: .11;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  17% { transform: translate(-6%, 4%); }
  33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 8%); }
  67% { transform: translate(7%, 3%); }
  83% { transform: translate(-8%, -4%); }
  100% { transform: translate(0, 0); }
}
.vignette {
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .78) 100%);
}
.glow {
  top: 0; left: 0; width: 0; height: 0; opacity: 0;
  transition: opacity .6s;
}
.glow::after {
  content: ''; position: absolute; left: -260px; top: -260px; width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255, 42, 28, .17), transparent 65%);
  mix-blend-mode: screen;
}
body.ready .glow { opacity: 1; }
.flash {
  inset: 0; opacity: 0; z-index: 90;
  background: radial-gradient(ellipse at 50% 30%, #fff1ee 0%, rgba(255, 90, 70, .7) 45%, rgba(255, 30, 20, .2) 100%);
}
.lite .grain { opacity: .08; animation-duration: 1.4s; }
.lite .glow { display: none; }

/* ---------- 1. loader ---------- */

#loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: #000;
  clip-path: inset(0 0 0 0);
}
.loader-inner { text-align: center; padding: 0 1rem; }
.count {
  font-family: var(--display);
  font-size: clamp(6rem, 26vw, 15rem);
  line-height: .9;
  color: var(--red);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 40px rgba(184, 15, 15, .55);
}
.msg {
  margin-top: 1rem;
  font-size: clamp(.9rem, 2.4vw, 1.1rem);
  color: var(--ash);
  letter-spacing: .08em;
  min-height: 1.6em;
}
.loader-line {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; margin-top: -1px;
  background: var(--hot);
  box-shadow: 0 0 24px 4px rgba(255, 42, 28, .8);
  opacity: 0; transform: scaleX(1);
}
#loader.flick .count { animation: shake .35s steps(2) 1; }
#loader.off {
  clip-path: inset(49.7% 0 49.7% 0);
  transition: clip-path .65s var(--ease);
}
#loader.off .loader-inner { opacity: 0; transition: opacity .2s; }
#loader.off .loader-line { opacity: 1; transition: opacity .2s .35s; }
#loader.gone { opacity: 0; transition: opacity .35s; }
#loader.gone .loader-line { transform: scaleX(0); transition: transform .35s var(--ease); }
@keyframes shake {
  0% { transform: translate(-6px, 2px) skewX(6deg); }
  50% { transform: translate(7px, -3px) skewX(-8deg); }
  100% { transform: none; }
}

/* ---------- top bar ---------- */

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(.9rem, env(safe-area-inset-top)) var(--pad) .9rem;
  opacity: 0; transition: opacity .8s;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .85), transparent);
}
body.ready .bar { opacity: 1; }
.bar-mark {
  width: clamp(110px, 16vw, 170px); aspect-ratio: 1210 / 290;
  background: url(assets/img/title.png) center / contain no-repeat;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .4s, transform .4s;
}
.bar.mark .bar-mark { opacity: 1; transform: none; }
.bar-right { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.2rem); margin-left: auto; }
.bar-tickets {
  font-family: var(--display); font-size: 1.5rem; line-height: 1;
  color: var(--bone); text-decoration: none;
  border-bottom: 1px solid var(--red); padding-bottom: 2px;
}
.bar-tickets:hover { color: var(--hot); }

.sound {
  display: inline-flex; align-items: center; gap: .6rem;
  background: none; border: 1px solid var(--blood); border-radius: 0;
  padding: .45rem .8rem; color: var(--bone);
  font-size: .85rem; line-height: 1;
  transition: border-color .2s, color .2s;
}
.sound:hover { border-color: var(--red); }
.sound[aria-pressed="true"] { border-color: var(--red); color: var(--hot); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { display: block; width: 3px; height: 3px; background: currentColor; }
.sound[aria-pressed="true"] .eq i { animation: eq .9s ease-in-out infinite; }
.sound[aria-pressed="true"] .eq i:nth-child(2) { animation-delay: -.3s; }
.sound[aria-pressed="true"] .eq i:nth-child(3) { animation-delay: -.6s; }
.sound[aria-pressed="true"] .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 14px; } }

/* ---------- 2. gate ---------- */

.gate {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 4.5rem var(--pad) 2rem;
  text-align: center;
  overflow: hidden;
  --mx: 0; --my: 0;
}
.gate-02 {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--display);
  font-size: clamp(20rem, 70vw, 62rem);
  line-height: .8;
  color: rgba(111, 8, 8, .22);
  transform: translate(-50%, -46%);
  user-select: none;
  white-space: nowrap;
}

.wordmark {
  position: relative; z-index: 2;
  width: min(92vw, 960px, 84vh); aspect-ratio: 1210 / 290;
  background: url(assets/img/title.png) center / contain no-repeat;
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -5px), 0);
}
.wordmark::before, .wordmark::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: inherit;
}
.wordmark.glitching::before { animation: gl-a .42s steps(2) 1; }
.wordmark.glitching::after { animation: gl-b .42s steps(2) 1; filter: hue-rotate(-12deg) brightness(1.6); }
@keyframes gl-a {
  0% { opacity: .9; transform: translate(-14px, 0); clip-path: inset(10% 0 62% 0); }
  35% { opacity: .9; transform: translate(10px, 0); clip-path: inset(55% 0 12% 0); }
  70% { opacity: .9; transform: translate(-6px, 0); clip-path: inset(30% 0 40% 0); }
  100% { opacity: 0; }
}
@keyframes gl-b {
  0% { opacity: .8; transform: translate(12px, 2px); clip-path: inset(60% 0 8% 0); }
  40% { opacity: .8; transform: translate(-16px, -2px); clip-path: inset(5% 0 70% 0); }
  75% { opacity: .8; transform: translate(8px, 0); clip-path: inset(42% 0 30% 0); }
  100% { opacity: 0; }
}

.gate-sub {
  position: relative; z-index: 2;
  margin-top: clamp(.4rem, 1.5vw, 1rem);
  font-family: var(--display);
  font-size: clamp(1.4rem, min(5vw, 5vh), 3.2rem);
  letter-spacing: .12em;
  color: var(--red);
}

.face-btn {
  position: relative; z-index: 1;
  margin-top: clamp(-1.5rem, -2vw, 0rem);
  width: min(66vw, 470px, 40vh);
  padding: 0; border: 0; background: none;
  transform: translate3d(calc(var(--mx) * 16px), calc(var(--my) * 10px), 0);
  -webkit-tap-highlight-color: transparent;
}
.face { width: 100%; animation: flicker 7s linear infinite; }
.face.warp, .exp-face.warp, .poster-img img.warp { filter: url(#warp); }
@keyframes flicker {
  0%, 46%, 50%, 54%, 100% { opacity: 1; }
  47% { opacity: .35; }
  48% { opacity: 1; }
  49% { opacity: .15; }
  52% { opacity: .6; }
  53% { opacity: 1; }
  90% { opacity: 1; }
  91% { opacity: .5; }
  92% { opacity: 1; }
}
.face-btn.scare .face { animation: none; filter: brightness(1.7) saturate(1.3) drop-shadow(0 0 30px rgba(255, 42, 28, .9)); }

.countdown {
  position: relative; z-index: 2;
  margin-top: clamp(.6rem, 2vw, 1.4rem);
  display: flex; gap: clamp(.9rem, 4vw, 3rem);
}
.cd { display: flex; flex-direction: column; align-items: center; min-width: 2.6ch; }
.cd b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, min(9vw, 9vh), 6rem); line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.cd b.tick { animation: tick .3s steps(2) 1; }
.cd span { font-size: .78rem; color: var(--ash); letter-spacing: .1em; }
@keyframes tick { 0% { color: var(--hot); transform: translateY(-2px); } 100% { color: var(--bone); transform: none; } }
.countdown-done { position: relative; z-index: 2; font-family: var(--display); font-size: clamp(2rem, 7vw, 4rem); color: var(--hot); margin-top: 1rem; }

.enter {
  position: relative; z-index: 2;
  margin-top: clamp(1rem, 3vh, 2.4rem);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 1.6rem;
}
.enter-note { flex-basis: 100%; }
.btn-enter {
  position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--display); font-size: clamp(1.6rem, min(4.6vw, 5vh), 2.5rem); line-height: 1;
  padding: .6em 1.5em;
  background: none; border: 2px solid var(--red); border-radius: 0;
  color: var(--bone);
  transition: color .3s, box-shadow .3s;
}
.btn-enter::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--red); transform: translateY(101%);
  transition: transform .4s var(--ease);
}
.btn-enter:hover, .btn-enter:focus-visible { color: var(--void); box-shadow: 0 0 40px rgba(184, 15, 15, .55); }
.btn-enter:hover::before, .btn-enter:focus-visible::before { transform: none; }
.btn-quiet {
  background: none; border: 0; padding: .3rem .5rem;
  color: var(--ash); font-size: .9rem; text-decoration: underline; text-underline-offset: 4px;
}
.btn-quiet:hover { color: var(--bone); }
.enter-note { font-size: .8rem; color: var(--ash); letter-spacing: .06em; }

/* gate intro sequence (runs once the loader has opened) */
.wordmark, .gate-sub, .face-btn, .countdown, .enter, .gate-02 { opacity: 0; }
body.ready .gate-02 { animation: fadein 2.4s .2s forwards; }
body.ready .wordmark { animation: flickin 1.1s steps(1) forwards; }
body.ready .gate-sub { animation: fadein 1s .9s forwards; }
body.ready .face-btn { animation: flickin 1.3s .6s steps(1) forwards; }
body.ready .countdown { animation: fadein 1s 1.5s forwards; }
body.ready .enter { animation: fadein 1s 1.9s forwards; }
body.entered .wordmark, body.entered .gate-sub, body.entered .face-btn,
body.entered .countdown, body.entered .enter, body.entered .gate-02 { opacity: 1; animation: none; }
@keyframes fadein { to { opacity: 1; } }
@keyframes flickin {
  0% { opacity: 0; } 12% { opacity: 1; } 18% { opacity: .1; } 30% { opacity: .9; }
  38% { opacity: 0; } 55% { opacity: 1; } 62% { opacity: .3; } 80% { opacity: 1; } 100% { opacity: 1; }
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden; border-block: 1px solid var(--blood);
  padding: .55rem 0; background: #000;
}
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track span {
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2;
  color: var(--red); white-space: nowrap; padding-right: 1.2rem;
}
.marquee-track i {
  display: inline-block; width: .5em; height: .5em; margin: 0 1.2rem;
  background: var(--red); transform: rotate(45deg) translateY(-.08em);
}
@keyframes marquee { to { transform: translateX(-25%); } }

/* ---------- 3. experience ---------- */

.exp { position: relative; height: 320vh; --p: 0; }
.exp-stick {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: grid; place-items: center; overflow: hidden;
  padding: 4.5rem var(--pad) 2rem;
}
.exp-face {
  position: absolute; left: 50%; top: 50%;
  width: min(140vw, 1200px); max-width: none;
  opacity: calc(.14 + var(--p) * .5);
  transform: translate(-50%, -50%) scale(calc(.85 + var(--p) * .55)) rotate(calc(var(--p) * 3deg - 1.5deg));
  will-change: transform;
}
.exp-copy { position: relative; z-index: 2; text-align: center; max-width: 18ch; width: 100%; }
.manifesto {
  font-family: var(--display);
  font-size: clamp(3rem, 10.5vw, 8.5rem);
  line-height: .95;
  text-shadow: 0 2px 30px #000, 0 0 6px #000;
}
.mline { display: block; }
.mline + .mline { margin-top: .35em; }
.w {
  display: inline-block; margin-right: .22em;
  opacity: .1; transform: translateY(.12em);
  transition: opacity .5s, transform .5s var(--ease), color .5s;
}
.w.lit { opacity: 1; transform: none; }
.rules { margin-top: clamp(1.4rem, 4vh, 3rem); }
.rule {
  font-size: clamp(.95rem, 2.4vw, 1.35rem);
  color: var(--bone); letter-spacing: .03em;
  text-shadow: 0 0 12px #000;
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s, transform .6s var(--ease);
}
.rule + .rule { margin-top: .5rem; }
.rule.lit { opacity: 1; transform: none; }
.exp-copy { max-width: min(92vw, 1100px); }

/* ---------- shared section bits ---------- */

.artists, .archive, .info { padding: clamp(5rem, 12vw, 10rem) var(--pad); position: relative; }
.h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.6rem, 14vw, 11rem); line-height: .85;
  color: var(--red);
  text-shadow: 0 0 50px rgba(184, 15, 15, .35);
}
.h2 span { font-size: .38em; color: var(--ash); text-shadow: none; letter-spacing: .04em; }
.body { max-width: 46ch; color: var(--bone); }

.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s, transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ---------- 4. artists ---------- */

.poster-grid {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 5vw, 6rem);
  align-items: start; max-width: 1200px; margin-inline: auto;
}
.poster-wrap { transform: translate3d(0, var(--py, 0px), 0); }
.poster-wrap--b { margin-top: clamp(3rem, 14vw, 10rem); }
.poster { perspective: 900px; }
.poster.rv { transform: translateY(40px); clip-path: inset(0 0 100% 0); transition: opacity .9s, transform 1.1s var(--ease), clip-path 1.1s var(--ease); }
.poster.rv.in { transform: none; clip-path: inset(0); }
.poster-img {
  border: 1px solid var(--blood);
  box-shadow: 0 0 70px rgba(184, 15, 15, .18);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .25s ease-out, box-shadow .3s, border-color .3s;
  overflow: hidden;
}
.poster:hover .poster-img { border-color: var(--red); box-shadow: 0 0 90px rgba(255, 42, 28, .3); }
.poster-img img { width: 100%; }
.poster-name {
  margin-top: 1rem;
  font-family: var(--display); font-size: clamp(2.6rem, 8vw, 6rem); line-height: .9;
  color: var(--bone);
}

/* ---------- 5. archive ---------- */

.archive { background: linear-gradient(to bottom, transparent, rgba(60, 4, 4, .28) 50%, transparent); }
.archive-grid {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 6vw, 6rem); align-items: center;
  max-width: 1200px; margin-inline: auto;
}
.nophoto img { width: 100%; max-width: 420px; margin-inline: auto; border: 1px solid var(--blood); animation: flicker 9s linear infinite; }
.statement {
  font-family: var(--display); font-size: clamp(2.6rem, 7vw, 5.5rem); line-height: .95;
  color: var(--bone); margin-bottom: 1.5rem;
}
.links { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem 2rem; }
.links a {
  font-family: var(--display); font-size: 1.6rem; text-decoration: none;
  color: var(--red); border-bottom: 1px solid var(--blood);
  transition: color .2s, border-color .2s;
}
.links a:hover { color: var(--hot); border-color: var(--hot); }

/* ---------- 6. info ---------- */

.info-grid {
  margin-top: clamp(2.5rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: center;
  max-width: 1200px; margin-inline: auto;
}
.facts > div {
  display: grid; grid-template-columns: minmax(6.5rem, 9rem) 1fr; align-items: baseline;
  gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--blood);
}
.facts > div:last-child { border-bottom: 1px solid var(--blood); }
.facts dt { color: var(--ash); font-size: .9rem; }
.facts dd { font-family: var(--display); font-size: clamp(2.2rem, 6vw, 4.2rem); line-height: 1; color: var(--bone); }
.facts dd.small { font-family: var(--type); font-size: clamp(1rem, 2.2vw, 1.25rem); line-height: 1.4; }
.facts a { color: var(--hot); text-underline-offset: 4px; }
.flyer-wrap { transform: translate3d(0, var(--py, 0px), 0); }
.flyer { width: 100%; max-width: 420px; margin-inline: auto; border: 1px solid var(--blood); box-shadow: 0 0 80px rgba(184, 15, 15, .22); }

/* ---------- 7. tickets ---------- */

.tickets { padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 8vw, 6rem); text-align: center; }
.ticket {
  position: relative; display: block; isolation: isolate; overflow: hidden;
  padding: clamp(2rem, 6vw, 5rem) var(--pad);
  border-block: 1px solid var(--red);
  text-decoration: none; color: var(--red);
  transition: color .35s;
}
.ticket::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--red); transform: translateY(101%);
  transition: transform .55s var(--ease);
}
.ticket:hover, .ticket:focus-visible { color: var(--void); outline-offset: -8px; }
.ticket:hover::before, .ticket:focus-visible::before { transform: none; }
.ticket-text {
  display: block; font-family: var(--display);
  font-size: clamp(4rem, 17vw, 16rem); line-height: .82;
  animation: flicker 8s linear infinite;
}
.tickets-note { margin-top: 1.5rem; color: var(--ash); font-size: .9rem; padding: 0 var(--pad); }
.socials {
  margin-top: clamp(2.5rem, 6vw, 4rem); padding: 0 var(--pad);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem;
}
.socials a {
  display: flex; flex-direction: column; align-items: center; text-decoration: none;
  font-family: var(--display); font-size: clamp(2.2rem, 6vw, 3.6rem); line-height: 1;
  color: var(--bone); transition: color .2s;
}
.socials a span { font-family: var(--type); font-size: .9rem; color: var(--ash); margin-top: .3rem; transition: color .2s; }
.socials a:hover, .socials a:hover span { color: var(--hot); }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem;
  padding: 1.5rem var(--pad) calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--blood); color: var(--ash); font-size: .85rem;
}
.foot a { color: var(--ash); text-underline-offset: 4px; }
.foot a:hover { color: var(--hot); }

/* ---------- distortion helpers ---------- */

.jitter { animation: jitter .45s steps(2) 1; }
@keyframes jitter {
  0% { transform: translate(-6px, 0) skewX(4deg); filter: brightness(1.6); }
  33% { transform: translate(8px, 0) skewX(-5deg); }
  66% { transform: translate(-4px, 0) skewX(2deg); filter: brightness(1.3); }
  100% { transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 780px) {
  .poster-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .poster-wrap--b { margin-top: 3.5rem; }
  .poster-name { font-size: clamp(1.9rem, 9vw, 3rem); }
  .archive-grid, .info-grid { grid-template-columns: 1fr; }
  .nophoto img { max-width: 300px; }
  .flyer { max-width: 320px; }
  .exp { height: 260vh; }
  .exp-face { width: 190vw; }
  .facts > div { grid-template-columns: 1fr; gap: .2rem; }
  .bar-tickets { font-size: 1.3rem; }
  .sound-lbl { display: none; }
  .sound { padding: .55rem .7rem; }
  .face-btn { width: min(78vw, 420px, 38vh); }
}
@media (min-width: 781px) and (max-height: 820px) {
  .wordmark { width: min(92vw, 960px, 74vh); }
  .face-btn { width: min(66vw, 470px, 33vh); }
  .gate-sub { margin-top: 0; }
}
@media (max-width: 380px) {
  .countdown { gap: .7rem; }
  .cd b { font-size: 2.4rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  .grain { display: none; }
  .wordmark, .gate-sub, .face-btn, .countdown, .enter, .gate-02 { opacity: 1; }
  .rv, .poster.rv { opacity: 1; transform: none; clip-path: none; }
  .w, .rule { opacity: 1; transform: none; }
}

/* ---------- Stage 1 additions: spider, Halloween teaser, tickets + house rules ---------- */
.spider-decor { position: absolute; pointer-events: none; user-select: none; z-index: 1; }
.spider-decor--hero {
  width: clamp(180px, 30vw, 420px); height: auto; right: -2vw; bottom: -8vh;
  opacity: .72; filter: drop-shadow(0 0 30px rgba(184,15,15,.35));
  transform: rotate(8deg); animation: spiderFloat 7s ease-in-out infinite;
}
@keyframes spiderFloat { 0%,100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-16px) rotate(5deg); } }
.ticket-warning { margin-top: 1rem; max-width: 42ch; color: var(--ash); font-size: .78rem; line-height: 1.5; letter-spacing: .03em; }
.ticket-warning strong { color: var(--hot); font-weight: 400; }

.halloween-teaser { position: relative; min-height: min(92vh, 900px); overflow: hidden; background: #000; display: grid; place-items: center; border-block: 1px solid var(--blood); }
.halloween-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .8; }
.halloween-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 5%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.9) 100%), linear-gradient(to top, rgba(0,0,0,.92), transparent 50%); }
.halloween-copy { position: relative; z-index: 2; text-align: center; padding: 2rem var(--pad); margin-top: 38vh; }
.halloween-copy p { font-family: var(--display); color: var(--red); font-size: clamp(2.8rem, 8vw, 8rem); line-height: .9; text-shadow: 0 0 35px rgba(184,15,15,.35); }
.halloween-copy span { display: block; margin-top: 1rem; color: var(--bone); letter-spacing: .12em; font-size: .8rem; text-transform: uppercase; }

.ticket-rules { padding: clamp(5rem, 12vw, 10rem) var(--pad); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 7vw, 7rem); align-items: start; background: linear-gradient(to bottom, rgba(60,4,4,.18), transparent 30%, rgba(60,4,4,.16)); }
.ticket-panel { position: sticky; top: 7rem; padding: clamp(1.5rem, 3vw, 3rem); border: 1px solid var(--blood); background: rgba(3,3,3,.72); box-shadow: 0 0 80px rgba(184,15,15,.08); }
.eyebrow { color: var(--ash); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }
.ticket-panel h2, .house-rules-heading h2 { font-family: var(--display); font-weight: 400; color: var(--red); line-height: .9; }
.ticket-panel h2 { font-size: clamp(3rem, 6vw, 6rem); margin: .5rem 0 1rem; }
.ticket-panel > p:not(.eyebrow):not(.ticket-note) { color: var(--bone); max-width: 34ch; }
.ticket--compact { margin-top: 2rem; border-block: 1px solid var(--red); }
.ticket--compact .ticket-text { font-size: clamp(3.2rem, 8vw, 7rem); }
.carpool-link { display: block; margin-top: 1rem; color: var(--bone); font-family: var(--display); font-size: 1.5rem; text-decoration: none; border-bottom: 1px solid var(--blood); width: fit-content; }
.carpool-link:hover { color: var(--hot); border-color: var(--hot); }
.ticket-note { margin-top: 1.5rem; color: var(--ash); font-size: .85rem; line-height: 1.5; }
.ticket-note strong { color: var(--hot); font-weight: 400; }
.house-rules-heading { margin-bottom: 2rem; }
.house-rules-heading h2 { font-size: clamp(4rem, 9vw, 9rem); margin: .45rem 0 .8rem; }
.house-rules-heading > p:last-child { color: var(--ash); }
.house-rules-list { border-top: 1px solid var(--blood); }
.house-rules-list li { padding: 1.5rem 0 1.7rem; border-bottom: 1px solid var(--blood); }
.house-rules-list h3 { font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3rem); font-weight: 400; color: var(--bone); line-height: 1; margin-bottom: .75rem; }
.house-rules-list p { max-width: 65ch; color: var(--ash); font-size: .9rem; line-height: 1.65; }

@media (max-width: 780px) {
  .spider-decor--hero { width: 180px; right: -34px; bottom: -35px; opacity: .55; }
  .halloween-teaser { min-height: 70svh; }
  .halloween-copy { margin-top: 28vh; }
  .halloween-copy p { font-size: clamp(2.4rem, 11vw, 4.5rem); }
  .ticket-rules { grid-template-columns: 1fr; gap: 4rem; padding-top: 5rem; }
  .ticket-panel { position: relative; top: auto; }
  .house-rules-list p { font-size: .82rem; }
}