/*
 * Sr. Creme — Mascote animado no topo responsivo
 * Arquivo: assets/css/mascote-topo.css
 *
 * Objetivo:
 * - manter o desktop exatamente como já está;
 * - exibir o mesmo vídeo da vaquinha em tablet/mobile;
 * - posicionar a animação acima da linha de logo + botão MENU;
 * - centralizar e redimensionar automaticamente conforme a largura da tela.
 */

@media (max-width: 1199px) {

  /* Mantém o fundo institucional durante o carregamento do vídeo. */
  .main-header--three:not(.sticky-header--cloned) {
    background-color: var(--srcreme-red, #ad0000) !important;
  }

  /*
   * O elemento de vídeo já vem ANTES do .main-header__container no HTML.
   * Transformamos esse background absoluto em um bloco normal no mobile,
   * fazendo com que ele fique naturalmente acima da logo e do menu.
   */
  .main-header--three:not(.sticky-header--cloned)
  .main-header__bg.main-header__bg--video {
    display: block !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: 100%;
    height: clamp(140px, 28vw, 210px);

    overflow: hidden;
    background-color: var(--srcreme-red, #ad0000);
    z-index: 1;
    pointer-events: none;
  }

  /* Vídeo centralizado e recortado de forma responsiva. */
  .main-header--three:not(.sticky-header--cloned)
  .main-header__bg.main-header__bg--video > video {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    object-fit: cover !important;
    object-position: center center !important;
    transform: translate(-50%, -50%);
  }

  /*
   * Logo + botão MENU ficam em uma faixa vermelha própria,
   * imediatamente abaixo da animação.
   */
  .main-header--three:not(.sticky-header--cloned) .main-header__container {
    position: relative;
    z-index: 2;
    background-color: var(--srcreme-red, #ad0000);
  }
}

/* Ajuste fino para celulares menores. */
@media (max-width: 575px) {
  .main-header--three:not(.sticky-header--cloned)
  .main-header__bg.main-header__bg--video {
    height: clamp(135px, 36vw, 170px);
  }
}

/* Ajuste fino para telas muito estreitas. */
@media (max-width: 390px) {
  .main-header--three:not(.sticky-header--cloned)
  .main-header__bg.main-header__bg--video {
    height: 135px;
  }
}