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

/* ============================================================
   REVAMP — styles.css  (v2 — scroll-jacked projects + 3D)
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
:root {
    --bg-dark: #050508;
    --accent-crimson: #FF1E56;
    --accent-cyan: #00E5FF;
    --accent-gold: #FFD700;
    --page-font-scale: 106.25%;
    --subpage-reading-scale: 1.08;
    --glass-surface: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --text-primary: #F0F0F0;
    --text-muted: rgba(240, 240, 240, 0.52);
    --ease-expo: cubic-bezier(0.4, 0, 0.2, 1); /* Faster, less "watery" */
}

/* ── Reset ───────────────────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none !important; /* GLOBAL CURSOR SUPPRESSION */
}

html {
    background: #090705;
    font-size: var(--page-font-scale);
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 156, 81, 0.25) transparent;
}

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

::-webkit-scrollbar-thumb {
    background: rgba(255, 156, 81, 0.3);
    border-radius: 2px;
}

body {
    background: transparent; /* Allow #scene-3d to show through */
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    line-height: 1.6;
    min-height: 100vh;
    cursor: none !important; /* The tracer IS the cursor now */
}

/* Ensure links and buttons don't show the default pointer either */
a, button, .cta-button, [role="button"], #holo-container {
    cursor: none !important;
}

body.preload #loader,
body.preload #holo-container,
body.preload #cursor-glow {
    visibility: visible !important;
}

/* ============================================================
   3D SCENE — fixed background that JS animates
   ============================================================ */
#scene-3d {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* perspective lives here so children can rotateX/Y */
    perspective: 800px;
    perspective-origin: center center;
    pointer-events: none;
    overflow: hidden;
}

#cinematic-bg {
    position: absolute;
    inset: -25%;
    /* large overshoot so rotation never shows edge */
    background: url('images/portfolio_background_abstract.png') center/cover no-repeat,
        radial-gradient(ellipse at 30% 50%, rgba(255, 30, 86, 0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 30%, rgba(0, 229, 255, 0.08) 0%, transparent 50%);
    will-change: transform;
    transform-style: preserve-3d;
    /* smooth out the JS-driven keyframe lerp */
    transition: none;
    filter: saturate(1.4) brightness(0.75);
    opacity: 0.95;
}

#bg-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 20%, rgba(5, 5, 8, 0.7) 100%),
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, 0.05) 3px, rgba(0, 0, 0, 0.05) 4px);
    pointer-events: none;
    z-index: 1;
}

/* ── DISCO CURSOR TRACER ───────────────────────── */
#cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background: #fff; /* High concentration core */
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999; /* ABOVE EVERYTHING */
    mix-blend-mode: screen;
    box-shadow: 
        0 0 10px 3px #ff1e56,
        0 0 20px 6px #00f0ff;
    animation: cursorDisco 3s linear infinite;
    will-change: transform;
    opacity: 1;
}

@keyframes cursorDisco {
    0% { filter: hue-rotate(0deg) brightness(1.5); }
    100% { filter: hue-rotate(360deg) brightness(1.5); }
}

#cursor-glow.atom-heat {
    box-shadow: 
        0 0 25px 8px #ff1e56,
        0 0 50px 15px #00f0ff;
    transition: box-shadow 0.2s, width 0.2s, height 0.2s;
    animation: cursorDisco 0.5s linear infinite; /* FASTER DISCO */
}

/* Scroll progress bar */
#scroll-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-crimson), var(--accent-cyan));
    transition: width 0.1s linear;
}

/* ── Typography ──────────────────────────────────────────── */
.cinematic-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.8rem, 7vw, 4.5rem);
    line-height: 0.95;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.brand-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--accent-crimson);
    letter-spacing: 2px;
}

.body-inter {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

.text-accent-crimson {
    color: var(--accent-crimson);
}

.text-accent-cyan {
    color: var(--accent-cyan);
}

.eyebrow {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 4px;
    color: var(--accent-crimson);
    opacity: 0.7;
    margin-bottom: 14px;
}

/* ── Nav ─────────────────────────────────────────────────── */
.glass-nav {
    background: rgba(5, 5, 8, 0.65);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border-bottom: 1px solid var(--glass-border);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    height: 66px;
    display: flex;
    align-items: center;
}

.glass-nav nav {
    width: 100%;
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 48px;
}

.glass-nav ul {
    display: flex;
    list-style: none;
    gap: 64px;
}

.glass-nav ul a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 2px;
    transition: color 0.2s;
}

.glass-nav ul a:hover {
    color: var(--accent-cyan);
}

.nav-short {
    display: none;
}

/* ── Container ───────────────────────────────────────────── */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ── Glass panel ─────────────────────────────────────────── */
.glass-panel {
    background: var(--glass-surface);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 38px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    transition: border-color 0.35s, box-shadow 0.35s, transform 0.35s var(--ease-expo);
}

.glass-panel:hover {
    border-color: rgba(0, 229, 255, 0.2);
    box-shadow: 0 0 40px rgba(0, 229, 255, 0.07), 0 20px 50px rgba(0, 0, 0, 0.55);
}

/* ── CTAs ────────────────────────────────────────────────── */
.cta-button {
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    padding: 13px 32px;
    border-radius: 5px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 1.5px;
    transition: all 0.28s var(--ease-expo);
}

.primary-accent {
    background: var(--accent-crimson);
    color: #fff;
    border: none;
    box-shadow: 0 4px 22px rgba(255, 30, 86, 0.4);
}

.primary-accent:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(255, 30, 86, 0.55);
}

.secondary-glass {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
    margin-left: 16px;
}

.secondary-glass:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    transform: translateY(-3px);
}

.cta-button.mini {
    padding: 8px 18px;
    font-size: 0.88rem;
    margin-right: 10px;
    background: var(--accent-cyan);
    color: #000;
    font-weight: 700;
}

.cta-button.mini.glass {
    background: var(--glass-surface);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--glass-border);
}

.cta-button.mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 229, 255, 0.3);
}

/* ── SECTION BASE — snap points ──────────────────────────── */
.section-snap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 160px 0 100px;
}

/* ── HERO ────────────────────────────────────────────────── */
#hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 10% 0;
    gap: 60px;
}

.hero-content {
    flex: 1.3;
    z-index: 2;
}

.hero-visual {
    flex: 0.7;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-eyebrow {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.78rem;
    letter-spacing: 5px;
    color: var(--accent-cyan);
    opacity: 0.75;
    margin-bottom: 16px;
}

.hero-sub {
    font-size: 1rem;
    color: var(--text-muted);
    max-width: 520px;
    margin: 16px 0 36px;
    line-height: 1.82;
}

.hero-sub strong {
    color: var(--text-primary);
}

.hero-actions {
    display: flex;
    align-items: center;
}

/* Hero reveal */
.reveal-hero .eyebrow,
.reveal-hero .cinematic-heading,
.reveal-hero .hero-sub,
.reveal-hero .hero-actions {
    opacity: 0;
    transform: translateY(32px);
    animation: heroUp 0.85s var(--ease-expo) forwards;
}

.reveal-hero .eyebrow {
    animation-delay: 0.1s;
}

.reveal-hero .cinematic-heading {
    animation-delay: 0.25s;
}

.reveal-hero .hero-sub {
    animation-delay: 0.42s;
}

.reveal-hero .hero-actions {
    animation-delay: 0.58s;
}

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

/* Orb */
.hero-orb {
    width: 260px;
    height: 260px;
    position: relative;
    transform-style: preserve-3d;
    animation: orbSpin 22s linear infinite;
}

@keyframes orbSpin {
    from {
        transform: rotateY(0) rotateX(15deg);
    }

    to {
        transform: rotateY(360deg) rotateX(15deg);
    }
}

.orb-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid transparent;
}

.ring-1 {
    border-color: rgba(255, 30, 86, 0.5);
    transform: rotateX(60deg);
    animation: rPulse 4s ease-in-out 0s infinite;
}

.ring-2 {
    border-color: rgba(0, 229, 255, 0.4);
    transform: rotateX(60deg) rotateZ(60deg);
    animation: rPulse 4s ease-in-out 0.7s infinite;
}

