/* =========================================
   VARIABLES DE PLATAFORMAS DE STREAMING
   ========================================= */
:root {
  /* Netflix */
  --netflix-color: #E50914;
  --netflix-dark: #4a0206;

  /* Spotify */
  --spotify-color: #1DB954;
  --spotify-dark: #0a3d1c;

  /* Disney+ */
  --disney-color: #0063E5;
  --disney-dark: #001f4a;

  /* HBO Max */
  --hbo-color: #991EEB;
  --hbo-dark: #330a4a;

  /* Amazon Prime */
  --prime-color: #00A8E1;
  --prime-dark: #003a4a;
}

/* Clases de tema */
.socket.theme-netflix { --brand-color: var(--netflix-color); --brand-dark: var(--netflix-dark); }
.socket.theme-spotify { --brand-color: var(--spotify-color); --brand-dark: var(--spotify-dark); }
.socket.theme-disney  { --brand-color: var(--disney-color);  --brand-dark: var(--disney-dark); }
.socket.theme-hbo     { --brand-color: var(--hbo-color);     --brand-dark: var(--hbo-dark); }
.socket.theme-prime   { --brand-color: var(--prime-color);   --brand-dark: var(--prime-dark); }

/* Tema por defecto (por si falla el JS) */
.socket {
  --brand-color: var(--spotify-color);
  --brand-dark: var(--spotify-dark);
}

/* =========================================
   ESTRUCTURA Y ANIMACIONES
   ========================================= */
.socket {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
}

.circle {
  background: var(--brand-dark);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  animation-name: fadeBrand;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: fadeBrand;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

.gel {
  height: 30px;
  width: 30px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  position: absolute;
  top: 50%;
  left: 50%;
}

.center-gel {
  margin-left: -15px;
  margin-top: -15px;
  animation-name: pulse00;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  -webkit-animation-name: pulse00;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
}

/* Posiciones (c1 a c37) */
.c1 { margin-left: -47px; margin-top: -15px; }
.c2 { margin-left: -31px; margin-top: -43px; }
.c3 { margin-left: 1px; margin-top: -43px; }
.c4 { margin-left: 17px; margin-top: -15px; }
.c5 { margin-left: -31px; margin-top: 13px; }
.c6 { margin-left: 1px; margin-top: 13px; }
.c7 { margin-left: -63px; margin-top: -43px; }
.c8 { margin-left: 33px; margin-top: -43px; }
.c9 { margin-left: -15px; margin-top: 41px; }
.c10 { margin-left: -63px; margin-top: 13px; }
.c11 { margin-left: 33px; margin-top: 13px; }
.c12 { margin-left: -15px; margin-top: -71px; }
.c13 { margin-left: -47px; margin-top: -71px; }
.c14 { margin-left: 17px; margin-top: -71px; }
.c15 { margin-left: -47px; margin-top: 41px; }
.c16 { margin-left: 17px; margin-top: 41px; }
.c17 { margin-left: -79px; margin-top: -15px; }
.c18 { margin-left: 49px; margin-top: -15px; }
.c19 { margin-left: -63px; margin-top: -99px; }
.c20 { margin-left: 33px; margin-top: -99px; }
.c21 { margin-left: 1px; margin-top: -99px; }
.c22 { margin-left: -31px; margin-top: -99px; }
.c23 { margin-left: -63px; margin-top: 69px; }
.c24 { margin-left: 33px; margin-top: 69px; }
.c25 { margin-left: 1px; margin-top: 69px; }
.c26 { margin-left: -31px; margin-top: 69px; }
.c27 { margin-left: -79px; margin-top: -15px; }
.c28 { margin-left: -95px; margin-top: -43px; }
.c29 { margin-left: -95px; margin-top: 13px; }
.c30 { margin-left: 49px; margin-top: 41px; }
.c31 { margin-left: -79px; margin-top: -71px; }
.c32 { margin-left: -111px; margin-top: -15px; }
.c33 { margin-left: 65px; margin-top: -43px; }
.c34 { margin-left: 65px; margin-top: 13px; }
.c35 { margin-left: -79px; margin-top: 41px; }
.c36 { margin-left: 49px; margin-top: -71px; }
.c37 { margin-left: 81px; margin-top: -15px; }

/* Retrasos de animación */
.r1 { animation-name: pulse00; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0.2s; -webkit-animation-name: pulse00; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.2s; }
.r2 { animation-name: pulse00; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0.4s; -webkit-animation-name: pulse00; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.4s; }
.r3 { animation-name: pulse00; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0.6s; -webkit-animation-name: pulse00; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.6s; }

.r1 > .circle { animation-name: fadeBrand; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0.2s; -webkit-animation-name: fadeBrand; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.2s; }
.r2 > .circle { animation-name: fadeBrand; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0.4s; -webkit-animation-name: fadeBrand; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.4s; }
.r3 > .circle { animation-name: fadeBrand; animation-duration: 2s; animation-iteration-count: infinite; animation-delay: 0.6s; -webkit-animation-name: fadeBrand; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-delay: 0.6s; }

/* Animación de pulso (escala) */
@keyframes pulse00 {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  50% { -webkit-transform: scale(0.01); transform: scale(0.01); }
  100% { -webkit-transform: scale(1); transform: scale(1); }
}

/* Animación de color y brillo neón */
@keyframes fadeBrand {
  0% {
    background: var(--brand-dark);
    box-shadow: 0 0 5px var(--brand-dark);
  }
  50% {
    background: var(--brand-color);
    box-shadow: 0 0 15px var(--brand-color), 0 0 30px var(--brand-color);
  }
  100% {
    background: var(--brand-dark);
    box-shadow: 0 0 5px var(--brand-dark);
  }
}

/* =========================================
   OVERLAY DE CARGA
   ========================================= */
#ncm-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(circle at 50% 42%, rgba(10, 15, 30, 0.65), transparent 60%),
    #05070B;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

#ncm-loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-text {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 118px);
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  letter-spacing: 0.35em;
  font-weight: 600;
  text-transform: uppercase;
}