/* ==========================================================================
   sei mal digital — foundation stylesheet
   Layout, typography, color system, and the motion/reveal states driven
   by script.js (statement text reveal, reduced-motion fallbacks).
   ========================================================================== */

:root {
  /* --- color system --- */
  --color-bg: #0a0a0b;
  --color-bg-raised: #101012;
  --color-fg: #f4efe9;          /* warm off-white */
  --color-fg-dim: rgba(244, 239, 233, 0.62);
  --color-fg-faint: rgba(244, 239, 233, 0.34);
  --color-hairline: rgba(244, 239, 233, 0.14);
  --color-accent: #ff0080;      /* vivid magenta — represents movement/data */
  --color-accent-dim: rgba(255, 0, 128, 0.5);
  --color-fg-tag: rgba(244, 239, 233, 0.48); /* data-tag annotations — between --color-fg-faint and --color-fg-dim */

  /* --- type ---
     Space Grotesk carries all editorial/display type; IBM Plex Mono is used
     sparingly for data-like meta text (labels, footer, annotations). Both
     stacks lead with the web font but stay fully usable on the system
     fallback alone if fonts.googleapis.com is unreachable. */
  --font-sans:
    "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono:
    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* --- layout --- */
  --content-width: 72rem;
  --edge-padding: clamp(1.25rem, 5vw, 4rem);
  --section-padding-y: clamp(5rem, 14vw, 10rem);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-slow: 900ms;
}

/* ==========================================================================
   reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* --color-bg is the single canonical background for the whole page —
     html, body and the canvas's own stacking all resolve to it, so there
     is never a visible seam (this matters most on mobile, where
     overscroll/rubber-band and dynamic-toolbar resizes can briefly expose
     areas beyond the normal document background). */
  background: var(--color-bg);
  min-height: 100%;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, dt, figure {
  margin: 0;
}

a {
  color: inherit;
}

img, canvas {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

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

/* ==========================================================================
   layout helpers
   ========================================================================== */

.hero__content,
.project,
.closing__footer {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--edge-padding);
}

/* ==========================================================================
   hero
   ========================================================================== */

/* The canvas is transparent (script.js only ever clearRect()s it — never
   an opaque fill) and stays a plain sibling of body's real content, so
   body itself is free to carry its own --color-bg background (needed for
   mobile overscroll consistency) without hiding the visualization: canvas
   and content are both explicitly positioned/z-indexed above it, ordered
   canvas (0) below content (1). See also `main`, below. */
#motion-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* never intercepts mouse/touch */
}

/* main (statement/project/closing) needs the same explicit promotion as
   .hero so it stacks above the canvas too. */
main {
  position: relative;
  z-index: 1;
}

.hero {
  position: relative; /* containing block for .hero__continue; stacks above the canvas */
  z-index: 1;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

.hero__content {
  padding-block: clamp(6rem, 16vh, 10rem);
}

/* A brand signature, not a conventional eyebrow: still typographic and
   minimal, but with enough size/weight/contrast to read as a deliberate
   mark rather than a caption — stays clearly subordinate to the headline
   below it via size and the extra breathing room in margin-bottom. */
.hero__eyebrow {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--color-fg-dim);
  margin-bottom: clamp(1.75rem, 4.5vw, 2.75rem);
  opacity: 0;
  animation: rise var(--duration-slow) var(--ease-out) forwards;
  animation-delay: 80ms;
}

/* Shared accent mark for small, deliberate punctuation-level emphasis
   (e.g. the closing period of the hero headline) — never whole words. */
.accent {
  color: var(--color-accent);
}

.hero__headline {
  font-size: clamp(3.25rem, 10.5vw, 9.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.96;
  margin: 0;
  opacity: 0;
  animation: rise var(--duration-slow) var(--ease-out) forwards;
  animation-delay: 200ms;
}

/* Inline on mobile (wraps naturally); an intentional block break appears
   only once there is room for the editorial two-line composition. */
.hero__headline-break {
  display: inline;
}

@media (min-width: 700px) {
  .hero__headline-break {
    display: block;
  }
}

.hero__descriptor {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
  opacity: 0;
  animation: rise var(--duration-slow) var(--ease-out) forwards;
  animation-delay: 380ms;
}

/* Small data-viz-style annotations — used sparingly (hero + project kicker
   only). Read as scientific/exhibit labels, not UI chrome. */
.data-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-tag);
}

.data-tag--hero {
  position: absolute;
  left: calc(var(--edge-padding) + 1rem);
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  margin: 0;
  z-index: 1;
}

@media (max-width: 640px) {
  .data-tag--hero {
    display: none; /* avoid crowding the mobile scroll indicator */
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__continue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.75rem);
  transform: translateX(-50%);
  z-index: 1;
}

.hero__continue-line {
  display: block;
  width: 1px;
  height: clamp(2.5rem, 6vh, 3.5rem);
  background: linear-gradient(
    to bottom,
    transparent,
    var(--color-fg-faint) 40%,
    var(--color-fg-faint) 100%
  );
  animation: continue-pulse 2.6s ease-in-out infinite;
}

