/* =====================================================
   INK & PAPER THEME  (matches the landing-page collage)
   Cream paper, thick black ink, hard comic shadows,
   one red accent, slow drifting red wash.
   Applies to ALL pages including Page 1.
   ===================================================== */


/* -----------------------------------------------------
   ANIMATED GLOW POSITION
   (browsers without @property show it static at 80% / 20%)
----------------------------------------------------- */

@property --gx{
    syntax:"<percentage>";
    inherits:false;
    initial-value:80%;
}

@property --gy{
    syntax:"<percentage>";
    inherits:false;
    initial-value:20%;
}

@keyframes glowMove{
    0%   { --gx:80%; --gy:20%; }
    25%  { --gx:25%; --gy:30%; }
    50%  { --gx:20%; --gy:78%; }
    75%  { --gx:72%; --gy:82%; }
    100% { --gx:80%; --gy:20%; }
}

@keyframes cardGlowMove{
    0%   { --gx:80%; --gy:20%; }
    33%  { --gx:30%; --gy:35%; }
    66%  { --gx:55%; --gy:85%; }
    100% { --gx:80%; --gy:20%; }
}


/* =====================================================
   VARIABLES
   ===================================================== */

:root{
    --bg:#f3eee2;             /* paper cream */
    --bg-soft:#ece6d6;
    --card:#fbf8ef;
    --card-hover:#fffdf6;

    --ink:#0c0c0c;            /* illustration black */

    --text:#0c0c0c;
    --text-soft:#222222;
    --text-muted:#3a3a3a;
    --text-dim:#6b6b6b;

    --accent:#ff2d12;         /* illustration red */
    --accent-soft:rgba(255,45,18,.12);
    --accent-border:#ff2d12;

    --border:#0c0c0c;
    --border-soft:rgba(12,12,12,.15);

    --radius:6px;
    --radius-small:4px;

    --shadow:6px 6px 0 #0c0c0c;          /* hard comic-panel shadow */
    --shadow-accent:9px 9px 0 #ff2d12;

    --transition:.25s cubic-bezier(.2,.8,.2,1);

    --font-main:Arial,Helvetica,sans-serif;
    --font-heading:Arial,Helvetica,sans-serif;
}


/* =====================================================
   GLOBAL RESET
   ===================================================== */

*{
    box-sizing:border-box;
}

html{
    margin:0;
    padding:0;
    background:var(--bg);
}

body{
    margin:0;
    padding:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-main);
}


/* =====================================================
   ALL PAGES (paper + halftone dots + drifting red wash)
   ===================================================== */

.content > section:not(.page1),
.page1{
    position:relative;
    width:100%;
    min-height:100vh;

    background-color:var(--bg);
    background-image:
        radial-gradient(
            circle at var(--gx) var(--gy),
            rgba(255,45,18,.12),
            transparent 35%
        ),
        radial-gradient(
            rgba(12,12,12,.08) 1px,
            transparent 1.6px
        );
    background-size:auto, 14px 14px;
    background-repeat:no-repeat, repeat;

    animation:glowMove 18s ease-in-out infinite;

    color:var(--ink);
}

/* inner wrapper must be see-through so the paper shows */
.page7 .bodybox{
    background:transparent;
}


/* =====================================================
   UNIVERSAL TYPOGRAPHY
   ===================================================== */

.content > section:not(.page1) h1,
.content > section:not(.page1) h2,
.content > section:not(.page1) h3,
.content > section:not(.page1) h4,
.content > section:not(.page1) h5,
.content > section:not(.page1) h6{
    color:var(--ink);
    font-family:var(--font-heading);
}

.content > section:not(.page1) p{
    color:var(--text-muted);
}

.content > section:not(.page1) strong{
    color:var(--ink);
}


/* =====================================================
   UNIVERSAL LINKS
   ===================================================== */

.content > section:not(.page1) a{
    color:var(--ink);
    text-decoration:none;
    transition:color var(--transition);
}

.content > section:not(.page1) a:hover{
    color:var(--accent);
}


/* =====================================================
   UNIVERSAL PAGE HEADINGS
   ===================================================== */

.content > section:not(.page1) > h1{
    color:var(--ink);
    font-size:clamp(36px,5vw,64px);
    font-weight:900;
    letter-spacing:-2px;
    line-height:1;
    margin:0 0 40px;
}

.content > section:not(.page1) > h1::after{
    content:"";
    display:block;

    width:60px;
    height:6px;
    margin-top:18px;

    background:var(--accent);
    border:2px solid var(--ink);
    border-radius:0;
    box-shadow:3px 3px 0 var(--ink);
}


