/* Sexy Geek — Design System / geek-fx.css
   Efeitos "geek" reutilizáveis (glitch RGB, scanlines CRT, ruído, cantos pixelados, cursor de
   terminal) — complementa colors_and_type.css, nunca usa cor solta fora dos tokens do DS.
   Inspirado em técnicas conhecidas de glitch/CRT/pixel-art (reactbits.dev, spell.sh) — CSS
   autoral, nenhum código copiado, só o mesmo repertório visual adaptado aos tokens da marca. */

/* ── Glitch text (separação de canal RGB) ─────────────────────────────────────
   Uso: <span className="gx-glitch" data-text="ACESSO TOTAL">ACESSO TOTAL</span>
   `data-text` precisa repetir o conteúdo (as camadas ::before/::after o leem via `attr()`).
   Adicione `gx-glitch-hover` pra só disparar no :hover em vez de continuamente. */
.gx-glitch {
  position: relative; display: inline-block; color: var(--text-primary);
}
.gx-glitch::before, .gx-glitch::after {
  content: attr(data-text); position: absolute; inset: 0; background: inherit;
  clip-path: inset(0 0 0 0);
}
.gx-glitch::before {
  color: var(--magenta); transform: translateX(-2px);
  animation: gx-glitch-1 1.8s infinite linear;
}
.gx-glitch::after {
  color: var(--blue); transform: translateX(2px);
  animation: gx-glitch-2 1.8s infinite linear;
}
/* Por padrão o glitch já roda sozinho (precisa ser visível sem exigir hover pra ser notado).
   `gx-glitch-hover` inverte isso — só dispara ao passar o mouse, pra usos mais discretos. */
.gx-glitch-hover::before, .gx-glitch-hover::after { animation-play-state: paused; opacity: 0; }
.gx-glitch-hover:hover::before, .gx-glitch-hover:hover::after { animation-play-state: running; opacity: 0.9; }

/* Logo intervention for the home hero: the original mark stays legible while two
   offset RGB channels produce a restrained, animated signal break. */
.gx-hero-logo-glitch {
  position: absolute; z-index: 1; pointer-events: none;
  right: clamp(28px, 7vw, 96px); top: 50%; width: min(34vw, 340px);
  transform: translateY(-50%) rotate(-4deg); opacity: 0.9;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.62));
}
.gx-hero-logo-glitch img { display: block; width: 100%; height: auto; }
.gx-hero-logo-base { position: relative; z-index: 1; }
.gx-hero-logo-channel { position: absolute; inset: 0; z-index: 2; opacity: 0; mix-blend-mode: screen; }
.gx-hero-logo-channel-cyan { filter: sepia(1) saturate(7) hue-rotate(155deg) brightness(1.25); animation: gx-logo-cyan 2.7s steps(1,end) infinite; }
.gx-hero-logo-channel-pink { filter: sepia(1) saturate(9) hue-rotate(295deg) brightness(1.15); animation: gx-logo-pink 2.2s steps(1,end) infinite reverse; }
@keyframes gx-logo-cyan {
  0%, 72%, 100% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  74% { clip-path: inset(12% 0 62% 0); transform: translate(-8px, 1px); opacity: 0.7; }
  76% { clip-path: inset(58% 0 18% 0); transform: translate(7px, -2px); opacity: 0.7; }
  78% { clip-path: inset(0); transform: translate(0); opacity: 0; }
}
@keyframes gx-logo-pink {
  0%, 65%, 100% { clip-path: inset(0); transform: translate(0); opacity: 0; }
  67% { clip-path: inset(66% 0 8% 0); transform: translate(8px, 2px); opacity: 0.7; }
  69% { clip-path: inset(18% 0 54% 0); transform: translate(-6px, -1px); opacity: 0.7; }
  71% { clip-path: inset(0); transform: translate(0); opacity: 0; }
}
.sg-brand-logo { filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55)); }
.gx-hero-logo-glitch-compact { right: 18px; top: 24%; width: min(48vw, 230px); opacity: 0.65; }
@media (prefers-reduced-motion: reduce) {
  .gx-hero-logo-channel-cyan, .gx-hero-logo-channel-pink { animation: none; }
}

