/* mythicalOS.ai teaser — one page, matching the site's light-first look:
   warm paper, petrol accent, mono details; the terminal block is the one
   fixed-dark surface (terminal palette is dark in both themes by design).
   All values from mythical-design tokens (own snapshot in ./tokens.css). */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--my-bg);
  color: var(--my-ink);
  font-family: var(--my-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--my-accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--my-accent); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--my-accent-soft); }

.stage {
  min-height: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(28px, 5vh, 56px);
  padding: clamp(24px, 5vh, 56px) var(--my-sp-4) var(--my-sp-5);
  position: relative;
  overflow: hidden;
}
/* the same petrol-soft halo the site's hero uses */
.stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52% 42% at 50% 0%, var(--my-accent-soft) 0%, transparent 70%),
    radial-gradient(48% 30% at 50% 110%, color-mix(in oklab, var(--my-accent-soft) 60%, transparent) 0%, transparent 70%);
  opacity: 0.85;
}
.stage > * { position: relative; }

/* mast */
.mast { display: flex; align-items: center; gap: 12px; animation: rise 0.7s ease both; }
.mark { width: 34px; height: 34px; border-radius: 8px; }
.word { font-size: 22px; font-weight: var(--my-fw-bold); letter-spacing: -0.3px; }
.dot-accent { color: var(--my-accent); font-size: 0.55em; vertical-align: 0.25em; margin-left: 1px; }
.os {
  font-family: var(--my-font-mono); font-size: 11px; font-weight: var(--my-fw-bold);
  letter-spacing: 2px; color: var(--my-muted);
  border: 1px solid var(--my-border); border-radius: 4px; padding: 2px 7px;
  background: var(--my-surface);
}

/* headline block */
.center-block { text-align: center; max-width: 800px; margin-top: auto; }
.kicker {
  font-family: var(--my-font-mono); font-size: 12px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--my-accent-strong);
  margin: 0 0 var(--my-sp-4);
  animation: rise 0.7s ease 0.15s both;
}
h1 {
  margin: 0 0 var(--my-sp-4);
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: var(--my-fw-bold); letter-spacing: -0.03em; line-height: 1.08;
  animation: rise 0.7s ease 0.25s both;
}
.sub {
  margin: 0 auto;
  max-width: 46em;
  color: var(--my-muted);
  font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.7;
  animation: rise 0.7s ease 0.4s both;
}

/* spine */
.spine-wrap { width: min(880px, 94vw); text-align: center; }
.spine { display: block; width: 100%; height: auto; overflow: visible; }

/* interactive dots — the halo ping says "press me" */
.dot { cursor: pointer; outline: none; }
.dot .hit { fill: transparent; }
.dot .node, .dot .halo { transform-box: fill-box; transform-origin: center; }
.dot .node { transition: transform var(--my-t-fast); }
.dot:hover .node, .dot:focus-visible .node { transform: scale(1.45); }
.halo {
  fill: none; stroke: var(--my-accent); stroke-width: 2;
  opacity: 0;
  animation: ping 2.6s ease-out infinite;
}
.h1 { animation-delay: 2.2s; } .h2 { animation-delay: 2.5s; } .h3 { animation-delay: 2.8s; }
.h4 { animation-delay: 3.1s; } .h5 { animation-delay: 3.4s; }
.dot:hover .halo, .dot:focus-visible .halo {
  animation: none; opacity: 0.55; transform: scale(1.9);
  transition: transform var(--my-t-fast), opacity var(--my-t-fast);
}
@keyframes ping {
  0% { transform: scale(1); opacity: 0.5; }
  55% { transform: scale(2.7); opacity: 0; }
  100% { transform: scale(2.7); opacity: 0; }
}
.line {
  stroke: var(--my-accent); stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 840; stroke-dashoffset: 840;
  animation: draw 1.6s ease 0.7s forwards;
}
.node { fill: var(--my-accent); opacity: 0; animation: pop 0.4s ease forwards; }
.n1 { animation-delay: 1.0s; } .n2 { animation-delay: 1.2s; } .n3 { animation-delay: 1.4s; }
.n4 { animation-delay: 1.6s; } .n5 { animation-delay: 1.8s; }
.tip { animation: pop 0.4s ease 1.8s forwards, pulse 2.6s ease-in-out 2.6s infinite; }
.lbl {
  font-family: var(--my-font-mono); font-size: 15px; font-weight: 500;
  fill: var(--my-ink); opacity: 0; animation: pop 0.5s ease forwards;
}
.l1 { animation-delay: 1.1s; } .l2 { animation-delay: 1.3s; } .l3 { animation-delay: 1.5s; }
.l4 { animation-delay: 1.7s; } .l5 { animation-delay: 1.9s; }
.epi { font-family: var(--my-font-mono); font-size: 10.5px; fill: var(--my-muted); opacity: 0; animation: pop 0.5s ease forwards; }
.e1 { animation-delay: 1.15s; } .e2 { animation-delay: 1.35s; } .e3 { animation-delay: 1.55s; }
.e4 { animation-delay: 1.75s; } .e5 { animation-delay: 1.95s; }
.family-line {
  margin: var(--my-sp-3) 0 0;
  color: var(--my-muted); font-size: var(--my-fs-body);
  animation: rise 0.7s ease 2.1s both;
}

