/*
 * DNS Watchtower — loader animado.
 * Ciclo base de 1.8s: los anillos giran en múltiplos del ciclo y los nodos
 * hacen ping secuencial (0s, 0.6s, 1.2s). El estado final (.is-done) lo
 * activa dw-loader.js tras detener la rotación.
 */

.dw-loader {
  --dw-navy: #021a3c;
  --dw-cyan: #00bfe6;
  --dw-size: 96px;
  --dw-cycle: 1.8s;

  display: block;
  width: var(--dw-size);
  height: var(--dw-size);
  overflow: visible;
}

/* Para fondos oscuros: el azul marino pasa a un tono claro. */
.dw-loader--invert {
  --dw-navy: #e6eef8;
}

.dw-loader .dw-stroke {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}
.dw-loader .dw-navy { stroke: var(--dw-navy); }
.dw-loader .dw-cyan { stroke: var(--dw-cyan); }
.dw-loader .dw-fill-navy { fill: var(--dw-navy); }
.dw-loader .dw-fill-cyan { fill: var(--dw-cyan); }

/* Anillos: giran alrededor del centro del viewBox (64, 64). */
.dw-outer,
.dw-inner {
  transform-origin: 64px 64px;
}
.dw-outer {
  animation: dw-spin calc(var(--dw-cycle) * 3) linear infinite;
}
.dw-inner {
  animation: dw-spin-ccw calc(var(--dw-cycle) * 2) linear infinite;
}

/* Nodos: pulse secuencial con un halo que se expande. */
.dw-node__dot,
.dw-node__halo {
  transform-box: fill-box;
  transform-origin: center;
}
.dw-node__dot {
  animation: dw-ping var(--dw-cycle) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.dw-node__halo {
  fill: none;
  stroke: var(--dw-cyan);
  stroke-width: 1.5;
  opacity: 0;
  animation: dw-halo var(--dw-cycle) cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.dw-node--2 > * { animation-delay: calc(var(--dw-cycle) / 3); }
.dw-node--3 > * { animation-delay: calc(var(--dw-cycle) * 2 / 3); }

/* Núcleo: respiración sutil. */
.dw-core,
.dw-core__dot,
.dw-core__ring {
  transform-box: fill-box;
  transform-origin: center;
}
.dw-core__dot {
  animation: dw-breathe var(--dw-cycle) ease-in-out infinite;
}
.dw-core__ring {
  fill: none;
  stroke: var(--dw-cyan);
  stroke-width: 2;
  opacity: 0;
}

/* Confirmación de carga completada. */
.dw-loader.is-done .dw-core {
  animation: dw-confirm 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dw-loader.is-done .dw-core__ring {
  animation: dw-burst 0.7s cubic-bezier(0.2, 0.6, 0.3, 1);
}

@keyframes dw-spin {
  to { transform: rotate(360deg); }
}
@keyframes dw-spin-ccw {
  to { transform: rotate(-360deg); }
}
@keyframes dw-ping {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.28); }
  30%, 100% { transform: scale(1); }
}
@keyframes dw-halo {
  0%   { transform: scale(1); opacity: 0.7; }
  45%, 100% { transform: scale(2.3); opacity: 0; }
}
@keyframes dw-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@keyframes dw-confirm {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
@keyframes dw-burst {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* Movimiento reducido: sin rotación ni escalado, solo un parpadeo suave. */
@media (prefers-reduced-motion: reduce) {
  .dw-outer,
  .dw-inner,
  .dw-node__halo,
  .dw-core__dot {
    animation: none;
  }
  .dw-node__dot {
    animation-name: dw-fade;
  }
  .dw-loader.is-done .dw-core,
  .dw-loader.is-done .dw-core__ring {
    animation: none;
  }
  @keyframes dw-fade {
    0%, 30%, 100% { opacity: 1; }
    12%           { opacity: 0.45; }
  }
}