/* The welcome screen from the iPhone app. The stage keeps the app's 402 x 542 point layout
   and scales as one piece, so every object sits, drifts and springs exactly as it does there. */
:root {
  color-scheme: light dark;
  --background: #ffffff;
  --label: #000000;
  --secondary: #6c6c70;
  --accent: #0088ff;
  --accent-text: #0071db;
  --field-strength: .32;
  --glass: rgba(255, 255, 255, .62);
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .08), 0 8px 24px rgba(20, 30, 60, .10);
  --message-fill: #e5e5ea;
  --message-secondary: rgba(60, 60, 67, .6);
  --tertiary: rgba(60, 60, 67, .3);
  --glow: rgba(0, 136, 255, .28);
  --ink: #121212;
  --ink-secondary: rgba(60, 60, 67, .75);
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --label: #ffffff;
    --secondary: #98989f;
    --accent: #0091ff;
    --accent-text: #3395ff;
    --field-strength: .22;
    --glass: rgba(44, 44, 50, .6);
    --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 .5px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .5);
    --message-fill: #2c2c2e;
    --message-secondary: rgba(235, 235, 245, .6);
    --tertiary: rgba(235, 235, 245, .3);
    --glow: rgba(64, 160, 255, .42);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--background); color: var(--label);
  font: 17px/1.35 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.glass {
  background: var(--glass); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8);
}
.capsule { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }

.hero {
  position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 24px 8px;
  display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: center; gap: 8px 48px;
}
.copy { position: relative; z-index: 2; flex: 1 1 380px; max-width: 540px; }
.copy > * { animation: copy-in .8s cubic-bezier(.2, .8, .2, 1) both; }
.eyebrow { margin: 0; font-size: 21px; font-weight: 600; color: var(--accent-text); animation-delay: .8s; }
h1 { margin: 12px 0 0; font-size: clamp(34px, 5vw, 64px); line-height: 1.07; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; animation-delay: .88s; }
.lede { margin: 14px 0 0; font-size: 22px; line-height: 1.4; color: var(--secondary); animation-delay: .96s; }
.coming-soon { position: relative; isolation: isolate; overflow: hidden; margin: 32px 0 0; height: 52px; padding: 0 30px; font-size: 17px; font-weight: 600; animation-delay: 1.04s; }
.coming-soon::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s ease; pointer-events: none;
  background: radial-gradient(90px circle at var(--glow-x, 50%) var(--glow-y, 50%), var(--glow), transparent 70%);
}
@media (hover: hover) { .coming-soon:hover::before { opacity: 1; } }
@keyframes copy-in { from { opacity: 0; transform: translateY(16px); } }

/* Specks of glitter inside the glass catch the light one at a time. */
.glint {
  position: absolute; z-index: -1; width: 3px; height: 3px; border-radius: 50%; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 6px 1px var(--glow); opacity: 0;
  animation: glint 2.4s ease-in-out infinite;
}
@media (prefers-color-scheme: dark) { .glint { background: #fff; } }
.glint:nth-child(1) { left: 14%; top: 28%; }
.glint:nth-child(2) { left: 31%; top: 70%; animation-delay: .4s; }
.glint:nth-child(3) { left: 52%; top: 22%; animation-delay: .9s; }
.glint:nth-child(4) { left: 70%; top: 74%; animation-delay: 1.3s; }
.glint:nth-child(5) { left: 86%; top: 34%; animation-delay: 1.8s; }
.glint:nth-child(6) { left: 42%; top: 46%; width: 2px; height: 2px; animation-delay: 2.1s; }
@keyframes glint { 0%, 100% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.3); } 60% { opacity: 0; } }
/* Where you listen rolls over like a slot machine: iPhone, iPad, Mac, then the car. */
.device-roll { display: inline-block; height: 1.4em; overflow: hidden; vertical-align: bottom; white-space: nowrap; color: var(--label); transition: width .5s cubic-bezier(.3, 1.3, .5, 1); }
.device-track { display: block; transition: transform .7s cubic-bezier(.3, 1.35, .45, 1), filter .7s ease; }
.device-track.is-rolling { filter: blur(.6px); }
.device-track.is-snapping { transition: none; }
.device-track > span { display: block; width: max-content; height: 1.4em; line-height: 1.4em; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The Hyperbole lockup from hyperbole.company, quiet and centered under everything. */
.site-footer { position: relative; z-index: 2; display: flex; justify-content: center; padding: 8px 24px calc(24px + env(safe-area-inset-bottom)); }
.maker { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--tertiary); text-decoration: none; transition: color .2s ease; }
.maker:hover { color: var(--secondary); }
.maker-label { font-size: 11px; letter-spacing: .02em; }
.maker-logotype { display: block; height: 30px; width: auto; }

