/* ==========================================================================
   Loading Screens Rebrand
   Shared night sky base + login triangles + 3 app loader animations (1, 2, 5)
   ========================================================================== */

/* ---------- Night Sky Canvas ---------- */

.proven-night-sky-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ---------- Login Triangle Overlays ---------- */

.proven-login-triangles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.login-tri {
    position: absolute;
    opacity: 0.20;
}

.login-tri.tri-1 {
    width: 22vw;
    top: -2vh;
    right: 3vw;
    transform: rotate(15deg);
    opacity: 0.22;
    animation: login-tri-drift-1 25s ease-in-out infinite;
}

.login-tri.tri-2 {
    width: 20vw;
    bottom: 5vh;
    left: -3vw;
    transform: rotate(-25deg);
    opacity: 0.16;
    animation: login-tri-drift-2 30s ease-in-out infinite;
}

.login-tri.tri-3 {
    width: 14vw;
    top: 30vh;
    right: 8vw;
    transform: rotate(45deg);
    opacity: 0.14;
    animation: login-tri-drift-3 22s ease-in-out infinite;
}

.login-tri.tri-4 {
    width: 18vw;
    bottom: -5vh;
    right: 25vw;
    transform: rotate(-10deg);
    opacity: 0.28;
    animation: login-tri-drift-4 28s ease-in-out infinite;
}

.login-tri.tri-5 {
    width: 10vw;
    top: 15vh;
    left: 10vw;
    transform: rotate(30deg);
    opacity: 0.25;
    animation: login-tri-drift-5 20s ease-in-out infinite;
}

.login-tri.tri-6 {
    width: 25vw;
    bottom: 15vh;
    left: 50vw;
    transform: rotate(-40deg);
    opacity: 0.22;
    animation: login-tri-drift-6 35s ease-in-out infinite;
}

@keyframes login-tri-drift-1 {
    0%, 100% { transform: rotate(15deg) translate(0, 0); }
    50% { transform: rotate(19deg) translate(-2.5vw, 2.5vh); }
}

@keyframes login-tri-drift-2 {
    0%, 100% { transform: rotate(-25deg) translate(0, 0); }
    50% { transform: rotate(-21deg) translate(3.5vw, -1.8vh); }
}

@keyframes login-tri-drift-3 {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50% { transform: rotate(41deg) translate(-2vw, 3vh); }
}

@keyframes login-tri-drift-4 {
    0%, 100% { transform: rotate(-10deg) translate(0, 0); }
    50% { transform: rotate(-6deg) translate(2.2vw, -2.5vh); }
}

@keyframes login-tri-drift-5 {
    0%, 100% { transform: rotate(30deg) translate(0, 0); }
    50% { transform: rotate(35deg) translate(2.8vw, 1.8vh); }
}

@keyframes login-tri-drift-6 {
    0%, 100% { transform: rotate(-40deg) translate(0, 0); }
    50% { transform: rotate(-36deg) translate(-2.2vw, -2vh); }
}

/* ==========================================================================
   App Loading Screen - Shared Structure
   ========================================================================== */

.proven-loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

.proven-loader-animation {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.proven-loader-star {
    width: 60px;
    height: 60px;
    z-index: 10;
    filter: drop-shadow(0 0 15px rgba(38, 217, 255, 0.4));
    animation: star-glow-enhanced 3s ease-in-out infinite;
}

/* Enhanced star glow with color temperature shift */
@keyframes star-glow-enhanced {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(38, 217, 255, 0.3)) drop-shadow(0 0 30px rgba(133, 124, 233, 0.1));
        transform: scale(1);
    }
    33% {
        filter: drop-shadow(0 0 25px rgba(38, 217, 255, 0.6)) drop-shadow(0 0 50px rgba(133, 124, 233, 0.25));
        transform: scale(1.05);
    }
    66% {
        filter: drop-shadow(0 0 30px rgba(39, 144, 255, 0.5)) drop-shadow(0 0 60px rgba(105, 222, 163, 0.2));
        transform: scale(1.08);
    }
}

.proven-loader-progress {
    position: absolute;
    bottom: 25%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: min(300px, 60vw);
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.proven-loader-progress-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #26D9FF, #857CE9, #2790FF);
    background-size: 200% 100%;
    animation: progress-fill 10s ease-out forwards, progress-shimmer 2s linear infinite;
    width: 0%;
}

@keyframes progress-fill {
    0% { width: 0%; }
    20% { width: 30%; }
    50% { width: 55%; }
    80% { width: 80%; }
    100% { width: 95%; }
}

@keyframes progress-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.loading-container-overlay.loaded .proven-loader-progress-bar {
    width: 100% !important;
    animation: none;
    transition: width 300ms ease-out;
}

/* ==========================================================================
   Cross-cutting: Ambient Particles
   ========================================================================== */

.ambient-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    pointer-events: none;
    z-index: 1;
    animation: ambient-drift linear infinite;
}

@keyframes ambient-drift {
    0% { transform: translate(0, 0); opacity: 0; }
    10% { opacity: 0.3; }
    50% { transform: translate(calc(var(--drift-x, 30px)), calc(var(--drift-y, -50px))); opacity: 0.15; }
    90% { opacity: 0.25; }
    100% { transform: translate(calc(var(--drift-x, 30px) * 2), calc(var(--drift-y, -50px) * 2)); opacity: 0; }
}

/* ==========================================================================
   Loader 1: Star Vortex (Black Hole) - Enhanced
   ========================================================================== */

.loader-1 .proven-loader-star {
    animation: star-glow-vortex 2s ease-in-out infinite;
}

