/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  THE MASK CUP — SISTEMA DE EFEITOS v1                                ║
   ║  Linguagem visual gamer/tático aplicada ao site inteiro.             ║
   ║                                                                      ║
   ║  REGRAS DE PERFORMANCE (não quebrar):                                ║
   ║   • Anima apenas transform e opacity — as duas propriedades que a    ║
   ║     GPU resolve sem recalcular layout. Nunca animar width/top/left.  ║
   ║   • Nenhuma biblioteca. Tudo CSS + IntersectionObserver.             ║
   ║   • À PROVA DE FALHAS: o conteúdo é visível por padrão. O estado     ║
   ║     oculto só existe sob .fx-on, aplicada por JS. Se o JS falhar,   ║
   ║     nada some da tela.                                               ║
   ║   • Tudo respeita prefers-reduced-motion.                            ║
   ╚══════════════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════════════════════════
   1. ENTRADA AO ROLAR
═══════════════════════════════════════════════════════════════ */
.fx-on [data-fx] {
  opacity: 0;
  transition: opacity .75s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
              transform .75s var(--ease-out-expo, cubic-bezier(.16,1,.3,1)),
              filter .75s ease;
  will-change: transform, opacity;
}
.fx-on [data-fx="up"]    { transform: translate3d(0, 26px, 0); }
.fx-on [data-fx="down"]  { transform: translate3d(0, -26px, 0); }
.fx-on [data-fx="left"]  { transform: translate3d(-32px, 0, 0); }
.fx-on [data-fx="right"] { transform: translate3d(32px, 0, 0); }
.fx-on [data-fx="zoom"]  { transform: scale(.92); }
.fx-on [data-fx="blur"]  { filter: blur(9px); transform: translate3d(0, 14px, 0); }
.fx-on [data-fx="clip"]  { clip-path: inset(0 100% 0 0); opacity: 1; }

.fx-on [data-fx].fx-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* Atraso em cascata — dá ritmo sem precisar de JS por elemento */
.fx-on [data-fx-d="1"] { transition-delay: .06s }
.fx-on [data-fx-d="2"] { transition-delay: .12s }
.fx-on [data-fx-d="3"] { transition-delay: .18s }
.fx-on [data-fx-d="4"] { transition-delay: .24s }
.fx-on [data-fx-d="5"] { transition-delay: .30s }
.fx-on [data-fx-d="6"] { transition-delay: .36s }

/* ═══════════════════════════════════════════════════════════════
   2. MOLDURA HUD — cantos táticos
   Evoca a interface do jogo sem precisar de imagem.
═══════════════════════════════════════════════════════════════ */
.fx-hud { position: relative; }
.fx-hud::before,
.fx-hud::after {
  content: ''; position: absolute;
  width: 16px; height: 16px;
  border: 1.5px solid var(--teal);
  opacity: .34; pointer-events: none;
  transition: opacity .35s ease, width .35s var(--ease-out-expo, ease),
              height .35s var(--ease-out-expo, ease);
}
.fx-hud::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.fx-hud::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
.fx-hud:hover::before,
.fx-hud:hover::after { opacity: .9; width: 22px; height: 22px; }
.fx-hud.gold::before, .fx-hud.gold::after { border-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════
   3. VARREDURA DE LUZ — passa um brilho no card ao passar o mouse
═══════════════════════════════════════════════════════════════ */
.fx-sheen { position: relative; overflow: hidden; }
.fx-sheen::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg,
      transparent 38%,
      rgba(255,255,255,.09) 48%,
      rgba(255,255,255,.16) 52%,
      transparent 62%);
  transform: translateX(-120%);
  transition: transform .85s var(--ease-out-expo, ease);
  pointer-events: none;
}
.fx-sheen:hover::after { transform: translateX(120%); }

/* ═══════════════════════════════════════════════════════════════
   4. ELEVAÇÃO E INCLINAÇÃO 3D
═══════════════════════════════════════════════════════════════ */
.fx-lift {
  transition: transform .38s var(--ease-out-expo, ease),
              box-shadow .38s ease, border-color .38s ease;
}
.fx-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 48px -24px rgba(0,0,0,.95);
}

/* O ângulo é calculado pelo fx.js a partir da posição do mouse */
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform .18s ease-out;
}
.fx-tilt > * { transform: translateZ(18px); }

