/* ═══════════════════════════════════════════════════════════════
   LICHTGRENZE BREMEN e.V. — BASE STYLES
   base.css
   Reset, typography defaults, global element styles, container,
   keyframe animations, and scroll-reveal patterns.
   ═══════════════════════════════════════════════════════════════ */

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

/* ── DOCUMENT ────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.7;
  font-size: var(--fs-body);
  background: var(--color-bg-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── GLOBAL ELEMENTS ─────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ── CONTAINER ───────────────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ── KEYFRAME ANIMATIONS ─────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-8px); }
}

/* ── SCROLL-REVEAL PATTERN ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children (workflow: .js-ready scroll-reveal) */
.stagger-children .reveal:nth-child(1) { transition-delay: 0s; }
.stagger-children .reveal:nth-child(2) { transition-delay: 0.07s; }
.stagger-children .reveal:nth-child(3) { transition-delay: 0.14s; }
.stagger-children .reveal:nth-child(4) { transition-delay: 0.21s; }
.stagger-children .reveal:nth-child(5) { transition-delay: 0.28s; }
.stagger-children .reveal:nth-child(6) { transition-delay: 0.35s; }
.stagger-children .reveal:nth-child(7) { transition-delay: 0.42s; }

/* js-ready pattern: hide reveals until JS is loaded */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(30px);
}

.js-ready .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}