@keyframes star-glow-vortex {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(38, 217, 255, 0.5)) drop-shadow(0 0 40px rgba(133, 124, 233, 0.3)); transform: scale(1) rotate(0deg); }
    50% { filter: drop-shadow(0 0 40px rgba(38, 217, 255, 0.8)) drop-shadow(0 0 80px rgba(133, 124, 233, 0.5)); transform: scale(1.15) rotate(5deg); }
}

.vortex-icon {
    position: absolute;
    font-size: 1.2rem;
    opacity: 0;
    pointer-events: none;
    animation: vortex-spiral-in 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Trail ghost: delayed, blurred copy that follows the icon */
.vortex-trail {
    filter: blur(3px);
    opacity: 0 !important;
    animation: vortex-spiral-in-trail 3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes vortex-spiral-in {
    0% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) scale(2.8) rotate(0deg); }
    8% { opacity: 0.8; }
    80% { opacity: 0.9; transform: translate(calc(var(--start-x) * 0.05), calc(var(--start-y) * 0.05)) scale(0.15) rotate(660deg); }
    100% { opacity: 0; filter: brightness(4); transform: translate(0, 0) scale(0) rotate(720deg); }
}

@keyframes vortex-spiral-in-trail {
    0% { opacity: 0; transform: translate(var(--start-x), var(--start-y)) scale(2.8) rotate(0deg); filter: blur(3px); }
    8% { opacity: 0.3; }
    80% { opacity: 0.15; transform: translate(calc(var(--start-x) * 0.05), calc(var(--start-y) * 0.05)) scale(0.15) rotate(660deg); filter: blur(4px); }
    100% { opacity: 0; filter: blur(6px) brightness(2); transform: translate(0, 0) scale(0) rotate(720deg); }
}

.vortex-glow-pool {
    position: absolute;
    width: 140px;
    height: 140px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(38,217,255,0.5) 0%, rgba(133,124,233,0.3) 40%, transparent 70%);
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.4s ease-out, transform 0.6s ease-out;
    z-index: 5;
    pointer-events: none;
}

/* Gravitational lensing disc */
.vortex-lens-disc {
    position: absolute;
    width: 180px;
    height: 180px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(38,217,255,0.08) 0%, rgba(133,124,233,0.04) 50%, transparent 70%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    opacity: 0;
    transition: opacity 0.6s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 4;
    pointer-events: none;
}

.vortex-color-core {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    border-radius: 50%;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    z-index: 11;
    pointer-events: none;
    mix-blend-mode: multiply;
    -webkit-mask-image: radial-gradient(circle, black 25%, transparent 50%);
    mask-image: radial-gradient(circle, black 25%, transparent 50%);
}

.vortex-glitter {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: glitter-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
}

@keyframes glitter-pop {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    50% { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; }
}

@keyframes vortex-explode-out {
    0% { opacity: 1; transform: translate(0, 0) scale(0.8) rotate(0deg); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--end-x), var(--end-y)) scale(1.2) rotate(var(--end-rot, 360deg)); }
}

@keyframes vortex-bigbang-flash {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.9; filter: blur(20px) brightness(2); }
    30% { transform: translate(-50%, -50%) scale(6); opacity: 0.7; filter: blur(40px) brightness(1.5); }
    100% { transform: translate(-50%, -50%) scale(12); opacity: 0; filter: blur(60px); }
}

.vortex-bang-tri {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
}

.vortex-bang-tri svg {
    width: 100%;
    height: 100%;
}

/* Supernova plasma flash overlay */
.vortex-plasma-flash {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250px;
    height: 250px;
    transform: translate(-50%, -50%) scale(0.5);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(38, 217, 255, 0.6) 25%,
        rgba(133, 124, 233, 0.4) 50%,
        rgba(39, 144, 255, 0.2) 70%,
        transparent 100%);
    z-index: 12;
    pointer-events: none;
    animation: plasma-flash 1s ease-out forwards;
    mix-blend-mode: screen;
}

@keyframes plasma-flash {
    0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; filter: blur(5px) brightness(3); }
    15% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; filter: blur(10px) brightness(2.5); }
    40% { transform: translate(-50%, -50%) scale(2); opacity: 0.8; filter: blur(15px) brightness(2); }
    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; filter: blur(30px) brightness(1); }
}

/* ==========================================================================
   Loader 3: Singularity - Spiral Absorption + Color Shift
   ========================================================================== */

.loader-3 .proven-loader-star {
    animation: singularity-star-spin 2s linear infinite;
    z-index: 10;
}

@keyframes singularity-star-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.singularity-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    will-change: transform, opacity;
}

.singularity-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center,
        rgba(133, 124, 233, 0.45) 0%,
        rgba(105, 222, 163, 0.25) 35%,
        rgba(133, 124, 233, 0.15) 60%,
        rgba(10, 33, 91, 0.7) 100%);
    transition: opacity 5s ease-in;
}

/* ==========================================================================
   Loader 4: Genesis - Organic Branch Growth (non-cosmic)
   ========================================================================== */

.loader-4 {
    background: #0A215B !important;
}

.loader-4 .proven-night-sky-container {
    display: none;
}

.genesis-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* ==========================================================================
   Loader 6: Architect - Corporate Geometric Framework
   ========================================================================== */

