/* ============================================
   startendrang. — Sofa Songs Placeholder
   Wohnzimmer-Simulation: Sofa + Text auf der Wand
   ============================================ */

/* --- Self-hosted Caveat Font (kein Google-Fonts-Request) --- */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Caveat-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/Caveat-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

html {
  scroll-behavior: smooth;
}

body {
  height: 200vh;
  overflow-x: hidden;
}

/* --- Layer 0: Wandfarbe --- */
.scene {
  position: fixed;
  inset: 0;
  background: var(--wall-color, #e8e2d8);
  transition: background-color 100ms ease;
}

/* --- Layer 1: Wandtextur (alte feTurbulence-Variante, nur für Lichtrelief bei Abend) --- */
.wall-texture {
  position: absolute;
  inset: 0;
  opacity: var(--texture-opacity, 0.4);
  filter: url(#wall-surface);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* === HINTERGRUND-PAPIERTEXTUR ===
   800×800 Tile via Efros-Freeman Image-Quilting aus 200×200 Quelle
   (tools/make_texture.py). Nähte laufen als Zickzack durch visuell
   ähnliche Bereiche → unsichtbar kachelbar. KEIN z-index — stackt per
   DOM-Reihenfolge UNTER den Licht-Layern, damit Fensterlicht + Lampen
   AUF der Textur liegen (physikalisch korrekt). */
.paper-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url('assets/paper-texture.png') 0 0 / 800px 800px repeat;
  opacity: var(--paper-opacity, 0.5);
  mix-blend-mode: multiply;
}

/* --- Layer 2: Fensterlicht --- */
.window-light {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 120% 100% at 15% 25%,
    rgba(255, 252, 245, 0.6) 0%,
    rgba(255, 248, 230, 0.2) 35%,
    transparent 75%
  );
  mix-blend-mode: screen;
  opacity: var(--window-opacity, 1);
  transition: opacity 200ms ease;
}

/* --- Layer 3: Lampenlichter (weiche Übergänge, kein sichtbarer Rand) --- */
.lamp-1 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 55% 70% at 20% 72%,
    rgba(255, 195, 100, var(--lamp1-intensity, 0)) 0%,
    rgba(255, 185, 85, calc(var(--lamp1-intensity, 0) * 0.3)) 22%,
    rgba(255, 175, 75, calc(var(--lamp1-intensity, 0) * 0.08)) 45%,
    transparent 62%
  );
  mix-blend-mode: screen;
}

.lamp-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 50% 60% at 80% 32%,
    rgba(255, 200, 110, var(--lamp2-intensity, 0)) 0%,
    rgba(255, 190, 95, calc(var(--lamp2-intensity, 0) * 0.25)) 22%,
    rgba(255, 180, 80, calc(var(--lamp2-intensity, 0) * 0.06)) 45%,
    transparent 60%
  );
  mix-blend-mode: screen;
}

/* --- Layer 4: Schatten & Vignette --- */
.shadows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    transparent 40%,
    rgba(30, 25, 20, var(--shadow-intensity, 0.05)) 100%
  );
  mix-blend-mode: multiply;
}

/* --- Content: Sofa + Title als zentrierte Einheit, leicht nach oben --- */
.content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 5vh;
  pointer-events: none;
  /* Große Screens: Content zusammenhalten */
  max-width: 1400px;
  margin-inline: auto;
}

/* --- Sofa (Möbelstück im Raum, zentriert) --- */
.sofa {
  flex-shrink: 0;
  width: clamp(280px, 30vw, 680px);
}

.sofa-img {
  width: 100%;
  height: auto;
  display: block;
  /* viewBox im SVG direkt zugeschnitten, kein clip-path nötig */
  filter:
    brightness(var(--sofa-brightness, 1))
    saturate(var(--sofa-saturation, 1));
  transition: filter 200ms ease;
  opacity: 0;
  animation: fadeUp 800ms ease-out 200ms both;
}

