/*
 * styles.css — Component Styles
 *
 * This file contains the visual styles for every component on the site.
 * It's loaded AFTER reset.css and tokens.css, so it can use all the
 * CSS variables defined in tokens.css (e.g. var(--accent-purple)).
 *
 * Structure:
 *   1. Global body & container
 *   2. Navigation bar
 *   3. Hero section
 *   4. Buttons
 *   5. Sections (shared layout for all content sections)
 *   6. Work Cards
 *   7. Thinking / List Items
 *   8. Contact section
 *   9. Footer
 *  10. Scroll Reveal animation
 *  11. Particle background canvas
 *  12. Responsive (mobile) overrides
 *  13. Reduced motion accessibility
 */


/* ═══════════════════════════════════════════════
   1. GLOBAL
   ═══════════════════════════════════════════════ */

body {
    font-family: var(--font-body);       /* System font stack defined in tokens.css */
    background: var(--bg);               /* White in light mode, near-black in dark */
    color: var(--text-primary);          /* Dark in light mode, light in dark */
    overflow-x: auto;                    /* Allow horizontal scroll if needed (prevents clipping) */
}

/* The container centres content and sets a max width so text
   doesn't stretch edge-to-edge on wide monitors */
.container {
    width: 100%;
    max-width: var(--container-max); /* Caps at 1200px */
    margin: 0 auto;                  /* auto left/right margins centre the box */
    padding: 0 var(--space-8);       /* 32px side padding so content never touches edges */
}


/* ═══════════════════════════════════════════════
   2. NAVIGATION BAR
   The nav is "fixed" — it stays at the top of the screen
   even when you scroll. z-index: 1000 keeps it above
   all other content.
   ═══════════════════════════════════════════════ */

.nav {
    position: fixed;     /* Sticks to the top of the viewport */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;       /* Stacks above everything else on the page */
    height: var(--nav-height);
    display: flex;
    align-items: center;

    /* No background or blur on the nav element itself — handled by ::before
       so that the blur layer is BEHIND the text, not on the same element.
       When backdrop-filter is on the same element as text, the browser puts
       them in the same GPU compositing layer and the blur bleeds into the text. */
    background: transparent;
    isolation: isolate;  /* Creates a new stacking context so ::before z-index works */

    /* Subtle glass edge borders */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid var(--border);

    /* Smooth transition for box-shadow on scroll */
    transition: box-shadow var(--duration-base) var(--ease-smooth);
}

/* ::before is a pseudo-element — it's a separate invisible layer that sits
   BEHIND all the nav content. We apply the glass blur here instead of on
   .nav directly. This way the text lives in a different layer and stays sharp. */
.nav::before {
    content: '';
    position: absolute;
    inset: 0;            /* Stretch to fill the entire nav bar */
    background: var(--nav-bg-glass);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    z-index: -1;         /* Behind all nav content */
    transition: background var(--duration-base) var(--ease-smooth);
}

/* When the user scrolls, JS adds .scrolled — this makes the nav
   more opaque and adds a shadow so it looks elevated */
.nav.scrolled {
    box-shadow: var(--shadow-sm);
}
.nav.scrolled::before {
    background: var(--nav-scrolled-bg-glass);
}

/* Nav inner is a flex row that spaces logo and links apart */
.nav-inner {
    display: flex;
    justify-content: space-between; /* Logo on left, links on right */
    align-items: center;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-8);
}

/* Logo link in the top-left corner */
.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
}

.nav-logo-img {
    height: 32px;
    width: auto;
    object-fit: contain; /* Keeps aspect ratio while fitting in the box */
}

/* The horizontal list of nav links */
.nav-links {
    display: flex;
    gap: var(--space-10); /* Space between each link */
}

/* Individual nav link styling.
   transform: translateZ(0) forces the text into its own GPU layer,
   preventing blur bleed-through from the parent backdrop-filter. */
