/* ------------------------------------------------------------------ tokens */

:root {
  --cream: #f7f1e6;
  --cream-2: #efe6d6;
  --paper: #fffcf6;
  --ink: #1d1611;
  --ink-2: #4f4439;
  --ink-3: #85786a;
  --line: rgba(29, 22, 17, .12);
  --line-strong: rgba(29, 22, 17, .22);
  --plum: #2a1330;
  --berry: #a3004f;
  --berry-2: #7f003d;
  --violet: #5b2aa8;
  --gold: #b88a3e;
  --error: #a3231a;
  --error-bg: #fbe9e6;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 22px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60rem 40rem at 110% -10%, rgba(163, 0, 79, .09), transparent 60%),
    radial-gradient(50rem 36rem at -15% 110%, rgba(91, 42, 168, .08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--cream);
  background-size: auto, auto, 160px 160px, auto;
}

/* The third background layer above is a whisper of paper grain, so the cream
   doesn't read as flat screen colour. */

a { color: var(--berry); text-underline-offset: 3px; }
a:hover { color: var(--berry-2); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }

em { font-style: italic; }

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* ------------------------------------------------------------------ topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  font: 500 1.05rem/1 var(--serif);
  letter-spacing: -.01em;
}

.wordmark em { color: var(--berry); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255, 252, 246, .6);
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--berry);
  box-shadow: 0 0 0 0 rgba(163, 0, 79, .5);
  animation: pulse 2.4s var(--ease) infinite;
}

@keyframes pulse {
  70% { box-shadow: 0 0 0 8px rgba(163, 0, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(163, 0, 79, 0); }
}

/* ------------------------------------------------------------------- stage */

.stage {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding: 40px 0 56px;
}

@media (min-width: 940px) {
  .stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(48px, 7vw, 96px);
    padding: 64px 0 72px;
  }
}

/* ------------------------------------------------------------------- intro */

.intro { text-align: center; }

@media (min-width: 940px) { .intro { text-align: left; } }

.logo-plate {
  display: inline-block;
  margin-bottom: 30px;
}

.logo {
  display: block;
  width: clamp(190px, 46vw, 250px);
  height: auto;
}

/* ------------------------------------------------------------- 3D logo --- */
/*
  Three layers, so their motions don't fight:
    .logo-plate  entrance animation (rise)
    .logo-float  slow bob up and down
    .logo-3d     tilt — follows the pointer (app.js sets --tx/--ty), or sways
                 by itself on touch screens
  The sheen is a highlight masked to the logo's own shape, so the light only
  ever lands on the artwork, never on the empty corners of the image.
*/

/* Registered so the highlight can glide between positions in @keyframes. */
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 30%; }

.logo-plate { perspective: 900px; }

.logo-float { transform-style: preserve-3d; }

.logo-3d {
  /* --tx/--ty: where the pointer is, from -1 to 1 on each axis (app.js). */
  --tx: 0;
  --ty: 0;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(calc(var(--ty) * -10deg)) rotateY(calc(var(--tx) * 14deg));
  transition: transform .6s var(--ease);
  will-change: transform;
}

.logo-3d.is-tracking { transition: transform .12s linear; }

.logo-3d .logo {
  /* The shadow shifts opposite the tilt, as if lit from above-front. */
  filter:
    drop-shadow(calc(var(--tx) * -14px) calc(18px + var(--ty) * -8px) 22px rgba(42, 19, 48, .22))
    drop-shadow(0 4px 6px rgba(42, 19, 48, .12));
  transform: translateZ(30px);
}

.sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateZ(31px);
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 38%);
  mix-blend-mode: soft-light;
  -webkit-mask: url("/logo.webp") center / 100% 100% no-repeat;
  mask: url("/logo.webp") center / 100% 100% no-repeat;
  opacity: .9;
}

@media (prefers-reduced-motion: no-preference) {
  .logo-float { animation: bob 6s ease-in-out infinite; }

  /* No mouse to follow on phones and tablets: a slow, gentle sway instead. */
  @media (hover: none) {
    .logo-3d { animation: sway 9s ease-in-out infinite; }
    .sheen { animation: glint 9s ease-in-out infinite; }
  }

  @keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
  @keyframes sway {
    0%, 100% { transform: rotateX(4deg) rotateY(-10deg); }
    50% { transform: rotateX(-3deg) rotateY(10deg); }
  }
  @keyframes glint {
    0%, 100% { --mx: 22%; --my: 22%; opacity: .6; }
    50% { --mx: 78%; --my: 40%; opacity: 1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-3d { transform: none !important; }
  .sheen { display: none; }
}

.eyebrow {
  margin: 0 0 14px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--gold);
}

h1, h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  letter-spacing: -.025em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 8.5vw, 5.1rem);
  line-height: 1.02;
}

h1 em, .card-title em {
  font-weight: 400;
  color: var(--berry);
}

