/* ==========================================================================
   WWS Page Loader — ported verbatim from the live theme
   (includes/loaders/wws-loader.css). Standalone, no dependencies, no JS
   required (the animation is pure CSS). Linked site-wide from header.php,
   same as the old theme, since it's a shared component (not tournament-
   page-specific) used anywhere an AJAX-loaded pane needs a loading state.
   Usage: <div class="wws-loader"><i></i></div>
   Resize: <div class="wws-loader wws-loader--lg"><i></i></div>
   Sizes: wws-loader--sm (48px), default (80px), wws-loader--lg (120px), wws-loader--xl (160px)
   Variations: wws-loader--orbit (default), wws-loader--pulse, wws-loader--segments
   ========================================================================== */

/* ---------- Base ---------- */
.wws-loader {
    --wws-loader-size: 80px;
    position: relative;
    width: var(--wws-loader-size);
    height: var(--wws-loader-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wws-loader::before {
    content: '';
    position: absolute;
    width: 52%;
    height: 52%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 430.67 430.67'%3E%3Cpath fill='%2300a0df' d='M215.33,0C96.41,0,0,96.41,0,215.33S96.41,430.67,215.33,430.67s215.34-96.41,215.34-215.34S334.26,0,215.33,0Zm96,292.21c-9,9-17.56,15.42-26.27,19.72a71.86,71.86,0,0,1-16.55,5.7,75.59,75.59,0,0,1-5,15.34c-4,8.68-10.21,17.29-18.51,25.59-16.1,16.1-35.83,24.08-58.64,23.72-22.58-.35-42.15-8.66-58.17-24.68L112,341.38l.41-106.73,73.81,73.81c4.94,1.18,6.48-.36,7.56-1.44a8.13,8.13,0,0,0,2.59-6.16,6.08,6.08,0,0,0-2-5.13l-81.28-81.29.45-106.34L248.19,242.42a5.54,5.54,0,0,0,4.78,1.87,8.8,8.8,0,0,0,6.4-2.89,7,7,0,0,0,2.44-5.53,6.91,6.91,0,0,0-2.41-5.47l-81.14-81.14.07-104.75,130.61,130.6c16.1,16.1,24.69,35.64,25.54,58.06C335.34,256.14,327.56,276,311.35,292.21Z'/%3E%3C/svg%3E") center / contain no-repeat;
    z-index: 1;
}

/* ---------- Sizes ---------- */
.wws-loader--sm { --wws-loader-size: 48px; }
.wws-loader--lg { --wws-loader-size: 120px; }
.wws-loader--xl { --wws-loader-size: 160px; }

/* ---------- Variation 1: Orbit Trail (default) ---------- */
@property --wws-trail {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%;
}

/* Trail ring */
.wws-loader::after,
.wws-loader--orbit::after {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, transparent calc(100% - var(--wws-trail)), #00a0df 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14%), #000 calc(100% - 14%));
    mask: radial-gradient(farthest-side, transparent calc(100% - 14%), #000 calc(100% - 14%));
    animation: wws-orbit 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Orbiting dot — real border-radius circle */
.wws-loader > i {
    position: absolute;
    inset: 0;
    display: block;
    font-style: normal;
    animation: wws-orbit 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: 2;
}

.wws-loader > i::before {
    content: '';
    position: absolute;
    width: 5.3%;
    height: 5.3%;
    background: #00a0df;
    border-radius: 50%;
    top: 12%;
    left: 50%;
    transform: translateX(-50%);
}

/* ---------- Variation 2: Pulse Ring ---------- */
.wws-loader--pulse::before {
    animation: wws-pulse-logo 2s ease-in-out infinite;
}

.wws-loader--pulse::after {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    border: 2.5px solid #00a0df;
    animation: wws-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    background: none;
    -webkit-mask: none;
    mask: none;
}

/* ---------- Variation 3: Segmented Spinner ---------- */
.wws-loader--segments::after {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: none;
    -webkit-mask: none;
    mask: none;
    border: 3px solid transparent;
    border-image: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%2300a0df' stroke-width='3' stroke-dasharray='18 10' stroke-linecap='round' opacity='0.3'/%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%2300a0df' stroke-width='3' stroke-dasharray='18 70 0 0' stroke-dashoffset='-2' stroke-linecap='round' opacity='0.6'/%3E%3Ccircle cx='50' cy='50' r='46' fill='none' stroke='%2300a0df' stroke-width='3' stroke-dasharray='18 200' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: wws-spin 1.5s linear infinite;
}

/* ---------- Keyframes ---------- */
@keyframes wws-orbit {
    0%   { transform: rotate(0deg);   --wws-trail: 1%;  }
    12%  { --wws-trail: 50%; }
    60%  { transform: rotate(360deg); --wws-trail: 40%; }
    82%  { transform: rotate(360deg); --wws-trail: 1%;  }
    100% { transform: rotate(360deg); --wws-trail: 1%;  }
}

@keyframes wws-spin {
    to { transform: rotate(360deg); }
}

@keyframes wws-pulse-logo {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

@keyframes wws-ping {
    0%   { transform: scale(1); opacity: 0.8; }
    75%, 100% { transform: scale(1.8); opacity: 0; }
}

/* ---------- Utility: Full-page overlay ---------- */
.wws-loader-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    z-index: 9999;
}

.wws-loader-overlay .wws-loader {
    --wws-loader-size: 120px;
}