/* Party invite page. Look: near-black with gold, Limelight display type, thin Poppins body. */

:root {
  --ink: #070c0d;
  --paper: #fff;
  --gold: #a87e2b;
  --gold-bright: #c9a04c;
  --ghost: #3a3838;
  --muted: #b4bcbd;
  --line: rgba(255, 255, 255, .16);
  --display: "Limelight", "Bodoni 72", Didot, serif;
  --body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pad: clamp(20px, 5.5vw, 72px);
  --wide: 1180px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 300 1.0625rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 20;
  padding: 10px 14px; background: var(--paper); color: var(--ink); font-weight: 600;
}
.skip-link:focus { top: 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 26px;
  border: 2px solid var(--gold); background: transparent; color: var(--paper);
  font: 600 .9375rem/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase;
  text-align: center; text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.btn--solid { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink); }
.btn--solid:hover { background: var(--paper); border-color: var(--paper); }
/* RSVP link not connected yet: dimmed, and it does not react */
.btn.is-pending, .btn.is-pending:hover {
  background: var(--gold-bright); border-color: var(--gold-bright); color: var(--ink);
  opacity: .55; cursor: not-allowed;
}

.rsvp-note { color: var(--muted); font-size: .875rem; }

/* Hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: clamp(28px, 6vw, 56px) var(--pad);
}
/* Two hero backgrounds, chosen with hero.style in config.js.
   "photo" (the default): the bar photo under a dark wash that deepens to the page colour.
   "burst": no photo, a gold glow and the line burst below. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(rgba(7, 12, 13, .58), rgba(7, 12, 13, .66) 48%, rgba(7, 12, 13, .9) 82%, var(--ink)),
    url("img/hero-bar-phone.webp") 50% 0 / cover no-repeat;
  animation: fade-in 1.4s ease-out both;
}
.hero--burst::before {
  background: radial-gradient(70% 48% at 50% 42%, rgba(168, 126, 43, .26), transparent 72%);
}
/* Focus lines: a manga speed-line burst that is also an art-deco sunburst */
.hero__burst { display: none; }
.hero--burst .hero__burst {
  display: block;
  position: absolute; inset: -10%; z-index: -1;
  background:
    repeating-conic-gradient(from 3deg at 50% 44%, rgba(201, 160, 76, .20) 0 .45deg, transparent .45deg 7deg),
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(201, 160, 76, .11) 0 1.1deg, transparent 1.1deg 11deg);
  -webkit-mask-image: radial-gradient(72% 58% at 50% 44%, transparent 24%, #000 66%, transparent 100%);
  mask-image: radial-gradient(72% 58% at 50% 44%, transparent 24%, #000 66%, transparent 100%);
  animation: burst-in 1.5s ease-out both;
}
.hero__inner { width: 100%; max-width: var(--wide); margin: 0 auto; }

.hero__presenter {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: clamp(18px, 4vw, 36px);
  color: var(--muted); font-size: .9375rem; font-weight: 400;
  animation: fade-in .8s ease-out .1s both;
}
.hero__presenter::before { content: ""; width: 32px; height: 2px; background: var(--gold); }
.hero__presenter b { color: var(--paper); font-weight: 600; }

.hero__title {
  display: grid;
  font: 400 clamp(3.5rem, min(19.5vw, 21vh), 12.5rem)/.98 var(--display);
  perspective: 900px;
}
.hero__word {
  display: block; transform-origin: 50% 100%;
  animation: flip-up .95s cubic-bezier(.2, .75, .25, 1) both;
}
.hero__word:nth-child(3n+1) { justify-self: start; }
.hero__word:nth-child(3n+2) { justify-self: center; }
.hero__word:nth-child(3n) { justify-self: end; }
/* Two big words: left, then right */
.hero__title[data-words="2"] .hero__word:nth-child(2) { justify-self: end; }
/* The smaller line under the big words */
.hero__sub {
  display: flex; flex-wrap: wrap; column-gap: .55em; justify-self: start;
  margin-top: clamp(16px, 2.4vw, 26px);
  font-size: clamp(1.5rem, 6.3vw, 3rem); line-height: 1.16;
  animation: fade-in .8s ease-out .8s both;
}
.hero__place { color: var(--gold-bright); }
.hero__word:nth-child(1) { animation-delay: .2s; }
.hero__word:nth-child(2) { animation-delay: .38s; }
.hero__word:nth-child(3) { animation-delay: .56s; }
.hero__word:nth-child(n+4) { animation-delay: .74s; }

.hero__details {
  display: grid; gap: 14px;
  margin-top: clamp(28px, 6vw, 44px);
  animation: fade-in .8s ease-out 1.2s both;
}
.hero__tagline { max-width: 34ch; font-size: clamp(1.125rem, 4.4vw, 1.5rem); font-weight: 300; line-height: 1.35; }
.hero--burst .hero__tagline { font-weight: 200; }
/* Gold rules between the facts. Each rule sits in a negative margin, so a fact that wraps to
   the start of a new line has its rule clipped away instead of leading the line. The row is
   30px wider than its text on the right, on purpose: that absorbs the last fact's spacing so
   it doesn't wrap early. The hero clips the extra, so the page never scrolls sideways. */
.hero__facts { display: flex; flex-wrap: wrap; row-gap: 6px; overflow: hidden; margin-right: -30px; font-weight: 400; }
.hero__facts span { margin: 0 30px 0 -16px; padding-left: 14px; border-left: 2px solid var(--gold); }
.hero__actions { display: grid; gap: 12px; margin-top: 8px; }
/* "Hosted at Krush" sits directly above the Google Maps button */
.hero__venue { display: grid; gap: 8px; }
.hero__hosted { font-weight: 400; }
.hero__hosted b { font-weight: 600; }

/* Sections */
.section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(64px, 11vw, 132px) var(--pad); }
.section__inner { max-width: var(--wide); margin: 0 auto; }
.section__head { position: relative; padding-top: clamp(2.4rem, 10vw, 5rem); margin-bottom: clamp(28px, 5vw, 56px); }
.section__head h2 { font: 400 clamp(1.9rem, 7vw, 2.8rem)/1.15 var(--display); }
.ghost {
  position: absolute; left: -.04em; top: 0; z-index: -1;
  color: var(--ghost); font: 400 clamp(4.75rem, 25vw, 10.5rem)/.82 var(--display);
  white-space: nowrap; user-select: none;
}

