/* ════════════════════════════════════════════════════════════════════════
   NOCTURNA FX — Sistema visual cinematográfico (OTIMIZADO PARA PERFORMANCE)
   --------------------------------------------------------------------------
   Conteúdo:
     1. Variáveis / tokens
     2. Canvas (cursor trail + touch glow + motes atmosféricos)
     3. TV CRT cyberpunk pendurada
     4. Placar da Copa (terminal retrô)
     5. Estados (modal aberto, reduced-motion)
     6. Responsivo e Performance (tablet / mobile)

   Tudo escopado com prefixos (.noctv, #nocScore, #nocFxCanvas, --noc-fx-*)
   para NÃO colidir com o CSS existente do site.
════════════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta neon (energia digital) */
  --noc-fx-blue:   #2c8bff;   
  --noc-fx-blue-2: #19d2ff;   
  --noc-fx-green:  #2bff9c;   
  --noc-fx-green-2:#00ff7a;
  --noc-fx-yellow: #ffd84d;   
  --noc-fx-ink:    #04060c;   

  --noc-fx-z-canvas:  9200;
  --noc-fx-z-tv:      9100;
  --noc-fx-z-score:   9090;
  --noc-fx-z-ambient: 9050;
}

/* ════════════════════════════════════════════════════════════════════════
   GLOW AMBIENTE — ativa após o login fechar (cinematográfico)
════════════════════════════════════════════════════════════════════════ */
#nocAmbient{
  position: fixed;
  inset: 0;
  z-index: var(--noc-fx-z-ambient);
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: opacity; /* Otimização GPU */
  transform: translateZ(0); /* Força aceleração de hardware */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(44,139,255,.16), rgba(44,139,255,0) 60%),
    radial-gradient(90% 70% at 12% 110%, rgba(43,255,156,.13), rgba(43,255,156,0) 55%),
    radial-gradient(80% 60% at 92% 105%, rgba(25,210,255,.10), rgba(25,210,255,0) 55%);
}
body.noc-ambient-on #nocAmbient{
  animation: nocAmbientIn 1.6s ease-out forwards;
}
@keyframes nocAmbientIn{
  0%   { opacity: 0; }
  35%  { opacity: .85; }
  100% { opacity: .28; }
}

/* ════════════════════════════════════════════════════════════════════════
   1. CANVAS — trail do cursor / touch glow / motes
════════════════════════════════════════════════════════════════════════ */
#nocFxCanvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--noc-fx-z-canvas);
  pointer-events: none;
  display: block;
  mix-blend-mode: screen;
  contain: layout paint;
  will-change: transform;
  transform: translateZ(0);
}

/* ════════════════════════════════════════════════════════════════════════
   2. TV CRT CYBERPUNK PENDURADA
════════════════════════════════════════════════════════════════════════ */
#nocTV{
  position: fixed;
  top: 0;
  right: clamp(14px, 3.5vw, 56px);
  z-index: var(--noc-fx-z-tv);
  width: clamp(244px, 23vw, 344px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 24px 38px rgba(0,0,0,.6));
  will-change: opacity, transform;
  -webkit-user-select: none;
  user-select: none;
}

.noctv__pivot{
  transform-origin: top center;
  will-change: transform;
  transform: translateZ(0);
}

.noctv__mount{
  width: 46px;
  height: 12px;
  margin: 0 auto;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg,#3a4150,#10141d 70%);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.5);
  position: relative;
}
.noctv__mount::after{
  content:""; position:absolute; left:50%; bottom:-4px; transform:translateX(-50%);
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #6b7689, #1b1f29);
  box-shadow: 0 0 0 2px rgba(0,0,0,.4);
}

