/* ============================================================================
 * urb-spinners.css — URB-SPINNERS-V1
 * Four reusable pirate-themed spinners as inline SVG + keyframe CSS.
 * Sizes via the .urb-sp class (default 32px). Override with explicit width.
 *
 * USAGE
 *   <link href="/assets/css/urb-spinners.css" rel="stylesheet">
 *   <span class="urb-sp" data-urb-sp="wheel"></span>
 *   <span class="urb-sp urb-sp-lg" data-urb-sp="cannon"></span>
 *
 *   // Programmatic full-screen overlay:
 *   urbSpinner.show('galleon', 'Hoisting the rigging…');
 *   urbSpinner.hide();
 * ============================================================================ */

.urb-sp {
    display: inline-block;
    width: 32px;
    height: 32px;
    vertical-align: middle;
    line-height: 0;
}
.urb-sp-sm { width: 20px; height: 20px; }
.urb-sp-lg { width: 56px; height: 56px; }
.urb-sp-xl { width: 96px; height: 96px; }
.urb-sp svg { display: block; width: 100%; height: 100%; }

/* Keyframes shared with the chat-preview swatch */
@keyframes urbSpRot   { to { transform: rotate(360deg); } }
@keyframes urbSpRock  { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes urbSpFire  { 0%,80% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; transform: translateX(0); } 30% { opacity: 0; transform: translateX(20px); } }
@keyframes urbSpRecoil{ 0%,80% { transform: translateX(0); } 12% { transform: translateX(-3px); } 30% { transform: translateX(0); } }

.urb-sp .sp-rot       { animation: urbSpRot   1.6s linear infinite; transform-origin: 32px 32px; transform-box: fill-box; }
.urb-sp .sp-rot-slow  { animation: urbSpRot   3.2s linear infinite; transform-origin: 32px 32px; transform-box: fill-box; }
.urb-sp .sp-rock      { animation: urbSpRock  2.4s ease-in-out infinite; transform-origin: 32px 56px; transform-box: fill-box; }
.urb-sp .sp-fire      { animation: urbSpFire  1.8s ease-in-out infinite; transform-origin: 0 0; transform-box: fill-box; }
.urb-sp .sp-recoil    { animation: urbSpRecoil 1.8s ease-in-out infinite; transform-box: fill-box; }

/* Full-screen overlay for long-running gen jobs */
.urb-sp-overlay {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(11, 11, 18, 0.74);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 18px;
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    color: #f4ede0;
    font-family: 'IM Fell English SC', Georgia, serif;
    letter-spacing: 0.06em;
}
.urb-sp-overlay.open { opacity: 1; pointer-events: auto; }
.urb-sp-overlay .urb-sp { width: 96px; height: 96px; filter: drop-shadow(0 4px 18px rgba(212, 175, 55, 0.25)); }
.urb-sp-overlay .urb-sp-msg { font-size: 18px; }
.urb-sp-overlay .urb-sp-sub { font-family: 'PT Mono', monospace; font-size: 11px; letter-spacing: .14em; opacity: .55; }