/* =========================================================
   PEWJAY OFFICIAL
   HOME.CSS
   Home Page / Hero / Portfolio
   Night Blue Glow Theme
   ========================================================= */


/* =========================================================
   1. HERO SECTION
   ========================================================= */

.hero-section {
    position: relative;

    min-height: 100vh;

    width: 100%;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image:
        url("../images/hero/hero-bg.jpg");

    background-size: cover;

    background-position:
        center center;

    background-repeat: no-repeat;
}


/* =========================================================
   2. HERO NIGHT OVERLAY
   ========================================================= */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(2, 8, 20, 0.96) 0%,
            rgba(2, 12, 28, 0.82) 35%,
            rgba(2, 10, 24, 0.48) 65%,
            rgba(2, 7, 17, 0.76) 100%
        ),

        linear-gradient(
            180deg,
            rgba(1, 7, 18, 0.50),
            rgba(1, 8, 20, 0.35) 50%,
            rgba(1, 6, 15, 0.90)
        );
}


/* =========================================================
   3. BLUE ATMOSPHERIC LIGHT
   ========================================================= */

.hero-section::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: 5%;
    right: -180px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(20, 140, 255, 0.22) 0%,
            rgba(10, 80, 170, 0.10) 35%,
            transparent 70%
        );

    filter:
        blur(20px);

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   4. HERO BLUE LIGHT LINE
   ========================================================= */

.hero-section::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 180px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(3, 15, 32, 0.85)
        );

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   5. HERO CONTENT
   ========================================================= */

.hero-content {
    position: relative;

    z-index: 5;

    width: 100%;

    max-width: 1400px;

    margin:
        0 auto;

    padding:
        100px 75px 60px;
}


/* =========================================================
   6. HERO TEXT
   ========================================================= */

.hero-text {
    max-width:
        800px;
}


/* LABEL */

.hero-label {
    display: inline-block;

    margin-bottom: 18px;

    color:
        var(--blue-light);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 3px;

    text-transform:
        uppercase;

    text-shadow:
        0 0 12px
        rgba(50, 170, 255, 0.35);
}


/* =========================================================
   7. HERO TITLE
   ========================================================= */

.hero-text h1 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size:
        clamp(50px, 6vw, 78px);

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: 2px;

    text-transform:
        uppercase;

    text-shadow:
        0 0 15px
        rgba(0, 130, 255, 0.18),

        0 5px 30px
        rgba(0, 0, 0, 0.60);
}


/* =========================================================
   8. HERO SUBTITLE
   ========================================================= */

.hero-subtitle {
    max-width:
        700px;

    margin-bottom:
        32px;

    color:
        rgba(220, 239, 255, 0.88);

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.9;

    letter-spacing:
        1.3px;
}


/* =========================================================
   9. HERO BUTTONS
   ========================================================= */

.hero-buttons {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        45px;
}


/* =========================================================
   10. HERO STATS
   ========================================================= */

.hero-stats {
    display:
        flex;

    align-items:
        center;

    gap:
        35px;
}


/* STAT ITEM */

.stat-item {
    position:
        relative;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    padding-right:
        35px;
}


/* SEPARATOR */

.stat-item:not(:last-child)::after {
    content:
        "";

    position:
        absolute;

    top:
        3px;

    right:
        0;

    width:
        1px;

    height:
        42px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(90, 180, 255, 0.55),
            transparent
        );
}


/* NUMBER */

.stat-item strong {
    color:
        #ffffff;

    font-size:
        30px;

    font-weight:
        900;

    line-height:
        1;
}


/* LABEL */

.stat-item span {
    color:
        var(--text-secondary);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        1.3px;
}


/* =========================================================
   11. PORTFOLIO SECTION BACKGROUND
   ========================================================= */

.portfolio-section {
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(10, 80, 150, 0.08),
            transparent 45%
        );
}


/* =========================================================
   12. ALTERNATING SECTION LIGHT
   ========================================================= */

.portfolio-section:nth-of-type(even) {
    background:
        linear-gradient(
            180deg,
            rgba(3, 15, 30, 0.30),
            rgba(2, 8, 18, 0.08)
        );
}


/* =========================================================
   13. SECTION NUMBER
   ========================================================= */

.section-number {
    position:
        relative;

    padding-left:
        35px;

    padding-right:
        35px;
}


/* LEFT LINE */

.section-number::before {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        25px;

    height:
        1px;

    background:
        var(--blue-main);

    box-shadow:
        0 0 8px
        rgba(20, 140, 255, 0.55);
}


/* RIGHT LINE */