.ring-3 {
    border-color: rgba(255, 215, 0, 0.25);
    transform: rotateX(60deg) rotateZ(120deg);
    animation: rPulse 4s ease-in-out 1.4s infinite;
}

@keyframes rPulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 1;
    }
}

.orb-core {
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 30, 86, 0.6), rgba(0, 229, 255, 0.15), transparent);
    filter: blur(10px);
    animation: coreBreath 3s ease-in-out infinite;
}

@keyframes coreBreath {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

/* ── ABOUT ───────────────────────────────────────────────── */
#about {
    padding: 180px 0 100px;
}

.about-layout {
    display: flex;
    gap: 80px;
    align-items: center;
}

.about-text {
    flex: 1.4;
}

.about-visual {
    flex: 0.9;
}

.about-para {
    color: var(--text-muted);
    margin-bottom: 18px;
    font-size: 0.98rem;
    line-height: 1.82;
}

.stat-cluster {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stat-item {
    background: var(--glass-surface);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 22px 20px;
    text-align: center;
    transition: border-color 0.28s, transform 0.28s;
}

.stat-item:hover {
    border-color: rgba(255, 30, 86, 0.35);
    transform: translateY(-4px);
}

.accent-stat {
    border-color: rgba(0, 229, 255, 0.18);
}

.accent-stat .stat-n {
    color: var(--accent-cyan);
}

.stat-n {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    color: var(--accent-crimson);
    line-height: 1;
    margin-bottom: 6px;
}

.stat-l {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   PROJECTS — scroll-jacked one-card-at-a-time
   ═══════════════════════════════════════════════════════════
*/
#projects {
    position: relative;
    min-height: calc(6 * 100vh + 200px);
    /* card pages; JS also adjusts this dynamically */
    padding-top: 120px;
}

.projects-sticky-label {
    position: sticky;
    top: 100px;
    z-index: 10;
    pointer-events: none;
    padding: 0 80px;
    margin-bottom: -160px;
    /* overlap with stage */
}

.projects-title {
    font-size: clamp(2.5rem, 6vw, 4.2rem);
    margin-bottom: 16px;
    letter-spacing: 4px;
}

.project-counter {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 3px;
    color: rgba(255, 255, 255, 0.25);
    margin-top: 6px;
}

#proj-current {
    color: var(--accent-crimson);
}

.scroll-discovery {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    opacity: 0.8;
    transition: opacity 0.5s var(--ease-expo), transform 0.5s var(--ease-expo);
}

.scroll-discovery.hidden {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.discovery-text {
    font-size: 0.65rem;
    letter-spacing: 3px;
    color: var(--text-muted);
}
/* ── New Unified Slide State ── */
.proj-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: var(--opp, 0); /* Follows scroll exactly */
    transform: scale(calc(0.9 + 0.1 * var(--opp, 0)));
    transition: transform 0.2s ease-out; /* Snap but stay smooth */
    pointer-events: none;
    z-index: 1;
}

.proj-slide.proj-active {
    pointer-events: auto;
    z-index: 5;
}

.discovery-line {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, var(--accent-crimson), transparent);
    position: relative;
    overflow: hidden;
}

.discovery-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: scrollLine 2s var(--ease-expo) infinite;
}

@keyframes scrollLine {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

#projects-stage-wrapper {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* inner cards re-enable */
}

#projects-stage {
    position: relative;
    width: min(700px, 90vw);
    height: 480px;
    /* card height */
}

/* Each card slide — absolutely stacked, JS animates in/out */
.proj-slide {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* off by default */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Hidden offscreen by default — JS applies enter transform */
}

/* Initial hidden positions by enter direction */
.proj-slide[data-enter="left"] {
    transform: translateX(-120%) rotateY(25deg) scale(0.85);
    opacity: 0;
}

.proj-slide[data-enter="right"] {
    transform: translateX(120%) rotateY(-25deg) scale(0.85);
    opacity: 0;
}

.proj-slide[data-enter="below"] {
    transform: translateY(90px) translateX(60px) rotateX(-20deg) scale(0.88);
    opacity: 0;
}

.proj-slide[data-enter="rotate-left"] {
    transform: translateX(-140%) rotate(-15deg) scale(0.8);
    opacity: 0;
}

.proj-slide[data-enter="top-perspective"] {
    transform: translateY(-80px) rotateX(35deg) scale(0.82);
    opacity: 0;
}

/* Active slide — flat, centered, pointer events on */
.proj-slide.proj-active {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
    z-index: 2;
}

/* Exiting slide — same direction reversed */
.proj-slide.proj-exit-left {
    transform: translateX(-120%) rotateY(25deg) scale(0.85) !important;
    opacity: 0 !important;
}

.proj-slide.proj-exit-right {
    transform: translateX(120%) rotateY(-25deg) scale(0.85) !important;
    opacity: 0 !important;
}

.proj-slide.proj-exit-below {
    transform: translateY(80px) rotateX(-20deg) scale(0.88) !important;
    opacity: 0 !important;
}

.proj-slide.proj-exit-rotate {
    transform: translateX(-120%) rotate(-12deg) scale(0.8) !important;
    opacity: 0 !important;
}

.proj-slide.proj-exit-top {
    transform: translateY(-70px) rotateX(30deg) scale(0.82) !important;
    opacity: 0 !important;
}

.proj-slide,
.proj-slide .project-card,
.proj-slide .float-asset {
    transition:
        transform 0.7s var(--ease-expo),
        opacity 0.6s ease;
}

/* ── Floating Assets ───────────────────────────────────── */
.proj-decoration {
    position: absolute;
    inset: 0;
    z-index: 10; /* Bring in FRONT of the card */
    pointer-events: none;
    transform-style: preserve-3d;
}

/* Default park - Way out and invisible */
/* Default base - Centered and hidden */
.float-asset {
    position: absolute;
    max-width: 200px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    filter: brightness(0.95) saturate(1.1);
    will-change: transform, top, left, right, bottom;
    opacity: var(--opp, 0);
    z-index: 10;
}

/* ── ORBIT MAPPING (USER ADJUSTABLE) ───────────────────────── 
   HOW THE MATH WORKS:
   1. The first value (e.g. -18vh) is the START point (Active State).
      - More negative = Further from the center.
   2. The parentheses (e.g. 50% + 18vh) is the TRAVEL DISTANCE.
      - Ensure this is exactly [ 50% MINUS your START point ].
   3. var(--converge) is driven by your scroll progress (0 to 1).
   ─────────────────────────────────────────────────────────── */

.float-1 { 
    /* Starts at -18vh / -30vw (Top Right Corner Area) */
    top: calc(-18vh + (50% + 18vh) * var(--converge, 0)) !important; 
    right: calc(-30vw + (50% + 30vw) * var(--converge, 0)) !important; 
    left: auto !important;
    bottom: auto !important;
    transform: rotate(4deg) scale(calc(1 - 0.3 * abs(var(--converge, 0)))) translateZ(120px) !important; 
}
.float-2 { 
    /* Starts at -20vh / -32vw (Bottom Left Corner Area) */
    bottom: calc(-20vh + (50% + 20vh) * var(--converge, 0)) !important; 
    left: calc(-32vw + (50% + 32vw) * var(--converge, 0)) !important; 
    top: auto !important;
    right: auto !important;
    transform: rotate(-4deg) scale(calc(1 - 0.3 * abs(var(--converge, 0)))) translateZ(130px) !important; 
}
.float-3 { 
    /* Starts at the extreme Top Center Periphery */
    top: calc(-30vh + (50% + 30vh) * var(--converge, 0)) !important; 
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) rotate(5deg) scale(calc(1 - 0.3 * abs(var(--converge, 0)))) translateZ(140px) !important; 
}
.float-4 {
    /* Starts at the lower right periphery */
    bottom: calc(-22vh + (50% + 22vh) * var(--converge, 0)) !important;
    right: calc(-28vw + (50% + 28vw) * var(--converge, 0)) !important;
    top: auto !important;
    left: auto !important;
    transform: rotate(6deg) scale(calc(1 - 0.3 * abs(var(--converge, 0)))) translateZ(110px) !important;
}

