/* Copeel — one stylesheet for every page of the waiting site, home included.

   The tokens, the header, the footer, the type scale and the controls are the
   ones of the final site (Copeel/apps/web/src/app/globals.css and
   src/components), written in plain CSS so the static pages and the Next.js
   site look like the same product. */

:root {
  color-scheme: light;

  /* Grounds */
  --bg: #ffffff;
  --bg-alt: #f5f5f7; /* Apple section grey */
  --bg-grouped: #f2f2f7; /* iOS systemGroupedBackground */
  --bg-card: #ffffff;

  /* Ink */
  --ink: #1d1d1f;
  --ink-secondary: #6e6e73;
  --ink-tertiary: #86868b;

  /* Lines & fills */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.14);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.2);

  /* Brand */
  --brand: #007aff; /* iOS systemBlue */
  --brand-strong: #0066d6;
  --brand-soft: #4aa8ff;
  --brand-tint: #e3f1ff;

  /* Semantic */
  --green: #34c759;
  --orange: #ff9500;
  --purple: #af52de;
  --red: #ff3b30;
  --red-ink: #d70015; /* the darker red the app's forms use for text */

  /* Pastel gradient inherited from the app's onboarding / screen headers */
  --pastel-1: #c7f0eb;
  --pastel-2: #f5ffe6;
  --pastel-3: #f5d1eb;
  --pastel-blue: #e3f1ff;
  --wash:
    radial-gradient(60% 50% at 15% 20%, color-mix(in srgb, var(--pastel-1) 90%, transparent),
      transparent 70%),
    radial-gradient(50% 45% at 85% 15%, color-mix(in srgb, var(--pastel-3) 85%, transparent),
      transparent 70%),
    radial-gradient(60% 50% at 55% 90%, color-mix(in srgb, var(--pastel-blue) 90%, transparent),
      transparent 70%),
    linear-gradient(180deg, var(--pastel-2) 0%, var(--bg) 100%);

  /* Elevation */
  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 4px 16px rgba(14, 26, 36, 0.06);
  --shadow-md: 0 18px 44px rgba(14, 26, 36, 0.1);

  /* Radii */
  --radius-card: 18px;
  --radius-tile: 12px;

  /* Layout */
  --container: 1120px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --header-h: 52px;

  /* Type scale (Apple marketing rhythm) */
  --text-display: clamp(2.75rem, 1.5rem + 5vw, 5rem);
  --text-headline: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  --text-title: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  --text-body: 1.0625rem;
  --text-caption: 0.8125rem;

  --ease-apple: cubic-bezier(0.22, 1, 0.36, 1);

  --font-text:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* Base -------------------------------------------------------------------- */

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

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-body);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
video {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(0, 122, 255, 0.18);
}

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

/* Surfaces and containers ------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.container-wide {
  max-width: var(--container-wide);
}

@media (min-width: 640px) {
  .container {
    padding-inline: 32px;
  }
}

/* Header ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
}

/* The glass sits on a pseudo-element: a backdrop filter on the header itself
   would become the containing block of the fixed mobile panel below. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 0 var(--line);
  transition: opacity 0.3s var(--ease-apple);
}

.site-header[data-scrolled]::before,
.site-header[data-menu-open]::before {
  opacity: 1;
}

.site-header > .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  max-width: var(--container-wide);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.logo:hover {
  text-decoration: none;
}

.logo img {
  flex: none;
  width: 23px;
  height: 26px;
  user-select: none;
  -webkit-user-drag: none;
}

.wordmark {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav a {
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: color 0.2s var(--ease-apple);
}

.nav a:hover {
  color: var(--ink);
  text-decoration: none;
}

.nav a[aria-current="page"] {
  color: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Menu button: the links live in a panel until there is room for them. */
.menu-button {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-apple);
}

.menu-button:hover {
  background: var(--fill);
}

.menu-button .icon-close {
  display: none;
}

.menu-button[aria-expanded="true"] .icon-menu {
  display: none;
}

.menu-button[aria-expanded="true"] .icon-close {
  display: block;
}

/* Compact header: the same <nav> becomes a full-height panel under the bar.
   The script turns it on for phone widths and, above them, only when the
   inline row genuinely stops fitting — a narrow window on a laptop keeps its
   links, and adding pages still never breaks the header. */
.site-header[data-compact] .menu-button {
  display: inline-flex;
}

