@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Orbitron:wght@500;700&display=swap');

body { 
    background: linear-gradient(135deg, #05050f, #0f0f1f, #1a1a2e); 
    color: #e0f2fe; 
    font-family: 'Exo 2', sans-serif;
    overflow-x: hidden; 
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cosmic-bg { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: linear-gradient(
125deg,
#000,
#fca5a5 45%,
#ffffff 100%
);
    z-index: -1; 
    animation: nebula 35s infinite alternate ease-in-out; 
}
@keyframes nebula { 
    0% { opacity: 0.92; } 
    100% { opacity: 1; } 
}
h1 {font-family: 'Exo 2', sans-serif; color: #ffffff; }




.phenonics-logo {
    position: absolute;
    left: 0;
    bottom: -175px;
    width: 100%;
    height: 100px;
    pointer-events: none;
    z-index: 1;
}

.phenonics-logo img {
    position: absolute;
    width: 250px;
    height: auto;
    left: 0;
    bottom: 0;
    display: block;
    opacity: 1;
    animation: 
        sharkSwim 24s linear infinite 0.8s;
}



@keyframes sharkSwim {

    0% {
        opacity: 1;
        transform: translateX(100vw) translateY(15px) rotate(3deg);
    }

    10% {
        opacity: 1;
        transform: translateX(80vw) translateY(-3px) rotate(-1deg);
    }

    20% {
        opacity: 1;
        transform: translateX(60vw) translateY(8px) rotate(4deg);
    }

    30% {
        opacity: 1;
        transform: translateX(40vw) translateY(-4px) rotate(-3deg);
    }

    40% {
        opacity: 1;
        transform: translateX(20vw) translateY(0px) rotate(5deg);
    }

    50% {
        opacity: 1;
        transform: translateX(0vw) translateY(-5px) rotate(-3deg);
    }

    60% {
        opacity: 1;
        transform: translateX(-20vw) translateY(4px) rotate(5deg);
    }

    70% {
        opacity: 1;
        transform: translateX(-40vw) translateY(-2px) rotate(-2deg);
    }

    80% {
        opacity: 1;
        transform: translateX(-60vw) translateY(3px) rotate(3deg);
    }

    90% {
        opacity: 1;
        transform: translateX(-85vw) translateY(-4px) rotate(-1deg);
    }

    95% {
        opacity: 1;
        transform: translateX(-95vw) translate(20px) rotate(-1deg);
    }

    100% {
        opacity: 1;
        transform: translateX(-100vw) translateY(3px) rotate(3deg);
    }
}

body.subject-active.sidebar-open #phenonics-title {
    left: 300px;
}

body.subject-active #phenonics-title {
    opacity: 1;
    top: 20px;
    left: 100px;

    transform: translate(0,0);
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 2px;
}

.phenonics-credit {
    align-items: center;
    color: rgba(255,255,255,1);
    font-size: 0.91rem;
    font-weight: 300;
    letter-spacing: 1.2px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);

     transition: 
        top 0.25s ease,
        left 0.25s ease,
        transform 0.25s ease,
        font-size 0.25s ease,
        letter-spacing 0.25s ease,
        opacity 0.35s ease;
       
}

.ui-section.phenonics-home {
    width: 100%;
    max-width: 1200px;
    margin-top: 30px;
    background: rgba(255,255,255,0.72);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 20px;

    padding: 40px;
    border: 4px solid #69FAAD;
    border-radius: 50px;

    box-shadow: 0 0 15px rgba(0,0,0,0.81);

    backdrop-filter: blur(10px);

}

.home-game-label, .home-tool-label {
    color: black;
    text-shadow: 0 0 4px rgba(255,255,255,0.54);
    font-size: 20px;
    font-weight: 300;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
    margin-top: 20px;

}

.home-subjects-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-courses-subject-hub-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.subject-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

#subject-carousel-track {
    display: flex;
    justify-content: center;
    gap: 50px;

    min-width: 500px;
}