/* --- Layer 5: Grain --- */
.grain {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  opacity: var(--grain-opacity, 0.06);
  mix-blend-mode: multiply;
  filter: url(#grain);
}

/* --- Subtitle: "kommt.bald." — handschriftlich, unter dem EP-Titel --- */
.subtitle {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.7rem);
  color: var(--text-color, #5a5045);
  letter-spacing: 0.02em;
  margin-top: 2vh;
  opacity: 0;
  animation: fadeUp 800ms ease-out 400ms both;
}

/* --- Sofa Songs EP-Titel — direkt unter dem Sofa, zentriert --- */
.title-album {
  width: clamp(220px, 22vw, 400px);
  height: auto;
  display: block;
  margin-top: 1vh;
  opacity: 0;
  animation: fadeUp 800ms ease-out 300ms both;
}

/* --- Signatur oben links (Hilowitz-Stil, stille Signatur) --- */
/* Signatur & Toggle liegen beide in einer 36px hohen Box bei top:1.5rem,
   damit ihre vertikalen Mitten auf exakt derselben Linie sitzen.
   Toggle: padding 0.5rem + 20px Icon = 36px. Signatur: height 36px + object-fit. */
.signature {
  position: fixed;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 20;
  width: clamp(110px, 11vw, 200px);
  height: 2.25rem;           /* = 36px, matched zu Toggle-Box */
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  animation: fadeUp 800ms ease-out 500ms both;
  pointer-events: none;
}

/* --- Toggle --- */
.toggle {
  position: fixed;
  top: calc(1.5rem + 3px);  /* feinjustierung — optisch auf Signatur-Mitte */
  right: 1.5rem;
  z-index: 20;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-color, #5a5045);
  padding: 0.5rem;
  border-radius: 50%;
  transition: color 200ms ease;
  opacity: 0;
  animation: fadeUp 400ms ease-out 900ms both;
}

.toggle:hover {
  opacity: 0.8;
}

.toggle:active {
  transform: scale(0.95);
}

.toggle:focus-visible {
  outline: 2px solid var(--text-color, #5a5045);
  outline-offset: 2px;
}

.toggle-icon {
  display: block;
}

/* --- Animations --- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUpSubtle {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 0.55;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sofa-img,
  .subtitle,
  .title-album,
  .signature,
  .toggle {
    animation: none;
    opacity: 1;
  }
}

/* --- Responsive: Tablets (Portrait) --- */
@media (max-width: 1024px) {
  .sofa {
    width: clamp(260px, 38vw, 480px);
  }
}

/* --- Responsive: Phones --- */
@media (max-width: 768px) {
  .content {
    padding-bottom: 4vh;
  }

  .window-light {
    background: radial-gradient(
      ellipse 200% 70% at 35% 15%,
      rgba(255, 252, 245, 0.6) 0%,
      rgba(255, 248, 230, 0.2) 35%,
      transparent 75%
    );
  }

  .lamp-1 {
    background: radial-gradient(
      ellipse 160% 50% at 25% 65%,
      rgba(255, 195, 100, var(--lamp1-intensity, 0)) 0%,
      rgba(255, 185, 85, calc(var(--lamp1-intensity, 0) * 0.25)) 18%,
      rgba(255, 175, 75, calc(var(--lamp1-intensity, 0) * 0.06)) 38%,
      transparent 52%
    );
  }

  .lamp-2 {
    background: radial-gradient(
      ellipse 140% 45% at 75% 40%,
      rgba(255, 200, 110, var(--lamp2-intensity, 0)) 0%,
      rgba(255, 190, 95, calc(var(--lamp2-intensity, 0) * 0.2)) 18%,
      rgba(255, 180, 80, calc(var(--lamp2-intensity, 0) * 0.04)) 38%,
      transparent 52%
    );
  }

  .sofa {
    width: clamp(260px, 75vw, 380px);
  }

  .title-album {
    width: clamp(200px, 55vw, 320px);
  }

  .signature {
    top: 1rem;
    left: 1rem;
    width: clamp(90px, 28vw, 140px);
    /* height bleibt 2.25rem (=36px), matched zu Mobile-Toggle (top:1rem + padding) */
  }

  .toggle {
    top: calc(1rem + 3px);
    right: 1rem;
  }
}