/* Fondo con el lenguaje visual del logo (arcos concéntricos, nodos y pistas) y animación de entrada con el logo. */

.fondo-logo {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M600 600 m-420 0 a420 420 0 0 1 420-420' stroke='%23ff8a1f' stroke-opacity='.5' stroke-width='3'/%3E%3Cpath d='M600 600 m-340 0 a340 340 0 0 1 340-340' stroke='%23ff8a1f' stroke-opacity='.35' stroke-width='2'/%3E%3Cpath d='M600 600 m420 0 a420 420 0 0 1-420 420' stroke='%232f6bff' stroke-opacity='.5' stroke-width='3'/%3E%3Cpath d='M600 600 m340 0 a340 340 0 0 1-340 340' stroke='%232f6bff' stroke-opacity='.35' stroke-width='2'/%3E%3Cpath d='M180 600 H330 L370 560 H470' stroke='%232f6bff' stroke-opacity='.45' stroke-width='1.6'/%3E%3Cpath d='M1020 600 H870 L830 640 H730' stroke='%23ff8a1f' stroke-opacity='.45' stroke-width='1.6'/%3E%3Cpath d='M600 180 V330 L640 370 V470' stroke='%232f6bff' stroke-opacity='.4' stroke-width='1.6'/%3E%3Cpath d='M600 1020 V870 L560 830 V730' stroke='%23ff8a1f' stroke-opacity='.4' stroke-width='1.6'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='370' cy='560' r='6' fill='%23ff8a1f'/%3E%3Ccircle cx='830' cy='640' r='6' fill='%232f6bff'/%3E%3Ccircle cx='640' cy='370' r='6' fill='%23ff8a1f'/%3E%3Ccircle cx='560' cy='830' r='6' fill='%232f6bff'/%3E%3Ccircle cx='600' cy='600' r='10' fill='none' stroke='%23ffd23f' stroke-opacity='.6' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: min(1200px, 130vw) min(1200px, 130vw);
  background-position: center center; background-repeat: no-repeat;
  animation: girar-fondo 120s linear infinite;
}
@keyframes girar-fondo { to { transform: rotate(360deg); } }

/* Animación de entrada: el logo aparece con su anillo y se desvanece */
.intro {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #05070d;
  transition: opacity .8s var(--ease), visibility .8s;
}
.intro.oculto { opacity: 0; visibility: hidden; }
.intro-caja { position: relative; width: min(340px, 70vw); aspect-ratio: 1; display: grid; place-items: center; }
.intro-anillo {
  position: absolute; inset: -18px; border-radius: 50%;
  background: conic-gradient(from 0deg, #ff8a1f, #2f6bff, #ffd23f, #ff8a1f);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 64%, #000 66%, transparent 68%);
          mask: radial-gradient(circle, transparent 62%, #000 64%, #000 66%, transparent 68%);
  animation: girar-anillo 2.2s linear infinite; opacity: 0; animation-fill-mode: both;
}
.intro-logo { width: 78%; height: auto; opacity: 0; transform: scale(.7); filter: drop-shadow(0 0 30px rgba(255,138,31,.45)); animation: aparecer-logo 1.2s var(--ease) .2s forwards; }
.intro-marca {
  position: absolute; bottom: -54px; left: 0; right: 0; text-align: center; font-family: var(--mono);
  font-size: 13px; letter-spacing: .32em; text-transform: uppercase; color: var(--texto-suave); opacity: 0;
  animation: aparecer-logo .8s ease 1s forwards;
}
.intro-anillo { animation-name: girar-anillo, entrar-anillo; animation-duration: 2.2s, .8s; animation-iteration-count: infinite, 1; animation-fill-mode: none, forwards; }
@keyframes girar-anillo { to { transform: rotate(360deg); } }
@keyframes entrar-anillo { to { opacity: .9; } }
@keyframes aparecer-logo { to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .fondo-logo { animation: none; }
  .intro { display: none; }
}