/* =============================================================================
   SWEETSPOT — LOGO ANIMADO ("el lente que enfoca")
   -----------------------------------------------------------------------------
   Pieza reutilizable: la usan la portada "Próximamente" y las pantallas de
   acceso (entrar, registro, recuperar). Replica el inicio del video del logo:

     0.00 s  Un halo suave y un punto de luz en el centro.
     0.55 s  Los dos arcos se dibujan desde su punta mientras giran (en contra
             del reloj), como un obturador que se abre.
     1.50 s  Un "cristal" traslúcido llena el aro y el aro cierra el círculo.
     1.60 s  El diafragma (9 aspas) se cierra hasta dejar un punto de luz.
     1.80 s  Destello: luz blanca con una raya horizontal y rayos.
     2.00 s  Al apagarse la luz aparece el lente (la "S") y queda el logo.
     2.55 s  (Solo donde hay nombre al lado) "SweetSpot.art" sale de atrás del
             logo hacia la derecha.

   Cómo está hecho:
     - Todo es SVG en línea + CSS. Solo se animan transform, opacity y el
       trazo de las máscaras (nada de filtros, video ni librerías).
     - El estado BASE de cada pieza es el estado FINAL (logo completo e
       idéntico a img/logo.svg). Las animaciones usan fill-mode "both" para
       esconder cada pieza antes de su turno, así con prefers-reduced-motion
       basta con apagarlas y el logo se ve completo desde el inicio.
     - Los arcos se revelan con una máscara: un trazo grueso que sigue el
       arco y se "dibuja" con stroke-dashoffset.
     - Colores: el logo usa currentColor (negro en acceso, blanco en la
       portada). --logo-fondo es el color del fondo, para las líneas finas
       entre las aspas del diafragma. La luz del destello siempre es blanca.
     - Tocar el logo de la portada lo hace dar una vuelta (clase
       .logo-vivo--gira, la pone js/logo-animado.js).

   Marcado: ver public/proximamente.html (la estructura del SVG y los ids
   lv-* de máscaras y degradados deben ir una sola vez por página).
   ============================================================================= */

/* --- Contenedor (el tamaño y el color los pone cada página) --------------- */
.logo-vivo {
  display: block;
  position: relative;
}

button.logo-vivo {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.logo-vivo svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible; /* el destello se sale un poco del cuadro, a propósito */
}

/* Los giros y escalas son alrededor del centro del logo. Solo en las piezas
   que se animan: si se pusiera en todo el SVG, también movería el atributo
   transform de los grupos que colocan cada aspa del diafragma. */
