/* ===== THEME: "Compile" — ink background, Java amber + coral, code-editor feel ===== */
:root {
    --bg: #0d1117;
    --surface: #151b24;
    --surface-2: #1c2431;
    --line: #263041;
    --text: #e8edf4;
    --muted: #9aa6b8;
    --amber: #ffb454;
    --coral: #ff6b4a;
    --on-accent: var(--on-accent);
    --footer: #0a0e14;
    --stack: #111823;
    --shadow: rgba(0, 0, 0, .35);
    --sans: "Space Grotesk", sans-serif;
    --mono: "JetBrains Mono", monospace;
}
/* Light theme "Paper" — switched with the checkbox in the header (no JavaScript) */
:root:has(#theme:checked) {
    --bg: #f7f4ee;
    --surface: #ffffff;
    --surface-2: #efeae0;
    --line: #ddd5c6;
    --text: #1d2129;
    --muted: #5b6472;
    --amber: #c2410c;
    --coral: #be123c;
    --on-accent: #ffffff;
    --footer: #efe9dd;
    --stack: #fffdf8;
    --shadow: rgba(60, 40, 10, .14);
}
.theme-input { position: absolute; opacity: 0; pointer-events: none; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.7;
    overflow-x: hidden;
    transition: background .4s, color .4s;
    timeline-scope: --t-home, --t-about, --t-education, --t-experience, --t-projects,
                    --t-skills, --t-certifications, --t-languages, --t-contact;
}
a { text-decoration: none; color: inherit; }
section { scroll-margin-top: 80px; }
::selection { background: var(--amber); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ===== OPENING: preloader + progress + glow ===== */
.preloader {
    position: fixed; inset: 0; z-index: 3000;
    display: grid; place-items: center;
    background: var(--bg);
    animation: curtain .9s 1.9s cubic-bezier(.77,0,.18,1) forwards;
}
@keyframes curtain { to { transform: translateY(-100%); visibility: hidden; } }
.preloader-code {
    font-family: var(--mono);
    font-size: clamp(14px, 3.4vw, 22px);
    color: var(--amber);
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid var(--amber);
    width: 0;
    animation: type 1.4s steps(34) forwards, caret 0.6s step-end infinite;
}
.preloader-bar {
    position: absolute; bottom: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--amber), var(--coral));
    animation: load 1.7s ease forwards;
}
@keyframes type { to { width: 37ch; } }
@keyframes caret { 50% { border-color: transparent; } }
@keyframes load { to { width: 100%; } }

.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 2000;
    background: linear-gradient(90deg, var(--amber), var(--coral));
    transform: scaleX(0); transform-origin: left;
}
@keyframes grow { to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
    .scroll-progress { animation: grow linear both; animation-timeline: scroll(root); }
}
main, .navbar, footer { position: relative; z-index: 1; }

/* ===== NAVBAR: floating capsule ===== */
.navbar {
    position: sticky; top: 12px; z-index: 1000;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    margin: 12px 4% 0;
    padding: 9px 12px 9px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 10px 30px var(--shadow);
    animation: dropIn .8s 2s both cubic-bezier(.2,.8,.2,1);
}

/* Logo: gradient monogram + blinking cursor */
.logo { display: flex; align-items: center; gap: 11px; font-size: 19px; font-weight: 700; letter-spacing: -.3px; }
.logo-mark {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--amber), var(--coral));
    color: var(--on-accent);
    font-family: var(--mono); font-size: 15px; font-weight: 500;
    transform: rotate(-8deg);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--coral) 35%, transparent);
    transition: transform .45s cubic-bezier(.3,1.6,.5,1);
}
.logo:hover .logo-mark { transform: rotate(0) scale(1.1); }
.logo-text::after { content: "_"; color: var(--amber); margin-left: 2px; animation: blink 1s step-end infinite; }
.logo span, footer span { color: var(--amber); }
@keyframes blink { 50% { opacity: 0; } }