.noctv__cable{
  width: 4px;
  height: clamp(34px, 4.5vw, 64px);
  margin: 0 auto;
  background: linear-gradient(180deg,#2a2f3a,#444b5b 40%,#22262f);
  box-shadow: 1px 0 1px rgba(255,255,255,.05), -1px 0 2px rgba(0,0,0,.6);
  border-radius: 2px;
}

.noctv__frame{
  position: relative;
  margin: 0 auto;
  padding: 12px 12px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg,#1a1f29 0%, #0d1118 55%, #05070c 100%);
  border: 1px solid rgba(120,140,170,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 24px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.5);
  pointer-events: auto;
}
.noctv__frame::before, .noctv__frame::after{
  content:""; position:absolute; width:6px; height:6px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #545d6e, #14171f);
  box-shadow: 0 0 2px rgba(0,0,0,.7);
}
.noctv__frame::before{ top:7px; left:7px; }
.noctv__frame::after { top:7px; right:7px; }

.noctv__brand{
  font-family: "Press Start 2P", "Share Tech Mono", monospace;
  font-size: 8px; letter-spacing: 1px; color: rgba(150,205,255,.6);
  text-align: center; margin: 0 0 9px; text-shadow: 0 0 6px rgba(44,139,255,.6);
}

.noctv__screen{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 42%, #061018 0%, #02040a 78%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.95), inset 0 0 6px rgba(43,255,156,.10);
  transform: perspective(420px) rotateX(.6deg) translateZ(0);
}

.noctv__crt{ position:absolute; inset:0; }

.noctv__content{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; gap: 6px; padding: 12px 13px; text-align: left;
}

.noctv__channel{
  font-family: "Share Tech Mono", monospace; font-size: 11px;
  letter-spacing: 2px; color: var(--noc-fx-green); opacity: .9;
  text-shadow: 0 0 6px rgba(43,255,156,.7); display:flex; align-items:center; gap:6px;
}
.noctv__channel::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--noc-fx-green); box-shadow: 0 0 8px var(--noc-fx-green);
  animation: nocTvBlink 1.6s steps(1,end) infinite;
}

.noctv__msg{
  font-family: "VT323", "Share Tech Mono", monospace;
  font-size: clamp(20px, 2.05vw, 30px); line-height: 1.1; color: #eaf7ff;
  text-shadow: 0 0 4px rgba(0,0,0,.6), 0 0 9px rgba(44,139,255,.5);
  position: relative;
}
.noctv__msg::before, .noctv__msg::after{
  content: attr(data-text); position: absolute; left: 0; top: 0;
  width: 100%; pointer-events: none; opacity: .38; mix-blend-mode: screen;
}
.noctv__msg::before{ color:#ff2e6a; transform: translate(-1px,0); }
.noctv__msg::after { color:#19d2ff; transform: translate(1px,0); }

.noctv__msg-tag{
  display:inline-block; font-family:"Share Tech Mono",monospace;
  font-size: 11px; letter-spacing: 1px; color: var(--noc-fx-yellow);
  opacity:.9; margin-bottom: 5px; text-shadow: 0 0 7px rgba(255,216,77,.5);
}

.noctv__scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.28) 3px, rgba(0,0,0,.28) 4px);
  mix-blend-mode: multiply; opacity:.7;
}
.noctv__scanlines::after{
  content:""; position:absolute; left:0; right:0; height:26%; top:0;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(140,200,255,.06) 50%, rgba(255,255,255,0));
  animation: nocTvRoll 7.5s linear infinite;
  will-change: transform;   /* PERF: antes animava 'top' (layout+paint todo frame); agora é só transform */
}

.noctv__noise{
  position:absolute; inset:-20%; pointer-events:none; z-index:2; opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: nocTvNoise .7s steps(4) infinite;
  will-change: transform;
}

.noctv__glass{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background: linear-gradient(125deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 22%), radial-gradient(ellipse at 70% 8%, rgba(255,255,255,.08), rgba(255,255,255,0) 40%);
}
.noctv__vignette{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  box-shadow: inset 0 0 40px 8px rgba(0,0,0,.85); border-radius: 12px;
}

.noctv__screen{ animation: nocTvFlicker 5.5s infinite; }