.nav-link {
    font-size: var(--text-sm);
    font-weight: 450;
    color: var(--text-secondary);
    letter-spacing: var(--tracking-wide);
    transition: color var(--duration-base) var(--ease-smooth);
    position: relative;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

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

/* Contact link — highlighted pill to catch the eye */
.nav-link-contact {
    color: var(--accent-purple);
    font-weight: 600;
}

.nav-link-contact:hover {
    color: var(--accent-purple);
    opacity: 0.75;
}

/* Animated underline on hover.
   ::after creates a pseudo-element (a fake element in CSS).
   It starts with width: 0 (invisible) and expands to 100% on hover. */
.nav-link::after {
    content: '';        /* Required for pseudo-elements to appear */
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;           /* Hidden by default */
    height: 1.5px;
    background: var(--gradient-accent);
    transition: width var(--duration-base) var(--ease-smooth);
}

.nav-link:hover::after {
    width: 100%; /* Slides in from left */
}

/* ── Nav actions group (theme toggle + hamburger) ──
   Always visible on the right side of the nav bar.
   On desktop the hamburger is hidden inside this group.
   On mobile both are visible. */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Theme toggle button — always visible in nav bar on all screen sizes */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    transition: transform var(--duration-base) var(--ease-smooth),
                background var(--duration-base) var(--ease-smooth);
}

.theme-toggle:hover {
    background: var(--gradient-subtle);
    transform: scale(1.1);
}

/* ── Mobile hamburger menu button ──
   Hidden on desktop, shown on mobile via the @media query below */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: var(--space-2);
    background: none;
    border: none;
}

/* The three horizontal lines of the hamburger icon */
.nav-toggle span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--text-primary);
    transition: all var(--duration-base) var(--ease-smooth);
}


/* ═══════════════════════════════════════════════
   3. HERO SECTION
   The full-screen landing section at the top of the homepage.
   min-height: 100vh makes it at least the full screen height.
   padding-top accounts for the fixed nav bar above it.
   ═══════════════════════════════════════════════ */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;            /* Vertically centre the content */
    padding-top: var(--nav-height); /* Push content below the fixed nav */
}

/* Two-column grid: text on left, 3D canvas on right */
.hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: var(--space-16);           /* 64px gap between columns */
    align-items: center;
    width: 100%;
}

.hero-content {
    max-width: 560px; /* Keeps text from becoming too wide to read */
}

/* The small "Built by Pratham Oza" pill above the heading */
.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--accent-purple);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-bottom: var(--space-6);
    padding: var(--space-2) var(--space-4);
    background: var(--gradient-subtle);
    border-radius: var(--radius-full); /* Pill shape */
    border: 1px solid rgba(122, 99, 255, 0.1);
}

/* The glowing dot before the hero tag text */
.hero-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%; /* Perfect circle */
    background: var(--accent-purple);
    box-shadow: 0 0 8px rgba(122, 99, 255, 0.5); /* Purple glow */
}

.hero-title {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: 400;
    line-height: 1.0;               /* Tight line height for big display text */
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
}

/* The gradient text on "Poza's Den" in the hero title.
   background-clip: text clips the gradient to the text shape.
   -webkit-text-fill-color: transparent hides the default text colour
   so only the gradient background shows through. */
.hero-title .accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-10);
    max-width: 480px;
}

/* Row of CTA buttons below the description */
.hero-cta {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

/* Container for the 3D Three.js canvas */
.hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* The div that Three.js renders its <canvas> into */
#threeHeroCanvas {
    width: 100%;
    max-width: 450px;
    aspect-ratio: 1;    /* Forces a 1:1 square regardless of width */
    position: relative;
    margin: 0 auto;
    cursor: grab;       /* Shows a "grab" cursor to hint the user can drag it */
    z-index: 10;
}

#threeHeroCanvas:active {
    cursor: grabbing; /* Changes to closed hand while dragging */
}

/* Override Three.js inline styles to make the canvas fill its container */
#threeHeroCanvas canvas {
    width: 100% !important;
    height: 100% !important;
    outline: none;
}


/* ═══════════════════════════════════════════════
   4. BUTTONS
   .btn is the base — shared by all buttons.
   .btn-primary and .btn-secondary are the two variants.
   ═══════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-8);
    border-radius: var(--radius-full); /* Pill shape */
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: var(--tracking-wide);
    cursor: pointer;
    border: none;
    transition: all var(--duration-base) var(--ease-smooth);
}

/* Filled gradient button — used for the primary action */
.btn-primary {
    background: var(--gradient-accent);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(122, 99, 255, 0.25);
}