.loader-6 {
    background: linear-gradient(135deg, #0A215B 0%, #0C2650 15%, #0E2D4A 30%, #123D48 45%, #1A5C4A 60%, #2E7A5E 75%, #4A9E75 88%, #69DEA3 100%) !important;
}

.loader-6 .proven-night-sky-container {
    display: none;
}

.architect-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* ==========================================================================
   Loader 2: Triangle Cascade - Enhanced
   ========================================================================== */

.cascade-tri {
    position: absolute;
    opacity: 0;
    animation: cascade-fall var(--duration, 2s) var(--delay, 0s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
    will-change: transform, opacity;
}

/* Motion blur during fast fall phase */
.cascade-tri:not(.cascade-gravity) {
    filter: blur(calc(var(--target-scale, 1) * 0.5px));
}

@keyframes cascade-fall {
    0% { opacity: 0; transform: translate(var(--from-x, 0), var(--from-y, -100vh)) rotate(var(--from-rot, 0deg)) scale(0.3); filter: blur(3px); }
    60% { opacity: var(--target-opacity, 0.15); }
    80% { transform: translate(calc(var(--to-x, 0) + var(--overshoot-x, 0px)), calc(var(--to-y, 0) + var(--overshoot-y, -8px))) rotate(calc(var(--to-rot, 0deg) + 3deg)) scale(calc(var(--target-scale, 1) * 1.05)); filter: blur(0px); }
    90% { transform: translate(calc(var(--to-x, 0) - var(--overshoot-x, 0px)), calc(var(--to-y, 0) - var(--overshoot-y, -3px))) rotate(calc(var(--to-rot, 0deg) - 1deg)) scale(calc(var(--target-scale, 1) * 0.98)); }
    100% { opacity: var(--target-opacity, 0.15); transform: translate(var(--to-x, 0), var(--to-y, 0)) rotate(var(--to-rot, 0deg)) scale(var(--target-scale, 1)); filter: blur(0px); }
}

.loader-2 .proven-loader-star {
    opacity: 0;
    animation: cascade-star-appear 0.8s 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards, star-glow-enhanced 3s 3.3s ease-in-out infinite;
}

@keyframes cascade-star-appear {
    0% { opacity: 0; transform: scale(0); }
    60% { opacity: 1; transform: scale(1.3); }
    100% { opacity: 1; transform: scale(1); }
}

.cascade-energy-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    border: 1px solid rgba(38, 217, 255, 0.15);
    box-shadow: 0 0 30px rgba(38, 217, 255, 0.1), inset 0 0 30px rgba(133, 124, 233, 0.05);
    opacity: 0;
    transition: opacity 0.8s, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
    pointer-events: none;
}

.cascade-energy-ring.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.8);
}

.cascade-energy-ring-2 {
    width: 160px;
    height: 160px;
    border: 1px solid rgba(133, 124, 233, 0.1);
    box-shadow: 0 0 20px rgba(133, 124, 233, 0.08);
}

.cascade-energy-ring-2.active {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0.6;
}

.cascade-tri.cascade-gravity {
    transition: transform 2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease-in-out;
}

/* Snap flash when triangle locks into position */
.cascade-tri.cascade-snap {
    filter: brightness(2.5) drop-shadow(0 0 15px rgba(38, 217, 255, 0.6)) !important;
    transition: filter 0.15s ease-out !important;
}

/* Breathing animation after settling */
.cascade-tri.cascade-breathing {
    animation: cascade-breathe 3s var(--breath-delay, 0s) ease-in-out infinite !important;
}

@keyframes cascade-breathe {
    0%, 100% { opacity: var(--target-opacity, 0.15); transform: translate(var(--to-x, 0), var(--to-y, 0)) rotate(var(--to-rot, 0deg)) scale(var(--target-scale, 1)); }
    50% { opacity: calc(var(--target-opacity, 0.15) + 0.04); transform: translate(var(--to-x, 0), var(--to-y, 0)) rotate(var(--to-rot, 0deg)) scale(calc(var(--target-scale, 1) * 1.02)); }
}

/* Pulse waves emanating from center */
.cascade-pulse-wave {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(38, 217, 255, 0.25);
    transform: translate(-50%, -50%) scale(0);
    animation: cascade-pulse-expand 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    pointer-events: none;
    z-index: 4;
}

@keyframes cascade-pulse-expand {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(15); opacity: 0; }
}

/* Canvas for light beam connections */
.cascade-beam-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ==========================================================================
   Loader 5: Constellation - Enhanced
   ========================================================================== */

.constellation-dot {
    position: absolute;
    border-radius: 50%;
    background: white;
    opacity: 0;
    animation:
        constellation-dot-appear 0.4s var(--dot-delay, 0s) cubic-bezier(0.16, 1, 0.3, 1) forwards,
        constellation-twinkle var(--twinkle-dur, 3s) var(--twinkle-delay, 0s) ease-in-out infinite;
    animation-fill-mode: forwards, none;
}

/* Dot spawn flash - brief bright burst on appearance */
@keyframes constellation-dot-appear {
    0% { opacity: 0; transform: scale(0); box-shadow: none; }
    40% { opacity: 1; transform: scale(2); box-shadow: 0 0 20px currentColor, 0 0 40px currentColor; }
    60% { opacity: 0.9; transform: scale(1.5); box-shadow: 0 0 10px currentColor; }
    100% { opacity: 0.7; transform: scale(1); box-shadow: 0 0 6px rgba(255,255,255,0.3); }
}

/* Twinkle: random brightness oscillation per dot */
@keyframes constellation-twinkle {
    0%, 100% { opacity: 0.7; filter: brightness(1); }
    25% { opacity: 0.5; filter: brightness(0.8); }
    50% { opacity: 0.9; filter: brightness(1.4); box-shadow: 0 0 10px rgba(255,255,255,0.4); }
    75% { opacity: 0.6; filter: brightness(0.9); }
}