.noctv__leds{ display:flex; gap:7px; justify-content:flex-end; margin-top: 9px; padding-right: 4px; }
.noctv__leds span{ width:6px; height:6px; border-radius:50%; background:#1a2230; box-shadow: inset 0 0 2px #000; }
.noctv__leds span:nth-child(1){ background:var(--noc-fx-green); box-shadow:0 0 7px var(--noc-fx-green); animation:nocTvBlink 2.4s steps(1,end) infinite; }
.noctv__leds span:nth-child(2){ background:var(--noc-fx-blue);  box-shadow:0 0 7px var(--noc-fx-blue);  opacity:.85; }
.noctv__leds span:nth-child(3){ background:#3a2330; }

.noctv.is-glitch .noctv__msg{ animation: nocTvGlitch .26s steps(2) 1; }
.noctv.is-glitch .noctv__screen{ filter: contrast(1.25) brightness(1.15); }
.noctv.is-glitch .noctv__noise{ opacity:.16; }

.noctv.is-pulse .noctv__frame{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 24px rgba(0,0,0,.7), 0 0 22px rgba(43,255,156,.45), 0 0 44px rgba(44,139,255,.30);
  transition: box-shadow .25s ease;
}

.noctv.noctv--in{ opacity:1; visibility:visible; }
.noctv.noctv--cssdrop .noctv__pivot{ animation: nocTvDrop 1.8s cubic-bezier(.2,.8,.25,1) both; }

/* ════════════════════════════════════════════════════════════════════════
   3. PLACAR DA COPA — terminal retrô
════════════════════════════════════════════════════════════════════════ */
#nocScore{
  position: fixed; left: clamp(14px, 3vw, 40px); bottom: clamp(80px, 11vh, 120px);
  z-index: var(--noc-fx-z-score); width: max-content; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease, visibility .5s;
  will-change: opacity, transform;
}
#nocScore.nocscore--in{ opacity:1; visibility:visible; transform:translateY(0); }

.nocscore__box{
  position: relative; overflow: hidden; padding: 9px 13px 8px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(6,16,12,.82), rgba(2,8,6,.86));
  border: 1px solid rgba(43,255,156,.28);
  box-shadow: 0 0 16px rgba(43,255,156,.16), inset 0 0 18px rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.nocscore__box::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.22) 3px, rgba(0,0,0,.22) 4px);
  mix-blend-mode: multiply; opacity:.55;
}

