.entryOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  pointer-events: auto;
}

.entryOverlay.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 420ms ease;
}

.entryBg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 30% 40%, rgba(255, 255, 255, 0.09), transparent 60%),
    radial-gradient(900px 600px at 70% 60%, rgba(0, 0, 0, 0.12), transparent 55%);
  pointer-events: none;
}

/* caixas */
.content-box {
  position: fixed;
  left: 0;
  width: 100vw;
  height: 50vh;

  box-sizing: border-box; /* ✅ importante */

  background: rgba(255, 255, 255, 0.2);

  backdrop-filter: blur(16px) contrast(150%);
  -webkit-backdrop-filter: blur(16px) contrast(150%);
  will-change: transform, border-radius;

  overflow: hidden;
  isolation: isolate;

  contain: paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.top-box {
  position: fixed;
  top: 0;
  border-bottom-left-radius: 120px;
  height: calc(var(--real-vh) * 50);
}

.bottom-box {
  bottom: 0;
  border-top-left-radius: 120px;
  height: calc(var(--real-vh) * 50);
}

/* fundos das caixas (imagens) */
.bg-top-svg,
.bg-bottom-svg {
  z-index: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;

  border-radius: inherit;

  pointer-events: none;
}

.selo-nova {
  z-index: 2;
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(110px, 12vw, 200px);
  height: auto;
  pointer-events: none;
}

.selo-aviso {
  z-index: 2;
  position: absolute;
  right: 22px;
  top: 18px;
  width: clamp(50px, 12vw, 100px);
  height: auto;
  pointer-events: none;
}

/* Selo grande no TOP-BOX (fixo, centralizado) */
.selo-puxe {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 3.5vh, 34px);

  transform: translateX(-50%) translateZ(0);

  backface-visibility: hidden;
  will-change: transform, opacity;
  isolation: isolate;

  z-index: 2;

  width: clamp(300px, 48vw, 700px);
  height: auto;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  opacity: 1;

  /* ✅ opacidade reativa ao drag (mantém pulsação, só controla a visibilidade) */
  --fade: calc(1 - var(--pull, 0));
  opacity: calc(var(--fade) * 1);

  /* pulsação suave */
  animation: seloPulse 1.6s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes seloPulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.rodape-bottom-box {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.18), transparent);
  pointer-events: none;
}

/* linha + gotinha */
.linha-vermelha {
  position: fixed;
  top: calc(var(--real-vh) * 50);
  height: 4px;
  transform: translateY(-50%);
  background: #ff3333;
  border-radius: 99px;
  z-index: 2100;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 51, 51, 0.1);
}

.gotinha {
  position: fixed;
  top: calc(var(--real-vh) * 50);
  width: 44px;
  height: 54px;
  transform: translate(-50%, -50%);
  z-index: 2200;
  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;
  touch-action: none;
}

.gotinha:active {
  cursor: grabbing;
}

/* animação de saída (empurrando tudo pra direita) */
.entryOverlay.is-opening .top-box,
.entryOverlay.is-opening .bottom-box,
.entryOverlay.is-opening .linha-vermelha,
.entryOverlay.is-opening .gotinha,
.entryOverlay.is-opening .selo-puxe {
  transition: transform 0.5s linear;
}

.entryOverlay.is-opening .top-box {
  transform: translateX(100vw);
}
.entryOverlay.is-opening .linha-vermelha {
  transform: translate(100vw, -50%);
}
.entryOverlay.is-opening .gotinha {
  transform: translate(calc(100vw - 50%), -50%);
}

.entryOverlay.is-opening .bottom-box {
  transition-delay: 0.3s;
  transform: translateX(100vw);
}

.entryOverlay.is-opening .selo-puxe {
  transition: opacity 0.5s linear;
}

/* =========================================================
   Bolachinha interativa na tela de abertura (bottom-box)
   ========================================================= */

.bottom-box {
  position: fixed; /* só garantindo contexto */
}

.bottom-box .entry-bolachinha {
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
  z-index: 5;

  width: clamp(180px, 34vw, 200px);
  height: clamp(180px, 34vw, 200px);

  background: url("../assets/svg/bolachinha-entry.svg") no-repeat center / contain;

  pointer-events: auto;
  user-select: none;
  -webkit-tap-highlight-color: transparent;

  transition:
    transform 160ms ease,
    opacity 160ms ease;
}

/* desktop hover */
@media (hover: hover) and (pointer: fine) {
  .bottom-box .entry-bolachinha:hover {
    background-image: url("../assets/svg/bolachinha-entry-b.svg");
    transform: translate(-50%, -50%) scale(1.03);
  }
}

/* mobile tap */
.bottom-box .entry-bolachinha:active {
  background-image: url("../assets/svg/bolachinha-entry-b.svg");
  transform: translate(-50%, -50%) scale(0.98);
}

/* Assim que a abertura começa a sair, ela não pode mais bloquear cliques do site */
.entryOverlay.is-opening,
.entryOverlay.is-hidden {
  pointer-events: none !important;
}

/* =========================================================
   Texto Ingredientes (bottom-box)
   ========================================================= */

.bottom-box .entry-ingredientes {
  position: absolute;
  left: 50%;
  bottom: 2vh;

  transform: translateX(-50%);
  z-index: 4;

  width: 98vw;
  height: auto;

  pointer-events: none;
  user-select: none;

  opacity: 1;
}

/* MOBILE: troca SVG */
@media (max-width: 900px) {
  .bottom-box .entry-ingredientes {
    content: url("../assets/svg/txt-ingredientes-b.svg");
    width: 90vw;
  }
}