/* ==================================================
   Jayashankar — Portfolio stylesheet
   Base layer: tokens, layout, sections, components.
   Effects (cursor, preloader, reveals) live in effects.css.
================================================== */

:root {
    --primary: #6c63ff;
    --primary-hover: #5952d4;
    --background: #0b1120;
    --surface: #111827;
    --surface-secondary: #151e2e;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border: rgba(255, 255, 255, 0.08);

    --font-display: "Space Grotesk", "Inter", Arial, sans-serif;
    --font-body: "Inter", Arial, Helvetica, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;

    /* Reveals slide elements in from outside the viewport on
       small screens; clip that transient overflow at the root. */
    overflow-x: clip;
}


body {
    font-family: var(--font-body);
    background: var(--background);
    color: var(--text-primary);

    transition:
        background 0.3s ease,
        color 0.3s ease;

    overflow-x: hidden;
}


section {
    scroll-margin-top: 80px;
}


.section-padding {
    padding: 110px 0;
}


.section-alt {
    background: rgba(255, 255, 255, 0.015);
}


::selection {
    background: rgba(108, 99, 255, 0.4);
    color: #ffffff;
}


/* ---------- Focus visibility (a11y) ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;

    border-radius: 4px;
}


/* ---------- Scrollbar ---------- */

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


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


::-webkit-scrollbar-thumb {
    background: var(--surface-secondary);

    border-radius: 6px;

    border: 2px solid var(--background);
}


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


/* ==================================================
   NAVBAR
================================================== */

.navbar {
    padding: 18px 0;
    background: rgba(11, 17, 32, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}


.navbar-brand {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
}


.navbar-brand:hover {
    color: var(--text-primary);
}


.navbar-brand span {
    color: var(--primary);
}


.nav-link {
    color: var(--text-secondary);
    margin-left: 17px;
}


.nav-link:hover {
    color: var(--primary);
}


/* Active nav text: explicit per-theme colors so the active link
   can never fall back to Bootstrap's near-black emphasis color
   (--bs-navbar-active-color) and camouflage on the dark navbar. */

.navbar .navbar-nav .nav-link {
    --bs-navbar-color: var(--text-secondary);
    --bs-navbar-hover-color: var(--primary);
    --bs-navbar-active-color: var(--text-primary);
}


.navbar .navbar-nav .nav-link.active {
    color: var(--text-primary);
}


body.light-theme .navbar .navbar-nav .nav-link.active {
    color: #0f172a;
}


.theme-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;
    border: 1px solid var(--border);

    background: var(--surface);
    color: var(--text-primary);

    cursor: pointer;
}


/* ==================================================
   HERO
================================================== */

.hero-section {
    position: relative;
    overflow: hidden;
}


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

    position: absolute;

    width: 500px;
    height: 500px;

    top: -150px;
    right: -150px;

    border-radius: 50%;

    background: rgba(108, 99, 255, 0.12);

    filter: blur(100px);

    pointer-events: none;
}


.hero-intro {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    color: var(--primary);
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 600;
}


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

    width: 34px;
    height: 1.5px;

    background: var(--primary);
}


.hero-title {
    margin-top: 10px;

    font-family: var(--font-display);
    font-size: clamp(3rem, 7.5vw, 6.2rem);
    font-weight: 800;
    letter-spacing: -3px;
    line-height: 1.02;
}


.hero-title .text-gradient {
    background: linear-gradient(
        120deg,
        #f8fafc 20%,
        #b7b1ff 55%,
        #6c63ff 85%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;
}


.hero-role {
    min-height: 100px;
    margin-top: 15px;

    color: var(--text-secondary);

    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 500;
}


#typingText {
    color: var(--primary);
}


#typingText::after {
    content: "";

    display: inline-block;

    width: 2.5px;
    height: 1em;

    margin-left: 3px;

    background: var(--primary);

    vertical-align: -0.12em;

    animation: caret-blink 1.05s steps(1) infinite;
}


@keyframes caret-blink {

    50% {
        opacity: 0;
    }
}


.hero-description {
    max-width: 650px;
    margin-top: 25px;

    color: var(--text-secondary);

    font-size: 1.1rem;
    line-height: 1.8;
}


.hero-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;

    margin-top: 35px;
}


.btn-primary-custom,
.btn-outline-custom {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 13px 26px;
    border-radius: 10px;
    text-decoration: none;

    font-weight: 600;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}


.btn-primary-custom {
    position: relative;

    background: var(--primary);
    color: white;

    box-shadow: 0 14px 34px rgba(108, 99, 255, 0.32);
}


.btn-primary-custom:hover {
    background: var(--primary-hover);
    color: white;

    box-shadow: 0 18px 44px rgba(108, 99, 255, 0.4);
}


.btn-outline-custom {
    border: 1px solid var(--border);
    color: var(--text-primary);
}


.btn-outline-custom:hover {
    border-color: var(--primary);
    color: var(--primary);
}


.social-links {
    display: flex;
    gap: 18px;

    margin-top: 30px;
}


