/* ==========================================================================
   TRANSIÇÃO ENTRE VERTENTES
   Os dois painéis estão no HTML. Só um é visível; durante a transição
   sobrepõem-se na mesma célula da grelha e o novo aparece por cima em fade
   (js/vertentes.js). A cor do fundo, do header e do rodapé desliza em paralelo.
   ========================================================================== */

.stage { position: relative; display: grid; }

.panel {
  grid-area: 1 / 1;
  display: none;
  min-width: 0;
  background: var(--paper);   /* cada painel traz a SUA paleta (.theme-*) */
  color: var(--ink);
  overflow-x: clip;
}

/* Visível por defeito consoante o <html data-vertente>, definido por js/boot.js
   antes do primeiro render: sem flash e com URL direto. */
html[data-vertente="eventos"] #panel-eventos,
html[data-vertente="catering"] #panel-catering { display: block; }

/* Durante a transição os dois painéis existem */
.stage.is-switching > .panel { display: block; }
.panel.is-incoming { position: relative; z-index: 2; will-change: opacity; }
.panel.is-outgoing { position: relative; z-index: 1; pointer-events: none; will-change: transform; }

/* Sem JS: os dois painéis, um a seguir ao outro */
html:not(.js) .stage { display: block; }
html:not(.js) .stage > .panel { display: block; }

/* Medição das alturas dos heróis (js/ui.js): mostra os dois painéis sem se ver e sem carregar as imagens */
.stage.is-measuring > .panel { display: block; visibility: hidden; }
.stage.is-measuring .hero__media { display: none; }

/* ---- Reveal ao scroll (IntersectionObserver em js/ui.js) ------------------------ */
/* Só opacidade nos textos; as fotografias descobrem-se com um corte. */
html.js .reveal { opacity: 0; transition: opacity 1s var(--ease-out) var(--rd, 0ms); }
html.js .reveal.is-in { opacity: 1; }

html.js .reveal-wipe .wipe { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--ease-io) var(--rd, 0ms); }
html.js .reveal-wipe.is-in .wipe { clip-path: inset(0); }

html.js .steps li.reveal::before { transform: scaleX(0); transition: transform 1.3s var(--ease-io) var(--rd, 0ms); }
html.js .steps li.reveal.is-in::before { transform: none; }

/* Rede de segurança: se o JS falhar, nada fica escondido (ver js/boot.js) */
html.reveal-fallback .reveal { opacity: 1; }
html.reveal-fallback .reveal-wipe .wipe { clip-path: none; }
html.reveal-fallback .steps li.reveal::before { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transition: none; }
  html.js .reveal-wipe .wipe { clip-path: none; transition: none; }
  html.js .steps li.reveal::before { transform: none; transition: none; }
  .hero__title .line > span, .hero__fade { animation: none !important; }
  .ring svg, .hero__media img { animation: none !important; }
}

/* Durante o fade: menos trabalho por frame (o vidro com blur sob a troca e o anel que roda são repintados sem necessidade) */
html.is-switching .site-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.stage.is-switching .ring > svg:first-child { animation-play-state: paused; }