/* Aethr landing — two acts: the Living Graph (night) and the Manuscript (paper).
   No frameworks, no third-party requests. Fonts are self-hosted below. */

/* ---------- fonts (self-hosted, latin subsets) ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin.woff2') format('woff2');
}

:root {
  --night: #0c0f15;
  --night-2: #10141c;
  --ink: #1c1915;
  --ink-soft: #3a352c;
  --ink-muted: #6b6354;
  --paper: #f6f1e7;
  --paper-2: #efe8da;
  --accent: #3d8bfd;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, system-ui, sans-serif; background: var(--night); color: #e6edf3; -webkit-font-smoothing: antialiased; }

/* ---------- nav ---------- */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
      padding: 18px 40px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
      background: rgba(12,15,21,0.55); border-bottom: 1px solid rgba(255,255,255,0.05); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.01em; font-size: 17px; }
.logo svg { width: 26px; height: 26px; }
.nav-cta { font-size: 13px; font-weight: 600; color: #0c0f15; background: #e6edf3; padding: 8px 16px; border-radius: 99px; text-decoration: none; transition: transform .2s ease; }
.nav-cta:hover { transform: translateY(-1px); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
        overflow: hidden; background: radial-gradient(ellipse 90% 65% at 50% 32%, rgba(61,139,253,0.13) 0%, transparent 70%), var(--night); }
.constellation { position: absolute; inset: -5%; width: 110%; height: 110%; opacity: 0.9; will-change: transform; }
.hero-copy { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.hero h1 { font-size: clamp(44px, 7vw, 84px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
           background: linear-gradient(180deg, #ffffff 30%, #9db4d8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { margin-top: 22px; font-size: clamp(16px, 2vw, 20px); color: #9aa7b8; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.cta-row { margin-top: 38px; display: flex; gap: 14px; justify-content: center; align-items: center; }
.cta { font-size: 15px; font-weight: 600; padding: 14px 28px; border-radius: 99px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.cta.primary { color: #0c0f15; background: linear-gradient(180deg, #fff, #c8d8f0); box-shadow: 0 0 32px rgba(121,192,255,0.25); }
.cta.primary:hover { transform: translateY(-2px); box-shadow: 0 0 48px rgba(121,192,255,0.4); }
.cta.ghost { color: #9aa7b8; font-size: 14px; }
.hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); color: #4a5568; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* constellation animation (the app's own edge-particle technique) */
.flow { fill: none; stroke-linecap: round; stroke-dasharray: 0.1 16; animation: dash 3.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -16.1; } }
.node { animation: pulse 4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .8; } 50% { opacity: 1; } }
.drift-a { animation: driftA 26s ease-in-out infinite alternate; }
.drift-b { animation: driftB 32s ease-in-out infinite alternate; }
@keyframes driftA { from { transform: translate(0,0); } to { transform: translate(14px, -10px); } }
@keyframes driftB { from { transform: translate(0,0); } to { transform: translate(-12px, 8px); } }

/* ---------- feature beats ---------- */
.beat { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; max-width: 1080px; margin: 0 auto; padding: 110px 40px; }
.beat.flip .visual { order: -1; }
.beat .label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 14px; }
.beat h2 { font-size: clamp(28px, 3.4vw, 40px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; margin-bottom: 16px; }
.beat p { color: #9aa7b8; line-height: 1.65; font-size: 16.5px; }
.panel { background: linear-gradient(180deg, #141a24, #0f141d); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 14px;
         box-shadow: 0 24px 80px rgba(0,0,0,0.5); }
.panel .bar { display: flex; gap: 6px; margin-bottom: 12px; }
.panel .bar span { width: 10px; height: 10px; border-radius: 50%; background: #2a3140; }
.panel img { display: block; width: 100%; height: auto; border-radius: 8px; }
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- the dawn ---------- */
.dawn { position: relative; min-height: 130vh; overflow: hidden;
        background: linear-gradient(180deg, var(--night) 0%, #2c3344 30%, #8d8d7e 58%, #ddd3bd 78%, var(--paper) 100%); }
.dawn .quote { position: absolute; top: 68%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: min(720px, 88vw); }
.dawn .quote p { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: clamp(24px, 3.4vw, 38px); color: var(--ink); line-height: 1.35; }
.mote { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(190, 210, 255, 0.7); animation: rise linear infinite; }
@keyframes rise { from { transform: translateY(0); opacity: .8; } to { transform: translateY(-60vh); opacity: 0; } }

/* ---------- act 2: paper ---------- */
.paper-act { background: var(--paper); color: var(--ink-soft); }
.principles { max-width: 1020px; margin: 0 auto; padding: 96px 40px 60px; text-align: center; }
.principles h2 { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(30px, 3.6vw, 42px); color: var(--ink); margin-bottom: 56px; }
.vows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; text-align: left; }
.vow .ring { width: 44px; height: 44px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 19px; }
.vow h3 { font-size: 17px; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.01em; }
.vow p { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }

.waitlist { max-width: 660px; margin: 0 auto; padding: 60px 40px 110px; text-align: center; }
.waitlist h2 { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(26px, 3vw, 36px); color: var(--ink); margin-bottom: 14px; }
.waitlist .blurb { color: var(--ink-muted); font-size: 15.5px; line-height: 1.6; margin-bottom: 30px; }
.form-row { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; }
.form-row input[type="email"] { flex: 1; padding: 14px 18px; border-radius: 10px; border: 1.5px solid #d3c9b4; background: #fffdf7; font-size: 15px; color: var(--ink); outline: none; font-family: inherit; min-width: 0; }
.form-row input[type="email"]:focus { border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,0.12); }
/* honeypot: visually gone, still in the DOM for bots */
#website { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-row button { padding: 14px 24px; border-radius: 10px; border: none; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 14.5px; cursor: pointer; font-family: inherit; transition: transform .15s ease, opacity .15s ease; }
.form-row button:hover { transform: translateY(-1px); }
.form-row button:disabled { opacity: .6; cursor: default; transform: none; }
.form-note { margin-top: 14px; font-size: 14px; min-height: 20px; color: #0f766e; }
.form-note.error { color: #b91c1c; }
.waitlist .confirmed { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 22px; color: var(--ink); margin-top: 6px; }
.fineprint { margin-top: 18px; font-size: 12.5px; color: #a59c87; }

footer { background: var(--paper-2); color: var(--ink-muted); padding: 26px 40px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; border-top: 1px solid #e2d8c2; gap: 12px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  nav { padding: 14px 20px; }
  .beat { grid-template-columns: 1fr; gap: 36px; padding: 70px 26px; }
  .beat.flip .visual { order: 0; }
  .vows { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .cta-row { flex-direction: column; gap: 10px; }
}

/* ---------- reduced motion: the page stands still, fully readable ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flow, .node, .drift-a, .drift-b, .hint, .mote { animation: none; }
  .mote { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}