/*
Theme Name: CyS Radio 96.3 FM
Theme URI: https://connectanet.cl
Author: Connectanet Chile
Author URI: https://connectanet.cl
Description: Tema de una sola página para CyS Radio 96.3 FM Dalcahue, Chiloé. Diseño visual inmersivo con reproductor en vivo.
Version: 1.9.0
Text Domain: cys-radio
*/

:root{
  --cys-bg:#031322;
  --cys-cyan:#12e7d4;
  --cys-blue:#0d7fff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--cys-bg);color:#fff}
body{font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
.cys-page{
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#031322;
}
.cys-stage{
  position:relative;
  width:100%;
  max-width:1536px;
  aspect-ratio:1536/1024;
  background-image:url('assets/cys-radio-fondo.png');
  background-size:100% 100%;
  background-repeat:no-repeat;
  background-position:center;
  box-shadow:0 0 45px rgba(0,0,0,.35);
}

/* Botón real sobre el botón dibujado del diseño.
   Cubre el ícono fijo del fondo y cambia claramente entre PLAY y PAUSA. */
.cys-play-hotspot{
  position:absolute;
  left:28.45%;
  top:57.55%;
  width:6.45%;
  aspect-ratio:1;
  border:3px solid #14ead8;
  border-radius:50%;
  background:radial-gradient(circle at 45% 35%,#163b70 0%,#071524 72%);
  color:#fff;
  cursor:pointer;
  z-index:10;
  padding:0;
  outline:none;
  display:grid;
  place-items:center;
  box-shadow:
    0 0 0 4px rgba(0,119,255,.35),
    0 0 20px rgba(18,231,212,.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cys-play-hotspot:hover{transform:scale(1.03)}
.cys-play-hotspot:focus-visible{
  box-shadow:0 0 0 4px rgba(255,255,255,.95),0 0 0 8px rgba(18,231,212,.85);
}
.cys-play-icon{
  font-size:clamp(18px,2.15vw,34px);
  font-weight:900;
  line-height:1;
  transform:translateX(2px);
}
.cys-play-hotspot.is-playing .cys-play-icon{
  transform:none;
  letter-spacing:-4px;
}

/* Ecualizador integrado y claramente animado.
   Usa transform:scaleY para que el movimiento sea visible en todos los navegadores. */
.cys-eq{
  position:absolute;
  left:59.05%;
  top:60.9%;
  width:12.8%;
  height:6.9%;
  z-index:12;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2.2%;
  padding:0;
  background:transparent;
  overflow:visible;
  pointer-events:none;
}

/* Tapa únicamente las barras estáticas que vienen impresas en la imagen.
   El degradado fue ajustado al mismo azul del panel para que no se vea como una caja. */
.cys-eq::before{
  content:"";
  position:absolute;
  left:-3.5%;
  right:-3.5%;
  top:-4%;
  bottom:-8%;
  z-index:0;
  border-radius:10px;
  background:
    linear-gradient(
      105deg,
      rgba(2,28,57,.985) 0%,
      rgba(4,31,60,.985) 52%,
      rgba(19,42,72,.985) 100%
    );
  box-shadow:
    -8px 0 12px rgba(2,28,57,.22),
    8px 0 12px rgba(19,42,72,.18);
}
.cys-eq-bar{
  position:relative;
  z-index:2;
  flex:1 1 0;
  min-width:3px;
  max-width:11px;
  height:92%;
  border-radius:5px 5px 1px 1px;
  background:linear-gradient(to top,#0b80ff,#18ead5);
  box-shadow:0 0 6px rgba(18,231,212,.38);
  transform-origin:50% 100%;
  transform:scaleY(.14);
  opacity:.62;
  will-change:transform,opacity;
}
.cys-eq.is-playing .cys-eq-bar{
  opacity:1;
  animation-name:cysEqDance;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
.cys-eq.is-playing .cys-eq-bar:nth-child(1){animation-duration:.33s;animation-delay:-.08s}
.cys-eq.is-playing .cys-eq-bar:nth-child(2){animation-duration:.47s;animation-delay:-.21s}
.cys-eq.is-playing .cys-eq-bar:nth-child(3){animation-duration:.29s;animation-delay:-.13s}
.cys-eq.is-playing .cys-eq-bar:nth-child(4){animation-duration:.55s;animation-delay:-.34s}
.cys-eq.is-playing .cys-eq-bar:nth-child(5){animation-duration:.38s;animation-delay:-.18s}
.cys-eq.is-playing .cys-eq-bar:nth-child(6){animation-duration:.61s;animation-delay:-.42s}
.cys-eq.is-playing .cys-eq-bar:nth-child(7){animation-duration:.36s;animation-delay:-.25s}
.cys-eq.is-playing .cys-eq-bar:nth-child(8){animation-duration:.50s;animation-delay:-.31s}
.cys-eq.is-playing .cys-eq-bar:nth-child(9){animation-duration:.32s;animation-delay:-.11s}
.cys-eq.is-playing .cys-eq-bar:nth-child(10){animation-duration:.58s;animation-delay:-.39s}
.cys-eq.is-playing .cys-eq-bar:nth-child(11){animation-duration:.41s;animation-delay:-.22s}
.cys-eq.is-playing .cys-eq-bar:nth-child(12){animation-duration:.53s;animation-delay:-.36s}

@keyframes cysEqDance{
  0%   {transform:scaleY(.16)}
  22%  {transform:scaleY(.48)}
  48%  {transform:scaleY(.88)}
  68%  {transform:scaleY(.35)}
  100% {transform:scaleY(.74)}
}

.cys-eq:not(.is-playing) .cys-eq-bar{
  animation:none !important;
  transform:scaleY(.12);
  opacity:.45;
}

/* Control de volumen invisible sobre la barra gráfica */
.cys-volume{
  position:absolute;
  left:38.8%;
  top:65.2%;
  width:16.5%;
  height:2.2%;
  opacity:.01;
  cursor:pointer;
  z-index:5;
}

/* Indicador discreto de estado, fuera del diseño visual */
.cys-status{
  position:absolute;
  left:50%;
  bottom:1.25%;
  transform:translateX(-50%);
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.72);
  text-align:center;
  width:90%;
  pointer-events:none;
}


/* MÓVIL v1.7 — conserva el diseño completo y evita el zoom/corte lateral */
@media (max-width:900px){
  html,body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
    background:#031322;
    overflow-x:hidden;
  }

  .cys-page{
    width:100%;
    min-height:100svh;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow:hidden;
    background:#031322;
  }

  .cys-stage{
    position:relative;
    width:100vw;
    height:auto;
    max-width:none;
    aspect-ratio:1536/1024;
    margin:0;
    transform:none;
    background-size:100% 100%;
    background-position:center center;
    background-repeat:no-repeat;
    box-shadow:none;
    flex:0 0 auto;
  }

  .cys-status{display:none}
}

/* En vertical NO ampliamos el lienzo: se ve completo de izquierda a derecha.
   Sólo centramos verticalmente el bloque dentro del espacio disponible. */
@media (max-width:600px) and (orientation:portrait){
  .cys-page{
    min-height:100svh;
    padding-top:clamp(18px,8svh,90px);
  }

  .cys-stage{
    width:100vw;
    aspect-ratio:1536/1024;
  }

  .cys-play-hotspot{
    /* Mantener el botón proporcional al reproductor del fondo */
    min-width:0;
    min-height:0;
    width:6.45%;
    aspect-ratio:1;
    border-width:1px;
    box-shadow:
      0 0 0 2px rgba(0,119,255,.28),
      0 0 8px rgba(18,231,212,.40);
  }

  .cys-play-icon{
    /* En móvil evitamos el mínimo de 18px del escritorio,
       que agrandaba visualmente el triángulo. */
    font-size:2.15vw;
  }
}

/* Horizontal */
@media (max-height:600px) and (orientation:landscape){
  .cys-page{
    min-height:100vh;
    padding:0;
    align-items:center;
  }

  .cys-stage{
    width:min(100vw,150vh);
    aspect-ratio:1536/1024;
  }
}

/* v1.9: icono PAUSA limpio en móvil */
@media (max-width:600px) and (orientation:portrait){
  .cys-play-hotspot.is-playing .cys-play-icon{
    font-size:0 !important;
    width:34%;
    height:42%;
    position:relative;
    display:block;
    transform:none !important;
    letter-spacing:0 !important;
  }

  .cys-play-hotspot.is-playing .cys-play-icon::before,
  .cys-play-hotspot.is-playing .cys-play-icon::after{
    content:"";
    position:absolute;
    top:0;
    width:30%;
    height:100%;
    border-radius:1px;
    background:#fff;
  }

  .cys-play-hotspot.is-playing .cys-play-icon::before{left:8%}
  .cys-play-hotspot.is-playing .cys-play-icon::after{right:8%}
}