/* Abertura do convite — camada de portas por cima do conteúdo.
 * Geometria em % da largura (cqw) / altura (cqh) da camada, medida na
 * referência (analise/motion-spec.json). Os valores entre GERADO:INICIO e
 * GERADO:FIM são escritos por analise/gerar_dist.py — não edite à mão.
 */
.cv-abertura {
  /* GERADO:INICIO */
  --cv-persp: 624.6641;
  --cv-origem-x: 50.4169%;
  --cv-origem-y: 49.8095%;
  --cv-dob-esq: -21.5583;
  --cv-borda-esq: 50.0374;
  --cv-borda-dir: 51.0615;
  --cv-dob-dir: 103.8338;
  --cv-espessura: 3.5246;
  --cv-fenda-cx: 50.5495;
  --cv-aspecto-ref: 1.2318;
  --cv-selo-cx: 50.7555;
  --cv-selo-cy: 50.4230;
  --cv-selo-w: 41.6353;
  --cv-selo-ar: 1.0844;
  --cv-selo-z: 1.2966;
  --cv-selo-sombra-dx: -1.2363;
  --cv-selo-sombra-dy: 1.0989;
  --cv-selo-sombra-sigma: 0.7795;
  --cv-selo-sombra-opac: 0.6559;
  --cv-esq-sombra-base-a: 0.2785;
  --cv-esq-sombra-base-b: 0.1899;
  --cv-dir-sombra-base: 0.0633;
  --cv-dir-luz-base: 0.0909;
  --cv-borda-esq-cor: 79, 101, 84;
  --cv-borda-dir-cor: 27, 34, 29;
  --cv-luz-rgb: 200, 255, 212;
  --cv-faixa-esq-max: 13.6930;
  --cv-faixa-dir-max: 94.9379;
  /* GERADO:FIM */

  /* 1% da "unidade de referência": o quadro da referência encaixado (contain)
     na tela. O selo usa essa unidade para manter a proporção em retrato e
     paisagem; as portas usam a largura. */
  --cv-u: min(1cqw, calc(var(--cv-aspecto-ref) * 1cqh));

  position: fixed;
  inset: 0;
  z-index: 1000;
  container-type: size;
  overflow: hidden;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.cv-abertura[aria-busy="true"] { cursor: progress; }

/* rolagem da página travada enquanto o convite está fechado */
html.cv-travado,
html.cv-travado body { overflow: hidden; }
.cv-abertura:focus-visible::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 4px;
  pointer-events: none;
}

.cv-cena {
  position: absolute;
  inset: 0;
  perspective: calc(var(--cv-persp) * 1cqw);
  perspective-origin: var(--cv-origem-x) var(--cv-origem-y);
}

/* Fenda escura entre as portas (sombra do vão); some nos primeiros ~500 ms. */
.cv-fenda {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--cv-fenda-cx) - 2) * 1cqw);
  width: 4cqw;
  background: #000;
  will-change: opacity;
}

/* Porta: caixa mais alta que a tela (topo e base nunca aparecem, como na
   referência). Gira em torno da dobradiça (borda externa). */
.cv-porta {
  position: absolute;
  top: -10cqh;
  height: 120cqh;
  transform-style: preserve-3d;
  will-change: transform;
}
.cv-porta--esq {
  left: calc(var(--cv-dob-esq) * 1cqw);
  width: calc((var(--cv-borda-esq) - var(--cv-dob-esq)) * 1cqw);
  transform-origin: 0 50%;
}
.cv-porta--dir {
  left: calc(var(--cv-borda-dir) * 1cqw);
  width: calc((var(--cv-dob-dir) - var(--cv-borda-dir)) * 1cqw);
  transform-origin: 100% 50%;
}