/* =====================================================
   UNIVERSAL CARDS  (comic panels)
   ===================================================== */

.content > section:not(.page1) .card,
.content > section:not(.page1) .project-card,
.content > section:not(.page1) .award-card,
.content > section:not(.page1) .leetcode-card,
.content > section:not(.page1) .bookmark-card,
.content > section:not(.page1) .experience-card,
.content > section:not(.page1) .skill-card{

    background:var(--card);
    color:var(--ink);

    border:3px solid var(--ink);
    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.content > section:not(.page1) .card:hover,
.content > section:not(.page1) .project-card:hover,
.content > section:not(.page1) .award-card:hover,
.content > section:not(.page1) .leetcode-card:hover,
.content > section:not(.page1) .bookmark-card:hover,
.content > section:not(.page1) .experience-card:hover,
.content > section:not(.page1) .skill-card:hover{

    background:var(--card-hover);
    border-color:var(--ink);

    transform:translate(-3px,-3px);
    box-shadow:var(--shadow-accent);     /* red shadow on hover */
}


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

.content > section:not(.page1) button,
.content > section:not(.page1) .btn{

    background:var(--card);
    color:var(--ink);

    border:2px solid var(--ink);
    border-radius:999px;
    box-shadow:3px 3px 0 var(--ink);

    padding:11px 20px;

    font-family:inherit;
    font-weight:700;

    cursor:pointer;

    transition:all var(--transition);
}

.content > section:not(.page1) button:hover,
.content > section:not(.page1) .btn:hover{

    background:var(--accent);
    color:#fff;

    border-color:var(--ink);

    transform:translate(-2px,-2px);
    box-shadow:5px 5px 0 var(--ink);
}


/* =====================================================
   UNIVERSAL ACCENT
   ===================================================== */

.content > section:not(.page1) .accent,
.content > section:not(.page1) .highlight,
.content > section:not(.page1) .role,
.content > section:not(.page1) .year,
.content > section:not(.page1) .label,
.content > section:not(.page1) .section-label,
.content > section:not(.page1) .eyebrow{

    color:var(--accent);
}


/* =====================================================
   UNIVERSAL FORM ELEMENTS
   ===================================================== */

.content > section:not(.page1) input,
.content > section:not(.page1) textarea,
.content > section:not(.page1) select{

    width:100%;

    padding:13px 15px;

    background:var(--card);
    color:var(--ink);

    border:2px solid var(--ink);
    border-radius:var(--radius-small);

    outline:none;

    font-family:inherit;

    transition:
        border-color var(--transition),
        box-shadow var(--transition);
}

.content > section:not(.page1) input:focus,
.content > section:not(.page1) textarea:focus,
.content > section:not(.page1) select:focus{

    border-color:var(--accent);
    box-shadow:3px 3px 0 var(--accent);
}


/* =====================================================
   UNIVERSAL DIVIDERS
   ===================================================== */

.content > section:not(.page1) hr{

    border:0;
    border-top:2px solid var(--ink);

    margin:35px 0;
}


/* =====================================================
   UNIVERSAL GRID
   ===================================================== */

.content > section:not(.page1) .page-grid{

    background-image:
        linear-gradient(
            rgba(12,12,12,.06) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(12,12,12,.06) 1px,
            transparent 1px
        );

    background-size:50px 50px;
}


/* =====================================================
   UNIVERSAL IMAGES
   ===================================================== */

.content > section:not(.page1) img{
    max-width:100%;
    display:block;
}


/* =====================================================
   UNIVERSAL ICONS
   ===================================================== */

.content > section:not(.page1) .icon,
.content > section:not(.page1) .social-icon{

    color:var(--ink);

    transition:
        color var(--transition),
        transform var(--transition);
}

.content > section:not(.page1) .icon:hover,
.content > section:not(.page1) .social-icon:hover{

    color:var(--accent);

    transform:translateY(-2px);
}


/* =====================================================
   UNIVERSAL GLOW (utility class, animated red wash)
   ===================================================== */

.content > section:not(.page1) .orange-glow{

    background:
        radial-gradient(
            circle at var(--gx) var(--gy),
            rgba(255,45,18,.12),
            transparent 35%
        );

    animation:cardGlowMove 14s ease-in-out infinite;
}


/* =====================================================
   UNIVERSAL PROFILE RING
   ===================================================== */

.content > section:not(.page1) .profile-ring{

    border:3px solid var(--ink);
    box-shadow:5px 5px 0 var(--accent);
}


/* =====================================================
   SELECTION / FOCUS / SCROLLBAR
   ===================================================== */

::selection{
    background:var(--accent);
    color:#fff;
}

:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:3px;
}

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