.btn-primary:hover {
    transform: translateY(-2px);                       /* Lifts up slightly */
    box-shadow: 0 8px 30px rgba(122, 99, 255, 0.35);  /* Stronger glow on hover */
}

/* Ghost/outline button — used for secondary actions */
.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-hover);
}

.btn-secondary:hover {
    background: var(--gradient-subtle);
    border-color: rgba(122, 99, 255, 0.2);
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════
   5. SECTIONS
   Shared layout used by Experience, Projects, etc.
   Each section has a header (label + title + description)
   and then its content below.
   ═══════════════════════════════════════════════ */

.section {
    padding: var(--space-32) 0; /* 128px top/bottom breathing room */
    position: relative;
}

.section-header {
    margin-bottom: var(--space-16); /* Space between header and cards */
}

/* Small uppercase label above the section title (e.g. "PROFESSIONAL") */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--accent-purple);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

/* Short decorative line before the label text */
.section-label::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--gradient-accent);
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.section-description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 560px; /* Keeps description at a readable line length */
}


/* ═══════════════════════════════════════════════
   6. WORK CARDS
   Two-column grid of cards used for Experience and Projects.
   Each card lifts and glows on hover.
   ═══════════════════════════════════════════════ */

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two equal columns */
    gap: var(--space-8);
}

.work-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-10);
    transition: all var(--duration-slow) var(--ease-smooth);
    cursor: pointer;
    position: relative;
    overflow: hidden; /* Clips the ::before glow to the card's rounded corners */
}

/* Invisible glow layer that fades in on hover using ::before pseudo-element */
.work-card::before {
    content: '';
    position: absolute;
    inset: 0; /* Shorthand for top/right/bottom/left: 0 — fills the card */
    background: var(--gradient-glow);
    opacity: 0; /* Hidden by default */
    transition: opacity var(--duration-slow) var(--ease-smooth);
    z-index: 0;
}

.work-card:hover {
    border-color: rgba(91, 76, 255, 0.3);
    /* Multi-layered glow shadow */
    box-shadow: 0 0 30px rgba(91, 76, 255, 0.2),
                0 0 60px rgba(122, 99, 255, 0.15),
                0 0 20px rgba(79, 125, 245, 0.1);
    transform: translateY(-4px); /* Lifts card up */
}

.work-card:hover::before {
    opacity: 1; /* Shows the glow layer */
}

/* z-index: 1 puts the content above the ::before glow layer */
.work-card-content {
    position: relative;
    z-index: 1;
}

/* Small emoji icon box at the top of each card */
.work-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--gradient-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    font-size: var(--text-xl);
}

.work-card-title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.work-card-description {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-6);
}

/* Flex row of tag pills at the bottom of a card */
.work-card-tags {
    display: flex;
    flex-wrap: wrap; /* Wraps to next line if there are too many tags */
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

/* Individual tag pill */
.tag {
    font-size: var(--text-xs);
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
    background: var(--gradient-subtle);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
}

/* "Learn more →" link at the bottom of a card */
.work-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--accent-purple);
    transition: gap var(--duration-base) var(--ease-smooth);
}

.work-card-link:hover {
    gap: var(--space-3); /* Gap widens slightly — gives the arrow space to move */
}

.work-card-link .arrow {
    transition: transform var(--duration-base) var(--ease-smooth);
}

.work-card-link:hover .arrow {
    transform: translateX(4px); /* Arrow slides right on hover */
}


/* ═══════════════════════════════════════════════
   7. THINKING / LIST ITEMS
   Used for Awards, Education, and My Life sections.
   A vertical list with a top border on the first item
   and bottom borders on each item.
   ═══════════════════════════════════════════════ */

.thinking-list {
    display: flex;
    flex-direction: column;
    gap: 0; /* Items touch — borders create separation instead */
}

.thinking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--duration-base) var(--ease-smooth);
}

/* Top border only on the very first item */
.thinking-item:first-child {
    border-top: 1px solid var(--border);
}

/* On hover, the item slides right slightly for a tactile feel */
.thinking-item:hover {
    padding-left: var(--space-4);
}

/* Title colour shifts to purple on hover */
.thinking-item:hover .thinking-title {
    color: var(--accent-purple);
}

