@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-amber); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 8px; }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 10;
  background: var(--color-surface-2); color: var(--color-text);
  padding: 8px 14px; border-radius: 10px;
}
.skip-link:focus { top: 16px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 720px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 18px; }
h2 { font-size: clamp(2rem, 4vw, 2.9rem); }
h3 { font-size: 1.35rem; }

.eyebrow {
  display: inline-block; margin: 0 0 16px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-rose);
}
.lede { font-size: 1.2rem; color: var(--color-text-muted); margin: 0 0 32px; }

/* Header */
.site-header { position: relative; z-index: 2; padding: 26px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--color-text); text-decoration: none; }
.nav-link {
  color: var(--color-text); text-decoration: none; font-size: 0.92rem; font-weight: 500;
  padding: 9px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.nav-link:hover { border-color: var(--color-text-muted); }

/* Night sky backdrop, after the app's splash and Isle screens */
.sky {
  position: relative;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(245, 237, 228, 0.7), transparent 60%),
    radial-gradient(1px 1px at 28% 8%, rgba(245, 237, 228, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 71% 14%, rgba(245, 237, 228, 0.6), transparent 60%),
    radial-gradient(1px 1px at 86% 30%, rgba(245, 237, 228, 0.5), transparent 60%),
    radial-gradient(1px 1px at 55% 4%, rgba(245, 237, 228, 0.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 52%, rgba(245, 237, 228, 0.4), transparent 60%),
    radial-gradient(1px 1px at 94% 62%, rgba(245, 237, 228, 0.45), transparent 60%),
    linear-gradient(180deg, var(--color-plum) 0%, var(--color-plum-deep) 70%, var(--color-bg) 100%);
}

/* Hero */
.hero { padding: 8px 0 96px; text-align: center; }
.hero-art { margin: 0 auto; max-width: 680px; }
.hero-art { position: relative; }
.hero-art .wordmark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-art .wordmark-final, .hero-art .wordmark {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.hero h1 { margin: 0; }
.hero .lede { max-width: 32em; margin: 8px auto 32px; }

/* Form */
.signup {
  text-align: left; margin: 0 auto; max-width: 560px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
input[type="email"] {
  flex: 1 1 240px; min-width: 0; font: inherit; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 14px 20px;
}
input[type="email"]::placeholder { color: color-mix(in srgb, var(--color-text-muted) 75%, transparent); }
input[type="email"]:focus { border-color: var(--color-amber); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-amber) 25%, transparent); }

/* Primary button: cream pill, like "Write to Honey" in the app */
.button {
  display: inline-block; font: inherit; font-weight: 600; cursor: pointer; border: 0; text-decoration: none;
  border-radius: var(--radius-pill); padding: 14px 26px;
  background: var(--color-text); color: var(--color-bg);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: 0.6; cursor: progress; transform: none; }

.consent { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 16px; font-size: 0.92rem; color: var(--color-text-muted); }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--color-thread); }
.turnstile-slot { min-height: 65px; margin-bottom: 4px; }
.turnstile-spaced { margin-top: 16px; }
.form-status { min-height: 1.6em; margin: 10px 0 0; font-size: 0.95rem; }
.form-status.is-success { color: var(--color-success); }
.form-status.is-error { color: var(--color-danger); }
.fine-print { font-size: 0.85rem; color: var(--color-text-muted); margin: 12px 0 0; }

/* Device frame around real app screenshots */
/* App screenshots, shown on their own (no phone frame). The height comes from the
   screenshot itself, so the whole screen always shows. */
.device {
  position: relative; width: min(300px, 76vw); margin: 0 auto;
  border-radius: 12.5% / 5.8%;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
}
.device img { display: block; width: 100%; height: auto; aspect-ratio: 603 / 1311; border-radius: 12.5% / 5.8%; background: #120c15; }

/* Feature showcases */
section { padding: 96px 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 72px; }
.section-head p { color: var(--color-text-muted); font-size: 1.1rem; margin: 0; }

.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.showcase + .showcase { margin-top: 112px; }
.showcase.flip .showcase-media { order: 2; }
.showcase-copy p { color: var(--color-text-muted); font-size: 1.1rem; margin: 0 0 16px; }
.showcase-copy .eyebrow { color: var(--color-amber); }
.showcase-copy ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.showcase-copy li { display: flex; gap: 12px; align-items: baseline; color: var(--color-text); }
.showcase-copy li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-rose); transform: translateY(-2px); }
.quote { font-family: var(--font-display); font-size: 1.35rem; color: var(--color-text); border-left: 2px solid var(--color-thread); padding-left: 18px; margin: 20px 0; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px; }
.card p { color: var(--color-text-muted); margin: 0; }
.card-icon { display: block; width: 28px; height: 28px; margin-bottom: 18px; color: var(--color-peach); }