.section-number::after {
    content:
        "";

    position:
        absolute;

    top:
        50%;

    right:
        0;

    width:
        25px;

    height:
        1px;

    background:
        var(--blue-main);

    box-shadow:
        0 0 8px
        rgba(20, 140, 255, 0.55);
}


/* =========================================================
   14. PLAYLIST FRAME
   ========================================================= */

.playlist {
    position:
        relative;

    background:
        rgba(2, 12, 25, 0.35);

    border:
        1px solid
        rgba(55, 160, 255, 0.10);

    padding:
        8px;

    box-shadow:
        inset 0 0 25px
        rgba(0, 100, 200, 0.05);
}


/* =========================================================
   15. PLAYLIST IMAGE
   ========================================================= */

.playlist-track img {
    position:
        relative;

    cursor:
        pointer;

    background:
        #06182d;
}


/* =========================================================
   16. PLAYLIST IMAGE SHINE
   ========================================================= */

.playlist-track img::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            transparent 30%,
            rgba(120, 210, 255, 0.12),
            transparent 70%
        );

    pointer-events:
        none;
}


/* =========================================================
   17. SLIDER ARROWS
   ========================================================= */

.slider-arrow {
    position:
        relative;

    flex-shrink:
        0;
}

.slider-arrow i {
    transition:
        transform 0.3s ease;
}

.slider-prev:hover i {
    transform:
        translateX(-3px);
}

.slider-next:hover i {
    transform:
        translateX(3px);
}


/* =========================================================
   18. ANIMATION SECTION
   ========================================================= */

.animation-section {
    padding-bottom:
        130px;
}


/* =========================================================
   19. ANIMATION CARD BLUE EDGE
   ========================================================= */

.animation-card {
    position:
        relative;
}

.animation-card::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        15%;

    right:
        15%;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(70, 180, 255, 0.70),
            transparent
        );

    opacity:
        0.5;

    transition:
        opacity 0.3s ease;
}

.animation-card:hover::before {
    opacity:
        1;

    box-shadow:
        0 0 12px
        rgba(40, 160, 255, 0.65);
}


/* =========================================================
   20. ANIMATION CARD CONTENT
   ========================================================= */

.animation-card-content h3 {
    color:
        #ffffff;

    text-shadow:
        0 0 8px
        rgba(30, 150, 255, 0.18);
}


/* =========================================================
   21. MOBILE HERO
   ========================================================= */

@media (max-width: 767px) {

    .hero-section {
        min-height:
            720px;

        background-position:
            60% center;
    }

    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2, 8, 20, 0.94),
                rgba(2, 10, 24, 0.70)
            ),

            linear-gradient(
                180deg,
                rgba(1, 7, 18, 0.45),
                rgba(1, 6, 15, 0.92)
            );
    }

    .hero-content {
        padding:
            100px 25px 60px;
    }

    .hero-text {
        max-width:
            100%;
    }

    .hero-label {
        margin-bottom:
            14px;
    }

    .hero-text h1 {
        letter-spacing:
            1px;
    }

    .hero-subtitle {
        margin-bottom:
            25px;
    }

    .hero-buttons {
        margin-bottom:
            32px;
    }

    .hero-stats {
        align-items:
            flex-start;
    }

    .stat-item {
        padding-right:
            18px;
    }

    .stat-item:not(:last-child)::after {
        height:
            35px;
    }

}


/* =========================================================
   22. SMALL MOBILE
   ========================================================= */

@media (max-width: 575px) {

    .hero-section {
        min-height:
            680px;

        background-position:
            62% center;
    }

    .hero-content {
        padding:
            100px 20px 45px;
    }

    .hero-label {
        letter-spacing:
            1.3px;
    }

    .hero-text h1 {
        line-height:
            1;
    }

    .hero-subtitle {
        letter-spacing:
            0.8px;
    }

    .hero-stats {
        gap:
            12px;
    }

    .stat-item {
        padding-right:
            12px;
    }

    .stat-item strong {
        font-size:
            22px;
    }

    .section-number {
        padding-left:
            27px;

        padding-right:
            27px;
    }

    .section-number::before,
    .section-number::after {
        width:
            19px;
    }

}


/* =========================================================
   23. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 399px) {

    .hero-section {
        min-height:
            650px;
    }

    .hero-content {
        padding:
            95px 16px 40px;
    }

    .hero-label {
        font-size:
            8px;
    }

    .hero-subtitle {
        font-size:
            8px;

        line-height:
            1.7;
    }

    .hero-stats {
        gap:
            6px;
    }

    .stat-item {
        padding-right:
            7px;
    }

    .stat-item strong {
        font-size:
            19px;
    }

    .stat-item span {
        font-size:
            6px;
    }

}