/* ============================================================
   Media — Generische Bild-Wrapper und Foto-Animationen
   Konsumenten: Hero, Event-Cards, Bento, History, Floating-Card

   .media-frame           Wrapper mit overflow:hidden und position:relative.
                          Aspect-Ratio per Modifier (--3-2, --4-3, --4-5, --1-1).
   .media-frame img       Cover-Fit, mit zarter Scale-Animation auf Hover-Parent.
   .media-frame--hover-zoom  Aktiviert das Hover-Scale (sonst statisches Bild).

   Animations-Helper (aus shared.css migriert):
   .fade-in        1.2s einblenden, 0.1s Delay
   .fade-in-late   1.4s einblenden, 0.6s Delay
   .ken-burns      langsamer Scale 1 → 1.08 (16s)
   ============================================================ */

/* ----- Media Frame ----- */

.media-frame {
  position: relative;
  overflow: hidden;
}

.media-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Aspect-Ratio Modifier */
.media-frame--3-2 { aspect-ratio: 3 / 2; }
.media-frame--4-3 { aspect-ratio: 4 / 3; }
.media-frame--4-5 { aspect-ratio: 4 / 5; }
.media-frame--1-1 { aspect-ratio: 1 / 1; }

/* Hover-Zoom (auf Parent oder Frame selbst) */
.media-frame--hover-zoom > img {
  transition: transform 0.6s ease;
}
.media-frame--hover-zoom:hover > img,
*:hover > .media-frame--hover-zoom > img {
  transform: scale(1.04);
}

/* ----- Animations-Helper fuer Bilder ----- */

.fade-in       { animation: fade-in 1.2s ease-out 0.1s both; }
.fade-in-late  { animation: fade-in 1.4s ease-out 0.6s both; }
.ken-burns     { animation: ken-burns 16s ease-out forwards; }