.section-alt { background: var(--color-plum-deep); border-block: 1px solid var(--color-border); }

.cta { text-align: center; }
.cta p { color: var(--color-text-muted); margin: 0 auto 28px; max-width: 30em; }

.prose h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
.prose h2 { margin-top: 44px; font-size: 1.6rem; }
.prose p, .prose li { color: var(--color-text-muted); }
.prose strong { color: var(--color-text); }

/* Footer */
.site-footer { padding: 40px 0 56px; color: var(--color-text-muted); font-size: 0.9rem; border-top: 1px solid var(--color-border); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
.site-footer a { color: var(--color-text-muted); }

@media (max-width: 860px) {
  section { padding: 72px 0; }
  .showcase { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .showcase.flip .showcase-media { order: 0; }
  .showcase-copy ul { justify-items: center; }
  .quote { border-left: 0; padding-left: 0; }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .signup { padding: 20px; }
  .field-row .button { width: 100%; }
  .hero-art .wordmark-final, .hero-art .wordmark { -webkit-mask-image: none; mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.site-header-overlay { position: absolute; top: 0; left: 0; right: 0; }
.hero.sky { padding-top: 96px; }

.showcase-copy h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.cta { background: linear-gradient(180deg, var(--color-bg), var(--color-plum-deep)); }

/* Letters */
.letters { border-top: 1px solid var(--color-border); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.trio figure { margin: 0; }
.trio .device { width: min(260px, 76vw); }
.trio figcaption { margin: 28px auto 0; max-width: 280px; text-align: center; color: var(--color-text-muted); }
.trio figcaption strong { display: block; color: var(--color-text); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin-bottom: 6px; }
.letters-note { text-align: center; color: var(--color-text-muted); max-width: 36em; margin: 64px auto 0; font-size: 0.98rem; }
@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; gap: 64px; }
}

.signup-spaced { margin-top: 28px; }
.form-title { font-size: 1.3rem; margin: 0 0 16px; }
.form-intro { margin: -8px 0 16px; }
.field-stack { display: grid; gap: 8px; }
.field-stack label { font-size: 0.9rem; color: var(--color-text-muted); }
.field-stack input + label { margin-top: 8px; }
.field-stack input { flex: none; width: 100%; }
input[name="code"] {
  font: 600 1.1rem/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); padding: 14px 20px;
}
input[name="code"]:focus { border-color: var(--color-amber); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-amber) 25%, transparent); }


/* ===================== Motion =====================
   Decoration only. Animations use transform and opacity so they stay on the GPU,
   everything stops under prefers-reduced-motion, and content hidden for scroll
   reveals only hides once js/motion.js has added .motion to <html>. */
:root { --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-soft: cubic-bezier(0.45, 0, 0.25, 1); }
body { position: relative; isolation: isolate; overflow-x: clip; }