/* Shoppo orbit sits tighter to the card, closer to the Mera composition */
.proj-slide[data-checkpoint="shoppo"] .float-1 {
    top: calc(-10vh + (50% + 10vh) * var(--converge, 0)) !important;
    right: calc(-18vw + (50% + 18vw) * var(--converge, 0)) !important;
}

.proj-slide[data-checkpoint="shoppo"] .float-2 {
    bottom: calc(-12vh + (50% + 12vh) * var(--converge, 0)) !important;
    left: calc(-18vw + (50% + 18vw) * var(--converge, 0)) !important;
}

.proj-slide[data-checkpoint="shoppo"] .float-3 {
    top: calc(-18vh + (50% + 18vh) * var(--converge, 0)) !important;
}

.proj-slide[data-checkpoint="shoppo"] .float-4 {
    bottom: calc(-14vh + (50% + 14vh) * var(--converge, 0)) !important;
    right: calc(-16vw + (50% + 16vw) * var(--converge, 0)) !important;
}

.emoji-float {
    font-size: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-float {
    font-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Project card inside stage ────────────────────────── */
.project-card {
    width: 100%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 30, 86, 0.05) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none;
}

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

.proj-active .project-card {
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 
                0 0 50px rgba(255, 30, 86, 0.05);
}

.card-index {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 5rem;
    font-weight: 900;
    line-height: .8;
    opacity: 1; /* Fully opaque */
    letter-spacing: -2px;
    font-family: 'Outfit', sans-serif;
    background: linear-gradient(to bottom, var(--accent-crimson) 0%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: transform .5s cubic-bezier(0.175,0.885,0.32,1.275);
}

.card-tag {
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-crimson);
    opacity: 0.7;
    margin-bottom: 14px;
}

.card-tag-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.card-tag-row .card-tag {
    margin-bottom: 0;
}

.card-award {
    padding: 4px 8px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    color: var(--accent-cyan);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 1.3px;
    line-height: 1;
    text-transform: uppercase;
}

.card-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.card-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}

.card-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 1px;
    line-height: 1;
}

.card-descriptor {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.75;
    margin-bottom: 18px;
    min-height: 72px;
}

.card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.metric {
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    background: rgba(0, 229, 255, 0.07);
    border: 1px solid rgba(0, 229, 255, 0.14);
    border-radius: 20px;
    color: var(--accent-cyan);
}

.card-actions {
    display: flex;
    align-items: center;
}

/* ── EXPERIENCE ──────────────────────────────────────────── */
#experience {
    padding: 120px 0;
}

.exp-card {
    display: flex;
    gap: 60px;
    margin-top: 40px;
    align-items: flex-start;
}

.exp-card + .exp-card {
    margin-top: 18px;
}

.exp-left {
    flex: 0 0 260px;
}

.exp-right {
    flex: 1;
}

.exp-org {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    letter-spacing: 1px;
    color: var(--accent-crimson);
    margin-bottom: 8px;
}

.exp-role {
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.exp-period {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

.exp-right .body-inter {
    color: var(--text-muted);
    line-height: 1.82;
    font-size: 0.92rem;
}

/* ── HACKATHONS ─────────────────────────────────────────── */
#hackathons {
    padding: 120px 0;
}

.hackathon-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    gap: 28px;
    align-items: stretch;
    margin-top: 42px;
}

.hackathon-list {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.hackathon-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    min-height: 56px;
    padding: 13px 16px;
    border: 1px solid var(--glass-border);
    border-left: 2px solid rgba(255, 156, 81, 0.4);
    background: rgba(255, 255, 255, 0.025);
}

.hackathon-row--finalist {
    border-color: rgba(0, 229, 255, 0.24);
    border-left-color: var(--accent-cyan);
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(255, 156, 81, 0.035));
}

.hackathon-year {
    color: var(--accent-crimson);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 1.8px;
}

.hackathon-name {
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
    line-height: 1.45;
}

.hackathon-result {
    padding: 5px 9px;
    border: 1px solid rgba(0, 229, 255, 0.3);
    color: var(--accent-cyan);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.certificate-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 16px;
    background: rgba(5, 5, 8, 0.7);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
    transition: transform 0.2s var(--ease-expo), border-color 0.2s ease, box-shadow 0.2s ease;
}

.certificate-card:active {
    transform: scale(0.985);
}

.certificate-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 18px;
    align-items: end;
    padding: 18px 20px;
}

.certificate-meta strong {
    color: var(--text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.45rem;
    letter-spacing: 1.2px;
}

.certificate-meta > span:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--accent-cyan);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
}

.certificate-kicker {
    color: var(--accent-crimson);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.certificate-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
    border-top: 1px solid rgba(0, 229, 255, 0.14);
}

@media (hover: hover) and (pointer: fine) {
    .certificate-card:hover {
        transform: translateY(-4px);
        border-color: rgba(0, 229, 255, 0.46);
        box-shadow: 0 30px 78px rgba(0, 0, 0, 0.42), 0 0 36px rgba(0, 229, 255, 0.08);
    }
}

/* ── CERTIFICATIONS ─────────────────────────────────────── */
#certifications {
    padding: 120px 0;
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 42px;
}

.certification-card {
    padding: 0;
    overflow: hidden;
    min-width: 0;
}

.certification-media {
    display: block;
    overflow: hidden;
    background: #fff;
    border-bottom: 1px solid rgba(0, 229, 255, 0.14);
}

.certification-media img {
    display: block;
    width: 100%;
    aspect-ratio: 360 / 278;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s var(--ease-expo);
}

.certification-copy {
    padding: 24px;
}

.certification-kicker {
    margin-bottom: 9px;
    color: var(--accent-crimson);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 1.4px;
}

.certification-copy h3 {
    margin-bottom: 12px;
    color: var(--text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.55rem;
    letter-spacing: 0.8px;
}

.certification-copy p {
    color: var(--text-muted);
    font-size: 0.84rem;
    line-height: 1.72;
}

.certification-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 18px 0;
}

.certification-skills span {
    padding: 5px 9px;
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.055);
    color: var(--accent-cyan);
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    line-height: 1.2;
}

.certification-verify {
    color: var(--accent-cyan);
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .certification-card:hover .certification-media img {
        transform: scale(1.025);
    }

    .certification-verify:hover {
        text-decoration: underline;
    }
}

/* ── SKILLS ─────────────────────────────────────────────── */
#skills {
    padding: 120px 0;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
    margin-top: 48px;
}

.skill-block {
    padding: 28px;
}

.skill-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 2px;
    color: var(--accent-cyan);
    margin-bottom: 14px;
}

.skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-chips span {
    font-size: 0.76rem;
    padding: 5px 12px;
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Inter', monospace;
    transition: border-color 0.2s, color 0.2s;
}

.skill-chips span:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
}

/* ── CONTACT ────────────────────────────────────────────── */
#contact {
    padding: 160px 0;
}

/* ── FOOTER ─────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--glass-border);
}

/* ── SCROLL REVEAL ────────────────────────────────────────  */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.85s var(--ease-expo), transform 0.85s var(--ease-expo);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   LOADER / SPLASH
   ═══════════════════════════════════════════════════════════ */
#loader {
    position: fixed;
    inset: 0;
    z-index: 20000; /* Extremely High */
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-dark); /* Solid black fallback */
    transition: opacity 0.5s;
    color: #fff;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    overflow: hidden;
    isolation: isolate;
}

#loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    opacity: 0;
    transition: opacity 0.9s ease;
    pointer-events: none;
    z-index: 0;
}

#pre-loader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 1s ease;
    z-index: 10;
}

/* When the system is ready, we fade the text away to reveal the Cover image beneath */
#loader.ready #pre-loader-content {
    opacity: 0;
    pointer-events: none;
}

.pre-loader-title {
    font-size: 5rem;
    letter-spacing: 20px;
    margin: 0;
    color: var(--accent-cyan);
    text-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
    animation: textFlicker 2s infinite;
}

.pre-loader-status {
    font-size: 1rem;
    letter-spacing: 8px;
    margin-top: 10px;
    opacity: 0.6;
    font-family: 'Inter', sans-serif;
}