/* Nav links: pill that lights up for the section currently on screen */
.navbar nav { display: flex; gap: 4px; }
.navbar nav a {
    padding: 7px 13px; border-radius: 999px;
    font-size: 13.5px; color: var(--muted);
    transition: transform .25s;
}
.navbar nav a:hover { transform: translateY(-2px); color: var(--text); }

@keyframes navOn  { from { color: var(--muted); background-color: transparent; } to { color: var(--on-accent); background-color: var(--amber); } }
@keyframes navOff { from { color: var(--on-accent); background-color: var(--amber); } to { color: var(--muted); background-color: transparent; } }
/* a link turns on as its section enters, and off as the next section enters */
@supports (animation-timeline: view()) {
    #home { view-timeline: --t-home; }
    #about { view-timeline: --t-about; }
    #education { view-timeline: --t-education; }
    #experience { view-timeline: --t-experience; }
    #projects { view-timeline: --t-projects; }
    #skills { view-timeline: --t-skills; }
    #certifications { view-timeline: --t-certifications; }
    #languages { view-timeline: --t-languages; }
    #contact { view-timeline: --t-contact; }
    .navbar nav a[href="#home"] { animation: navOn linear both, navOff linear forwards; animation-timeline: --t-home, --t-about; animation-range: entry 0px entry 260px; }
    .navbar nav a[href="#about"] { animation: navOn linear both, navOff linear forwards; animation-timeline: --t-about, --t-education; animation-range: entry 0px entry 260px; }
    .navbar nav a[href="#education"] { animation: navOn linear both, navOff linear forwards; animation-timeline: --t-education, --t-experience; animation-range: entry 0px entry 260px; }
    .navbar nav a[href="#experience"] { animation: navOn linear both, navOff linear forwards; animation-timeline: --t-experience, --t-projects; animation-range: entry 0px entry 260px; }
    .navbar nav a[href="#projects"] { animation: navOn linear both, navOff linear forwards; animation-timeline: --t-projects, --t-skills; animation-range: entry 0px entry 260px; }
    .navbar nav a[href="#skills"] { animation: navOn linear both, navOff linear forwards; animation-timeline: --t-skills, --t-certifications; animation-range: entry 0px entry 260px; }
    .navbar nav a[href="#certifications"] { animation: navOn linear both, navOff linear forwards; animation-timeline: --t-certifications, --t-languages; animation-range: entry 0px entry 260px; }
    .navbar nav a[href="#languages"] { animation: navOn linear both, navOff linear forwards; animation-timeline: --t-languages, --t-contact; animation-range: entry 0px entry 260px; }
    .navbar nav a[href="#contact"] { animation: navOn linear both; animation-timeline: --t-contact; animation-range: entry 0px entry 260px; }
}

