/* ================================================================
   Tornado Spinner — Originkit Vortex replacement for Bootstrap spinners
   ================================================================
   Two tiers:
     1. .tornado-spinner-sm  — small inline (14–20px), CSS-only SVG swirl
     2. .tornado-spinner     — medium/large canvas-based Three.js vortex
   ================================================================ */

/* ── Small inline tornado (CSS-only, replaces spinner-border-sm) ──── */
.tornado-spinner-sm {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  vertical-align: -.125em;
  position: relative;
}
.tornado-spinner-sm::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--tornado-color, var(--irc-teal, #00D4AA)) 60deg,
    transparent 120deg,
    var(--tornado-color, var(--irc-teal, #00D4AA)) 200deg,
    transparent 280deg,
    var(--tornado-color, var(--irc-teal, #00D4AA)) 340deg,
    transparent 360deg
  );
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 Q16 3 28 3 Q26 8 22 8 L10 8 Q6 8 4 3Z' fill='black' opacity='0.4'/%3E%3Cpath d='M7 8 Q16 8 25 8 Q23 13 20 13 L12 13 Q9 13 7 8Z' fill='black' opacity='0.6'/%3E%3Cpath d='M10 13 Q16 13 22 13 Q20 18 18 18 L14 18 Q12 18 10 13Z' fill='black' opacity='0.8'/%3E%3Cpath d='M12 18 Q16 18 20 18 Q19 23 17 23 L15 23 Q14 23 12 18Z' fill='black'/%3E%3Cpath d='M14 23 Q16 23 18 23 Q17 28 16.5 29 L15.5 29 Q15 28 14 23Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 3 Q16 3 28 3 Q26 8 22 8 L10 8 Q6 8 4 3Z' fill='black' opacity='0.4'/%3E%3Cpath d='M7 8 Q16 8 25 8 Q23 13 20 13 L12 13 Q9 13 7 8Z' fill='black' opacity='0.6'/%3E%3Cpath d='M10 13 Q16 13 22 13 Q20 18 18 18 L14 18 Q12 18 10 13Z' fill='black' opacity='0.8'/%3E%3Cpath d='M12 18 Q16 18 20 18 Q19 23 17 23 L15 23 Q14 23 12 18Z' fill='black'/%3E%3Cpath d='M14 23 Q16 23 18 23 Q17 28 16.5 29 L15.5 29 Q15 28 14 23Z' fill='black'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  animation: tornado-spin 0.9s linear infinite;
}

@keyframes tornado-spin {
  0%   { transform: rotate(0deg);   opacity: 0.85; }
  25%  { transform: rotate(90deg);  opacity: 1;    }
  50%  { transform: rotate(180deg); opacity: 0.85; }
  75%  { transform: rotate(270deg); opacity: 1;    }
  100% { transform: rotate(360deg); opacity: 0.85; }
}

/* Size variant matching the old 12px×12px inline spinners */
.tornado-spinner-xs {
  width: 12px;
  height: 12px;
}
.tornado-spinner-xs::before {
  animation-duration: 0.8s;
}

/* ── Medium / large tornado container (Three.js canvas) ──────────── */
.tornado-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.tornado-spinner canvas {
  display: block;
}

/* Default sizing */
.tornado-spinner--md {
  width: 2.5rem;
  height: 2.5rem;
}
.tornado-spinner--lg {
  width: 4rem;
  height: 4rem;
}

/* ── Color utilities ─────────────────────────────────────────────── */
.tornado-teal  { --tornado-color: var(--irc-teal, #00D4AA); }
.tornado-amber { --tornado-color: var(--irc-amber, #F5A623); }
.tornado-blue  { --tornado-color: var(--irc-blue, #1A6FC4); }
.tornado-white { --tornado-color: #ffffff; }

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tornado-spinner-sm::before {
    animation: none;
    opacity: 0.7;
  }
  .tornado-spinner canvas {
    /* Three.js engine handles reduced motion internally */
  }
}