/* ────────────────────────────────────────────────────────────────
   TERMINAL HOURS — site styles
   Palette lifted straight from the app's Theme.swift.
   One viewport, no scroll: kicker, flap title, download button,
   and a slow conveyor of airport glyphs drifting behind it all.
   ──────────────────────────────────────────────────────────────── */

:root {
  --board:  #1C1F24;   /* Theme.board    */
  --tile:   #2A2E34;   /* Theme.flapTile */
  --cream:  #F2F0E6;   /* Theme.flapText */
  --yellow: #FFC42B;   /* Theme.yellow   */
  --ink-soft: rgba(242, 240, 230, 0.55);

  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --tile-size: clamp(32px, 7.4vw, 72px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 90% at 50% 0%,
      rgba(255, 196, 43, 0.05), transparent 62%),
    var(--board);
  color: var(--cream);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ── The drifting glyph conveyor ──────────────────────────────────
   One SVG tile (jet, bag, ticket, coffee, star) repeated on two
   layers moving at different depths. Each layer translates exactly
   one tile per loop, so the drift is seamless and endless. */

.drift {
  position: fixed;
  inset: -50% -50% -50% -50%;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 560'%3E%3Cg fill='%23F2F0E6' transform='translate(52,44) scale(0.62)'%3E%3Cpath d='M84 50 c0 -3 -4 -5 -9 -5 l-20 0 -22 -26 -8 0 12 26 -16 0 -6 -8 -6 0 4 13 -4 13 6 0 6 -8 16 0 -12 26 8 0 22 -26 20 0 c5 0 9 -2 9 -5 z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2F0E6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(404,72)'%3E%3Crect x='0' y='10' width='40' height='50' rx='8'/%3E%3Cpath d='M12 10 v-6 a8 8 0 0 1 16 0 v6'/%3E%3Cpath d='M10 22 v26 M30 22 v26'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2F0E6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(232,208)'%3E%3Cpath d='M8 0 h48 a8 8 0 0 1 8 8 v6 a9 9 0 0 0 0 18 v6 a8 8 0 0 1 -8 8 h-48 a8 8 0 0 1 -8 -8 v-6 a9 9 0 0 0 0 -18 v-6 a8 8 0 0 1 8 -8 z'/%3E%3Cpath d='M32 8 v4 M32 21 v4 M32 34 v4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2F0E6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(72,352)'%3E%3Cpath d='M0 0 h36 v14 a18 18 0 0 1 -36 0 z'/%3E%3Cpath d='M36 4 h7 a8 8 0 0 1 0 16 h-9'/%3E%3Cpath d='M-8 40 h52'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2F0E6' stroke-width='3' stroke-linecap='round' transform='translate(428,318)'%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3Cellipse cx='24' cy='24' rx='11' ry='24'/%3E%3Cpath d='M3 15 h42 M3 33 h42'/%3E%3C/g%3E%3Cg fill='none' stroke='%23F2F0E6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' transform='translate(238,462)'%3E%3Cpath d='M22 0 v44 M3 11 l38 22 M3 33 l38 -22'/%3E%3Cpath d='M16 7 l6 6 6 -6 M16 37 l6 -6 6 6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 560px 560px;
}

/* Distance reads as smaller and fainter, never bigger. */
.drift-far {
  opacity: 0.03;
  background-size: 380px 380px;
  background-position: 190px 95px;
  animation: drift-far 260s linear infinite;
}

.drift-near {
  opacity: 0.05;
  animation: drift-near 150s linear infinite;
}

/* Translate exactly one tile diagonally → a perfect loop. */
@keyframes drift-near { to { transform: translate3d(560px, -560px, 0); } }
@keyframes drift-far  { to { transform: translate3d(-380px, -380px, 0); } }

/* ── Hero ─────────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 1;
  height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 24px;
}

.kicker {
  font-size: clamp(10px, 1.4vw, 12px);
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(28px, 5vh, 52px);
}

.pa-chip {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--board);
  background: var(--yellow);
  border-radius: 5px;
  padding: 3px 7px;
}

/* ── Split-flap lettering ─────────────────────────────────────── */

.flap-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--tile-size) * 0.14);
  margin-bottom: clamp(36px, 7vh, 64px);
}

.flap-word {
  display: flex;
  gap: calc(var(--tile-size) * 0.10);
  justify-content: center;
}

.flap {
  position: relative;
  width: var(--tile-size);
  height: calc(var(--tile-size) * 1.28);
  background: var(--tile);
  border-radius: calc(var(--tile-size) * 0.14);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: calc(var(--tile-size) * 0.72);
  color: var(--cream);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  user-select: none;
}

/* The hinge every split-flap tile lives by. */
.flap::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.42);
}

.flap .glyph { display: block; }

.flap.flip .glyph { animation: flip 90ms linear; }

@keyframes flip {
  0%   { transform: rotateX(0deg); }
  49%  { transform: rotateX(-88deg); filter: brightness(0.72); }
  51%  { transform: rotateX(88deg);  filter: brightness(0.72); }
  100% { transform: rotateX(0deg); }
}

/* ── The button ───────────────────────────────────────────────── */

/* Scales with the viewport the same way the flap tiles do. */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--yellow);
  color: var(--board);
  text-decoration: none;
  border-radius: clamp(10px, 2.2vw, 18px);
  padding: clamp(9px, 2vw, 17px) clamp(18px, 5vw, 42px);
  box-shadow: 0 10px 30px rgba(255, 196, 43, 0.16), 0 3px 0 rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(255, 196, 43, 0.24), 0 5px 0 rgba(0, 0, 0, 0.35);
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}

.btn-label {
  font-weight: 800;
  font-size: clamp(10px, 2.2vw, 16px);
  letter-spacing: 0.22em;
}

.btn-sub {
  font-size: clamp(8px, 1.5vw, 10.5px);
  font-weight: 700;
  letter-spacing: 0.2em;
  opacity: 0.72;
}

/* ── Reduced motion: everything lands settled ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  .drift-near, .drift-far { animation: none; }
  .flap.flip .glyph { animation: none; }
  .btn { transition: none; }
}