/* Hallmark · shape: Edge stage, the page top is a menu bar with the live shell hanging from it · genre: atmospheric · theme: studied-DNA (design.md, locked) · job: none (teaser, no action by request) · idea: "the product itself, alive at the top edge, says what Notchion is" · vibe: "quiet black edge, one spark of light"
 * paper: oklch(18.7% 0 0) page, oklch(0% 0 0) shell · accent: oklch(97% 0.002 300) with spark oklch(85% 0.13 190) · display: SF Pro Display · body: SF Pro Text · hero: centred head under the shell, one sentence, one status line · nav: menu-bar strip, wordmark left, status right · footer: one line, wordmark and platform note · imagery: the product built in HTML from the Pencil screens · signature: the black shell morphing from now playing to clipboard, agent and timer at the top edge
 * axes: dark/grotesk-sans/neutral · surface: absolute · posture: centred stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: E, the list below the hero is plain text, kept short and set in two columns so the shell stays the only object */
/* Hallmark · waive 84 · the shell is built, not captured · Notchion has no running build yet, so the shell is drawn from the Pencil screens */
/* Hallmark · waive 7b · design.md locks a true-black shell oklch(0% 0 0) with white ink · the Notchion shell is pure black so it reads as the notch itself */
/* Hallmark · waive 22 · design/system/tokens.css defines the paper and ink steps at zero chroma · the Notchion surfaces are neutral by owner decision, colour lives only in the spark */
/* Hallmark · waive 24b · the shell interior uses the measured insets from the Pencil shell (6, 9, 14 px) · the Notchion shell must match the drawn product, not the page scale */
/* Hallmark · waive 29 · the status pill breathes the spark glow, not a depth shadow · design.md reserves the aqua spark glow for live and event moments, and "coming soon" is the page's one event */
/* Hallmark · waive 26b · the page has no interactive element at all · the Notchion teaser has no action by request, so there is nothing to press */
@import url("./tokens.css");
@import url("./base.css");

body { background: var(--color-paper-2); }

.wordmark { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.01em; color: var(--color-ink); }

.bar {
  position: relative; z-index: var(--z-raised);
  display: flex; justify-content: space-between; align-items: center;
  height: var(--shell-h-collapsed);
  padding-inline: var(--space-lg);
  font-size: var(--text-sm); color: var(--color-ink-2);
}
.bar-status { color: var(--color-ink-2); }

/* the stage: the shell hangs from the top edge, centred, like the notch */
.stage {
  position: absolute; top: 0; left: 50%; z-index: var(--z-raised);
  width: var(--shell-w-lg); height: var(--shell-h-page);
  translate: -50% 0;
  --stage-scale: 1;
  scale: var(--stage-scale); transform-origin: top center;
  pointer-events: none;
}
.stage-inner { position: relative; width: 100%; height: 100%; }

.shell {
  position: absolute; top: 0; left: 50%; translate: -50% 0;
  background: var(--color-paper);
  border-radius: 0 0 var(--radius-shell) var(--radius-shell);
  color: var(--color-ink);
  font-family: var(--font-body);
}
.shell::before, .shell::after {
  content: ""; position: absolute; top: 0; width: var(--radius-ear); height: var(--radius-ear);
}
.shell::before { right: 100%; background: radial-gradient(circle at 0 100%, transparent calc(var(--radius-ear) - 0.5px), var(--color-paper) var(--radius-ear)); }
.shell::after  { left: 100%;  background: radial-gradient(circle at 100% 100%, transparent calc(var(--radius-ear) - 0.5px), var(--color-paper) var(--radius-ear)); }

/* states: crossfade with a small scale from the top edge (transform and opacity only) */
.state { opacity: 0; transform-origin: top center; animation: 16s var(--ease-out) infinite; }
.state-live  { animation-name: show-live; }
.state-clip  { animation-name: show-clip; }
.state-agent { animation-name: show-agent; }
.state-timer { animation-name: show-timer; }