/* Light / dark switch (checkbox + label, no JS) */
.theme-toggle {
    position: relative; flex-shrink: 0; cursor: pointer;
    width: 58px; height: 32px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line);
    font-size: 14px; line-height: 30px; color: var(--muted);
    display: flex; justify-content: space-between; padding: 0 8px;
}
.theme-toggle::before { content: "\263E"; }
.theme-toggle::after  { content: "\2600"; }
.theme-toggle i {
    position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--amber), var(--coral));
    transition: transform .4s cubic-bezier(.3,1.5,.5,1);
}
#theme:checked ~ .navbar .theme-toggle i { transform: translateX(26px); }
#theme:focus-visible ~ .navbar .theme-toggle { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ===== HERO ===== */
.hero {
    min-height: 90vh; display: flex; justify-content: space-between; align-items: center;
    padding: 80px 10%; gap: 50px;
}
.hero-content { max-width: 680px; }
.hero-content > * { opacity: 0; animation: riseIn .9s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-content > :nth-child(1) { animation-delay: 2.0s; }
.hero-content > :nth-child(2) { animation-delay: 2.15s; }
.hero-content > :nth-child(3) { animation-delay: 2.3s; }
.hero-content > :nth-child(4) { animation-delay: 2.45s; }
.hero-content > :nth-child(5) { animation-delay: 2.6s; }
.hero-content > :nth-child(6) { animation-delay: 2.75s; }

.small-title { font-family: var(--mono); color: var(--amber); font-size: 16px; margin-bottom: 8px; }
.hero h1 { font-size: clamp(44px, 7vw, 76px); line-height: 1.05; margin-bottom: 12px; letter-spacing: -1.5px; }
.hero h2 { font-family: var(--mono); font-weight: 500; color: var(--coral); font-size: 22px; margin-bottom: 20px; min-height: 34px; }
.typed {
    display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom;
    width: 0; border-right: 3px solid var(--coral);
    animation: typeRole 1.8s 2.7s steps(25) forwards, caret .8s step-end infinite;
}
@keyframes typeRole { to { width: 25ch; } }
.hero-text { color: var(--muted); max-width: 580px; margin-bottom: 30px; }
.hero-buttons { display: flex; gap: 15px; flex-wrap: wrap; }

.btn { padding: 12px 26px; border-radius: 6px; font-weight: 500; transition: .3s; display: inline-block; }
.primary-btn { background: var(--amber); color: var(--on-accent); }
.primary-btn:hover { transform: translateY(-3px); box-shadow: 0 12px 28px color-mix(in srgb, var(--amber) 30%, transparent); }
.secondary-btn { border: 1px solid var(--amber); color: var(--amber); }
.secondary-btn:hover { background: var(--amber); color: var(--on-accent); transform: translateY(-3px); }

.social-links { display: flex; gap: 25px; margin-top: 25px; }
.social-links a { color: var(--muted); transition: .3s; }
.social-links a:hover { color: var(--amber); transform: translateY(-2px); }

.hero-image { opacity: 0; animation: zoomIn 1.1s 2.2s cubic-bezier(.2,.8,.2,1) forwards; }
.image-circle {
    position: relative; width: 310px; height: 310px; border-radius: 50%; padding: 8px;
    border: 2px solid var(--amber);
    animation: floating 4s ease-in-out infinite;
}
.image-circle::before {
    content: ""; position: absolute; inset: -18px; border-radius: 50%;
    border: 1px dashed var(--coral);
    animation: spin 22s linear infinite;
}
.image-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ===== SECTIONS ===== */
.section { padding: 100px 10%; }
.section-title { display: flex; align-items: center; gap: 15px; margin-bottom: 45px; }
.section-title h2 { font-size: 36px; letter-spacing: -.5px; }
.section-title::after {
    content: ""; height: 2px; width: 140px; margin-left: 10px;
    background: linear-gradient(90deg, var(--amber), transparent);
}

/* ===== SHARED: editor-window bar, live dot ===== */
.window-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 12px 16px;
    background: var(--surface-2); border-bottom: 1px solid var(--line);
}
.window-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.window-bar i:nth-child(2) { background: #febc2e; }
.window-bar i:nth-child(3) { background: #28c840; }
.window-bar span { margin-left: 10px; font: 12px var(--mono); color: var(--muted); }
.live-dot { display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: #22c55e; animation: pulseGreen 2s infinite; }
@keyframes pulseGreen { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } }

/* ===== ABOUT: code window + text ===== */
.about-card {
    display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center;
    max-width: 1100px;
}
.code-window {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
    box-shadow: 0 20px 45px var(--shadow);
    transform: rotate(-1.5deg); transition: transform .4s;
}
.code-window:hover { transform: rotate(0) translateY(-6px); }
.code-window pre { padding: 22px 20px; overflow-x: auto; font: 13px/1.9 var(--mono); color: var(--text); }
.code-window .k { color: var(--coral); }
.code-window .t { color: var(--amber); }
.code-window .s { color: #7ee2a8; }
.about-text { border-left: 3px solid var(--amber); padding-left: 28px; }
.about-text p { color: var(--muted); margin-bottom: 16px; }
.about-text p:first-child { color: var(--text); font-size: 19px; line-height: 1.6; }

/* ===== EDUCATION: degree card + CGPA ring ===== */
@property --p { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.timeline { position: relative; padding-left: 30px; }
.timeline::before {
    content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%;
    background: linear-gradient(var(--amber), var(--coral));
}
.timeline-item { position: relative; }
.timeline-dot { position: absolute; width: 14px; height: 14px; left: -37px; top: 8px; background: var(--amber); border-radius: 50%; animation: pulse 2s infinite; }
.timeline-content {
    position: relative; max-width: 850px; padding: 34px;
    display: grid; grid-template-columns: 1fr auto; gap: 10px 30px; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    border-top: 4px solid var(--amber);
}
.timeline-content > .date { grid-column: 1; font-family: var(--mono); font-size: 13px; color: var(--amber); letter-spacing: 1px; }
.timeline-content h3 { grid-column: 1; font-size: 26px; line-height: 1.2; margin: 0; }
.timeline-content h4 { grid-column: 1; color: var(--coral); font-weight: 500; margin: 0 0 8px; }
.timeline-content p { grid-column: 1; color: var(--muted); }
.cgpa-ring {
    --p: 296deg;
    grid-column: 2; grid-row: 1 / span 5;
    position: relative; width: 128px; height: 128px; border-radius: 50%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: conic-gradient(var(--amber) var(--p), var(--surface-2) 0);
}
.cgpa-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.cgpa-ring strong, .cgpa-ring small { position: relative; }
.cgpa-ring strong { font-size: 28px; line-height: 1; }
.cgpa-ring small { font: 11px var(--mono); color: var(--muted); letter-spacing: 2px; margin-top: 4px; }

/* ===== EXPERIENCE: role banner + numbered steps ===== */
.experience-card {
    max-width: 1000px; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    display: grid; grid-template-columns: 300px 1fr;
    transition: .35s;
}
.experience-card:hover { border-color: var(--amber); transform: translateY(-5px); }
.experience-header {
    display: flex; flex-direction: column; justify-content: space-between; gap: 30px;
    padding: 35px 30px;
    background: linear-gradient(160deg, var(--amber), var(--coral));
    color: var(--on-accent);
}
.experience-header h3 { font-size: 26px; line-height: 1.2; }
.experience-header h4 { margin-top: 8px; font-weight: 500; opacity: .85; }
.experience-header > span {
    align-self: flex-start; display: inline-flex; align-items: center;
    padding: 6px 14px; border-radius: 999px;
    background: rgba(0,0,0,.22); color: #fff; font: 12.5px var(--mono);
}
.experience-card ul { list-style: none; counter-reset: step; padding: 30px 32px; }
.experience-card li {
    counter-increment: step; position: relative;
    margin: 0 0 18px; padding-left: 46px; color: var(--muted);
}
.experience-card li::before {
    content: counter(step); position: absolute; left: 0; top: 1px;
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: 9px; background: var(--surface-2); border: 1px solid var(--line);
    font: 500 12px var(--mono); color: var(--amber);
}

/* ===== PROJECTS: window cards ===== */
.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.project-card {
    position: relative; padding: 0; overflow: hidden;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    transition: .35s;
}
.project-card > :not(.window-bar) { margin-left: 30px; margin-right: 30px; }
.project-card h3 { font-size: 23px; margin-top: 26px; margin-bottom: 14px; }
.project-card p { color: var(--muted); margin-bottom: 12px; }
.project-card::after {
    content: attr(data-n); position: absolute; right: 22px; bottom: -18px;
    font: 700 110px/1 var(--sans); color: var(--amber); opacity: .07; pointer-events: none;
    transition: opacity .35s, transform .35s;
}
.project-card:hover { transform: translateY(-8px); border-color: var(--amber); box-shadow: 0 18px 40px var(--shadow); }
.project-card:hover::after { opacity: .16; transform: translateY(-8px); }
.tech-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; margin-bottom: 30px; }
.tech-stack span {
    background: var(--surface-2); border: 1px solid var(--line);
    font: 12px var(--mono); color: var(--amber);
    padding: 5px 11px; border-radius: 999px; transition: .25s;
}
.tech-stack span:hover { background: var(--amber); color: var(--on-accent); transform: translateY(-3px); }

/* ===== SKILLS: category tabs (CSS only) + keyboard-key chips ===== */
.skills-container {
    display: grid; grid-template-columns: 270px 1fr; gap: 24px; align-items: stretch;
    max-width: 1100px;
}
.skills-container > input { position: absolute; opacity: 0; pointer-events: none; }

.skill-tabs { display: flex; flex-direction: column; gap: 10px; }
.skill-tabs label {
    position: relative; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-radius: 14px;
    background: var(--surface); border: 1px solid var(--line);
    font-weight: 600; color: var(--muted);
    transition: .3s;
}
.skill-tabs label::after { content: "\2192"; opacity: 0; transform: translateX(-8px); transition: .3s; }
.skill-tabs label:hover { color: var(--text); border-color: var(--amber); transform: translateX(4px); }
#sk1:checked ~ .skill-tabs label[for="sk1"], #sk2:checked ~ .skill-tabs label[for="sk2"], #sk3:checked ~ .skill-tabs label[for="sk3"], #sk4:checked ~ .skill-tabs label[for="sk4"] {
    background: linear-gradient(135deg, var(--amber), var(--coral));
    border-color: transparent; color: var(--on-accent);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--coral) 30%, transparent);
    transform: translateX(8px);
}
#sk1:checked ~ .skill-tabs label[for="sk1"]::after, #sk2:checked ~ .skill-tabs label[for="sk2"]::after, #sk3:checked ~ .skill-tabs label[for="sk3"]::after, #sk4:checked ~ .skill-tabs label[for="sk4"]::after { opacity: 1; transform: none; }
#sk1:focus-visible ~ .skill-tabs label[for="sk1"], #sk2:focus-visible ~ .skill-tabs label[for="sk2"], #sk3:focus-visible ~ .skill-tabs label[for="sk3"], #sk4:focus-visible ~ .skill-tabs label[for="sk4"] { outline: 2px solid var(--text); outline-offset: 3px; }