::-webkit-scrollbar-track{
    background:var(--bg);
}

::-webkit-scrollbar-thumb{
    background:var(--ink);
    border-radius:0;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--accent);
}


/* =====================================================
   PAGE 1 - ABOUT ME
   ===================================================== */

.page1{
    display:flex;
    align-items:center;
}

.page1 .aboutme{
    width:min(1100px,92vw);
    margin:0 auto;
    padding:60px 0;
}

/* "ABOUT ME" label */
.page1 .aboutme > .eyebrow{
    display:block;
    margin-bottom:40px;

    color:var(--accent);
    /* font-family:"JetBrains Mono",monospace; */
    font-size:12px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
}

.page1 .about-grid{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:60px;
    align-items:start;
}

/* PHOTO */
.page1 #personal_img{
    width:180px;
    height:180px;
    object-fit:cover;
    border-radius:50%;

    border:3px solid var(--ink);
    box-shadow:5px 5px 0 var(--accent);
}

/* NAME */
.page1 .name{
    margin:0 0 30px;

    color:var(--ink);
    font-family:var(--font-heading);
    font-size:clamp(36px,5vw,64px);
    font-weight:900;
    letter-spacing:-2px;
    line-height:1;
}

.page1 .name::after{
    content:"";
    display:block;

    width:60px;
    height:6px;
    margin-top:18px;

    background:var(--accent);
    border:2px solid var(--ink);
    border-radius:0;
    box-shadow:3px 3px 0 var(--ink);
}

/* DESCRIPTION */
.page1 .name_description{
    max-width:760px;
    margin:0;

    color:var(--text-muted);
    font-family:"Inter",Arial,sans-serif;
    font-size:18px;
    font-weight:600;
    line-height:1.7;
}

/* DIVIDER + SOCIALS */
.page1 .contact_me{
    max-width:760px;
    margin-top:35px;
    padding-top:30px;
    border-top:3px solid var(--ink);
}

.page1 .about-socials{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
}

.page1 .about-socials a{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:11px 20px;

    background:var(--card);
    color:var(--ink);
    border:2px solid var(--ink);
    border-radius:999px;
    box-shadow:3px 3px 0 var(--ink);

    font-size:14px;
    font-weight:700;
    text-decoration:none;

    transition:all var(--transition);
}

.page1 .about-socials a i{
    color:var(--accent);
    transition:color var(--transition);
}

.page1 .about-socials a:hover{
    background:var(--accent);
    color:#fff;
    border-color:var(--ink);
    transform:translate(-2px,-2px);
    box-shadow:5px 5px 0 var(--ink);
}

.page1 .about-socials a:hover i{
    color:#fff;
}


/* =====================================================
   PAGE 7 - BOOKMARKS SCROLL
   ===================================================== */

.page7{
    position:relative;
    width:100%;
    min-height:100vh;
    color:var(--ink);
    overflow:hidden;
}

.page7 > h1{
    position:absolute;
    top:30px;
    left:50%;
    transform:translateX(-50%);
    margin:0;
    z-index:20;
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    font-size:clamp(32px,5vw,70px);
    font-weight:900;
    letter-spacing:-2px;
    white-space:nowrap;
}

.bodybox{
    width:100%;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:100px 30px 40px;
    box-sizing:border-box;
}

.scroll{
    width:min(1100px,92vw);
    display:block;
    cursor:pointer;
    user-select:none;
    transition:opacity .8s ease,transform .8s ease;
}

/* ROD (red) */
.rod{
    width:100%;
    height:26px;
    background:
        linear-gradient(
            to bottom,
            #ff2d12 0%,
            #c91f08 55%,
            #8f1503 100%
        );
    border:2px solid var(--ink);
    border-radius:13px;
    position:relative;
    box-shadow:3px 3px 0 var(--ink);
}

.rod::before,
.rod::after{
    content:"";
    position:absolute;
    top:-2px;
    width:26px;
    height:26px;
    background:inherit;
    border:inherit;
    border-radius:50%;
    box-shadow:inherit;
    z-index:-1;
}

.rod::before{
    left:-13px;
}

.rod::after{
    right:-13px;
}

/* PAPER SCROLL BODY */
.body{
    width:100%;
    height:0;
    overflow:hidden;

    background:var(--card);

    border-left:3px solid var(--ink);
    border-right:3px solid var(--ink);

    transition:
        height 1.5s cubic-bezier(.22,.61,.36,1);
}

.scroll.open .body{
    height:var(--scroll-height);
}

.scroll.disappear{
    opacity:0;
    transform:scaleY(0);
    pointer-events:none;
}

