/* CineBee v10.8.1 — ambiente clássico interativo.
   O Three.js é o motor principal; o CSS mantém o mesmo feedback do cursor se WebGL/Three falhar. */

html{
  background:#0A0A0B;
  color-scheme:dark;
  --cinebee-pointer-x:50vw;
  --cinebee-pointer-y:45vh;
  --cinebee-pointer-active:0;
}

body{
  background:transparent;
  position:relative;
  isolation:isolate;
}

/* O canvas precisa ficar acima do fundo do documento e abaixo da interface. */
.cinebee-ambient-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.72;
}

body > main,
body > footer{
  position:relative;
  z-index:1;
}

/* Grade de favos-base. Ela permanece bem discreta mesmo com WebGL ativo. */
body::before{
  content:"";
  position:fixed;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:.085;
  background-image:url("data:image/svg+xml,%3Csvg width='76' height='88' viewBox='0 0 76 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38 1 75 22.5v43L38 87 1 65.5v-43L38 1Z' fill='none' stroke='%23FFD21C' stroke-opacity='.18'/%3E%3C/svg%3E");
  background-size:76px 88px;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 15%,#000 92%,transparent 100%);
}

/* Realce interativo garantido mesmo se Three.js não carregar.
   Usa a mesma malha, revelada apenas perto do cursor. */
body::after{
  content:"";
  position:fixed;
  z-index:0;
  inset:0;
  pointer-events:none;
  opacity:calc(var(--cinebee-pointer-active) * .72);
  background:
    radial-gradient(190px circle at var(--cinebee-pointer-x) var(--cinebee-pointer-y),rgba(255,210,28,.065),transparent 72%),
    url("data:image/svg+xml,%3Csvg width='76' height='88' viewBox='0 0 76 88' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M38 1 75 22.5v43L38 87 1 65.5v-43L38 1Z' fill='none' stroke='%23FFD21C' stroke-opacity='.82' stroke-width='1.25'/%3E%3C/svg%3E");
  background-size:auto,76px 88px;
  -webkit-mask-image:radial-gradient(235px circle at var(--cinebee-pointer-x) var(--cinebee-pointer-y),#000 0%,rgba(0,0,0,.94) 24%,rgba(0,0,0,.46) 52%,transparent 78%);
  mask-image:radial-gradient(235px circle at var(--cinebee-pointer-x) var(--cinebee-pointer-y),#000 0%,rgba(0,0,0,.94) 24%,rgba(0,0,0,.46) 52%,transparent 78%);
  transition:opacity .24s ease;
}

/* Quando o WebGL realmente subiu, a malha 3D assume o protagonismo; o CSS fica só como base. */
body.cinebee-webgl-ativo::before{opacity:.055}
body.cinebee-webgl-ativo::after{opacity:calc(var(--cinebee-pointer-active) * .28)}
body.cinebee-webgl-fallback::before{opacity:.11}
body.cinebee-webgl-fallback::after{opacity:calc(var(--cinebee-pointer-active) * .78)}

/* Mantém os painéis sólidos o bastante para o efeito nunca competir com conteúdo. */
.cabecalho.esta-fixo{backdrop-filter:blur(12px)}
.resumo__item,
.painel-estatistica,
.perfil-card,
.perfil-form-card,
.perfil-painel,
.perfil-amigos,
.catalogo-item,
.catalogo-vazio,
.cb-badge,
.detalhes-modal__painel,
.modal-tmdb__painel,
.perfil-edicao-modal__painel{
  box-shadow:0 16px 42px rgba(0,0,0,.16);
}

.cartao__arte,
.catalogo-item,
.perfil-amigo,
.cb-badge,
.botao,
.episodio{
  transition:border-color var(--rapido),box-shadow var(--rapido),transform var(--rapido),background var(--rapido),color var(--rapido);
}

@media (prefers-reduced-motion:reduce){
  .cinebee-ambient-canvas{opacity:.58}
  body::after{transition:none}
}