/* =========================================================================
   A Toca — a cena da porta
   Só a página da porta usa este arquivo: a trava de rolagem, as duas
   camadas de imagem, o botão da porta e as animações dele.
   Depende das cores do base.css.
   ========================================================================= */

:root {
  /*
    ZOOM DA CENA — resolve o problema das bordas cortadas aparecerem.
    As imagens são desenhadas um pouco MAIORES que a tela, então sobra
    "margem" escondida para fora. Quando a porta treme, ela mexe dentro
    dessa sobra e a borda do desenho nunca entra no campo de visão.
    Precisa ser o MESMO valor nas duas camadas, senão elas desalinham.
    Quanto maior o número, mais margem de folga — e menos cena visível.
  */
  --scene-zoom: 1.06;

  /* Intensidade dos movimentos da porta. Diminuídos para não forçar a folga. */
  --door-hover-scale: 1.008;
}

/* A cena ocupa a tela inteira, sempre. */
html,
body {
  height: 100%;
}

body {
  /* Trava a rolagem: a cena sempre cabe na tela, não há nada para rolar.
     Também é o que esconde a sobra do --scene-zoom. */
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   1. A CENA
   É o "palco". Todas as camadas são posicionadas em relação a ela.
   position: relative aqui + position: absolute nos filhos = os filhos se
   posicionam usando a cena como referência, e não a página inteira.
   ------------------------------------------------------------------------- */
.scene {
  position: relative;
  width: 100%;
  height: 100%;
  /* Corta tudo que passar das bordas da cena — a sobra do zoom fica escondida. */
  overflow: hidden;
}

/* -------------------------------------------------------------------------
   2. AS CAMADAS (empilhamento)
   inset: 0 é atalho para top/right/bottom/left: 0 — ou seja, "ocupe tudo".
   Como as duas imagens têm o mesmo tamanho original e o mesmo enquadramento,
   elas se alinham automaticamente.

   z-index define quem fica na frente (número maior = mais perto de você):
     porta ......... 1
     pedras ........ 2  (na frente da porta)
     pergaminho .... 3
   ------------------------------------------------------------------------- */
.door,
.rocks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* object-fit: cover = a imagem preenche todo o espaço, cortando o excesso
   (como o "preencher" de um papel de parede). Aplicado igual nas duas camadas,
   o corte é idêntico, então elas continuam encaixadas.

   O transform: scale aplica o zoom da folga. Está nas DUAS camadas com o mesmo
   valor, então o encaixe entre porta e pedras não muda. */
.door__image,
.rocks {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(var(--scene-zoom));
}

.rocks {
  z-index: 2;
  /* A CHAVE DO TRUQUE: as pedras estão na frente, mas o mouse as atravessa.
     Sem isto, clicar perto da moldura não chegaria na porta. */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* -------------------------------------------------------------------------
   3. A PORTA (o botão)
   Um <button> vem com estilos de sistema (borda cinza, fundo, padding).
   As três primeiras linhas "zeram" isso para ele virar só uma área clicável.
   ------------------------------------------------------------------------- */
.door {
  z-index: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  /* transition = a mudança acontece suavemente, e não de um frame para o outro */
  transition: filter 0.35s ease, transform 0.35s ease;
}

/* EFEITO DE HOVER (mouse em cima) e de foco pelo teclado (Tab).
   :focus-visible só acende quando o foco veio do teclado — assim quem navega
   por Tab enxerga onde está, sem poluir o clique de mouse. */
.door:hover:not(:disabled),
.door:focus-visible {
  /* drop-shadow segue o contorno real do PNG (respeita a transparência),
     diferente de box-shadow, que desenharia um retângulo. Dois brilhos
     empilhados: um curto e forte, outro largo e suave. */
  filter: drop-shadow(0 0 12px var(--glow)) drop-shadow(0 0 45px var(--glow));
  transform: scale(var(--door-hover-scale));
  /* A tremidinha roda uma vez, toda vez que o mouse entra. */
  animation: door-nudge 0.55s ease-in-out;
}

/* Remove o contorno azul padrão do navegador — o brilho acima já é o aviso. */
.door:focus {
  outline: none;
}

/* Enquanto a batida está acontecendo, a porta fica travada. */
.door:disabled {
  cursor: default;
  filter: none;
}

/* Animação da tremidinha do hover: um balanço de poucos pixels.
   Os valores são pequenos de propósito — junto com o --scene-zoom, é isso que
   impede a borda do desenho de aparecer durante o movimento. */
@keyframes door-nudge {
  0%   { transform: scale(var(--door-hover-scale)) rotate(0deg) translateX(0); }
  25%  { transform: scale(var(--door-hover-scale)) rotate(-0.12deg) translateX(-2px); }
  55%  { transform: scale(var(--door-hover-scale)) rotate(0.12deg) translateX(2px); }
  80%  { transform: scale(var(--door-hover-scale)) rotate(-0.05deg) translateX(-1px); }
  100% { transform: scale(var(--door-hover-scale)) rotate(0deg) translateX(0); }
}

/* Animação da BATIDA (o JavaScript coloca a classe .is-knocking no clique):
   quatro solavancos curtos, no ritmo do "toc toc toc toc".
   O nome door-knock também aparece no script.js (stopKnocking): se trocar
   aqui, troque lá, senão a classe nunca sai. */
.door.is-knocking {
  animation: door-knock 1.6s ease-in-out;
}

@keyframes door-knock {
  0%, 100%           { transform: scale(1) translateY(0); }
  6%, 28%, 50%, 72%  { transform: scale(0.998) translateY(2px); }  /* o toc */
  14%, 36%, 58%, 80% { transform: scale(1) translateY(0); }        /* a volta */
}

/* -------------------------------------------------------------------------
   4. AJUSTES DE TELA
   ------------------------------------------------------------------------- */

/* Em telas "em pé" (celular na vertical), cover cortaria as laterais e comeria
   as pedras. contain mostra a cena inteira e deixa o fundo de terra aparecer
   nas sobras — continua alinhado porque vale para as duas camadas. */
@media (max-aspect-ratio: 1 / 1) {
  .door__image,
  .rocks {
    object-fit: contain;
  }
}

/* Respeita quem configurou o sistema para reduzir animações (enjoo, vertigem).
   O conteúdo continua funcionando: só as animações somem. */
@media (prefers-reduced-motion: reduce) {
  .door:hover:not(:disabled),
  .door:focus-visible {
    animation: none;
  }

  .door.is-knocking {
    animation: none;
  }
}