/* Splash Screen de abertura — Saga Farma.
   A sobreposição só aparece quando SplashScreen.gate() marca o <html> com .splash-ativa. */

:root {
  /* Cor exata do fundo da animação (vinho profundo decodificado), para não haver emenda. */
  --splash-bg: #3b011a;
  --splash-fade: 400ms;
}

/* Trava de rolagem: dura enquanto a splash está opaca. É liberada no início da dissolução,
   de modo que o eventual reaparecimento da barra de rolagem acontece por baixo da
   sobreposição ainda opaca e não desloca a hero de forma visível. */
html.splash-trava,
html.splash-trava body {
  overflow: hidden;
}

.splash {
  display: none;
}

html.splash-ativa .splash {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background-color: var(--splash-bg);
  opacity: 1;
  transition: opacity var(--splash-fade) ease;
  overscroll-behavior: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  container-type: size;
}

html.splash-ativa .splash.is-saindo {
  opacity: 0;
  pointer-events: none;
}

/* Vídeo e imagem final centralizados, proporção preservada (mesma caixa para ambos).
   Cobre a tela (sem faixas) enquanto a logo couber inteira; em proporções extremas o
   dimensionamento é limitado para a logo nunca ser cortada, e a sobra usa a mesma cor. */
.splash__media {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: auto;
  max-width: none;
  margin: 0;
  border: 0;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
  -webkit-user-drag: none;
  transform: translate(-50%, -50%);
  /* Opacidade quase 1 (imperceptível) impede o Chrome de entregar o vídeo à sobreposição
     de hardware do sistema, que converte as cores de outro jeito. Assim o vinho do vídeo
     passa pelo mesmo caminho do vinho em CSS e não muda de tom quando a dissolução começa. */
  opacity: 0.999;
}

/* 1920×1080 — logo ocupa 34% da largura e 34% da altura do quadro. */
.splash[data-orientacao="paisagem"] .splash__media {
  aspect-ratio: 16 / 9;
  width: min(max(100vw + 2px, 177.78vh + 4px), 250vw, 444vh);
  width: min(max(100cqw + 2px, 177.78cqh + 4px), 250cqw, 444cqh);
}

/* 1080×1920 — logo ocupa 70% da largura e 22% da altura do quadro. */
.splash[data-orientacao="retrato"] .splash__media {
  aspect-ratio: 9 / 16;
  width: min(max(100vw + 2px, 56.25vh + 2px), 128vw, 200vh);
  width: min(max(100cqw + 2px, 56.25cqh + 2px), 128cqw, 200cqh);
}

@media print {
  .splash { display: none !important; }
}