/* ===== RESET & BASE ===== */
:root {
  --safeTop: env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);
  --vvh: 100vh;
}
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: #000;
  overflow: hidden;
}
* { box-sizing: border-box; }
img, video {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

/* ===== REVEAL COVER ===== */
#reveal-cover {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--vvh);
  z-index: 100;
  background: #000;
  overflow: hidden;
  touch-action: none;
}
#reveal-cover.is-completing {
  transition: opacity 0.8s ease, transform 0.8s ease;
  opacity: 0;
  transform: scale(1.05);
}
#reveal-cover.is-hidden { display: none; }

#reveal-cover canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#reveal-hint {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font: 500 15px/1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 10px 24px;
  border-radius: 30px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 1;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 101;
  white-space: nowrap;
  animation: hintPulse 2.5s ease-in-out infinite;
}
#reveal-hint.fade-out { opacity: 0; }

@keyframes hintPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* ===== PALCO ===== */
#container2-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--vvh);
  background: #000;
  overflow: hidden;
}
@supports (-webkit-touch-callout: none) {
  #container2-video { height: -webkit-fill-available; }
}

#canvas1080v {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: calc(var(--vvh) * 1080 / 1850);
  height: var(--vvh);
  overflow: hidden;
  touch-action: manipulation;
}
@media (min-aspect-ratio: 1080/1850) {
  #canvas1080v {
    width: 100vw;
    height: calc(100vw * 1850 / 1080);
  }
}

/* ===== VÍDEO ===== */
#video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transform: translateZ(0);
}
video::-webkit-media-controls-enclosure { display: none !important; }

/* ===== BOTÕES ===== */
#botoesConvite {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  touch-action: manipulation;
}
#botoesConvite a {
  position: absolute;
  display: block;
  pointer-events: auto;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent !important;
}

body.safe-bottom #botoesConvite {
  transform: translateY(calc(-1 * var(--safeBottom)));
}

.btn-4 {
  width: 28%;
  height: 12%;
  transform: translate(-50%, -50%);
}
#presenca    { left: 33%; top: 48%; }
#localizacao { left: 67%; top: 48%; }
#sugestoes   { left: 33%; top: 65%; }
#manual      { left: 67%; top: 65%; }

/* ===== OVERLAYS ===== */
.overlayConvite {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 45;
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
}
.overlayConvite img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}
.fecharOverlay {
  position: absolute;
  top: calc(2.5% + var(--safeTop));
  right: 4%;
  background: rgba(255,255,255,.18);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 22px;
  padding: 4px 12px;
  cursor: pointer;
  z-index: 60;
}

/* ===== TOAST PIX ===== */
#toastPix {
  display: none;
  position: fixed;
  bottom: 7%; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.78);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  z-index: 10001;
  font-weight: 600;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* ===== HINT VIDEO ===== */
#hintVideo {
  display: none;
  position: absolute;
  left: 50%; bottom: 14%;
  transform: translateX(-50%);
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font: 600 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  z-index: 44;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ===== DESKTOP ===== */
@media (min-width: 768px) {
  html, body {
    background: radial-gradient(circle at center, #111 0%, #000 70%);
  }
  #container2-video {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #canvas1080v {
    position: relative;
    top: auto; left: auto;
    transform: none;
    height: 92vh;
    width: calc(92vh * 1080 / 1850);
    max-width: 520px;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 18px 60px rgba(0,0,0,.55);
  }
}