/* The stage: app points, scaled by landing.mjs to fit. */
/* Dragging the articles must never start a text selection. */
.stage-frame { --scale: 1; position: relative; flex: 0 0 auto; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; width: calc(402px * var(--scale)); height: calc(542px * var(--scale)); }
.stage { position: absolute; left: 0; top: 0; width: 402px; height: 542px; transform: scale(var(--scale)); transform-origin: 0 0; }

/* Only as tall as the stage: the blur still paints past it, but the box no longer makes the page scroll. */
.fields { position: absolute; left: 0; top: 0; width: 402px; height: 542px; filter: blur(50px); pointer-events: none; }
.field { position: absolute; border-radius: 50%; translate: -50% -50%; opacity: var(--field-strength); }
.field-blue { left: 60.3px; top: 218.5px; width: 240px; height: 240px; background: rgb(120, 181, 255); }
.field-peach { left: 329.6px; top: 131.1px; width: 220px; height: 220px; background: rgb(255, 171, 140); }
.field-lilac { left: 241.2px; top: 480.7px; width: 260px; height: 200px; background: rgb(191, 171, 255); }

.object { position: absolute; width: 0; height: 0; }
.object[data-kind="feature"] { left: 68.3px; top: 108.4px; }
.object[data-kind="interview"] { left: 24.1px; top: 325.1px; }
.object[data-kind="design"] { left: 377.9px; top: 308.9px; }
.object[data-kind="blog"] { left: 88.4px; top: 455.2px; }
.object[data-kind="message"] { left: 313.6px; top: 487.7px; }
.object[data-kind="news"] { left: 333.7px; top: 92.1px; }
.object[data-kind="stack"] { left: 201px; top: 249.3px; z-index: 5; }

.entrance { position: absolute; left: 0; top: 0; translate: -50% -50%; animation: entrance 1.1s cubic-bezier(.3, 1.35, .55, 1) both; }
@keyframes entrance { from { opacity: 0; transform: translateY(60px) scale(.7); } }
.object[data-kind="feature"] .entrance { animation-delay: .05s; }
.object[data-kind="interview"] .entrance { animation-delay: .13s; }
.object[data-kind="design"] .entrance { animation-delay: .21s; }
.object[data-kind="blog"] .entrance { animation-delay: .29s; }
.object[data-kind="message"] .entrance { animation-delay: .37s; }
.object[data-kind="news"] .entrance { animation-delay: .1s; }
.object[data-kind="stack"] .entrance { animation-delay: .6s; }

.flick { touch-action: none; cursor: grab; }
body.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
.flick.is-held { cursor: grabbing; }
.depth { transform: scale(.88); }
.object[data-kind="interview"] .depth, .object[data-kind="design"] .depth { transform: scale(.792); opacity: .94; }
.object[data-kind="news"] .depth { transform: scale(.4); }
.stack-scale { transform: scale(.94); }

/* Solid surface, faint top highlight, hairline edge, a contact shadow and a soft ambient one. */
.card {
  position: relative; overflow: hidden;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08), 0 1px 4px rgba(20, 31, 61, .08), 0 16px 36px rgba(20, 31, 61, .14);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 30%);
}
.sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4; mix-blend-mode: plus-lighter; }

