/* =====================================================================
   css/rs/webapp.css — Startseite in der installierten Web-App (26.09.2026)
   Nur wenn js/start.js die App erkennt (html.is-app / .rs-start.is-app), legt es
   die Ebenen .rs-app-bg und .rs-app-platz an. Im Browser gibt es diese Elemente
   nicht → alle Regeln hier greifen dort nicht, die Homepage bleibt unverändert.
   Hinten: laufendes Cover groß, unscharf, getönt, langsame Ken-Burns-Drift (26 s).
   Vorn (Handy): scharfe, leicht gedrehte Coverfläche mit Schein im Takt (--ru-puls).
   Titelwechsel: weiche Überblendung 1,2 s. Reduzierte Bewegung: resignal.css
   schaltet Animationen/Übergänge global ab, puls.js setzt dann nichts.
   ===================================================================== */

/* Show-Motiv in der App ausblenden (kein Motiv→Cover-Sprung). Twitch-Live behält sein Motiv. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .rs-start:not(.is-tw) .rs-start__bild > picture { opacity: 0; }
}
html.is-app .rs-start:not(.is-tw) .rs-start__bild > picture { opacity: 0; transition: opacity .6s ease; }

/* ---------------- Hintergrund: Cover groß + unscharf ---------------- */
.rs-app-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rs-start.is-tw .rs-app-bg { display: none; }
.rs-app-bg img { position: absolute; left: -15%; top: -15%; width: 130%; height: 130%; object-fit: cover;
  filter: blur(30px) saturate(1.45) brightness(.6); opacity: 1; transition: opacity 1.2s ease;
  transform-origin: 60% 40%; animation: rs-app-drift 26s ease-in-out infinite alternate; will-change: transform; }
.rs-app-bg img.is-neu { opacity: 0; }
@keyframes rs-app-drift {
  0%   { transform: scale(1.04) translate3d(-2%, 1%, 0); }
  50%  { transform: scale(1.16) translate3d(2%, -2%, 0); }
  100% { transform: scale(1.1) translate3d(-1%, 2.5%, 0); }
}

/* Pause: ruhiger, dunkler */
.rs-start[data-zustand="pause"] .rs-app-bg img { filter: blur(30px) saturate(1) brightness(.48); }

/* ---------------- Vordergrund: scharfe Coverfläche (Handy) ---------------- */
.rs-app-platz { display: none; }
.rs-app-karte { position: absolute; top: 50%; right: 28px; aspect-ratio: 1; height: min(calc(100% - 40px), 300px);
  transform: translateY(-50%) rotate(-4deg); opacity: 1; transition: opacity .8s ease;
  animation: rs-app-schweb 12s ease-in-out infinite; }
.rs-start:not(.has-appcover) .rs-app-karte { opacity: 0; }
@keyframes rs-app-schweb {
  0%, 100% { transform: translateY(-50%) rotate(-4deg); }
  50%      { transform: translateY(calc(-50% - 7px)) rotate(-2.6deg); }
}
.rs-app-karte__bild { position: absolute; inset: 0; overflow: hidden; border-radius: var(--ru-r-2); background: var(--ru-ink-2);
  box-shadow: var(--ru-shadow-cover), 0 0 0 1px rgba(245,239,230,.14);
  transform: scale(calc(1 + (var(--ru-puls, 1) - 1) * .06)); transition: transform .09s linear, filter .6s ease; }
.rs-app-karte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 1.2s ease; }
.rs-app-karte__bild img.is-neu { opacity: 0; }
/* Lichtkante oben links */
.rs-app-karte__bild::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(135deg, rgba(245,239,230,.16) 0%, rgba(245,239,230,0) 38%); }
/* Schein in Show-Farbe, pulst mit der Bassdrum (--ru-puls 1,0–1,4) */
.rs-app-karte__schein { position: absolute; inset: -48%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rs-start-tint, var(--ru-cyan)) 90%, transparent) 46%, color-mix(in srgb, var(--rs-start-tint, var(--ru-cyan)) 38%, transparent) 70%, transparent 100%);
  opacity: calc(.55 + (var(--ru-puls, 1) - 1) * 1.1); transform: scale(calc(.9 + (var(--ru-puls, 1) - 1) * .5));
  transition: opacity .09s linear, transform .09s linear; }
/* Ohne echtes Signal (Safari/iOS, CORS): ruhiges Atmen statt Takt, nur solange es spielt */
html:not([data-puls]) body[data-playing="true"] .rs-app-karte__schein { animation: rs-app-atem 4.8s ease-in-out infinite; }
@keyframes rs-app-atem {
  0%, 100% { opacity: .42; transform: scale(.9); }
  50%      { opacity: .72; transform: scale(1.04); }
}
.rs-start[data-zustand="pause"] .rs-app-karte__bild { filter: saturate(.7) brightness(.85); }
.rs-start[data-zustand="fehler"] .rs-app-karte { display: none; }

@media (max-width: 820px) {
  .rs-start.is-app .rs-app-platz { display: block; position: relative; flex: 1 1 0; min-height: 170px; margin: 0 -20px -2px; }
  /* Tönung: oben mehr Cover-Farbe zeigen, unten dunkel für die Schrift */
  .rs-start.is-app:not(.is-tw) .rs-start__tint { background:
    linear-gradient(0deg, rgba(13,10,31,.98) 0%, rgba(13,10,31,.8) 36%, rgba(13,10,31,.3) 68%, color-mix(in srgb, var(--rs-start-tint) 20%, transparent) 100%); }
}

/* Desktop / Tablet in der App: Cover rechts bleibt, bekommt die Drehung */
@media (min-width: 821px) {
  .rs-start.is-app .rs-start__cover { transform: rotate(-3deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rs-app-bg img, .rs-app-karte, .rs-app-karte__schein { animation: none !important; }
}
html[data-bewegung="reduziert"] .rs-app-bg img, html[data-bewegung="reduziert"] .rs-app-karte,
html[data-bewegung="reduziert"] .rs-app-karte__schein { animation: none !important; }