.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    color: var(--text-secondary);

    border: 1px solid var(--border);
    border-radius: 12px;

    font-size: 1.25rem;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}


.social-links a:hover {
    color: var(--primary);

    border-color: rgba(108, 99, 255, 0.5);

    transform: translateY(-4px) rotate(-4deg);
}


/* ==================================================
   CODE WINDOW / DEVELOPER CARD
================================================== */

.developer-card {
    width: 100%;
    max-width: 450px;
}


.code-window {
    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 14px;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}


.window-buttons {
    display: flex;
    gap: 8px;

    margin-bottom: 20px;
}


.window-buttons span {
    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--text-secondary);
}


.window-buttons span:nth-child(1) {
    background: #f87171;
}

.window-buttons span:nth-child(2) {
    background: #fbbf24;
}

.window-buttons span:nth-child(3) {
    background: #4ade80;
}


.code-window pre {
    margin: 0;

    color: var(--text-secondary);

    font-family: var(--font-mono);

    font-size: 0.85rem;

    line-height: 1.7;

    white-space: pre-wrap;
}


.code-purple {
    color: #c084fc;
}


.code-green {
    color: #4ade80;
}


.code-blue {
    color: #60a5fa;
}


.code-orange {
    color: #fbbf24;
}


/* ==================================================
   SECTION HEADINGS
================================================== */

.section-heading {
    margin-bottom: 60px;
    text-align: center;
}


.section-heading p {
    margin-bottom: 5px;

    color: var(--primary);

    font-family: var(--font-mono);

    font-size: 0.92rem;
}


.section-heading p::before {
    content: "// ";
}


.section-heading h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
}


/* ==================================================
   ABOUT
================================================== */

.about-card {
    position: relative;

    padding: 30px;

    text-align: center;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 16px;
}


.about-name {
    margin-top: 22px;

    font-family: var(--font-display);

    font-size: 1.45rem;
}


.about-role {
    margin: 4px 0 0;

    color: var(--primary);

    font-family: var(--font-mono);

    font-size: 0.85rem;
}


.about-card-meta {
    display: flex;

    flex-direction: column;

    gap: 9px;

    margin-top: 20px;

    padding-top: 20px;

    border-top: 1px solid var(--border);
}


.about-card-meta span {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: var(--text-secondary);

    font-size: 0.85rem;
}


.about-card-meta i {
    color: var(--primary);
}


.profile-image-wrapper {
    position: relative;

    width: 320px;
    height: 320px;

    margin: auto;
    padding: 7px;

    background: var(--surface);

    border: 3px solid var(--primary);
    border-radius: 50%;

    overflow: hidden;

    box-shadow:
        0 0 0 8px rgba(108, 99, 255, 0.08),
        0 20px 50px rgba(0, 0, 0, 0.3);
}


.profile-image-wrapper::before {
    content: "";

    position: absolute;
    inset: -60%;

    background: conic-gradient(
        transparent 0 65%,
        rgba(108, 99, 255, 0.55) 82%,
        transparent 92%
    );

    animation: profile-ring 6s linear infinite;
}


.profile-image-wrapper img {
    position: relative;

    z-index: 1;
}


@keyframes profile-ring {

    to {
        transform: rotate(360deg);
    }
}


.profile-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;

    transition:
        opacity 0.35s ease,
        transform 0.4s ease;
}


.profile-image-wrapper:hover .profile-image {
    transform: scale(1.06);
}


@media (max-width: 576px) {

    .profile-image-wrapper {
        width: 250px;
        height: 250px;
    }
}


.about-title {
    margin-bottom: 25px;

    font-family: var(--font-display);

    font-size: 2rem;
}


.about-text {
    color: var(--text-secondary);

    line-height: 1.9;
}


.about-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 16px;

    margin-top: 28px;
}


.about-info > div {
    padding: 20px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 12px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}


.about-info > div:hover {
    transform: translateY(-4px);

    border-color: rgba(108, 99, 255, 0.45);
}


.about-info i {
    color: var(--primary);
    font-size: 1.7rem;
}


.about-info h4 {
    margin-top: 12px;
    font-size: 1rem;
}


.about-info p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 0.85rem;
}


/* Focus chips under the About intro. */

.about-focus-chips {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 22px;
}


.about-focus-chips span {
    padding: 8px 15px;

    background: var(--surface-secondary);

    border: 1px solid var(--border);
    border-radius: 100px;

    color: var(--text-primary);

    font-size: 0.82rem;
    font-weight: 600;

    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.about-focus-chips span:hover {
    border-color: rgba(108, 99, 255, 0.55);

    color: var(--primary);

    transform: translateY(-3px);
}


/* ==================================================
   SKILLS
================================================== */

.skill-card {
    height: 100%;

    padding: 28px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 16px;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}


.skill-card:hover {
    transform: translateY(-6px);

    border-color: rgba(108, 99, 255, 0.5);
}


.skill-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 22px;

    background: rgba(108, 99, 255, 0.12);

    color: var(--primary);

    border-radius: 12px;

    font-size: 1.5rem;
}


.skill-card h3 {
    margin-bottom: 20px;
    font-size: 1.2rem;
}


