/* ==========================================================================
   feder-ui · tokens + base components
   Default theme: a minimal monochrome waitlist card — near-black canvas, a
   soft two-stop grey gradient on the display wordmarks (a restrained metal
   feel from a plain CSS gradient, never a lighting simulation), flat white
   for meta labels, and sharp-cornered rectangular form controls. No colour
   accent anywhere by default.
   A second, optional layer further down (the tag-pill cloud, the neon-green
   tokens, the falling-pill physics) is kept for pages that want the louder
   nightlife-teaser register instead — nothing below the "legacy" marker is
   used unless a page opts into those classes.
   Copy this into a <style> block; delete what a given page doesn't use.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* canvas */
  --bg:        #0d0d0d;
  --bg-2:      #121212;   /* form fields */
  --line:      rgba(255,255,255,.16);
  --line-strong: rgba(255,255,255,.9);  /* the crisp 1px input border */
  --ink:       #ededea;   /* flat white — meta labels (city, date) */
  --ink-muted: #a3a3a0;   /* helper text, field labels */
  --ink-dim:   #6e6e6b;   /* placeholder, disclaimers */

  /* the display wordmark's soft grey gradient — a narrow, subtle range.
     Two flat stops only; no third "highlight" stop, no per-letter lighting.
     That restraint is what keeps it reading as considered rather than a
     cheap "chrome text generator" effect. */
  --chrome-1:  #d6d6d3;
  --chrome-2:  #9c9c99;

  --r-card: 6px;    /* buttons/inputs: sharp, minimal rounding — not pills */
  --r-pill: 999px;  /* kept for the optional legacy pill-cloud pattern below */

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--font-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid #fff;outline-offset:3px}
img,svg{display:block;max-width:100%}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* a soft, very subtle top-lit vignette — barely perceptible, never a decorative gradient */
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.05) 0%, transparent 60%)}

/* ---------- chrome text: the one "material" move, kept deliberately subtle ---------- */
.chrome{background:linear-gradient(180deg,var(--chrome-1) 0%,var(--chrome-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- card shell: a single centred stack, the whole page for a minimal waitlist ---------- */
.card{position:relative;z-index:1;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:64px 24px}

.brand-mark{width:64px;height:auto;color:var(--ink-muted);margin-bottom:22px}

.brand-stack h1{font-family:var(--font-display);text-transform:uppercase;line-height:.92;letter-spacing:-.01em;margin:0}
.brand-stack .line1{font-size:clamp(34px,9vw,56px)}
.brand-stack .x{display:block;margin:8px auto;color:var(--ink-dim);font-size:18px;font-family:var(--font-ui)}
.brand-stack .line2{font-size:clamp(46px,13vw,92px);margin-top:2px}

.meta-stack{margin-top:26px;display:grid;gap:7px}
.meta-stack .city{font-family:var(--font-display);font-size:13px;letter-spacing:.32em;color:var(--ink)}
.meta-stack .date{font-family:var(--font-display);font-size:clamp(16px,3vw,19px);letter-spacing:.08em;color:var(--ink)}

.hairline{width:40px;height:1px;background:var(--line);margin:26px auto 28px;border:0}

/* ---------- waitlist form ---------- */
.waitlist{width:100%;max-width:320px;margin:0 auto;text-align:left}
.waitlist .f-label{display:block;font-family:var(--font-ui);font-weight:700;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:9px}
.waitlist input{width:100%;height:52px;padding:0 16px;background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r-card);color:var(--ink);
  font:15px/1 var(--font-ui);outline:0;transition:box-shadow .2s ease}
.waitlist input::placeholder{color:var(--ink-dim)}
.waitlist input:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.waitlist .hint{margin-top:9px;font-size:12px;color:var(--ink-muted)}

.waitlist-submit{margin-top:18px;width:100%;height:52px;border-radius:var(--r-card);
  background:linear-gradient(180deg,#f2f2f0,#d9d9d6);color:#111;
  font-family:var(--font-ui);font-weight:800;font-size:13px;letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.35);
  transition:transform .28s cubic-bezier(.3,1.5,.5,1),box-shadow .28s ease,filter .2s ease}
.waitlist-submit:active{transform:scale(.965);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.25),inset 0 -1px 0 rgba(255,255,255,.15)}
@media (hover:hover){.waitlist-submit:hover{filter:brightness(1.05)}}
.waitlist-submit[disabled]{opacity:.6;pointer-events:none}

/* ---------- submit dissolve: on a valid submit, the button crumbles to dust
   instead of just disabling — see motion.js's dissolveButton(). The button's
   own fill/label fade in place while a canvas layered just above it (sized
   with generous overflow so particles have room to drift) draws the dust. ---------- */
.submit-wrap{position:relative}
.submit-wrap .dust-canvas{position:absolute;left:-25%;right:-25%;top:-90%;bottom:-90%;width:150%;height:280%;pointer-events:none;z-index:2}
.waitlist-submit .btn-label{display:block;transition:opacity .3s ease}
.waitlist-submit.is-dissolving{pointer-events:none;box-shadow:none;transition:background .55s ease .05s,box-shadow .3s ease}
.waitlist-submit.is-dissolving{background:transparent}
.waitlist-submit.is-dissolving .btn-label{opacity:0}

/* ---------- invalid field: a quick, small shake — not a colour change (this register stays monochrome) ---------- */
@keyframes field-shake{
  10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)}
}
.waitlist input.is-invalid{animation:field-shake .45s ease}