.nocscore__head{ display:flex; align-items:center; gap:7px; font-family:"Share Tech Mono",monospace; font-size: 8px; letter-spacing:1.5px; color: rgba(43,255,156,.7); margin-bottom: 5px; }
.nocscore__live{ display:inline-flex; align-items:center; gap:5px; color: var(--noc-fx-yellow); text-shadow: 0 0 6px rgba(255,216,77,.5); }
.nocscore__live::before{ content:""; width:6px; height:6px; border-radius:50%; background: #ff3b5c; box-shadow:0 0 8px #ff3b5c; animation: nocTvBlink 1.1s steps(1,end) infinite; }
.nocscore__head--off .nocscore__live{ color: rgba(160,180,200,.5); }
.nocscore__head--off .nocscore__live::before{ background:#5a6675; box-shadow:none; animation:none; }

.nocscore__row{ display:flex; align-items:center; gap:10px; font-family:"Press Start 2P","Share Tech Mono",monospace; font-size: 12px; color:#eafff5; text-shadow: 0 0 8px rgba(43,255,156,.45); white-space: nowrap; }
.nocscore__team{ color:#cfeede; }
.nocscore__num{ font-family:"VT323",monospace; font-size: 26px; line-height:1; color: var(--noc-fx-green); text-shadow: 0 0 10px rgba(43,255,156,.6); }
.nocscore__sep{ color: rgba(180,210,200,.5); }
.nocscore__min{ margin-top: 5px; font-family:"Share Tech Mono",monospace; font-size: 10px; letter-spacing:1px; color: rgba(200,240,225,.7); }
#nocScore.is-flash .nocscore__box{ animation: nocScoreFlash .5s ease; }

/* ════════════════════════════════════════════════════════════════════════
   4. ESTADOS GLOBAIS
════════════════════════════════════════════════════════════════════════ */
body.noc-has-modal #nocTV, body.noc-has-modal #nocScore{ opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* PERF: com qualquer modal aberto a TV/placar somem — então pausamos as
   animações infinitas (ruído, flicker, scanline, blinks) para não ficarem
   repintando por baixo do modal e comendo CPU/GPU à toa. */
body.noc-has-modal .noctv__noise,
body.noc-has-modal .noctv__scanlines::after,
body.noc-has-modal .noctv__screen,
body.noc-has-modal .noctv__channel::before,
body.noc-has-modal .noctv__leds span:nth-child(1),
body.noc-has-modal .nocscore__live::before{
  animation-play-state: paused !important;
}

/* ════════════════════════════════════════════════════════════════════════
   5. KEYFRAMES
════════════════════════════════════════════════════════════════════════ */
@keyframes nocTvBlink{ 0%,60%{opacity:1} 61%,100%{opacity:.15} }
@keyframes nocTvFlicker{ 0%,100%{ filter:brightness(1) } 6%{ filter:brightness(1.06) } 7%{ filter:brightness(.92) } 8%{ filter:brightness(1.04) } 42%{ filter:brightness(1) } 43%{ filter:brightness(.88) } 44%{ filter:brightness(1.05) } 70%{ filter:brightness(1) } }
@keyframes nocTvRoll{ 0%{ transform: translateY(-130%) } 100%{ transform: translateY(520%) } }
@keyframes nocTvNoise{ 0%{ transform:translate(0,0) } 25%{ transform:translate(-4%,2%) } 50%{ transform:translate(3%,-3%) } 75%{ transform:translate(-2%,3%) } 100%{ transform:translate(2%,-1%) } }
@keyframes nocTvGlitch{ 0%{ transform:translate(0,0); clip-path:inset(0 0 0 0) } 20%{ transform:translate(-3px,1px); clip-path:inset(12% 0 40% 0) } 40%{ transform:translate(3px,-1px); clip-path:inset(50% 0 18% 0) } 60%{ transform:translate(-2px,0); clip-path:inset(28% 0 55% 0) } 100%{ transform:translate(0,0); clip-path:inset(0 0 0 0) } }
@keyframes nocTvDrop{ 0%{ transform: translateY(-130%) rotate(13deg); } 45%{ transform: translateY(0%) rotate(-9deg); } 65%{ transform: translateY(0%) rotate(6deg); } 82%{ transform: translateY(0%) rotate(-3deg); } 100%{ transform: translateY(0%) rotate(0deg); } }
@keyframes nocScoreFlash{ 0%,100%{ box-shadow:0 0 16px rgba(43,255,156,.16), inset 0 0 18px rgba(0,0,0,.6) } 50%{ box-shadow:0 0 30px rgba(43,255,156,.55), inset 0 0 18px rgba(0,0,0,.6) } }

/* ════════════════════════════════════════════════════════════════════════
   6. RESPONSIVO & PERFORMANCE MOBILE GERAL
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px){
  #nocTV{ width: clamp(212px, 28vw, 286px); }
  .noctv__msg{ font-size: 22px; }
  .noctv__channel{ font-size: 10px; }
}

@media (max-width: 768px){
  /* OTIMIZAÇÃO CRÍTICA IOS/SAFARI */
  
  /* 1. Backdrop Filter pesado no Placar */
  .nocscore__box { 
    backdrop-filter: none !important; 
    -webkit-backdrop-filter: none !important;
    background: rgba(2,8,6, 0.95) !important; /* Cor sólida compensatória */
  }

  /* 2. TV CRT FX (Ruídos e Flickers matam o FPS no celular) */
  .noctv__noise { display: none !important; animation: none !important; }
  .noctv__glass { display: none !important; }
  .noctv__scanlines::after { display: none !important; animation: none !important; }
  .noctv__screen { animation: none !important; filter: none !important; }

  /* 3. Ambient Fog Fullscreen - Desligado no mobile para poupar GPU */
  #nocAmbient { display: none !important; animation: none !important; }
  
  /* 4. Canvas Blend Mode */
  #nocFxCanvas { mix-blend-mode: normal !important; opacity: 0.6 !important; }

  /* 5. TV Layout Mobile */
  #nocTV{ width: 150px; right: 8px; }
  .noctv__frame{ padding:8px 8px 11px; border-radius:11px; }
  .noctv__brand{ font-size:6px; margin-bottom:5px; }
  .noctv__cable{ height: 26px; }
  .noctv__mount{ width:34px; height:9px; }
  .noctv__channel{ font-size:8px; letter-spacing:1px; }
  .noctv__msg-tag{ font-size:9px; }
  .noctv__msg{ font-size:16px; }
  .noctv__leds{ margin-top:6px; }
  .noctv__leds span{ width:5px; height:5px; }
  
  /* 6. Placar Mobile Layout */
  #nocScore{ left: 8px; bottom: clamp(86px, 12vh, 120px); }
  .nocscore__box{ padding:7px 10px 6px; }
  .nocscore__row{ font-size:10px; gap:8px; }
  .nocscore__num{ font-size:21px; }
  .nocscore__head{ font-size:7px; }
}

/* ════════════════════════════════════════════════════════════════════════
   7. ACESSIBILIDADE — reduz movimento
════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .noctv__screen{ animation:none !important; }
  .noctv__noise{ animation:none !important; opacity:.04; }
  .noctv__scanlines::after{ display:none !important; }
  .noctv__channel::before, .noctv__leds span:nth-child(1), .nocscore__live::before{ animation:none !important; }
  .noctv.noctv--cssdrop .noctv__pivot{ animation:none !important; }
  #nocFxCanvas{ display:none !important; }
  #nocAmbient{ display:none !important; }
}