.skill-panels {
    position: relative; overflow: hidden; min-height: 300px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    background-image: radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--amber) 14%, transparent), transparent 55%);
}
.skill-category { display: none; padding: 40px; background: none; border: 0; border-radius: 0; }
#sk1:checked ~ .skill-panels .skill-category:nth-child(1), #sk2:checked ~ .skill-panels .skill-category:nth-child(2), #sk3:checked ~ .skill-panels .skill-category:nth-child(3), #sk4:checked ~ .skill-panels .skill-category:nth-child(4) { display: block; }
.skill-category h3 { margin: 0 0 30px; font-size: 30px; letter-spacing: -.5px; }
.skill-category h3::after { content: ""; display: block; width: 60px; height: 4px; margin-top: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--amber), var(--coral)); }
.skill-list { display: flex; flex-wrap: wrap; gap: 16px; }
.skill-list span {
    padding: 13px 22px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--line);
    box-shadow: 0 5px 0 var(--line);
    font: 500 15px var(--mono); color: var(--text);
    animation: keyPop .5s cubic-bezier(.2,.9,.3,1.3) backwards;
    transition: transform .15s, box-shadow .15s, color .15s, border-color .15s;
}
.skill-list span:nth-child(1) { animation-delay: 0.07s; }
.skill-list span:nth-child(2) { animation-delay: 0.14s; }
.skill-list span:nth-child(3) { animation-delay: 0.21s; }
.skill-list span:nth-child(4) { animation-delay: 0.28s; }
.skill-list span:nth-child(5) { animation-delay: 0.35s; }
.skill-list span:nth-child(6) { animation-delay: 0.42s; }
.skill-list span:hover { transform: translateY(4px); box-shadow: 0 1px 0 var(--amber); border-color: var(--amber); color: var(--amber); }
@keyframes keyPop { from { opacity: 0; transform: translateY(18px) scale(.9); } }