.waitlist-status{margin-top:14px;text-align:center;font-size:12px;color:var(--ink-dim);min-height:1.2em}
.waitlist-status.is-ok{color:var(--ink)}

.demo-note{margin-top:10px;text-align:center;font-size:12px;color:var(--ink-dim)}

@media (max-width:380px){
  .card{padding:48px 20px}
}

/* ==========================================================================
   Legacy / optional layer — the louder nightlife-teaser register (neon
   green, tag-pill cloud with fall physics, ink-flood buttons). Nothing
   above uses any of this; opt in per-page by using these classes.
   ========================================================================== */
:root{
  --green:     #39FF6A;
  --green-ink: #070707;
  --green-soft: rgba(57,255,106,.14);
  --tag-pink:  #FF3DAE;
  --tag-cyan:  #35E7E0;
  --tag-blue:  #4D7CFF;
  --tag-grey:  #C9C9C4;
}

.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column}
.hero::before{
  content:"";position:absolute;left:50%;top:8%;width:min(900px,140vw);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,var(--green-soft) 0%,transparent 65%);pointer-events:none;z-index:0}

.spark-field{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='%23fff'%3E%3Cpath d='M40 20l4 16 16 4-16 4-4 16-4-16-16-4 16-4z'/%3E%3Cpath d='M220 140l3 12 12 3-12 3-3 12-3-12-12-3 12-3z'/%3E%3Cpath d='M110 220l5 18 18 5-18 5-5 18-5-18-18-5 18-5z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:300px 300px}

.topbar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:26px clamp(20px,4vw,48px)}
.brandmark{display:flex;align-items:center;gap:10px}
.brandmark .eye{width:46px;height:22px;color:var(--green)}
.brandmark span{font-family:var(--font-display);font-size:15px;letter-spacing:.02em}
.rsvp-btn{height:44px;padding:0 22px;border-radius:var(--r-pill);border:1.5px solid var(--line);font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:.03em}