.skill-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}


.skill-tags span {
    padding: 7px 11px;

    background: var(--surface-secondary);

    color: var(--text-secondary);

    border: 1px solid var(--border);
    border-radius: 7px;

    font-size: 0.8rem;
}


/* ==================================================
   PROJECT FILTERS
================================================== */

.project-filters {
    display: flex;
    justify-content: center;

    gap: 12px;

    flex-wrap: wrap;

    margin-bottom: 45px;
}


.filter-btn {
    padding: 9px 18px;

    background: var(--surface);

    color: var(--text-secondary);

    border: 1px solid var(--border);
    border-radius: 30px;

    cursor: pointer;

    font-size: 0.88rem;
    font-weight: 500;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}


.filter-btn:hover,
.filter-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}


.project-item.hide {
    display: none;
}


/* ==================================================
   SECTION LEAD
================================================== */

.section-lead {

    max-width: 640px;

    margin: 14px auto 0;

    text-align: center;

    color: var(--text-secondary);

    font-size: 1rem;

    line-height: 1.7;
}


/* ==================================================
   PROJECT SLABS — premium directory rows
================================================== */

.project-slabs {
    display: flex;

    flex-direction: column;

    gap: 18px;

    max-width: 1060px;

    margin: 60px auto 0;
}


.project-slab {
    position: relative;

    display: grid;

    grid-template-columns: 92px 1fr auto;

    align-items: center;

    gap: 28px;

    padding: 36px 40px;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 18px;

    overflow: hidden;

    cursor: pointer;

    transform-style: preserve-3d;

    will-change: transform;

    transition:
        transform 0.25s ease-out,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* Cursor-reactive wash (JS feeds --pointer-x/--pointer-y). */

.project-slab::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background: radial-gradient(
        620px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        rgba(108, 99, 255, 0.13),
        transparent 45%
    );

    opacity: 0;

    transition: opacity 0.4s ease;

    pointer-events: none;
}


.project-slab:hover::before {
    opacity: 1;
}


/* Animated sheen border on hover. */

.project-slab::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background: linear-gradient(
        115deg,
        rgba(108, 99, 255, 0) 25%,
        rgba(139, 133, 255, 0.75) 50%,
        rgba(108, 99, 255, 0) 75%
    );

    background-size: 240% 100%;

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    opacity: 0;

    pointer-events: none;

    animation: slab-sheen 2.6s linear infinite paused;
}


.project-slab:hover::after {
    opacity: 1;

    animation-play-state: running;
}


@keyframes slab-sheen {

    from { background-position: 130% 0; }
    to { background-position: -130% 0; }
}


.project-slab:hover {
    border-color: rgba(108, 99, 255, 0.55);

    box-shadow:
        0 26px 60px rgba(3, 6, 18, 0.5),
        0 0 44px rgba(108, 99, 255, 0.14);
}


/* Featured trio (01–03) carry the strongest presence. */

.slab-emphasis {
    padding: 44px;

    background:
        linear-gradient(
            180deg,
            rgba(108, 99, 255, 0.06),
            rgba(108, 99, 255, 0) 60%
        ),
        var(--surface);
}


.slab-index {
    font-family: var(--font-mono);

    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.08em;

    color: var(--text-secondary);

    opacity: 0.55;

    transition:
        color 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}


.slab-emphasis .slab-index {
    font-size: 1.55rem;

    background: linear-gradient(
        120deg,
        var(--text-primary) 20%,
        var(--primary) 90%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
    color: transparent;

    opacity: 1;
}


.project-slab:hover .slab-index {
    transform: translateY(-3px);

    opacity: 1;
}


.slab-main {
    position: relative;
    z-index: 1;

    min-width: 0;
}


.slab-title-row {
    display: flex;

    align-items: center;

    gap: 16px;

    flex-wrap: wrap;
}


.slab-name {
    font-family: var(--font-display);

    font-size: 1.55rem;
    font-weight: 700;

    transition: color 0.3s ease;
}


.slab-emphasis .slab-name {
    font-size: 2.05rem;
}


.project-slab:hover .slab-name {
    color: #c9c5ff;
}


/* Status chips. */

.slab-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 6px 13px;

    border-radius: 999px;

    font-family: var(--font-mono);

    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;

    white-space: nowrap;
}


.slab-status-live {
    color: #4ade80;

    background: rgba(74, 222, 128, 0.08);

    border: 1px solid rgba(74, 222, 128, 0.4);
}


.slab-status-building {
    color: #fbbf24;

    background: rgba(251, 191, 36, 0.08);

    border: 1px solid rgba(251, 191, 36, 0.4);

    animation: slab-building-pulse 2.6s ease-in-out infinite;
}


@keyframes slab-building-pulse {

    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.3); }
    50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
}


.slab-status-done {
    color: var(--text-secondary);

    background: rgba(148, 163, 184, 0.07);

    border: 1px solid var(--border);
}


.slab-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #fbbf24;
}


/* Shared pulsing live dot (slabs + detail view). */

.live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #4ade80;

    animation: live-blink 1.6s ease-in-out infinite;
}


