/* Visão China · imersão sensorial (camada sobre o index-v2). Para desligar, basta remover este CSS e o script js/imersao-magia.js */

/* purpurina, rasto e flares */
#magia { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; }

/* cursor-anel (o mesmo vermelho dos anéis) com um ponto dourado */
html.cursor-proprio, html.cursor-proprio * { cursor: none !important; }
#cursor-anel, #cursor-ponto { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; }
#cursor-anel { width: 38px; height: 38px; border: 1.5px solid #ff4d5a; border-radius: 50%;
  box-shadow: 0 0 18px rgba(223,42,42,.5), inset 0 0 12px rgba(223,42,42,.25);
  transition: width .25s, height .25s, border-radius .25s, background .25s, border-color .25s, box-shadow .25s; }
html.sobre #cursor-anel { background: rgba(243,224,188,.07); border-color: #f3e0bc; box-shadow: 0 0 26px rgba(243,224,188,.5); }
#cursor-ponto { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #f3e0bc; box-shadow: 0 0 10px #f3c878; }

/* faíscas dos botões e das palavras */
.faisca { position: fixed; z-index: 79; width: 6px; height: 6px; margin: -3px; pointer-events: none; border-radius: 50%; background: #fff2d6;
  box-shadow: 0 0 8px #f3c878, 0 0 16px rgba(243,200,120,.6); animation: faisca 1.1s ease-out forwards; }
.faisca::before, .faisca::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1px; margin: -.5px 0 0 -8px;
  background: linear-gradient(90deg, transparent, #fff6e0, transparent); }
.faisca::after { transform: rotate(90deg); }
@keyframes faisca { 0% { opacity: 0; transform: translate(0,0) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1) rotate(90deg); } }

/* reflexo que atravessa os botões; o deslocamento magnético usa a propriedade translate (não colide com os transforms da v2) */
.btn, .wa-float { position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), translate .25s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s; }
.btn::after, .wa-float::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s; }
.btn:hover::after, .wa-float:hover::after { left: 130%; }

/* foco de luz dourada que segue o cursor dentro dos cartões */
.spot { position: relative; }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(280px circle at var(--fx, 50%) var(--fy, 50%), rgba(243,224,188,.16), transparent 60%); }
.spot:hover::after { opacity: 1; }

/* as palavras em vermelho acendem */
h1 em, h2 em, h3 em { transition: text-shadow .3s; }
h1 em:hover, h2 em:hover, h3 em:hover { text-shadow: 0 0 18px rgba(223,42,42,.85), 0 0 40px rgba(243,200,120,.35); }

/* fotos ganham cor ao passar o rato */
.g img, .post .ph img { transition: filter .6s, transform .6s; }
@media (pointer: fine) {
  .g img, .post .ph img { filter: saturate(.6) brightness(.85); }
  .g figure:hover img, .post:hover .ph img { filter: saturate(1.1) brightness(1); }
}

@media (prefers-reduced-motion: reduce) { .faisca { display: none; } }

/* anéis livres: camada fixa sobre a página; "screen" faz as linhas só somarem luz, sem apagar o texto por baixo */
#aneis-livres { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
#aneis-livres .rings { will-change: transform; }