.logo-vivo__giro,
.logo-vivo__arcos,
.logo-vivo__destello,
.logo-vivo__raya,
.logo-vivo__rayos,
.logo-vivo__aspa,
.logo-vivo__filo {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

/* --- Piezas (estado base = logo terminado) -------------------------------- */
.logo-vivo__arco,
.logo-vivo__lente,
.logo-vivo__aro,
.logo-vivo__cristal,
.logo-vivo__aspa {
  fill: currentColor;
}

.logo-vivo__halo,
.logo-vivo__punto,
.logo-vivo__cristal,
.logo-vivo__aro,
.logo-vivo__aspas,
.logo-vivo__filos,
.logo-vivo__destello,
.logo-vivo__raya,
.logo-vivo__rayos {
  opacity: 0; /* al final de la secuencia estas piezas no se ven */
}

/* Trazo que revela cada arco (vive dentro de <mask>). 1520 = su largo. */
.logo-vivo__trazo {
  fill: none;
  stroke: #ffffff;
  stroke-width: 215;
  stroke-dasharray: 1520;
  stroke-dashoffset: 0;
}

/* Aspas del diafragma: cada una pivotea en su bisagra, sobre el aro. Van sin
   borde: como se dibujan una encima de otra, un borde en cada aspa se vería
   disparejo (la última taparía a las demás). */
.logo-vivo__aspa {
  transform-origin: 1055px 600px;
}

/* Filos del diafragma: una capa aparte con las nueve líneas idénticas, del
   color del fondo (--logo-fondo, lo define cada página; si no, blanco). Cada
   línea va de su bisagra hasta el vértice de la abertura; su largo visible lo
   da el trazo (520 = largo total del camino). */
.logo-vivo__filo {
  fill: none;
  stroke: var(--logo-fondo, #ffffff);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 40;
  transform-origin: 1055px 600px;
}

.logo-vivo__rayos {
  fill: none;
  stroke: #ffffff;
  stroke-width: 7;
  stroke-linecap: round;
}

/* --- Secuencia ------------------------------------------------------------ */
.logo-vivo__halo {
  animation:
    lv-aparece 0.4s ease-out both,
    lv-desaparece 0.4s ease-in 2s forwards;
}

.logo-vivo__punto {
  animation:
    lv-aparece 0.3s ease-out 0.1s both,
    lv-desaparece 0.3s ease-in 2s forwards;
}

.logo-vivo__arcos {
  animation: lv-arcos-giran 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.logo-vivo__trazo {
  animation: lv-trazo-dibuja 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}

.logo-vivo__cristal {
  animation:
    lv-cristal 0.15s ease-out 1.5s both,
    lv-desaparece 0.1s linear 1.95s forwards;
}

.logo-vivo__aro {
  animation:
    lv-aparece 0.12s ease-out 1.55s both,
    lv-desaparece 0.1s linear 1.95s forwards;
}

.logo-vivo__aspas,
.logo-vivo__filos {
  animation:
    lv-aparece 0s linear 1.6s both,
    lv-desaparece 0.1s linear 1.95s forwards;
}

.logo-vivo__aspa {
  animation: lv-aspa-cierra 0.25s cubic-bezier(0.4, 0, 0.6, 1) 1.6s both;
}

/* El filo gira igual que su aspa y, al mismo tiempo, se alarga hasta el
   vértice de la abertura. */
.logo-vivo__filo {
  animation:
    lv-aspa-cierra 0.25s cubic-bezier(0.4, 0, 0.6, 1) 1.6s both,
    lv-filo-crece 0.25s cubic-bezier(0.4, 0, 0.6, 1) 1.6s both;
}

.logo-vivo__destello {
  animation: lv-destello 0.7s ease-out 1.8s both;
}

.logo-vivo__raya {
  animation: lv-raya 0.6s ease-out 1.85s both;
}

.logo-vivo__rayos {
  animation: lv-rayos 0.45s ease-out 1.95s both;
}

.logo-vivo__lente {
  animation: lv-aparece 0.45s ease-out 2s both;
}

/* Nombre junto al logo (SweetSpot.art): sale de atrás del logo. */
.logo-vivo-nombre {
  animation: lv-nombre 0.6s cubic-bezier(0.22, 1, 0.36, 1) 2.55s both;
}

/* Vuelta completa al tocar el logo (la clase se quita sola al terminar). */
.logo-vivo--gira .logo-vivo__giro {
  animation: logo-vuelta 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Cuadros clave -------------------------------------------------------- */
@keyframes lv-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Sin "from": parte del valor que traiga la pieza en ese momento. */
@keyframes lv-desaparece {
  to { opacity: 0; }
}

@keyframes lv-arcos-giran {
  from { transform: rotate(40deg); }
  to   { transform: rotate(0deg); }
}

@keyframes lv-trazo-dibuja {
  from { stroke-dashoffset: 1520; }
  to   { stroke-dashoffset: 0; }
}

@keyframes lv-cristal {
  from { opacity: 0; }
  to   { opacity: 0.14; }
}

/* 78°: deja un hueco apenas mayor que el punto de luz del centro. */
@keyframes lv-aspa-cierra {
  from { transform: rotate(0deg); }
  to   { transform: rotate(78deg); }
}

/* Largo visible del filo: 165 (tangente al aro) → 480 (hasta el vértice de
   la abertura con las aspas a 78°). */
@keyframes lv-filo-crece {
  from { stroke-dashoffset: 355; }
  to   { stroke-dashoffset: 40; }
}

@keyframes lv-destello {
  0%   { opacity: 0; transform: scale(0.15); }
  35%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(0.08); }
}

@keyframes lv-raya {
  0%   { opacity: 0; transform: scaleX(0.2); }
  40%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.5); }
}

@keyframes lv-rayos {
  0%   { opacity: 0; transform: scale(0.5); }
  40%  { opacity: 0.9; transform: scale(0.95); }
  100% { opacity: 0; transform: scale(1.15); }
}

@keyframes lv-nombre {
  from { opacity: 0; transform: translateX(-0.6em); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

@keyframes logo-vuelta {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- Menos movimiento: todo quieto y el logo completo desde el inicio ------ */
@media (prefers-reduced-motion: reduce) {
  .logo-vivo svg *,
  .logo-vivo__giro,
  .logo-vivo-nombre {
    animation: none !important;
  }
}