/* ========================================
   ORBIX AI SYSTEMS - ADVANCED CSS3 EFFECTS
   Cyberpunk Matrix decorations and animations
========================================== */

/* ===== Fondo Global (Espacio + Overlay) ===== */
:root{
  --bg-img: url("assets/bg-space-1600.webp"); /* 'none' para negro puro */
  --bg-tint: rgba(0,0,0,.45);                  /* oscurece para legibilidad */
}
html, body { height: 100%; }
body{
  margin: 0;
  background-color: #000;            /* fallback */
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;      /* si en móviles hay jitter, usa 'scroll' */
  color: #e6f0ff;
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, var(--bg-tint), var(--bg-tint));
  z-index: -1;                       /* por encima del bg, debajo del contenido */
}
/* Neutraliza fondos del hero si compiten */
.hero, .header, .masthead {
  background-image: none !important;
  background-color: transparent !important;
}

/* ===== Matrix Rain Effect ===== */
.matrix-rain {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: -2;
  opacity: 0.1;
}
.matrix-column {
  position: absolute;
  top: -100%;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  color: var(--color-neo-cyan);
  animation: matrix-fall linear infinite;
  text-shadow: 0 0 5px currentColor;
}
@keyframes matrix-fall { to { transform: translateY(100vh); } }

/* ===== Holographic Grid Background ===== */
.holo-grid {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image:
    linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: grid-move 20s linear infinite;
  z-index: -3;
}
@keyframes grid-move {
  0% { transform: translate(0,0); }
  100% { transform: translate(50px,50px); }
}

/* ===== Glitch Effect ===== */
.glitch { position: relative; color: var(--color-text-primary); animation: glitch 2s infinite; }
.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.glitch::before { animation: glitch-1 0.5s infinite; color: #ff0040; z-index: -1; }
.glitch::after  { animation: glitch-2 0.5s infinite; color: #00ffff; z-index: -2; }

@keyframes glitch {
  0%,100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px,-2px); }
  60% { transform: translate( 2px, 2px); }
  80% { transform: translate( 2px,-2px); }
}
@keyframes glitch-1 {
  0%   { transform: translate(0); }
  20%  { transform: translate(-2px, 2px); }
  40%  { transform: translate(-2px,-2px); }
  60%  { transform: translate( 2px, 2px); }
  80%  { transform: translate( 2px,-2px); }
  100% { transform: translate(0); }
}
@keyframes glitch-2 {
  0%   { transform: translate(0); }
  20%  { transform: translate( 2px,-2px); }
  40%  { transform: translate( 2px, 2px); }
  60%  { transform: translate(-2px,-2px); }
  80%  { transform: translate(-2px, 2px); }
  100% { transform: translate(0); }
}

/* ===== Neon Glow Effects ===== */
.neon-glow {
  box-shadow:
    0 0 5px var(--color-neo-cyan),
    0 0 10px var(--color-neo-cyan),
    0 0 15px var(--color-neo-cyan),
    0 0 20px var(--color-neo-cyan);
  animation: neon-flicker 2s infinite alternate;
}
@keyframes neon-flicker {
  0%,100% {
    box-shadow:
      0 0 5px var(--color-neo-cyan),
      0 0 10px var(--color-neo-cyan),
      0 0 15px var(--color-neo-cyan),
      0 0 20px var(--color-neo-cyan);
  }
  50% {
    box-shadow:
      0 0 2px var(--color-neo-cyan),
      0 0 5px var(--color-neo-cyan),
      0 0 8px var(--color-neo-cyan),
      0 0 12px var(--color-neo-cyan);
  }
}

/* ===== Cyber Panel ===== */
.cyber-panel {
  background: linear-gradient(145deg,
    rgba(0,229,255,0.1) 0%,
    rgba(10,10,10,0.9) 50%,
    rgba(212,175,55,0.1) 100%);
  border: 2px solid;
  border-image: linear-gradient(45deg, var(--color-neo-cyan), transparent, var(--color-golden)) 1;
  position: relative; overflow: hidden;
}
.cyber-panel::before{
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg,
    transparent,
    rgba(0,229,255,0.1),
    transparent,
    rgba(212,175,55,0.1),
    transparent);
  animation: cyber-scan 3s linear infinite;
}
@keyframes cyber-scan { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

/* ===== Data Stream ===== */
.data-stream { position: relative; overflow: hidden; }
.data-stream::after{
  content: '01001001 01000001 01001001 01001111 01110010 01100010 01101001 01111000';
  position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,229,255,0.3), transparent);
  color: var(--color-neo-cyan);
  font-family: 'Courier New', monospace;
  font-size: 0.8rem;
  display: flex; align-items: center; white-space: nowrap;
  animation: data-flow 4s linear infinite;
  opacity: 0.7;
}
@keyframes data-flow { 0% { left:-100%; } 100% { left:100%; } }

