/* ==========================================================================
   Klaviersamples-Seite (samples.html) — "Burned Piano Collection"-Look
   ==========================================================================
   Großer, voller Hero-Banner mit dem per OpenArt (image2image, Referenz =
   ein Frame aus einem eigens dafür erstellten Referenzvideo) erzeugten
   Breitbild: verbranntes Klavier, Glutfunken, Fensterlicht durchs kaputte
   Fenster. Bewusst als eigenständiger, voll sichtbarer Banner (nicht als
   gedimmter Hintergrund hinter Text) — das Bild soll wirken, bevor der
   Download-Teil kommt. Gleiche "Bild zuerst, Text kommt danach"-Logik wie
   beim Hero auf index.html.
   ========================================================================== */

.samples-hero-banner {
  position: relative;
  /* Zieht den Banner über das globale body-padding-top, damit er ganz oben
     beginnt und der fixierte Header direkt darüber schwebt — dieselbe
     Technik wie beim Hero auf index.html. */
  margin-top: -76px;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 340px;
  max-height: 82vh;
  overflow: hidden;
}
.samples-hero-banner picture,
.samples-hero-banner img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 55%;
}

.samples-hero-banner-scrim {
  position: absolute;
  inset: 0;
  /* Sehr dezent — das Bild soll präsent bleiben, nur der untere Rand blendet
     weich in den nächsten Abschnitt über. */
  background: linear-gradient(180deg, rgba(10,8,6,0) 0%, rgba(10,8,6,0.05) 55%, var(--color-bg) 100%);
}

/* Sanft treibende Glutfunken über dem Banner */
.samples-embers {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.samples-embers span {
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe3a8 0%, #ff8a3d 55%, transparent 75%);
  box-shadow: 0 0 6px 1px rgba(255,150,60,0.75);
  opacity: 0;
  animation: samples-ember-drift 7s ease-in infinite;
}
@keyframes samples-ember-drift {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 0.9; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-70vh) translateX(var(--drift, 14px)); opacity: 0; }
}

/* Formular-Sektion unter dem Banner: Intro zentriert, Formular selbst in
   normalem Blockfluss (Zentrieren von Labels/Inputs wäre unbrauchbar). */
.samples-form-panel {
  max-width: 640px;
  margin: 0 auto;
}
.samples-form-intro {
  text-align: center;
  margin-bottom: var(--space-4);
}
.samples-form-intro .lead {
  margin-left: auto;
  margin-right: auto;
}

@media (prefers-reduced-motion: reduce) {
  .samples-embers span { animation: none; opacity: 0; }
}