.site-header[data-compact] .nav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 8px max(20px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

.site-header[data-compact][data-menu-open] .nav {
  display: flex;
  animation: panel-in 0.3s var(--ease-apple);
}

.site-header[data-compact] .nav a {
  display: flex;
  align-items: center;
  min-height: 56px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: normal;
  box-shadow: 0 0.5px 0 0 var(--line);
}

.site-header[data-compact] .nav a[aria-current="page"] {
  color: var(--brand);
}

@media (min-width: 640px) {
  .site-header[data-compact] .nav {
    padding-inline: 32px;
  }
}

/* Phones get the compact bar on the first paint, before the script measures. */
@media (max-width: 639px) {
  .site-header:not([data-measured]) .nav {
    display: none;
  }

  .site-header:not([data-measured]) .menu-button {
    display: inline-flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header[data-compact][data-menu-open] .nav {
    animation: none;
  }
}


/* The language button, on every page: it opens the sheet below. */
.lang-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-apple);
}

.lang-button:hover,
.lang-button[aria-expanded="true"] {
  background: var(--fill-strong);
}

.lang-button svg {
  flex: none;
  color: var(--ink-tertiary);
}

/* On a phone the header only has room for the globe. */
@media (max-width: 519px) {
  .lang-button {
    padding: 0 8px;
  }

  .lang-button [data-lang-name] {
    display: none;
  }
}

/* Buttons ----------------------------------------------------------------- */

/* The launch-list button in the header: the pill of the language button, in
   the brand colour. The home page hides it while its own form is on screen. */
.button.header-cta {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  box-shadow: none;
}

/* On the narrowest phones the mark alone carries the brand, so the button,
   the globe and the menu still fit beside it. */
@media (max-width: 359px) {
  .site-header:has(.header-cta:not([hidden])) .wordmark {
    display: none;
  }
}


.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #ffffff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition:
    background-color 0.2s var(--ease-apple),
    color 0.2s var(--ease-apple),
    transform 0.2s var(--ease-apple);
}

.button:hover {
  background: var(--brand-strong);
  color: #ffffff;
  text-decoration: none;
}

.button:active {
  transform: scale(0.98);
}

.button[disabled] {
  opacity: 0.5;
  pointer-events: none;
}

.button-lg {
  height: 48px;
  padding: 0 24px;
  font-size: 17px;
}

/* Hero and sections -------------------------------------------------- */

.page-hero {
  position: relative;
  isolation: isolate;
  padding: 72px 20px 72px;
  text-align: center;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: calc(var(--header-h) * -1) 0 0;
  z-index: -1;
  background: var(--wash);
}

/* The halo dissolves into the page: no hard edge under the last line. */
.page-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: -1;
  height: 140px;
  background: linear-gradient(180deg, transparent, var(--bg));
}

