/* =========================================================
   Mama.Sekunde – Flivi-Geschichte (QR-Code-Seite)
   Datei: assets/_ms-flivi-story.css

   Gehört zu sections/ms-flivi-story.liquid.

   Wird fast ausschließlich per QR-Code-Scan auf dem Handy
   geöffnet. Bild, Name und Play-Button müssen auf gängigen
   Smartphones ohne Scrollen sichtbar sein — deshalb 100svh statt
   100vh (blendet die mobile Browserleiste nicht mit ein) und
   knappe Abstände statt der großzügigen Fläche wie im Rest der
   Seite. Der Hörprobe-Player selbst ist assets/_ms-home-audio.css
   — hier nur der Rahmen drumherum plus ein größerer Play-Button,
   damit ein Kind allein draufkommt.
   ========================================================= */

.ms-flivi-story {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: 2rem;
  background: linear-gradient(
    to bottom,
    var(--ms-color-white) 0%,
    var(--ms-color-white) 50%,
    #f2e9d5 100%
  );
}

.ms-flivi-story__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

/* Wiesen-Illustration + Player als eine Bühne, direkt übereinander. */
.ms-flivi-story__stage {
  margin-bottom: 2rem;
  width: 100%;
}

/* Echter Freisteller: überlappt den Player leicht nach unten, damit
   Gras und Pusteblumen-Schirmchen am oberen, abgerundeten Rand der
   Player-Card zu wachsen scheinen. position + z-index heben das Bild
   über die Player-Card, die im Markup danach kommt. */
.ms-flivi-story__meadow {
  position: relative;
  z-index: 1;
  margin-bottom: -5.5rem;
  min-width: 100%;
  pointer-events: none;
  left: 4.4rem;
}

.ms-flivi-story__meadow-image {
  display: block;
  width: 100%;
  height: auto;
}

.ms-flivi-story__mascot-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  padding: 1.4rem;
  text-align: center;
  background: radial-gradient(
    circle at 50% 40%,
    color-mix(in srgb, var(--ms-color-blue) 55%, var(--ms-color-white)),
    var(--ms-color-creme) 72%
  );
  border: 1px dashed color-mix(in srgb, var(--ms-color-toffee) 45%, transparent);
  border-radius: 1.4rem;
}

.ms-flivi-story__mascot-placeholder p {
  margin: 0;
  max-width: 22ch;
  color: var(--ms-color-text-soft);
  font-size: var(--ms-font-size-small);
  line-height: 1.45;
}

/* Poppins liegt nur in 500/600/700 vor — 500 ist das hellste
   verfügbare Schnitt, der Name sticht mit 700 hervor. */
.ms-flivi-story__heading {
  margin: 0;
  font-size: clamp(2.6rem, 9vw, var(--ms-font-size-h2));
  font-weight: 500;
  text-wrap: pretty;
}

.ms-flivi-story__heading strong {
  font-weight: 700;
}

.ms-flivi-story__text {
  color: var(--ms-color-text-soft);
}

.ms-flivi-story__text p {
  margin: 0;
}

/* Höhere Spezifität als .ms-home-audio__player (das die
   Kartenfarbe fest auf Weiß setzt), damit die Seitenfarbe hier
   gezielt überschrieben werden kann, unabhängig von der
   Ladereihenfolge der beiden Stylesheets. */
.ms-flivi-story .ms-home-audio__player {
  background: white;
}

.ms-flivi-story__player {
  width: 100%;
  padding: 1.4rem;
}

/* Größerer Knopf als im eingebetteten Startseiten-Player: hier
   ist der Play-Button der ganze Zweck der Seite, kein Zusatz. */
.ms-flivi-story__player .ms-home-audio__play {
  width: 6.4rem;
  height: 6.4rem;
  animation: ms-flivi-story-pulse 1.8s ease-in-out infinite;
}

/* Pulsiert nur, solange noch nicht gespielt wird. Die Klasse
   „is-playing" setzt ms-home-audio.js beim play/pause/ended-Event
   — robuster als ein :has() auf das Icon-hidden-Attribut. */
.ms-flivi-story__player.is-playing .ms-home-audio__play {
  animation: none;
}

@keyframes ms-flivi-story-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0
      color-mix(in srgb, var(--ms-color-toffee) 40%, transparent);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 0 1rem
      color-mix(in srgb, var(--ms-color-toffee) 0%, transparent);
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ms-flivi-story__player .ms-home-audio__play {
    animation: none;
  }
}

.ms-flivi-story__player .ms-home-audio__icon {
  width: 2.2rem;
  height: 2.2rem;
}

.ms-flivi-story__missing-audio {
  color: var(--ms-color-text-soft);
}

@media screen and (max-width: 389px) {
  .ms-flivi-story__player .ms-home-audio__play {
    width: 5.6rem;
    height: 5.6rem;
  }
}