.feature { width: 136px; height: 172px; border-radius: 18px; background: rgb(238, 90, 43); color: #fff; }
.feature-sun { position: absolute; left: 58px; top: 30px; width: 96px; height: 96px; border-radius: 50%; background: rgb(255, 193, 69); }
.feature-moon { position: absolute; left: 82px; top: 52px; width: 40px; height: 40px; border-radius: 50%; background: rgb(43, 43, 110); }
.feature-kicker { position: absolute; left: 12px; right: 12px; top: 12px; display: flex; justify-content: space-between; font-size: 6.5px; font-weight: 700; letter-spacing: .8px; color: rgba(255, 255, 255, .92); }
.feature-text { position: absolute; left: 11px; right: 11px; bottom: 11px; display: flex; flex-direction: column; gap: 4px; }
.feature-title { font: italic 400 50px/1 var(--serif); }
.feature-dek { font-size: 7.5px; line-height: 1.25; color: rgba(255, 255, 255, .92); }

.interview { width: 138px; height: 150px; border-radius: 18px; padding: 13px; display: flex; flex-direction: column; background: rgb(31, 61, 53); }
.interview-mark { height: 26px; overflow: hidden; font: 44px/1 var(--serif); color: rgb(159, 211, 184); }
.interview-quote { margin-top: 4px; font: 14px/1.2 var(--serif); color: #fff; }
.interview-spacer { flex: 1; min-height: 8px; }
.interview-who { font-size: 7px; color: rgba(255, 255, 255, .7); }
.interview-label { margin-top: 4px; font-size: 6.5px; font-weight: 700; letter-spacing: .7px; color: rgb(159, 211, 184); }

.design { width: 142px; height: 160px; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; background: rgb(244, 239, 228); color: #141414; }
.design-kicker { font-size: 6.5px; font-weight: 700; letter-spacing: .7px; color: rgba(0, 0, 0, .55); }
.design-grotesk { margin-top: 7px; font-size: 17px; line-height: 1.1; font-weight: 800; letter-spacing: -.5px; }
.design-serif { font: italic 20px/1.05 var(--serif); }
.design-mono { display: flex; align-items: center; gap: 5px; font: 11px/1.35 var(--mono); }
.design-dot { width: 9px; height: 9px; border-radius: 50%; background: rgb(224, 69, 58); }
.design-spacer { flex: 1; min-height: 6px; }
.design-title { font-size: 9.5px; line-height: 1.2; font-weight: 600; }
.design-meta { margin-top: 2px; font-size: 6.5px; color: rgba(0, 0, 0, .5); }

.blog { width: 150px; border-radius: 16px; padding: 11px 12px 12px; background: #fff; }
.blog-top { display: flex; justify-content: space-between; font: 7px var(--mono); color: var(--ink-secondary); }
.blog-title { margin-top: 7px; font: 500 11px/1.27 var(--mono); color: var(--ink); }
.blog-dek { margin-top: 5px; font-size: 8px; line-height: 1.35; color: var(--ink-secondary); }
.blog-byline { margin-top: 7px; display: flex; align-items: center; gap: 5px; font-size: 7px; color: var(--ink-secondary); }
.blog-avatar { width: 14px; height: 14px; border-radius: 50%; background: rgb(255, 138, 91); }

/* A link sent in Messages: interface, so it follows light and dark the way Messages does. */
.message { width: 146px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.message-bubble { padding: 7px 11px; border-radius: 17px; background: var(--accent); color: #fff; font-size: 11px; line-height: 1.25; box-shadow: 0 6px 14px rgba(20, 31, 61, .10); }
.message-preview { width: 146px; border-radius: 17px; background: var(--message-fill); }
.message-art { position: relative; height: 66px; overflow: hidden; background: rgb(185, 214, 166); }
.hill { position: absolute; border-radius: 50%; }
.hill-back { left: -12px; top: 46px; width: 180px; height: 46px; background: rgb(125, 174, 102); }
.hill-front { left: 30px; top: 54px; width: 150px; height: 40px; background: rgb(95, 148, 76); }
.message-sun { position: absolute; left: 100px; top: 12px; width: 16px; height: 16px; border-radius: 50%; background: rgb(248, 214, 106); }
.walker { position: absolute; left: 44px; top: 44px; width: 6px; height: 12px; border-radius: 3px; background: rgb(59, 59, 64); }
.message-text { padding: 7px 11px 8px; }
.message-title { font-size: 10.5px; line-height: 1.25; font-weight: 600; color: var(--label); }
.message-site { margin-top: 1px; font-size: 8.5px; color: var(--message-secondary); }
.message-status { align-self: flex-end; margin-right: 6px; font-size: 7.5px; color: var(--message-secondary); }

.news { width: 300px; height: 240px; border-radius: 28px; background: #fff; }
.news-art { position: relative; height: 116px; overflow: hidden; background: linear-gradient(rgb(158, 199, 237), rgb(130, 176, 224)); }
.cloud { position: absolute; left: 73px; top: 12px; width: 154px; height: 64px; }
.cloud span { position: absolute; background: #fff; border-radius: 50%; }
.cloud span:nth-child(1) { left: 0; top: 29.4px; width: 154px; height: 34.6px; border-radius: 17.3px; }
.cloud span:nth-child(2) { left: 15.4px; top: 16.6px; width: 39.7px; height: 39.7px; }
.cloud span:nth-child(3) { left: 46.2px; top: 0; width: 55px; height: 55px; }
.cloud span:nth-child(4) { left: 92.4px; top: 20.5px; width: 35.8px; height: 35.8px; }
.cloud-shadow { left: 75px; top: 18px; }
.cloud-shadow span { background: rgba(107, 153, 209, .35); }
.rain span { position: absolute; width: 3px; height: 12px; border-radius: 2px; rotate: 16deg; background: rgba(64, 120, 194, .9); }
.rain span:nth-child(1) { left: 98px; top: 84px; }
.rain span:nth-child(2) { left: 124px; top: 84px; }
.rain span:nth-child(3) { left: 150px; top: 84px; }
.rain span:nth-child(4) { left: 176px; top: 84px; }
.rain span:nth-child(5) { left: 202px; top: 84px; }
.rain span:nth-child(n + 6) { background: rgba(64, 120, 194, .6); top: 98px; }
.rain span:nth-child(6) { left: 111px; }
.rain span:nth-child(7) { left: 137px; }
.rain span:nth-child(8) { left: 163px; }
.rain span:nth-child(9) { left: 189px; }
.news-text { padding: 14px 20px 0; display: flex; flex-direction: column; gap: 5px; }
.news-kicker { font-size: 12px; font-weight: 800; letter-spacing: 1.2px; color: rgb(215, 38, 61); }
.news-title { font-size: 23px; line-height: 1.12; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }

/* The article stack: a small pile whose top article folds its lines into a sound wave. */
.stack { position: relative; width: 196px; height: 236px; touch-action: none; cursor: grab; }
.stack-card {
  position: absolute; inset: 0; border-radius: 22px; padding: 16px 18px 14px;
  display: flex; flex-direction: column; background: rgb(251, 251, 251);
}
.stack-card.is-top { background: #fff; }
.stack-pub { font-size: 7px; font-weight: 700; letter-spacing: .8px; color: rgba(60, 60, 67, .6); }
.stack-title { margin-top: 6px; font: 21px/1.1 var(--serif); letter-spacing: -.3px; color: var(--ink); }
.stack-byline { margin-top: 5px; font-size: 7.5px; color: rgba(60, 60, 67, .7); }
.stack-lines { position: relative; margin-top: 9px; width: 160px; height: 84px; }
.stack-line { height: 12px; font: 9.4px/12px var(--serif); white-space: nowrap; color: rgba(31, 31, 31, .8); }
.stack-bar { position: absolute; left: 0; top: 0; border-radius: 4px; opacity: 0; }
.reading {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px;
  border-radius: 13px; background: var(--accent); color: #fff; font-size: 9.5px; font-weight: 600;
  opacity: 0; transform-origin: left center;
}
.reading svg { width: 9px; height: 9px; }

@media (max-width: 759px) {
  .hero { padding: 0 20px 24px; gap: 4px; }
  .stage-frame { margin: 0 -20px; }
  .eyebrow { font-size: 17px; }
  .lede { font-size: 20px; }
  .coming-soon { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .entrance, .copy > * { animation: none; }
  .device-roll, .device-track { transition: none; }
  .glint { display: none; }
}