/* HEADER */
.bookmark-header{
    padding:30px;
}

.bookmark-header > span{
    display:block;
    margin-bottom:25px;

    color:var(--accent);

    /* font-family:"JetBrains Mono",monospace; */
    font-size:12px;
    font-weight:700;
    letter-spacing:4px;
    text-transform:uppercase;
}

/* BOOKMARK ITEM */
.book-list{
    position:relative;

    display:flex;
    align-items:center;

    min-height:75px;

    margin:14px 0;
    padding:0 25px 0 0;

    background:var(--bg);

    border-top:2px solid var(--ink);
    border-bottom:2px solid var(--ink);

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

/* RED LEFT ACCENT */
.book-list::before{
    content:"";

    position:absolute;
    left:-1px;
    top:0;
    bottom:0;

    width:6px;

    background:var(--accent);
}

/* NUMBER */
.book-list > span{
    width:65px;
    flex-shrink:0;

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

    /* font-family:"JetBrains Mono",monospace; */
    font-size:14px;
    font-weight:600;

    color:var(--accent);
}

/* SEPARATOR */
.book-list > span::after{
    content:"";

    width:2px;
    height:35px;

    margin-left:20px;

    background:var(--ink);
}

/* LINK */
.book-list a{
    flex:1;

    padding:20px 15px;

    color:var(--ink);

    font-family:"Inter",Arial,sans-serif;
    font-size:clamp(16px,2vw,22px);
    font-weight:700;

    text-decoration:none;

    transition:
        color .25s ease,
        padding-left .25s ease;
}

/* ARROW */
.book-list a::after{
    content:" ↗";

    color:var(--accent);
    opacity:.55;

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

/* HOVER */
.book-list:hover{
    transform:translateX(8px);

    background:#fff;

    box-shadow:5px 5px 0 var(--ink);
}

.book-list:hover a{
    color:var(--accent);
    padding-left:22px;
}

.book-list:hover a::after{
    opacity:1;
}

/* SCROLLBAR */
.bookmark-header::-webkit-scrollbar{
    width:6px;
}

.bookmark-header::-webkit-scrollbar-track{
    background:var(--bg);
}

.bookmark-header::-webkit-scrollbar-thumb{
    background:var(--ink);
    border-radius:0;
}

.bookmark-header::-webkit-scrollbar-thumb:hover{
    background:var(--accent);
}


/* =====================================================
   REDUCED MOTION
   ===================================================== */

@media (prefers-reduced-motion: reduce){

    .page1,
    .content > section:not(.page1),
    .content > section:not(.page1) .orange-glow{
        animation:none;
    }

}


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

@media(max-width:900px){

    .content > section:not(.page1) > h1{
        font-size:42px;
        letter-spacing:-1px;
    }

    .page7 > h1{
        top:20px;
        font-size:clamp(28px,8vw,45px);
    }

    .bodybox{
        padding:90px 20px 30px;
    }

    .scroll{
        width:94vw;
    }

    .bookmark-header{
        padding:25px;
    }

    .book-list{
        min-height:65px;
    }

    .book-list > span{
        width:45px;
        font-size:13px;
    }

    .book-list > span::after{
        margin-left:10px;
    }

    .book-list a{
        font-size:16px;
        padding:15px 8px;
    }
}

@media(max-width:800px){

    .page1 .about-grid{
        grid-template-columns:1fr;
        gap:30px;
        justify-items:start;
    }

    .page1 #personal_img{
        width:130px;
        height:130px;
    }

    .page1 .name_description{
        font-size:16px;
    }
}

@media(max-width:550px){

    .content > section:not(.page1) > h1{
        font-size:34px;
        letter-spacing:-1px;
    }
}

@media(max-width:500px){

    :root{
        --scroll-height:450px;
    }

    .page7 > h1{
        font-size:27px;
    }

    .bodybox{
        padding-left:12px;
        padding-right:12px;
    }

    .scroll{
        width:90vw;
    }

    .bookmark-header{
        padding:22px 15px;
    }

    .bookmark-header > span{
        font-size:10px;
        letter-spacing:3px;
    }

    .book-list{
        min-height:60px;
        padding-right:8px;
    }

    .book-list > span{
        width:38px;
        font-size:12px;
    }

    .book-list > span::after{
        margin-left:7px;
    }

    .book-list a{
        font-size:14px;
        padding:14px 5px;
    }

    .rod{
        height:24px;
    }

    .rod::before,
    .rod::after{
        width:24px;
        height:24px;
    }

    .rod::before{
        left:-12px;
    }

    .rod::after{
        right:-12px;
    }
}