/* atmosphere.css — subtile Hintergründe, Verläufe, Körnung, Reveal-Animationen.
   Additiv zu site.css + motion.css. Die Klassen sind atmospärisch gedacht:
   Farbverläufe bleiben im Cawi-Blau-Spektrum, Körnung ist unterhalb 3 %.
   Alle Effekte respektieren prefers-reduced-motion. */

/* ────────────────────────────────────────────────────────────────
   0. Farbtoken-Ergänzungen
   ──────────────────────────────────────────────────────────────── */
:root {
  --atm-accent:   21 84 168;   /* Cawi-Blau RGB */
  --atm-accent-2: 52 131 224;  /* helleres Blau für Glow */
  --atm-warm:     249 246 240; /* warmes Weiß (matching bg-warm) */
  --atm-ink:      15 18 22;
}

/* ────────────────────────────────────────────────────────────────
   1. Hintergrund-Varianten
   ──────────────────────────────────────────────────────────────── */

/* Warmer Gradient (ersetzt bg-warm mit Tiefe) */
.bg-warm-grad {
  position: relative;
  background:
    linear-gradient(180deg,
      rgb(var(--atm-accent) / 0.02) 0%,
      var(--bg-warm, #f9f6f0) 40%,
      var(--bg-warm, #f9f6f0) 100%);
}

/* Cream — sehr weicher warmer Off-White-Verlauf für About-Sections */
.bg-cream {
  position: relative;
  background:
    radial-gradient(80% 60% at 80% 0%, rgb(var(--atm-accent) / 0.04) 0%, transparent 60%),
    linear-gradient(180deg, #fbf8f2 0%, #f5f1e8 100%);
}

/* Soft Off-White für Cawi-Way (kühler, ohne warmen Stich) */
.bg-soft {
  position: relative;
  background:
    linear-gradient(180deg, #fafafa 0%, #f3f4f6 100%);
}

/* Tiefer Ink-Gradient für Stats (anstatt nur Dotgrid auf Weiß) */
.bg-stats-ink {
  position: relative;
  background:
    radial-gradient(700px 400px at 90% 10%, rgb(var(--atm-accent) / 0.30), transparent 60%),
    radial-gradient(500px 300px at 10% 90%, rgb(var(--atm-accent-2) / 0.18), transparent 60%),
    linear-gradient(180deg, #0d1015 0%, #0a0c10 100%);
  color: #fff;
}

/* Ink-Gradient (tiefer Nachthimmel statt Vollton) */
.bg-ink-grad {
  position: relative;
  background:
    radial-gradient(900px 500px at 80% 0%, rgb(var(--atm-accent) / 0.18), transparent 60%),
    radial-gradient(700px 400px at 10% 100%, rgb(var(--atm-accent-2) / 0.10), transparent 60%),
    linear-gradient(180deg, #0f1216 0%, #0b0e12 100%);
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────
   2. Aurora — sehr weiche, bewegte Farbwolken (deutlich dezenter)
   ──────────────────────────────────────────────────────────────── */
.aurora { position: relative; isolation: isolate; overflow: hidden; }
.aurora::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(28% 22% at 18% 28%, rgb(var(--atm-accent) / 0.05) 0%, transparent 70%),
    radial-gradient(24% 18% at 82% 65%, rgb(var(--atm-accent-2) / 0.04) 0%, transparent 70%);
  filter: blur(6px);
  animation: atm-aurora 32s ease-in-out infinite alternate;
}
.aurora > * { position: relative; z-index: 1; }

.aurora-dark::before {
  background:
    radial-gradient(28% 22% at 18% 28%, rgb(var(--atm-accent) / 0.14) 0%, transparent 70%),
    radial-gradient(24% 18% at 82% 65%, rgb(var(--atm-accent-2) / 0.10) 0%, transparent 70%);
}

/* Soft fade-out gradient applied to last section before the dark footer.
   Removes the awkward aurora-meets-white-meets-black band. */
.fade-to-footer {
  position: relative;
}
.fade-to-footer::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, rgba(15,18,22,0.04) 60%, rgba(15,18,22,0.10) 100%);
  pointer-events: none;
  z-index: 0;
}

@keyframes atm-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.9; }
  50%  { transform: translate3d(2%, -1%, 0) scale(1.04); opacity: 1; }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.02); opacity: 0.85; }
}

/* ────────────────────────────────────────────────────────────────
   3. Beam — schmaler diagonaler Lichtstreifen
   ──────────────────────────────────────────────────────────────── */
.beam { position: relative; isolation: isolate; }
.beam::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 0%,
    transparent 42%,
    rgb(var(--atm-accent) / 0.045) 50%,
    transparent 58%,
    transparent 100%);
  mix-blend-mode: multiply;
}
.beam > * { position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────────
   4. Dot-Grid — subtiles Raster-Pattern
   ──────────────────────────────────────────────────────────────── */
.dotgrid { position: relative; isolation: isolate; }
.dotgrid::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgb(var(--atm-ink) / 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: 0 0;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 40%, transparent 100%);
  opacity: 0.75;
}
.dotgrid > * { position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────────
   5. Körnung — feines Rauschen (SVG-Noise als Data-URI)
   ──────────────────────────────────────────────────────────────── */
.grain,
.grain-light {
  position: relative;
  isolation: isolate;
}
.grain::after,
.grain-light::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: overlay;
}
.grain::after       { opacity: 0.06; }
.grain-light::after { opacity: 0.025; }
.grain > *, .grain-light > * { position: relative; z-index: 1; }

/* ────────────────────────────────────────────────────────────────
   6. Reveal-Animationen (zusätzlich zu motion.css)
   Diese ergänzen .r-up/.r-left/.r-right nur falls sie in motion.css
   fehlen. Falls motion.css bereits welche liefert, gewinnen diese
   durch späteres Laden NICHT — wir sind defensiv.
   ──────────────────────────────────────────────────────────────── */
.r-up, .r-fade, .r-left, .r-right, .r-scale {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity  700ms cubic-bezier(.2, .7, .1, 1),
    transform 700ms cubic-bezier(.2, .7, .1, 1);
  will-change: opacity, transform;
}
.r-fade  { transform: none; }
.r-left  { transform: translate3d(-24px, 0, 0); }
.r-right { transform: translate3d(24px, 0, 0); }
.r-scale { transform: scale(0.96); }

.r-up.is-in, .r-fade.is-in, .r-left.is-in, .r-right.is-in, .r-scale.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* ────────────────────────────────────────────────────────────────
   7. Lift — dezenter Hover-Lift für Cards
   ──────────────────────────────────────────────────────────────── */
.lift {
  transition:
    transform 380ms cubic-bezier(.2, .7, .1, 1),
    box-shadow 380ms cubic-bezier(.2, .7, .1, 1),
    background-color 380ms ease;
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgb(var(--atm-ink) / 0.04),
    0 24px 48px -24px rgb(var(--atm-ink) / 0.16),
    0 8px 20px -12px rgb(var(--atm-accent) / 0.10);
}

/* ────────────────────────────────────────────────────────────────
   8. Accessibility
   ──────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
  .r-up, .r-fade, .r-left, .r-right, .r-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .lift { transition: none; }
  .lift:hover { transform: none; }
}