@keyframes show-live  { 0%, 17% { opacity: 1; scale: 1; } 20%, 97% { opacity: 0; scale: 0.96; } 100% { opacity: 1; scale: 1; } }
@keyframes show-clip  { 0%, 19% { opacity: 0; scale: 0.94; } 23%, 46% { opacity: 1; scale: 1; } 49%, 100% { opacity: 0; scale: 0.96; } }
@keyframes show-agent { 0%, 48% { opacity: 0; scale: 0.94; } 51%, 70% { opacity: 1; scale: 1; } 73%, 100% { opacity: 0; scale: 0.96; } }
@keyframes show-timer { 0%, 72% { opacity: 0; scale: 0.94; } 75%, 94% { opacity: 1; scale: 1; } 97%, 100% { opacity: 0; scale: 0.96; } }

/* 1. collapsed live: now playing */
.state-live { width: var(--shell-w-live); height: var(--shell-h-collapsed); display: flex; justify-content: space-between; align-items: center; padding-inline: var(--space-md); border-radius: 0 0 14px 14px; }
.art { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--content-art-1), var(--content-art-2)); }
.wave { display: flex; gap: var(--space-3xs); align-items: center; height: 14px; }
.wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--color-spark); transform-origin: center; animation: wave 1.1s var(--ease-in-out) infinite alternate; }
.wave i:nth-child(2) { animation-delay: -0.3s; } .wave i:nth-child(3) { animation-delay: -0.6s; } .wave i:nth-child(4) { animation-delay: -0.15s; } .wave i:nth-child(5) { animation-delay: -0.45s; }
@keyframes wave { from { scale: 1 0.3; } to { scale: 1 1; } }

/* 2. clipboard page */
.state-clip { width: var(--shell-w-lg); height: var(--shell-h-page); padding: var(--space-xs) var(--inset-body) 14px; display: flex; flex-direction: column; gap: var(--gap-shell); overflow: hidden; }
.clip-head { display: flex; gap: 6px; }
.pager, .search { height: 22px; border-radius: var(--radius-pill); background: var(--color-paper-3); display: inline-flex; align-items: center; }
.pager { gap: 5px; padding-inline: 9px; }
.pager i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink-3); }
.pager i.on { background: var(--color-ink); }
.search { padding-inline: var(--inset-header); font-size: 11px; color: var(--color-ink-2); }
.chips { display: flex; gap: 6px; white-space: nowrap; }
.chip { height: 22px; padding-inline: 9px; border-radius: var(--radius-pill); background: var(--color-paper-2); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2xs); }
.chip b { font-weight: 500; color: var(--color-ink-2); }
.chip-on { background: var(--color-ink); color: var(--color-paper); }
.chip-on b { color: var(--color-paper-4); }
.cards { display: flex; gap: var(--gap-shell); }
.card { position: relative; flex: 0 0 150px; height: 112px; border-radius: var(--radius-card); background: var(--color-paper-3); color: var(--color-ink); padding: 9px var(--inset-header); font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; }
.card-image { background: linear-gradient(170deg, var(--content-dunes-1), var(--content-dunes-2)); }
.card-code { font-family: var(--font-mono); font-weight: 400; font-size: 11px; color: var(--color-ink-2); }
.card-swatch { background: var(--content-swatch); color: var(--color-ink); font-weight: 700; }
.card-foot { position: absolute; left: 10px; bottom: 8px; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--color-ink); }

/* 3. agent update: a content-row peek below the band, with the spark event glow */
.state-agent { width: var(--shell-w-sm); height: var(--peek-h-row); padding: var(--shell-h-collapsed) var(--space-md) 0; display: flex; align-items: center; gap: var(--gap-shell); border-radius: 0 0 16px 16px; box-shadow: 0 10px 28px -14px var(--color-spark-glow); }
.loader { display: grid; grid-template-columns: repeat(3, 4px); gap: 1px; }
.loader i { width: 4px; height: 4px; background: var(--color-mod-agent); opacity: 0.25; animation: cell 0.45s steps(1) infinite; }
.loader i:nth-child(2) { animation-delay: 0.05s; } .loader i:nth-child(3) { animation-delay: 0.1s; } .loader i:nth-child(6) { animation-delay: 0.15s; } .loader i:nth-child(9) { animation-delay: 0.2s; } .loader i:nth-child(8) { animation-delay: 0.25s; } .loader i:nth-child(7) { animation-delay: 0.3s; } .loader i:nth-child(4) { animation-delay: 0.35s; } .loader i:nth-child(5) { opacity: 1; animation: none; }
@keyframes cell { 0% { opacity: 1; } 34% { opacity: 0.25; } }
.agent-line { font-size: 12px; color: var(--color-ink-2); white-space: nowrap; }
.agent-line b { color: var(--color-ink); font-weight: 600; margin-right: var(--space-2xs); }

