/*
 * Portada: solo la animacion del logo, igual que la escena "logo" de
 * grafismosNNGG (public/css/tv.css). Si se toca alli, copiar aqui.
 */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--blue);
}

.logo-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--blue);
}

/* Brillos suaves del fondo, como en la TV. */
.logo-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.12), transparent 26%),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,.06), transparent 25%);
  pointer-events: none;
}

/*
 * Logo loop
 * The source artwork is split into four animated crops so the official logo
 * keeps its exact geometry. The first and last frames are the same: NNGG on
 * its own, centred on screen. This makes the 14-second sequence seamless.
 */
.logo-loop {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
}

.logo-loop-artwork {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(86vw, 1500px);
  aspect-ratio: 1721 / 324;
  transform: translate(-50%, -50%) translateX(34%);
  transform-origin: 16% 50%;
  will-change: transform;
  animation: logo-loop-position 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.logo-loop-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: clip-path, opacity, transform;
}

/* NNGG occupies the first 32% of the source artwork. */
.logo-loop-mark {
  clip-path: inset(0 68% 64% 0);
  animation: logo-loop-mark 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.logo-loop-letters {
  clip-path: inset(36% 68% 0 0);
  animation: logo-loop-letters 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.logo-loop-divider {
  opacity: 0;
  clip-path: inset(0 61.8% 0 37.2%);
  transform: scaleY(0);
  transform-origin: center;
  animation: logo-loop-divider 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

.logo-loop-alicante {
  opacity: 0;
  clip-path: inset(0 56.8% 0 43.2%);
  animation: logo-loop-alicante 14s cubic-bezier(.4, 0, .2, 1) infinite;
}

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

@keyframes logo-loop-mark {
  0%, 10% {
    opacity: 1;
    clip-path: inset(0 68% 64% 0);
  }
  14%, 18% {
    opacity: 0;
    clip-path: inset(0 96.5% 64% 0);
  }
  20% {
    opacity: 1;
    clip-path: inset(0 96.5% 64% 0);
  }
  30%, 100% {
    opacity: 1;
    clip-path: inset(0 68% 64% 0);
  }
}

@keyframes logo-loop-letters {
  0%, 10% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(36% 68% 0 0);
  }
  14%, 27% {
    opacity: 0;
    transform: translateY(5%) scale(.98);
    clip-path: inset(36% 68% 64% 0);
  }
  38%, 100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(36% 68% 0 0);
  }
}

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

@keyframes logo-loop-alicante {
  0%, 54% {
    opacity: 0;
    clip-path: inset(0 56.8% 0 43.2%);
  }
  56% {
    opacity: 1;
    clip-path: inset(0 56.8% 0 43.2%);
  }
  64%, 86% {
    opacity: 1;
    clip-path: inset(0 0 0 43.2%);
  }
  92%, 100% {
    opacity: 0;
    clip-path: inset(0 56.8% 0 43.2%);
  }
}

/* Con "reducir movimiento" no hay bucle: el logo completo, quieto. */
@media (prefers-reduced-motion: reduce) {
  .logo-loop-artwork,
  .logo-loop-layer { animation: none; }
  .logo-loop-artwork { transform: translate(-50%, -50%); }
  .logo-loop-mark,
  .logo-loop-letters,
  .logo-loop-divider,
  .logo-loop-alicante { opacity: 1; transform: none; }
  .logo-loop-mark { clip-path: inset(0 68% 64% 0); }
  .logo-loop-letters { clip-path: inset(36% 68% 0 0); }
  .logo-loop-alicante { clip-path: inset(0 0 0 43.2%); }
}