@keyframes live-blink {

    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
    50% { opacity: 0.55; box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}


.slab-subtitle {
    margin-top: 8px;

    color: var(--text-secondary);

    font-size: 0.98rem;
}


.slab-emphasis .slab-subtitle {
    color: var(--primary);

    font-weight: 600;
}


.slab-tech {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 18px;
}


.slab-tech span {
    padding: 6px 11px;

    background: rgba(108, 99, 255, 0.12);

    color: #b3aeff;

    border-radius: 6px;

    font-size: 0.75rem;
    font-weight: 600;

    transition:
        transform 0.25s ease,
        color 0.25s ease;
}


.project-slab:hover .slab-tech span {
    transform: translateY(-2px);
}


.slab-side {
    position: relative;
    z-index: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 12px;
}


.slab-open {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    font-family: var(--font-mono);

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;

    color: var(--text-primary);

    padding-bottom: 4px;

    border-bottom: 1px solid rgba(108, 99, 255, 0.4);

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        gap 0.3s ease;
}


.slab-open i {
    transition: transform 0.3s ease;
}


.project-slab:hover .slab-open {
    color: var(--primary);

    border-color: var(--primary);

    gap: 13px;
}


.project-slab:hover .slab-open i {
    transform: translateX(4px);
}


/* ==================================================
   PROJECT DETAIL VIEW — full-screen premium panel
================================================== */

body.detail-view-open {
    overflow: hidden;
}


#projectDetailOverlay {
    position: fixed;

    inset: 0;

    z-index: 150000;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


#projectDetailOverlay.detail-open {
    opacity: 1;
    visibility: visible;
}


.detail-backdrop {
    position: absolute;

    inset: 0;

    background: rgba(2, 6, 16, 0.75);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


.detail-panel {
    position: absolute;

    inset: 0;

    background: var(--background);

    transform: translateY(56px) scale(0.99);

    opacity: 0;

    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease;
}


#projectDetailOverlay.detail-open .detail-panel {
    transform: none;
    opacity: 1;
}


/* Force-finish safety: if transitions are throttled
   (webview), jump straight to the final state. */

#projectDetailOverlay.detail-open.detail-settled .detail-panel {
    transition: none;

    transform: none;
    opacity: 1;
}


.detail-chrome {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 5;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 24px 34px;

    background: linear-gradient(
        180deg,
        rgba(11, 17, 32, 0.9),
        rgba(11, 17, 32, 0)
    );

    pointer-events: none;
}


.detail-chrome > * {
    pointer-events: auto;
}


.detail-back {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 16px;

    background: rgba(17, 24, 39, 0.7);

    color: var(--text-primary);

    border: 1px solid var(--border);
    border-radius: 999px;

    font-family: var(--font-mono);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;

    cursor: pointer;

    backdrop-filter: blur(6px);

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        gap 0.3s ease;
}


.detail-back i {
    transition: transform 0.3s ease;
}


.detail-back:hover {
    color: var(--primary);

    border-color: rgba(108, 99, 255, 0.5);

    gap: 14px;
}


.detail-back:hover i {
    transform: translateX(-4px);
}


.detail-close {
    display: flex;

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

    width: 46px;
    height: 46px;

    background: rgba(17, 24, 39, 0.7);

    color: var(--text-primary);

    border: 1px solid var(--border);
    border-radius: 50%;

    font-size: 1.05rem;

    cursor: pointer;

    backdrop-filter: blur(6px);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}


.detail-close:hover {
    transform: rotate(90deg);

    color: var(--primary);

    border-color: rgba(108, 99, 255, 0.5);
}


.detail-scroll {
    position: absolute;

    inset: 0;

    overflow-y: auto;

    padding: 108px 0 70px;
}


.detail-body {
    max-width: 900px;

    margin: 0 auto;

    padding: 0 34px;
}


.detail-eyebrow {
    font-family: var(--font-mono);

    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.22em;

    color: var(--primary);
}


.detail-title {
    margin-top: 14px;

    font-family: var(--font-display);

    font-size: clamp(2.4rem, 6.5vw, 4.2rem);
    font-weight: 800;
    letter-spacing: -2px;
    line-height: 1.02;
}


.detail-subtitle {
    margin-top: 14px;

    color: var(--text-secondary);

    font-size: 1.15rem;
    line-height: 1.6;
}


.detail-status-row {
    display: flex;

    align-items: center;

    gap: 14px;

    flex-wrap: wrap;

    margin-top: 24px;
}


.detail-status {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 15px;

    border-radius: 999px;

    font-family: var(--font-mono);

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}


.detail-status-live {
    color: #4ade80;

    background: rgba(74, 222, 128, 0.08);

    border: 1px solid rgba(74, 222, 128, 0.4);
}


.detail-status-building {
    color: #fbbf24;

    background: rgba(251, 191, 36, 0.08);

    border: 1px solid rgba(251, 191, 36, 0.4);
}


.detail-status-done {
    color: var(--text-secondary);

    background: rgba(148, 163, 184, 0.07);

    border: 1px solid var(--border);
}