.subject-panel.featured-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 25px;
    margin-bottom: 15px;

    border-radius: 28px;

    background: rgba(255,255,255,0.81);

    border: 4px solid rgba(105,250,173,0.9);

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 20px rgba(0,0,0,0.5);
}

.subject-panel.featured-panel::before {
    content: "";
    position: relative;
    inset: 0;
    border-radius: 32px;
    box-shadow:
        inset 0 0 40px rgba(105, 250, 173, 0.08);
    pointer-events: none;
}

.home-subject-label {
    margin-top: 30px;
    font-size: 1.1rem;
    font-weight: 450;
    color: black;
    text-shadow: 0 0 3px rgba(255,255,255,0.66);
}

.top-colored-container {
    position: relative;
    overflow: hidden;
    width: 120%;
    max-width: 2200px;
    height: 190px;
    margin-top: -50px;
    border: 6px solid rgba(105,250,173,0.9);
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 12px rgba(0,0,0,0.55);
    z-index: 1;

}

.phenonics-header {
    position: relative;
    text-align: center;
    margin-top: 30px;
    z-index: 2;
}


.phenonics-title {
    position: relative;
    z-index: 3;
    margin-bottom: -40px;
    margin-top: 10px;
    font-size: 72px;
    font-weight: 550;
    color: #69FAAD;
    text-shadow:
        0 0 3px rgba(0,0,0,0.57);
   
}

.phenonics-divider.top-title-divider {
    width: 420px;
    border-radius: 999px;
    background: #fca5a5;

    opacity: 1;
    
    height: 3px;
    align-items: center;
    justify-content: center;
    transform: translate(160%, 755%);
    z-index: 3;

}

.phenonics-subtitle {
    position: relative;
    z-index: 3;
    margin-top: 25px;
    padding-bottom: 20px;
    font-weight: 400;
    font-size: 24px;
    color: rgba(0,0,0,1);
    text-shadow: 0 0 30px white;
    letter-spacing: 1px;
}

.phenonics-divider {
    width: 400px;
    border-radius: 999px;
    background:
        linear-gradient(
            rgba(255,255,255,0),
            rgba(255,255,255,0.95),
            rgba(255,255,255,0)
        );

        opacity: 0.9;
    
    height: 2px;
}

.homepage-showcase {
    display: flex;
    max-width: 300px;
    
}


.homepage-showcase-row {
    display: flex;
    align-items: stretch;
    gap: 30px;
    flex-wrap: nowrap;
    transform: translateX(10%);

}

.phenonics-divider.home-subjects-divider {
    justify-content: center;
    width: 450px;
    border-radius: 999px;
    background: white;

        opacity: 1;
    
    height: 3px;
    align-items: center;
}

.home-hero-top {
    width: 1200;
    display: flex;
    flex-direction: row;
    align-items: center;

}

.home-hero-top-left {
    width: 530px;
    display: flex;
    transform: translateX(-20%);
  
}

.home-hero-container {
    background: rgba(105, 250, 173, 0.81);
    box-shadow: 0 0 18px rgba(0, 0, 0, 0.5);
    width: 500px;
    height: 500px;
    border: 4px solid white;
    border-radius: 30px;
    padding: 40px 20px;
    margin-top: 60px;
    align-items: center;
}

.home-hero {
    /* background: rgba(105,250,173,0.81); */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 50px;
    width: 100%;
    max-width: 1000px;
    margin-top: 40px;
    /* border: 3px solid white;
    border-radius: 30px; */

    
}

.home-hero-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-hero-right {
    padding: 45px 45px;
    border: 4px solid white;
    background:rgba(0, 0, 0, 0.81);

    border-radius: 20px;
    flex: 1;
    max-width: 500px;
    transform: translateX(20%);
}

.hero-section-title {
    font-size: 60px;
    font-weight: 200px;
    color: white;
    text-shadow: 0 0 4px rgba(0,0,0,0.65);
    margin-bottom: 5px;
    letter-spacing: 1.2px;
}