.lede {
  max-width: 30rem;
  margin: 22px auto 0;
  font-size: clamp(1.08rem, 2.4vw, 1.25rem);
  color: var(--ink-2);
  text-wrap: balance;
}

@media (min-width: 940px) { .lede { margin-left: 0; } }

.steps {
  display: none;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  max-width: 28rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 940px) { .steps { display: block; } }

.steps li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: .98rem;
}

.num {
  font: 500 .8rem/1 var(--serif);
  color: var(--gold);
  letter-spacing: .06em;
}

/* -------------------------------------------------------------------- card */

.card {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 2px 4px rgba(29, 22, 17, .04),
    0 30px 60px -30px rgba(42, 19, 48, .35);
}

.card-head {
  padding: 30px 32px 24px;
  border-radius: var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(163, 0, 79, .22), transparent 55%),
    linear-gradient(160deg, #3a1a43, var(--plum));
  color: #fbf3ea;
}

.card-kicker {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #e6c78f;
}

.card-title {
  font-size: clamp(1.7rem, 5vw, 2.1rem);
  line-height: 1.1;
  color: #fff8ef;
}

.card-title em { color: #ff8cc6; }

/* Perforation between the ticket stub and the form. */
.perf {
  position: relative;
  height: 0;
  border-top: 2px dashed var(--line-strong);
  margin: 0 22px;
}

.perf::before, .perf::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--line);
}

.perf::before { left: -35px; }
.perf::after { right: -35px; }

.join, .thanks { padding: 26px 32px 30px; }

@media (max-width: 420px) {
  .card-head { padding: 26px 22px 20px; }
  .join, .thanks { padding: 22px 22px 26px; }
  .perf { margin: 0 12px; }
  .perf::before { left: -25px; }
  .perf::after { right: -25px; }
}

/* ------------------------------------------------------------------ fields */

.field { display: block; margin: 0 0 16px; }

.label {
  display: block;
  margin-bottom: 7px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

input[type="text"], input[type="email"], input[type="tel"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font: 400 1.02rem/1.3 var(--sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}

input::placeholder { color: #b3a797; }

input:hover { border-color: rgba(29, 22, 17, .35); }

input:focus {
  outline: none;
  border-color: var(--violet);
  box-shadow: 0 0 0 4px rgba(91, 42, 168, .13);
}

input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: 0 0 0 4px rgba(163, 35, 26, .1);
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------ button */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin-top: 8px;
  padding: 14px 22px;
  font: 600 1.02rem/1.2 var(--sans);
  letter-spacing: .01em;
  color: #fff;
  background: linear-gradient(180deg, #b8005a, var(--berry));
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 12px 24px -12px rgba(163, 0, 79, .7);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}

.btn:hover {
  background: linear-gradient(180deg, #a60052, var(--berry-2));
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 18px 30px -14px rgba(163, 0, 79, .75);
}

.btn:active { transform: translateY(0); }

.btn-arrow { width: 20px; height: 20px; transition: transform .3s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn[disabled] { cursor: progress; opacity: .8; transform: none; }
.btn.is-loading .btn-arrow { opacity: 0; }

/* ---------------------------------------------------------------- messages */

.message {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .94rem;
}

.message:empty { display: none; }
.message.error { background: var(--error-bg); color: var(--error); }
.message.info { background: var(--cream-2); color: var(--ink); }

.fine-print {
  margin: 16px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-3);
  text-align: center;
}

/* ------------------------------------------------------------------ thanks */

.thanks { text-align: center; padding-top: 34px; padding-bottom: 38px; }
.thanks:focus { outline: none; }

.check {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: block;
  color: var(--berry);
}

.thanks h2 { font-size: 2rem; line-height: 1.1; }

.thanks p {
  margin: 12px 0 0;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: no-preference) {
  .intro > *, .card { animation: rise .9s var(--ease) both; }
  .intro > :nth-child(2) { animation-delay: .06s; }
  .intro > :nth-child(3) { animation-delay: .12s; }
  .intro > :nth-child(4) { animation-delay: .18s; }
  .intro > :nth-child(5) { animation-delay: .24s; }
  .card { animation-delay: .2s; }

  .thanks.enter { animation: rise .7s var(--ease) both; }
  .thanks.enter .check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .8s var(--ease) .1s forwards; }
  .thanks.enter .check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s var(--ease) .6s forwards; }

  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
}

/* ------------------------------------------------------------------ footer */

.footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0 28px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--ink-3);
}

/* ------------------------------------------------- thanks.html / 404.html */

.simple {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 56px 0;
  text-align: center;
}

.simple .card { padding: 40px 32px; }
.simple .logo { margin: 0 auto 26px; width: 150px; }
.simple h1 { font-size: clamp(2rem, 6vw, 2.6rem); }
.simple p { margin: 12px 0 0; color: var(--ink-2); }

[hidden] { display: none !important; }