/* ===== Hologram ===== */
.hologram {
  position: relative;
  background: linear-gradient(45deg,
    rgba(0,229,255,0.1),
    rgba(212,175,55,0.1),
    rgba(0,229,255,0.1));
  background-size: 200% 200%;
  animation: hologram-shift 3s ease-in-out infinite;
}
.hologram::before{
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,229,255,0.1) 2px, rgba(0,229,255,0.1) 4px
  );
  animation: hologram-lines 0.1s linear infinite;
}
@keyframes hologram-shift { 0%,100% {background-position:0% 50%;} 50% {background-position:100% 50%;} }
@keyframes hologram-lines { 0% { transform: translateY(0);} 100% { transform: translateY(4px);} }

/* ===== Circuit Board Pattern ===== */
.circuit-bg{
  background-image:
    radial-gradient(circle at 2px 2px, var(--color-neo-cyan) 1px, transparent 0),
    linear-gradient(90deg, rgba(0,229,255,0.1) 50%, transparent 50%),
    linear-gradient(rgba(0,229,255,0.1) 50%, transparent 50%);
  background-size: 20px 20px, 40px 40px, 40px 40px;
  background-position: 0 0, 0 0, 20px 20px;
  animation: circuit-pulse 4s ease-in-out infinite;
}
@keyframes circuit-pulse { 0%,100% {opacity:.3;} 50% {opacity:.6;} }

/* ===== Cyber UI Elements ===== */
.cyber-button{
  position: relative;
  background: transparent;
  border: 2px solid var(--color-neo-cyan);
  color: var(--color-neo-cyan);
  padding: 12px 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all .3s ease;
  overflow: hidden;
}
.cyber-button::before{
  content:'';
  position:absolute; top:0; left:-100%;
  width:100%; height:100%;
  background: linear-gradient(90deg, transparent, var(--color-neo-cyan), transparent);
  transition: left .5s ease;
}
.cyber-button:hover::before{ left:100%; }
.cyber-button:hover{
  color: var(--color-bg-dark);
  background: var(--color-neo-cyan);
  box-shadow: 0 0 20px var(--color-neo-cyan), inset 0 0 20px rgba(0,229,255,.2);
}

/* ===== HUD Elements ===== */
.hud-element{
  position: relative;
  border: 1px solid var(--color-neo-cyan);
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(10px);
}
.hud-element::before{
  content:'';
  position:absolute; top:-1px; left:-1px; right:-1px; bottom:-1px;
  background: linear-gradient(45deg, var(--color-neo-cyan), var(--color-golden), var(--color-neo-cyan));
  z-index:-1; border-radius: inherit;
  animation: hud-border 2s linear infinite;
}
@keyframes hud-border { 0% {background-position:0% 50%;} 100% {background-position:100% 50%;} }

/* ===== Floating Icons ===== */
.floating-icon{ animation: float 3s ease-in-out infinite; }
.floating-icon:nth-child(odd){ animation-delay: -1s; }
@keyframes float { 0%,100% {transform: translateY(0);} 50% {transform: translateY(-10px);} }

/* ===== Cyber Text ===== */
.cyber-text{
  background: linear-gradient(45deg, var(--color-neo-cyan), var(--color-golden));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: cyber-pulse 2s ease-in-out infinite;
}
@keyframes cyber-pulse { 0%,100% {filter: brightness(1) contrast(1);} 50% {filter: brightness(1.2) contrast(1.1);} }

/* ===== Terminal Window ===== */
.terminal{
  background:#000; border:1px solid var(--color-neo-cyan);
  border-radius:5px; padding:20px;
  font-family:'Courier New', monospace;
  color:var(--color-neo-cyan);
  position:relative; overflow:hidden;
}
.terminal::before{
  content:'● ● ●';
  position:absolute; top:8px; left:12px;
  color:#ff5f56; font-size:12px;
}
.terminal-content{ margin-top:20px; }
.typing-cursor{ animation: blink 1s infinite; }
@keyframes blink { 0%,50% {opacity:1;} 51%,100% {opacity:0;} }

/* ===== Responsive ===== */
@media (max-width: 768px){
  .matrix-column { font-size: 12px; }
  .holo-grid { background-size: 30px 30px; }
  .data-stream::after { font-size: .6rem; }
  /* Fixed puede jankear en móviles: */
  body { background-attachment: scroll; }
}

/* ===== Performance / Accesibilidad ===== */
@media (prefers-reduced-motion: reduce){
  .matrix-column,
  .neon-glow,
  .cyber-panel::before,
  .data-stream::after,
  .hologram,
  .hologram::before,
  .floating-icon,
  .glitch, .glitch::before, .glitch::after,
  .holo-grid {
    animation: none !important;
  }
}

/* ===== High contrast mode ===== */
@media (prefers-contrast: high){
  .cyber-panel,
  .hologram,
  .hud-element{
    border: 2px solid #ffffff;
    background: #000000;
  }
}