.constellation-line {
    position: absolute;
    height: 2px;
    transform-origin: 0 0;
    opacity: 0;
    box-shadow: 0 0 4px rgba(38, 217, 255, 0.3);
    animation: constellation-line-draw 0.5s var(--line-delay, 0s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Line draw with glow sweep - a bright point travels along the line */
@keyframes constellation-line-draw {
    0% { opacity: 0; clip-path: inset(0 100% 0 0); filter: brightness(1); }
    50% { filter: brightness(2); }
    100% { opacity: 0.5; clip-path: inset(0 0 0 0); filter: brightness(1); }
}

.loader-5 .proven-loader-star {
    opacity: 0;
    animation: none;
}

@keyframes constellation-star-pulse {
    0% { opacity: 0; transform: scale(0); filter: drop-shadow(0 0 0 transparent); }
    50% { opacity: 1; transform: scale(1.5); filter: drop-shadow(0 0 40px rgba(38, 217, 255, 0.8)); }
    100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 15px rgba(38, 217, 255, 0.4)); }
}

.constellation-tri-fill {
    position: absolute;
    z-index: 3;
    opacity: 0.15;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s, left 0.3s, top 0.3s;
}

.constellation-tri-fill svg {
    width: 100%;
    height: 100%;
}

.constellation-satellite {
    opacity: 0.1;
}

/* ==========================================================================
   Replay Button and Overlay
   ========================================================================== */

.proven-replay-star {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    width: 22px;
    height: 22px;
    z-index: 100;
    opacity: 0.15;
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
    filter: drop-shadow(0 0 4px rgba(38, 217, 255, 0.3));
}

.proven-replay-star:hover {
    opacity: 0.7;
    transform: scale(1.3);
    filter: drop-shadow(0 0 8px rgba(38, 217, 255, 0.6));
}

.proven-replay-star--on-loader {
    z-index: 999999;
    opacity: 0;
    animation: replay-star-fade-in 0.6s 0.5s ease-out forwards;
}

@keyframes replay-star-fade-in {
    0% { opacity: 0; }
    100% { opacity: 0.35; }
}

.proven-replay-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999999;
    cursor: pointer;
    animation: replay-fade-in 0.5s ease-out;
}

.proven-replay-overlay .proven-loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

@keyframes replay-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.proven-replay-dismiss {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    pointer-events: none;
    animation: replay-dismiss-fade 1s 2s ease-out forwards;
    opacity: 0;
}

@keyframes replay-dismiss-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Replay bottom bar — nav left, set toggle right */
.proven-replay-bar {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    animation: replay-star-fade-in 0.6s 1s ease-out forwards;
    user-select: none;
}

.replay-bar-left {
    display: flex;
    align-items: center;
    gap: 2px;
}

.replay-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    transition: color 0.2s, background 0.2s;
}

.replay-nav-btn:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
}

.replay-nav-number {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
    min-width: 18px;
    text-align: center;
}

.replay-nav-name {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-left: 4px;
    margin-right: 6px;
    white-space: nowrap;
}

.replay-set-toggle {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.replay-set-toggle:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(38, 217, 255, 0.4);
}

/* ==========================================================================
   Slow-Mo Replay (2x) - scales CSS-only animation durations
   ========================================================================== */

.slow-mo .cascade-tri {
    animation-duration: calc(var(--duration, 2s) * var(--slow-mo, 1));
    animation-delay: calc(var(--delay, 0s) * var(--slow-mo, 1));
}

.slow-mo.loader-2 .proven-loader-star {
    animation: cascade-star-appear calc(0.8s * var(--slow-mo, 1)) calc(2.5s * var(--slow-mo, 1)) cubic-bezier(0.16, 1, 0.3, 1) forwards,
               star-glow-enhanced calc(3s * var(--slow-mo, 1)) calc(3.3s * var(--slow-mo, 1)) ease-in-out infinite;
}

.slow-mo.loader-1 .proven-loader-star {
    animation: star-glow-vortex calc(2s * var(--slow-mo, 1)) ease-in-out infinite;
}

.slow-mo .vortex-icon {
    animation-duration: calc(3s * var(--slow-mo, 1));
}

.slow-mo .vortex-trail {
    animation-duration: calc(3s * var(--slow-mo, 1)) !important;
    animation-delay: calc(0.08s * var(--slow-mo, 1)) !important;
}

.slow-mo .constellation-dot {
    animation-duration: calc(0.4s * var(--slow-mo, 1)), calc(var(--twinkle-dur, 3s) * var(--slow-mo, 1));
    animation-delay: calc(var(--dot-delay, 0s) * var(--slow-mo, 1)), calc(var(--twinkle-delay, 0s) * var(--slow-mo, 1));
}

.slow-mo .constellation-line {
    animation-duration: calc(0.5s * var(--slow-mo, 1));
    animation-delay: calc(var(--line-delay, 0s) * var(--slow-mo, 1));
}

.slow-mo.loader-5 .proven-loader-star {
    animation: constellation-star-pulse calc(0.8s * var(--slow-mo, 1)) calc(2.5s * var(--slow-mo, 1)) cubic-bezier(0.16, 1, 0.3, 1) forwards,
               star-glow-enhanced calc(3s * var(--slow-mo, 1)) calc(3.3s * var(--slow-mo, 1)) ease-in-out infinite;
}

.slow-mo .cascade-pulse-wave {
    animation-duration: calc(1.5s * var(--slow-mo, 1));
}

.slow-mo .cascade-energy-ring {
    transition-duration: calc(0.8s * var(--slow-mo, 1)), calc(1s * var(--slow-mo, 1));
}

.slow-mo .glitter-pop {
    animation-duration: calc(0.25s * var(--slow-mo, 1));
}

