/* VŌLVA · Entrada "A deusa do sol" (Genjutsu)
   Abre direto na deusa (vídeo de 6 s). Ela solta a flecha; a auréola dourada
   atrás da cabeça dela acende, a deusa dissolve, e a auréola desce e vira o O
   de VŌLVA. A linha da água vira o tracinho do Ō. No fim, a confirmação de +18. */
:root {
  --ent-papel: #F0E7E1;   /* o mesmo creme do papel do vídeo */
  --ent-verde: #1C3A2E;
  --ent-verde-medio: #2D5244;
  --ent-ouro: #C9A96E;
  --ent-apoio: #5E5E5E;
}
html.ent-lock, html.ent-lock body { overflow: hidden; }
.ent { position: fixed; inset: 0; z-index: 400; background: var(--ent-papel); color: var(--ent-verde); overflow: hidden; transition: opacity .6s ease; -webkit-user-select: none; user-select: none; }
.ent[hidden] { display: none; }
.ent.ent-sai { opacity: 0; pointer-events: none; }

/* 1 · A deusa (vídeo 16:9). Preenche a tela; no celular corta as laterais e
   mantém ela e a auréola no centro (posição 62%). Se mudar essa posição,
   mude também ENQ_X no entrada.js. */
.ent-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }

/* 2 · O sol (nasce em cima da auréola do vídeo) e o horizonte (linha da água). */
.ent-sol { position: absolute; left: 0; top: 0; border-radius: 50%; border: 2px solid #D9B46A; pointer-events: none;
  box-shadow: 0 0 18px 2px rgba(232,196,120,.55), inset 0 0 22px rgba(232,196,120,.35);
  background: radial-gradient(circle, rgba(255,236,200,.35) 0%, rgba(232,196,120,.12) 60%, rgba(232,196,120,0) 72%);
  opacity: 0; will-change: transform, opacity; }
.ent-horiz { position: absolute; left: 0; top: 0; height: 2px; background: var(--ent-ouro); opacity: 0; pointer-events: none; will-change: transform, opacity; }

/* 3 · O nome. O lugar do O fica vazio: quem ocupa é o sol. */
.ent-final { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(16px, 2.6vh, 24px); text-align: center; padding: 24px max(20px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.ent-logo { font-family: 'Cormorant Garamond', Garamond, 'Times New Roman', serif; font-weight: 300; font-size: clamp(56px, 14vw, 128px); letter-spacing: .16em; margin: 0 -.16em 0 0; line-height: 1; white-space: nowrap; color: var(--ent-verde); }
.ent-logo span { display: inline-block; opacity: 0; }
.ent-logo .ent-vaga { width: .74em; height: .7em; vertical-align: baseline; opacity: 1; }
.ent-frase { font-family: 'Cormorant Garamond', Garamond, serif; font-style: italic; font-weight: 300; font-size: clamp(20px, 3.4vh, 30px); color: var(--ent-verde-medio); opacity: 0; margin: 0; }
.ent-frase em { color: #6E4C99; }
.ent-entrar { margin-top: 6px; font: 500 15px 'Jost', 'Segoe UI', Arial, sans-serif; letter-spacing: .06em; color: var(--ent-papel); background: var(--ent-verde); border: 0; border-radius: 999px; padding: 15px 28px; cursor: pointer; opacity: 0; transition: background .2s; pointer-events: none; }
.ent.ent-nome .ent-entrar { pointer-events: auto; }
.ent-entrar:hover { background: var(--ent-verde-medio); }
.ent-entrar:focus-visible, .ent-pe button:focus-visible { outline: 2px solid #6E4C99; outline-offset: 3px; }

/* Sem animação (prefers-reduced-motion) ou se algo falhar: nome direto, O normal. */
.ent.ent-direto .ent-video { opacity: 0; }
.ent.ent-direto .ent-logo span, .ent.ent-direto .ent-frase, .ent.ent-direto .ent-entrar { opacity: 1; }
.ent.ent-direto .ent-sol { opacity: 1; }

/* Rodapé fixo: aviso de +18 e "Pular" desde o primeiro segundo. */
.ent-pe { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px max(16px, env(safe-area-inset-left, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font: 400 12px 'Jost', 'Segoe UI', Arial, sans-serif; color: var(--ent-apoio); background: linear-gradient(to top, rgba(240,231,225,.95), rgba(240,231,225,0)); z-index: 2; }
.ent-pe p { margin: 0; max-width: 46ch; }
.ent-pe div { display: flex; gap: 14px; }
.ent-pe button { font: inherit; font-weight: 500; color: var(--ent-verde); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.ent-menor { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 24px; background: var(--ent-papel); font: 400 17px 'Jost', 'Segoe UI', Arial, sans-serif; z-index: 3; }
.ent-menor[hidden] { display: none; }