.detail-status-note {
    color: var(--text-secondary);

    font-size: 0.9rem;
}


.detail-section {
    margin-top: 44px;
}


.detail-section + .detail-section {
    padding-top: 44px;

    border-top: 1px solid var(--border);
}


.detail-heading {
    margin-bottom: 20px;

    font-family: var(--font-mono);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.2em;

    color: var(--primary);
}


.detail-heading::before {
    content: "// ";
}


.detail-text {
    max-width: 780px;

    color: var(--text-secondary);

    font-size: 1rem;

    line-height: 1.85;
}


.detail-text + .detail-text {
    margin-top: 14px;
}


.detail-features {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px 32px;

    margin: 0;
    padding: 0;

    list-style: none;
}


.detail-features li {
    position: relative;

    padding-left: 24px;

    color: var(--text-secondary);

    font-size: 0.95rem;

    line-height: 1.6;
}


.detail-features li::before {
    content: "▸";

    position: absolute;

    left: 0;

    color: var(--primary);

    font-size: 0.85rem;
}


.detail-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.detail-tag {
    padding: 8px 14px;

    background: rgba(108, 99, 255, 0.1);

    color: #b3aeff;

    border: 1px solid rgba(108, 99, 255, 0.25);
    border-radius: 8px;

    font-family: var(--font-mono);

    font-size: 0.78rem;
    font-weight: 600;

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 0.45s ease,
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


#projectDetailOverlay.detail-open .detail-tag {
    opacity: 1;
    transform: none;
}


#projectDetailOverlay.detail-open.detail-settled .detail-tag {
    transition: none;

    opacity: 1;
    transform: none;
}


.detail-links-row {
    display: flex;

    flex-wrap: wrap;

    gap: 14px;
}


.detail-cta {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 15px 26px;

    border-radius: 12px;

    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.04em;

    text-decoration: none;

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


.detail-cta i {
    transition: transform 0.3s ease;
}


.detail-cta:hover i {
    transform: translate(3px, -3px);
}


.detail-cta-live {
    color: #4ade80;

    background: rgba(74, 222, 128, 0.09);

    border: 1px solid rgba(74, 222, 128, 0.45);
}


.detail-cta-live:hover {
    transform: translateY(-3px);

    background: rgba(74, 222, 128, 0.16);

    box-shadow: 0 14px 34px rgba(74, 222, 128, 0.18);
}


.detail-cta-github {
    color: white;

    background: var(--primary);

    box-shadow: 0 14px 34px rgba(108, 99, 255, 0.32);
}


.detail-cta-github:hover {
    transform: translateY(-3px);

    background: var(--primary-hover);

    color: white;

    box-shadow: 0 18px 44px rgba(108, 99, 255, 0.42);
}


.detail-footer {
    margin-top: 58px;

    padding-top: 30px;

    border-top: 1px solid var(--border);
}


.detail-next {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 0;

    background: transparent;
    border: 0;

    font-family: var(--font-mono);

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;

    color: var(--text-secondary);

    cursor: pointer;

    transition:
        color 0.3s ease,
        gap 0.3s ease;
}


.detail-next-name {
    color: var(--text-primary);

    transition: color 0.3s ease;
}


.detail-next i {
    transition: transform 0.3s ease;
}


.detail-next:hover {
    color: var(--primary);

    gap: 16px;
}


.detail-next:hover .detail-next-name {
    color: var(--primary);
}


.detail-next:hover i {
    transform: translateX(5px);
}


/* ==================================================
   ACHIEVEMENTS — milestone / large-number layout
================================================== */

.achievement-milestones {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;

    max-width: 1150px;

    margin: 0 auto;
}


.milestone {
    position: relative;

    padding: 34px 30px 30px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 18px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.milestone::before {
    content: "";

    position: absolute;
    inset: 0;

    background: radial-gradient(
        420px circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
        rgba(108, 99, 255, 0.1),
        transparent 45%
    );

    opacity: 0;

    transition: opacity 0.35s ease;

    pointer-events: none;
}


.milestone:hover::before {
    opacity: 1;
}


.milestone:hover {
    transform: translateY(-6px);

    border-color: rgba(108, 99, 255, 0.5);

    box-shadow: 0 22px 48px rgba(3, 6, 18, 0.45);
}


/* Giant ghost number — fills with accent on hover. */

.milestone-number {
    position: absolute;

    top: 10px;
    right: 20px;

    font-family: var(--font-display);

    font-size: 4.4rem;

    font-weight: 800;

    line-height: 1;

    color: rgba(108, 99, 255, 0.07);

    -webkit-text-stroke: 1px rgba(108, 99, 255, 0.3);

    transition:
        color 0.35s ease,
        -webkit-text-stroke-color 0.35s ease,
        transform 0.35s ease;

    pointer-events: none;
}


.milestone:hover .milestone-number {
    transform: translateY(-5px);

    color: rgba(108, 99, 255, 0.16);

    -webkit-text-stroke-color: rgba(108, 99, 255, 0.65);
}


.milestone-range {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 16px;

    font-family: var(--font-mono);

    font-size: 0.76rem;
    font-weight: 600;

    letter-spacing: 0.06em;

    color: var(--primary);
}


.milestone-title {
    position: relative;
    z-index: 1;

    margin-bottom: 12px;

    font-family: var(--font-display);

    font-size: 1.25rem;

    font-weight: 700;
}


.milestone-text {
    position: relative;
    z-index: 1;

    margin-bottom: 0;

    color: var(--text-secondary);

    font-size: 0.94rem;

    line-height: 1.7;
}


/* Long-term feature entry (Outstanding Student). */

.milestone-feature {
    grid-column: span 2;

    background:
        linear-gradient(
            135deg,
            rgba(108, 99, 255, 0.1),
            rgba(108, 99, 255, 0) 55%
        ),
        var(--surface);
}


.milestone-feature .milestone-title {
    font-size: 1.65rem;
}


.milestone-head {
    position: relative;
    z-index: 1;

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 12px 16px;

    margin-bottom: 14px;

    padding-right: 96px;
}


.milestone-head .milestone-range {
    margin-bottom: 0;
}


.milestone-tag {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 6px 13px;

    background: rgba(108, 99, 255, 0.12);

    border: 1px solid rgba(108, 99, 255, 0.3);

    border-radius: 999px;

    color: #b3aeff;

    font-size: 0.74rem;
    font-weight: 600;
}


/* ==================================================
   RECENT HIGHLIGHTS — story timeline
================================================== */

.highlights-timeline {
    position: relative;

    max-width: 980px;

    margin: 64px auto 0;

    padding: 8px 0 4px;
}


/* The spine connecting every entry. */

.highlights-timeline::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 249px;

    width: 1px;

    background: linear-gradient(
        180deg,
        transparent,
        rgba(108, 99, 255, 0.28) 12%,
        rgba(108, 99, 255, 0.28) 88%,
        transparent
    );
}


.highlight-entry {
    position: relative;

    display: grid;

    grid-template-columns: 190px 120px 1fr;

    align-items: start;

    padding: 34px 0;
}


.highlight-entry + .highlight-entry {

    border-top: 1px solid var(--border);
}


/* ---------- Date column ---------- */

.highlight-when {

    display: flex;

    flex-direction: column;

    gap: 6px;

    padding-top: 4px;

    text-align: right;
}


.highlight-year {

    font-family: var(--font-display);

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--text-primary);

    line-height: 1;
}


