/*
  Brand Loader — camada fullscreen de entrada da Home + estados temporários
  de revelação da Hero/Header já existentes. Não redesenha nenhum componente
  aprovado: apenas adiciona opacity/transform iniciais controlados por
  classes no <body>, removidas progressivamente pelo controlador
  (assets/js/brand-loader.js) conforme os recursos críticos ficam prontos.
*/

/* ---------- Camada fullscreen ---------- */

.brand-loader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--footer-bg);
  isolation: isolate;
  opacity: 1;
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  box-sizing: border-box;
}

.brand-loader[data-state="exiting"] {
  opacity: 0;
}

.brand-loader[data-state="removed"] {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.brand-loader__stage {
  width: clamp(96px, 16vw, 168px);
  /* proporção do wrapper: 100 (R) : 145 (R + bico + fluxo + copo) do viewBox */
  aspect-ratio: 100 / 145;
  position: relative;
}

.brand-loader__mark {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1), transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-loader[data-mark="in"] .brand-loader__mark {
  opacity: 1;
  transform: scale(1);
}

.brand-loader__r {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* altura = 100/145 do wrapper, mantendo o R quadrado (1254x1254 original) */
  height: 68.9655%;
  object-fit: contain;
  display: block;
}

.brand-loader__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brand-loader__cup {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-loader[data-cup="in"] .brand-loader__cup {
  opacity: 1;
  transform: translateY(0);
}

.brand-loader__cup-outline {
  fill: none;
  stroke: #EAF4EE;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  opacity: 0.9;
}

.brand-loader__liquid {
  fill: #17A97C;
  transform: translateY(62px); /* estado de repouso: oculto abaixo do clip do copo */
}

.brand-loader__flow {
  opacity: 0;
  transition: opacity 260ms ease;
}

.brand-loader[data-flow="in"] .brand-loader__flow {
  opacity: 1;
}

.brand-loader__nozzle {
  fill: #1C2622;
  stroke: none;
}

.brand-loader__flow-path {
  fill: none;
  stroke: #17A97C;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 460ms cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-loader[data-flow="in"] .brand-loader__flow-path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .brand-loader,
  .brand-loader__mark,
  .brand-loader__cup,
  .brand-loader__flow {
    transition-duration: 180ms;
  }
}

/* ---------- Estados temporários de entrada da Hero/Header já existentes ----------
   Nenhuma regra aqui redesenha o componente: apenas define o estado inicial
   (oculto, por padrão — não condicionado a [data-intro] no <body>) e o
   estado revelado (visível, condicionado ao respectivo data-*-revealed).

   Importante: o estado oculto NÃO pode depender de body[data-intro] estar
   presente. data-intro é removido no início da saída do loader, bem antes
   de data-content-revealed/data-header-revealed serem definidos (a cascata
   de textos e o header têm pausas de centenas/milhares de ms depois disso).
   Se o "oculto" só valesse enquanto [data-intro] existisse, haveria uma
   janela em que nem a regra oculta nem a revelada bateriam — o elemento
   cairia no padrão do navegador (visível), soltando tudo de uma vez mais
   cedo do que deveria. Por isso o oculto agora é o padrão incondicional do
   próprio elemento, removido só quando a revelação correspondente chega.
   Sem JS, o <noscript> força tudo visível independentemente disso.
*/

/* O contentor só controla interatividade — o visual de entrada (opacity +
   translateY) vive em cada item interno (logo/nav/CTA), abaixo, para que
   eles surjam em cascata com stagger próprio em vez de um bloco único. */
#headerFloat {
  pointer-events: none;
}

body[data-header-revealed] #headerFloat {
  pointer-events: auto;
}

/* transition de [data-header-reveal] é declarada em cada elemento-alvo
   (header.css), junto de qualquer transition já existente. */

[data-header-reveal] {
  opacity: 0;
  transform: translateY(-8px);
}

body[data-header-revealed] [data-header-reveal] {
  opacity: 1;
  transform: translateY(0);
}

body[data-header-revealed] [data-header-reveal="1"] { transition-delay: 0ms; }
body[data-header-revealed] [data-header-reveal="2"] { transition-delay: 100ms; }
body[data-header-revealed] [data-header-reveal="3"] { transition-delay: 200ms; }

.hero__media-stage {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

body[data-media-revealed] .hero__media-stage {
  opacity: 1;
  transform: scale(1);
}

/* transition de [data-reveal] é declarada em cada elemento-alvo (hero.css),
   junto de qualquer transition já existente, para não sobrescrever a
   propriedade (shorthand) já aprovada nesses elementos. */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

body[data-content-revealed] [data-reveal] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

body[data-content-revealed] [data-reveal="1"] { transition-delay: 0ms; }
body[data-content-revealed] [data-reveal="2"] { transition-delay: 220ms; }
body[data-content-revealed] [data-reveal="3"] { transition-delay: 440ms; }
body[data-content-revealed] [data-reveal="4"] { transition-delay: 660ms; }

/* Trava de scroll sem layout shift enquanto o loading está ativo. */
body[data-intro-locked="true"] {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  #headerFloat,
  .hero__media-stage,
  [data-reveal],
  [data-header-reveal] {
    transition-duration: 200ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }
}