@keyframes rise { from { opacity: 0; transform: translate3d(0, 26px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes star-drift { to { transform: translate3d(-347px, -173px, 0); } }
@keyframes twinkle { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
@keyframes aurora { 0%, 100% { transform: translate3d(-6%, 0, 0) scale(1); opacity: 0.75; } 50% { transform: translate3d(6%, 5%, 0) scale(1.15); opacity: 1; } }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes ground { 0%, 100% { transform: scale(1); opacity: 0.55; } 50% { transform: scale(0.82); opacity: 0.35; } }
@keyframes breathe { 0%, 100% { opacity: 0.45; transform: scale(0.95); } 50% { opacity: 0.85; transform: scale(1.05); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sway { 0%, 100% { transform: translate3d(0, 0, 0) scaleY(1); } 50% { transform: translate3d(-1.5%, 6px, 0) scaleY(1.12); } }
@keyframes shoot {
  0%, 88% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-24deg); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(-460px, 205px, 0) rotate(-24deg); }
}
@keyframes cue-drop { 0% { transform: translateY(-8px); opacity: 0; } 30% { opacity: 1; } 80%, 100% { transform: translateY(26px); opacity: 0; } }
@keyframes status-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes busy { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.85; } }

/* ---------- Atmosphere ---------- */
/* Starfield behind every page. Two tile sizes so the pattern never visibly repeats. */
body::before, body::after { content: ""; position: fixed; inset: -400px; z-index: -1; pointer-events: none; }
body::before {
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(245, 237, 228, 0.55), transparent 60%),
    radial-gradient(1px 1px at 140px 210px, rgba(245, 237, 228, 0.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 260px 90px, rgba(237, 193, 136, 0.5), transparent 60%),
    radial-gradient(1px 1px at 310px 300px, rgba(245, 237, 228, 0.35), transparent 60%);
  background-size: 347px 347px;
  animation: star-drift 180s linear infinite;
}
body::after {
  background-image:
    radial-gradient(1.5px 1.5px at 90px 120px, rgba(245, 237, 228, 0.7), transparent 60%),
    radial-gradient(1px 1px at 400px 40px, rgba(227, 169, 165, 0.6), transparent 60%),
    radial-gradient(1px 1px at 230px 460px, rgba(245, 237, 228, 0.5), transparent 60%);
  background-size: 521px 521px;
  animation: twinkle 7s ease-in-out infinite;
}

/* A hairline of red thread across the top that grows as you read down the page
   (scroll-driven; browsers without support simply don't show it). */
.scroll-thread { display: none; }
@supports (animation-timeline: scroll()) {
  @keyframes thread-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .scroll-thread {
    display: block; position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--color-thread) 20%, var(--color-thread-bright));
    box-shadow: 0 0 8px color-mix(in srgb, var(--color-thread-bright) 70%, transparent);
    transform-origin: left; animation: thread-grow linear both; animation-timeline: scroll(root);
  }
}

/* "Discover" cue at the bottom of the first screen. motion.js shows it only at the
   top of the page and only when it wouldn't sit on top of the signup form. */
.scroll-cue {
  position: fixed; z-index: 5; left: 50%; bottom: 22px; translate: -50% 0; pointer-events: none;
  display: grid; justify-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-text-muted);
  opacity: 0; transform: translateY(8px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.scroll-cue i { position: relative; display: block; width: 1px; height: 38px; overflow: hidden; background: color-mix(in srgb, var(--color-text-muted) 25%, transparent); }
.scroll-cue i::after { content: ""; position: absolute; left: -1px; top: 0; width: 3px; height: 12px; border-radius: 2px; background: var(--color-thread-bright); box-shadow: 0 0 6px var(--color-thread-bright); animation: cue-drop 2.2s var(--ease-soft) infinite; }
.cue-on .scroll-cue { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.hero.sky { overflow: hidden; isolation: isolate; }
.sky > .wrap { position: relative; z-index: 2; }
.sky::before {
  content: ""; position: absolute; inset: -20% -10% 10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 35% at 30% 30%, color-mix(in srgb, var(--color-thread) 22%, transparent), transparent 70%),
    radial-gradient(35% 30% at 72% 22%, color-mix(in srgb, var(--color-sky-low) 45%, transparent), transparent 70%),
    radial-gradient(30% 25% at 55% 60%, color-mix(in srgb, var(--color-amber) 10%, transparent), transparent 70%);
  filter: blur(20px);
  animation: aurora 22s ease-in-out infinite;
}
.sky::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(1.5px 1.5px at 18% 26%, rgba(245, 237, 228, 0.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 82% 20%, rgba(245, 237, 228, 0.8), transparent 60%),
    radial-gradient(2px 2px at 64% 36%, rgba(237, 193, 136, 0.8), transparent 60%),
    radial-gradient(1px 1px at 38% 12%, rgba(245, 237, 228, 0.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 9% 70%, rgba(155, 188, 174, 0.8), transparent 60%),
    radial-gradient(1px 1px at 91% 48%, rgba(245, 237, 228, 0.8), transparent 60%);
  animation: twinkle 5s ease-in-out infinite;
}
.shooting-star {
  position: absolute; z-index: 1; top: 14%; right: 8%; width: 140px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(245, 237, 228, 0.9), transparent);
  opacity: 0; animation: shoot 11s ease-in 3s infinite;
}
.shooting-star-2 { top: 34%; right: 30%; width: 90px; animation-duration: 17s; animation-delay: 9s; }

/* Entrance */
.site-header-overlay { animation: fade-in 1.2s ease 0.6s both; }
.hero-art { animation: rise 1.4s var(--ease-out) 0.1s both; }
.hero .eyebrow { animation: rise 1s var(--ease-out) 0.55s both; }
.hero .lede { animation: rise 1s var(--ease-out) 0.7s both; }
.hero .signup { animation: rise 1.1s var(--ease-out) 0.9s both; }

/* Wordmark: the thread leaves the first hand, writes "Mo Anam Cara", reaches the second hand
   and gently tightens. The pen is a stroke painted with the original thread artwork, so only the
   approved thread pixels ever show. Default (no animation / reduced motion) is the finished art:
   a wide stroke over the whole route reveals every pixel of the thread layer. */
.wordmark-pen { fill: none; stroke-width: 80; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@keyframes pen-write {
  /* 0 to 11% of the route is the swoop from the hand, 91 to 100% the descent to the other hand */
  0% { stroke-dashoffset: 1; stroke-width: 24; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.9); }
  13% { stroke-dashoffset: 0.8895; animation-timing-function: cubic-bezier(0.3, 0.15, 0.7, 0.85); }
  86% { stroke-dashoffset: 0.0893; animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1); }
  97% { stroke-dashoffset: 0; stroke-width: 24; }
  100% { stroke-dashoffset: 0; stroke-width: 80; }
}
@keyframes thread-tighten {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 transparent); }
  40% { transform: scale(0.994); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--color-thread-bright) 75%, transparent)); }
}
/* Hand over to the original artwork once the thread has settled */
@keyframes wordmark-handover { to { opacity: 0; visibility: hidden; } }
@keyframes wordmark-arrive { from { opacity: 0; } to { opacity: 1; } }
.hero-art .wordmark { animation: wordmark-handover 0.5s ease 5.7s both; }
.hero-art .wordmark-final { opacity: 0; animation: wordmark-arrive 0.5s ease 5.7s both; }
.wordmark-pen { animation: pen-write 4.1s linear 0.7s both; }
.wordmark-thread { transform-box: view-box; transform-origin: 793px 1100px; animation: thread-tighten 0.9s var(--ease-soft) 4.8s both; }