/* terminal tease — fixed dark, exactly like the site's codeblocks */
.term {
  font-family: var(--my-font-mono); font-size: clamp(12px, 1.6vw, 14px);
  color: var(--my-term-ink);
  background: var(--my-term-bg);
  border: 1px solid var(--my-border); border-radius: var(--my-r-card);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
  max-width: 94vw; white-space: nowrap; overflow: hidden;
  animation: rise 0.7s ease 2.3s both;
}
.prompt { color: var(--my-term-dim); }
.cursor {
  display: inline-block; width: 8px; height: 1.1em;
  background: var(--my-term-assistant); margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
.soon {
  font-size: 10px; font-weight: var(--my-fw-bold); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--my-term-user);
  border: 1px solid color-mix(in oklab, var(--my-term-user) 45%, transparent);
  border-radius: var(--my-r-pill); padding: 2px 9px; margin-left: 6px;
}

/* footer */
.foot {
  margin-top: auto;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: rise 0.7s ease 2.5s both;
}
.gh { font-size: var(--my-fs-body-lg); font-weight: var(--my-fw-medium); color: var(--my-accent-strong); }
.fine { color: var(--my-muted); font-size: var(--my-fs-caption); }

/* ---------- product popup ---------- */
.pm-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: var(--my-scrim, rgba(22, 24, 29, 0.4));
  display: flex; align-items: center; justify-content: center;
  padding: var(--my-sp-4);
  animation: pmfade var(--my-t-base) both;
}
.pm-scrim[hidden] { display: none; }
body.pm-open { overflow: hidden; }
.pm {
  width: min(420px, 94vw);
  background: var(--my-surface);
  border: 1px solid var(--my-border);
  border-radius: var(--my-r-modal);
  box-shadow: var(--my-shadow-modal);
  overflow: hidden;
  position: relative;
  animation: pmin var(--my-t-base) both;
  text-align: left;
}
.pm-x {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 32px; height: 32px;
  border: 0; border-radius: var(--my-r-control);
  background: color-mix(in oklab, var(--my-surface) 72%, transparent);
  color: var(--my-muted); font-size: 14px; line-height: 1;
  cursor: pointer;
}
.pm-x:hover { color: var(--my-ink); background: var(--my-surface); }
.pm-art {
  height: 148px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(90% 130% at 20% -20%, var(--my-accent-soft) 0%, transparent 60%),
    radial-gradient(80% 120% at 90% 120%, color-mix(in oklab, var(--my-accent-soft) 70%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, color-mix(in oklab, var(--my-accent-soft) 42%, var(--my-surface)), var(--my-surface));
  border-bottom: 1px solid var(--my-border);
}
.pm-art svg { width: 84px; height: 84px; }
.g-ink { fill: none; stroke: var(--my-ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.g-ink-f { fill: var(--my-ink); }
.g-acc { fill: var(--my-accent); }
.g-ring { fill: none; stroke: var(--my-accent); stroke-width: 4; }
.g-ring2 { fill: none; stroke: var(--my-accent); stroke-width: 4.5; }
.pm-body { padding: var(--my-sp-4) var(--my-sp-4) var(--my-sp-2); }
.pm-head { margin: 0 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pm-name { font-family: var(--my-font-mono); font-weight: var(--my-fw-bold); font-size: 20px; letter-spacing: -0.2px; color: var(--my-ink); }
.pm-epi { font-family: var(--my-font-mono); font-size: 11px; color: var(--my-muted); }
.pm-badge {
  margin-left: auto;
  font-size: 10px; font-weight: var(--my-fw-bold); letter-spacing: 0.6px; text-transform: uppercase;
  border-radius: var(--my-r-pill); padding: 3px 10px;
}
.pm-badge.oss { background: var(--my-accent-soft); color: var(--my-accent-strong); }
.pm-badge.paid { background: var(--my-ink); color: var(--my-bg); }
.pm-text { margin: 0; color: var(--my-muted); font-size: var(--my-fs-body-lg); line-height: 1.6; }
.pm-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--my-sp-2);
  padding: var(--my-sp-3) var(--my-sp-4) var(--my-sp-4);
}
.pm-nav {
  font-family: var(--my-font-mono); font-size: 12px; font-weight: var(--my-fw-medium);
  color: var(--my-accent-strong);
  background: none; border: 1px solid var(--my-border); border-radius: var(--my-r-control);
  padding: 6px 12px; cursor: pointer;
  transition: border-color var(--my-t-fast), background var(--my-t-fast);
}
.pm-nav:hover { border-color: var(--my-accent); background: var(--my-accent-soft); }
.pm-soon {
  font-family: var(--my-font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--my-muted);
}
@keyframes pmfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmin { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }

@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .mast, .kicker, h1, .sub, .family-line, .term, .foot { animation: none; }
  .line { animation: none; stroke-dashoffset: 0; }
  .node, .lbl, .epi { animation: none; opacity: 1; }
  .cursor { animation: none; }
  .halo { animation: none; opacity: 0.35; transform: scale(1.9); }
  .pm-scrim, .pm { animation: none; }
  .dot .node { transition: none; }
}

@media (max-width: 640px) {
  h1 br { display: none; }
  .lbl { font-size: 18px; }
  .epi { font-size: 12px; }
  .term { font-size: 11px; }
}