.thinking-content {
    flex: 1; /* Takes up all available space, pushing the arrow to the right */
}

.thinking-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
    transition: color var(--duration-base) var(--ease-smooth);
}

.thinking-description {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
    line-height: var(--leading-normal);
}

/* The → arrow on the right side of each list item */
.thinking-arrow {
    font-size: var(--text-lg);
    color: var(--text-muted);
    transition: all var(--duration-base) var(--ease-smooth);
    margin-left: var(--space-8);
    flex-shrink: 0; /* Prevents the arrow from shrinking if the title is long */
}

.thinking-item:hover .thinking-arrow {
    color: var(--accent-purple);
    transform: translateX(4px); /* Arrow nudges right on hover */
}


/* ═══════════════════════════════════════════════
   8. CONTACT SECTION
   Centred call-to-action at the bottom of the homepage.
   ═══════════════════════════════════════════════ */

.contact {
    text-align: center;
    padding: var(--space-40) 0;
}

.contact-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    max-width: 600px;
    margin-left: auto;  /* Combined with margin-right: auto — centres the element */
    margin-right: auto;
}

.contact-description {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    max-width: 500px;
    margin: 0 auto var(--space-10);
}

/* Row of LinkedIn / Email / Twitter buttons */
.contact-links {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap; /* Wraps to next line on small screens */
}

/* Individual contact button (outline style) */
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: all var(--duration-base) var(--ease-smooth);
}

.contact-btn:hover {
    color: var(--accent-purple);
    border-color: rgba(122, 99, 255, 0.3);
    box-shadow: var(--glow-purple);
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════
   9. FOOTER
   Simple bar at the very bottom with copyright text
   and quick nav links.
   ═══════════════════════════════════════════════ */

.footer {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--border);
}

.footer-inner {
    display: flex;
    justify-content: space-between; /* Copyright on left, links on right */
    align-items: center;
}

.footer-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* Row of footer nav links */
.footer-links {
    display: flex;
    gap: var(--space-6);
}

.footer-link {
    font-size: var(--text-xs);
    color: var(--text-muted);
    transition: color var(--duration-fast) var(--ease-smooth);
}

.footer-link:hover {
    color: var(--text-secondary);
}


/* ═══════════════════════════════════════════════
   10. SCROLL REVEAL ANIMATION
   Elements start invisible (opacity 0) and shifted down (translateY 24px).
   When JS adds the "visible" class, they fade+slide into position.
   reveal-delay-1/2/3/4 stagger the animation so cards don't all
   appear at exactly the same time.
   ═══════════════════════════════════════════════ */

.reveal {
    opacity: 0;
    transform: translateY(24px); /* Starts 24px below its final position */
    transition: opacity   var(--duration-slow) var(--ease-smooth),
                transform var(--duration-slow) var(--ease-smooth);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0); /* Slides up to final position */
}

/* Stagger delays — each card animates a bit later than the previous */
.reveal-delay-1 { transition-delay: 100ms; }
.reveal-delay-2 { transition-delay: 200ms; }
.reveal-delay-3 { transition-delay: 300ms; }
.reveal-delay-4 { transition-delay: 400ms; }


/* ═══════════════════════════════════════════════
   11. PARTICLE BACKGROUND CANVAS
   The <canvas> element that shows floating particles.
   position: fixed keeps it in place as the page scrolls.
   z-index: -1 puts it behind everything else.
   pointer-events: none means clicks pass straight through it.
   ═══════════════════════════════════════════════ */

#particleBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}


