/* ==========================================================================
   Kieweg-Design – gemeinsames Farb-, Interaktions- und Animationssystem
   Wird von style.css (Portfolio + Rechtstexte) und demos.css (3 Demo-Seiten)
   gemeinsam genutzt, damit die gesamte Website ein konsistentes System bildet.
   ========================================================================== */

:root {
  --color-dark: #1b0e02;
  --color-taupe: #c5c0b3;
  --color-bg: #e0e4e7;
  --color-olive: #788c39;
  --color-olive-dark: #4b4412;
  --color-white: #ffffff;
  --color-muted: #5c5346;

  --color-olive-soft: rgba(120, 140, 57, 0.14);
  --color-dark-soft: rgba(27, 14, 2, 0.08);
  --shadow-color: rgba(27, 14, 2, 0.18);
}

/* ---------- Fokus-Sichtbarkeit (Tastaturbedienung) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-olive-dark);
  outline-offset: 3px;
}

/* ---------- Scroll-Reveal (progressive enhancement) ---------- */
/* animations.js setzt body.js-ready, sobald IntersectionObserver aktiv ist.
   Ohne JavaScript bleiben alle Inhalte sofort sichtbar. */
.reveal {
  transition: opacity 0.7s ease, transform 0.7s ease;
}

body.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}

body.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.grid .reveal:nth-child(2),
.gallery-grid .reveal:nth-child(2) { transition-delay: 0.08s; }
.grid .reveal:nth-child(3),
.gallery-grid .reveal:nth-child(3) { transition-delay: 0.16s; }
.grid .reveal:nth-child(4),
.gallery-grid .reveal:nth-child(4) { transition-delay: 0.24s; }
.grid .reveal:nth-child(5),
.gallery-grid .reveal:nth-child(5) { transition-delay: 0.32s; }
.grid .reveal:nth-child(6),
.gallery-grid .reveal:nth-child(6) { transition-delay: 0.4s; }

/* ---------- Hero: Eintritts-Animation beim Laden ---------- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

.hero-inner > * {
  animation: heroFadeUp 0.9s ease both;
}

.hero-inner > *:nth-child(2) { animation-delay: 0.1s; }
.hero-inner > *:nth-child(3) { animation-delay: 0.2s; }
.hero-inner > *:nth-child(4) { animation-delay: 0.3s; }
.hero-inner > *:nth-child(5) { animation-delay: 0.4s; }
.hero-inner > *:nth-child(6) { animation-delay: 0.5s; }

/* ---------- Hero: animierte, organische Hintergrund-Blobs ---------- */
.hero-blobs {
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  filter: blur(70px);
  will-change: transform;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  animation: blobMove 24s ease-in-out infinite;
}

.hero-blob--1 {
  width: 420px;
  height: 420px;
  top: -10%;
  left: -8%;
  background: var(--color-olive);
  opacity: 0.55;
  animation-duration: 24s;
}

.hero-blob--2 {
  width: 340px;
  height: 340px;
  bottom: -18%;
  right: -6%;
  background: var(--color-taupe);
  opacity: 0.4;
  animation-duration: 29s;
  animation-delay: -6s;
}

.hero-blob--3 {
  width: 260px;
  height: 260px;
  top: 35%;
  right: 18%;
  background: var(--color-olive-dark);
  opacity: 0.55;
  animation-duration: 20s;
  animation-delay: -3s;
}

@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); border-radius: 50% 50% 50% 50%; }
  25% { transform: translate(30px, -25px) scale(1.08); border-radius: 45% 55% 60% 40%; }
  50% { transform: translate(-25px, 20px) scale(0.95); border-radius: 60% 40% 45% 55%; }
  75% { transform: translate(18px, 18px) scale(1.05); border-radius: 40% 60% 50% 50%; }
}

/* ---------- Lightbox für klickbare Bilder ---------- */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(27, 14, 2, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-image {
  max-width: min(900px, 100%);
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--color-olive);
  color: var(--color-dark);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.lightbox-close:hover {
  background: var(--color-olive-dark);
  color: var(--color-bg);
  transform: scale(1.08);
}

body.lightbox-locked {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  body.js-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-blob {
    animation: none;
  }
  .hero-inner > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .lightbox-overlay {
    transition: none;
  }
}

@media (max-width: 700px) {
  .hero-blobs {
    filter: blur(46px);
  }
  .hero-blob--1 { width: 260px; height: 260px; }
  .hero-blob--2 { width: 200px; height: 200px; }
  .hero-blob--3 { width: 150px; height: 150px; }
}