.slow-mo .star-bounce-item {
    animation-duration: calc(1.4s * var(--slow-mo, 1));
}

.slow-mo.loader-3 .proven-loader-star {
    animation: singularity-star-spin calc(2s * var(--slow-mo, 1)) linear infinite;
}

/* ==========================================================================
   Loader 7: Prism Breathe
   ========================================================================== */

.loader-7 {
    background: linear-gradient(180deg, #5B4A9E, #857CE9) !important;
    position: relative;
}

.loader-7::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        /* Diagonal lines one way */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 18px,
            rgba(255, 255, 255, 0.07) 18px,
            rgba(255, 255, 255, 0.07) 19px
        ),
        /* Diagonal lines other way */
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 18px,
            rgba(255, 255, 255, 0.07) 18px,
            rgba(255, 255, 255, 0.07) 19px
        ),
        /* Horizontal accent */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 36px,
            rgba(255, 255, 255, 0.03) 36px,
            rgba(255, 255, 255, 0.03) 37px
        ),
        /* Vertical accent */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 36px,
            rgba(255, 255, 255, 0.03) 36px,
            rgba(255, 255, 255, 0.03) 37px
        );
    /* Radial mask: transparent center, visible edges */
    -webkit-mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, transparent 30%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.8) 75%, black 100%);
    mask-image: radial-gradient(ellipse 45% 45% at 50% 50%, transparent 30%, rgba(0,0,0,0.3) 55%, rgba(0,0,0,0.8) 75%, black 100%);
}

.loader-7 .proven-night-sky-container {
    display: none;
}

.loader-7 .proven-loader-star {
    filter: drop-shadow(0 0 12px rgba(38,217,255,0.4));
}

.breathe-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid;
    pointer-events: none;
    transition: width 0.05s linear, height 0.05s linear;
    z-index: 2;
}

.breathe-particle {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    opacity: 0.8;
    animation: breathe-particle-drift 2.5s ease-out forwards;
    animation-duration: calc(2.5s * var(--slow-mo, 1));
}

@keyframes breathe-particle-drift {
    0% {
        opacity: 0.8;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--drift-x, 40px), var(--drift-y, 40px)) scale(0.3);
    }
}

/* ==========================================================================
   Loader 8: Triangle Kaleidoscope
   ========================================================================== */

.loader-8 {
    background: linear-gradient(180deg, #0F2847, #1A3A5C) !important;
}

.kaleidoscope-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.kaleidoscope-tri {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 0 8px rgba(38,217,255,0.3));
    transition: opacity 0.3s;
}

.kaleidoscope-tri svg {
    width: 100%;
    height: 100%;
}

.kaleidoscope-child {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0.5;
    filter: drop-shadow(0 0 5px rgba(133,124,233,0.3));
    transition: opacity 0.3s;
}

.kaleidoscope-child svg {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Loader 9: Heartbeat
   ========================================================================== */

.loader-9 {
    background: #F4F4F4 !important;
}

.loader-9 .proven-night-sky-container {
    display: none;
}

.loader-9 .proven-loader-star {
    filter: drop-shadow(0 0 10px rgba(38,217,255,0.3));
}

.heartbeat-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.heartbeat-pulse {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid;
    pointer-events: none;
    z-index: 3;
    transform: translate(-50%, -50%) scale(1);
    animation: heartbeat-pulse-expand calc(1.2s * var(--slow-mo, 1)) ease-out forwards;
}

@keyframes heartbeat-pulse-expand {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(5);
        opacity: 0;
    }
}

.heartbeat-icon {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    animation: heartbeat-icon-float calc(2.5s * var(--slow-mo, 1)) ease-out forwards;
}

@keyframes heartbeat-icon-float {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.5);
    }
    15% {
        opacity: 0.8;
        transform: translate(-50%, -10px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--float-x, 0px)), -80px) scale(0.6);
    }
}

/* ==========================================================================
   Loader 10: Clinical Day — Photorealistic cross-dissolve
   ========================================================================== */

.loader-10 {
    background: linear-gradient(180deg, #F0EDE8, #E8E4DF) !important;
}

.clinical-photo {
    pointer-events: none;
    will-change: opacity, filter;
}

.clinical-shape {
    pointer-events: none;
    will-change: opacity, transform;
}

.clinical-icon {
    pointer-events: none;
    will-change: top, opacity;
}

.clinical-wordmark {
    pointer-events: none;
    will-change: opacity, top;
}

.clinical-arc-canvas {
    pointer-events: none;
}

/* Ambient particles on light bg need to be dark */
.loader-10 .ambient-particle {
    background: rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Loader 11: Pulse Network — Photorealistic network graph
   ========================================================================== */

.loader-11 {
    background:
        /* Diagonal lines: cyan */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 24px,
            rgba(38, 217, 255, 0.18) 24px,
            rgba(38, 217, 255, 0.18) 25px
        ),
        /* Diagonal lines: purple (opposite direction) */
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 24px,
            rgba(133, 124, 233, 0.18) 24px,
            rgba(133, 124, 233, 0.18) 25px
        ),
        /* Horizontal lines: green */
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 32px,
            rgba(105, 222, 163, 0.12) 32px,
            rgba(105, 222, 163, 0.12) 33px
        ),
        /* Vertical lines: blue */
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 32px,
            rgba(39, 144, 255, 0.12) 32px,
            rgba(39, 144, 255, 0.12) 33px
        ),
        /* Base gradient - green */
        linear-gradient(180deg, #1A4D3A, #0E2E22) !important;
}

.loader-11 .proven-night-sky-container {
    display: none;
}

.pulse-network-canvas {
    pointer-events: none;
    will-change: contents;
}

