/* ============================================================
   amplaio — Base
   Reset, globale Element-Defaults, Hintergrund-Layer (Grain/Aurora)
   und Typografie-Helfer. Einbinden nach tokens.css.
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg-deep);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea { font: inherit; }

::selection { background: var(--mint); color: #04060c; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--mint), var(--violet));
  border-radius: 8px;
  border: 3px solid var(--bg-deep);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--mint); color: #04060c; padding: 0.6rem 1.2rem;
  border-radius: 0 0 10px 10px; font-weight: 700; z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Background layers ---------- */
.grain {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.aurora-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; background: var(--bg-deep);
}
.aurora {
  position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: 0.55; will-change: transform;
}
.aurora--1 {
  width: 60vw; height: 60vw; left: -14vw; top: -16vw;
  background: radial-gradient(circle, var(--mint), transparent 66%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora--2 {
  width: 56vw; height: 56vw; right: -16vw; top: 24vh;
  background: radial-gradient(circle, var(--violet), transparent 66%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora--3 {
  width: 48vw; height: 48vw; left: 28vw; bottom: -22vw;
  background: radial-gradient(circle, var(--azure), transparent 68%);
  opacity: 0.4;
  animation: drift3 38s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(16vw, 12vh) scale(1.18); } }
@keyframes drift2 { to { transform: translate(-14vw, -8vh) scale(1.22); } }
@keyframes drift3 { to { transform: translate(-12vw, -14vh) scale(0.85); } }

/* Sternenfeld — statische, gekachelte Sternkarte über die ganze Seite.
   Liegt als ::after über den Nebel-Auroras, bleibt aber hinter dem Inhalt
   (aurora-bg = z-index 0). Rein statisch, daher reduced-motion-neutral. */
.aurora-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><g fill='%23dfe9f5'><circle cx='38' cy='512' r='1.1' opacity='.7'/><circle cx='96' cy='144' r='.7' opacity='.5'/><circle cx='140' cy='402' r='1.4' opacity='.85'/><circle cx='175' cy='628' r='.8' opacity='.55'/><circle cx='210' cy='70' r='1' opacity='.65'/><circle cx='252' cy='300' r='.6' opacity='.4'/><circle cx='288' cy='520' r='1.2' opacity='.8'/><circle cx='322' cy='180' r='.9' opacity='.6'/><circle cx='360' cy='640' r='1.3' opacity='.8'/><circle cx='398' cy='90' r='.7' opacity='.5'/><circle cx='430' cy='440' r='1.1' opacity='.7'/><circle cx='470' cy='260' r='.8' opacity='.55'/><circle cx='505' cy='560' r='1' opacity='.65'/><circle cx='540' cy='130' r='1.4' opacity='.85'/><circle cx='578' cy='380' r='.7' opacity='.5'/><circle cx='612' cy='600' r='.9' opacity='.6'/><circle cx='648' cy='210' r='1.2' opacity='.8'/><circle cx='672' cy='470' r='.6' opacity='.4'/><circle cx='60' cy='330' r='.9' opacity='.6'/><circle cx='120' cy='250' r='1' opacity='.65'/><circle cx='20' cy='640' r='.7' opacity='.5'/><circle cx='200' cy='470' r='.6' opacity='.4'/><circle cx='270' cy='400' r='1.3' opacity='.8'/><circle cx='340' cy='90' r='.8' opacity='.55'/><circle cx='410' cy='540' r='.7' opacity='.5'/><circle cx='450' cy='340' r='1.1' opacity='.7'/><circle cx='492' cy='442' r='.6' opacity='.4'/><circle cx='530' cy='650' r='.9' opacity='.6'/><circle cx='560' cy='282' r='.7' opacity='.5'/><circle cx='600' cy='150' r='1' opacity='.65'/><circle cx='640' cy='360' r='.8' opacity='.55'/><circle cx='680' cy='560' r='1.2' opacity='.8'/><circle cx='312' cy='582' r='.7' opacity='.5'/><circle cx='160' cy='182' r='1' opacity='.65'/><circle cx='90' cy='560' r='.8' opacity='.55'/><circle cx='382' cy='302' r='.6' opacity='.4'/><circle cx='262' cy='642' r='.9' opacity='.6'/><circle cx='482' cy='112' r='.7' opacity='.5'/><circle cx='622' cy='442' r='1.1' opacity='.7'/><circle cx='30' cy='420' r='.7' opacity='.5'/></g><g fill='%233affd0'><circle cx='124' cy='360' r='1' opacity='.5'/><circle cx='356' cy='210' r='.8' opacity='.45'/><circle cx='556' cy='500' r='1' opacity='.5'/><circle cx='228' cy='560' r='.7' opacity='.4'/><circle cx='460' cy='160' r='.9' opacity='.45'/></g></svg>");
}

main, .footer { position: relative; z-index: 1; }

/* ---------- Typography helpers ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.kicker,
.statement-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.kicker::before,
.statement-eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, var(--mint), transparent);
}

.chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint); flex: none;
  box-shadow: 0 0 10px var(--mint);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}