/* 4. focus timer live */
.state-timer { width: 326px; height: var(--shell-h-collapsed); display: flex; justify-content: space-between; align-items: center; padding-inline: var(--space-md); border-radius: 0 0 14px 14px; }
.target { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--color-mod-timer); box-shadow: inset 0 0 0 2px var(--color-paper), inset 0 0 0 5px var(--color-mod-timer); }
.countdown { font-size: 13px; font-weight: 700; color: var(--color-mod-timer); font-variant-numeric: tabular-nums; }

/* hero */
.hero { padding-top: calc(var(--shell-h-page) + var(--space-3xl)); text-align: center; display: grid; justify-items: center; gap: var(--space-lg); }
.hero { gap: var(--space-md); }
.brand { font-family: var(--font-display); font-size: var(--text-brand); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; color: var(--color-ink); overflow-wrap: break-word; min-width: 0; }
.tagline { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--color-ink); max-width: 24ch; }
.hero .lead { margin-top: var(--space-2xs); }
.hero .when { margin-top: var(--space-sm); }
.lead { font-size: var(--text-lead); color: var(--color-ink-2); max-width: 34ch; }
.when { font-size: var(--text-sm); color: var(--color-ink); padding: 6px 14px; border-radius: var(--radius-pill); background: var(--color-paper); }

/* what lives in the edge */
.inside { margin-top: var(--section-gap); padding-top: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap-columns); }
.inside h2 { font-size: var(--text-xl); font-weight: 600; color: var(--color-ink); }
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm) var(--gap-columns); color: var(--color-ink-2); }
.tools li { padding-block: var(--space-xs); border-bottom: var(--rule-hair) solid var(--color-rule); }

.foot { margin-top: var(--section-gap-s); padding-block: var(--space-xl); display: flex; justify-content: space-between; gap: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); border-top: var(--rule-hair) solid var(--color-rule); }

@media (max-width: 60rem) {
  .inside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 44rem) {
  .stage { --stage-scale: 0.52; }
  /* the scaled clipboard page spans the full phone width, so the wordmark drops below it */
  .bar { height: auto; padding-top: calc(var(--shell-h-page) * 0.52 + var(--space-md)); justify-content: center; }
  .hero { padding-top: var(--space-xl); }
  .tools { grid-template-columns: minmax(0, 1fr); }
  .bar-status { display: none; }
}

/* coming-soon intro, one sequence (transform and opacity only, CSS so it runs without script):
   the name arrives alone at the centre of the hero, holds, then glides up to its place while the line,
   the sentence and the status pill arrive under it; the chrome fades in last and the pill starts to breathe */
.hero { --brand-drop: 6.5rem; }
.brand { animation: brand-intro 2.6s var(--ease-out) both; transform-origin: center; }
.tagline, .lead, .when { animation: rise 900ms var(--ease-out) both; }
.tagline { animation-delay: 1.6s; }
.lead { animation-delay: 2s; }
.when { position: relative; animation-delay: 2.3s; }
.bar, .inside, .foot { animation: settle 800ms var(--ease-out) 2.6s both; }
.when::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px var(--color-spark), 0 0 28px 4px var(--color-spark-glow);
  opacity: 0; animation: breathe 2.8s var(--ease-in-out) 3.4s infinite;
}
@keyframes brand-intro {
  0%       { opacity: 0; translate: 0 calc(var(--brand-drop) + 20px); scale: 1.02; }
  30%, 54% { opacity: 1; translate: 0 var(--brand-drop); scale: 1.12; }
  100%     { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@media (max-width: 44rem) { .hero { --brand-drop: 6rem; } }

/* the public page ships without the shell stage (index-demo.html keeps it for the canvas), so the hero no longer clears it */
.plain .hero { padding-top: var(--space-4xl); }
@media (max-width: 44rem) {
  .plain .bar { height: var(--shell-h-collapsed); padding-top: 0; justify-content: space-between; }
  .plain .hero { padding-top: var(--space-3xl); }
}

@media (prefers-reduced-motion: reduce) {
  .state, .wave i, .loader i, .brand, .tagline, .lead, .when, .when::after, .bar, .inside, .foot { animation: none; }
  .state-clip { opacity: 1; scale: 1; }
}