@keyframes textFlicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
    52% { opacity: 1; }
    54% { opacity: 0.7; }
    56% { opacity: 1; }
}

/* ONLY show Cover.png on the actual splash page (index.html) */
.cover-page #loader {
    background-image: none;
}

.cover-page #loader::before {
    background-image: url('images/Cover.png');
}

.cover-page #loader.ready::before {
    opacity: 1;
}

.cover-reveal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 1);
    backdrop-filter: blur(10px);
    opacity: 1;
    transition: opacity 1.5s ease; /* Synced with the text's fade */
    z-index: 5;
}

/* When ready, both the text AND the black veil vanish together */
#loader.ready .cover-reveal-overlay,
#loader.ready #pre-loader-content {
    opacity: 0;
    pointer-events: none;
}

@keyframes veilReveal {
    0% {
        background: rgba(0, 0, 0, 1);
        backdrop-filter: blur(10px);
    }

    100% {
        background: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0);
    }
}

.begin-prompt {
    position: absolute;
    top: 50%;
    left: 48%;
    transform: translate(-50%, -50%);
    color: #f6ece2;
    font-family: "JetBrains Mono", "Cascadia Code", "Aptos Mono", "Consolas", monospace;
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    background: rgba(12, 9, 7, 0.88);
    padding: 18px 36px;
    border-radius: 16px;
    border: 1px solid rgba(255, 156, 81, 0.18);
    backdrop-filter: blur(10px);
    cursor: pointer;
    z-index: 2005;
    animation: none;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
    transition: transform 0.25s var(--ease-expo), box-shadow 0.25s var(--ease-expo), border-color 0.25s var(--ease-expo), background 0.25s var(--ease-expo);
    white-space: nowrap;
}

.begin-prompt:hover {
    background: rgba(17, 12, 9, 0.94);
    border-color: rgba(255, 195, 138, 0.3);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 156, 81, 0.08);
    transform: translate(-50%, -50%) translateY(-2px);
}

/* ── HOLO COMPANION ───────────────────────────────────── */
#holo-container {
    display: none;
    /* JS shows it */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: bottom center;
    touch-action: manipulation;
}

#holo-container.holo-splash-center {
    bottom: auto;
    right: auto;
    top: 50% !important;
    left: 50% !important;
    width: 120px !important;
    transform: translate(-50%, -50%) !important;
}

.holo-sprite {
    width: 70px;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
    animation: holoFloat 3s ease-in-out infinite;
}

#holo-container.talking .holo-dialog-box {
    opacity: 1;
    transform: translateY(0);
}

#holo-container.shaking {
    animation: holoShake 0.4s ease-in-out;
}

#holo-container.vanished {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0) !important;
    transition: opacity 0.5s, transform 0.5s;
}

@keyframes holoFloat {

    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes holoShake {

    0%,
    100% {
        transform: translateX(0) rotate(0);
    }

    25% {
        transform: translateX(-8px) rotate(-5deg);
    }

    75% {
        transform: translateX(8px) rotate(5deg);
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 15px rgba(255, 30, 86, 0.2));
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(255, 30, 86, 0.8));
    }
}

.holo-dialog-box {
    position: absolute;
    bottom: 100%;
    right: 0;
    width: max-content;
    max-width: 300px;
    background: rgba(4, 4, 8, 0.95);
    border: 1px solid var(--accent-crimson);
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 30, 86, 0.1);
}

.holo-dialog-box p {
    color: var(--accent-gold);
    font-size: 0.88rem;
    font-family: 'Georgia', serif;
    margin: 0;
    line-height: 1.6;
    font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   PAGE TRANSITION OVERLAY
   ═══════════════════════════════════════════════════════════ */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-dark);
    z-index: 10000;
    transform: translateY(100%);
    transition: transform 0.65s var(--ease-expo);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.page-transition-overlay.active {
    transform: translateY(0);
    pointer-events: auto;
}

.page-transition-overlay.exit {
    transform: translateY(-100%);
}

.transition-logo {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    color: var(--accent-cyan); /* Restored & Synced to new Blue branding */
    letter-spacing: 15px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s, transform 0.6s var(--ease-expo);
    text-shadow: 0 0 30px rgba(0, 229, 255, 0.4);
}

.page-transition-overlay.active .transition-logo {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.3s;
}

/* ═══════════════════════════════════════════════════════════
   PROJECT DETAIL PAGE STYLES (Project View)
   ═══════════════════════════════════════════════════════════ */
.project-view-body {
    padding-top: 100px;
}

.project-hero {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 24px;
}

.project-hero-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    animation: heroUp 0.8s var(--ease-expo);
}

.project-hero-title {
    font-size: clamp(3rem, 10vw, 7rem);
    margin-bottom: 12px;
}

.project-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    margin-top: 60px;
}

.project-section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    color: var(--accent-cyan);
    margin-top: 80px;
    margin-bottom: 32px;
    letter-spacing: 2px;
}

.tech-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.tech-tag {
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 4px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.media-item {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
    background: #000;
}

.media-item img,
.media-item video {
    width: 100%;
    display: block;
}

.back-link {
    position: fixed;
    top: 90px;
    left: 40px;
    z-index: 101;
    font-family: 'Bebas Neue', sans-serif;
    text-decoration: none;
    color: var(--accent-crimson);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    opacity: 0.6;
    transition: opacity 0.3s, transform 0.3s;
}

.back-link:hover {
    opacity: 1;
    transform: translateX(-5px);
}

@media (max-width: 900px) {
    .project-grid {
        grid-template-columns: 1fr;
    }

    .back-link {
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 40px;
    }
}

@media (max-width:1024px) {
    .about-layout {
        flex-direction: column;
        gap: 50px;
    }

    .exp-card {
        flex-direction: column;
        gap: 20px;
    }

    .exp-left {
        flex: none;
    }

    .skills-grid {
        grid-template-columns: 1fr;
    }

    .hackathon-layout {
        grid-template-columns: 1fr;
    }

    #projects-stage {
        width: min(560px, 88vw);
    }
}

@media (max-width:768px) {
    #hero {
        flex-direction: column;
        padding: 110px 6% 60px;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

    .secondary-glass {
        margin-left: 0;
    }

    .hero-visual {
        display: none;
    }

    .container {
        padding: 0 24px;
    }

    .nav-container {
        padding: 0 24px;
    }

    .glass-nav ul {
        gap: 18px;
    }

    .projects-sticky-label {
        display: none;
    }

    #projects-stage {
        width: 90vw;
        height: auto;
    }

    .proj-slide {
        position: relative;
        opacity: 1;
        transform: none !important;
        pointer-events: auto;
    }

    #projects {
        min-height: auto;
    }

    #projects-stage-wrapper {
        position: relative;
        height: auto;
        pointer-events: auto;
    }

    /* Flatten 3D BG on mobile for perf */
    #cinematic-bg {
        transform: none !important;
    }
}

/* ── MAIN PAGE THEME OVERRIDES (TinyFish / Claude-inspired) ─ */
body:not(.project-view-body) {
    --bg-dark: #090705;
    --accent-crimson: #ff9c51;
    --accent-cyan: #ffc38a;
    --accent-gold: #ffd27a;
    --glass-surface: rgba(15, 11, 8, 0.88);
    --glass-border: rgba(255, 156, 81, 0.18);
    --text-primary: #f6ece2;
    --text-muted: rgba(188, 170, 153, 0.84);
    --ui-font: "JetBrains Mono", "Cascadia Code", "Aptos Mono", "Consolas", monospace;
    background: linear-gradient(180deg, #090705 0%, #120d08 100%);
    color: var(--text-primary);
    font-family: var(--ui-font);
}

body:not(.project-view-body) .cinematic-heading,
body:not(.project-view-body) .brand-heading,
body:not(.project-view-body) .glass-nav ul a,
body:not(.project-view-body) .eyebrow,
body:not(.project-view-body) .hero-eyebrow,
body:not(.project-view-body) .cta-button,
body:not(.project-view-body) .card-title,
body:not(.project-view-body) .exp-org,
body:not(.project-view-body) .skill-label,
body:not(.project-view-body) .projects-title {
    font-family: var(--ui-font);
}

body:not(.project-view-body) .cinematic-heading {
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-transform: none;
    font-weight: 700;
}

body:not(.project-view-body) .brand-heading {
    color: var(--accent-crimson);
    letter-spacing: 0.08em;
    font-weight: 700;
}

body:not(.project-view-body) .eyebrow,
body:not(.project-view-body) .hero-eyebrow {
    color: var(--text-muted);
    opacity: 1;
    letter-spacing: 0.18em;
}

body:not(.project-view-body) .body-inter,
body:not(.project-view-body) .card-descriptor,
body:not(.project-view-body) .exp-role,
body:not(.project-view-body) .exp-period,
body:not(.project-view-body) .skill-chips span,
body:not(.project-view-body) .metric,
body:not(.project-view-body) .stat-l {
    font-family: var(--ui-font);
}

body:not(.project-view-body) .glass-nav {
    background: rgba(12, 9, 7, 0.82);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

body:not(.project-view-body) .glass-nav ul a {
    color: var(--text-muted);
    letter-spacing: 0.08em;
}

body:not(.project-view-body) .glass-nav ul a:hover {
    color: var(--accent-cyan);
}

body:not(.project-view-body) .glass-panel,
body:not(.project-view-body) .project-card,
body:not(.project-view-body) .stat-item,
body:not(.project-view-body) .exp-card,
body:not(.project-view-body) .skill-block {
    background: linear-gradient(180deg, rgba(16, 12, 9, 0.94) 0%, rgba(11, 8, 6, 0.98) 100%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

body:not(.project-view-body) .glass-panel:hover,
body:not(.project-view-body) .project-card:hover,
body:not(.project-view-body) .stat-item:hover,
body:not(.project-view-body) .skill-block:hover {
    border-color: rgba(255, 195, 138, 0.28);
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.36);
}

body:not(.project-view-body) .project-card::before {
    background: linear-gradient(135deg, rgba(255, 156, 81, 0.08) 0%, transparent 60%);
}

body:not(.project-view-body) .proj-active .project-card {
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.72), 0 0 50px rgba(255, 156, 81, 0.08);
}

body:not(.project-view-body) .primary-accent {
    background: linear-gradient(135deg, var(--accent-crimson), #d66f2d);
    color: #120a04;
    box-shadow: 0 10px 28px rgba(255, 156, 81, 0.28);
}

body:not(.project-view-body) .primary-accent:hover {
    box-shadow: 0 14px 34px rgba(255, 156, 81, 0.34);
}

body:not(.project-view-body) .secondary-glass {
    border: 1px solid rgba(255, 156, 81, 0.18);
    color: var(--text-primary);
    background: rgba(255, 156, 81, 0.08);
}

body:not(.project-view-body) .secondary-glass:hover {
    border-color: rgba(255, 195, 138, 0.3);
    color: var(--accent-cyan);
    background: rgba(255, 156, 81, 0.12);
}

body:not(.project-view-body) .card-index {
    background: linear-gradient(to bottom, var(--accent-crimson) 0%, var(--accent-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

body:not(.project-view-body) .card-tag,
body:not(.project-view-body) .exp-org,
body:not(.project-view-body) .skill-label,
body:not(.project-view-body) .text-accent-crimson {
    color: var(--accent-crimson);
}

body:not(.project-view-body) .text-accent-cyan {
    color: var(--accent-cyan);
}

body:not(.project-view-body) .metric,
body:not(.project-view-body) .skill-chips span {
    background: rgba(255, 156, 81, 0.08);
    border: 1px solid rgba(255, 156, 81, 0.16);
    color: var(--accent-cyan);
}

body:not(.project-view-body) .skill-chips span:hover {
    border-color: rgba(255, 195, 138, 0.3);
    color: var(--accent-cyan);
}

body:not(.project-view-body) .stat-n {
    color: var(--text-primary);
}

body:not(.project-view-body) .accent-stat .stat-n {
    color: var(--accent-crimson);
}

body:not(.project-view-body) #scroll-progress-bar {
    background: linear-gradient(90deg, var(--accent-crimson), var(--accent-cyan));
    box-shadow: 0 0 18px rgba(255, 156, 81, 0.22);
}

body:not(.project-view-body) #cursor-glow {
    background: #fff4e6;
    box-shadow:
        0 0 12px 3px rgba(255, 156, 81, 0.72),
        0 0 28px 10px rgba(255, 195, 138, 0.2);
    animation: none;
}

body:not(.project-view-body) #cursor-glow.atom-heat {
    box-shadow:
        0 0 22px 7px rgba(255, 156, 81, 0.76),
        0 0 42px 16px rgba(255, 195, 138, 0.28);
    animation: none;
}

body:not(.project-view-body) footer {
    border-top: 1px solid rgba(255, 156, 81, 0.1);
}

/* ── SUBPAGE COMPONENTS ──────────────────────────────────── */

.project-article {
    max-width: 1000px;
    margin: 150px auto 100px;
    padding: 50px;
    position: relative;
    z-index: 2;
}

.project-hero-title {
    font-size: clamp(3.3rem, 10.6vw, 7.4rem) !important;
}

.project-hero-icon {
    width: 88px;
    height: 88px;
}

.project-article {
    padding: 56px !important;
}

.project-article .body-inter,
.project-article p,
.project-article li,
.project-article td,
.project-article th,
.project-article .feature-box p,
.project-article .alert-box p {
    font-size: 1.02rem !important;
}

.project-article .section-title,
.project-section-title {
    font-size: 2.35rem !important;
}

.project-article .feature-box h3,
.project-article .feature-box strong.title,
.project-article .alert-box strong {
    font-size: 1.72rem !important;
}

.project-article .tech-badge,
.project-article .tech-tag,
.project-article code {
    font-size: 0.95rem !important;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 30, 86, 0.3);
    border-radius: 8px;
    color: var(--accent-crimson);
    text-decoration: none;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s var(--ease-expo);
    backdrop-filter: blur(10px);
}

.back-link:hover {
    background: rgba(255, 30, 86, 0.1);
    border-color: var(--accent-crimson);
    transform: translateX(-5px) translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 30, 86, 0.2);
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 40px;
}

.tech-badge {
    background: rgba(255, 30, 86, 0.1);
    border: 1px solid rgba(255, 30, 86, 0.3);
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: .85rem;
    font-family: 'Inter', sans-serif;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.feature-box {
    padding: 25px;
    border-left: 3px solid var(--accent-crimson);
    border-radius: 10px;
    background: rgba(255, 30, 86, 0.05);
    transition: all 0.3s;
}

.feature-box:hover {
    background: rgba(255, 30, 86, 0.1);
    transform: translateX(5px);
}

.feature-box h3,
.feature-box strong.title {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
    margin-top: 0;
}

.feature-box p {
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

.section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 1px;
    color: #fff;
    margin: 60px 0 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.section-title span {
    color: var(--accent-crimson);
}

pre {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    overflow-x: auto;
    border-left: 3px solid var(--accent-crimson);
    margin: 20px 0;
}

code {
    font-family: 'Courier New', monospace;
    color: var(--accent-cyan);
    font-size: .9rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
}

pre code {
    color: #e0e0e0;
    background: transparent;
    padding: 0;
}

.perf-table,
.benchmark-table,
table {
    width: 100%;
    margin: 30px 0;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
}

th,
td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
}

th {
    color: var(--accent-crimson);
    font-weight: 600;
    background: rgba(255, 30, 86, 0.05);
}

tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.alert-box {
    background: rgba(255, 30, 86, 0.05);
    border-left: 3px solid var(--accent-crimson);
    padding: 20px;
    margin: 20px 0;
    border-radius: 0 10px 10px 0;
}

.alert-box strong {
    color: var(--accent-crimson);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.alert-box p {
    font-family: 'Inter', sans-serif;
    font-size: .95rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin: 0;
}

/* ── Specific Overrides for Merit/Academic Pages ────────── */
.mermaid-container {
    background: rgba(0, 0, 0, 0.3);
    padding: 30px;
    border-radius: 10px;
    margin: 30px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    overflow-x: auto;
}

.game-card,
.screenshot-box {
    background: rgba(255, 30, 86, 0.05);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(255, 30, 86, 0.1);
    transition: all 0.3s;
    margin: 15px 0;
}

.game-card:hover,
.screenshot-box:hover {
    border-color: var(--accent-crimson);
    background: rgba(255, 30, 86, 0.1);
}

@media (max-width: 900px) {
    .project-article {
        padding: 40px 26px !important;
    }

    .project-hero-title {
        font-size: clamp(3rem, 13vw, 5.8rem) !important;
    }

    .project-article .section-title,
    .project-section-title {
        font-size: 2.1rem !important;
    }
}

.project-article h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
    margin-top: 30px;
}

.project-article ul,
.project-article ol {
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Inter', sans-serif;
    line-height: 1.8;
    margin-bottom: 20px;
    padding-left: 20px;
}

/* ── SUBPAGE THEME OVERRIDES (TinyFish / Claude-inspired) ─ */
.project-view-body {
    --subpage-bg: #090705;
    --subpage-bg-2: #120d08;
    --subpage-panel: rgba(15, 11, 8, 0.94);
    --subpage-panel-strong: rgba(10, 8, 6, 0.98);
    --subpage-panel-border: rgba(255, 156, 81, 0.18);
    --subpage-text: #f6ece2;
    --subpage-muted: #bcaa99;
    --subpage-accent: #ff9c51;
    --subpage-accent-soft: rgba(255, 156, 81, 0.12);
    --subpage-accent-2: #ffc38a;
    --subpage-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
    --subpage-font: "Cascadia Code", "JetBrains Mono", "Aptos Mono", "Consolas", monospace;
    --accent-crimson: var(--subpage-accent);
    --accent-cyan: var(--subpage-accent-2);
    --glass-border: var(--subpage-panel-border);
    --glass-surface: rgba(18, 13, 9, 0.72);
    --text-primary: var(--subpage-text);
    --text-muted: var(--subpage-muted);
    color-scheme: dark;
    background: linear-gradient(180deg, var(--subpage-bg) 0%, var(--subpage-bg-2) 100%);
    color: var(--subpage-text);
}

.project-view-body,
.project-view-body button,
.project-view-body input,
.project-view-body textarea,
.project-view-body select {
    font-family: var(--subpage-font);
}

.project-view-body #scene-3d {
    perspective: none;
    background: linear-gradient(180deg, var(--subpage-bg) 0%, var(--subpage-bg-2) 100%);
}

.project-view-body #cinematic-bg {
    inset: 0 !important;
    opacity: 1;
    filter: none;
    transform: none !important;
    transition: none !important;
    background:
        radial-gradient(circle at 14% 0%, rgba(255, 156, 81, 0.15), transparent 24%),
        radial-gradient(circle at 88% 8%, rgba(255, 210, 122, 0.08), transparent 24%),
        radial-gradient(circle at 74% 32%, rgba(255, 156, 81, 0.07), transparent 28%),
        linear-gradient(180deg, var(--subpage-bg) 0%, var(--subpage-bg-2) 100%) !important;
    background-repeat: no-repeat;
    background-size: cover;
}