@keyframes continue-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__headline,
  .hero__descriptor {
    opacity: 1;
    animation: none;
  }
  .hero__continue-line {
    animation: none;
    opacity: 0.5;
  }
}

/* ==========================================================================
   statement section
   ========================================================================== */

.statement {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-padding-y) var(--edge-padding);
  text-align: center;
}

.statement__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Editorial reveal: the two setup lines rise in first (staggered), then
   .statement__reveal gets its "is-visible" class ~560ms later via
   script.js — see revealStatement(). */
.statement__line,
.statement__reveal {
  opacity: 0;
  transform: translateY(2.5rem);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.statement__text.is-visible .statement__line {
  opacity: 1;
  transform: translateY(0);
}

.statement__text.is-visible .statement__line:nth-of-type(2) {
  transition-delay: 140ms;
}

.statement__line {
  font-size: clamp(2rem, 6.5vw, 5rem);
  color: var(--color-fg);
}

.statement__reveal {
  margin-top: clamp(1rem, 3vw, 1.75rem);
  font-size: clamp(2.5rem, 8vw, 6.5rem);
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.statement__reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  letter-spacing: -0.02em;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out),
    letter-spacing 1100ms var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .statement__line,
  .statement__reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   project / Österreich radelt
   ========================================================================== */

.project {
  padding-block: var(--section-padding-y);
}

.project__intro {
  max-width: 42rem;
}

.project__intro .data-tag {
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
}

.project__title {
  font-size: clamp(2.25rem, 6vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.project__text {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-fg-dim);
  max-width: 38rem;
}

.stats {
  margin-top: clamp(4.5rem, 11vw, 8rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 3.75rem);
}

.stats__item {
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.75rem, 3.5vw, 2.5rem);
  border-top: 1px solid var(--color-hairline);
}

.stats__value {
  display: block;
  /* Sized so "440 Mio.+" (the longest value, kept on one line via a
     non-breaking space in the markup) fits cleanly within its column at
     the three-column desktop layout without wrapping or overflowing. */
  font-size: clamp(3rem, 7vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.98;
  color: var(--color-fg);
}

.stats__label {
  display: flex;
  align-items: center;
  gap: 0.6em;
  order: 2;
  margin-top: 0.85rem;
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 1vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}

.stats__label::before {
  content: "";
  display: block;
  width: 1.1em;
  height: 1px;
  background: var(--color-accent-dim);
}

@media (min-width: 56rem) {
  .stats {
    flex-direction: row;
    gap: clamp(2rem, 4vw, 3rem);
  }

  .stats__item {
    flex: 1;
    padding-top: 2.25rem;
  }
}

/* ==========================================================================
   closing
   ========================================================================== */

.closing {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--section-padding-y) var(--edge-padding);
}

.closing__statement {
  font-size: clamp(1.75rem, 5vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.28;
  max-width: 44rem;
}

.closing__footer {
  margin-top: clamp(5rem, 12vw, 8rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.closing__brand {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-fg-dim);
}

.closing__tagline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}

.closing__links {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--color-fg-faint);
}

.closing__link {
  text-decoration: none;
  color: var(--color-fg-dim);
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.closing__link:hover,
.closing__link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent-dim);
}

.closing__divider {
  margin: 0 0.6em;
  color: var(--color-fg-faint);
}

/* ==========================================================================
   legal page (impressum.html) — same brand language, static and readable,
   no canvas. A single narrow column; structure comes from spacing,
   hairlines and type, never boxes/cards.
   ========================================================================== */

.legal {
  max-width: 46rem; /* ~700-740px depending on root size */
  margin-inline: auto;
  padding: clamp(4.5rem, 12vw, 7.5rem) var(--edge-padding) clamp(4rem, 10vw, 6rem);
}

.legal__heading {
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-fg);
}

.legal__block {
  margin-top: clamp(3.5rem, 8vw, 5rem);
}

.legal__block + .legal__block {
  margin-top: clamp(3rem, 7vw, 4.5rem);
}

.legal__entry {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
  line-height: 1.65;
  color: var(--color-fg-dim);
}

.legal__entry-group {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
}

.legal__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}

.legal__facts {
  margin-top: clamp(1.75rem, 4vw, 2.25rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem 2.5rem;
}

@media (min-width: 34rem) {
  .legal__facts {
    grid-template-columns: 1fr 1fr;
  }
}

.legal__fact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-hairline);
}

.legal__fact dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fg-faint);
}

.legal__fact dd {
  margin: 0;
  color: var(--color-fg);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  word-break: break-word;
}

.legal__link {
  text-decoration: none;
  color: var(--color-fg);
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.legal__link:hover,
.legal__link:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent-dim);
}

.legal__hairline {
  margin: clamp(3rem, 7vw, 4.5rem) 0 0;
  border: none;
  border-top: 1px solid var(--color-hairline);
}

.legal__back {
  display: inline-block;
  margin-top: clamp(4rem, 9vw, 6rem);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--color-fg-dim);
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

.legal__back:hover,
.legal__back:focus-visible {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent-dim);
}