.highlight-context {

    font-family: var(--font-mono);

    font-size: 0.68rem;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--text-secondary);
}


/* ---------- Spine dot ---------- */

.highlight-dot {
    position: relative;

    justify-self: center;

    width: 13px;
    height: 13px;

    margin-top: 8px;

    border-radius: 50%;

    background: var(--background);

    border: 2px solid rgba(108, 99, 255, 0.55);

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.highlight-entry:hover .highlight-dot {

    background: var(--primary);

    border-color: var(--primary);

    box-shadow: 0 0 0 5px rgba(108, 99, 255, 0.16);
}


/* ---------- Story body ---------- */

.highlight-body {
    position: relative;

    padding-left: 46px;
}


.highlight-kind {
    display: inline-block;

    margin-bottom: 10px;

    font-family: var(--font-mono);

    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.2em;

    color: var(--primary);
}


.highlight-title {
    font-family: var(--font-display);

    font-size: 1.35rem;

    font-weight: 700;

    line-height: 1.25;
}


.highlight-desc {
    margin: 12px 0 0;

    max-width: 620px;

    color: var(--text-secondary);

    font-size: 0.98rem;

    line-height: 1.75;
}


/* ---------- Actions ---------- */

.highlight-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 12px 26px;

    margin-top: 18px;
}


.highlight-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-mono);

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.12em;

    color: var(--primary);

    text-decoration: none;

    padding-bottom: 3px;

    border-bottom: 1px solid rgba(108, 99, 255, 0.35);

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        gap 0.3s ease;
}


.highlight-link i {

    transition: transform 0.3s ease;
}


.highlight-link:hover {

    color: #8b84ff;

    border-color: #8b84ff;

    gap: 12px;
}


.highlight-link:hover i {

    transform: translate(3px, -3px);
}


/* ---------- Featured (first) entry ---------- */

.highlight-feature {

    padding: 44px 0 40px;
}


.highlight-feature .highlight-year {

    font-size: 1.9rem;

    color: var(--primary);
}


.highlight-feature .highlight-title {

    font-size: 1.7rem;
}


.highlight-feature .highlight-desc {

    font-size: 1.02rem;
}


.highlight-feature .highlight-dot {

    width: 17px;
    height: 17px;

    margin-top: 6px;

    background: var(--primary);

    box-shadow: 0 0 0 5px rgba(108, 99, 255, 0.14);
}


.highlights-empty {
    max-width: 640px;

    margin: 48px auto 0;

    padding: 26px 30px;

    text-align: center;

    color: var(--text-secondary);

    font-size: 0.95rem;

    border: 1px dashed var(--border);

    border-radius: 14px;
}


/* ==================================================
   CONTACT
================================================== */