.pulse-photo {
    pointer-events: none;
    will-change: clip-path, opacity;
}

.pulse-wordmark {
    pointer-events: none;
    will-change: opacity;
}

/* ==========================================================================
   Loader 12: Particle Story — Particles form shapes and icons
   ========================================================================== */

.loader-12 {
    background: linear-gradient(180deg, #1A1A3E, #0A215B) !important;
}

.particle-canvas {
    pointer-events: none;
    will-change: contents;
}

.particle-ripple {
    pointer-events: none;
}

.particle-wordmark {
    pointer-events: none;
    will-change: opacity;
}

/* Ripple ring expansion animation */
@keyframes particle-ring-expand {
    0% {
        width: 10px;
        height: 10px;
        margin-left: -5px;
        margin-top: -5px;
        opacity: 0.6;
        border-color: rgba(255, 255, 255, 0.5);
    }
    100% {
        width: 250px;
        height: 250px;
        margin-left: -125px;
        margin-top: -125px;
        opacity: 0;
        border-color: rgba(255, 255, 255, 0);
    }
}

/* Bright flash for phase 4 convergence */
@keyframes particle-flash {
    0% {
        width: 10px;
        height: 10px;
        margin-left: -5px;
        margin-top: -5px;
        opacity: 1;
        background: white;
        box-shadow: 0 0 40px rgba(38, 217, 255, 0.8), 0 0 80px rgba(133, 124, 233, 0.5);
    }
    30% {
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -100px;
        opacity: 0.8;
    }
    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        opacity: 0;
        box-shadow: 0 0 60px rgba(38, 217, 255, 0), 0 0 100px rgba(133, 124, 233, 0);
    }
}

/* ==========================================================================
   Loader 13: Pulse Particle
   ========================================================================== */

.loader-13 {
    background: linear-gradient(135deg, #857CE9 0%, #9A8FD4 20%, #B8A8C8 35%, #CFBFB8 50%, #DDD2C4 65%, #E8DFD2 80%, #F0EDE8 100%) !important;
}

.loader-13 .proven-night-sky-container {
    display: none;
}

.pp-canvas {
    pointer-events: none;
    will-change: contents;
}

.pp-ripple {
    pointer-events: none;
}

.pp-wordmark {
    pointer-events: none;
    will-change: opacity;
}

/* ==========================================================================
   Loader 14: Tri Ripple (Green) – Simple Looper
   ========================================================================== */

.loader-14 {
    background:
        radial-gradient(ellipse 60% 55% at 12% 18%, rgba(133, 124, 233, 0.65), transparent 60%),
        radial-gradient(ellipse 55% 60% at 88% 78%, rgba(39, 144, 255, 0.55), transparent 60%),
        radial-gradient(ellipse 50% 45% at 68% 8%, rgba(133, 124, 233, 0.4), transparent 55%),
        radial-gradient(ellipse 45% 50% at 25% 88%, rgba(39, 144, 255, 0.4), transparent 55%),
        radial-gradient(ellipse 65% 45% at 50% 50%, rgba(10, 33, 91, 0.35), transparent 65%),
        linear-gradient(160deg, #1A3350 0%, #164A38 30%, #2A1F50 60%, #133A4A 100%) !important;
}

.tri-ripple-topo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
}

.loader-14 .proven-night-sky-container {
    display: none;
}

.tri-ripple-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    animation: tri-ripple-expand 5s linear infinite;
}

@keyframes tri-ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    3% {
        opacity: 0.5;
    }
    25% {
        opacity: 0.15;
    }
    50% {
        opacity: 0.04;
    }
    100% {
        transform: translate(-50%, -50%) scale(28);
        opacity: 0;
    }
}

/* ==========================================================================
   Loader 15: Orbit (Purple) – Simple Looper
   ========================================================================== */

.loader-15 {
    background: linear-gradient(160deg, #2D1854 0%, #3E2272 40%, #1A0E3A 100%) !important;
}

.loader-15 .proven-night-sky-container {
    display: none;
}

.loader-15 .proven-loader-star {
    animation: orbit-star-breathe 3s ease-in-out infinite !important;
    z-index: 10;
}

@keyframes orbit-star-breathe {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(133, 124, 233, 0.4));
    }
    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 30px rgba(133, 124, 233, 0.7)) drop-shadow(0 0 60px rgba(38, 217, 255, 0.3));
    }
}

.orbit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    margin: -4px 0 0 -4px;
    z-index: 3;
    pointer-events: none;
    animation: orbit-spin 3s linear infinite;
    animation-delay: var(--orbit-delay, 0s);
    transform-origin: 0 0;
    /* offset-path creates the circular orbit */
    offset-path: circle(var(--orbit-radius, 80px));
    offset-rotate: 0deg;
}

/* Fallback: use transform-based orbit */
.orbit-dot {
    animation: orbit-revolve 3s linear infinite;
    animation-delay: var(--orbit-delay, 0s);
}

.orbit-dot-outer {
    animation: orbit-revolve-reverse 4.5s linear infinite;
    animation-delay: var(--orbit-delay, 0s);
}

@keyframes orbit-revolve {
    0% {
        transform: rotate(0deg) translateX(var(--orbit-radius, 80px)) rotate(0deg);
        opacity: 0.9;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: rotate(360deg) translateX(var(--orbit-radius, 80px)) rotate(-360deg);
        opacity: 0.9;
    }
}

@keyframes orbit-revolve-reverse {
    0% {
        transform: rotate(360deg) translateX(var(--orbit-radius, 130px)) rotate(-360deg);
        opacity: 0.5;
    }
    50% {
        opacity: 0.2;
    }
    100% {
        transform: rotate(0deg) translateX(var(--orbit-radius, 130px)) rotate(0deg);
        opacity: 0.5;
    }
}

