/* The site, from the app's tokens (tokens.css, generated by scripts/sync.mjs). Dark only, as the
   app is for now. One centered column at the screen padding, its parts appearing top-first. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-background);
  color: var(--color-text);
  font-family: "Barlow-Regular", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, p { margin: 0; font-weight: normal; }
img { display: block; }

.column {
  min-height: 100svh;
  max-width: 440px;
  margin: 0 auto;
  padding: max(var(--space-xxl), env(safe-area-inset-top)) max(var(--space-screen-padding), env(safe-area-inset-right))
    max(var(--space-xxl), env(safe-area-inset-bottom)) max(var(--space-screen-padding), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-section-gap);
  text-align: center;
}

/* appear: 8pt fade-up, 250ms ease-out, 40ms apart by order. */
.column > * { animation: appear 250ms ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes appear { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .column > * { animation-name: fade; }
  @keyframes fade { from { opacity: 0; } }
}

.crown { width: var(--size-header-crown); height: var(--size-header-crown); }
.crown-big { width: var(--size-splash-crown); height: var(--size-splash-crown); }

.logo { margin: 0; width: min(100%, 560px); }
.logo img { width: 100%; height: auto; }
.muted { color: var(--color-text-muted); }
.kicker { color: var(--color-accent-text); }
.stack { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.title { overflow-wrap: anywhere; }
.stack > * { text-wrap: balance; }

.cover {
  width: calc(var(--size-cover-row-width) * 1.6);
  height: calc(var(--size-cover-row-height) * 1.6);
  border-radius: var(--radius-lg);
  object-fit: cover;
  background: var(--color-surface);
}

/* The primary button (the app's TButton, molded plastic, lit from the top right): the outline,
   a ring light at the top right and dark at the bottom left, the face, a bevel 1pt inside it,
   and the label engraved. Pressed, the face darkens and the ring flips. */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(var(--size-control) + 2 * (var(--size-button-outline) + var(--size-button-ring)));
  padding: calc(var(--size-button-face-top) + var(--size-button-outline) + var(--size-button-ring)) var(--space-ml)
    calc(var(--size-button-face-bottom) + var(--size-button-outline) + var(--size-button-ring));
  border-radius: 999px;
  color: var(--color-on-accent);
  text-decoration: none;
  background:
    radial-gradient(farthest-side at 100% 0%, color-mix(in srgb, var(--color-button-primary-bevel-high) 60%, transparent), transparent 70%) padding-box,
    linear-gradient(var(--color-button-primary-face), var(--color-button-primary-face)) padding-box,
    linear-gradient(225deg, var(--color-button-primary-ring-high), var(--color-button-primary-ring-low)) border-box;
  border: var(--size-button-ring) solid transparent;
  box-shadow:
    0 0 0 var(--size-button-outline) var(--color-button-primary-outline),
    inset calc(-1 * var(--size-button-bevel-inset)) var(--size-button-bevel-inset) var(--size-button-bevel-inset) color-mix(in srgb, var(--color-button-primary-bevel-high) 70%, transparent),
    inset var(--size-button-bevel-inset) calc(-1 * var(--size-button-bevel-inset)) var(--size-button-bevel-inset) var(--color-button-primary-bevel-low);
  text-shadow:
    var(--size-button-engrave) calc(-1 * var(--size-button-engrave)) 0 var(--color-button-primary-engrave-low),
    calc(-1 * var(--size-button-engrave)) var(--size-button-engrave) 0 var(--color-button-primary-engrave-high);
  transition: background 80ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.button:active {
  background:
    linear-gradient(var(--color-button-primary-face-pressed), var(--color-button-primary-face-pressed)) padding-box,
    linear-gradient(45deg, var(--color-button-primary-ring-high), var(--color-button-primary-ring-low)) border-box;
  text-shadow: none;
}
.button:focus-visible { outline: 2px solid var(--color-text); outline-offset: 3px; }

/* The invite page (Figma: "Invitación / Móvil"). */
.mark { width: 56px; height: auto; }
.cover-small { width: 45px; height: 61px; }
.invite-text { width: 100%; display: flex; flex-direction: column; align-items: center; }
.invite-title {
  /* 24 under who invites; 12 over the date, as Figma's title box sits (162 for two 75 lines). */
  margin: 24px 0 12px;
  font-family: "MangoGrotesque-ExtraBold", system-ui, sans-serif;
  font-weight: normal;
  line-height: 0.78125;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.button.hug { width: auto; }

.actions { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }
.open { display: none; }
.ios .open { display: flex; }