.page-hero h1 {
  max-width: 20ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.page-hero .lead {
  max-width: 46ch;
  margin: 16px auto 0;
  color: var(--ink-secondary);
  font-size: var(--text-lead);
  line-height: 1.4;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

@media (min-width: 640px) {
  .page-hero {
    padding: 112px 32px 96px;
  }

  .page-hero::after {
    height: 200px;
  }
}

main {
  flex: 1;
}

.section {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 20px 56px;
}

main > .section:first-child {
  padding-top: 24px;
}

.section h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.section > p {
  max-width: 62ch;
  margin: 0 0 20px;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.section-narrow {
  max-width: var(--container-narrow);
}

@media (min-width: 640px) {
  .section {
    padding: 0 32px 80px;
  }

  main > .section:first-child {
    padding-top: 40px;
  }
}

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.card {
  padding: 24px;
  background: var(--bg-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.card p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

.card p + p {
  margin-top: 10px;
}

.card-wide {
  grid-column: 1 / -1;
}

.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 24px;
  border-radius: var(--radius-card);
  background: var(--bg-grouped);
  text-align: center;
}

.cta p {
  max-width: 48ch;
  margin: 0;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

/* Prose (legal, privacy, terms) ------------------------------------------- */

.page-body {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: 48px 20px 72px;
}

@media (min-width: 640px) {
  .page-body {
    padding: 72px 32px 96px;
  }
}

.prose {
  color: var(--ink);
  line-height: 1.65;
}

.prose h1 {
  max-width: 24ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.prose .stamp {
  margin: 16px 0 32px;
  color: var(--ink-tertiary);
  font-size: var(--text-caption);
}

.prose h2 {
  margin: 40px 0 8px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.022em;
}

.prose h3 {
  margin: 28px 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.prose p,
.prose ul,
.prose ol {
  margin: 12px 0;
  color: var(--ink-secondary);
  text-wrap: pretty;
}

.prose li {
  margin: 6px 0;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--fill);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.table-wrap {
  overflow-x: auto;
  margin: 16px 0;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.prose th,
.prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-secondary);
  text-align: start;
  vertical-align: top;
}

.prose th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* Forms ------------------------------------------------------------------- */

.form {
  display: grid;
  gap: 16px;
  margin: 0;
}

.form .button {
  justify-self: start;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.field input,
.field textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-tile);
  background: var(--bg-card);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition:
    border-color 0.2s var(--ease-apple),
    box-shadow 0.2s var(--ease-apple);
}

.field textarea {
  height: auto;
  min-height: 160px;
  padding: 12px 16px;
  line-height: 1.6;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-tertiary);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--red-ink);
}

.form-message {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 1.5;
}

.form-message[data-tone="error"] {
  color: var(--red-ink);
}

.form-message[data-tone="success"] {
  color: var(--ink);
  font-weight: 600;
}

.hint {
  margin: 0;
  color: var(--ink-tertiary);
  font-size: var(--text-caption);
  line-height: 1.4;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  padding-block: 56px;
  background: var(--bg-alt);
  box-shadow: 0 -0.5px 0 0 var(--line);
}

.footer-grid {
  display: grid;
  gap: 40px 24px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.footer-brand p {
  max-width: 32ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--text-caption);
  line-height: 1.5;
  text-wrap: pretty;
}

.footer-links ul {
  display: grid;
  gap: 12px 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  color: var(--ink-secondary);
  font-size: 13px;
  transition: color 0.2s var(--ease-apple);
}

.footer-links a:hover {
  color: var(--ink);
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--ink-tertiary);
  font-size: 12px;
  line-height: 1.5;
}

.footer-bottom p {
  max-width: 70ch;
  margin: 0;
  text-wrap: pretty;
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.footer-meta a {
  color: inherit;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.2fr minmax(0, 1fr);
    align-items: start;
  }

  .footer-links ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer-meta {
    justify-content: flex-end;
  }
}

/* Language sheet ---------------------------------------------------------
   One control and one panel on every page: the home lists the 25 languages,
   the other pages list the two they are translated into. */

.sheet {
  position: fixed;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--bg);
  color: var(--ink);
  box-shadow:
    0 0 0 0.5px var(--line),
    0 24px 60px rgba(14, 26, 36, 0.16);
  overflow: hidden;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
  animation: panel-in 0.35s var(--ease-apple);
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.08);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 16px 8px;
  padding-inline: 24px 16px;
}

.sheet-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.sheet-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--fill);
  color: var(--ink-secondary);
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-apple),
    color 0.25s var(--ease-apple);
}

.sheet-close:hover {
  background: var(--fill-strong);
  color: var(--ink);
}

.sheet-close:focus-visible {
  border-radius: 50%;
}

.languages {
  inset: auto;
  inset-block-start: calc(var(--header-h) + 8px);
  inset-inline-end: max(20px, env(safe-area-inset-right), calc((100vw - 1440px) / 2));
  width: min(760px, calc(100vw - 40px));
  max-height: calc(100vh - 96px);
  max-height: calc(100svh - 96px);
}

/* The pages translated into two languages need a panel, not a grid. */
.languages-compact {
  width: min(260px, calc(100vw - 40px));
}

.languages-compact .languages-list {
  grid-template-columns: 1fr;
}

.languages-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px;
  margin: 0;
  padding: 4px 12px max(16px, env(safe-area-inset-bottom));
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.languages-list :is(button, a) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  letter-spacing: 0;
  text-align: start;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-apple);
}

.languages-list :is(button, a):hover {
  background: var(--fill);
  text-decoration: none;
}

.languages-list :is(button, a):focus-visible {
  border-radius: 10px;
}

.languages-list .native {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.languages-list .local {
  display: block;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 1.3;
}

.languages-list .check {
  flex: none;
  color: var(--brand);
  visibility: hidden;
}

.languages-list [aria-current="true"] .native {
  color: var(--brand);
  font-weight: 600;
}

.languages-list [aria-current="true"] .check {
  visibility: visible;
}

@media (max-width: 640px) {
  .sheet {
    inset: auto 0 0 0;
    width: 100%;
    max-height: 88vh;
    max-height: 88svh;
    margin: 0;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .sheet[open] {
    animation-name: sheet-in;
  }

  .sheet::backdrop {
    background: rgba(0, 0, 0, 0.24);
  }
}

@keyframes panel-in {
  from {
    opacity: 0;
    translate: 0 -8px;
  }
}

@keyframes sheet-in {
  from {
    opacity: 0;
    translate: 0 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sheet[open] {
    animation: none;
  }
}

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

.reveal {
  animation: rise 0.7s var(--ease-apple) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

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