/* Prize */
.prize { display: grid; gap: 28px; align-items: center; }
.prize__shot { position: relative; justify-self: center; width: min(82%, 500px); }
.prize__shot::before {
  content: ""; position: absolute; inset: -14%; z-index: -1;
  background: radial-gradient(closest-side, rgba(201, 160, 76, .34), transparent);
}
.prize__shot img { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .65)); }
.prize__text { display: grid; gap: 12px; justify-items: start; }
/* Product name is set in the body face: Limelight's G reads as a C in "TCG" */
.prize__name { max-width: 22ch; font: 600 clamp(1.4rem, 5.4vw, 2rem)/1.22 var(--body); }
.prize__value { color: var(--gold-bright); font-size: 1.1875rem; font-weight: 600; }
.prize__entry { max-width: 44ch; }
.prize__text .btn { margin-top: 10px; }

.inside { display: grid; gap: 28px; margin-top: clamp(48px, 8vw, 96px); }
.inside__card { padding: clamp(8px, 2vw, 16px); background: var(--paper); border: 2px solid var(--gold); }
.inside__card img { width: 100%; }
.inside__list h3 { margin-bottom: 14px; font: 400 1.75rem/1.2 var(--display); }
.inside__list ul { list-style: none; padding: 2px 0 2px 20px; border-left: 2px solid var(--gold); }
.inside__list li { padding: 5px 0; }

/* What to expect */
.expect { display: grid; gap: 32px; }
.card { padding: 2px 0 2px 20px; border-left: 2px solid var(--gold); }
.card h3 { margin-bottom: 8px; font: 400 1.75rem/1.2 var(--display); }
.card p { max-width: 36ch; font-size: 1.125rem; }

