:root {
  --juju-hot-pink: #FF5C9B;
  --juju-lime:     #AED634;
  --juju-cyan:     #33D7DA;
  --juju-orange:   #FF721C;
  --juju-navy:     #003576;
  --juju-gold:     #FAD901;
  --juju-midnight: #010E21;
  --juju-cream:    #FFF8EE;

  --maxw: 600px;
  --stage-w: 600px;     /* design width for the hero composition */

  --f-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --f-script:  'Pacifico', cursive;
  --f-sub:     'Big Shoulders Display', 'Arial Black', sans-serif;
  --f-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--juju-midnight);
  color: var(--juju-cream);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--juju-cyan); }

.kicker {
  font-family: var(--f-sub);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.kicker--pink { color: var(--juju-hot-pink); }
.kicker--cyan { color: var(--juju-cyan); }
.kicker--gold { color: var(--juju-gold); }
.kicker--lime { color: var(--juju-lime); }

/* ============================== HERO ============================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.hero-bg {
  position: absolute;
  inset: -10% -5%;            /* slight overscan so parallax never reveals edges */
  background:
    linear-gradient(180deg, rgba(1,14,33,0.0) 0%, rgba(1,14,33,0.0) 65%, rgba(1,14,33,0.55) 100%),
    url('/assets/bg.png') center / cover no-repeat,
    linear-gradient(180deg, #003576 0%, #33D7DA 35%, #FAD901 65%, #FF5C9B 100%);
  z-index: -3;
  will-change: transform;
}

.stars {
  position: absolute;
  inset: -10%;
  background-image:
    radial-gradient(2px 2px at 20px 30px,   #fff,     transparent),
    radial-gradient(2px 2px at 60px 180px,  #FAD901,  transparent),
    radial-gradient(1.5px 1.5px at 140px 60px, #fff,  transparent),
    radial-gradient(2px 2px at 100px 110px, #fff,     transparent),
    radial-gradient(1.5px 1.5px at 220px 150px, #33D7DA, transparent),
    radial-gradient(2px 2px at 290px 80px,  #fff,     transparent),
    radial-gradient(1.5px 1.5px at 350px 200px, #FFF8EE, transparent);
  background-size: 380px 240px;
  opacity: .55;
  z-index: -2;
  animation: twinkle 4s ease-in-out infinite;
  will-change: transform, opacity;
  pointer-events: none;
}
.stars.stars--2 {
  background-size: 540px 360px;
  opacity: .35;
  animation: twinkle 6s ease-in-out infinite reverse;
  z-index: -2;
}
@keyframes twinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: .8; }
}

/* The stage is a fixed-design-width composition that fills the hero viewport.
   The main column flows top→bottom; wayfinding and date-bubble flank it absolutely.
   Height is locked to 100svh so the flex column distributes across the full viewport
   and Rueben (pinned to the column bottom) hits the viewport edge regardless of how
   tall the window is. .hero's overflow:hidden then clips his negative margin-bottom. */
.stage {
  position: relative;
  width: min(100vw, var(--stage-w));
  height: 100svh;
}

/* Main column: 4 images, centered, top-to-bottom in order. */
.column {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 2% 0 0;
}

.layer, .side {
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.35));
  will-change: transform;
  max-width: 100%;
}

/* Note: layer widths are % of the column (which = stage width = 100vw on mobile,
   600px on desktop). PNGs are cropped tight to artwork — no transparent padding. */
.layer-invited {
  width: 64%;
  margin-bottom: 3%;   /* increases gap to logo & raises invited's effective position */
}
.layer-logo    { width: 100%; margin-top: 0; }
.layer-julie   { width: 86%; max-width: 75vw; filter: drop-shadow(0 6px 24px rgba(255,92,155,0.55)); }
.layer-rueben  {
  width: 108%;          /* extends past column so silhouette feels bigger */
  margin-bottom: -10%;  /* pushes Rueben past the viewport bottom; .hero overflow:hidden clips */
  filter: drop-shadow(0 18px 32px rgba(0,0,0,0.55))
          drop-shadow(0 0 26px rgba(255,114,28,0.35));
}

/* Side decorations: flank the viewport (desktop only). Promoted out of .stage
   so they hug the viewport edges rather than the 600px column. */
.side {
  position: absolute;
  z-index: 6;
}
.side-wayfind {
  left: 2vw;
  bottom: -8%;   /* anchored to viewport bottom; tail of the sign clips off */
  width: 14vw;
  max-width: 220px;
  min-width: 150px;
}
.side-date {
  right: 2vw;
  top: 26%;
  width: 13vw;
  max-width: 200px;
  min-width: 140px;
}

/* Mobile: hide the side decorations entirely. */
@media (max-width: 720px) {
  .side-wayfind, .side-date { display: none; }
}

/* Mobile-only date text (stands in for date-bubble.png), sits above the buy button. */
.hero-date-text { display: none; }
@media (max-width: 720px) {
  .hero-date-text {
    display: block;
    width: 100%;
    margin: 0 0 22px;   /* clears the button's pulsing glow shadow */
    font-family: var(--f-display);
    color: var(--juju-gold);
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: 1.5px;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    pointer-events: none;
  }
}

/* Buy button / countdown overlaid on top of Rueben at the bottom of the hero. */
.hero-buy {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 460px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  align-items: center;   /* forces date + button + caption into a centered column */
  text-align: center;
  z-index: 20;           /* above column (z:5) and side decorations (z:6) */
}
.hero-buy .tickets-when { margin-top: 10px; }
.hero-buy .countdown { margin-top: 12px; }

/* Mobile: a little extra breathing room at the top. */
@media (max-width: 720px) {
  .column {
    padding-top: 24px;
  }
}

/* When JS-driven parallax is active, it owns transforms — no CSS keyframe animation. */
.parallax-on .layer, .parallax-on .side { animation: none; }

/* ============================== SECTIONS ============================== */

.section {
  position: relative;
  padding: 70px 24px;
  text-align: center;
  max-width: var(--maxw);
  margin: 0 auto;
}

.btn-tickets {
  display: inline-block;
  font-family: var(--f-sub);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 38px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-tickets--live {
  background: var(--juju-gold);
  color: var(--juju-midnight);
  box-shadow: 0 8px 30px rgba(250,217,1,0.45), 0 0 0 4px rgba(250,217,1,0.12);
  animation: pulse-glow 2.6s ease-in-out infinite;
}
.btn-tickets--live:hover { transform: translateY(-2px) scale(1.02); }
.btn-tickets--locked {
  background: transparent;
  color: rgba(255,248,238,0.55);
  border: 2px solid rgba(255,248,238,0.25);
  cursor: not-allowed;
}
.btn-tickets--locked .lock { margin-right: 8px; opacity: .7; }
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 8px 30px rgba(250,217,1,0.40), 0 0 0 4px rgba(250,217,1,0.10); }
  50%     { box-shadow: 0 8px 38px rgba(250,217,1,0.70), 0 0 0 8px rgba(250,217,1,0.18); }
}

.tickets-when {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--juju-cyan);
  margin: 24px 0 14px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);   /* legibility over the hero artwork */
}

.countdown {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
  flex-wrap: wrap;
  max-width: 460px;
}
.cd-cell {
  background: rgba(0,53,118,0.55);
  border: 1px solid rgba(51,215,218,0.35);
  border-radius: 12px;
  padding: 14px 12px;
  min-width: 72px;
  backdrop-filter: blur(4px);
}
.cd-cell .n {
  font-family: var(--f-display);
  font-size: 38px;
  color: var(--juju-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-cell .l {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  opacity: .8;
  margin-top: 4px;
}

.claim-loading { opacity: .6; }

/* venue */
.section--venue {
  background: linear-gradient(180deg, #0a1c3d, #2b0f2b);
  max-width: 100%;
}
.venue-name {
  font-family: var(--f-script);
  font-size: 40px;
  color: var(--juju-hot-pink);
  margin: 0 0 8px;
  line-height: 1.1;
}
.venue-addr {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1.5px;
  color: var(--juju-cream);
  margin: 0 0 22px;
}
.venue-map {
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 22px;
  border: 2px solid var(--juju-cyan);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--juju-cyan);
  transition: background .15s, color .15s;
}
.venue-map:hover { background: var(--juju-cyan); color: var(--juju-midnight); }

/* footer */
.footer {
  background: var(--juju-midnight);
  text-align: center;
  padding: 36px 24px 48px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-logo { width: 120px; opacity: .55; margin: 0 auto 12px; display: block; }
.footer p {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  opacity: .6;
  margin: 0;
}

/* ============================== OVERLAY ============================== */

.overlay {
  position: fixed; inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: overlay-in .25s ease-out;
}
.overlay[hidden] { display: none; }
.overlay-bg {
  position: absolute; inset: 0;
  background: rgba(1,14,33,0.45);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.overlay-card {
  position: relative;
  background: linear-gradient(180deg, #0a1c3d 0%, var(--juju-midnight) 100%);
  border: 2px solid var(--juju-hot-pink);
  border-radius: 22px;
  padding: 36px 24px 28px;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,92,155,0.15);
  animation: card-in .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes card-in {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.overlay-close {
  position: absolute;
  top: 8px; right: 12px;
  background: transparent;
  border: 0;
  color: var(--juju-cream);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s;
}
.overlay-close:hover { opacity: 1; }
.overlay-title {
  font-family: var(--f-display);
  font-size: 32px;
  letter-spacing: 2px;
  color: var(--juju-gold);
  margin: 0 0 6px;
  line-height: 1;
}
.overlay-sub {
  color: var(--juju-cream);
  opacity: .75;
  margin: 0 0 22px;
  font-size: 14px;
}

/* ---- Ticket-selection step (step 1 of 2) ---- */
.overlay-logo {
  display: block;
  width: 220px;
  max-width: 70%;
  margin: 0 auto 16px;
}
.overlay-event { text-align: center; margin: 0 0 22px; }
.overlay-event-date {
  font-family: var(--f-display);
  font-size: 24px;
  letter-spacing: 1.5px;
  color: var(--juju-gold);
  margin: 0 0 4px;
  line-height: 1.05;
}
.overlay-event-venue {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--juju-cyan);
  margin: 0;
}

.ticket-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255,92,155,0.12);
  border: 2px solid var(--juju-hot-pink);
  border-radius: 14px;
  padding: 14px 18px;
  margin: 0 0 20px;
  box-shadow: 0 6px 20px rgba(255,92,155,0.18);
}
.ticket-option-tier {
  font-family: var(--f-display);
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--juju-gold);
  line-height: 1;
}
.ticket-option-note {
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--juju-cream);
  opacity: .7;
  text-align: right;
}

.qty-picker { margin: 0 0 22px; text-align: left; }
.qty-buttons { display: flex; gap: 10px; margin-top: 8px; }
.qty-btn {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(51,215,218,0.3);
  border-radius: 12px;
  padding: 14px 0;
  color: var(--juju-cream);
  font-family: var(--f-display);
  font-size: 24px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, transform .12s;
}
.qty-btn:hover { background: rgba(255,255,255,0.10); }
.qty-btn.is-active {
  background: rgba(255,92,155,0.18);
  border-color: var(--juju-hot-pink);
  color: var(--juju-gold);
}

/* form fields */
.field { display: block; margin: 0 0 16px; text-align: left; }
.field-label {
  display: block;
  font-family: var(--f-sub);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--juju-cyan);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field textarea {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--juju-cream);
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(51,215,218,0.3);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .15s, background .15s;
}
.field input:focus, .field textarea:focus {
  border-color: var(--juju-hot-pink);
  background: rgba(255,255,255,0.09);
}
.field textarea { resize: vertical; min-height: 56px; }

/* presale password — uppercase mono for visibility */
#pw-input {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-weight: 700;
  text-align: center;
  font-size: 18px;
}

.form-error {
  color: #ffb0b0;
  background: rgba(255,92,155,0.12);
  border: 1px solid rgba(255,92,155,0.35);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin: 0 0 12px;
}

.btn-primary {
  width: 100%;
  background: var(--juju-hot-pink);
  color: var(--juju-cream);
  font-family: var(--f-sub);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  border: 0;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(255,92,155,0.4);
  transition: transform .12s, background .12s;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { background: #555; cursor: not-allowed; box-shadow: none; }

.ticket-code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 28px;
  font-weight: 900;
  color: var(--juju-gold);
  letter-spacing: 3px;
  background: var(--juju-midnight);
  border: 2px dashed var(--juju-cyan);
  border-radius: 14px;
  padding: 18px;
  margin: 4px 0 16px;
}
.success-note {
  color: var(--juju-cream);
  opacity: .8;
  margin: 0 0 18px;
  font-size: 14px;
}

/* ============================== RESPONSIVE ============================== */
@media (min-width: 720px) {
  body { font-size: 18px; }
}

/* ============================== A11Y ============================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .layer { transform: translateY(0) !important; }
}