/* Red thread */
.thread { display: block; width: 100%; height: 130px; pointer-events: none; overflow: visible; }
.thread path {
  fill: none; stroke: var(--color-thread); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-thread-bright) 70%, transparent));
}
.thread-hero { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.85; animation: sway 12s ease-in-out 4s infinite; }
.thread-hero path { animation: draw 3.2s var(--ease-out) 4.8s both; }
.cta { position: relative; padding-top: 24px; --thread-h: 90px; }
.thread-cta { margin: 0 0 40px; height: var(--thread-h); opacity: 0.7; animation: sway 14s ease-in-out infinite; }

/* ---------- Puffin ---------- */
/* An occasional fly-by high in the hero sky: about 7 seconds of flight every 50 seconds.
   It never takes pointer events, so it can't get in the way of the form. */
@keyframes fly {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  1% { opacity: 1; }
  7% { transform: translate3d(calc(-50vw - 60px), -34px, 0); }
  14% { transform: translate3d(calc(-100vw - 160px), 6px, 0); opacity: 1; }
  14.1%, 100% { transform: translate3d(calc(-100vw - 160px), 6px, 0); opacity: 0; }
}
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes flap { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(38deg) scaleY(0.55); } }
@keyframes peek { 0%, 86%, 100% { transform: rotate(0); } 89%, 95% { transform: rotate(-9deg); } }
.puffin { display: block; overflow: visible; filter: drop-shadow(0 0 5px rgba(245, 237, 228, 0.28)); }
.puffin-wing { transform-box: fill-box; transform-origin: 8% 92%; }
.puffin-flight { position: absolute; z-index: 3; top: 9%; left: 100%; width: 54px; pointer-events: none; opacity: 0; animation: fly 50s linear 7s infinite; }
.puffin-flying { width: 100%; animation: bob 1.1s ease-in-out infinite; }
.puffin-flying .puffin-wing { animation: flap 0.32s ease-in-out infinite; }
/* Perched on the right end of the closing thread, which sits at 78/160 of the thread's height */
.puffin-perch { position: absolute; top: calc(24px + var(--thread-h) * 0.47 - 30px); right: 3%; width: 44px; pointer-events: none; animation: sway 14s ease-in-out infinite; }
.puffin-sitting { rotate: 24deg; }
.puffin-sitting .puffin-wing { transform: rotate(28deg) scale(0.7); }
.puffin-sitting .puffin-body { transform-box: fill-box; transform-origin: 70% 90%; animation: peek 9s ease-in-out 3s infinite; }
.motion .puffin-perch[data-reveal] { opacity: 0; transform: none; translate: 0 10px; transition: opacity 1.2s var(--ease-out) 1.6s, translate 1.2s var(--ease-out) 1.6s; }
.motion .puffin-perch[data-reveal].is-visible { opacity: 1; translate: 0 0; }

