/* ============================================
   DOT MORPHING ANIMATIONS
   ============================================ */

/* Morphing dots - base styles */
.morph-dot {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    opacity: 0;
    z-index: 2;
    will-change: transform, opacity, box-shadow;
    backface-visibility: hidden;
    /* Animation removed - now handled by specific data-index selectors */
    transform: translate(-50%, -50%);
}

/* Color variants for morphing dots */
.morph-dot.primary {
    background: #0064D9;
    box-shadow: 0 0 6px rgba(0, 100, 217, 0.4);
}

.morph-dot.secondary {
    background: #0B2545;
    box-shadow: 0 0 6px rgba(11, 37, 69, 0.4);
}

.morph-dot.accent {
    background: rgba(250, 252, 250, 0.9);
    border: 1px solid #0064D9;
    box-shadow: 0 0 8px rgba(0, 100, 217, 0.3);
}

/* Morphing animation container */
.morph-container {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* ============================================
   DOT SELECTORS & ANIMATIONS
   ============================================ */

/* DOTS 0-22: Core dots that should always be visible during chaos phases */
.morph-dot[data-index="0"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="1"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="2"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="3"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="4"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="5"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="6"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="7"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="8"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="9"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="10"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="11"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="12"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="13"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="14"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="15"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="16"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="17"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="18"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="19"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="20"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="21"] { animation: chaosAnimation 24s ease-in-out infinite !important; }
.morph-dot[data-index="22"] { animation: chaosAnimation 24s ease-in-out infinite !important; }

/* DOT 23: Transparent dot that's still visible but more subtle */
.morph-dot[data-index="23"] {
    animation: chaosAnimationTransparent 24s ease-in-out infinite !important;
    opacity: 0.3 !important;
}

/* Dot 24: Visible during both triangle and square phases */
.morph-dot[data-index="24"] {
    animation: dot24TriangleAndSquare 24s ease-in-out infinite !important;
}

/* Extra dots (25-27): Visible during triangle phase only */
.morph-dot[data-index="25"] {
    animation: triangleDot25to27 24s ease-in-out infinite !important;
}
.morph-dot[data-index="26"] {
    animation: triangleDot25to27 24s ease-in-out infinite !important;
}
.morph-dot[data-index="27"] {
    animation: triangleDot25to27 24s ease-in-out infinite !important;
}

/* Unused dots (28+): Always hidden */
.morph-dot[data-index="28"] {
    opacity: 0 !important;
    animation: none !important;
}

/* Unused dots (29-35): Always hidden since we only need 29 dots max */
.morph-dot[data-index="29"], .morph-dot[data-index="30"], .morph-dot[data-index="31"], .morph-dot[data-index="32"],
.morph-dot[data-index="33"], .morph-dot[data-index="34"], .morph-dot[data-index="35"] {
    opacity: 0 !important;
    animation: none !important;
}

/* Unused dots (36-47): Always hidden */
.morph-dot[data-index="36"], .morph-dot[data-index="37"], .morph-dot[data-index="38"], .morph-dot[data-index="39"],
.morph-dot[data-index="40"], .morph-dot[data-index="41"], .morph-dot[data-index="42"], .morph-dot[data-index="43"],
.morph-dot[data-index="44"], .morph-dot[data-index="45"], .morph-dot[data-index="46"], .morph-dot[data-index="47"] {
    opacity: 0 !important;
    animation: none;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Chaos animation with wider scatter and randomization - 2s per phase (24s total) */
@keyframes chaosAnimation {
    /* Phase 1: Chaos stable (0-8.33%) - 2s with wide scatter */
    0% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    1% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    4.17% {
        left: calc(18% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 2.1) * 27%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 1.5) * 25%);
        transform: translate(-50%, -50%) scale(1.02);
    }

    8.33% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 0.5) * 24%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 2.2) * 29%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 2: Transition to Triangle (8.33-16.67%) - 2s */
    12.5% {
        left: calc(45% + (var(--triangle-x, 0)) * 0.8%);
        top: calc(45% + (var(--triangle-y, 0)) * 0.8%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.02);
    }

    16.67% {
        left: calc(50% + (var(--triangle-x, 0)) * 1%);
        top: calc(50% + (var(--triangle-y, 0)) * 1%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 3: Triangle stable (16.67-25%) - 2s */
    25% {
        left: calc(50% + (var(--triangle-x, 0)) * 1%);
        top: calc(50% + (var(--triangle-y, 0)) * 1%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 4: Transition to Chaos (25-33.33%) - 2s */
    29.17% {
        left: calc(17% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 24%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 26%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.98);
    }

    33.33% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 5: Chaos stable (33.33-41.67%) - 2s */
    37.5% {
        left: calc(18% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 27%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 25%);
        transform: translate(-50%, -50%) scale(1.02);
    }

    41.67% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 6: Transition to Square (41.67-50%) - 2s */
    45.83% {
        left: calc(45% + (var(--square-x, 0)) * 0.8%);
        top: calc(45% + (var(--square-y, 0)) * 0.8%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.02);
    }

    50% {
        left: calc(50% + (var(--square-x, 0)) * 1%);
        top: calc(50% + (var(--square-y, 0)) * 1%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 7: Square stable (50-58.33%) - 2s */
    58.33% {
        left: calc(50% + (var(--square-x, 0)) * 1%);
        top: calc(50% + (var(--square-y, 0)) * 1%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 8: Transition to Chaos (58.33-66.67%) - 2s */
    62.5% {
        left: calc(17% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 24%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 26%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.98);
    }

    66.67% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 9: Chaos stable (66.67-75%) - 2s */
    70.83% {
        left: calc(18% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 27%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 25%);
        transform: translate(-50%, -50%) scale(1.02);
    }

    75% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 10: Transition to Circle (75-83.33%) - 2s */
    79.17% {
        left: calc(50% + (var(--circle-x, 0)) * 0.6vmin);
        top: calc(50% + (var(--circle-y, 0)) * 0.6vmin);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.02);
    }

    83.33% {
        left: calc(50% + (var(--circle-x, 0)) * 0.75vmin);
        top: calc(50% + (var(--circle-y, 0)) * 0.75vmin);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 11: Circle stable (83.33-91.67%) - 2s */
    91.67% {
        left: calc(50% + (var(--circle-x, 0)) * 0.75vmin);
        top: calc(50% + (var(--circle-y, 0)) * 0.75vmin);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 12: Transition back to Chaos (91.67-100%) - 2s */
    95.83% {
        left: calc(17% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 24%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 26%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.98);
    }

    100% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Transparent chaos animation for dot 23 - same positioning but always transparent */
@keyframes chaosAnimationTransparent {
    /* Phase 1: Chaos stable (0-8.33%) - 2s with wide scatter */
    0% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }

    1% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    4.17% {
        left: calc(18% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 2.1) * 27%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 1.5) * 25%);
        transform: translate(-50%, -50%) scale(1.02);
    }

    8.33% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 0.5) * 24%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 2.2) * 29%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 2: Transition to Triangle (8.33-16.67%) - 2s */
    12.5% {
        left: calc(45% + (var(--triangle-x, 0)) * 0.8%);
        top: calc(45% + (var(--triangle-y, 0)) * 0.8%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.02);
    }

    16.67% {
        left: calc(50% + (var(--triangle-x, 0)) * 1%);
        top: calc(50% + (var(--triangle-y, 0)) * 1%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 3: Triangle stable (16.67-25%) - 2s */
    25% {
        left: calc(50% + (var(--triangle-x, 0)) * 1%);
        top: calc(50% + (var(--triangle-y, 0)) * 1%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 4: Transition to Chaos (25-33.33%) - 2s */
    29.17% {
        left: calc(17% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 24%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 26%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.98);
    }

    33.33% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 5: Chaos stable (33.33-41.67%) - 2s */
    37.5% {
        left: calc(18% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 27%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 25%);
        transform: translate(-50%, -50%) scale(1.02);
    }

    41.67% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 6: Transition to Square (41.67-50%) - 2s */
    45.83% {
        left: calc(45% + (var(--square-x, 0)) * 0.8%);
        top: calc(45% + (var(--square-y, 0)) * 0.8%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.02);
    }

    50% {
        left: calc(50% + (var(--square-x, 0)) * 1%);
        top: calc(50% + (var(--square-y, 0)) * 1%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 7: Square stable (50-58.33%) - 2s */
    58.33% {
        left: calc(50% + (var(--square-x, 0)) * 1%);
        top: calc(50% + (var(--square-y, 0)) * 1%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 8: Transition to Chaos (58.33-66.67%) - 2s */
    62.5% {
        left: calc(17% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 24%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 26%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.98);
    }

    66.67% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 9: Chaos stable (66.67-75%) - 2s */
    70.83% {
        left: calc(18% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 27%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 25%);
        transform: translate(-50%, -50%) scale(1.02);
    }

    75% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 10: Transition to Circle (75-83.33%) - 2s */
    79.17% {
        left: calc(50% + (var(--circle-x, 0)) * 0.6vmin);
        top: calc(50% + (var(--circle-y, 0)) * 0.6vmin);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1.02);
    }

    83.33% {
        left: calc(50% + (var(--circle-x, 0)) * 0.75vmin);
        top: calc(50% + (var(--circle-y, 0)) * 0.75vmin);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 11: Circle stable (83.33-91.67%) - 2s */
    91.67% {
        left: calc(50% + (var(--circle-x, 0)) * 0.75vmin);
        top: calc(50% + (var(--circle-y, 0)) * 0.75vmin);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Phase 12: Transition back to Chaos (91.67-100%) - 2s */
    95.83% {
        left: calc(17% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 24%);
        top: calc(22% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 26%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.98);
    }

    100% {
        left: calc(15% + (var(--index) * 3.2%) + sin(var(--index) * 0.7 + 1.2) * 25%);
        top: calc(20% + (var(--index) * 3.4%) + cos(var(--index) * 0.9 + 0.8) * 28%);
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Dot 24: Visible during both triangle and square phases - 24s timing */
@keyframes dot24TriangleAndSquare {
    /* Hidden during chaos */
    0%, 8.33% { opacity: 0; }

    /* Triangle phase (8.33-25%) */
    12.5% {
        left: calc(45% + (var(--triangle-x, 0)) * 0.8%);
        top: calc(45% + (var(--triangle-y, 0)) * 0.8%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.02);
    }
    16.67%, 25% {
        left: calc(50% + (var(--triangle-x, 0)) * 1%);
        top: calc(50% + (var(--triangle-y, 0)) * 1%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Hidden during chaos */
    29.17%, 41.67% { opacity: 0; }

    /* Square phase (41.67-58.33%) */
    45.83% {
        left: calc(45% + (var(--square-x, 0)) * 0.8%);
        top: calc(45% + (var(--square-y, 0)) * 0.8%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.02);
    }
    50%, 58.33% {
        left: calc(50% + (var(--square-x, 0)) * 1%);
        top: calc(50% + (var(--square-y, 0)) * 1%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Hidden during remaining phases */
    62.5%, 100% { opacity: 0; }
}

/* Dots 25-27: Visible during triangle phase only - 24s timing */
@keyframes triangleDot25to27 {
    /* Hidden during chaos */
    0%, 8.33% { opacity: 0; }

    /* Triangle phase (8.33-25%) */
    12.5% {
        left: calc(45% + (var(--triangle-x, 0)) * 0.8%);
        top: calc(45% + (var(--triangle-y, 0)) * 0.8%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.02);
    }
    16.67%, 25% {
        left: calc(50% + (var(--triangle-x, 0)) * 1%);
        top: calc(50% + (var(--triangle-y, 0)) * 1%);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    /* Hidden during all other phases */
    29.17%, 100% { opacity: 0; }
}

/* ============================================
   GLOW EFFECTS
   ============================================ */

@keyframes primaryGlow {
    0%, 15% {
        box-shadow: 0 0 2px rgba(0, 100, 217, 0.2);
    }
    45%, 65% {
        box-shadow: 0 0 8px rgba(0, 100, 217, 0.6);
    }
    85%, 100% {
        box-shadow: 0 0 2px rgba(0, 100, 217, 0.2);
    }
}

@keyframes secondaryGlow {
    0%, 25% {
        box-shadow: 0 0 2px rgba(11, 37, 69, 0.2);
    }
    55%, 75% {
        box-shadow: 0 0 8px rgba(11, 37, 69, 0.6);
    }
    90%, 100% {
        box-shadow: 0 0 2px rgba(11, 37, 69, 0.2);
    }
}

@keyframes accentGlow {
    0%, 35% {
        box-shadow: 0 0 2px rgba(0, 100, 217, 0.2);
    }
    65%, 85% {
        box-shadow: 0 0 10px rgba(0, 100, 217, 0.8);
    }
    95%, 100% {
        box-shadow: 0 0 2px rgba(0, 100, 217, 0.2);
    }
}