/* Home page. Phone first: a full-screen neon sign on a brick wall, then the next party. */
:root { --nav-h: 58px; }
body { background: var(--bg); }

/* Top bar: transparent over the hero, solid once you scroll. */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-start;
  gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px; min-height: var(--nav-h);
  transition: background .25s ease, border-color .25s ease; border-bottom: 1px solid transparent; }
.nav.solid { background: rgba(11, 10, 13, .9); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--pink-core); font: 400 1.35rem/1 var(--display);
  letter-spacing: .06em; text-shadow: 0 0 10px rgba(255, 61, 139, .55); }
.nav-brand svg { width: 22px; height: 27px; }
.nav-brand path, .foot path { fill: none; stroke: var(--blue-core); stroke-width: 14; stroke-linejoin: round; stroke-linecap: round; }
.nav-cta { font: 400 15px/1 var(--label); letter-spacing: .06em; color: var(--pink-core); text-decoration: none; padding: 11px 16px;
  border: 1.5px solid var(--pink); border-radius: 999px; box-shadow: 0 0 14px rgba(255, 61, 139, .35); background: rgba(11, 10, 13, .5); }

/* The hero: an art-deco fan pattern in dim brass, a blue glow behind the sign, dark edges. */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: calc(var(--nav-h) + 12px) 16px 72px;
  background-color: #0F0C11;
  background-image:
    radial-gradient(65% 50% at 50% 44%, rgba(34, 211, 238, .12), transparent 70%),
    radial-gradient(120% 90% at 50% 40%, rgba(15, 12, 17, .35) 30%, rgba(5, 4, 7, .92) 100%),
    url("/brand/deco-fan.svg");
  background-size: auto, auto, 96px 48px;
  overflow: hidden; }
/* Fade the pattern into the page instead of stopping in a hard line. */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 10, 13, 0), rgba(11, 10, 13, .75) 55%, var(--bg)); }
.hero > * { position: relative; z-index: 1; }
.sign { width: min(88vw, 520px); display: grid; justify-items: center; text-align: center; }
.glass { width: 74%; height: auto; overflow: visible; filter: drop-shadow(0 0 2px #22D3EE) drop-shadow(0 0 10px rgba(34, 211, 238, .85)) drop-shadow(0 0 28px rgba(34, 211, 238, .45)); }
.glass path { fill: none; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; }
.glass .ghost { stroke: #22D3EE; opacity: .1; }
.glass .tube { stroke: var(--blue-core); stroke-dasharray: 1; stroke-dashoffset: 0; animation: trace 2.2s .25s cubic-bezier(.45, .05, .35, 1) both, flicker 1s 2.4s both; }
.name { margin-top: 18px; font: 400 clamp(2.7rem, 14vw, 5.4rem)/1 var(--display); letter-spacing: .12em; padding-left: .12em; color: var(--pink-core);
  text-shadow: 0 0 2px var(--pink), 0 0 14px rgba(255, 61, 139, .85), 0 0 40px rgba(255, 61, 139, .5);
  animation: power .9s 2.7s both, buzz 8s 5s infinite; }
.rule { display: flex; align-items: center; gap: 14px; width: 92%; margin: 14px 0 12px; animation: power .5s 3.3s both; }
.rule i { flex: 1; height: 2px; background: var(--blue-core); box-shadow: 0 0 8px var(--blue); }
.rule b { width: 12px; height: 12px; border: 2px solid var(--blue-core); transform: rotate(45deg); box-shadow: 0 0 8px var(--blue); }
.sub { font: 400 clamp(1rem, 4.6vw, 1.5rem)/1 var(--label); letter-spacing: .5em; padding-left: .5em; color: var(--blue-core);
  text-shadow: 0 0 10px rgba(34, 211, 238, .8); animation: power .5s 3.6s both; }
@keyframes trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes flicker { 0% { opacity: 1; } 20% { opacity: .35; } 30% { opacity: 1; } 45% { opacity: .5; } 60%, 100% { opacity: 1; } }
@keyframes power { 0% { opacity: .06; } 25% { opacity: .9; } 35% { opacity: .2; } 55% { opacity: 1; } 65% { opacity: .45; } 100% { opacity: 1; } }
@keyframes buzz { 0%, 93%, 100% { opacity: 1; } 94% { opacity: .55; } 95% { opacity: 1; } 97% { opacity: .7; } }
.scroll-cue { position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); left: 50%; width: 44px; height: 44px; margin-left: -22px;
  display: grid; place-items: center; animation: reveal .7s 4s both; }
.scroll-cue span { width: 14px; height: 14px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); animation: bob 2s 4.5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(6px) rotate(45deg); } }

/* Below the fold. */
.home { max-width: 680px; margin: 0 auto; padding: 40px 18px 24px; display: grid; gap: 44px; }
.kicker { font: 400 13px/1 var(--label); letter-spacing: .22em; text-transform: uppercase; color: var(--blue-core); text-shadow: 0 0 8px rgba(34, 211, 238, .5); }
.home h2 { font: 400 clamp(2rem, 8.5vw, 2.6rem)/1.08 var(--display); color: var(--pink-core); text-shadow: 0 0 12px rgba(255, 61, 139, .45); margin: 0; }
.home section { display: grid; gap: 12px; }
.next { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px 20px;
  box-shadow: 0 0 0 1px rgba(255, 61, 139, .12), 0 20px 50px -30px rgba(255, 61, 139, .5); scroll-margin-top: calc(var(--nav-h) + 16px); }