.hero-info-title {
    font-size: 2.3rem;
    font-weight: 500px;
    color: white;
    text-shadow: 0 0 3px rgba(0,0,0,0.81);
}

.hero-info-text {
    margin-top: 10px;
    color: white;
    text-shadow: 0 0 4px rgba(0,0,0,0.5);
    font-size: 1.4rem;
    font-weight: 300;
}


.home-quote {
    border-radius: none;
    margin-top: 50px;
    border: 4px solid #69FAAD;
    background: rgba(0,0,0,1);
    padding-top: 40px;
    padding-right: 30px;
    width: 1800px;
    height: 130px;
    font-size: 25px;
    font-weight: 300;
    font-style: italic;
    text-align: center;
    align-items: center;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 0 4px rgba(0,0,0,0.6);
    z-index: 10;
}

.start-exploring-container{
    width: 120%;
    max-width: 1800px;
    height: 300px;
    background: rgba(255,255,255,0.9);
    border-bottom: 6px solid #69FAAD;
    margin-top: -40px;
    margin-bottom: -40px;
    text-align: center;
   
}

.start-course-text {
    font-size: 100px;
    color: #69FAAD;
    font-weight: 600;
    text-shadow: 
        0 0 3px rgba(0,0,0,0.55),
        0 4px 0 rgba(0,0,0,0.55);
    text-align: center;
    margin-top: -10px;
    

    
}

.explore-course-text {
    font-size: 120px;
    letter-spacing: 2.2px;
    color: #fca5a5;
    font-weight: 575;
    text-shadow: 
        0 0 3px rgba(0,0,0,0.55),
        0 6px 0 rgba(0,0,0,0.55);
    margin-top: -30px;
    
}

.coming-soon-container {
    width: 600px;
    height: 200px;
    align-items: flex-start;
    text-align: center;

}

.coming-soon-label {
    color: white;
    font-size: 30px;
    font-weight: 350px;
    text-shadow: 0 0 4px rgba(0,0,0,0.55);
}

.phenonics-divider.hang-tight-divider{

    justify-content: center;
    width: 465px;
    border-radius: 999px;
    background: white;

    opacity: 0.72;
    
    height: 3px;
    align-items: center;
    transform: translateX(15%);
}


.featured-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 30px;
    border-radius: 24px;
    background: rgba(255,255,255,0.8);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.featured-card:hover {
    transform: translateY(-4px);
}

.featured-icon {
    font-size: 3rem;
}

.featured-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: black;
}

.section-title.home-category-title {
    font-size: 24px;
    color: black;
    font-weight: 550;
    text-align: center;
    text-shadow: 0 0 6px rgba(255,255,255,0.66);
    margin-bottom: 10px;
}

.phenonics-divider.home-category-divider {
    width: 180px;
    margin-bottom: 10px;
    border-radius: 999px;
    background: #fca5a5;

        opacity: 1;
    
    height: 3px;
}


.home-course-subject-circle {
    width: 200px;
    height: 200px;

    border-radius: 60%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255,255,255,1); 
    
    border: 3px solid #fca5a5;
    box-shadow:
        0 0 8px rgba(252, 165, 165, 0.81),
        0 0 12px rgba(252, 165, 165, 0.66);

    font-size: 2.5rem;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: 30px;
}

.home-course-subject-circle:hover {
    background: rgba(252, 165, 165, 0.9);
    transform: translateY(-8px) scale(1.081);
    border-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.65);
}

  
.phenonics-subject {
    padding: 16px 18px;

    border-radius: 18px;

    background: rgba(255,255,255,0.9);

    color: rgba(0,0,0,0.82);

    font-size: 18px;
    font-weight: 500;

    cursor: pointer;

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.phenonics-subject:hover {
    transform: translateX(4px);

    background: rgba(255,255,255,0.9);
    opacity: 0.8;
    box-shadow:
        0 0 16px rgba(255,255,255,0.18);
    border: 2px solid #fca5a5;
}