.cv-face {
  position: absolute;
  background-image: var(--cv-textura);
  background-size: calc(60 * 1cqw) auto;
  background-repeat: repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cv-face { inset: 0; }
/* textura contínua entre as portas: origem da textura no canto da camada */
.cv-porta--esq .cv-face { background-position: calc(var(--cv-dob-esq) * -1cqw) 10cqh; }
.cv-porta--dir .cv-face { background-position: calc(var(--cv-borda-dir) * -1cqw) 10cqh; }

/* Verso: atrás da espessura, virado 180°. Sem papel-verso, a frente 15% mais escura. */
.cv-verso {
  background-image: var(--cv-textura-verso, var(--cv-textura));
  transform: translateZ(calc(var(--cv-espessura) * -1cqw)) rotateY(180deg);
}
.cv-abertura:not(.cv-tem-verso) .cv-verso::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .15);
}

/* Espessura: faixa no plano da porta, colada à borda interna, com a cor
   média da textura e a luz medida. A largura (scaleX) é animada para cobrir
   exatamente onde a aresta de trás da espessura apareceria em perspectiva —
   uma face perpendicular (quase de perfil) é desenhada com falhas pelo Chromium. */
.cv-faixa {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: scaleX(0);
  will-change: transform;
}
.cv-porta--esq .cv-faixa {
  left: 100%;
  width: calc(var(--cv-faixa-esq-max) * 1cqw);
  transform-origin: 0 50%;
  background: rgb(var(--cv-borda-esq-cor));
}
.cv-porta--dir .cv-faixa {
  right: 100%;
  width: calc(var(--cv-faixa-dir-max) * 1cqw);
  transform-origin: 100% 50%;
  background: rgb(var(--cv-borda-dir-cor));
}

/* Camadas de luz na frente: vinheta estática + sombra/brilho animados */
.cv-base,
.cv-sombra,
.cv-luz {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cv-porta--esq .cv-base {
  /* porta esq. mais escura que a direita no t0, um pouco mais clara junto à fenda */
  background: linear-gradient(to right,
    rgba(0, 0, 0, var(--cv-esq-sombra-base-a)) 32%,
    rgba(0, 0, 0, var(--cv-esq-sombra-base-b)) 100%);
}
.cv-porta--dir .cv-base {
  /* luz vinda do canto superior direito */
  background:
    linear-gradient(to top right, rgba(var(--cv-luz-rgb), 0) 35%, rgba(var(--cv-luz-rgb), var(--cv-dir-luz-base)) 100%),
    linear-gradient(to top right, rgba(0, 0, 0, var(--cv-dir-sombra-base)) 0%, rgba(0, 0, 0, 0) 45%);
}
.cv-sombra { background: #000; opacity: 0; will-change: opacity; }
.cv-luz { background: rgb(var(--cv-luz-rgb)); opacity: 0; will-change: opacity; }

/* Selo: filho da porta esquerda, um pouco à frente dela (translateZ). */
.cv-selo {
  position: absolute;
  width: calc(var(--cv-selo-w) * var(--cv-u));
  height: calc(var(--cv-selo-w) * var(--cv-selo-ar) * var(--cv-u));
  left: calc((var(--cv-selo-cx) - var(--cv-dob-esq)) * 1cqw - var(--cv-selo-w) * var(--cv-u) / 2);
  top: calc((var(--cv-selo-cy) + 10) * 1cqh - var(--cv-selo-w) * var(--cv-selo-ar) * var(--cv-u) / 2);
  transform: translateZ(calc(var(--cv-selo-z) * 1cqw));
}
.cv-selo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.cv-selo .cv-selo-sombra {
  /* medidas na referência em % da largura, onde u = largura; escala com o selo */
  transform: translate(calc(var(--cv-selo-sombra-dx) * var(--cv-u)), calc(var(--cv-selo-sombra-dy) * var(--cv-u)));
  /* blur() recebe o desvio-padrão da gaussiana */
  filter: brightness(0) blur(calc(var(--cv-selo-sombra-sigma) * var(--cv-u)));
  opacity: var(--cv-selo-sombra-opac);
}
.cv-selo .cv-selo-escuro {
  filter: brightness(0);
  opacity: 0;
  will-change: opacity;
}

/* prefers-reduced-motion: só esmaece (feito em JS); nada de 3D aqui */
@media (prefers-reduced-motion: reduce) {
  .cv-porta { will-change: auto; }
}