/* ============================================================
   MAIS GAMES — STREAMER BOOST
   Camada adicional de estilo: mais vibração, glow e animação
   em cima do design original (não substitui, apenas reforça).
   ============================================================ */

:root{
  --mg-cyan: var(--cyan, #55d8ff);
  --mg-pink: var(--pink, #ff4c9b);
  --mg-acid: var(--acid, #c8ff36);
}

/* -------- scrollbar com a cara do site -------- */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#07090d; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--mg-pink), var(--mg-cyan));
  border-radius:8px;
  border:2px solid #07090d;
}
html{ scrollbar-color: var(--mg-pink) #07090d; }

/* -------- topbar / marca com brilho pulsante -------- */
.topbar .brandImage{
  filter: drop-shadow(0 0 0 rgba(85,216,255,0));
  animation: mgBrandGlow 3.2s ease-in-out infinite;
}
@keyframes mgBrandGlow{
  0%,100%{ filter: drop-shadow(0 0 6px rgba(85,216,255,.35)); }
  50%{ filter: drop-shadow(0 0 16px rgba(255,76,155,.55)); }
}

.brandWord{
  background: linear-gradient(90deg, var(--mg-cyan), var(--mg-pink), var(--mg-acid), var(--mg-cyan));
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mgGradientShift 6s linear infinite;
}
@keyframes mgGradientShift{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 300% 50%; }
}

.topbar nav button:after{
  height:2px !important;
  background: linear-gradient(90deg, var(--mg-cyan), var(--mg-pink)) !important;
  box-shadow: 0 0 10px var(--mg-cyan);
}

/* -------- hero: título com glow neon -------- */
.heroTitle strong{
  text-shadow: 0 0 18px rgba(255,76,155,.35), 0 0 42px rgba(85,216,255,.18);
}
.heroTitle strong:after{
  animation: mgUnderlineGrow 2.6s ease-in-out infinite alternate;
  box-shadow: 0 0 18px rgba(255,76,155,.65);
  transform-origin: right center;
}
@keyframes mgUnderlineGrow{
  0%{ transform: skew(-28deg) scaleX(.8); opacity:.75; }
  100%{ transform: skew(-28deg) scaleX(1.25); opacity:1; }
}

.eyebrow span{
  box-shadow: 0 0 12px var(--mg-pink);
  animation: mgPing 1.8s ease-in-out infinite;
}
@keyframes mgPing{
  0%,100%{ transform:scaleX(1); opacity:1; }
  50%{ transform:scaleX(1.6); opacity:.6; }
}

/* -------- botões: brilho e efeito de "energia" -------- */
.primary,.ghost{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.primary:before,.ghost:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.primary:hover:before,.ghost:hover:before{
  transform:translateX(120%);
}
.primary:hover{
  box-shadow: 0 0 24px rgba(85,216,255,.65), 0 10px 30px rgba(85,216,255,.25);
}
.ghost:hover{
  box-shadow: 0 0 20px rgba(255,76,155,.45);
}

/* -------- player card: aura giratória neon -------- */
.playerCard{
  position:relative;
}
.playerCard.online{
  animation: cardFloat 7s ease-in-out infinite, mgAuraPulse 3.4s ease-in-out infinite;
}
@keyframes mgAuraPulse{
  0%,100%{ box-shadow:0 35px 90px rgba(0,0,0,.48), 0 0 34px rgba(255,76,155,.14); }
  50%{ box-shadow:0 35px 90px rgba(0,0,0,.48), 0 0 55px rgba(85,216,255,.35); }
}
.playerCard.online:before{
  background-size:200% 100%;
  animation: mgGradientShift 3.5s linear infinite;
}

.pulseDot.online{
  box-shadow: 0 0 0 5px rgba(255,76,155,.24), 0 0 26px rgba(255,76,155,.85);
}

.liveRibbon{
  animation: mgLiveFlicker 2.4s ease-in-out infinite;
}
@keyframes mgLiveFlicker{
  0%,19%,21%,54%,56%,100%{ filter:none; }
  20%,55%{ filter:brightness(1.3); }
}

/* -------- ticker: passe de luz -------- */
.tickerRail{
  position:relative;
}
.ticker span{
  text-shadow: 0 0 12px rgba(85,216,255,.35);
}

/* -------- seções: títulos com destaque e movimento -------- */
/* O brilho percorre o texto lentamente. A duração longa evita repaints
   agressivos, mas mantém o efeito perceptível em desktop, tablet e celular. */
.sectionHead h2,.aboutIntro h2{
  background:linear-gradient(100deg, var(--paper) 35%, var(--mg-cyan) 55%, var(--paper) 75%);
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:mgTitleSweep 6.8s ease-in-out infinite;
  will-change:background-position;
  filter:drop-shadow(0 0 12px rgba(85,216,255,.08));
}
@keyframes mgTitleSweep{
  0%,12%{ background-position:100% 50%; }
  58%,100%{ background-position:-115% 50%; }
}

.kicker,.signature{
  animation:mgTextSignal 3.2s ease-in-out infinite;
}
@keyframes mgTextSignal{
  0%,100%{ text-shadow:0 0 0 rgba(85,216,255,0); opacity:.82; }
  50%{ text-shadow:0 0 14px rgba(85,216,255,.52); opacity:1; }
}

/* -------- cards de vídeo: hover mais vivo -------- */
.videoCard>button{
  transition: box-shadow .35s ease, transform .35s ease;
}
.videoCard>button:hover{
  box-shadow: 0 18px 45px rgba(85,216,255,.22);
  transform: translateY(-4px);
}
.cardPlay{
  transition: all .25s ease, box-shadow .25s ease;
}
.videoCard>button:hover .cardPlay{
  box-shadow: 0 0 22px rgba(255,255,255,.75);
  transform: translate(-50%,-50%) scale(1.12);
}
.cardCopy span{
  text-shadow: 0 0 10px rgba(85,216,255,.4);
}

/* -------- setup cards: borda com energia -------- */
.setupCard{
  position:relative;
}
.setupCard:hover{
  box-shadow: 0 20px 50px rgba(85,216,255,.18), inset 0 0 0 1px rgba(85,216,255,.45);
}
.setupCard small{
  text-shadow: 0 0 10px rgba(255,76,155,.5);
}
.setupInspect{
  position:relative;
}
.setupInspect:after{
  content:"";
  position:absolute;
  left:0; bottom:-3px;
  width:0%; height:1px;
  background: var(--mg-cyan);
  box-shadow: 0 0 8px var(--mg-cyan);
  transition: width .3s ease;
}
.setupCard:hover .setupInspect:after{ width:100%; }

/* -------- links de texto com underline animado -------- */
.textLink{
  position:relative;
}
.textLink:hover{
  text-shadow: 0 0 10px rgba(85,216,255,.5);
}

/* -------- footer social: glow ao passar o mouse -------- */
.socialButton{
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.socialButton:hover,.socialButton:focus-visible{
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 26px rgba(85,216,255,.28);
}
.socialButton.social-twitch:hover{ box-shadow:0 10px 26px rgba(145,71,255,.45); }
.socialButton.social-youtube:hover{ box-shadow:0 10px 26px rgba(255,0,60,.4); }
.socialButton.social-instagram:hover{ box-shadow:0 10px 26px rgba(255,76,155,.45); }

/* -------- dock de música / pix: leve respiração -------- */
.musicToggle,.pixFab{
  animation: mgBreathe 3.6s ease-in-out infinite;
}
@keyframes mgBreathe{
  0%,100%{ box-shadow:0 0 0 rgba(255,76,155,0); }
  50%{ box-shadow:0 0 20px rgba(255,76,155,.35); }
}

/* -------- partículas originais: fallback leve -------- */
/* Mantemos o efeito original em baixa intensidade. Assim o site nunca fica
   totalmente estático se o canvas for bloqueado ou perder o contexto gráfico. */
.ambientFx{
  display:block;
  opacity:.24;
}

/* -------- canvas de partículas: fundo vibrante, sempre ATRÁS do conteúdo -------- */
/* Fica no DOM antes de #root e sem z-index positivo de propósito: assim
   qualquer card, imagem ou seção do site (que vem depois no HTML) pinta
   por cima dele naturalmente — sem precisar de nenhum z-index "brigando".
   Também não usamos mais mix-blend-mode aqui: em algumas combinações de
   GPU/navegador no desktop ele falha silenciosamente e o canvas some;
   a cor + o glow das partículas já dão brilho suficiente sem precisar
   disso. */
#mgParticles{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.82;
}

/* A hierarquia explícita elimina a diferença de composição observada entre
   navegadores: canvas em 1, aplicação em 2 e seus controles acima disso. */
#root{
  position:relative;
  z-index:2;
  isolation:isolate;
}

/* O fundo original do <main> era 100% opaco (cobria a página toda) e
   por isso escondia qualquer coisa atrás dele. Deixamos só o glow
   radial decorativo original e tiramos a cor sólida de baixo, para o
   canvas aparecer nos espaços "vazios" entre os cards — exatamente
   como o efeito ambiente (.ambientFx) já fazia antes, só que visível. */
main{
  background: radial-gradient(circle at 87% 10%, #2d53a624, transparent 28%) !important;
}
html, body{
  background: var(--ink) !important;
}

/* As demais seções também tinham uma cor sólida de fundo (#0a0d12,
   #0d1118, #080a0e...) cobrindo tudo — por isso as partículas só
   apareciam no hero. Tiramos essa camada sólida de cada uma (mantendo
   os brilhos radiais decorativos originais) pra elas ficarem visíveis
   no site inteiro, sempre atrás dos cards/imagens de cada seção. */
.arsenalSection{
  background: transparent !important;
}
.setupBlock{
  background: radial-gradient(circle at 15%, #ff4c9b0e, #0000 27%) !important;
}
.showcaseBlock{
  background: transparent !important;
}
.aboutSection{
  background: radial-gradient(circle at 12% 22%, #55d8ff16, #0000 22%) !important;
}

/* Watermarks técnicos também ganham movimento, sem alterar o layout. */
.setupBlock:after{
  animation:mgWatermarkVertical 8s ease-in-out infinite alternate;
}
.aboutSection:before{
  animation:mgWatermarkHorizontal 10s ease-in-out infinite alternate;
}
@keyframes mgWatermarkVertical{
  from{ transform:translate3d(0,-10px,0); opacity:.58; }
  to{ transform:translate3d(0,18px,0); opacity:1; }
}
@keyframes mgWatermarkHorizontal{
  from{ transform:translate3d(-12px,0,0); opacity:.58; }
  to{ transform:translate3d(18px,0,0); opacity:1; }
}

/* ============================================================
   TÍTULO DO HERO: sem efeito de hover, de propósito.
   O mouse pode passar por cima de "PRO PLAYER INCOMPREENDIDO"
   sem nada acontecer — a animação contínua de flutuação (já
   existente no site original) segue rodando normalmente.
   ============================================================ */

/* ============================================================
   CORREÇÕES DE DESKTOP
   Em telas grandes há muito mais pixel para pintar por frame
   (texto gigante em vw, gradientes animados, watermark "ARSENAL"
   em 12vw etc.). Isso pode deixar as animações "engasgadas" ou
   quase imperceptíveis em monitores largos. As regras abaixo
   promovem essas camadas para a GPU e evitam repaint desnecessário.
   ============================================================ */
/* Textos com gradiente (-webkit-background-clip:text) NÃO recebem
   translateZ/backface-visibility aqui: essa combinação é um bug
   conhecido do Safari/WebKit no desktop, onde o texto simplesmente
   some ou pisca. É um dos motivos mais prováveis das animações
   "não funcionarem" em alguns navegadores desktop. */
.brandWord{
  will-change: background-position;
}

/* Elementos que NÃO usam texto em gradiente podem ganhar a
   otimização de camada GPU com segurança. */
.playerCard.online:before,
#mgParticles{
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.heroTitle strong:after{
  /* O underline já anima seu próprio transform. Não force translateZ(0)
     aqui: no Firefox isso pode substituir/congelar o skew + scaleX. */
  will-change: width, right, opacity;
  backface-visibility: visible;
}
.setupBlock:after{
  will-change: transform;
  contain: paint;
}

/* Desktop: o deslocamento original de 20px quase desaparece diante do
   título de até 112px. Mantemos celular/tablet intactos e tornamos o
   movimento inequivocamente visível em telas grandes. O underline usa
   largura/posição (não transform), evitando conflito de composição no
   Firefox e continuando independente das duas linhas do título. */
@media (min-width:981px){
  .heroTitle span{
    animation:mgHeroDesktopRight 3.2s ease-in-out infinite alternate !important;
    animation-play-state:running !important;
  }
  .heroTitle strong{
    animation:mgHeroDesktopLeft 3.2s ease-in-out infinite alternate !important;
    animation-play-state:running !important;
  }
  .heroTitle strong:after{
    animation:mgUnderlineDesktop 2.75s ease-in-out infinite alternate !important;
    animation-play-state:running !important;
    transform:skew(-28deg);
  }
}
@keyframes mgHeroDesktopRight{
  0%{ transform:translateX(-34px); }
  100%{ transform:translateX(30px); }
}
@keyframes mgHeroDesktopLeft{
  0%{ transform:translateX(34px); }
  100%{ transform:translateX(-30px); }
}
@keyframes mgUnderlineDesktop{
  0%{ width:22%; right:9%; opacity:.65; }
  100%{ width:38%; right:0; opacity:1; }
}

/* Em telas bem largas (desktop grande), reforça um pouco a
   intensidade do glow para o efeito não "sumir" proporcionalmente
   ao tamanho da tela. */
@media (min-width: 1400px){
  .heroTitle strong{
    text-shadow: 0 0 22px rgba(255,76,155,.4), 0 0 54px rgba(85,216,255,.22);
  }
  #mgParticles{
    opacity:.94;
  }
}

/* Tablet: conserva os mesmos efeitos, com intensidade equilibrada. */
@media (min-width:701px) and (max-width:980px){
  #mgParticles{ opacity:.72; }
  .sectionHead h2,.aboutIntro h2{ animation-duration:7.6s; }
}

/* Celular: menos partículas aparentes para preservar leitura e bateria. */
@media (max-width:700px){
  #mgParticles{ opacity:.5; }
  .ambientFx{ opacity:.16; }
  .sectionHead h2,.aboutIntro h2{ animation-duration:8.4s; }
}

/* -------- respeita quem prefere menos movimento -------- */
@media (prefers-reduced-motion: reduce){
  .topbar .brandImage,.eyebrow span,
  .playerCard.online:before,.liveRibbon,
  .musicToggle,.pixFab,
  .setupBlock:after,.aboutSection:before{
    animation:none !important;
  }
  /* Alguns Firefox no Windows recebem "reduce" do sistema. Em vez de
     congelar os elementos de identidade, apenas desacelera o movimento. */
  .brandWord,.sectionHead h2,.aboutIntro h2,.kicker,.signature{
    animation-duration:12s !important;
  }
  /* A flutuação do monitor é parte essencial da composição visual.
     Mantém o movimento suave mesmo quando o navegador herda "reduce"
     do sistema, apenas com uma duração mais calma. */
  .playerCard{
    animation-duration:10s !important;
    animation-play-state:running !important;
  }
  .playerCard.online{
    animation-duration:10s,5s !important;
    animation-play-state:running,running !important;
  }
  #mgParticles{ opacity:.62; }
  .ambientFx{ opacity:.22; }
}
@media (min-width:981px) and (prefers-reduced-motion: reduce){
  .heroTitle span,.heroTitle strong{ animation-duration:6.4s !important; }
  .heroTitle strong:after{ animation-duration:5.5s !important; }
}

/* Desktop + tema escuro: restaura exclusivamente a marca clássica
   do rodapé. Tablet, celular e o Black Print do tema claro continuam
   usando exatamente as regras que já possuíam. */
@media (min-width:981px){
  html[data-theme="dark"] .footerBrand .brandImage img{
    content:url("/assets/footer-logo.png?v=2026-classic-desktop-1");
    object-fit:contain;
    filter:none;
    opacity:1;
  }
}