/* ===========================
   LocShow   Visual Effects
   Efeitos tech / LED
   =========================== */

/* ---- CURSOR GLOW ---- */
.cursor-glow {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(80, 80, 255, 0.10) 0%, rgba(0, 0, 150, 0.04) 40%, transparent 70%);
  transition: opacity 0.3s;
  opacity: 0;
  mix-blend-mode: screen;
}
body:hover .cursor-glow { opacity: 1; }

/* ---- LED DOT TEXTURE ---- */
.led-texture {
  position: relative;
}
.led-texture::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 1;
}
.led-texture > * { position: relative; z-index: 2; }

/* LED texture dark (for blue sections) */
.led-texture-dark::before {
  background-image: radial-gradient(rgba(100,100,255,0.15) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* ---- LIGHT STREAK ---- */
@keyframes lightStreak {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(120vw) skewX(-20deg); opacity: 0; }
}
.light-streak {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.light-streak::before,
.light-streak::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, rgba(120,120,255,0.25), rgba(200,200,255,0.5), rgba(120,120,255,0.25), transparent);
  filter: blur(2px);
  animation: lightStreak 8s ease-in-out infinite;
}
.light-streak::after {
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(255,200,100,0.2), rgba(255,220,120,0.4), rgba(255,200,100,0.2), transparent);
  animation-duration: 13s;
  animation-delay: 5s;
}

/* ---- FLOATING TECH SHAPES ---- */
.tech-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
@keyframes floatDeco {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}
@keyframes floatDeco2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-8deg); }
}
.tech-deco.float1 { animation: floatDeco 7s ease-in-out infinite; }
.tech-deco.float2 { animation: floatDeco2 9s ease-in-out infinite; }
.tech-deco.float3 { animation: floatDeco 11s ease-in-out infinite 2s; }

/* ---- GLOW PULSE on headings ---- */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 20px rgba(80,80,255,0); }
  50%       { text-shadow: 0 0 30px rgba(80,80,255,0.18), 0 0 60px rgba(0,0,150,0.08); }
}
.page-hero h1 { animation: glowPulse 4s ease-in-out infinite; }
.infobanner h1 { animation: glowPulse 4s ease-in-out infinite; }

/* ---- SECTION REVEAL ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---- HERO SCANLINE OVERLAY ---- */
.scanline-overlay {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ---- NUMBER COUNTER GLOW ---- */
.numeros .caixa h5 {
  transition: text-shadow 0.3s;
}
.numeros .caixa:hover h5 {
  text-shadow: 0 0 20px rgba(80,80,255,0.35);
  filter: brightness(1.1);
}

/* ---- CARD HOVER GLOW ---- */
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(80,80,255,0.06) 0%, transparent 65%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.feature-card { position: relative; overflow: hidden; }
.feature-card:hover::after { opacity: 1; }

/* ---- BUTTON GLOW ---- */
.botpadrao {
  box-shadow: 0 0 0 rgba(80,80,255,0);
  transition: transform 0.2s, box-shadow 0.3s !important;
}
.botpadrao:hover {
  box-shadow: 0 4px 24px rgba(0,0,150,0.35) !important;
}

/* ---- PARTICLE CANVAS ---- */
.particle-canvas {
  position: absolute !important;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0 !important;
  display: block;
}

/* Ensure hero content stacks above canvas and decorations */
.page-hero > .container,
.infobanner > .container {
  position: relative;
  z-index: 3;
}
.page-hero::after {
  z-index: 1;
}

/* ---- GSAP WORD SPLIT (hero text reveal) ---- */
.gsap-word-outer {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.gsap-word {
  display: inline-block;
}

/* ---- CARD TILT   override CSS hover transform to avoid conflict with JS ---- */
.feature-card:hover {
  transform: none !important;
}
.postos-benefit-card:hover {
  transform: none !important;
}
.feature-card,
.postos-benefit-card,
.cada {
  will-change: transform;
}

/* ---- PORTFOLIO FLIP HIDDEN ---- */
.portfolio-item.flip-hidden {
  display: none;
}