/* ============================================
   KELIBATMU V2 - ANIMATIONS
   Owner: effects/animations.css
   ============================================ */
.main-content {
  /* One entrance per document, without a persistent compositing layer.
     Opacity only: fixed children keep their existing containing block. */
  animation: cinematicFade 200ms ease-out;
}

@keyframes cinematicFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-section,
.music-header,
.section-header {
  animation: none;
}

/* Keep the existing hover/focus colours and geometry; transition only paint
   and transforms, never sizing, spacing or other layout properties. */
:is(.btn-submit, .cta-button, .circular-play-large, .circular-play-small,
    .play-track-btn, .kv2-action-bar__button, .kv2-action-trigger,
    .kv2-action-item, .kv2-auth-menu__trigger, .kv2-auth-menu__item,
    .legal-modal-close) {
  transition-property: background-color, color, border-color, opacity, transform;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}

.kv2-action-bar__button:not(:disabled):not(.kv2-action-bar__button--static):active,
.kv2-action-trigger:not(:disabled):active,
.kv2-action-item:not(:disabled):active {
  opacity: .86;
}

/* These components already use active classes and preserve focus/scroll rules. */
.legal-modal-overlay,
.legal-modal,
.kv2-auth-menu__panel {
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

.legal-modal-overlay:not(.active) .legal-modal {
  transform: translateY(4px);
}

.kv2-auth-menu__panel:not(.kv2-auth-menu__panel--active) {
  transform: translateY(-4px);
}

.kv2-action-sheet:not([hidden]),
.kv2-action-menu:not([hidden]) {
  animation: cinematicFade 160ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .main-content,
  .kv2-action-sheet,
  .kv2-action-menu {
    animation: none !important;
  }

  :is(.btn-submit, .cta-button, .circular-play-large, .circular-play-small,
      .play-track-btn, .kv2-action-bar__button, .kv2-action-trigger,
      .kv2-action-item, .kv2-auth-menu__trigger, .kv2-auth-menu__item,
      .legal-modal-close, .legal-modal-overlay, .legal-modal,
      .kv2-auth-menu__panel) {
    transition-duration: 0s !important;
  }

  .main-content {
    opacity: 1 !important;
  }
}