/* Custom Styles */

/* Base overrides */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utilities */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-scrolled {
    background: rgba(5, 5, 16, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

/* Grid Background Pattern */
.grid-bg {
    background-size: 50px 50px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Phone Mockups CSS 3D */
.phones-container {
    perspective: 1000px;
}

.phone-mockup {
    width: 280px;
    height: 560px;
    border-radius: 40px;
    border: 8px solid #1a1a1a;
    background: #000;
    overflow: hidden;
    transform-style: preserve-3d;
    box-shadow:
        0 0 0 2px #333,
        0 20px 50px rgba(0, 0, 0, 0.5);
    /* Modern transform properties for independent interactions */
    translate: 0 0;
    transition: all 0.5s ease;
}

/* Internal Phone UI - Course List Scrollbar */
.phone-scroll::-webkit-scrollbar {
    width: 4px;
}

.phone-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.phone-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.course-item-glass {
    background: rgba(255, 255, 255, 0.08);
    /* Slightly lighter than main glass */
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Floating Animations */
.phone-iphone {
    animation: floating-y 6s ease-in-out infinite;
}

.phone-android {
    width: 260px;
    height: 520px;
    border-radius: 30px;
    animation: floating-y-delayed 7s ease-in-out infinite;
}

@keyframes floating-y {

    0%,
    100% {
        translate: 0 0px;
    }

    50% {
        translate: 0 -20px;
    }
}

@keyframes floating-y-delayed {

    0%,
    100% {
        translate: 0 0px;
    }

    50% {
        translate: 0 -15px;
    }
}

/* Custom Icons handling if needed for BI, but usually text-xl handles it */
.bi {
    vertical-align: -0.125em;
    fill: currentColor;
}


/* Scroll Reveal Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.animate-reveal {
    animation: reveal-load 1s cubic-bezier(0.5, 0, 0, 1) forwards;
}

@keyframes reveal-load {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}