/* ========================= */
/* RESET / BASE              */
/* ========================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  background-image: url("../assets/fundo.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  background-color: black;
  font-family: monospace;
}

/* escurecimento geral */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 1;
}

/* ========================= */
/* ENVELOPE                  */
/* ========================= */

#envelope-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

#envelope {
  width: 260px;
  cursor: pointer;
  filter: brightness(0.65) contrast(120%);
  transition: transform 0.3s ease, filter 0.3s ease;
}

#envelope:hover {
  transform: scale(1.03);
  filter: brightness(0.75);
}

/* ========================= */
/* PAPEL                     */
/* ========================= */

#papel-container {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;

  width: 70%;
  max-width: 700px;
  min-height: 300px;

  padding: 30px;

  background-image: url("../assets/papel.png");
  background-size: cover;
  background-position: center;

  color: #1a0000;
  font-size: 14px;
  line-height: 1.6;

  filter: brightness(0.85);
  z-index: 6;
}

/* ========================= */
/* OLHOS                     */
/* ========================= */

#olhos-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.olho {
  position: absolute;
  width: 80px;
  opacity: 0.85;
  filter: brightness(0.9) contrast(120%);
  pointer-events: auto;
  cursor: pointer;
  animation: surgir 0.6s ease;
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 0.85;
    transform: scale(1);
  }
}

@keyframes sumir {
  to {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* ========================= */
/* GLITCH DE ERRO             */
/* ========================= */

#erro-glitch {
  position: fixed;
  inset: 0;
  display: none;

  align-items: center;
  justify-content: center;

  background: rgba(40, 0, 0, 0.7);
  z-index: 10;

  pointer-events: none;
}

#erro-glitch p {
  display: none;
  font-size: 32px;
  letter-spacing: 3px;
  color: red;
  position: relative;
}

/* efeito hacker */
.glitch-ativo p {
  animation: glitchTexto 0.3s infinite;
}

#erro-glitch p::before,
#erro-glitch p::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
}

#erro-glitch p::before {
  color: red;
  transform: translate(-2px, 0);
  clip-path: inset(0 0 50% 0);
}

#erro-glitch p::after {
  color: black;
  transform: translate(2px, 0);
  clip-path: inset(50% 0 0 0);
}

@keyframes glitchTexto {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
  100% { transform: translate(0); }
}

#botao-saida {
  position: fixed;

  /* VISIBILIDADE CONTROLADA APENAS PELO JS */
  opacity: 0;
  pointer-events: none;

  /* ESTILO */
  color: #6b0000;
  font-size: 13px;
  font-family: monospace;
  letter-spacing: 3px;
  text-decoration: none;

  /* TEMA SOMBRIO */
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 18px;
  border: 1px solid rgba(120, 0, 0, 0.4);

  /* GLITCH SUJO */
  filter: blur(0.4px);
  text-shadow:
    -1px 0 red,
    1px 0 black;

  z-index: 20;

  /* ❌ NADA DE transition */
}