/* ═══════════════════════════════════════════════════════════════
   5. MIRA (CROSSHAIR) — motivo central do CS
═══════════════════════════════════════════════════════════════ */
.fx-crosshair {
  position: absolute; width: 42px; height: 42px;
  pointer-events: none; opacity: .3;
}
.fx-crosshair::before,
.fx-crosshair::after {
  content: ''; position: absolute; background: var(--teal-hi);
}
.fx-crosshair::before {
  left: 50%; top: 0; width: 1px; height: 100%;
  transform: translateX(-50%);
  mask-image: linear-gradient(180deg, var(--teal) 0 34%, transparent 34% 66%, var(--teal) 66%);
  -webkit-mask-image: linear-gradient(180deg, #000 0 34%, transparent 34% 66%, #000 66%);
}
.fx-crosshair::after {
  top: 50%; left: 0; height: 1px; width: 100%;
  transform: translateY(-50%);
  mask-image: linear-gradient(90deg, var(--teal) 0 34%, transparent 34% 66%, var(--teal) 66%);
  -webkit-mask-image: linear-gradient(90deg, #000 0 34%, transparent 34% 66%, #000 66%);
}
.fx-crosshair.spin { animation: fx-spin 18s linear infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════
   6. LINHAS DE VARREDURA / GRADE TÉCNICA
═══════════════════════════════════════════════════════════════ */
.fx-scan { position: relative; overflow: hidden; }
.fx-scan::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
      180deg, transparent 0 2px, rgba(0,0,0,.16) 2px 4px);
  opacity: .38; mix-blend-mode: multiply;
}

.fx-grid-bg { position: relative; }
.fx-grid-bg::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--dot-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--dot-color) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 25%, transparent 76%);
}
.fx-grid-bg > * { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════
   7. FUNDO DE MAPA CS2
   Usa as imagens que já existem em /static/maps (WebP, leves).
   Ficam bem escurecidas: ambientam sem competir com o texto.
═══════════════════════════════════════════════════════════════ */
.fx-map-bg { position: relative; overflow: hidden; isolation: isolate; }
.fx-map-bg > .fx-map-layer {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  opacity: .13; filter: grayscale(.55) contrast(1.1);
  transform: scale(1.06);
  transition: transform 1.2s var(--ease-out-expo, ease), opacity .6s ease;
}
.fx-map-bg:hover > .fx-map-layer { transform: scale(1.12); opacity: .2; }
/* Véu para garantir contraste do texto por cima */
.fx-map-bg::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
      var(--bg) 0%, rgba(6,6,7,.72) 45%, var(--bg) 100%);
}

/* ═══════════════════════════════════════════════════════════════
   8. TEXTO — brilho da marca e efeito glitch
═══════════════════════════════════════════════════════════════ */
.fx-brand-text {
  background: var(--brand-gradient);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: fx-shine 7s linear infinite;
}
@keyframes fx-shine { to { background-position: 220% center; } }

.fx-glitch { position: relative; display: inline-block; }
.fx-glitch::before,
.fx-glitch::after {
  content: attr(data-text); position: absolute; inset: 0;
  clip-path: inset(0 0 0 0); pointer-events: none;
}
.fx-glitch::before { color: var(--teal-hi); transform: translateX(0); }
.fx-glitch::after  { color: var(--gold);    transform: translateX(0); }
.fx-glitch:hover::before { animation: fx-gl-a .42s steps(2) 2; }
.fx-glitch:hover::after  { animation: fx-gl-b .42s steps(2) 2; }
@keyframes fx-gl-a {
  0%,100% { transform: translate3d(0,0,0); clip-path: inset(0 0 82% 0); }
  50%     { transform: translate3d(-2px,0,0); clip-path: inset(46% 0 30% 0); }
}
@keyframes fx-gl-b {
  0%,100% { transform: translate3d(0,0,0); clip-path: inset(74% 0 0 0); }
  50%     { transform: translate3d(2px,0,0); clip-path: inset(22% 0 58% 0); }
}

/* ═══════════════════════════════════════════════════════════════
   9. PONTO PULSANTE (ao vivo) E BARRA DE CARREGAMENTO
═══════════════════════════════════════════════════════════════ */
.fx-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); display: inline-block;
  box-shadow: 0 0 0 0 rgba(217,100,92,.6);
  animation: fx-pulse-ring 2.1s cubic-bezier(.4,0,.2,1) infinite;
}
.fx-pulse.teal { background: var(--teal-hi); box-shadow: 0 0 0 0 var(--teal-glow); }
.fx-pulse.gold { background: var(--gold-hi); box-shadow: 0 0 0 0 var(--gold-glow); }
@keyframes fx-pulse-ring {
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Barra estilo "carregando servidor" */
.fx-bar {
  height: 3px; border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,.06);
}
.fx-bar > i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal-deep), var(--teal-hi));
  transition: width 1.1s var(--ease-out-expo, ease);
}

/* ═══════════════════════════════════════════════════════════════
   10. BORDA VIVA — contorno que acende no hover
═══════════════════════════════════════════════════════════════ */
.fx-edge { position: relative; }
.fx-edge::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(130deg,
      var(--gold) 0%, transparent 32%, transparent 68%, var(--teal) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease;
}
.fx-edge:hover::before { opacity: .8; }

/* ═══════════════════════════════════════════════════════════════
   11. NÚMEROS — fonte tabular para o contador não "tremer"
═══════════════════════════════════════════════════════════════ */
.fx-count { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════
   ACESSIBILIDADE — desliga tudo que é movimento
═══════════════════════════════════════════════════════════════ */
/* "reduce" significa REDUZIR movimento, não eliminar toda a animação.
   Aqui o deslocamento/zoom/blur some, mas o fade permanece — continua
   agradável e não causa desconforto vestibular. */
@media (prefers-reduced-motion: reduce) {
  .fx-on [data-fx] {
    transform: none !important; filter: none !important;
    clip-path: none !important;
    transition: opacity .45s ease !important;
  }
  .fx-on [data-fx].fx-in { opacity: 1 !important; }
  .fx-sheen::after, .fx-crosshair.spin, .fx-brand-text,
  .fx-pulse, .fx-glitch::before, .fx-glitch::after {
    animation: none !important; transition: none !important;
  }
  .fx-lift:hover, .fx-tilt { transform: none !important; }
  .fx-map-bg:hover > .fx-map-layer { transform: scale(1.06); }
}