/* ---------- Scroll reveals ---------- */
.motion [data-reveal] {
  opacity: 0; transform: translate3d(0, 34px, 0);
  transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.motion [data-reveal="left"] { transform: translate3d(-56px, 0, 0) scale(0.96); }
.motion [data-reveal="right"] { transform: translate3d(56px, 0, 0) scale(0.96); }
.motion [data-reveal].is-visible { opacity: 1; transform: none; }
.motion [data-reveal="draw"] { opacity: 1; transform: none; }
.motion [data-reveal="draw"] path { stroke-dashoffset: 1; }
.motion [data-reveal="draw"].is-visible path { animation: draw 2.6s var(--ease-out) both; }
.trio figure:nth-child(2), .card:nth-child(2) { --reveal-delay: 0.15s; }
.trio figure:nth-child(3), .card:nth-child(3) { --reveal-delay: 0.3s; }

/* Feature text arrives line by line after its screenshot */
.motion .showcase-copy[data-reveal], .motion .section-head[data-reveal] { opacity: 1; transform: none; }
.motion .showcase-copy[data-reveal] > *, .motion .section-head[data-reveal] > * {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 0.9s var(--ease-out), transform 1s var(--ease-out);
}
.motion .showcase-copy[data-reveal].is-visible > *, .motion .section-head[data-reveal].is-visible > * { opacity: 1; transform: none; }
.motion .showcase-copy > :nth-child(1) { transition-delay: 0.25s; }
.motion .showcase-copy > :nth-child(2) { transition-delay: 0.38s; }
.motion .showcase-copy > :nth-child(3) { transition-delay: 0.51s; }
.motion .showcase-copy > :nth-child(4) { transition-delay: 0.64s; }
.motion .section-head > :nth-child(2) { transition-delay: 0.12s; }
.motion .section-head > :nth-child(3) { transition-delay: 0.24s; }
.motion .section-head > :nth-child(4) { transition-delay: 0.36s; }
.motion .showcase-copy li { opacity: 0; transform: translate3d(-10px, 0, 0); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.motion .showcase-copy.is-visible li { opacity: 1; transform: none; }
.motion .showcase-copy.is-visible li:nth-child(1) { transition-delay: 0.7s; }
.motion .showcase-copy.is-visible li:nth-child(2) { transition-delay: 0.82s; }
.motion .showcase-copy.is-visible li:nth-child(3) { transition-delay: 0.94s; }

/* ---------- Screenshots ---------- */
.showcase-media, .trio figure { position: relative; isolation: isolate; --float-delay: 0s; }
.showcase.flip .showcase-media, .trio figure:nth-child(2) { --float-delay: -2.3s; }
.showcase:nth-child(3) .showcase-media, .trio figure:nth-child(3) { --float-delay: -4.6s; }
/* Spotlight behind each phone */
.showcase-media::before, .trio figure::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 6%; width: min(400px, 92vw); height: 72%;
  margin-left: calc(min(400px, 92vw) / -2); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--color-thread) 30%, transparent), color-mix(in srgb, var(--color-sky-low) 18%, transparent) 60%, transparent);
  filter: blur(24px);
  animation: breathe 8s ease-in-out infinite;
}
/* Soft contact shadow that shrinks as the phone floats up */
.showcase-media::after, .trio figure::after {
  content: ""; position: absolute; z-index: -1; left: 50%; width: 200px; margin-left: -100px; height: 26px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent);
  animation: ground 7s ease-in-out var(--float-delay) infinite;
}
.showcase-media::after { bottom: -34px; }
.trio figure::after { top: calc(min(260px, 76vw) * 2.174 + 10px); }
.device {
  animation: float 7s ease-in-out var(--float-delay) infinite;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.device::after {
  content: ""; position: absolute; inset: 0; border-radius: 12.5% / 5.8%; pointer-events: none;
  background: linear-gradient(105deg, transparent calc(var(--sheen, 50%) - 25%), rgba(255, 255, 255, 0.09) var(--sheen, 50%), transparent calc(var(--sheen, 50%) + 25%));
  opacity: 0; transition: opacity 0.5s ease;
}
.device:hover { box-shadow: 0 60px 100px -40px rgba(0, 0, 0, 0.85), 0 0 50px -12px color-mix(in srgb, var(--color-thread) 45%, transparent); }
.device:hover::after { opacity: 1; }
/* Each phone settles in from slightly further back */
.motion [data-reveal] > .device, .motion figure[data-reveal] .device { scale: 0.94; transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), scale 1.4s var(--ease-out); }
.motion .is-visible > .device, .motion figure.is-visible .device { scale: 1; }

