/* Page 0 (welcome). Background: variant A marquee, full-bleed spread.
   Exit: transition E (FLIP handoff -- the form animates the logo into place).
   Tokens come from tokens.css. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: 'Calibre', Inter, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;
  display: grid; place-items: center;
}

.marquee {
  position: fixed; top: 50%; left: 50%;
  width: 200vmax; height: 200vmax;
  transform: translate(-50%, -50%) rotate(-45deg);
  display: flex; flex-direction: column; justify-content: space-evenly;
  overflow: hidden; user-select: none; pointer-events: none;
}
.row {
  display: flex; width: max-content; will-change: transform;
  font-family: 'Bodoni Moda', Didot, serif;
  font-weight: 400;               /* 600 read too bold as outline */
  text-transform: uppercase; letter-spacing: .18em; line-height: 1.15;
  color: transparent;
  font-size: 1.5rem;                                   /* variant A */
  -webkit-text-stroke: .5px var(--stroke, var(--crust));
  animation: marq var(--t, 70s) linear infinite;
}
.row > span { white-space: nowrap; padding-right: .6em; }
@keyframes marq { to { transform: translateX(-50%); } }
.row.reverse { animation-direction: reverse; }
.sep {
  font-size: .55em; vertical-align: .28em; padding: 0 .55em;
  color: transparent; -webkit-text-stroke: .5px var(--stroke, var(--crust));
}

.hero {
  position: relative; z-index: 1; text-align: center;
  padding: 5rem 4rem;
  background: radial-gradient(closest-side, var(--paper) 55%, transparent);
}
/* Departure: text + button fade to make room; the LOGO is its own component
   and stays solid until navigation, so the form's FLIP clone picks it up
   with no blink. */
.hero p, .hero a, .marquee { transition: opacity .2s ease; }
body.leave .hero p,
body.leave .hero a,
body.leave .marquee { opacity: 0; }
.hero img {
  width: 140px; height: auto;              /* = form logo: FLIP ends at scale 1 */
  aspect-ratio: 129.645 / 140.258;         /* SVG intrinsic: layout never shifts on load */
}
.hero p { font-size: 1rem; color: var(--soft); margin: 1.2rem 0 2rem; }
.hero a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 2.2rem;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
  color: var(--paper); background: var(--ink);
  border-radius: var(--r); text-decoration: none;
  transition: opacity .15s;
}
.hero a:hover { opacity: .88; }

@media (prefers-reduced-motion: reduce) {
  .row { animation: none; }
  .hero p, .hero a, .marquee { transition: none; }
}