/* ==========================================================================
   hero-animated.css — hero mobil „viu", partajat de paginile de detaliu.

   Transformă hero-ul mobil static într-unul animat:
   - Ken Burns (drift lent zoom/pan) pe imaginea activă;
   - dacă entitatea are galerie (>=2 imagini) → crossfade automat între imagini;
   - respectă `prefers-reduced-motion` (fără mișcare, imagine fixă).

   Folosit de:
   - place.php — „Unde ieșim" + „Shopping & Lifestyle" (ambele nișe);
   - event.php — pagina de eveniment (F0.4).

   Doar mobil (<992px); desktopul rămâne neatins. Zero librării externe.
   Se încarcă DUPĂ CSS-ul de detaliu al paginii (place-detail-mobile.css /
   event-detail-mobile.css), deci învinge la egalitate de specificitate.

   Clasele sunt neutre (`hero-animated-*`) tocmai ca să poată fi refolosite de
   orice pagină de detaliu, inclusiv cele viitoare (cinema/teatru, F7).
   ========================================================================== */

@media (max-width: 991.98px) {
  /* Stratul de imagini — umple containerul hero (a cărui înălțime vine din
     CSS-ul paginii) și decupează Ken Burns-ul. */
  .hero-animated-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background: #e2e8f0;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
  }

  /* Fundal ambiental sincronizat cu cadrul activ. Pentru cadrele landscape el
     rămâne vizibil în jurul fotografiei; pentru cadrele portrait este acoperit
     complet. Stratul stă peste cadrul ieșit din scenă, astfel încât posterul
     precedent nu traversează marginile transparente în timpul crossfade-ului. */
  .hero-animated-backdrop {
    position: absolute;
    inset: -28px;
    z-index: 1;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    filter: blur(22px) saturate(0.9);
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 300ms ease;
  }
  .hero-animated-media.has-ambient-backdrop .hero-animated-backdrop {
    opacity: 1;
  }

  /* Fiecare slide (inclusiv <img>-ul principal, care e și slide 0) e suprapus
     absolut și face crossfade prin opacity. */
  .hero-animated-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0;
    transform: scale(1);
    transition: opacity 900ms ease;
    will-change: opacity, transform;
    z-index: 0;
  }
  .hero-animated-slide.is-landscape {
    object-fit: contain;
    object-position: center center;
  }
  .mobile-event-hero-img.hero-animated-slide:not(.is-landscape) {
    object-position: center top;
  }
  /* Fotografiile de locație nu sunt postere. Chiar dacă sursa este portrait,
     punctul de interes rămâne de regulă în centrul cadrului (fațadă, terasă,
     interior), exact ca în cardul din feed și în previewurile formularului.
     Specificitatea separată împiedică regula generică `center top`, utilă
     evenimentelor, să mute hero-ul locației către partea de sus a fotografiei. */
  body.place-page .mobile-event-hero-img.hero-animated-slide:not(.is-landscape) {
    object-position: center center;
  }
  .hero-animated-slide.is-active {
    opacity: 1;
    z-index: 2;
  }

  /* Slide-urile decorative sunt suprapuse peste cel principal, deci — fiind
     ultimele în DOM — ele captau tap-ul; nefiind `.clickable-zoom`, tap-ul pe
     hero nu deschidea nimic. Le scoatem din calea pointerului: singurul element
     interactiv rămâne slide-ul principal, a cărui sursă de zoom e actualizată de
     JS după cadrul vizibil. */
  .hero-animated-slide:not(.clickable-zoom) {
    pointer-events: none;
  }

  /* Ken Burns doar pe slide-ul activ; activat de JS (`.kb-on`), ca fără JS să
     rămână hero static (degradare grațioasă). */
  .hero-animated-media.kb-on .hero-animated-slide.is-active {
    animation: heroAnimatedKenBurns 14s ease-in-out infinite alternate;
  }
  .hero-animated-media.kb-on .hero-animated-slide.is-active.is-landscape {
    animation: heroAnimatedLandscape 14s ease-in-out infinite alternate;
  }
  @keyframes heroAnimatedKenBurns {
    from { transform: scale(1.02) translate3d(0, 0, 0); }
    to   { transform: scale(1.14) translate3d(-1.5%, 1.5%, 0); }
  }
  @keyframes heroAnimatedLandscape {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.035) translate3d(0, 0, 0); }
  }

  /* Scrim-ul stă explicit peste imagini, dar sub recuzită (badge/save/share). */
  .mobile-event-hero-scrim {
    z-index: 1;
  }

  /* Indicator discret, comun evenimentelor și locațiilor. Poziția îl ține
     sub acțiunile hero, dar deasupra zonei de tranziție către cardul-titlu. */
  .hero-animated-pagination {
    position: absolute;
    left: 50%;
    bottom: 118px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 6px 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateX(-50%);
  }

  /* În markup-ul actual indicatorul intră chiar în rândul de recuzită, între
     contorul galeriei și categorie. Varianta absolută de mai sus rămâne doar
     fallback pentru viitoare hero-uri fără acest rând. */
  .mobile-event-hero-overlay-bottom .hero-animated-pagination.is-inline {
    position: relative;
    left: auto;
    bottom: auto;
    z-index: 6;
    flex: 0 0 auto;
    align-self: flex-end;
    pointer-events: auto;
    transform: none;
  }

  .hero-animated-pagination-dot {
    width: 6px;
    height: 6px;
    min-width: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: none;
    transition: width 180ms ease, background-color 180ms ease;
    -webkit-tap-highlight-color: transparent;
  }

  .hero-animated-pagination-dot.is-active {
    width: 18px;
    background: #ffffff;
  }

  .hero-animated-pagination-dot:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
  }
}

/* Pe intervalul tabletă/fereastră îngustă, un poster portrait într-un hero
   foarte lat pierde prea mult din conținut dacă este forțat în `cover`.
   Îl afișăm complet peste fundalul ambiental deja sincronizat de componentă.
   Mobilul îngust păstrează experiența imersivă `cover`. */
@media (min-width: 576px) and (max-width: 991.98px) {
  body.event-page .mobile-event-hero-img.hero-animated-slide:not(.is-landscape) {
    object-fit: contain;
    animation: none;
    transform: none;
  }
}

/* Accesibilitate + baterie: fără mișcare, doar imaginea principală fixă. */
@media (prefers-reduced-motion: reduce) {
  .hero-animated-media.kb-on .hero-animated-slide.is-active {
    animation: none !important;
    transform: none !important;
  }
  .hero-animated-slide {
    transition: none !important;
  }
}