.next .highlights { text-align: left; justify-items: start; gap: 4px; }
.next .highlights li + li::before { display: none; }
.ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.about p { color: var(--muted); font-size: 1.05rem; }
.tiles { display: grid; gap: 12px; }
.tile { display: grid; gap: 4px; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.tile b { font: 400 1.15rem/1.2 var(--label); color: var(--blue-core); }
.tile span { color: var(--muted); font-size: 15px; }
.tile:active { transform: translateY(1px); }
.foot { display: grid; justify-items: center; gap: 10px; padding: 30px 16px calc(env(safe-area-inset-bottom, 0px) + 36px); color: var(--muted); font-size: 14px; }
.foot svg { width: 30px; height: 36px; opacity: .8; }
.foot nav { display: flex; gap: 18px; }
.foot a { color: var(--muted); }


@media (prefers-reduced-motion: reduce) {
  .glass .tube, .name, .rule, .sub, .scroll-cue, .scroll-cue span { animation: none !important; }
}

/* Big blocks: next party, the list, the jukebox, the tip jar. */
.block { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 24px 20px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.block.list { box-shadow: 0 0 0 1px rgba(255, 61, 139, .10), 0 20px 50px -34px rgba(255, 61, 139, .45); }
.block.juke { box-shadow: 0 0 0 1px rgba(34, 211, 238, .12), 0 20px 50px -34px rgba(34, 211, 238, .5); }
.block.tips { box-shadow: 0 0 0 1px rgba(213, 175, 99, .14), 0 20px 50px -34px rgba(213, 175, 99, .45); }
.block.tips .kicker { color: #E7CB8E; text-shadow: 0 0 8px rgba(213, 175, 99, .5); }
.btn.gold { background: #D5AF63; border-color: #D5AF63; color: #1A1408; box-shadow: 0 0 22px rgba(213, 175, 99, .35); }
.mini { display: grid; gap: 12px; margin-top: 4px; }
.done { color: var(--blue-core); font: 400 1.1rem/1.4 var(--label); }
.more { justify-self: center; margin-top: 6px; color: var(--muted); font-size: 15px; text-decoration: none; }
.more:hover { color: var(--ink); }

/* One centred column at every width: the blocks share the same edges as the column. */
.home > section { width: 100%; justify-self: center; }

.nav-brand { margin-left: 12px; }

/* The top bar and the down arrow wait until the sign has finished lighting up. Scrolling
   early shows the bar straight away. */
.nav > * { animation: reveal .7s 4s both; }
.nav.solid > *, .nav.shown > * { animation: none; opacity: 1; }   /* once it's appeared, it stays */
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nav > * { animation: none !important; } }
.home > .push-card { border-radius: 22px; padding: 24px 20px; }
.block.getapp { box-shadow: 0 0 0 1px rgba(255, 61, 139, .25), 0 20px 50px -30px rgba(255, 61, 139, .6); border-color: rgba(255, 61, 139, .45); scroll-margin-top: calc(var(--nav-h) + 16px); }
.block.getapp[hidden] { display: none; }
.perks { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink); }
.getapp .btn[hidden] { display: none; }

/* Kyle's admin dashboard (only rendered for him) */
.admin-dash { display: grid; gap: 14px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.dash-next { display: grid; gap: 4px; padding: 18px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--blue); color: var(--ink); text-decoration: none;
  box-shadow: 0 0 22px -6px rgba(34, 211, 238, .5); }
.dash-next b { font: 400 1.4rem/1.15 var(--display); color: var(--pink-core); }
.dash-next .dash-rsvp b { font: 700 1rem var(--body); color: var(--ink); }
.dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .dash-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile-a { display: grid; gap: 2px; align-content: start; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; min-height: 112px; }
.tile-a:active { border-color: var(--pink); }
.tile-a.hot { border-color: var(--pink); box-shadow: 0 0 16px -4px rgba(255, 61, 139, .6); }
.t-icon { font-size: 22px; }
.t-big { font: 400 2rem/1.05 var(--display); color: var(--pink-core); }
.t-label { font: 400 13px/1.2 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-core); }
.t-small { font-size: 12px; color: var(--muted); }

/* Unadvertised skip: a tap on the sign during the intro jumps to the finished state (home.js adds .skip). */
.hero.skip .glass .tube, .hero.skip .rule, .hero.skip .sub, .hero.skip .scroll-cue { animation: none !important; }
.hero.skip .name { animation: buzz 8s 3s infinite !important; }

/* "Happening now": an open crew, first thing below the sign */
.block.crew-now { border-color: rgba(34, 211, 238, .55); box-shadow: 0 0 0 1px rgba(34, 211, 238, .25), 0 20px 50px -28px rgba(34, 211, 238, .7); }
.crew-now .kicker { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #F87171; box-shadow: 0 0 10px #F87171; animation: livepulse 1.4s ease-in-out infinite; }
@keyframes livepulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }