/**
 * RESPONSIVE TRIANGLE LOGO - Tablet & Mobile Optimizations
 * Scales down the animated triangle logo for smaller screens
 */

/* ===== TABLET VIEW (768px - 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {

    /* Container adjustments */
    .elite-logo-link {
        min-width: 7.5rem;
        min-height: 7.5rem;
        padding: 0.875rem;
    }

    /* Triangle sizing - 85% of desktop */
    .elite-logo-link::before {
        width: 5.5rem;
        height: 5.5rem;
    }

    /* Text scaling - MATCHING DESKTOP FONT */
    .elite-logo {
        font-family: 'Orbitron', 'Exo 2', 'Rajdhani', 'Arial Black', sans-serif;
        font-size: 1.6rem;
        /* 25.6px - increased for better visibility */
        font-weight: 900;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-top: 0.4rem;
    }

    /* Hover effects - slightly reduced */
    .elite-logo-link:hover .elite-logo {
        transform: scale(1.12);
    }

    .elite-logo-link:hover::before {
        transform: translate(-50%, -50%) scale(1.08);
    }

    /* Rotation animation - same speed, smaller scale */
    @keyframes prismRotate {

        0%,
        100% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1.05);
        }

        50% {
            transform: translate(-50%, -50%) rotate(180deg) scale(1.07);
        }
    }
}

/* ===== MOBILE VIEW (481px - 768px) ===== */
@media (min-width: 481px) and (max-width: 768px) {

    /* Container adjustments - 75% of desktop */
    .elite-logo-link {
        min-width: 6rem;
        min-height: 6rem;
        padding: 0.625rem;
    }

    /* Triangle sizing - 75% of desktop */
    .elite-logo-link::before {
        width: 4.5rem;
        height: 4.5rem;
    }

    /* Text scaling - MATCHING DESKTOP FONT */
    .elite-logo {
        font-family: 'Orbitron', 'Exo 2', 'Rajdhani', 'Arial Black', sans-serif;
        font-size: 1.2rem;
        /* 19.2px - increased for better visibility */
        font-weight: 900;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-top: 0.3rem;
    }

    /* Hover effects - more subtle on mobile */
    .elite-logo-link:hover .elite-logo {
        transform: scale(1.08);
    }

    .elite-logo-link:hover::before {
        transform: translate(-50%, -50%) scale(1.06);
    }

    /* Reduced glow for performance */
    .elite-logo-link::before {
        filter: drop-shadow(0 3px 12px rgba(102, 126, 234, 0.5)) drop-shadow(0 4px 16px rgba(79, 95, 198, 0.4)) drop-shadow(0 0 28px rgba(79, 207, 254, 0.3));
    }

    .elite-logo {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5),
            0 0 20px rgba(255, 255, 255, 0.6),
            0 0 35px rgba(255, 255, 255, 0.4),
            0 0 50px rgba(102, 126, 234, 0.3);
    }

    /* Rotation animation - slightly faster for mobile */
    @keyframes prismRotate {

        0%,
        100% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1.04);
        }

        50% {
            transform: translate(-50%, -50%) rotate(180deg) scale(1.06);
        }
    }
}

/* ===== SMALL MOBILE (< 480px) ===== */
@media (max-width: 480px) {

    /* Container adjustments - 65% of desktop */
    .elite-logo-link {
        min-width: 5rem;
        min-height: 5rem;
        padding: 0.5rem;
    }

    /* Triangle sizing - 65% of desktop */
    .elite-logo-link::before {
        width: 3.75rem;
        height: 3.75rem;
    }

    /* Text scaling - MATCHING DESKTOP FONT */
    .elite-logo {
        font-family: 'Orbitron', 'Exo 2', 'Rajdhani', 'Arial Black', sans-serif;
        font-size: 1rem;
        /* 16px - increased for better visibility */
        font-weight: 900;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-top: 0.25rem;
    }

    /* Minimal hover effects for small screens */
    .elite-logo-link:hover .elite-logo {
        transform: scale(1.05);
    }

    .elite-logo-link:hover::before {
        transform: translate(-50%, -50%) scale(1.04);
    }

    /* Further reduced glow for best performance */
    .elite-logo-link::before {
        filter: drop-shadow(0 2px 8px rgba(102, 126, 234, 0.4)) drop-shadow(0 3px 12px rgba(79, 95, 198, 0.3)) drop-shadow(0 0 20px rgba(79, 207, 254, 0.2));
    }

    .elite-logo {
        text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4),
            0 0 15px rgba(255, 255, 255, 0.5),
            0 0 25px rgba(255, 255, 255, 0.3),
            0 0 35px rgba(102, 126, 234, 0.2);
    }

    /* Rotation animation - even faster for small screens */
    @keyframes prismRotate {

        0%,
        100% {
            transform: translate(-50%, -50%) rotate(0deg) scale(1.03);
        }

        50% {
            transform: translate(-50%, -50%) rotate(180deg) scale(1.05);
        }
    }
}

/* ===== EXTRA SMALL MOBILE (< 360px) ===== */
@media (max-width: 360px) {

    /* Compact for very small screens */
    .elite-logo-link {
        min-width: 4.25rem;
        min-height: 4.25rem;
        padding: 0.375rem;
    }

    .elite-logo-link::before {
        width: 3rem;
        height: 3rem;
    }

    /* Text scaling - MATCHING DESKTOP FONT */
    .elite-logo {
        font-family: 'Orbitron', 'Exo 2', 'Rajdhani', 'Arial Black', sans-serif;
        font-size: 0.85rem;
        /* 13.6px - increased for better visibility */
        font-weight: 900;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        margin-top: 0.2rem;
    }

    /* Minimal effects */
    .elite-logo-link:hover .elite-logo,
    .elite-logo-link:hover::before {
        transform: scale(1.02);
    }

    .elite-logo-link::before {
        filter: drop-shadow(0 2px 6px rgba(102, 126, 234, 0.3)) drop-shadow(0 0 15px rgba(79, 207, 254, 0.2));
    }

    .elite-logo {
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
            0 0 12px rgba(255, 255, 255, 0.4),
            0 0 20px rgba(102, 126, 234, 0.2);
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Reduce animation complexity on mobile */
@media (max-width: 768px) {
    /* Pause animations if battery saver is enabled */
    @media (prefers-reduced-motion: reduce) {
        .elite-logo-link::before {
            animation: none;
        }
    }

    /* Simplify rotation animation for low-end devices */
    @supports not (backdrop-filter: blur(1px)) {
        @keyframes prismRotate {

            0%,
            100% {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            50% {
                transform: translate(-50%, -50%) rotate(180deg);
            }
        }
    }
}

/* ===== LANDSCAPE MOBILE ADJUSTMENTS ===== */
@media (max-width: 768px) and (orientation: landscape) {

    /* Slightly smaller in landscape to save vertical space */
    .elite-logo-link {
        min-width: 3.5rem;
        min-height: 3.5rem;
    }

    .elite-logo-link::before {
        width: 2.8rem;
        height: 2.8rem;
    }

    /* Text scaling - MATCHING DESKTOP FONT */
    .elite-logo {
        font-family: 'Orbitron', 'Exo 2', 'Rajdhani', 'Arial Black', sans-serif;
        font-size: 0.7rem;
        font-weight: 900;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }
}

/* ===== ACCESSIBILITY ===== */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .elite-logo-link::before {
        animation: none;
        transform: translate(-50%, -50%);
    }

    .elite-logo,
    .elite-logo-link:hover .elite-logo,
    .elite-logo-link:hover::before {
        transition: none;
        transform: translate(-50%, -50%);
    }
}

/* High contrast mode - ensure visibility */
@media (prefers-contrast: high) {
    .elite-logo {
        color: white;
        -webkit-text-fill-color: white;
    }

    .elite-logo-link::before {
        opacity: 0.9;
    }
}

/* Dark mode specific mobile adjustments */
@media (max-width: 768px) {

    .dark .elite-logo,
    html.dark .elite-logo {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4),
            0 0 20px rgba(255, 255, 255, 0.5),
            0 0 30px rgba(129, 140, 248, 0.3);
    }

    .dark .elite-logo-link:hover .elite-logo,
    html.dark .elite-logo-link:hover .elite-logo {
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5),
            0 0 25px rgba(255, 255, 255, 0.7),
            0 0 35px rgba(129, 140, 248, 0.4);
    }
}