/* ============================================================
   Cawi Media — Motion & Atmosphere layer
   Loaded AFTER site.css. Adds dezente Farbverläufe, moderne
   Hintergründe und scroll-basierte Animationen.
   ============================================================ */

/* ── Subtle grain overlay (paper-feel, hides gradient banding) ── */
.grain::before,
.grain-light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><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.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: 0;
}
.grain-light::before { opacity: 0.35; mix-blend-mode: normal; }
.grain > *,
.grain-light > * { position: relative; z-index: 1; }

/* ── Aurora — soft mesh gradient, warm+cool, very subtle ── */
.aurora {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.aurora::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(45% 38% at 18% 12%, rgba(21, 84, 168, 0.10), transparent 70%),
    radial-gradient(40% 32% at 88% 18%, rgba(194, 154, 100, 0.08), transparent 72%),
    radial-gradient(55% 40% at 70% 92%, rgba(21, 84, 168, 0.06), transparent 70%);
  filter: blur(20px);
  animation: auroraShift 22s ease-in-out infinite alternate;
  pointer-events: none;
}
.aurora > * { position: relative; z-index: 1; }

.aurora-dark::before {
  background:
    radial-gradient(48% 38% at 14% 18%, rgba(21, 84, 168, 0.42), transparent 70%),
    radial-gradient(38% 30% at 86% 12%, rgba(194, 154, 100, 0.18), transparent 72%),
    radial-gradient(60% 44% at 76% 94%, rgba(21, 84, 168, 0.24), transparent 70%);
  filter: blur(30px);
}

@keyframes auroraShift {
  0%   { transform: translate3d(0%, 0%, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(3%, -2%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}

/* ── Beam — thin animated gradient line (top of section) ── */
.beam {
  position: relative;
}
.beam::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(21, 84, 168, 0) 10%,
    rgba(21, 84, 168, 0.55) 50%,
    rgba(21, 84, 168, 0) 90%,
    transparent 100%
  );
  opacity: 0.7;
  pointer-events: none;
}
.beam-inverse::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 90%,
    transparent 100%
  );
}

/* ── Dot grid background — tech feel, but calm ── */
.dotgrid {
  position: relative;
}
.dotgrid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(17,17,17,0.08) 1px, transparent 0);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.dotgrid-inverse::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0);
}
.dotgrid > * { position: relative; z-index: 1; }

/* ── Warm-gradient canvas (replaces flat bg-warm where used) ── */
.bg-warm-grad {
  background:
    linear-gradient(180deg, #fafaf9 0%, #f6f5f2 100%);
}
.bg-ink-grad {
  background:
    radial-gradient(120% 80% at 50% -10%, #1a1d24 0%, #0c0e13 60%, #090a0d 100%);
}
.bg-canvas-grad {
  background:
    radial-gradient(80% 60% at 50% -10%, #f7f8fb 0%, #ffffff 55%);
}

/* ── Reveal on scroll — IntersectionObserver-driven ──
   Etwas kräftigere "Pop"-Bewegung mit weicher Spring-artiger Kurve.
   Filter blur(4px → 0) gibt zusätzliche Tiefe beim Auftauchen. */
.r-up,
.r-fade,
.r-left,
.r-right,
.r-scale,
.r-pop {
  opacity: 0;
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
  filter: blur(4px);
}
.r-up    { transform: translate3d(0, 28px, 0) scale(0.985); }
.r-left  { transform: translate3d(-28px, 0, 0) scale(0.985); }
.r-right { transform: translate3d(28px, 0, 0) scale(0.985); }
.r-scale { transform: scale(0.94); }
.r-pop   { transform: translate3d(0, 16px, 0) scale(0.9); }
.r-fade  { transform: none; filter: blur(2px); }

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

/* Static fallback — reveal.js adds this when transitions stall (sandboxed
   iframes can leave currentTime: 0 forever). Always-visible end state. */
.r-up.reveal-static,
.r-fade.reveal-static,
.r-left.reveal-static,
.r-right.reveal-static,
.r-scale.reveal-static,
.r-pop.reveal-static {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}

.r-d1 { transition-delay: 80ms; }
.r-d2 { transition-delay: 160ms; }
.r-d3 { transition-delay: 240ms; }
.r-d4 { transition-delay: 320ms; }
.r-d5 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .r-up, .r-fade, .r-left, .r-right, .r-scale, .r-pop {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ── Card hover lift ── */
.lift {
  transition: transform 420ms var(--ease-out),
              box-shadow 420ms var(--ease-out),
              border-color 420ms var(--ease-out);
}
.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px -20px rgba(17,17,17,0.16), 0 4px 12px -6px rgba(17,17,17,0.08);
}

/* ── Gradient-edge (soft top/bottom fade into page) ── */
.edge-top    { mask-image: linear-gradient(180deg, transparent 0, black 64px); -webkit-mask-image: linear-gradient(180deg, transparent 0, black 64px); }
.edge-bottom { mask-image: linear-gradient(0deg, transparent 0, black 64px); -webkit-mask-image: linear-gradient(0deg, transparent 0, black 64px); }