/* Fly Grounds ticket page. Same palette and type as the booth kiosk (src/index.css): the client's
   blurred city at night behind frosted panels, mist text, HOKA lime only on the thing to press, and
   the client's typeface for headings. The ticket is the one bold object: a stub in the sleeve's
   own paper colour, its notches cut right through to the city behind. */

@font-face { font-family: "TheFutureHOKA"; src: url("/fonts/TheFutureHOKA-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/fonts/libre-franklin-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/fonts/libre-franklin-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/fonts/libre-franklin-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --night: #1a2030;
  --night-soft: #262f45;
  --mist: #edf2f7;
  --volt: #dcf05a;
  --glow: #a9bdf7;
  --sky: #7f9cf0;
  --alert: #f4a3b6;
  --font-display: "TheFutureHOKA", "Arial Black", "Helvetica Neue", sans-serif;
  --font-body: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}

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

html { background: var(--night); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--night);
  background-image:
    linear-gradient(180deg, rgb(26 32 48 / 0.5) 0%, rgb(26 32 48 / 0.82) 70%),
    url("/brand/night.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Identity bar: the same HOKA mark the kiosk header carries. */
.bar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3.75rem;
  padding: 0 max(1rem, env(safe-area-inset-left));
  border-bottom: 1px solid rgb(237 242 247 / 0.14);
}
.bar img { height: 1.05rem; width: auto; display: block; }

/* The wordmark is the page's headline image; the h1 below it says what to do here. */
.poster {
  padding: 2.5rem 1.25rem 1.75rem;
  text-align: center;
}
.poster > * { max-width: 30rem; margin-inline: auto; }
.wordmark { display: block; width: min(19rem, 82%); height: auto; margin-bottom: 2rem; }

h1 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.1rem, 9.5vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--mist);
  overflow-wrap: anywhere;
}
h1:focus { outline: none; }
#lede { margin: 0 auto; font-size: 1.0625rem; font-weight: 600; max-width: 22rem; color: rgb(237 242 247 / 0.78); }

main { padding: 0 1rem 3.5rem; }

/* Frosted glass over the city, the kiosk's fog panel. */
.panel {
  max-width: 30rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.6rem;
  background: rgb(237 242 247 / 0.07);
  border: 1px solid rgb(237 242 247 / 0.16);
  border-radius: 28px;
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 24px 50px -28px rgb(5 8 16 / 0.9);
}

.field { margin-bottom: 1.1rem; }
label { font-weight: 800; }
.field label { display: block; margin-bottom: 0.4rem; font-size: 0.95rem; }

input[type="text"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1.125rem; /* 16px minimum keeps iOS from zooming the page on focus */
  color: var(--mist);
  background: rgb(26 32 48 / 0.65);
  border: 1px solid rgb(237 242 247 / 0.22);
  border-radius: 16px;
  appearance: none;
  transition: border-color 120ms;
}
input[type="text"]::placeholder { color: rgb(237 242 247 / 0.35); }
input[type="text"]:focus { border-color: var(--glow); }
input[aria-invalid="true"] { border-color: var(--alert); }

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

.error {
  margin: 0 0 1rem;
  color: var(--alert);
  font-weight: 800;
  font-size: 0.95rem;
}

/* Primary action: HOKA lime, the only lime on the page. */
.cta {
  width: 100%;
  margin-top: 0.4rem;
  padding: 1.05rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--night);
  background: var(--volt);
  border: 0;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px rgb(220 240 90 / 0.45), 0 14px 36px -12px rgb(220 240 90 / 0.45);
  cursor: pointer;
  transition: transform 120ms ease-out, opacity 120ms;
}
.cta:active { transform: scale(0.985); }
.cta:disabled { opacity: 0.6; cursor: progress; }
.cta:focus-visible { outline-color: var(--mist); }

.quiet {
  display: block;
  margin: 1.4rem auto 0;
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--mist);
  background: rgb(237 242 247 / 0.08);
  border: 1px solid rgb(237 242 247 / 0.2);
  border-radius: 9999px;
  cursor: pointer;
}

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

/* ---- The ticket ---------------------------------------------------------------------------- */

#screen-ticket { max-width: 23rem; margin: 0 auto; position: relative; }

/* Two halves of one stub in the sleeve's paper colour. Each half has its two corners at the tear
   line masked away as half-circles, so the notches are real holes showing the city through. */
.ticket {
  position: relative;
  color: var(--night);
  filter: drop-shadow(0 26px 40px rgb(5 8 16 / 0.6));
}
.ticket-top,
.ticket-bottom {
  background: var(--mist);
  text-align: center;
  --notch: 15px;
}
.ticket-top {
  padding: 1.6rem 1.25rem 1.4rem;
  border-radius: 26px 26px 0 0;
  -webkit-mask:
    radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
}
.ticket-bottom {
  padding: 1.25rem 1.25rem 1.6rem;
  border-radius: 0 0 26px 26px;
  -webkit-mask:
    radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
  mask:
    radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
}

.ticket-brand { display: block; height: 0.85rem; width: auto; margin: 0 auto 1.1rem; opacity: 0.85; }
.ticket-name {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.85rem;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.ticket-qr {
  display: block;
  width: min(13.5rem, 100%);
  height: auto;
  margin: 0 auto;
  aspect-ratio: 1;
}

/* The tear line: a strip of stub between the two notches, dashed. Its ends stop where the notch
   holes begin, so the holes stay open. */
.perf {
  height: 2px;
  margin: 0 15px;
  background:
    linear-gradient(90deg, rgb(26 32 48 / 0.3) 50%, transparent 0) center / 12px 2px repeat-x,
    var(--mist);
}

.ticket-label { margin: 0 0 0.2rem; font-weight: 600; font-size: 0.95rem; color: rgb(26 32 48 / 0.7); }
.ticket-code {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.75rem, 14vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.12em;
  padding-left: 0.12em; /* balances the trailing letter-spacing so the digits sit centred */
  color: var(--night);
}

/* "Admit one": a lime tag pinned to the stub's top edge, so it never sits on a long name. */
.stamp {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  translate: -50% 0;
  padding: 0.3rem 0.9rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--night);
  background: var(--volt);
  border-radius: 9999px;
  white-space: nowrap;
  z-index: 2;
}

.howto { margin: 1.75rem 0 0; font-weight: 600; text-align: center; color: rgb(237 242 247 / 0.8); }
.howto.strong { margin-top: 0.6rem; font-weight: 800; color: var(--mist); }

/* ---- Motion -------------------------------------------------------------------------------- */

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
/* The ticket arrives the way a lens finds focus: from the backdrop's blur to sharp. */
@keyframes focus-in {
  from { opacity: 0; filter: blur(14px) drop-shadow(0 26px 40px rgb(5 8 16 / 0.6)); transform: scale(1.05); }
  to { opacity: 1; filter: blur(0) drop-shadow(0 26px 40px rgb(5 8 16 / 0.6)); transform: scale(1); }
}
.enter { animation: panel-in 420ms cubic-bezier(0.16, 0.8, 0.24, 1) both; }
#screen-ticket.enter { animation: none; }
#screen-ticket .ticket { animation: focus-in 560ms cubic-bezier(0.16, 0.8, 0.24, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .enter, #screen-ticket .ticket { animation: none; }
  .cta, input[type="text"] { transition: none; }
}

@media (min-width: 40rem) {
  .poster { padding-top: 3.5rem; }
  .panel { padding: 2rem 2rem 2.25rem; }
}