/* Depth: spotlights drift slower than the page, the hero art eases back as you leave it */
@supports (animation-timeline: view()) {
  @keyframes parallax-glow { from { translate: 0 60px; } to { translate: 0 -60px; } }
  @keyframes hero-recede { to { transform: translate3d(0, 90px, 0) scale(0.96); opacity: 0.35; } }
  .showcase-media::before, .trio figure::before {
    animation: breathe 8s ease-in-out infinite, parallax-glow linear both;
    animation-timeline: auto, view();
  }
  .hero-art .wordmark-final { animation: wordmark-arrive 0.5s ease 5.7s both, hero-recede linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
  .hero-art .wordmark { animation: wordmark-handover 0.5s ease 5.7s both, hero-recede linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 100%; }
}

/* ---------- Letter: written, folded into its envelope, sealed ---------- */
/* Final, sealed state is the default; the animation only runs once motion.js reveals it. */
.envelope-scene { width: min(280px, 64vw); margin: 0 auto 36px; padding-top: 20%; }
.env { position: relative; aspect-ratio: 569 / 366; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.5)); }
.env > div { position: absolute; }
.env-back { inset: 0; border-radius: 10px; background: #b9c8b2; }
.env-letter {
  left: 7%; right: 7%; top: 6%; height: 82%; border-radius: 4px; z-index: 2;
  background: linear-gradient(180deg, #fbf6ee, #f1e8db); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 9% 10%; display: grid; align-content: start; gap: 9%;
  transform: translateY(6%);
}
.env-letter i { display: block; height: 3px; border-radius: 2px; background: #9d8bb0; transform-origin: left; }
.env-letter i:nth-child(1) { width: 45%; }
.env-letter i:nth-child(2) { width: 92%; }
.env-letter i:nth-child(3) { width: 80%; }
.env-letter i:nth-child(4) { width: 60%; }
.env-front {
  inset: 0; z-index: 3; border-radius: 10px;
  background: linear-gradient(180deg, #d3dfcc, #c9d7c2);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.env-front::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), rgba(120, 140, 115, 0.35) 50%, transparent calc(50% + 1px)) left bottom / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), rgba(120, 140, 115, 0.35) 50%, transparent calc(50% + 1px)) right bottom / 50% 100% no-repeat; }
.env-flap {
  left: 0; right: 0; top: 0; height: 60%; z-index: 4;
  background: linear-gradient(180deg, #dbe6d5 0%, #c7d5c0 70%, #b3c3ac 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center; transform: perspective(700px) rotateX(0deg);
}
.env-seal {
  left: 50%; top: 60%; width: 19%; aspect-ratio: 1; margin: -9.5% 0 0 -9.5%; z-index: 5; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #d2b58b, #b0905f 55%, #8d7048);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3), inset 0 0 0 4px rgba(141, 112, 72, 0.25);
}
.env-seal::before { content: ""; position: absolute; inset: 20%; border-radius: 50%; border: 1.5px solid rgba(110, 86, 52, 0.55); }
.env-seal::after { content: ""; position: absolute; inset: -10%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--color-amber) 70%, transparent); opacity: 0; }

@keyframes letter-write { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes letter-in { 0% { transform: translateY(-78%); } 100% { transform: translateY(6%); } }
@keyframes flap-close {
  0% { transform: perspective(700px) rotateX(180deg); z-index: 1; }
  49% { z-index: 1; }
  50% { z-index: 4; }
  100% { transform: perspective(700px) rotateX(0deg); z-index: 4; }
}
@keyframes seal-press {
  0% { opacity: 0; transform: translateY(-14px) scale(1.7); }
  60% { opacity: 1; transform: scale(0.9); }
  80% { transform: scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes seal-ring { 0% { opacity: 0.8; transform: scale(0.9); } 100% { opacity: 0; transform: scale(2); } }
@keyframes env-settle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

.motion .envelope-scene[data-reveal] { opacity: 1; transform: none; }
.motion .envelope-scene .env-letter i { animation: letter-write 0.5s var(--ease-soft) both; animation-play-state: paused; }
.motion .envelope-scene .env-letter i:nth-child(1) { animation-delay: 0.2s; }
.motion .envelope-scene .env-letter i:nth-child(2) { animation-delay: 0.45s; }
.motion .envelope-scene .env-letter i:nth-child(3) { animation-delay: 0.7s; }
.motion .envelope-scene .env-letter i:nth-child(4) { animation-delay: 0.95s; }
.motion .envelope-scene .env-letter { animation: letter-in 1s var(--ease-soft) 1.5s both; animation-play-state: paused; }
.motion .envelope-scene .env-flap { animation: flap-close 0.9s var(--ease-soft) 2.55s both; animation-play-state: paused; }
.motion .envelope-scene .env-seal { animation: seal-press 0.6s var(--ease-out) 3.45s both; animation-play-state: paused; }
.motion .envelope-scene .env-seal::after { animation: seal-ring 1.1s var(--ease-out) 3.75s both; animation-play-state: paused; }
.motion .envelope-scene .env { animation: env-settle 8s ease-in-out 4.6s infinite; animation-play-state: paused; }
.motion .envelope-scene.is-visible *, .motion .envelope-scene.is-visible *::after { animation-play-state: running; }

/* ---------- Micro-interactions ---------- */
.button {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform 0.25s var(--ease-out), box-shadow 0.35s var(--ease-out), opacity 0.15s ease;
}
.button::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--color-amber) 45%, transparent) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease-out);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--color-amber) 55%, transparent), 0 0 0 1px color-mix(in srgb, var(--color-amber) 40%, transparent); }
.button:hover::after { transform: translateX(120%); }
.button:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.button:disabled { animation: busy 1.4s ease-in-out infinite; box-shadow: none; }
.button:disabled::after { display: none; }
.nav-link { transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
.nav-link:hover { box-shadow: 0 0 22px -6px color-mix(in srgb, var(--color-thread-bright) 60%, transparent); background: color-mix(in srgb, var(--color-surface-2) 85%, transparent); }
.signup { transition: border-color 0.5s ease, box-shadow 0.5s ease; }
.signup:focus-within { border-color: color-mix(in srgb, var(--color-amber) 45%, var(--color-border)); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 0 60px -20px color-mix(in srgb, var(--color-thread) 50%, transparent); }
input[type="email"] { transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease; }
input[type="email"]:hover:not(:focus) { border-color: color-mix(in srgb, var(--color-text-muted) 45%, var(--color-border)); }
.consent input { transition: transform 0.2s var(--ease-out); }
.consent input:active { transform: scale(0.9); }
.form-status.is-success, .form-status.is-error { animation: status-in 0.5s var(--ease-out) both; }
.card { transition: transform 0.4s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease; }
.motion .card[data-reveal] { transition: opacity 1s var(--ease-out), transform 1.2s var(--ease-out), border-color 0.4s ease, box-shadow 0.4s ease; }
.card:hover { border-color: color-mix(in srgb, var(--color-rose) 45%, var(--color-border)); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7), 0 0 40px -18px color-mix(in srgb, var(--color-thread) 55%, transparent); }
.card:hover, .motion .card[data-reveal].is-visible:hover { transform: translateY(-6px); transition-delay: 0s; }
.card-icon { transition: transform 0.5s var(--ease-out), color 0.4s ease; }
.card:hover .card-icon { transform: scale(1.12) rotate(-6deg); color: var(--color-amber); }
.site-footer a, .fine-print a, .card a { transition: color 0.25s ease; }
.site-footer a:hover { color: var(--color-text); }

/* ---------- Waitlist success: the thread loops into a heart, then lets go ---------- */
.signup { position: relative; }
.heart-stage { position: absolute; left: 0; right: 0; top: 10px; height: 150px; pointer-events: none; opacity: 0; display: grid; place-items: center; }
.heart-stage svg { width: 100%; height: 100%; overflow: visible; }
.heart-stage path, .joined-heart path {
  fill: none; stroke: var(--color-thread-bright); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-thread-bright) 75%, transparent));
}
.heart-stage path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transform-box: fill-box; transform-origin: center; }
/* Drawn in (0 to 0.85s), held, then the tail trails off the far end and fades (to 1.8s) */
@keyframes heart-thread {
  0% { stroke-dashoffset: 1; }
  47% { stroke-dashoffset: 0; }
  64% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1; }
}
@keyframes heart-beat { 0%, 47% { transform: scale(1); } 55% { transform: scale(1.04); } 64%, 100% { transform: scale(1); } }
@keyframes heart-stage { 0% { opacity: 0; } 8% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
.signup.is-celebrating .heart-stage { animation: heart-stage 1.8s ease both; }
.signup.is-celebrating .heart-stage path { animation: heart-thread 1.8s cubic-bezier(0.55, 0.1, 0.3, 1) both, heart-beat 1.8s ease both; }
/* Fields step back while the heart forms; the message below stays fully readable */
.signup .field-row, .signup .consent, .signup .turnstile-slot { transition: opacity 0.3s ease; }
.signup.is-celebrating .field-row, .signup.is-celebrating .consent, .signup.is-celebrating .turnstile-slot { opacity: 0; pointer-events: none; }

/* Joined state: a small sealed heart above the confirmation */
.signup.is-joined .field-row, .signup.is-joined .consent { display: none; }
/* Turnstile stays rendered (just collapsed) so "Add another email" works without reloading it */
.signup.is-joined .turnstile-slot { height: 0; min-height: 0; overflow: hidden; opacity: 0; margin: 0; }
.joined-heart { display: grid; place-items: center; margin: 4px 0 6px; }
.joined-heart svg { width: 64px; height: 54px; overflow: visible; }
.signup.is-joined { text-align: center; }
.signup.is-joined .form-status { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; color: var(--color-text); margin: 0 auto; max-width: 26em; }
.form-status:focus { outline: none; }
.another {
  font: inherit; font-size: 0.9rem; color: var(--color-amber); background: none; border: 0; padding: 6px 10px; margin: 10px 0 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; border-radius: 8px;
}
.another:hover { text-decoration-thickness: 2px; }
.another[hidden], .joined-heart[hidden] { display: none; }
@keyframes joined-in { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.signup.is-joined .joined-heart, .signup.is-joined .form-status, .signup.is-joined .another { animation: joined-in 0.6s var(--ease-out) both; }
.signup.is-joined .form-status { animation-delay: 0.08s; }
.signup.is-joined .another { animation-delay: 0.16s; }

@media (max-width: 860px) {
  .motion [data-reveal="left"], .motion [data-reveal="right"] { transform: translate3d(0, 34px, 0) scale(0.96); }
  .thread { height: 80px; }
  .cta { --thread-h: 80px; }
  .puffin-flight { width: 42px; top: 7%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .device { transform: none; }
  .shooting-star, .puffin-flight, .scroll-cue i::after, .hero-art .wordmark { display: none; }
  .hero-art .wordmark-final { opacity: 1; }
}