/*google font & reset*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:white;
    overflow-x:hidden;

    display:flex;
    justify-content:center;
}

/*sa container*/

.container{
    width:min(1400px,95%);
    min-height:900px;

    margin:40px auto;
    padding:70px 70px 60px;

    position:relative;
    overflow:hidden;

    border-radius:24px;

    background:
    radial-gradient(circle at 70% 35%,rgba(215,255,39,.08),transparent 38%),
    linear-gradient(145deg,#0d1117,#121822,#090c11);

    border:1px solid rgba(255,255,255,.08);
}

/* BLUR GLOW*/

.blur{
    position: fixed;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(180px);
    opacity: .12;

    pointer-events: none;
    z-index: -1;
}

.blur1{

    background:#d7ff27;

    top:180px;
    right:430px;

    animation:pulse 7s infinite ease-in-out;
}

.blur2{

    background:#ffffff;

    bottom:80px;
    right:250px;

    animation:pulse 9s infinite ease-in-out;

}

@keyframes pulse{

    50%{

        transform:scale(1.25);

    }

}



/* === HERO === */

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:80px;

    min-height:760px;

    transition:
        opacity .6s ease,
        transform .6s ease;
}

/* === LEFT ==== */

.left{

    width:52%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    z-index:2;
}

.left h1{

    font-size:clamp(38px,6vw,68px);

    line-height:1.08;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:35px;
}

.left span{

    color:#D8FF29;

}

.left h1::after{

    content:"";

    display:block;

    width:330px;

    height:2px;

    background:#D8FF29;

    margin-top:30px;

    box-shadow:0 0 15px #D8FF29;

}

.left p{

    width:100%;
    max-width:560px;

    color:#A6A6A6;

    font-size:17px;

    line-height:1.9;

    margin:35px 0 45px;
}

/* === BUTTONS ==== */

.buttons{

    display:flex;

    gap:22px;

    margin-top:10px;
}

button{

    border:none;

    cursor:pointer;

    transition:.35s;

}

.secondary{

    background:transparent;

    border:1px solid rgba(255,255,255,.28);

    color:white;

    padding:18px 38px;

    border-radius:50px;

    font-size:18px;
}

.secondary:hover{

    border-color:#d7ff27;

    color:#d7ff27;

}

/* === RIGHT SIDE === */

.right{

    width:48%;

    display:flex;

    justify-content:center;

    align-items:center;
}


/* === GRID or pictures nato sa hero section === */

.gallery{

    display:grid;

    grid-template-columns:repeat(3,160px);

    gap:22px;

    justify-content:center;

    align-items:start;
}

/* === CARD kadtong ovals=== */

.img-card{

    width:160px;
    height:230px;

    border-radius:85px;

    overflow:hidden;

    border:1px solid #D8FF29;

    background:#111;

    opacity:0;
    transform:translateY(50px);

}

.img-card.animate{
    animation:
        fadeUp .8s forwards,
        floating 6s ease-in-out infinite;
}

.img-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.img-card:hover{

    transform:translateY(-8px) scale(1.03);

    box-shadow:0 20px 45px rgba(215,255,39,.28);

}

/* === STAGGER EFFECT === */

.img-card.animate:nth-child(1){
    animation-delay:.1s, .9s;
}

.img-card.animate:nth-child(2){
    animation-delay:.2s, 1s;
    margin-top:-10px;
}

.img-card.animate:nth-child(3){
    animation-delay:.3s, 1.1s;
}

.img-card.animate:nth-child(4){
    animation-delay:.4s, 1.2s;
    margin-top:20px;
}

.img-card.animate:nth-child(5){
    animation-delay:.5s, 1.3s;
}

.img-card.animate:nth-child(6){
    animation-delay:.6s, 1.4s;
    margin-top:20px;
}

.img-card.animate:nth-child(7){
    animation-delay:.7s, 1.5s;
    grid-column:2;
    margin-top:5px;
}


/* ===== ANIMATIONS sa grid or gallery pictures ==== */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(50px);
    }

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

}

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{
    transform:translateY(-8px);
}

}


/* === TEAM SCREEN or 'meet the team' screen === */

.team-screen{
    position:absolute;
    inset:0;

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

    background:transparent;

    opacity:0;
    transform:translateX(100px);

    visibility:hidden;
    pointer-events:none;

    transition:.8s ease;
}

.team-screen.show{
    opacity:1;
    transform:translateX(0);

    visibility:visible;
    pointer-events:auto;
}

.hero.hide{
    opacity: 0;
    transform: translateX(-100px);
    pointer-events: none;
}

/* ==== LEFT side sa team screen
========================== */

.team-left{
    width:45%;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;
}

/* ==== PHOTO FRAME sa main photo ===== */

.photo-frame{
    width:360px;
    height:480px;

    border-radius:180px;
    overflow:hidden;

    border:3px solid #d7ff27;
    background:#111;

    position:relative;

    box-shadow:0 20px 60px rgba(215,255,39,.15);

    transition:box-shadow .35s ease;

    transform:translateZ(0);
    will-change:transform;
}

.photo-frame img{
    width:100%;
    height:100%;

    display:block;
    object-fit:cover;

    transition:transform .35s ease;

    backface-visibility:hidden;
    transform:translateZ(0);
}