/* ===== CERTIFICATIONS: ticket cards ===== */
.certifications-wrapper {
    width: 100%; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.certification-scroll { display: flex; gap: 20px; width: max-content; padding: 20px 5px 30px; animation: certificateScroll 30s linear infinite; }
.certification-scroll:hover { animation-play-state: paused; }
.cert-card {
    position: relative; width: 270px; min-height: 180px; flex-shrink: 0;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
    padding: 24px 24px 24px 28px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    transition: .3s;
}
.cert-card::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--amber), var(--coral)); }
.cert-card::after {
    content: "\2713"; position: absolute; top: 16px; right: 16px;
    width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
    background: var(--surface-2); color: var(--amber); font-size: 13px;
}
.cert-card:hover { transform: translateY(-8px) rotate(-1deg); border-color: var(--amber); box-shadow: 0 12px 30px var(--shadow); }
.cert-issuer { align-self: flex-start; margin-bottom: auto; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); font: 11.5px var(--mono); color: var(--amber); letter-spacing: .5px; }
.cert-card h3 { font-size: 18px; line-height: 1.3; }
.cert-card p { color: var(--muted); font-size: 13px; }

/* ===== LANGUAGES: level dots ===== */
.language-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.language-card {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
    padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    transition: .35s;
}
.language-card:hover { transform: translateY(-5px); border-color: var(--amber); }
.language-card h3 { font-size: 22px; }
.language-card p { grid-column: 1; color: var(--amber); font: 13px var(--mono); }
.level { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 5px; }
.level i { width: 10px; height: 26px; border-radius: 5px; background: var(--line); transition: .3s; }
.l5 i, .l4 i:nth-child(-n+4), .l3 i:nth-child(-n+3) { background: linear-gradient(var(--amber), var(--coral)); }
.language-card:hover .level i { transform: scaleY(1.25); }

