/*
 * Logo animado generado por public/js/logo.js.
 *
 * Misma coreografia de 14 s que la escena Logo de siempre: el simbolo solo y
 * centrado; se borra y vuelve a dibujarse con zoom; se desplaza y aparecen el
 * separador y el territorio; vuelta al principio. El primer y el ultimo
 * fotograma son iguales, asi que el bucle no tiene salto.
 *
 * Antes eran recortes fijos de un PNG. Ahora cada pieza es su propia capa y
 * lo que depende del territorio (ancho, centro del simbolo, donde empieza el
 * texto) llega en variables --logo-* que pone mount().
 *
 * Se anima con .is-playing (pagina /logo) o, en la TV, mientras la escena
 * Logo esta activa: al salir vuelve al primer fotograma, como siempre.
 */
.logo-art {
  /* El simbolo sale siempre al mismo tamaño; si el territorio es muy largo,
     se reduce todo para que quepa. */
  --logo-h: min(16.2vw, 282px, calc(88vw / var(--logo-aspect, 5.3)));
  position: absolute;
  left: 50%;
  top: 50%;
  height: var(--logo-h);
  width: calc(var(--logo-h) * var(--logo-aspect, 5.3));
  transform: translate(-50%, -50%) translateX(var(--logo-shift, 0%));
  transform-origin: var(--logo-origin, 50%) 50%;
  will-change: transform;
}

.logo-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  will-change: clip-path, opacity, transform;
}

.logo-layer-mark {
  clip-path: inset(0 var(--logo-mark-open) 0 0);
}

.logo-layer-divider {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center;
}

.logo-layer-text {
  opacity: 0;
  clip-path: inset(0 var(--logo-text-closed) 0 0);
}

.logo-art.is-playing,
.logo-scene.active .logo-art {
  animation: logo-position 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.logo-art.is-playing .logo-layer-mark,
.logo-scene.active .logo-art .logo-layer-mark {
  animation: logo-mark 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.logo-art.is-playing .logo-layer-letters,
.logo-scene.active .logo-art .logo-layer-letters {
  animation: logo-letters 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.logo-art.is-playing .logo-layer-divider,
.logo-scene.active .logo-art .logo-layer-divider {
  animation: logo-divider 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.logo-art.is-playing .logo-layer-text,
.logo-scene.active .logo-art .logo-layer-text {
  animation: logo-text 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Sin territorio no hay a donde desplazarse: solo el borrado y el zoom. */
.logo-art-symbol-only.is-playing,
.logo-scene.active .logo-art-symbol-only {
  animation-name: logo-position-symbol;
}

@keyframes logo-position {
  0%, 14% {
    transform: translate(-50%, -50%) translateX(var(--logo-shift)) scale(1);
  }
  18%, 38% {
    transform: translate(-50%, -50%) translateX(var(--logo-shift)) scale(1.35);
  }
  46%, 50% {
    transform: translate(-50%, -50%) translateX(var(--logo-shift)) scale(1);
  }
  56%, 90% {
    transform: translate(-50%, -50%) translateX(0) scale(1);
  }
  96%, 100% {
    transform: translate(-50%, -50%) translateX(var(--logo-shift)) scale(1);
  }
}

@keyframes logo-position-symbol {
  0%, 14% {
    transform: translate(-50%, -50%) translateX(var(--logo-shift)) scale(1);
  }
  18%, 38% {
    transform: translate(-50%, -50%) translateX(var(--logo-shift)) scale(1.35);
  }
  46%, 100% {
    transform: translate(-50%, -50%) translateX(var(--logo-shift)) scale(1);
  }
}

@keyframes logo-mark {
  0%, 10% {
    opacity: 1;
    clip-path: inset(0 var(--logo-mark-open) 0 0);
  }
  14%, 18% {
    opacity: 0;
    clip-path: inset(0 var(--logo-mark-closed) 0 0);
  }
  20% {
    opacity: 1;
    clip-path: inset(0 var(--logo-mark-closed) 0 0);
  }
  30%, 100% {
    opacity: 1;
    clip-path: inset(0 var(--logo-mark-open) 0 0);
  }
}

@keyframes logo-letters {
  0%, 10% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  14%, 27% {
    opacity: 0;
    transform: translateY(5%) scale(.98);
  }
  38%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logo-divider {
  0%, 52% {
    opacity: 0;
    transform: scaleY(0);
  }
  57%, 88% {
    opacity: 1;
    transform: scaleY(1);
  }
  93%, 100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

@keyframes logo-text {
  0%, 54% {
    opacity: 0;
    clip-path: inset(0 var(--logo-text-closed) 0 0);
  }
  56% {
    opacity: 1;
    clip-path: inset(0 var(--logo-text-closed) 0 0);
  }
  64%, 86% {
    opacity: 1;
    clip-path: inset(0 var(--logo-text-open) 0 0);
  }
  92%, 100% {
    opacity: 0;
    clip-path: inset(0 var(--logo-text-closed) 0 0);
  }
}

/* Sin regla de prefers-reduced-motion a proposito: la preferencia es del
   aparato que mueve la pantalla, no de quien la mira. Un PC con las
   animaciones de Windows apagadas dejaria la escena Logo quieta en la TV. */