.project-view-body #bg-vignette {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.025), transparent 32%),
        linear-gradient(180deg, rgba(7, 5, 4, 0.06) 0%, rgba(4, 3, 2, 0.54) 100%),
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255, 156, 81, 0.015) 3px, rgba(255, 156, 81, 0.015) 4px);
}

.project-view-body #cursor-glow {
    background: #fff4e6;
    box-shadow:
        0 0 12px 3px rgba(255, 156, 81, 0.72),
        0 0 28px 10px rgba(255, 195, 138, 0.2);
    animation: none;
}

.project-view-body #cursor-glow.atom-heat {
    box-shadow:
        0 0 22px 7px rgba(255, 156, 81, 0.76),
        0 0 42px 16px rgba(255, 195, 138, 0.28);
}

.project-view-body #loader {
    background: linear-gradient(180deg, var(--subpage-bg) 0%, var(--subpage-bg-2) 100%);
}

.project-view-body .glass-nav {
    background: rgba(12, 9, 7, 0.82);
    border-bottom: 1px solid var(--subpage-panel-border);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(18px);
}

.project-view-body .project-nav-return {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-left: 20px;
    padding: 10px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 156, 81, 0.18);
    background: rgba(255, 156, 81, 0.08);
    color: var(--subpage-accent);
    text-decoration: none;
    font-family: var(--subpage-font);
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s var(--ease-expo), box-shadow 0.25s var(--ease-expo), border-color 0.25s var(--ease-expo), background 0.25s var(--ease-expo), color 0.25s var(--ease-expo);
}

.project-view-body .project-nav-return:hover {
    background: rgba(255, 156, 81, 0.14);
    border-color: rgba(255, 195, 138, 0.3);
    color: var(--subpage-accent-2);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.24);
    transform: translateY(-2px);
}

.project-view-body .brand-heading,
.project-view-body .nav-container a,
.project-view-body .section-title,
.project-view-body .project-section-title,
.project-view-body .cinematic-heading,
.project-view-body .feature-box h3,
.project-view-body .feature-box strong.title,
.project-view-body .alert-box strong,
.project-view-body .callout strong {
    font-family: var(--subpage-font) !important;
}

.project-view-body .brand-heading {
    letter-spacing: 0.08em;
    font-weight: 700;
}

.project-view-body .nav-container a,
.project-view-body .back-link,
.project-view-body .eyebrow,
.project-view-body #loader-credit {
    color: var(--subpage-muted);
}

.project-view-body .nav-container a:hover,
.project-view-body .brand-heading,
.project-view-body .section-title span,
.project-view-body .project-section-title span {
    color: var(--subpage-accent);
}

.project-view-body #scroll-progress-bar {
    background: linear-gradient(90deg, var(--subpage-accent) 0%, var(--subpage-accent-2) 100%);
    box-shadow: 0 0 18px rgba(255, 156, 81, 0.22);
}

.project-view-body .project-article.glass-panel {
    background: linear-gradient(180deg, rgba(16, 12, 9, 0.94) 0%, rgba(11, 8, 6, 0.98) 100%);
    border: 1px solid var(--subpage-panel-border);
    box-shadow: var(--subpage-shadow);
    border-radius: 24px;
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.project-view-body .project-article::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 88% 10%, rgba(255, 156, 81, 0.1), transparent 20%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.025), transparent 42%);
    pointer-events: none;
}

.project-view-body .project-article > * {
    position: relative;
    z-index: 1;
}

.project-view-body .body-inter,
.project-view-body p,
.project-view-body li,
.project-view-body td,
.project-view-body th,
.project-view-body .feature-box p,
.project-view-body .alert-box p,
.project-view-body .callout p,
.project-view-body .game-card p,
.project-view-body .screenshot-box p {
    color: var(--subpage-muted) !important;
    font-family: var(--subpage-font) !important;
}

.project-view-body .cinematic-heading {
    color: var(--subpage-text);
    line-height: 1.05;
    letter-spacing: -0.045em;
    text-transform: none;
}

.project-view-body .section-title,
.project-view-body .project-section-title {
    color: var(--subpage-text);
    letter-spacing: -0.035em;
    border-bottom: 1px solid rgba(255, 156, 81, 0.14);
    text-transform: none;
}

.project-view-body .back-link {
    background: rgba(255, 156, 81, 0.08);
    border: 1px solid rgba(255, 156, 81, 0.18);
    color: var(--subpage-accent);
    font-family: var(--subpage-font);
    font-weight: 600;
    letter-spacing: 0.08em;
    border-radius: 16px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.project-view-body .back-link:hover {
    background: rgba(255, 156, 81, 0.14);
    border-color: rgba(255, 195, 138, 0.32);
    color: var(--subpage-accent-2);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
    transform: translateX(-4px);
}

.project-view-body .tech-badge,
.project-view-body .tech-tag {
    background: linear-gradient(135deg, rgba(255, 156, 81, 0.14), rgba(255, 195, 138, 0.06));
    border: 1px solid rgba(255, 156, 81, 0.22);
    color: var(--subpage-text);
    border-radius: 999px;
    font-family: var(--subpage-font);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.project-view-body .feature-box,
.project-view-body .game-card,
.project-view-body .screenshot-box,
.project-view-body .alert-box,
.project-view-body .callout {
    background: linear-gradient(180deg, rgba(255, 156, 81, 0.08) 0%, rgba(255, 156, 81, 0.04) 100%);
    border: 1px solid rgba(255, 156, 81, 0.14);
    border-left: 3px solid var(--subpage-accent);
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.project-view-body .feature-box:hover,
.project-view-body .game-card:hover,
.project-view-body .screenshot-box:hover {
    background: linear-gradient(180deg, rgba(255, 156, 81, 0.12) 0%, rgba(255, 156, 81, 0.06) 100%);
    border-color: rgba(255, 195, 138, 0.28);
    transform: translateY(-4px);
}

.project-view-body pre,
.project-view-body .mermaid-container {
    background: rgba(10, 8, 6, 0.9);
    border: 1px solid rgba(255, 156, 81, 0.14);
    border-left: 3px solid var(--subpage-accent);
    border-radius: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.project-view-body code {
    color: var(--subpage-accent-2);
    background: rgba(255, 156, 81, 0.12);
    border: 1px solid rgba(255, 156, 81, 0.16);
    font-family: var(--subpage-font);
}

.project-view-body pre code {
    color: var(--subpage-text);
    background: transparent;
    border: none;
}

.project-view-body table,
.project-view-body .perf-table,
.project-view-body .benchmark-table {
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.project-view-body th {
    color: var(--subpage-accent-2) !important;
    background: rgba(255, 156, 81, 0.08);
    border-bottom-color: rgba(255, 156, 81, 0.14);
    font-family: var(--subpage-font) !important;
}

.project-view-body td {
    border-bottom-color: rgba(255, 156, 81, 0.08);
    background: rgba(255, 255, 255, 0.01);
}

.project-view-body tr:hover td {
    background: rgba(255, 156, 81, 0.05);
}

.project-view-body .holo-dialog-box {
    background: rgba(12, 9, 7, 0.92);
    border: 1px solid rgba(255, 156, 81, 0.2);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.project-view-body .holo-dialog-box p {
    color: var(--subpage-text);
    font-family: var(--subpage-font);
}

@media (max-width: 900px) {
    .project-view-body .project-article.glass-panel {
        border-radius: 20px;
    }

    .project-view-body .back-link {
        width: 100%;
        justify-content: center;
    }

    .project-view-body .project-nav-return {
        padding: 9px 12px;
        font-size: 0.7rem;
        margin-left: 12px;
    }
}

/* === NEW HOLO ATTACK CSS === */
.holo-attack-gif {
    position: fixed;
    width: 70px;
    height: auto;
    z-index: 10000;
    pointer-events: none;
    bottom: 30px;
    right: 30px;
    opacity: 0;
}

.holo-attack-active {
    animation: throwCenter 0.7s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes throwCenter {
    0% { bottom: 50px; right: 50px; transform: scale(1) rotate(0deg); opacity: 1; }
    90% { top: 50%; left: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(20) rotate(-360deg); opacity: 1; }
    100% { top: 50%; left: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(25) rotate(-360deg); opacity: 0; }
}

#glass-shatter-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    background: url('images/broken-glass_nobg.png') center/contain no-repeat;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
}

#glass-shatter-overlay.active {
    animation: shatterZoom 0.4s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards;
}

@keyframes shatterZoom {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE / TOUCH DEVICE OVERRIDES
   Everything below is gated — desktop sees zero changes.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Restore native cursor on touch devices ──────────── */
@media (pointer: coarse) {
    *,
    *::before,
    *::after {
        cursor: auto !important;
    }

    body {
        cursor: auto !important;
    }

    a, button, .cta-button, [role="button"], #holo-container,
    .begin-prompt, .project-card {
        cursor: pointer !important;
    }

    #cursor-glow {
        display: none !important;
    }
}

/* ── 2. Layout & spacing — small screens ────────────────── */
@media (max-width: 768px) {
    html {
        font-size: 93.75%; /* 15px base instead of 17px */
    }

    .section-snap {
        min-height: auto;
        padding: 100px 0 60px;
    }

    /* Nav — tighten further */
    .glass-nav {
        height: 56px;
    }

    .glass-nav ul {
        gap: 12px;
    }

    .glass-nav ul a {
        font-size: 0.85rem;
        letter-spacing: 1px;
    }

    .brand-heading {
        font-size: 1.35rem;
    }

    /* Hero */
    #hero {
        padding: 90px 6% 40px;
        min-height: auto;
    }

    .hero-sub {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .cinematic-heading {
        font-size: clamp(2rem, 9vw, 3rem);
    }

    .hero-eyebrow, .eyebrow {
        font-size: 0.65rem;
        letter-spacing: 3px;
    }

    .cta-button {
        padding: 12px 24px;
        font-size: 0.9rem;
    }

    /* About */
    #about {
        padding: 100px 0 60px;
    }

    .about-para {
        font-size: 0.88rem;
    }

    .stat-cluster {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .stat-item {
        padding: 16px 12px;
    }

    .stat-n {
        font-size: 2rem;
    }

    .stat-l {
        font-size: 0.62rem;
    }

    /* Projects — stacked vertical layout */
    #projects {
        min-height: auto !important;
        padding-top: 80px;
        padding-bottom: 40px;
    }

    #projects-stage-wrapper {
        position: relative;
        height: auto;
        pointer-events: auto;
    }

    #projects-stage {
        width: 92vw;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .proj-slide {
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        inset: auto !important;
    }

    .proj-slide,
    .proj-slide .project-card,
    .proj-slide .float-asset {
        transition: none;
    }

    .proj-decoration {
        display: none; /* Hide floating assets on mobile — they overflow badly */
    }

    .project-card {
        transform-style: flat;
    }

    .card-index {
        font-size: 3rem;
        top: 20px;
        right: 24px;
    }

    .card-descriptor {
        min-height: auto;
        font-size: 0.82rem;
    }

    .card-metrics {
        gap: 6px;
    }

    .metric {
        font-size: 0.6rem;
    }

    .glass-panel {
        padding: 24px;
        border-radius: 14px;
    }

    /* Experience */
    #experience {
        padding: 80px 0 60px;
    }

    /* Hackathons */
    #hackathons {
        padding: 80px 0 60px;
    }

    /* Certifications */
    #certifications {
        padding: 80px 0 60px;
    }

    .certifications-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 30px;
    }

    .certification-copy {
        padding: 20px;
    }

    .certification-copy h3 {
        font-size: 1.4rem;
    }

    /* Skills */
    #skills {
        padding: 80px 0 60px;
    }

    .skills-grid {
        gap: 14px;
        margin-top: 30px;
    }

    .skill-block {
        padding: 20px;
    }

    .skill-chips span {
        font-size: 0.68rem;
        padding: 4px 10px;
    }

    /* Contact */
    #contact {
        padding: 80px 0 60px;
    }

    /* Loader */
    .pre-loader-title {
        font-size: 2.8rem;
        letter-spacing: 10px;
    }

    .pre-loader-status {
        font-size: 0.78rem;
        letter-spacing: 4px;
    }

    .begin-prompt {
        font-size: 0.88rem;
        padding: 14px 24px;
        left: 50%;
    }

    /* Holo */
    #holo-container {
        bottom: 16px;
        right: 16px;
    }

    .holo-sprite {
        width: 54px;
    }

    .holo-dialog-box {
        max-width: 220px;
        padding: 10px 14px;
    }

    .holo-dialog-box p {
        font-size: 0.78rem;
    }

    /* Page transition */
    .transition-logo {
        font-size: 2.2rem;
        letter-spacing: 8px;
    }

    /* Depth field — reduce on mobile */
    .depth-node {
        display: none;
    }
}

