/*
  effects.css
  Contiene efectos visuales y animaciones del index:
  - Intro matrix y barra de progreso
  - Glow/scanline del hero
  - Animaciones del titulo principal
  - Canvas de fondo animado
*/

/* INTRO: estilos del loader tipo matrix */
#intro{position:fixed;width:100%;height:100%;background:black;display:flex;justify-content:center;align-items:center;flex-direction:column;z-index:9999;}
#matrix{position:absolute;width:100%;height:100%;}
#progressBar{width:300px;height:10px;background:#111;border-radius:10px;overflow:hidden;z-index:2;}
#progress{height:100%;width:0%;background:#00e0ff;box-shadow:0 0 10px #00e0ff;}

/* HERO: capas decorativas y animaciones de texto */
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top,left,rgba(0,224,255,0.16),transparent 40%),linear-gradient(180deg,rgba(255,255,255,0.04),rgba(0,0,0,0.35));pointer-events:none;mix-blend-mode:screen;z-index:-1;}
.hero::after{content:'';position:absolute;left:-10%;top:20%;width:130%;height:120%;background:repeating-linear-gradient(45deg,transparent,transparent 20px,rgba(0,224,255,0.08) 20px,rgba(0,224,255,0.08) 21px);opacity:0.15;transform:translateX(-100%);animation:scanline 18s linear infinite;z-index:-1;}

.hero h1{position:relative;display:inline-block;font-size:64px;margin-bottom:18px;line-height:1.02;background:linear-gradient(90deg,#00e0ff 0%,#9333ea 30%,#00e0ff 58%,#9333ea 82%,#00e0ff 100%);background-size:260% 260%;-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.02em;will-change:clip-path,background-position,filter;transition:letter-spacing .35s ease,transform .35s ease;animation:titleGradientShift 5.2s linear infinite 1.9s,titleGlowPulse 3.1s ease-in-out infinite 1.9s;clip-path:inset(0 102% 0 0);}
.hero h1:hover{letter-spacing:.045em;transform:translateY(-2px) scale(1.01);}
.title-wiper{position:absolute;top:-6%;left:-18%;width:22%;height:112%;background:linear-gradient(90deg,transparent 0%,rgba(180,248,255,0.68) 46%,rgba(255,255,255,0.82) 62%,rgba(160,230,255,0.55) 76%,transparent 100%);pointer-events:none;z-index:3;filter:blur(4px);}
.hero p{animation:fadeInUp 1s ease .15s forwards;opacity:0;}

/* Refuerzo visual para la interaccion Anime.js de las tarjetas. */
.menu-card{perspective:880px;transform-style:preserve-3d;}
.card-header{transform-style:preserve-3d;will-change:transform;}
.card-burst{position:absolute;width:14px;height:14px;border-radius:999px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(155,245,255,0.46) 0%,rgba(40,190,255,0.36) 42%,rgba(0,130,255,0) 68%);pointer-events:none;z-index:0;}

@keyframes fadeInUp{
 0%{opacity:0;transform:translateY(20px);}
 100%{opacity:1;transform:translateY(0);}
}

@keyframes scanline{
 0%{transform:translateX(-100%);}
 100%{transform:translateX(100%);}
}

@keyframes titleGradientShift{
 0%,100%{background-position:0% 50%;}
 50%{background-position:100% 50%;}
}

@keyframes titleGlowPulse{
 0%,100%{filter:drop-shadow(0 0 8px rgba(120,235,255,0.28)) drop-shadow(0 0 22px rgba(60,190,255,0.2));}
 50%{filter:drop-shadow(0 0 14px rgba(160,245,255,0.56)) drop-shadow(0 0 34px rgba(35,205,255,0.35));}
}

/* Canvas de fondo animado */
#bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-2;pointer-events:none;}

/* EFECTO HACKEO - overlay y lineas de glitch sobre el contenido. */
.hack-overlay{position:fixed;inset:0;z-index:8000;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,255,80,0.06) 0px,rgba(0,255,80,0.06) 1px,transparent 1px,transparent 3px),linear-gradient(180deg,rgba(0,20,0,0.82),rgba(0,40,10,0.72));opacity:0;}
.hack-glitch-line{position:absolute;height:2px;background:linear-gradient(90deg,transparent,rgba(0,255,140,0.85),rgba(255,255,255,0.72),rgba(0,220,100,0.5),transparent);opacity:0;pointer-events:none;z-index:4;border-radius:1px;}

@media (max-width:1024px){
  .hero h1{font-size:52px;margin-bottom:14px;}
  .hero p{font-size:1.08rem;}
}

@media (max-width:768px){
  #progressBar{width:min(82vw,300px);}
  .hero::after{opacity:.1;}
  .hero h1{font-size:40px;line-height:1.08;}
  .hero p{font-size:.98rem;}
}

@media (max-width:480px){
  .hero h1{font-size:32px;}
  .hero p{font-size:.9rem;}
}