#pizza-opening {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: #ecdfc5; color: #173528;
  box-shadow: none; overflow: hidden; opacity: 1;
  transition: opacity 350ms ease-in-out;
}
#pizza-opening::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* No app instalado o iOS pinta a barra de status com o fundo da página e a abertura
   começa logo abaixo dela, o que marcava uma borda dura entre os dois cremes.
   Enquanto a abertura está na tela, a página inteira assume o creme dela. */
html:has(#pizza-opening[open]), body:has(#pizza-opening[open]) { background: #ecdfc5; }
#pizza-opening[data-revealed] { opacity: 0; }
#pizza-opening::after {
  content: ''; position: absolute; inset: 0 0 auto; pointer-events: none;
  height: calc(clamp(72px, 16vh, 160px) + env(safe-area-inset-top, 0px));
  background: linear-gradient(to bottom, #ecdfc5 0%, #ecdfc5e6 18%, #ecdfc573 55%, #ecdfc500 100%);
}
#pizza-opening .pizza-opening-video {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
#pizza-opening .pizza-opening-skip {
  position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%); min-height: 44px; padding: 10px 20px;
  border: 1px solid #17352855; border-radius: 30px; background: #fff7e6;
  color: #173528; font: 600 12px/1.5 system-ui, sans-serif; white-space: nowrap; cursor: pointer;
}
#pizza-opening .pizza-opening-skip:focus-visible { outline: 3px solid #173528; outline-offset: 4px; }
@media (max-height: 500px) { #pizza-opening .pizza-opening-skip { bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { #pizza-opening { display: none; } }