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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
    text-decoration:none;
    scroll-behavior:smooth;
}

body{
    overflow:hidden;
    background:#050816;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
}

/* PARTICLES */

#particles-js{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-10;
}

/* WRAPPER */

.wrapper{
    position:relative;
    width:1200px;
    height:700px;
    perspective:2500px;
    animation:showBook 1.5s ease;
}

@keyframes showBook{

    0%{
        opacity:0;
        transform:translateY(80px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

/* COVER */

.cover{
    position:absolute;
    top:0;
    left:0;
    width:50%;
    height:100%;
    background:
    linear-gradient(
    145deg,
    #00f7ff,
    #0077ff,
    #7b2ff7
    );
    transform-origin:right;
    z-index:100;
    box-shadow:
    0 0 50px rgba(0,247,255,.5);
}

.cover.cover-left{
    z-index:-1;
}

.cover.cover-right{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    transition:transform 1s cubic-bezier(.645,.045,.355,1);
}

.cover.cover-right.turn{
    transform:rotateY(180deg);
}

/* CLOSED BOOK COVER STYLING */

.cover-content {
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cover-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 247, 255, 0.6);
    margin-bottom: 0.5rem;
}

.cover-content p {
    color: #dbeafe;
    font-size: 1rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

#open-book-btn {
    cursor: pointer;
    border: none;
    outline: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    background: #111827;
    color: #00f7ff;
    border: 2px solid #00f7ff;
    box-shadow: 0 0 15px rgba(0, 247, 255, 0.2);
}

#open-book-btn:hover {
    background: #00f7ff;
    color: #000;
    box-shadow: 0 0 25px rgba(0, 247, 255, 0.7);
}

/* BOOK */

.book{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    perspective:2500px;
}

/* PAGE */

.book-page{
    position:absolute;
    width:50%;
    height:100%;
    background: transparent;
    box-shadow: 0 0 40px rgba(0,247,255,.15);
    transform-style: preserve-3d;
}

/* LEFT PAGE */

.page-left{
    left:0;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2rem;
    border-top-left-radius:1rem;
    border-bottom-left-radius:1rem;
    z-index: 10;
    background: linear-gradient(145deg, #111827, #0f172a);
}

/* RIGHT PAGE */

.page-right{
    right:0;
    transform-style:preserve-3d;
    transform-origin:left;
    transition:transform 1s cubic-bezier(.645,.045,.355,1);
}

.page-right.turn{
    transform:rotateY(-180deg);
}

/* HARDWARE LAYER FIX FOR ROTATED 3D SURFACES */

.page-front,
.page-back{
    position:absolute;
    width:100%;
    height:100%;
    padding:2rem;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: linear-gradient(145deg, #111827, #0f172a);
    overflow-y:auto;
}

.page-front {
    z-index: 2;
    transform: rotateY(0deg);
    border-top-right-radius:1rem;
    border-bottom-right-radius:1rem;
}

.page-back{
    z-index: 1;
    transform: rotateY(-180deg); /* Counter-acts parent leaf rotation perfectly */
    border-top-left-radius:1rem;
    border-bottom-left-radius:1rem;
}

/* Clean spatial resets for elements inside backward-facing pages */
.page-back * {
    direction: ltr;
    text-align: left;
}

.page-back .title {
    text-align: left;
}

/* DUAL NAVIGATION BUTTON BAR STYLING */

.nav-controls {
    position: absolute;
    bottom: 1rem;
    width: calc(100% - 4rem);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.nav-btn {
    font-size: 2rem;
    cursor: pointer;
    color: #00f7ff;
    transition: 0.3s;
}

.nav-btn:hover {
    transform: scale(1.2);
    text-shadow: 0 0 10px #00f7ff;
}

.page-back .number-page {
    transform: translateX(-50%);
}

/* PROFILE */

.profile-page{
    text-align:center;
}

.image-box{
    position:relative;
    margin-bottom:1rem;
}

.profile-page img{
    width:180px;
    height:180px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #fff;
}

.profile-page h1{
    font-size:2.5rem;
    margin-top:1rem;
}

.profile-page h3{
    color:#00d9ff;
    margin-top:.5rem;
}

.typing-text{
    color:#7b2ff7;
    margin-top:.8rem;
    min-height:30px;
    font-weight:600;
}

/* SOCIAL */

.social-media{
    margin:1.5rem 0;
}

.social-media a{
    width:2.8rem;
    height:2.8rem;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#00f7ff;
    margin:0 .4rem;
    font-size:1.2rem;
    transition:.4s;
}

.social-media a:hover{
    background:#00f7ff;
    color:#000;
    transform:translateY(-5px);
    box-shadow:
    0 0 20px rgba(0,247,255,.5);
}

.profile-page p{
    color:#dbeafe;
    line-height:1.8;
    margin-top:1rem;
    font-size:.92rem;
}

/* BUTTONS */

.btn-box{
    margin-top:1.5rem;
    display:flex;
    justify-content:center;
    gap:1rem;
}

.btn{
    padding:.8rem 1.4rem;
    border-radius:.7rem;
    background:
    linear-gradient(
    45deg,
    #00f7ff,
    #0077ff
    );
    color:#fff;
    font-weight:600;
    transition:.4s;
}

.btn:hover{
    transform:translateY(-4px);
    box-shadow:
    0 0 20px rgba(0,247,255,.5);
}

/* TITLE */

.title{
    color:#00f7ff;
    font-size:2rem;
    margin-bottom:1.5rem;
}

/* SECTION */

.section{
    margin-bottom:1.2rem;
    padding:1rem;
    border-radius:1rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.05);
    transition:.4s;
}

.section:hover{
    transform:translateY(-5px);
    box-shadow:
    0 0 20px rgba(0,247,255,.12);
}

.section p{
    color:#dbeafe;
    line-height:1.7;
    font-size:.88rem;
}

/* KPI GRID */

.grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}

.card{
    padding:1.5rem;
    border-radius:1rem;
    background:rgba(255,255,255,.05);
    text-align:center;
    font-weight:700;
    transition:.4s;
    font-size:1rem;
    line-height:1.8;
}

.card:hover{
    transform:translateY(-5px);
    box-shadow:
    0 0 20px rgba(0,247,255,.15);
}

/* SKILLS */

.skills-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
}

.skill-card{
    padding:1rem;
    border-radius:1rem;
    background:rgba(255,255,255,.05);
    text-align:center;
    font-weight:600;
    transition:.4s;
    font-size:.9rem;
}

.skill-card:hover{
    transform:translateY(-5px);
    box-shadow:
    0 0 20px rgba(0,247,255,.15);
}

/* TIMELINE */

.timeline-box{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.timeline-item{
    padding:1rem;
    border-radius:1rem;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    transition:.4s;
}

.timeline-item:hover{
    transform:translateY(-5px);
    box-shadow:
    0 0 20px rgba(0,247,255,.15);
}

.timeline-date{
    color:#00f7ff;
    font-size:.8rem;
    font-weight:600;
}

.timeline-item h3{
    margin:.5rem 0;
    font-size:1rem;
}

.timeline-item p{
    color:#dbeafe;
    font-size:.82rem;
    line-height:1.6;
}

/* PROJECTS */

.project-category{
    margin-bottom:1rem;
    padding:1rem;
    border-radius:1rem;
    background:rgba(255,255,255,.05);
    transition:.4s;
}

.project-category:hover{
    transform:translateY(-5px);
    box-shadow:
    0 0 20px rgba(0,247,255,.15);
}

.project-category h3{
    color:#00f7ff;
    margin-bottom:.5rem;
}

.project-category p{
    color:#dbeafe;
    line-height:1.7;
    font-size:.82rem;
}

/* GITHUB */

.github-box{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-top:1rem;
    padding:1rem;
    border-radius:1rem;
    background:
    linear-gradient(
    145deg,
    rgba(0,247,255,.08),
    rgba(123,47,247,.08)
    );
}

.github-box i{
    font-size:2.5rem;
    color:#00f7ff;
}

.github-box h3{
    color:#00f7ff;
}

.github-box a{
    color:#dbeafe;
}

/* CONTACT */

.contact-info{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.contact-card{
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem;
    border-radius:1rem;
    background:rgba(255,255,255,.05);
    transition:.4s;
}

.contact-card:hover{
    transform:translateY(-5px);
    box-shadow:
    0 0 20px rgba(0,247,255,.15);
}

.contact-card i{
    font-size:2rem;
    color:#00f7ff;
}

.contact-card h3{
    color:#00f7ff;
}

.contact-card a{
    color:#dbeafe;
}

/* FOOTER */

.footer-brand{
    margin-top:2rem;
    text-align:center;
    color:#dbeafe;
    font-size:.85rem;
}

.footer-brand span{
    color:#00f7ff;
}

/* PROFILE BUTTON */

.back-profile{
    position:absolute;
    bottom:1rem;
    right:2rem;
    width:2rem;
    height:2rem;
    background:transparent;
    border:2px solid #00f7ff;
    border-radius:.4rem;
    color:#00f7ff;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.4s;
}

.back-profile:hover{
    background:#00f7ff;
    color:#000;
}

/* PAGE NUMBER */

.number-page{
    position:absolute;
    bottom:1rem;
    left:50%;
    transform:translateX(-50%);
}

/* SCROLLBAR */

::-webkit-scrollbar{
    width:6px;
}

::-webkit-scrollbar-thumb{
    background:#00f7ff;
    border-radius:10px;
}

::-webkit-scrollbar-track{
    background:#111827;
}

/* MOBILE */

@media(max-width:1100px){

    .wrapper{
        width:95%;
        height:90vh;
    }
}

@media(max-width:900px){

    body{
        overflow:auto;
        padding:1rem;
    }

    .wrapper{
        height:auto;
    }

    .book{
        flex-direction:column;
    }

    .book-page{
        position:relative;
        width:100%;
        height:auto;
    }

    .page-right{
        transform:none !important;
    }

    .page-front,
    .page-back{
        position:relative;
        transform:none;
    }

    .cover{
        display:none;
    }

    .skills-grid,
    .grid{
        grid-template-columns:1fr;
    }
}
/* LEETCODE SVG CIRCLE ALIGNMENT FIX */
.social-media a:nth-child(3) {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.social-media a:nth-child(3):hover {
    background: #ffa116;
    color: #000;
    box-shadow: 0 0 20px rgba(255, 161, 22, 0.6);
}