/* ==========================================================================
   Loader 16: Pulse Ring (Blue) – Simple Looper
   ========================================================================== */

.loader-16 {
    background: linear-gradient(160deg, #0A215B 0%, #143A8C 40%, #071845 100%) !important;
}

.loader-16 .proven-night-sky-container {
    display: none;
}

.loader-16 .proven-loader-star {
    animation: pulse-ring-star-breathe 2s ease-in-out infinite !important;
    z-index: 10;
}

@keyframes pulse-ring-star-breathe {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 12px rgba(38, 217, 255, 0.3));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 25px rgba(39, 144, 255, 0.6)) drop-shadow(0 0 50px rgba(38, 217, 255, 0.2));
    }
}

.pulse-ring-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: -4px 0 0 -4px;
    pointer-events: none;
    z-index: 3;
    opacity: 0.3;
    animation: pulse-ring-beat 2s ease-in-out infinite;
}

.pulse-ring-dot-inner {
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    opacity: 0.25;
}

@keyframes pulse-ring-beat {
    0%, 100% {
        transform: scale(1);
        opacity: 0.3;
    }
    50% {
        transform: scale(2.2);
        opacity: 1;
    }
}

/* ==========================================================================
   Loader 17: Tri Bounce (Warm linen) – 3 bouncing triangles
   ========================================================================== */

.loader-17 {
    background:
        radial-gradient(ellipse 50% 45% at 40% 50%, rgba(133, 124, 233, 0.15), transparent 70%),
        radial-gradient(ellipse 40% 50% at 65% 40%, rgba(38, 217, 255, 0.1), transparent 70%),
        linear-gradient(160deg, #0A1535 0%, #111D4A 40%, #0D1840 100%) !important;
    position: relative;
    overflow: hidden;
}

.loader-17::before {
    content: '';
    position: absolute;
    inset: -80% -20% -80% -20%;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 30px,
            rgba(10, 33, 91, 0.18) 30px,
            rgba(10, 33, 91, 0.12) 55px,
            transparent 55px,
            transparent 85px,
            rgba(133, 124, 233, 0.15) 85px,
            rgba(133, 124, 233, 0.10) 110px,
            transparent 110px,
            transparent 140px,
            rgba(38, 217, 255, 0.14) 140px,
            rgba(38, 217, 255, 0.09) 165px,
            transparent 165px
        );
    animation: tri-bounce-waves 20s ease-in-out infinite;
    transform-origin: center center;
}

.loader-17::after {
    content: '';
    position: absolute;
    inset: -80% -20% -80% -20%;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 40px,
            rgba(10, 33, 91, 0.15) 40px,
            rgba(10, 33, 91, 0.10) 68px,
            transparent 68px,
            transparent 100px,
            rgba(105, 222, 163, 0.14) 100px,
            rgba(105, 222, 163, 0.09) 128px,
            transparent 128px,
            transparent 160px,
            rgba(39, 144, 255, 0.13) 160px,
            rgba(39, 144, 255, 0.08) 188px,
            transparent 188px
        );
    animation: tri-bounce-waves2 28s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes tri-bounce-waves {
    0%, 100% {
        transform: rotate(3deg) translateY(0) skewY(0deg);
    }
    25% {
        transform: rotate(-2deg) translateY(30px) skewY(4deg);
    }
    50% {
        transform: rotate(2.5deg) translateY(-20px) skewY(-3deg);
    }
    75% {
        transform: rotate(-1deg) translateY(15px) skewY(2.5deg);
    }
}

@keyframes tri-bounce-waves2 {
    0%, 100% {
        transform: rotate(-2.5deg) translateY(0) skewY(0deg);
    }
    25% {
        transform: rotate(2deg) translateY(-25px) skewY(-3.5deg);
    }
    50% {
        transform: rotate(-3deg) translateY(20px) skewY(4deg);
    }
    75% {
        transform: rotate(1deg) translateY(-12px) skewY(-1.5deg);
    }
}

.loader-17 .proven-night-sky-container {
    display: none;
}

.tri-bounce-item {
    position: absolute;
    transform: translate(-50%, 0);
    transform-origin: center bottom;
    pointer-events: none;
    z-index: 2;
    animation: tri-bounce 1.4s ease-in-out infinite;
    filter: drop-shadow(0 4px 15px rgba(38, 217, 255, 0.25));
}

@keyframes tri-bounce {
    0%, 100% {
        transform: translate(-50%, 0) translateY(0);
    }
    15% {
        transform: translate(-50%, 0) translateY(-28px) scaleY(1.05);
    }
    30% {
        transform: translate(-50%, 0) translateY(0) scaleY(0.95);
    }
    35% {
        transform: translate(-50%, 0) translateY(0) scaleY(1);
    }
    40% {
        transform: translate(-50%, 0) translateY(-8px);
    }
    50% {
        transform: translate(-50%, 0) translateY(0);
    }
}

@keyframes tri-bounce-float {
    0%, 100% {
        transform: translateY(0) rotate(var(--float-rot, 0deg));
    }
    25% {
        transform: translateY(-12px) rotate(calc(var(--float-rot, 0deg) + 5deg));
    }
    50% {
        transform: translateY(6px) rotate(calc(var(--float-rot, 0deg) - 3deg));
    }
    75% {
        transform: translateY(-8px) rotate(calc(var(--float-rot, 0deg) + 2deg));
    }
}

@keyframes tri-bounce-sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* ==========================================================================
   Loader 18: Star Bloom (Teal) – Star + petal triangles
   ========================================================================== */

