/* =====================================================
   BRAND SECTION – CARD & ANIMATION STYLES
   Проект: Euromaster Corporate
   Роля: Брандова carousel секция (не grid, не каталог)
   ===================================================== */


/* =====================================================
   BRAND CARD – ОСНОВЕН КОНТЕЙНЕР
   ===================================================== */

.brand-card {
  position: relative;

  /* Картите са визуално квадратни */
  aspect-ratio: 1 / 1;

  overflow: hidden;
  border-radius: 14px;

  /* Много тънък, неагресивен бордър */
  border: 1px solid rgba(255, 255, 255, 0.12);

  /* Fallback фон – корпоративно синьо */
  background-color: #13437d;
}


/* =====================================================
   BRAND BACKGROUND
   - image сега
   - video по-късно
   ===================================================== */

.brand-bg {
  position: absolute;
  inset: 0;

  /* Подготовка за image / video */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Лека трансформация при активна карта */
  transition:
    transform 600ms ease-out,
    opacity 600ms ease-out;
}


/* =====================================================
   BRAND OVERLAY
   - син фейд
   - контролира контраста
   ===================================================== */

.brand-overlay {
  position: absolute;
  inset: 0;

  /* Корпоративен син фейд */
  background: rgba(19, 67, 125, 0.55);

  /* Анимация само при state change */
  transition: opacity 500ms ease-out;
}


/* =====================================================
   BRAND LOGO CONTAINER
   ===================================================== */

.brand-logo {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
}


/* =====================================================
   BRAND LOGO IMAGE
   ===================================================== */

.brand-logo img {
  max-width: 65%;
  max-height: 65%;

  object-fit: contain;

  /* Микро анимация при активна карта */
  transition: transform 500ms ease-out;
}


/* =====================================================
   ACTIVE CARD STATE
   - това е ключовото
   - класът идва от carousel-а
   ===================================================== */

.brand-card.is-active .brand-overlay {
  /* Леко изчистване на фейда */
  opacity: 0.35;
}

.brand-card.is-active .brand-logo img {
  /* Много лек scale – „дишане“ */
  transform: scale(1.04);
}

.brand-card.is-active .brand-bg {
  /* Минимално увеличение на фона */
  transform: scale(1.03);
}


/* =====================================================
   HOVER (DESKTOP ONLY)
   - не е основен механизъм
   - не влияе на mobile
   ===================================================== */

@media (hover: hover) {
  .brand-card:hover .brand-overlay {
    opacity: 0.3;
  }
}


/* =====================================================
   ACCESSIBILITY / REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .brand-bg,
  .brand-overlay,
  .brand-logo img {
    transition: none;
  }
}