.hero-body{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px clamp(20px,6vw,48px) 40px}
.hero-mark{width:min(220px,46vw);color:var(--green);margin-bottom:18px;position:relative;display:inline-block}
.hero-mark .eye,.hero-mark .spark{display:block;width:100%}
.hero-mark .spark{position:absolute;inset:0}
.eyebrow{font-family:var(--font-ui);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted)}
.hero h1{font-family:var(--font-display);font-size:clamp(40px,10vw,108px);line-height:.94;letter-spacing:-.01em;margin-top:14px;text-transform:uppercase}
.hero h1 em{font-style:normal;color:var(--green)}
.hero-sub{margin-top:18px;max-width:46ch;color:var(--ink-muted);font-size:clamp(15px,2vw,18px);line-height:1.5}
.event-line{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:center;font-family:var(--font-ui);font-weight:600;font-size:14px}
.event-line .sep{color:var(--ink-muted)}
.event-line .ic{color:var(--green)}

.cta-row{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 30px;
  border-radius:var(--r-pill);background:var(--green);color:var(--green-ink);font-family:var(--font-ui);font-weight:700;font-size:16px}
.cta-note{font-size:12.5px;color:var(--ink-muted)}

.signup{position:relative;z-index:2;width:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.signup[hidden]{display:none}
.signup-field{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:10px;height:58px;padding:0 8px 0 22px;
  border-radius:var(--r-pill);background:var(--bg-2);border:1.5px solid var(--line)}
.signup-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;color:var(--ink);font:15px/1 var(--font-ui);outline:0}
.signup-field input::placeholder{color:var(--ink-muted)}
.signup-field:focus-within{border-color:var(--green)}
.signup-submit{flex:none;height:44px;padding:0 22px;border-radius:var(--r-pill);background:var(--green);color:var(--green-ink);font-family:var(--font-ui);font-weight:700;font-size:14px}
.signup-status{font-size:13px;color:var(--ink-muted);min-height:1.2em}
.signup-status.is-ok{color:var(--green)}

.pill-cloud{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 10px;padding:46px clamp(16px,4vw,48px) 10px;max-width:1100px;margin:0 auto}
.tag-pill{position:relative;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:14px;letter-spacing:.01em;text-transform:uppercase;color:var(--green-ink);
  background:var(--tag,var(--green));transform:rotate(var(--rot,0deg));white-space:nowrap}
.tag-pill.is-icon{width:46px;height:46px;padding:0;justify-content:center}
.tag-pill.is-icon .ic{width:20px;height:20px;color:var(--green-ink)}
.tag-pill--pink{--tag:var(--tag-pink)}
.tag-pill--cyan{--tag:var(--tag-cyan)}
.tag-pill--blue{--tag:var(--tag-blue);color:#fff}
.tag-pill--grey{--tag:var(--tag-grey)}
.tag-pill--dark{--tag:var(--bg-2);color:var(--ink);border:1.5px solid var(--line)}

.footer{position:relative;z-index:2;padding:36px clamp(20px,4vw,48px) 44px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  align-items:center;color:var(--ink-muted);font-size:12.5px;border-top:1px solid var(--line);margin-top:20px}
.footer a{color:var(--ink)}

@media (max-width:560px){
  .topbar{padding:20px 18px}
  .hero-body{padding-top:8px}
  .tag-pill{height:42px;padding:0 18px;font-size:12.5px}
}

.hero.has-photo{background-size:cover;background-position:center}
.hero.has-photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(60% 58% at 50% 40%, rgba(7,7,7,.72) 0%, rgba(7,7,7,.4) 58%, transparent 85%),
    linear-gradient(180deg,rgba(7,7,7,.8) 0%,rgba(7,7,7,.3) 20%,rgba(7,7,7,.4) 55%,rgba(7,7,7,.88) 82%,var(--bg) 100%)}

.poster-frame{position:relative;margin:22px auto 26px;width:min(80vw,340px);border-radius:8px;overflow:hidden;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.08),0 0 60px -10px var(--green-soft)}
.poster-frame img{display:block;width:100%;height:auto}

.credit-line{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:600;
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-muted)}
.credit-line .mark{width:15px;height:auto;color:var(--ink)}

.eyebrow.bracket::before{content:"[ "}
.eyebrow.bracket::after{content:" ]"}