.contact-wrapper {
    max-width: 1000px;
    margin: auto;
}


.contact-content {
    position: relative;

    padding: 45px;

    text-align: center;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 18px;

    overflow: hidden;
}


/* Soft aurora behind the contact CTA. */

.contact-content::before {
    content: "";

    position: absolute;

    top: -140px;
    left: 50%;

    width: 520px;
    height: 340px;

    background: radial-gradient(
        ellipse at center,
        rgba(108, 99, 255, 0.16),
        transparent 65%
    );

    transform: translateX(-50%);

    pointer-events: none;
}


.contact-content > * {
    position: relative;
}


.contact-content h3 {
    font-family: var(--font-display);

    font-size: 2.1rem;
    font-weight: 700;
}


.contact-content > p {
    max-width: 700px;

    margin: 18px auto 35px;

    color: var(--text-secondary);

    line-height: 1.8;
}


/* Big CTA under the heading. */

.contact-cta {
    margin-bottom: 38px;
}


.contact-cta-button {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 16px 34px;

    background: var(--primary);

    color: white;

    border: 0;
    border-radius: 12px;

    font-size: 1.02rem;
    font-weight: 700;
    text-decoration: none;

    box-shadow: 0 18px 44px rgba(108, 99, 255, 0.35);

    transition:
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.contact-cta-button:hover {
    background: var(--primary-hover);

    color: white;

    box-shadow: 0 22px 54px rgba(108, 99, 255, 0.45);
}


.contact-cta-button .arrow {
    display: inline-block;

    transition: transform 0.3s ease;
}


.contact-cta-button:hover .arrow {
    transform: translateX(5px);
}


.contact-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;

    margin-top: 10px;
}


.contact-links > a {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 18px;

    text-align: left;

    background: var(--surface-secondary);

    color: var(--text-primary);

    border: 1px solid var(--border);
    border-radius: 12px;

    text-decoration: none;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}


.contact-links > a:hover {
    border-color: var(--primary);

    transform: translateY(-3px);
}


.contact-links i {
    color: var(--primary);

    font-size: 1.5rem;
}


.contact-links span,
.contact-links strong {
    display: block;
}


.contact-links span {
    color: var(--text-secondary);

    font-size: 0.75rem;
}


.contact-links strong {
    overflow-wrap: anywhere;

    font-size: 0.85rem;
}


/* Copy-to-clipboard email chip. */

.copy-email {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    margin-top: 24px;

    padding: 10px 18px;

    background: var(--surface-secondary);

    color: var(--text-secondary);

    border: 1px solid var(--border);
    border-radius: 100px;

    font-family: var(--font-mono);

    font-size: 0.8rem;

    cursor: pointer;

    transition:
        border-color 0.3s ease,
        color 0.3s ease;
}


.copy-email:hover {
    border-color: rgba(108, 99, 255, 0.5);

    color: var(--text-primary);
}


.copy-email.copied {
    border-color: rgba(74, 222, 128, 0.6);

    color: #4ade80;
}


/* ==================================================
   FOOTER
================================================== */

.footer {
    padding: 34px 0;

    border-top: 1px solid var(--border);
}


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

    gap: 18px;

    flex-wrap: wrap;
}


.footer-brand {
    font-family: var(--font-display);

    font-weight: 700;
}


.footer-brand span {
    color: var(--primary);
}


.footer-sub {
    margin: 4px 0 0;

    color: var(--text-secondary);

    font-size: 0.85rem;
}


.footer p {
    margin: 0;

    color: var(--text-secondary);
}


.footer span {
    color: var(--primary);
}


.footer a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;

    background: var(--surface);

    color: var(--primary);

    border: 1px solid var(--border);
    border-radius: 50%;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}


.footer a:hover {
    transform: translateY(-4px);

    border-color: rgba(108, 99, 255, 0.5);
}


.footer a i {
    transition: transform 0.3s ease;
}


.footer a:hover i {
    transform: translateY(-3px);
}


.footer-social {
    display: flex;

    gap: 12px;
}


/* ==================================================
   AUTOMATIC IMAGE LOADING
================================================== */

.auto-image {
    opacity: 0;

    transition: opacity 0.4s ease;
}


.auto-image.image-loaded {
    opacity: 1;
}


.image-not-found {
    display: none;
}


/* ==================================================
   LIGHT THEME
================================================== */

body.light-theme {
    --background: #f8fafc;
    --surface: #ffffff;
    --surface-secondary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --border: rgba(15, 23, 42, 0.12);
}


body.light-theme .navbar {
    background: rgba(248, 250, 252, 0.9);
}


body.light-theme .hero-title .text-gradient {
    background: linear-gradient(
        120deg,
        #0f172a 20%,
        #4b44d4 60%,
        #6c63ff 85%
    );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


body.light-theme #developerCard .code-window {
    background: linear-gradient(
        155deg,
        #ffffff,
        #f4f6fb
    );
}


body.light-theme .card-depth-badge {
    background: rgba(255, 255, 255, 0.9);

    border-color: rgba(15, 23, 42, 0.2);

    color: #0f172a;
}


body.light-theme .slab-tech span,
body.light-theme .detail-tag,
body.light-theme .milestone-tag {
    color: var(--primary-hover);
}


body.light-theme .detail-back,
body.light-theme .detail-close {
    background: rgba(255, 255, 255, 0.82);
}


body.light-theme .detail-chrome {
    background: linear-gradient(
        180deg,
        rgba(248, 250, 252, 0.92),
        rgba(248, 250, 252, 0)
    );
}


body.light-theme .certifications-empty {
    border-color: rgba(15, 23, 42, 0.15);
}


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

@media (max-width: 991px) {

    .hero-section {
        text-align: center;
    }

    .hero-intro {
        justify-content: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .social-links {
        justify-content: center;
    }

    .about-info {
        grid-template-columns: 1fr;
    }

    .navbar-collapse {
        margin-top: 15px;
        padding: 20px;

        background: var(--surface);

        border: 1px solid var(--border);
        border-radius: 12px;
    }

    .nav-link {
        margin-left: 0;
    }

    #navIndicator {
        display: none;
    }

    #cursorSpotlight {
        display: none;
    }

    .achievement-milestones {
        grid-template-columns: repeat(2, 1fr);
    }

    .highlights-timeline {
        padding: 0;
    }

    .highlights-timeline::before {

        left: 11px;
    }

    .highlight-entry {

        grid-template-columns: 24px 1fr;

        padding: 28px 0;
    }

    .highlight-when {

        grid-column: 2;

        grid-row: 1;

        flex-direction: row;

        align-items: baseline;

        gap: 12px;

        padding: 0 0 0 34px;

        text-align: left;
    }

    .highlight-year {

        font-size: 1.15rem;
    }

    .highlight-dot {

        grid-column: 1;

        grid-row: 1;

        justify-self: start;

        margin-top: 5px;
        margin-left: 5px;
    }

    .highlight-body {

        grid-column: 2;

        grid-row: 2;

        padding: 14px 0 0 34px;
    }

    .highlight-feature .highlight-title {

        font-size: 1.4rem;
    }

    .slab-emphasis {
        padding: 36px 32px;
    }

    .slab-emphasis .slab-name {
        font-size: 1.7rem;
    }
}


@media (max-width: 767px) {

    .contact-links {
        grid-template-columns: 1fr;
    }

    .project-slab {
        grid-template-columns: 1fr;

        gap: 14px;

        padding: 26px 22px;
    }

    .slab-index {
        position: absolute;

        top: 22px;
        right: 22px;

        font-size: 0.85rem;
    }

    .slab-emphasis .slab-index {
        font-size: 1.05rem;
    }

    .slab-title-row {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;

        padding-right: 64px;
    }

    .slab-name {
        font-size: 1.35rem;
    }

    .slab-emphasis .slab-name {
        font-size: 1.6rem;
    }

    .slab-side {
        align-items: flex-start;
    }

    .slab-emphasis {
        padding: 30px 24px;
    }

    .achievement-milestones {
        grid-template-columns: 1fr;
    }

    .milestone-feature {
        grid-column: span 1;
    }

    .milestone-head {
        padding-right: 0;
    }

    .milestone-number {
        font-size: 3.2rem;
    }

    .highlight-entry {

        padding: 24px 0;
    }

    .highlight-body {

        padding-right: 4px;
    }

    .highlight-title {

        font-size: 1.2rem;
    }

    .highlight-feature .highlight-title {

        font-size: 1.25rem;
    }

    .highlight-actions {

        flex-direction: column;

        gap: 12px;

        align-items: flex-start;
    }

    .detail-features {
        grid-template-columns: 1fr;
    }

    .detail-body {
        padding: 0 22px;
    }

    .detail-scroll {
        padding: 96px 0 60px;
    }

    .detail-chrome {
        padding: 16px 18px;
    }

    .detail-title {
        letter-spacing: -1px;
    }

    #scrollProgress {
        display: none;
    }

    #heroParticles {
        opacity: 0.55;
    }

    .section-padding {
        padding: 78px 0;
    }
}


@media (max-width: 576px) {

    .hero-title {
        letter-spacing: -1px;
    }

    .hero-role {
        min-height: 120px;
    }

    .profile-placeholder {
        font-size: 9rem;
    }

    .contact-content {
        padding: 28px 20px;
    }

    .hero-intro::before {
        display: none;
    }
}


/* ==================================================
   GLOBAL POLISH — section heading sweep bar
================================================== */

.section-heading {
    position: relative;
}


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

    display: block;

    width: 72px;
    height: 3px;

    margin: 22px auto 0;

    border-radius: 3px;

    background: linear-gradient(
        90deg,
        var(--primary),
        #38bdf8,
        var(--primary)
    );

    background-size: 200% 100%;

    animation: heading-sweep 5s ease-in-out infinite;
}


@keyframes heading-sweep {

    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}


body.light-theme .section-heading::after {

    background: linear-gradient(
        90deg,
        var(--primary),
        #0ea5e9,
        var(--primary)
    );

    background-size: 200% 100%;
}