/* ===== LET'S CONNECT: spotlight CTA ===== */
.contact-section { padding-bottom: 120px; }
.contact-card {
    position: relative; overflow: hidden; text-align: center; padding: 70px 40px;
    background:
        radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 55%),
        radial-gradient(ellipse at 90% 100%, color-mix(in srgb, var(--coral) 16%, transparent), transparent 55%),
        var(--surface);
    border: 1px solid var(--line); border-radius: 24px;
}
.contact-card::before {
    content: "</>"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font: 700 clamp(120px, 26vw, 300px)/1 var(--mono); color: var(--text); opacity: .035; pointer-events: none;
}
.contact-card > * { position: relative; }
.status {
    display: inline-flex; align-items: center; margin-bottom: 24px;
    padding: 7px 16px; border-radius: 999px;
    background: var(--surface-2); border: 1px solid var(--line);
    font: 13px var(--mono); color: var(--text);
}
.status .live-dot { margin-right: 10px; }
.contact-card h3 { font-size: clamp(28px, 4.6vw, 46px); line-height: 1.15; letter-spacing: -1px; max-width: 760px; margin: 0 auto 16px; }
.contact-card h3 em { font-style: normal; background: linear-gradient(90deg, var(--amber), var(--coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.contact-card p { color: var(--muted); max-width: 560px; margin: 0 auto 34px; }
.contact-links { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.contact-links a {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 26px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
    transition: .3s;
}
.contact-links a span { transition: transform .3s; }
.contact-links a:hover { transform: translateY(-4px); border-color: var(--amber); }
.contact-links a:hover span { transform: translateX(5px); }
.contact-links a.primary { background: var(--amber); border-color: var(--amber); color: var(--on-accent); font-weight: 600; }
.contact-links a.primary:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--amber) 35%, transparent); }

/* Footer */
footer { border-top: 1px solid var(--line); padding: 40px 10%; text-align: center; background: var(--footer); }
.footer-content h3 { font-size: 25px; }
.footer-content > p { color: var(--muted); }
.footer-links { display: flex; justify-content: center; gap: 25px; margin: 20px 0; }
.footer-links a { color: var(--muted); transition: .3s; }
.footer-links a:hover { color: var(--amber); }
.copyright { font-size: 13px; }

/* ===== SCROLL REVEAL (pure CSS scroll-driven animations) ===== */
@keyframes reveal { from { opacity: 0; transform: translateY(40px); } }
@keyframes revealZoom { from { opacity: 0; transform: scale(.92) translateY(30px); } }
@keyframes drawLine { from { width: 0; } }
@keyframes drawTimeline { from { height: 0; } }
@keyframes ringFill { from { --p: 0deg; } }

@supports (animation-timeline: view()) {
    .projects-grid > *, .skills-container > *, .language-container > * {
        animation: reveal linear backwards;
        animation-timeline: view();
        animation-range: entry 0px entry 260px;
    }
    .projects-grid > :nth-child(even), .skills-container > :nth-child(even),
    .language-container > :nth-child(even) { animation-range: entry 48px entry 308px; }
    .language-container > :nth-child(3) { animation-range: entry 96px entry 356px; }

    .about-card, .timeline-content, .experience-card, .contact-card, .certifications-wrapper {
        animation: revealZoom linear backwards;
        animation-timeline: view();
        animation-range: entry 0px entry 260px;
    }
    .section-title::after {
        animation: drawLine linear backwards;
        animation-timeline: view();
        animation-range: entry 40px entry 300px;
    }
    .cgpa-ring { animation: ringFill linear backwards; animation-timeline: view(); animation-range: entry 40px entry 300px; }
    .timeline::before {
        animation: drawTimeline linear backwards;
        animation-timeline: view();
        animation-range: entry 0px cover 30%;
    }
}

/* ===== KEYFRAMES ===== */
@keyframes riseIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes dropIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
@keyframes floating { 50% { transform: translateY(-15px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,180,84,.6); } 70% { box-shadow: 0 0 0 12px rgba(255,180,84,0); } 100% { box-shadow: 0 0 0 0 rgba(255,180,84,0); } }
@keyframes certificateScroll { to { transform: translateX(-50%); } }

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) { .navbar nav { display: none; } }
@media (max-width: 1000px) {
    .navbar nav { display: none; }
    .hero { flex-direction: column-reverse; text-align: center; padding-top: 60px; }
    .hero-buttons, .social-links { justify-content: center; }
    .projects-grid, .skills-container { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .navbar { margin: 8px 3% 0; top: 8px; }
    .logo { font-size: 17px; }
    .section { padding: 70px 6%; }
    .hero { padding: 60px 6%; }
    .image-circle { width: 220px; height: 220px; }
    .hero h1 { font-size: 42px; }
    .hero h2 { font-size: 17px; }
    .section-title h2 { font-size: 28px; }
    .experience-header { flex-direction: column; }
    .language-container { grid-template-columns: 1fr; }
    .contact-card { padding: 30px 20px; }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
    .hero-content > *, .hero-image { opacity: 1; }
    .typed { width: auto; border-right: 0; }
    .preloader, .scroll-progress { display: none; }
    .navbar nav a { color: var(--text); }
}

@media (max-width: 1000px) {
    .about-card { grid-template-columns: 1fr; }
    .experience-card { grid-template-columns: 1fr; }
    .skills-container { grid-template-columns: 1fr; }
    .skill-tabs { flex-direction: row; flex-wrap: wrap; }
    .skill-tabs label { padding: 12px 18px; }
    .skill-tabs label::after { display: none; }
    .skill-category { padding: 28px 24px; }
}
@media (max-width: 600px) {
    .timeline-content { grid-template-columns: 1fr; }
    .cgpa-ring { grid-column: 1; grid-row: auto; margin-top: 12px; }
    .contact-card { padding: 50px 22px; }
}

/* ===== CURSOR (pure CSS custom cursors) ===== */
:root {
    --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffcb7a'/%3E%3Cstop offset='1' stop-color='%23ff6b4a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 3 L5 26 L10.5 21 L14.2 29.5 L18 27.8 L14.3 19.5 L21.5 19.5 Z' fill='url%28%23g%29' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
    --cur-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff8a5c'/%3E%3Cstop offset='1' stop-color='%23ffb454'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='12' r='11' fill='%23ffb454' fill-opacity='.22' stroke='%23ffb454' stroke-width='1.6'/%3E%3Cg transform='translate%289 9%29'%3E%3Cpath d='M5 3 L5 26 L10.5 21 L14.2 29.5 L18 27.8 L14.3 19.5 L21.5 19.5 Z' fill='url%28%23g%29' stroke='%23ffffff' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 14 12, pointer;
}
:root:has(#theme:checked) {
    --cur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23e2570f'/%3E%3Cstop offset='1' stop-color='%23be123c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 3 L5 26 L10.5 21 L14.2 29.5 L18 27.8 L14.3 19.5 L21.5 19.5 Z' fill='url%28%23g%29' stroke='%231d2129' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto;
    --cur-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23be123c'/%3E%3Cstop offset='1' stop-color='%23e2570f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='12' r='11' fill='%23c2410c' fill-opacity='.22' stroke='%23c2410c' stroke-width='1.6'/%3E%3Cg transform='translate%289 9%29'%3E%3Cpath d='M5 3 L5 26 L10.5 21 L14.2 29.5 L18 27.8 L14.3 19.5 L21.5 19.5 Z' fill='url%28%23g%29' stroke='%231d2129' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E") 14 12, pointer;
}
html, body { cursor: var(--cur); }
a, label, .btn, .theme-toggle, .skill-tabs label, .cert-card, .project-card, .language-card { cursor: var(--cur-link); }
pre, code { cursor: text; }

/* ===== WONDERFUL SCROLL ===== */
/* Living aurora background: drifts on its own, and is steered by scrolling where supported */
body::before {
    content: ""; position: fixed; inset: -25%; z-index: 0; pointer-events: none;
    background:
        radial-gradient(38% 38% at 18% 22%, color-mix(in srgb, var(--amber) 16%, transparent), transparent 70%),
        radial-gradient(34% 34% at 82% 68%, color-mix(in srgb, var(--coral) 14%, transparent), transparent 70%),
        radial-gradient(28% 28% at 55% 100%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 70%);
    animation: auroraIdle 26s ease-in-out infinite alternate;
}
@keyframes auroraIdle { to { transform: translate(4%, -6%) rotate(10deg) scale(1.1); } }
@keyframes auroraScroll { from { transform: translate(-6%, 8%) rotate(-12deg) scale(1); } to { transform: translate(8%, -14%) rotate(28deg) scale(1.3); } }

/* Hero */
.hero { position: relative; }

@keyframes fromLeft  { from { opacity: 0; transform: translateX(-60px); } }
@keyframes fromRight { from { opacity: 0; transform: translateX(60px); } }
@keyframes zoomRise  { from { opacity: 0; transform: translateY(44px) scale(.97); } }
@keyframes titleIn   { from { opacity: 0; transform: translateY(26px); } }
@keyframes heroOut   { to { opacity: 0; transform: translateY(-60px); } }
@keyframes heroImgOut { to { opacity: 0; transform: translateY(50px) scale(.94); } }

@supports (animation-timeline: view()) {
    body::before { animation: auroraScroll linear both; animation-timeline: scroll(root); }

    /* hero: gentle parallax as you scroll away */
    .hero-content { animation: heroOut linear both; animation-timeline: view(); animation-range: exit 0% exit 85%; }
    .hero-image { animation: zoomIn 1.1s 2.2s cubic-bezier(.2,.8,.2,1) forwards, heroImgOut linear both; animation-timeline: auto, view(); animation-range: normal, exit 0% exit 85%; }

    .section-title h2 { animation: titleIn linear backwards; animation-timeline: view(); animation-range: entry 0px entry 170px; }

    .about-card { animation: none; }
    .code-window, .timeline-content, .skill-tabs, .projects-grid > :nth-child(odd) { animation: fromLeft linear backwards; animation-timeline: view(); animation-range: entry 0px entry 260px; }
    .about-text, .skill-panels, .projects-grid > :nth-child(even) { animation: fromRight linear backwards; animation-timeline: view(); animation-range: entry 0px entry 260px; }
    .about-text { animation-range: entry 30px entry 290px; }
    .experience-card, .contact-card, .language-container > * { animation: zoomRise linear backwards; animation-timeline: view(); animation-range: entry 0px entry 260px; }
    .language-container > :nth-child(2) { animation-range: entry 40px entry 300px; }
    .language-container > :nth-child(3) { animation-range: entry 80px entry 340px; }
}