/* ── 3. Very small screens (≤ 420px) ────────────────────── */
@media (max-width: 420px) {
    .nav-about {
        display: none;
    }

    .nav-full {
        display: none;
    }

    .nav-short {
        display: inline;
    }

    .glass-nav ul {
        gap: 8px;
    }

    .glass-nav ul a {
        font-size: 0.72rem;
        letter-spacing: 0.5px;
    }

    .brand-heading {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }

    .nav-container {
        padding: 0 12px;
    }

    .container {
        padding: 0 16px;
    }

    .hackathon-row {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
        padding: 12px;
    }

    .hackathon-result {
        grid-column: 2;
        justify-self: start;
    }

    .certificate-meta {
        grid-template-columns: 1fr;
    }

    .certificate-meta > span:last-child {
        grid-column: 1;
        grid-row: auto;
    }

    #hero {
        padding: 80px 5% 30px;
    }

    .cinematic-heading {
        font-size: clamp(1.6rem, 8vw, 2.4rem);
    }

    .hero-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
        text-align: center;
    }

    .secondary-glass {
        margin-left: 0;
    }

    .stat-cluster {
        grid-template-columns: 1fr;
    }

    #projects-stage {
        width: 96vw;
    }

    .card-title {
        font-size: 1.5rem;
    }
}

/* ── 4. Hover fallbacks for touch ───────────────────────── */
@media (hover: none) {
    .glass-panel:hover {
        border-color: var(--glass-border);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
        transform: none;
    }

    .stat-item:hover {
        transform: none;
    }

    .primary-accent:hover {
        transform: none;
    }

    .secondary-glass:hover {
        transform: none;
    }

    .cta-button.mini:hover {
        transform: none;
    }

    .project-card::before {
        opacity: 0.5; /* Always partially visible since hover can't trigger */
    }

    .project-card:hover::before {
        opacity: 0.5;
    }

    .feature-box:hover {
        transform: none;
    }

    .skill-chips span {
        border-color: var(--glass-border);
        color: rgba(255, 255, 255, 0.6);
    }

    /* Active-state tap feedback instead of hover */
    .cta-button:active {
        transform: scale(0.97);
        transition: transform 0.1s;
    }

    .stat-item:active {
        transform: scale(0.97);
        transition: transform 0.1s;
    }

    .skill-chips span:active {
        border-color: var(--accent-cyan);
        color: var(--accent-cyan);
    }

    .glass-panel:active {
        border-color: rgba(255, 195, 138, 0.2);
    }
}

/* ── 5. Subpage mobile overrides (project detail pages) ─── */
/* These use !important to beat inline <style> blocks in subpages */
@media (max-width: 768px) {
    .project-article {
        margin: 80px auto 40px !important;
        padding: 20px !important;
    }

    .back-link {
        font-size: 0.72rem !important;
        padding: 6px 0 !important;
        letter-spacing: 0.5px !important;
        margin-bottom: 20px !important;
    }

    .section-title {
        font-size: 1.6rem !important;
        margin: 36px 0 14px !important;
    }

    .feature-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .feature-box {
        padding: 18px !important;
    }

    .feature-box h3,
    .feature-box strong.title {
        font-size: 1.3rem !important;
    }

    .feature-box p {
        font-size: 0.85rem !important;
    }

    .tech-stack {
        gap: 6px !important;
    }

    .tech-badge {
        font-size: 0.72rem !important;
        padding: 4px 10px !important;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 14px !important;
    }

    .stat-number {
        font-size: 1.8rem !important;
    }

    .alert-box {
        padding: 14px !important;
    }

    .alert-box strong {
        font-size: 1.2rem !important;
    }

    .alert-box p {
        font-size: 0.85rem !important;
    }

    .mermaid-container {
        padding: 14px !important;
        margin: 16px 0 !important;
    }

    .game-card {
        padding: 16px !important;
    }

    pre {
        padding: 14px !important;
        font-size: 0.8rem !important;
    }

    code {
        font-size: 0.78rem !important;
    }

    th, td {
        padding: 10px 8px !important;
        font-size: 0.82rem !important;
    }

    .body-inter {
        font-size: 0.88rem !important;
    }

    h3 {
        font-size: 1.4rem !important;
    }

    /* CTA buttons in subpages */
    .project-article .cta-button {
        font-size: 0.78rem !important;
        padding: 10px 18px !important;
    }

    .project-article .cinematic-heading {
        font-size: clamp(1.4rem, 6vw, 2rem) !important;
    }
}

@media (max-width: 420px) {
    .project-article {
        margin: 70px auto 30px !important;
        padding: 14px !important;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .back-link {
        font-size: 0.65rem !important;
    }
}

/* ── touch: the shell stops flashing ─────────────────────────────────────
   A flick moves a viewport per frame, so `.reveal` elements enter already on
   screen and fade in late — the reader sees flashing, not motion, and no
   threshold fixes it. This is the SHELL, so it was doing it on every page.
   Nav links at 34x14 are also well under the 44px touch target. */
@media (pointer: coarse) {
  /* Nothing on a phone may depend on an animation, a scroll position or a
     script in order to be visible. Every rule below is an element that starts
     at opacity:0 and is animated or classed into view — on a touch screen it
     is simply already there. This is not a preference: a reader who scrolls
     back up and finds the heading gone has lost content, and no entrance is
     worth that. */
  .reveal { opacity: 1 !important; transform: none !important; }

  /* the hero — "FROM SILICON TO SYSTEMS" */
  .reveal-hero .eyebrow,
  .reveal-hero .cinematic-heading,
  .reveal-hero .hero-sub,
  .reveal-hero .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* project cards: JS stacks them on mobile, but if it has not run yet — or
     ever — the data-enter rules leave every card invisible */
  .proj-slide[data-enter],
  .proj-slide {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* and the exit classes must never win on a stacked mobile layout */
  .proj-slide.proj-exit-left, .proj-slide.proj-exit-right,
  .proj-slide.proj-exit-below, .proj-slide.proj-exit-rotate,
  .proj-slide.proj-exit-top {
    opacity: 1 !important;
    transform: none !important;
  }

  .nav-links a, .nav-container a, .glass-nav a {
    display: inline-block; padding: 14px 7px;   /* clears the 44px target */
  }
}

/* Replay's mark is pixel art on a 24-cell grid — resampling it smooth defeats
   the point, and at 30px a bilinear scale turns it to mush. */
#proj-replay .card-icon { image-rendering: pixelated; }

/* ── nothing hides because you scrolled up ───────────────────────────────
   The entrance animations are one-way by intent, but any element whose
   VISIBLE state is a class or an animation can be taken away again — by a
   re-trigger, a restored bfcache page, a repaint on a memory-tight phone.
   When that happens the reader scrolls back and the heading is simply gone,
   with no way to bring it back. That is a content loss, and no entrance is
   worth it.

   So: the hero is never in the scroll system at all — it is at the top of the
   page and has nothing to reveal into. And a `.reveal` that has been shown
   once stays shown, on every device, for the life of the page. */
.reveal-hero .eyebrow,
.reveal-hero .cinematic-heading,
.reveal-hero .hero-sub,
.reveal-hero .hero-actions {
    animation-fill-mode: forwards !important;
}
html:not(.no-js) .reveal-hero .eyebrow,
html:not(.no-js) .reveal-hero .cinematic-heading,
html:not(.no-js) .reveal-hero .hero-sub,
html:not(.no-js) .reveal-hero .hero-actions {
    opacity: 1;
}
.reveal.active { opacity: 1 !important; transform: none !important; }


.certification-media--credential {
    aspect-ratio: 360 / 190;
    padding: 28px;
    box-sizing: border-box;
    background:
        radial-gradient(circle at 85% 20%, rgba(255, 153, 82, .18), transparent 34%),
        linear-gradient(145deg, #17100b, #090806 68%);
    color: #f6efe8;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    position: relative;
}
.certification-media--credential::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 166, 94, .42);
    pointer-events: none;
}
.credential-mark, .credential-type, .credential-action { position: relative; z-index: 1; }
.credential-mark {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.3rem, 4vw, 4rem);
    line-height: .9;
    letter-spacing: 2px;
    color: #ffad6a;
}
.credential-type {
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: 2.2px;
}
.credential-action {
    margin-top: 22px;
    font-family: 'Inter', sans-serif;
    font-size: .65rem;
    letter-spacing: 1.4px;
    color: rgba(246,239,232,.62);
}