/* Subsønic site (KL-345). Austere geometric: near-black, #c946ff accent,
   bracket motif, bloom. Reuses the game's visual vocabulary. */

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;800;900&family=Exo+2:wght@300;400;600&display=swap");

:root {
  --bg: #07070d;
  --panel: #0b0b12;
  --accent: #c946ff;
  --accent-soft: rgba(201, 70, 255, 0.55);
  --text: #e9e9f2;
  --muted: #8a8a9a;
  --glow: 0 0 18px rgba(201, 70, 255, 0.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
}

h1, h2, .display { font-family: "Orbitron", sans-serif; letter-spacing: 0.04em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Bracket frame (the focus motif) ── */
.bracket {
  position: relative;
}
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 34px; height: 34px;
  border: 3px solid var(--accent); pointer-events: none;
}
.bracket::before { top: 0; left: 0; border-right: none; border-bottom: none; }
.bracket::after { bottom: 0; right: 0; border-left: none; border-top: none; }

/* ── Hero ── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem; overflow: hidden;
}
.hero video, .hero .hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero::after { /* legibility veil + vignette */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at center, rgba(7,7,13,0.35) 0%, rgba(7,7,13,0.82) 75%),
    linear-gradient(to bottom, rgba(7,7,13,0.5), rgba(7,7,13,0.5));
}
.hero-content { position: relative; z-index: 3; max-width: 760px; }

.logo { margin: 0 0 0.6rem; line-height: 1; }
/* The actual Subsønic wordmark, pre-rendered in Kaufhalle (its real logo
   font). Shipped as a transparent PNG, not a webfont, for licensing. */
.logomark { width: clamp(280px, 58vw, 620px); max-width: 100%; height: auto;
  display: block; margin: 0 auto; filter: drop-shadow(0 0 22px rgba(201, 70, 255, 0.5)); }
.tagline { color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.4rem); margin-bottom: 2.2rem; }

.cta {
  display: inline-block; font-family: "Orbitron", sans-serif; font-weight: 800;
  letter-spacing: 0.12em; font-size: 1.05rem; color: var(--bg);
  background: var(--accent); padding: 1rem 2.4rem; border: none;
  box-shadow: var(--glow); transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(201,70,255,0.8); text-decoration: none; }

/* ── Floating enemy-shape décor (reuses the achievement glyph shapes) ── */
.shape { position: absolute; z-index: 2; opacity: 0.18; color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-soft)); animation: drift 22s ease-in-out infinite; }
.shape svg { display: block; width: 100%; height: 100%; }
.s1 { top: 12%; left: 8%; width: 84px; animation-delay: 0s; }
.s2 { top: 64%; left: 14%; width: 64px; animation-delay: -6s; }
.s3 { top: 20%; right: 10%; width: 96px; animation-delay: -11s; }
.s4 { top: 70%; right: 12%; width: 72px; animation-delay: -3s; }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-26px) rotate(8deg); }
}

/* ── Feature beats ── */
.features { max-width: 1000px; margin: 0 auto; padding: 6rem 1.5rem; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.feature { background: var(--panel); padding: 2.2rem 1.6rem; }
.feature .icon { width: 64px; height: 64px; color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-soft)); margin-bottom: 1rem; }
.feature h2 { font-size: 1.15rem; font-weight: 800; margin-bottom: 0.6rem; }
.feature p { color: var(--muted); font-size: 0.96rem; }

.section-title { text-align: center; font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 800; margin-top: 3rem; text-shadow: var(--glow); }

/* ── Footer ── */
footer { border-top: 1px solid rgba(201,70,255,0.18); padding: 2.4rem 1.5rem;
  text-align: center; color: var(--muted); font-size: 0.85rem; }
footer a { margin: 0 0.6rem; }

/* ── Simple content page (privacy) ── */
.page { max-width: 760px; margin: 0 auto; padding: 5rem 1.5rem; }
.page h1 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: 0.4rem; text-shadow: var(--glow); }
.page .updated { color: var(--muted); font-size: 0.85rem; margin-bottom: 2.5rem; }
.page h2 { font-family: "Orbitron", sans-serif; font-size: 1.1rem; color: var(--accent);
  margin: 2rem 0 0.6rem; }
.page p, .page li { color: #c9c9d6; margin-bottom: 0.8rem; }
.page ul { padding-left: 1.4rem; }
.back { display: inline-block; margin-bottom: 2rem; font-family: "Orbitron", sans-serif;
  font-size: 0.8rem; letter-spacing: 0.1em; }

@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }

/* ── Respect reduced motion (ties to the photosensitivity stance) ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shape { animation: none; }
  .cta { transition: none; }
  /* Hero video is paused + hidden via JS when reduced motion is set;
     the poster image shows instead. */
}