/* Columnas de fondo fijas con animación de portal */
.left-bg, .right-bg {
    position: fixed; /* Importante para que no se deformen */
    top:0;
    width:50%;
    height:100vh; /* altura de la ventana visible */
    overflow:hidden;
    z-index:0;
  }
  .left-bg { left:40px;}
  .right-bg { right:-40px; transform: scaleX(-1); }/* voltea horizontalmente */

  /* Retícula dentro de las columnas del fondo*/
  .grid {
    position:absolute;
    top:0; left:0; width:100%; height:100%; /* ocupa todo el contenedor padre*/
    background-image: 
      repeating-linear-gradient(to right, #e198b7 0.5px, transparent 2px 40px),
      repeating-linear-gradient(to bottom, #e198b7 0.5px, transparent 2px 50px);/* dibuja una linea hacia la derecha con 40px de distancia entre una y otra y dibuja una linea hacia abajo con 50px de distancia entre una y otra*/
    background-size:40px 50px;/* Importantísimo: esto ajusta el tamaño del patrón final.*/
    opacity:1;
    transform: perspective(800px) rotateY(20deg);
    transform-origin: right; /* La cuadrícula rota desde la derecha*/
   
    animation: moveLeft 4s linear infinite; /* Animación moveLeft*/
  }

  @keyframes moveLeft {
    0% { background-position-x:0; }
    100% { background-position-x:-40px; }
  }

/* canvas donde se aplica el ruido de tv */
#tvNoise {
    width: 100%;
    height: 100%;
    image-rendering: pixelated; /* mantiene el efecto retro al escalar */
    display: block; /* evita espacios indeseados */
}

/* INDICADOR DE SCROLL */
/* centra el icono de scroll en el centro */
  .icon-scroll, .icon-scroll::before {
    position: absolute; left:50%; transform: translateX(-50%);
  }
/* forma exterior */
  .icon-scroll {
    width:20px; height:40px;
    border:2px solid white;
    border-radius:25px;
    cursor:pointer;
    bottom:65px;
  }
/* punto central */
  .icon-scroll::before {
    content:'';
    width:6px; height:6px;
    background:white;
    margin-left:-3px;
    top:10px;
    border-radius:50%;
    animation: 1.5s scroll cubic-bezier(0.65, -0.55, 0.25, 1.5) infinite;
  }
/* animación desde arriba pequeño al centro mas grande y desaparece abajo más pequeño */
  @keyframes scroll {
    0% { opacity:0; transform: translateY(0) scale(0.5);}
    10% { opacity:1; transform: scale(1);}
    100% { opacity:0; transform: translateY(30px) scale(0.5);}
  }