@keyframes gx-glitch-1 {
  0%, 78%, 100% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
  80% { clip-path: inset(10% 0 65% 0); transform: translateX(-5px); opacity: 0.9; }
  82% { clip-path: inset(60% 0 5% 0);  transform: translateX(4px);  opacity: 0.9; }
  84% { clip-path: inset(30% 0 40% 0); transform: translateX(-4px); opacity: 0.9; }
  86%, 90% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
  92% { clip-path: inset(20% 0 50% 0); transform: translateX(-3px); opacity: 0.7; }
  94% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
}
@keyframes gx-glitch-2 {
  0%, 76%, 100% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
  78% { clip-path: inset(70% 0 5% 0);  transform: translateX(5px);  opacity: 0.9; }
  80% { clip-path: inset(15% 0 55% 0); transform: translateX(-4px); opacity: 0.9; }
  82% { clip-path: inset(45% 0 20% 0); transform: translateX(4px);  opacity: 0.9; }
  84%, 91% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
  93% { clip-path: inset(35% 0 30% 0); transform: translateX(3px); opacity: 0.7; }
  95% { clip-path: inset(0 0 0 0); transform: translateX(0); opacity: 0; }
}

/* ── Scanlines (textura de tela CRT) ──────────────────────────────────────────
   Aplicar num container `position:relative` — o overlay é um ::after absoluto. */
.gx-scanlines { position: relative; isolation: isolate; }
.gx-scanlines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,0.09) 0px, rgba(255,255,255,0.09) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: overlay;
}

/* ── Ruído sutil (grão de tela antiga) ────────────────────────────────────────
   SVG feTurbulence embutido via data-URI — sem requisição externa. */
.gx-noise { position: relative; isolation: isolate; }
.gx-noise::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.1;
  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");
  mix-blend-mode: overlay;
}

/* ── Cantos pixelados (borda estilo 8-bit, sem imagem) ────────────────────────
   clip-path em degraus — funciona em qualquer tamanho de card, sem sprite. */
.gx-pixel-corners {
  clip-path: polygon(
    0 14px, 14px 14px, 14px 0,
    calc(100% - 14px) 0, calc(100% - 14px) 14px, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 14px calc(100% - 14px), 0 calc(100% - 14px)
  );
}
/* Versão pequena, pra cards/badges onde 14px comeria o conteúdo. */
.gx-pixel-corners-sm {
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)
  );
}

/* ── Cursor de terminal piscando — pro tom "geek/hacker" em rótulos/CTAs ─────── */
.gx-caret::after {
  content: '_'; display: inline-block; margin-left: 2px; font-family: var(--font-mono);
  animation: gx-caret-blink 1s steps(1) infinite;
}
@keyframes gx-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── Grade de pontos "dot-matrix" (backdrop decorativo geek) ──────────────────
   Aplicar em background-image direto (não precisa de pseudo-elemento). */
.gx-dot-grid-bg {
  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 14px 14px;
}

/* ── Drift Wall — parede de fotos em colunas que derivam continuamente,
   escurecidas em repouso, reveladas no hover (inspirado no componente de mesmo
   nome do reactbits.dev — reimplementado aqui em CSS/JS autoral: o projeto não
   usa bundler/npm, só Babel-standalone no navegador, então o pacote deles não
   instala; a técnica visual — colunas com velocidades diferentes, loop
   infinito via translateY(-50%) em conteúdo duplicado, dim+grayscale em
   repouso — foi recriada do zero pros tokens do DS). Ver components/DriftWall. */
/* O recorte (overflow/mask) fica num elemento SEM transform 3D, e a rotação fica isolada no
   `.dw-wall` de dentro — misturar mask-image + rotateX/rotateY no mesmo elemento quebra o
   hit-test de clique dos filhos em alguns navegadores (os tiles ficavam visualmente no lugar
   certo mas o clique caía no elemento errado). Camadas separadas resolvem os dois. */
.dw-viewport {
  position: relative; width: 100%; overflow: hidden; pointer-events: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.dw-wall {
  position: relative; width: 100%; height: 100%; display: flex;
  transform-style: preserve-3d; transition: transform 0.4s var(--ease-out);
}
.dw-col {
  flex: 1 1 0; display: flex; flex-direction: column; will-change: transform;
  animation-timing-function: linear; animation-iteration-count: infinite;
}
.dw-col-up { animation-name: dw-drift-up; }
.dw-col-down { animation-name: dw-drift-down; }
.dw-col:hover { animation-play-state: paused; }
@keyframes dw-drift-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes dw-drift-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

.dw-tile { position: relative; overflow: hidden; cursor: pointer; flex-shrink: 0; background: #14141C; }
.dw-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(0.35) brightness(0.55) saturate(0.9);
  transform: scale(1.02);
  transition: filter 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.dw-tile::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(8,118,201,0.28), rgba(0,22,42,0.15));
  opacity: 1; transition: opacity 0.4s var(--ease-out);
}
.dw-tile:hover img { filter: grayscale(0) brightness(1) saturate(1); transform: scale(1.08); }
.dw-tile:hover::after { opacity: 0; }
.dw-tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 10px;
  background: linear-gradient(to top, rgba(6,0,16,0.9), transparent);
  font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.dw-tile:hover .dw-tile-label { opacity: 1; transform: translateY(0); }