/* ═══════════════════════════════════════════════
   12. RESPONSIVE — TABLETS & MOBILE (≤ 768px)
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {

    .container {
        padding: 0 var(--space-4);
    }

    /* ── Nav bar inner layout on mobile ── */
    .nav-inner {
        padding: 0 var(--space-4);
    }

    /* No blur anywhere on mobile — solid backgrounds only */
    .nav::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #ffffff;
    }

    [data-theme="dark"] .nav::before {
        background: #0a0a0f;
    }

    .nav.scrolled::before {
        background: #ffffff;
    }

    [data-theme="dark"] .nav.scrolled::before {
        background: #0a0a0f;
    }

    /* ── RIGHT-SIDE SIDEBAR ──
       Slides in from the right edge. Solid background, no blur. */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: min(280px, 78vw);
        height: 100dvh;
        padding-top: calc(var(--nav-height) + var(--space-10));
        padding-bottom: var(--space-10);

        /* Solid panel — no blur */
        background: #ffffff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-left: 1px solid rgba(122, 99, 255, 0.2);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);

        /* Stack links vertically */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-6);

        /* Above everything including WebGL */
        z-index: 9999;

        /* HIDDEN: slid off-screen to the right */
        visibility: hidden;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.3s;
    }

    /* VISIBLE: slides in */
    .nav-links.active {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .nav-link {
        font-size: var(--text-xl);
        font-weight: 500;
        color: var(--text-primary);
        width: 100%;
        text-align: center;
        padding: var(--space-2) 0;
    }

    .nav-link-contact {
        color: var(--accent-purple);
    }

    /* Show hamburger on mobile */
    .nav-toggle {
        display: flex;
    }

    /* Animate hamburger → X when open */
    .nav-toggle.active span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    /* ── Backdrop ── dimmed overlay behind the sidebar */
    body.menu-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 9998;
        pointer-events: none; /* Don't swallow taps — let clicks pass through to links */
    }

    /* ── Hero ── */
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav-height) + var(--space-10));
        padding-bottom: var(--space-10);
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: var(--space-10);
        text-align: center;
    }

    .hero-content {
        max-width: 100%;
    }

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

    .hero-description {
        max-width: 100%;
        font-size: var(--text-base);
    }

    .hero-cta {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-visual {
        order: -1;
    }

    #threeHeroCanvas {
        max-width: 280px;
    }

    /* ── Sections ── */
    .section {
        padding: var(--space-16) 0;
    }

    .section-title {
        font-size: var(--text-3xl);
    }

    .section-description {
        font-size: var(--text-base);
    }

    /* ── Cards ── */
    .work-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .work-card {
        padding: var(--space-6);
    }

    .work-card-title {
        font-size: var(--text-xl);
    }

    /* ── Thinking list ── */
    .thinking-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .thinking-arrow {
        margin-left: 0;
    }

    /* ── Contact ── */
    .contact {
        padding: var(--space-20) 0;
    }

    .contact-title {
        font-size: var(--text-3xl);
    }

    .contact-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-3);
    }

    /* ── Footer ── */
    .footer-inner {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-4);
    }
}

/* Dark mode sidebar */
@media (max-width: 768px) {
    [data-theme="dark"] .nav-links {
        background: #0a0a0f;
        border-left: 1px solid rgba(122, 99, 255, 0.3);
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.5);
    }
}


/* ═══════════════════════════════════════════════
   SMALL PHONES (≤ 480px)
   ═══════════════════════════════════════════════ */

@media (max-width: 480px) {

    .container {
        padding: 0 var(--space-4);
    }

    .hero-title {
        font-size: 2.5rem;
    }

    #threeHeroCanvas {
        max-width: 240px;
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
        max-width: 260px;
    }

    .section-title {
        font-size: var(--text-2xl);
    }

    .work-card-title {
        font-size: var(--text-lg);
    }

    .thinking-title {
        font-size: var(--text-lg);
    }

    .contact-title {
        font-size: var(--text-2xl);
    }

    /* Wrap contact buttons to full width on tiny screens */
    .contact-btn {
        width: 100%;
        max-width: 260px;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════
   VERY SMALL PHONES (≤ 375px — iPhone SE etc.)
   ═══════════════════════════════════════════════ */

@media (max-width: 375px) {

    .hero-title {
        font-size: 2rem;
    }

    #threeHeroCanvas {
        max-width: 200px;
    }

    .section-label {
        font-size: 0.65rem;
    }
}


/* ═══════════════════════════════════════════════
   13. REDUCED MOTION ACCESSIBILITY
   Some users have "Reduce Motion" enabled in their OS settings
   (common for people with vestibular disorders or motion sensitivity).
   This block disables all animations and transitions for those users.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;        /* Effectively instant */
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Also make all reveal elements immediately visible
       so they don't stay hidden when animations are disabled */
    .reveal {
        opacity: 1;
        transform: none;
    }
}