.loader-18 {
    background: linear-gradient(160deg, #0A3D3D 0%, #0E5252 40%, #07302E 100%) !important;
}

.loader-18 .proven-night-sky-container {
    display: none;
}

@keyframes star-bloom-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 15px rgba(38, 217, 255, 0.4));
    }
    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 35px rgba(38, 217, 255, 0.7)) drop-shadow(0 0 70px rgba(105, 222, 163, 0.3));
    }
}

.star-bloom-bg-tri {
    position: absolute;
    width: 300px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    animation: star-bloom-bg-spin 20s linear infinite;
}

@keyframes star-bloom-bg-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.star-bloom-petal {
    position: absolute;
    width: 28px;
    height: 24px;
    left: 50%;
    top: 50%;
    pointer-events: none;
    z-index: 3;
    animation: star-bloom-breathe 2.5s ease-in-out infinite;
    animation-delay: var(--bloom-delay, 0s);
    /* Position on orbit circle */
    margin-left: calc(cos(var(--bloom-angle, 0rad)) * var(--bloom-radius, 85px) - 14px);
    margin-top: calc(sin(var(--bloom-angle, 0rad)) * var(--bloom-radius, 85px) - 12px);
}

@keyframes star-bloom-breathe {
    0%, 100% {
        opacity: 0.4;
        transform: translate(-50%, -50%) rotate(var(--petal-rot, 0deg)) scale(0.7);
        filter: drop-shadow(0 0 4px rgba(38, 217, 255, 0.2));
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) rotate(var(--petal-rot, 0deg)) scale(1.3);
        filter: drop-shadow(0 0 15px rgba(38, 217, 255, 0.5));
    }
}

/* ==========================================================================
   Loader 19: Star Trail (Dark indigo) – Orbiting star with ghost trail
   ========================================================================== */

.loader-19 {
    background:
        radial-gradient(ellipse 50% 50% at 30% 30%, rgba(133, 124, 233, 0.2), transparent 70%),
        radial-gradient(ellipse 40% 45% at 70% 65%, rgba(38, 217, 255, 0.15), transparent 70%),
        radial-gradient(ellipse 35% 35% at 55% 20%, rgba(105, 222, 163, 0.1), transparent 65%),
        linear-gradient(160deg, #0E1A42 0%, #162050 40%, #0A1535 100%) !important;
}

.loader-19 .proven-night-sky-container {
    display: none;
}

.star-trail-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* ==========================================================================
   Loader 20: Star Constellation – Logo stars in constellation formation
   ========================================================================== */

.loader-20 {
    background: linear-gradient(160deg, #010A1F 0%, #0A1535 35%, #0D1840 100%) !important;
}

.star-const-shape {
    pointer-events: none;
    z-index: 2;
}

/* ==========================================================================
   Loader 21: Star Bounce – 3 bouncing logo stars
   ========================================================================== */

.loader-21 {
    background:
        radial-gradient(ellipse 50% 45% at 40% 50%, rgba(133, 124, 233, 0.15), transparent 70%),
        radial-gradient(ellipse 40% 50% at 65% 40%, rgba(38, 217, 255, 0.1), transparent 70%),
        linear-gradient(160deg, #0A1535 0%, #111D4A 40%, #0D1840 100%) !important;
    position: relative;
}

.loader-21::before {
    content: '';
    position: absolute;
    inset: -80% -20% -80% -20%;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 30px,
            rgba(10, 33, 91, 0.18) 30px,
            rgba(10, 33, 91, 0.12) 55px,
            transparent 55px,
            transparent 85px,
            rgba(133, 124, 233, 0.15) 85px,
            rgba(133, 124, 233, 0.10) 110px,
            transparent 110px,
            transparent 140px,
            rgba(38, 217, 255, 0.14) 140px,
            rgba(38, 217, 255, 0.09) 165px,
            transparent 165px
        );
    animation: tri-bounce-waves 20s ease-in-out infinite;
    transform-origin: center center;
}

.loader-21::after {
    content: '';
    position: absolute;
    inset: -80% -20% -80% -20%;
    z-index: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 40px,
            rgba(10, 33, 91, 0.15) 40px,
            rgba(10, 33, 91, 0.10) 68px,
            transparent 68px,
            transparent 100px,
            rgba(105, 222, 163, 0.14) 100px,
            rgba(105, 222, 163, 0.09) 128px,
            transparent 128px,
            transparent 160px,
            rgba(39, 144, 255, 0.13) 160px,
            rgba(39, 144, 255, 0.08) 188px,
            transparent 188px
        );
    animation: tri-bounce-waves2 28s ease-in-out infinite;
    transform-origin: center center;
}

.loader-21 .proven-night-sky-container {
    display: none;
}

.star-bounce-item {
    position: absolute;
    transform: translate(-50%, 0);
    transform-origin: center center;
    pointer-events: none;
    z-index: 2;
    animation: star-bounce 1.4s ease-in-out infinite;
    filter: drop-shadow(0 4px 15px rgba(38, 217, 255, 0.25));
}

@keyframes star-bounce {
    0%, 100% {
        transform: translate(-50%, 0) translateY(0);
    }
    15% {
        transform: translate(-50%, 0) translateY(-28px) scale(1.08);
    }
    30% {
        transform: translate(-50%, 0) translateY(0) scale(0.94);
    }
    35% {
        transform: translate(-50%, 0) translateY(0) scale(1);
    }
    40% {
        transform: translate(-50%, 0) translateY(-8px);
    }
    50% {
        transform: translate(-50%, 0) translateY(0);
    }
}