/* When, where, how much */
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.fact { display: grid; gap: 10px; justify-items: start; align-content: start; min-width: 0; }
.fact__big { max-width: 100%; color: var(--gold-bright); font: 400 clamp(3.4rem, 15vw, 4.75rem)/1 var(--display); overflow-wrap: anywhere; }
/* A date typed as plain words can be long: set it smaller so it wraps instead of running off the screen */
.fact__big--text { font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.1; }
.fact__label { max-width: 30ch; font-size: 1.125rem; }
.fact__label--lead { font-size: 1.3125rem; font-weight: 600; }
.fact__note { max-width: 34ch; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 1rem; }
.fact .btn { margin-top: 8px; }

/* FAQ */
.faq { max-width: 760px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative; list-style: none; cursor: pointer;
  padding: 18px 48px 18px 0; font-size: 1.125rem; font-weight: 400;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  color: var(--gold-bright); font: 300 1.75rem/1 var(--body);
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { max-width: 60ch; padding: 0 0 20px; color: var(--muted); }

/* Footer */
.footer {
  display: grid; gap: 14px;
  --side: max(var(--pad), calc((100% - var(--wide)) / 2));
  padding: clamp(40px, 7vw, 72px) var(--side) calc(clamp(40px, 7vw, 72px) + 84px);
  border-top: 1px solid var(--line);
}
.footer__presenter { font: 400 1.5rem/1.2 var(--display); }
.footer__small { max-width: 78ch; color: var(--muted); font-size: .8125rem; }

/* Phone-only RSVP bar */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background: rgba(7, 12, 13, .95); border-top: 1px solid var(--line);
  transform: translateY(110%); visibility: hidden;
  transition: transform .3s ease, visibility .3s;
}
.sticky-cta.is-visible { transform: none; visibility: visible; }
.sticky-cta__price { max-width: 7.5em; font-size: .875rem; font-weight: 400; line-height: 1.25; }
.sticky-cta .btn { min-height: 48px; padding: 10px 16px; font-size: .8125rem; }

.notice { margin: 0; padding: 16px var(--pad); background: var(--paper); color: var(--ink); font-weight: 400; }

/* Tablet and up */
@media (min-width: 600px) {
  .hero__actions { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .expect { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px 28px; }
}

@media (min-width: 768px) {
  .hero:not(.hero--burst)::before {
    background:
      linear-gradient(rgba(7, 12, 13, .58), rgba(7, 12, 13, .66) 48%, rgba(7, 12, 13, .9) 82%, var(--ink)),
      url("img/hero-bar.webp") 50% 30% / cover no-repeat;
  }
  .sticky-cta { display: none; }
  .footer { padding-bottom: clamp(40px, 7vw, 72px); }
}

/* Laptop */
@media (min-width: 900px) {
  /* Laptop browser windows are short: size the title by height so the RSVP button stays on screen */
  .hero__title { font-size: clamp(3.5rem, min(19.5vw, 18vh), 12.5rem); }
  .hero__details { grid-template-columns: 1fr auto; column-gap: 48px; align-items: end; }
  .hero__tagline { grid-column: 1; grid-row: 1; }
  .hero__facts { grid-column: 1; grid-row: 2; }
  .hero__actions { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .rsvp-note { grid-column: 2; grid-row: 3; }
  .prize { grid-template-columns: 1.05fr 1fr; gap: 56px; }
  .inside { grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .fact { padding-left: 24px; border-left: 2px solid var(--gold); }
}

/* Motion */
@keyframes flip-up {
  from { opacity: 0; transform: translateY(100%) rotateX(-80deg); }
  to { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes burst-in {
  from { opacity: 0; transform: scale(.86); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before, .hero__burst, .hero__presenter, .hero__word, .hero__sub, .hero__details { animation: none; }
  .btn, .sticky-cta { transition: none; }
}