.photo-frame:hover img{
    transform:translateZ(0) scale(1.06);
}

.photo-frame a{

    display:block;

    width:100%;
    height:100%;

    cursor:pointer;

}

/* === RIGHT sa team screen ==== */

.team-right{
    width:45%;

    display:flex;
    flex-direction:column;

    justify-content:center;
}

.team-label{

    color:#d7ff27;

    letter-spacing:3px;

    font-size:16px;

    font-weight:600;

}

.team-right h2{
    font-size:60px;
    line-height:1.1;

    margin:15px 0 10px;
}

.team-right h3{
    color:#a5a5a5;
    font-size:22px;

    margin-bottom:20px;

    min-height:35px;
}
.team-right p{

    min-height:90px;

    margin-bottom:30px;

    color:#a5a5a5;

    line-height:1.8;
}

.portfolio-btn{

    display:inline-flex;

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

    width:fit-content;

    margin:0 0 35px;

    text-decoration:none;

    color:#fff;

    border:2px solid #444;

    padding:16px 34px;

    border-radius:40px;

    transition:.35s;

}

.portfolio-btn:hover{

    border-color:#d7ff27;

    color:#d7ff27;

    box-shadow:0 0 20px rgba(215,255,39,.25);

}

/* === MEMBER LIST or member avatars ==== */

.member-list{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:25px;

    min-height:70px;
}

.member{

    width:65px;
    height:65px;

    border-radius:50%;

    object-fit:cover;

    cursor:pointer;

    border:3px solid transparent;

    transition:.35s;

}

.member:hover{

    transform:translateY(-6px);

}

.member.active{

    border-color:#d7ff27;

    box-shadow:0 0 18px rgba(215,255,39,.5);

}

/*back button sa team screen */

#backButton{

    position:absolute;

    top:80px;
    left:40px;

    background:none;
    border:none;

    color:white;

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

    cursor:pointer;

    transition:.3s;

}

#backButton:hover{

    color:#d7ff27;

}

/* ==== LOADER "devbook 2026" ==== */

#loader{
    position:fixed;
    inset:0;

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

    z-index:9999;

    background:
        radial-gradient(circle at 70% 35%, rgba(215,255,39,.08), transparent 38%),
        linear-gradient(145deg,#0d1117,#121822,#090c11);

    overflow:hidden;

    transition: opacity .8s ease,
                transform .8s ease;
}

#loader.hide{

    transform:translateY(-100%);
    opacity:0;

    pointer-events:none;
}

#loader h1{

    font-size:82px;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:20px;
}
#loader span{

    color:#D8FF29;
}

#loadingText{

    color:#8A8A8A;

    letter-spacing:1px;

    margin:30px 0 18px;
}

.loading-bar{

    width:340px;

    height:3px;

    background:rgba(255,255,255,.08);

    border-radius:10px;
}

.progress{
    width:0;
    height:100%;
    background:#D8FF29;
    box-shadow:0 0 18px rgba(215,255,39,.6);
}


#percent{

    margin-top:20px;

    font-size:18px;

    color:#D8FF29;
}

.container{

    opacity:0;

    transition:1s;
}

.container.show{

    opacity:1;
}



/* ==========================
        RESPONSIVE
========================== */

@media (max-width:1200px){

    .container{
        width:95%;
        min-height:100vh;
        padding:50px;
        margin:20px auto;
    }

    .hero{
        flex-direction:column;
        gap:60px;
        justify-content:center;
    }

    .left,
    .right{
        width:100%;
        text-align:center;
    }

    .left h1::after{
        margin:25px auto 0;
    }

    .left p{
        width:100%;
        max-width:700px;
        margin:35px auto 45px;
    }

    .buttons{
        justify-content:center;
    }

}

/*tablets  */
@media (max-width:900px){

    .container{
        padding:40px 25px;
    }

    .left h1{
        font-size:52px;
    }

    .gallery{
        grid-template-columns:repeat(3,140px);
        gap:18px;
    }

    .img-card{
        width:140px;
        height:200px;
    }

    .team-screen{
        flex-direction:column;
        overflow-y:auto;
        padding:100px 25px 40px;
    }

    .team-left,
    .team-right{
        width:100%;
        text-align:center;
    }

    .photo-frame{
        width:280px;
        height:380px;
        margin-bottom:35px;
    }

    .team-right h2{
        font-size:42px;
    }

    .member-list{
        justify-content:center;
    }

    #backButton{
        top:25px;
        left:25px;
    }

}

/*phones  */
@media (max-width:600px){

    .container{
        padding:25px 18px;
        border-radius:18px;
    }

    .left h1{
        font-size:38px;
        line-height:1.15;
    }

    .left p{
        font-size:15px;
        line-height:1.8;
    }

    .secondary{
        width:100%;
        max-width:280px;
    }

    .gallery{
        grid-template-columns:repeat(2,120px);
        gap:15px;
    }

    .img-card{
        width:120px;
        height:170px;
    }

    .img-card.animate:nth-child(7){
        grid-column:auto;
        margin-top:0;
    }

    .photo-frame{
        width:220px;
        height:300px;
    }

    .team-right h2{
        font-size:32px;
    }

    .team-right h3{
        font-size:18px;
    }

    .team-right p{
        font-size:15px;
    }

    .member{
        width:55px;
        height:55px;
    }

}