/* ──────────────────────────────────────────────────────────────────────────
 * Apple-style activity indicator (12 blades fading in/out).
 * Použito v HTML preloaderu (public/index.html) i v React komponentě
 * AppleSpinner (src/components/ui/apple-spinner.tsx) — aby preloader
 * a in-app loader vypadaly totožně.
 * ────────────────────────────────────────────────────────────────────────── */

.apple-spinner {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    color: #8162c2; /* brand purple — přepsatelné inline/parentem via `color` */
}

.apple-spinner-blade {
    position: absolute;
    left: 50%;
    top: 0;
    width: 7.5%;
    height: 25%;
    margin-left: -3.75%;
    background: currentColor;
    border-radius: 50px;
    /* Rotace kolem středu kontejneru: čepel je nahoře, střed kontejneru
       je o 1× výšku čepele pod jejím spodním okrajem → origin 50% 200%. */
    transform-origin: 50% 200%;
    animation: apple-spinner-fade 1.2s linear infinite;
    will-change: opacity;
}

.apple-spinner-blade:nth-child(1)  { transform: rotate(0deg);   animation-delay:  0s;     }
.apple-spinner-blade:nth-child(2)  { transform: rotate(30deg);  animation-delay: -0.1s;   }
.apple-spinner-blade:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.2s;   }
.apple-spinner-blade:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.3s;   }
.apple-spinner-blade:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.4s;   }
.apple-spinner-blade:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.5s;   }
.apple-spinner-blade:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.6s;   }
.apple-spinner-blade:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.7s;   }
.apple-spinner-blade:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.8s;   }
.apple-spinner-blade:nth-child(10) { transform: rotate(270deg); animation-delay: -0.9s;   }
.apple-spinner-blade:nth-child(11) { transform: rotate(300deg); animation-delay: -1.0s;   }
.apple-spinner-blade:nth-child(12) { transform: rotate(330deg); animation-delay: -1.1s;   }

@keyframes apple-spinner-fade {
    0%   { opacity: 1; }
    100% { opacity: 0.15; }
}

/* ── HTML preloader layout (před načtením main.js) ─────────────────────── */

#preloader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #ffffff;
    z-index: 2000;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #3b3b3b;
}

#preloader .apple-spinner {
    width: 80px;
    height: 80px;
}

#preloader-text {
    font-size: 14px;
    letter-spacing: 0.2px;
    color: #555;
}

#preloader-progress {
    font-size: 13px;
    color: #8162c2;
    font-weight: 600;
    min-height: 18px; /* prevents layout shift when text populates */
    font-variant-numeric: tabular-nums;
}

/* Tmavý režim — respektuje systémové nastavení dokud se React nespustí. */
@media (prefers-color-scheme: dark) {
    #preloader {
        background: #1a1a1a;
        color: #e0e0e0;
    }
    #preloader-text { color: #bbb; }
    .apple-spinner { color: #b398e0; }
}