/*
        Mayukhjit Chakraborty — Portfolio
        - Minimal, monochrome, responsive
        - Subtle interactions: scroll reveal, hover micro‑interactions, smooth anchors
        - Typography: OpenAI Sans (Regular, Medium, Semibold, Bold, Italic)
        
        Pro Tip: Check the console. Sometimes the best code comments
        are the ones that make you smile while debugging at 3am.
        
        Easter Eggs: Yes, they exist. Yes, they're documented.
        No, I won't tell you where. That's the fun part.
      */

      /* Font faces: OpenAI Sans */
      @font-face {
        font-family: "OpenAI Sans";
        src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
      }
      .section-title .icon svg {
        border-radius: 999px;
        overflow: visible;
      }
      @font-face {
        font-family: "OpenAI Sans";
        src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-RegularItalic.woff2") format("woff2");
        font-weight: 400;
        font-style: italic;
        font-display: swap;
      }
      @font-face {
        font-family: "OpenAI Sans";
        src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-Medium.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "OpenAI Sans";
        src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-Semibold.woff2") format("woff2");
        font-weight: 600;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "OpenAI Sans";
        src: url("https://cdn.openai.com/common/fonts/openai-sans/v2/OpenAISans-Bold.woff2") format("woff2");
        font-weight: 700;
        font-style: normal;
        font-display: swap;
      }

      :root {
        --bg: #0a0a0a;         /* near-black for softer contrast */
        --fg: #f5f5f5;         /* near-white for softer contrast */
        --muted: #bdbdbd;      /* subdued text */
        --line: #232323;       /* hairline separators */
        --card: #111111;       /* panels */
        --accent: #ffffff;     /* monochrome accent */
        --maxw: 1120px;
        --radius: 14px;
        --ease: cubic-bezier(.2,.8,.2,1);
        --ease-out: cubic-bezier(.16,1,.3,1);
        --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
        --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);
        
        /* Dynamic color palette system - cycles every 5 seconds */
        /* Fire palette (default) */
        --theme-primary-1: #fff8;
        --theme-primary-2: #ffd166;
        --theme-primary-3: #ff9f1c;
        --theme-primary-4: #ff6a00;
        --theme-primary-5: #e85d04;
        --theme-primary-6: #9d0208;
        --theme-glow-1: rgba(255,200,100,0.75);
        --theme-glow-2: rgba(255,120,0,0.35);
        --theme-glow-3: rgba(255,90,0,0.25);
        --theme-glow-4: rgba(255,170,0,0.18);
        --theme-filter: url(#liquid-fire);
        /* Amplify background grid highlight intensity */
        --grid-highlight-scale: 1.5;
      }
      /* 4K and TV displays (3840×2160) */
      @media (min-width: 2560px) {
        :root { --maxw: 1800px; font-size: 20px; }
        .container { padding: 0 80px; }
        .grid { gap: 40px; }
        .thumb { height: 320px; }
        .title { font-size: clamp(48px, 8vw, 96px); }
        .section-title { font-size: 32px; }
        .btn { font-size: 18px; padding: 18px 32px; }
        .card { padding: 40px; }
      }
      /* Ultra-wide displays (1920-2560) */
      @media (min-width: 1600px) and (max-width: 2559px) {
        :root { --maxw: 1400px; }
        .container { padding: 0 48px; }
        .grid { gap: 28px; }
        .thumb { height: 240px; }
        .title { font-size: clamp(40px, 7vw, 72px); }
      }
      /* Tablets landscape (1024-1599) */
      @media (min-width: 1024px) and (max-width: 1599px) {
        :root { --maxw: 1120px; }
        .container { padding: 0 40px; }
        .thumb { height: 200px; }
      }
      /* Tablets portrait (768-1023) */
      @media (min-width: 768px) and (max-width: 1023px) {
        .container { padding: 0 32px; }
        .thumb { height: 180px; }
        .title { font-size: clamp(32px, 6vw, 56px); }
      }
      /* Small phones */
      @media (max-width: 480px) {
        .container { padding: 0 18px; }
        header { padding: 10px 0; }
        .cta { gap: 12px; }
        .btn { min-height: 48px; padding: 14px 20px; font-size: 15px; } /* 48px min for accessible touch targets */
        .thumb { height: 160px; }
        .title { font-size: clamp(28px, 8vw, 48px); }
      }
      
      /* Touch-friendly interactions for mobile */
      @media (hover: none) and (pointer: coarse) {
        /* Increase all touch targets to minimum 48x48 */
        a, button, .btn, .icon, [role="button"], [tabindex="0"] {
          min-width: 48px;
          min-height: 48px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
        }
        
        /* Faster transitions for touch to feel more responsive */
        * {
          transition-duration: 0.15s !important;
        }
        
        /* Remove hover effects on touch devices */
        .card:hover, .project-card:hover, .btn:hover {
          transform: none;
        }
        
        /* Add tap highlight feedback */
        * {
          -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        }
      }
      /* Safe areas for notched devices */
      body { 
        padding-left: env(safe-area-inset-left); 
        padding-right: env(safe-area-inset-right);
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
      }
      
      /* Color transitions - applied via JavaScript for smooth CSS variable animation */
      html {
        transition: filter 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      
      /* Force smooth color transitions on elements using theme variables - extra long fade */
      .typer-text,
      .typer-fire::before,
      .typer-fire::after,
      .fire-highlight::before,
      .fire-highlight::after,
      .theme-indicator::before {
        transition: background 4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                     background-color 4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                     box-shadow 4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                     text-shadow 4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                     filter 4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                     color 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
      }
      
      /* Theme indicator in header */
      .theme-indicator {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        color: var(--muted);
        opacity: 0;
        transform: translateX(-8px);
        transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1),
                     transform 2s cubic-bezier(0.16, 1, 0.3, 1),
                     color 2.5s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
        margin-left: 12px;
      }
      .theme-indicator.visible {
        opacity: 1;
        transform: translateX(0);
      }
      .theme-indicator::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--theme-primary-4);
        box-shadow: 0 0 8px var(--theme-glow-2),
                    0 0 16px var(--theme-glow-3);
        transition: background 4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    box-shadow 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: inline-block;
      }

      * { box-sizing: border-box; }
      button, input, select, textarea { font: inherit; }
      html { scroll-behavior: auto; overflow-x: hidden; overflow-y: visible; }
      /* Ensure anchored sections account for sticky header height to avoid jump/fumble */
      section, #home, footer { scroll-margin-top: 96px; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--fg);
        font-family: "OpenAI Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transition: background-color 1200ms var(--ease), color 1200ms var(--ease);
        overflow-x: hidden; /* Prevent horizontal scroll from glows */
        overflow-y: visible; /* Allow vertical glows to extend */
      }

      /* Subtle, theme-aware background wash for seamless palette shifts */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(1200px 600px at 20% 10%, var(--theme-primary-2), transparent 60%),
                    radial-gradient(1000px 500px at 80% 90%, var(--theme-primary-6), transparent 65%);
        opacity: 0.075;
        /* Only fade opacity to avoid color-space timing weirdness during variable interpolation */
        transition: opacity 3000ms linear;
      }
      body.scrolled::before { opacity: 0.11; }

      /* Additional ambient theme‑matched blurs — enhanced layered color wash */
      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        /* Multiple softly blurred radial glows positioned around the viewport - increased opacity and coverage */
        /* Fallbacks for browsers without color-mix: use the theme variables (rgba) directly */
        background:
          radial-gradient(1200px 600px at 15% 80%, var(--theme-glow-2), transparent 75%),
          radial-gradient(1000px 500px at 85% 20%, var(--theme-glow-3), transparent 78%),
          radial-gradient(900px 450px at 35% 40%, var(--theme-primary-3), transparent 72%),
          radial-gradient(1100px 500px at 65% 65%, var(--theme-primary-5), transparent 76%),
          radial-gradient(800px 400px at 50% 15%, var(--theme-primary-2), transparent 70%);
        /* Then the preferred color-mix versions will override in supporting browsers */
        background:
          radial-gradient(1200px 600px at 15% 80%, color-mix(in oklab, var(--theme-glow-2) 70%, transparent), transparent 75%),
          radial-gradient(1000px 500px at 85% 20%, color-mix(in oklab, var(--theme-glow-3) 65%, transparent), transparent 78%),
          radial-gradient(900px 450px at 35% 40%, color-mix(in oklab, var(--theme-primary-3) 40%, transparent), transparent 72%),
          radial-gradient(1100px 500px at 65% 65%, color-mix(in oklab, var(--theme-primary-5) 32%, transparent), transparent 76%),
          radial-gradient(800px 400px at 50% 15%, color-mix(in oklab, var(--theme-primary-2) 28%, transparent), transparent 70%);
        opacity: 0.08;
        filter: blur(12px) saturate(120%);
        transition: opacity 3000ms linear, filter 3000ms linear;
        animation: ambientPulse 15s ease-in-out infinite alternate;
      }
      body.scrolled::after { opacity: 0.12; filter: blur(16px) saturate(130%); }
      
      @keyframes ambientPulse {
        0% { opacity: 0.08; filter: blur(12px) saturate(120%); }
        50% { opacity: 0.10; filter: blur(14px) saturate(125%); }
        100% { opacity: 0.08; filter: blur(12px) saturate(120%); }
      }
      
      body.scrolled::after {
        animation: ambientPulseScrolled 15s ease-in-out infinite alternate;
      }
      
      @keyframes ambientPulseScrolled {
        0% { opacity: 0.12; filter: blur(16px) saturate(130%); }
        50% { opacity: 0.14; filter: blur(18px) saturate(135%); }
        100% { opacity: 0.12; filter: blur(16px) saturate(130%); }
      }

      /* Fallbacks for browsers without color-mix */
      .no-colormix .card { background: var(--card); }
      .no-colormix .card:hover { background-color: #151515; }
      .no-colormix .tag, .no-colormix .chip, .no-colormix .badge { border-color: var(--line); }

      a { 
        color: var(--fg); 
        text-decoration: none; 
        transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      /* Theme-aware link hover with smooth color transition */
      a:hover { 
        opacity: 1;
        color: var(--theme-primary-3);
        transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      /* Animated underline with theme colors */
      .link-underline {
        background: linear-gradient(var(--theme-primary-3), var(--theme-primary-3)) left bottom/0 2px no-repeat;
        transition: background-size 320ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
                    color 280ms cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
      }
      .link-underline:hover { 
        background-size: 100% 2px; 
        opacity: 1;
        color: var(--theme-primary-2);
      }

      .container { max-width: var(--maxw); margin: 0 auto; padding: 0 48px; overflow: visible; }
      html.coarse .container { padding: 0 32px; }

      /* Background canvases */
      #bg-lava { 
        position: fixed; 
        inset: 0; 
        z-index: -2; 
        pointer-events: none; 
        opacity: 0.55;
        mix-blend-mode: screen;
        filter: saturate(140%);
        will-change: auto;
        transform: translateZ(0);
      }
      #bg-grid { 
        position: fixed; 
        inset: 0; 
        z-index: 0; 
        pointer-events: none; 
        opacity: 0.28; 
      }
      #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #fff, #bbb); z-index: 60; box-shadow: 0 0 12px rgba(255,255,255,0.6); }

      /* Header */
      header {
        position: sticky;
        top: 0;
        padding: 12px 0;
        z-index: 50;
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        backdrop-filter: blur(20px) saturate(140%);
        transition: background-color 500ms var(--ease), 
                    border-color 500ms var(--ease), 
                    padding 300ms var(--ease),
                    box-shadow 500ms var(--ease);
      }
      
      /* Enhanced blur and reflection when scrolled */
      body.scrolled header { 
        background: rgba(10,10,10,0.75); 
        border-bottom: 1px solid var(--line);
        padding: 10px 0;
        box-shadow: 0 4px 24px -4px rgba(0,0,0,0.4),
                    0 0 0 1px rgba(255,255,255,0.03),
                    0 8px 40px -8px var(--theme-glow-4);
      }
      
      /* Add subtle ambient glow to header */
      body.scrolled header::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to bottom, var(--theme-glow-4), transparent);
        opacity: 0.1;
        pointer-events: none;
      }
      .nav { display: flex; align-items: center; gap: 32px; justify-content: space-between; }
      .nav nav { flex: 1 1 auto; }
      .nav nav ul { display: flex; gap: 24px; align-items: center; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
      .nav .brand { display: inline-flex; align-items: center; gap: 14px; flex-shrink: 0; }
      .lang-select { display: flex; align-items: center; gap: 10px; margin-left: auto; }
      .lang-select select { background: #0c0c0c; border: 1px solid #222; color: #fff; padding: 8px 10px; border-radius: 8px; }
      @media (max-width: 900px) {
        .nav { flex-wrap: wrap; row-gap: 10px; }
        .lang-select { margin-left: 0; order: 3; width: 100%; justify-content: flex-end; }
      }
      .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); display: inline-block; position: relative; overflow: visible; }
      /* Red smoke click effect for brand dot */
      .dot-smoke {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        filter: blur(2px);
        mix-blend-mode: screen;
      }
      .dot-smoke .smoke-puff {
        position: absolute;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 40%, rgba(255,120,80,0.6), rgba(200,0,0,0.45) 45%, rgba(120,0,0,0.0) 70%);
        opacity: 0.9;
        transform: translate(0,0) scale(0.6);
        animation: smokeDrift 900ms ease-out forwards;
        will-change: transform, opacity;
        backface-visibility: hidden;
      }
      @keyframes smokeDrift {
        0% { opacity: 0.9; transform: translate(0, 0) scale(0.6); filter: blur(1px); }
        60% { opacity: 0.5; }
        100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -28px)) scale(2.2); filter: blur(6px); }
      }
      .brand .theme-indicator { vertical-align: middle; }
      nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; }
      nav a { 
        opacity: 0.9; 
        transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
                    color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                    background 200ms cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        padding: 6px 8px;
        border-radius: 8px;
        will-change: auto;
        backface-visibility: hidden;
      }
      
      nav a:hover {
        will-change: transform, opacity;
      }
      /* Ensure icons have good contrast across backgrounds */
      .icon { color: var(--fg); filter: drop-shadow(0 0 1px rgba(0,0,0,0.6)) drop-shadow(0 0 1px rgba(255,255,255,0.15)); }
      nav a::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 2px;
        background: currentColor;
        transition: width 200ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: width;
      }
      nav a:hover {
        opacity: 1;
        transform: translateY(-1px) translateZ(0);
      }
      nav a:hover::after {
        width: 100%;
      }
      nav a.active, nav a:focus-visible { 
        text-decoration: underline; 
        text-underline-offset: 6px; 
        text-decoration-thickness: 2px;
        opacity: 1;
      }
      nav a.active::after,
      nav a:focus-visible::after {
        width: 100%;
      }

      /* Focus ring */
      :focus-visible { outline: 2px solid #e6e6e6; outline-offset: 2px; border-radius: 8px; }

      /* Hero */
      .hero { 
        padding: 128px 0 88px; 
        position: relative; 
        z-index: 1; 
        overflow: visible; 
      }
      
      /* Add subtle ambient reflection to hero section */
      .hero::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background: radial-gradient(ellipse at center, var(--theme-glow-4) 0%, transparent 60%);
        filter: blur(80px);
        opacity: 0.2;
        pointer-events: none;
        z-index: -1;
        animation: heroAmbient 8s ease-in-out infinite alternate;
      }
      
      @keyframes heroAmbient {
        0% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
        50% { opacity: 0.25; transform: translate(-50%, -50%) scale(1.1); }
        100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
      }
      
      main { overflow: visible; }
      .kicker { color: var(--muted); font-weight: 500; letter-spacing: 0.4px; }
      .title { 
        font-size: clamp(32px, 7vw, 64px); 
        line-height: 1.15; 
        margin: 14px 0 14px; 
        font-weight: 700;
        /* Fixed height with 2 lines to prevent layout shift when text wraps */
        min-height: 2.3em;
        display: block;
      }
      .typer { 
        position: relative; 
        display: inline-flex; 
        align-items: baseline; 
        /* Fixed height to prevent layout shift */
        min-height: 1.2em;
        vertical-align: baseline;
      }
      .highlight-word {
        background: var(--theme-primary-3);
        color: var(--bg);
        padding: 2px 4px;
        border-radius: 2px;
      }
      .typer-text { 
        position: relative; 
        padding: 0 2px; 
        paint-order: stroke fill; 
        -webkit-text-stroke: 0.6px #000; 
        text-shadow: 1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000, 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; 
        will-change: contents; 
        backface-visibility: hidden;
        /* Dynamic color effect that cycles through palettes */
        background: conic-gradient(from 0deg at 50% 60%, var(--theme-primary-1) 0%, var(--theme-primary-2) 10%, var(--theme-primary-3) 25%, var(--theme-primary-4) 45%, var(--theme-primary-5) 60%, var(--theme-primary-6) 85%, var(--theme-primary-4) 100%);
        -webkit-background-clip: text; 
        background-clip: text; 
        color: transparent;
        text-shadow: 0 0 12px var(--theme-glow-1), 0 0 36px var(--theme-glow-2), 0 0 72px var(--theme-glow-3);
        filter: var(--theme-filter);
        /* Smoother flicker - using ease instead of steps */
        animation: flameFlicker 2s ease-in-out infinite;
      }
      /* Fire styling - enhanced effects when class is active */
      .typer-fire .typer-text {
        animation: flameFlicker 2s ease-in-out infinite;
      }
      .typer-fire::before, .typer-fire::after {
        content: ""; 
        position: absolute; 
        /* Larger field to avoid any clipping and soften falloff */
        inset: -18px -22px -12px; 
        pointer-events: none; 
        border-radius: 8px;
        background: radial-gradient(120px 48px at 50% 80%, color-mix(in oklab, var(--theme-glow-4) 85%, transparent), transparent 85%);
        filter: blur(14px);
        opacity: 0.5; 
        animation: heatWaves 3s ease-in-out infinite alternate;
      }
      .typer-fire::after { 
        inset: -28px -32px -18px; 
        filter: blur(22px); 
        opacity: 0.28; 
        animation-duration: 4.2s; 
      }
      @keyframes flameFlicker { 
        0%, 100% { opacity: 0.98; filter: url(#liquid-fire) brightness(1); } 
        25% { opacity: 1; filter: url(#liquid-fire) brightness(1.05); }
        50% { opacity: 0.99; filter: url(#liquid-fire) brightness(1); }
        75% { opacity: 1; filter: url(#liquid-fire) brightness(1.03); }
      }
      @keyframes heatWaves { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-2px) scale(1.02); } }
      .caret { width: 2px; height: 1em; background: currentColor; margin-left: 2px; align-self: baseline; transform: translateY(0.02em); animation: blink 1s step-end infinite; opacity: 0.9; }
      @keyframes blink { 50% { opacity: 0; } }
      .typer-glow .typer-text { 
        /* Dynamic color effect with enhanced glow */
        background: conic-gradient(from 0deg at 50% 60%, var(--theme-primary-1) 0%, var(--theme-primary-2) 10%, var(--theme-primary-3) 25%, var(--theme-primary-4) 45%, var(--theme-primary-5) 60%, var(--theme-primary-6) 85%, var(--theme-primary-4) 100%);
        -webkit-background-clip: text; 
        background-clip: text; 
        color: transparent;
        text-shadow: 0 0 12px var(--theme-glow-1), 0 0 36px var(--theme-glow-2), 0 0 72px var(--theme-glow-3);
        filter: var(--theme-filter);
      }
      .typer-shimmer .typer-text { 
        /* Dynamic color effect with shimmer */
        background: conic-gradient(from 0deg at 50% 60%, var(--theme-primary-1) 0%, var(--theme-primary-2) 10%, var(--theme-primary-3) 25%, var(--theme-primary-4) 45%, var(--theme-primary-5) 60%, var(--theme-primary-6) 85%, var(--theme-primary-4) 100%);
        -webkit-background-clip: text; 
        background-clip: text; 
        color: transparent;
        animation: shimmerSlide 1.6s linear infinite, flameFlicker 2s ease-in-out infinite;
        filter: var(--theme-filter);
      }
      @keyframes shimmerSlide { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }
      .sparkles { position: absolute; inset: 0; pointer-events: none; }
      .sparkles i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px rgba(255,255,255,0.7); animation: sparkle 800ms var(--ease-out) forwards; }
      @keyframes sparkle { 0% { transform: scale(0.6) translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(0) translateY(-16px); opacity: 0; } }

      /* Particle effects for text and buttons */
      .particle-container {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        overflow: visible;
      }
      .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: rgba(255,255,255,0.8);
        box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 16px rgba(255,255,255,0.3);
        pointer-events: none;
        animation: particleFloat 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      @keyframes particleFloat {
        0% {
          transform: translate(0, 0) scale(0.8);
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        100% {
          transform: translate(var(--tx, 0), var(--ty, -30px)) scale(0);
          opacity: 0;
        }
      }
      
      /* Button particles */
      .btn.particles-active {
        position: relative;
        overflow: visible;
      }
      
      /* Text hover particles */
      .particle-target:hover,
      h1:hover, h2:hover, h3:hover,
      .section-title:hover,
      .btn:hover {
        position: relative;
      }
      .subtitle { color: var(--muted); max-width: 64ch; }
      .availability { margin-top: 18px; }
      .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); /* fallback for color-mix */
        border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--line));
        background: rgba(17,17,17,0.6); color: var(--fg);
        -webkit-backdrop-filter: blur(6px) saturate(120%); backdrop-filter: blur(6px) saturate(120%); font-weight: 500; }
      .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #8fff8f; box-shadow: 0 0 0 0 rgba(143,255,143,0.5); animation: pulse 2.2s var(--ease) infinite; }
      @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(143,255,143,0.5); } 70% { box-shadow: 0 0 0 12px rgba(143,255,143,0); } 100% { box-shadow: 0 0 0 0 rgba(143,255,143,0); } }
      .cta { 
        display: flex; 
        gap: 16px; 
        margin-top: 32px; 
        flex-wrap: wrap; 
        align-items: center;
        /* Fixed positioning to prevent layout shift from typer text wrapping */
        position: relative;
        min-height: 40px; /* Minimum height for button row */
      }
      .btn {
        border-radius: 999px;
        padding: 12px 18px;
        border: 1px solid var(--fg);
        /* Smooth, natural transitions with theme-aware colors + graceful fade-out for glow */
        transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                    color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                    border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 120ms cubic-bezier(0.16, 1, 0.3, 1);
        font-family: inherit;
        position: relative;
        overflow: visible;
        min-height: 40px;
        transform: translateZ(0);
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
        will-change: auto;
        backface-visibility: hidden;
        contain: layout style paint;
        /* smoother pill rendering with antialiasing */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        outline: none;
      }
      
      /* Add will-change during interaction */
      .btn:hover, .btn:active {
        will-change: transform;
      }
      /* Allow tooltips/glows to render outside buttons when needed */
      .btn[data-tooltip] { overflow: visible; }
      /* Theme-aware hover with smooth fade-in using CSS custom properties */
      .btn:hover { 
        box-shadow: 0 0 40px 16px var(--theme-glow-2),
                    0 4px 20px -2px var(--theme-glow-3);
        transform: translateY(-2px) scale(1.02) translateZ(0);
        border-color: var(--theme-primary-3);
      }
      .btn:active {
        transform: translateY(0) scale(0.97) translateZ(0);
        transition-duration: 100ms;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35), 
                    inset 0 0 0 1px rgba(255,255,255,0.15);
      }
      /* Immediate click feedback with ripple effect */
      .btn.clicked {
        animation: buttonClick 200ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      /* Subtle human-like shake on click */
      .btn.clicked-shake {
        animation: shakeSubtle 240ms ease;
      }
      @keyframes buttonClick {
        0% { transform: scale(0.98) translateZ(0); }
        50% { transform: scale(1.02) translateZ(0); }
        100% { transform: scale(1) translateZ(0); }
      }
      @keyframes shakeSubtle {
        0% { transform: translateX(0) translateZ(0); }
        20% { transform: translateX(0.6px) translateZ(0); }
        40% { transform: translateX(0) translateZ(0); }
        60% { transform: translateX(-0.6px) translateZ(0); }
        80% { transform: translateX(0.3px) translateZ(0); }
        100% { transform: translateX(0) translateZ(0); }
      }
      .btn.primary { 
        background: var(--fg); 
        color: var(--bg); 
        border-color: var(--fg); 
      }
      .btn.ghost { 
        background: transparent; 
        color: var(--fg); 
      }
      /* Theme-aware smooth hover with gentle fade transitions */
      .btn.primary:hover { 
        background: var(--theme-primary-3);
        color: var(--fg);
        border-color: var(--theme-primary-2);
      }
      .btn.ghost:hover { 
        background: var(--theme-primary-3);
        color: var(--bg);
        border-color: var(--theme-primary-2);
      }
      /* Button shine on hover with smooth follow effect */
      .btn::after {
        content: "";
        position: absolute;
        inset: -40% -20%;
        background: radial-gradient(100px 35px at var(--hx, 50%) var(--hy, 50%), rgba(255,255,255,0.2), transparent 60%);
        transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
        pointer-events: none;
        transform: translateZ(0);
        will-change: opacity;
      }
      .btn:hover::after {
        content: "";
        position: absolute;
        z-index: 2;
        inset: -56px;
        border-radius: 999px;
        pointer-events: none;
        /* Softer halo with smoother stops and blur to remove ringed edges */
        background: radial-gradient(220px 100px at 50% 70%,
          rgba(255,232,140,0.16) 0%,
          rgba(255,232,140,0.08) 35%,
          rgba(255,232,140,0.03) 65%,
          transparent 92%);
        filter: blur(18px) saturate(110%);
        opacity: 1;
      }

      /* Sections */
      section { 
        padding: 128px 0; 
        position: relative; 
        z-index: 1; 
        overflow: visible;
      }
      
      /* Add subtle ambient reflections to sections */
      section::before {
        content: '';
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        width: 80%;
        height: 200px;
        background: radial-gradient(ellipse at center, var(--theme-glow-4) 0%, transparent 70%);
        filter: blur(60px);
        opacity: 0.15;
        pointer-events: none;
        z-index: -1;
      }
      
      .section-head { 
        display: flex; 
        align-items: baseline; 
        justify-content: space-between; 
        gap: 32px; 
        margin-bottom: 48px; 
        overflow: visible; 
      }
      
      .section-title { 
        font-weight: 600; 
        font-size: 20px; 
        letter-spacing: 0.4px;
        position: relative;
      }
      
      /* Add subtle glow to section titles */
      .section-title::after {
        content: '';
        position: absolute;
        inset: -10px -20px;
        background: radial-gradient(ellipse at center, var(--theme-glow-4) 0%, transparent 60%);
        filter: blur(20px);
        opacity: 0;
        transition: opacity 300ms ease;
        pointer-events: none;
        z-index: -1;
      }
      
      .section-title:hover::after {
        opacity: 0.6;
      }
      
      .section-desc { color: var(--muted); }

      /* Projects */
      .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; overflow: visible; }
      .card {
        grid-column: span 12;
        /* fallback for color-mix */
        background: var(--card);
        background: color-mix(in oklab, var(--card) 92%, var(--theme-primary-1));
        border: none;
        border-radius: var(--radius);
        padding: 32px;
        overflow: visible;
        transition: background-color 200ms var(--ease-smooth), 
                    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 200ms var(--ease-out),
                    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
                    filter 200ms cubic-bezier(0.16, 1, 0.3, 1);
        /* Glassmorphism */
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 6px 18px rgba(0,0,0,0.22);
        position: relative;
        transform: translateZ(0);
        will-change: auto;
        backface-visibility: hidden;
        contain: layout style paint;
        /* Allow outer glows from pseudo-elements to diffuse beyond card bounds */
      }
      
      /* Add will-change only during hover */
      .card:hover {
        will-change: transform, box-shadow;
      }
      .card::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius);
        padding: 1px;
        background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
        will-change: opacity;
      }
      .card:hover {
        /* Theme-aware background with smooth fade-in */
        background-color: var(--card);
        background-color: color-mix(in oklab, var(--card) 86%, var(--theme-primary-2));
        /* Theme-aware glow that matches current color palette - reduced intensity */
        box-shadow: 0 0 32px 10px var(--theme-glow-3),
                    0 8px 20px -4px var(--theme-glow-4);
        transform: translateY(-4px) scale(1.015) translateZ(0);
      }
      /* Theme-aware reflective shine that follows cursor with smooth fade */
      .card::after {
        content: '';
        position: absolute;
        inset: -140px;
        pointer-events: none;
        /* Dynamic theme-based gradient using CSS custom properties - reduced opacity */
        background: radial-gradient(800px 400px at var(--mx, 60%) var(--my, 25%),
          var(--theme-glow-2) 0%,
          var(--theme-glow-3) 22%,
          var(--theme-glow-4) 50%,
          transparent 80%);
        filter: blur(22px);
        border-radius: var(--radius);
        opacity: 0;
        /* Smooth natural fade-in */
        transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
        will-change: opacity;
      }
      .card:hover::after { 
        opacity: 0.45; 
      }
      .card:hover::before {
        opacity: 1;
      }
      /* Remove the constant shimmer animation - it causes jitter */
      .thumb { position: relative; height: 180px; border: 1px solid var(--line); border-radius: var(--radius); display: grid; place-items: center; background: #0f0f0f; overflow: visible; }
      @media (min-width: 1800px) { .thumb { height: 240px; } }
      .thumb .logo { opacity: 0.95; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), filter 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms cubic-bezier(0.16, 1, 0.3, 1), stroke 220ms cubic-bezier(0.16, 1, 0.3, 1), fill 220ms cubic-bezier(0.16, 1, 0.3, 1); }
      .thumb:hover .logo { transform: scale(1.06); opacity: 1; }
      /* Theme-accent hover highlights for logos (SVG stroke/fill, IMG glow) */
      .thumb:hover .logo, .thumb:focus-visible .logo {
        filter: drop-shadow(0 2px 10px rgba(0,0,0,0.35)) drop-shadow(0 0 8px var(--theme-glow-2));
      }
      .thumb .logo [stroke], .thumb .logo [fill] { transition: stroke 300ms var(--ease), fill 300ms var(--ease); }
      .thumb:hover .logo [stroke] { stroke: var(--accent) !important; }
      .thumb:hover .logo [fill].accent-fill { fill: var(--accent-2) !important; }
      .thumb:hover img.logo { box-shadow: 0 0 0 2px rgba(255,255,255,0.06), 0 0 16px var(--theme-glow-2), 0 0 30px var(--theme-glow-3); border-radius: 10px; }
      .thumb::after { 
        content: ""; 
        position: absolute; 
        inset: 0; 
        /* Broadened, softer glow with gradual transparency stops + blur to remove hard cutoff */
        background: radial-gradient(1000px 220px at var(--mx, 50%) var(--my, 50%),
          color-mix(in oklab, var(--theme-glow-2) 70%, transparent) 0%,
          color-mix(in oklab, var(--theme-glow-2) 35%, transparent) 40%,
          transparent 85%);
        filter: blur(18px) saturate(115%);
        /* ensure thumbnail glow follows rounded corner */
        border-radius: var(--radius);
        transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
        opacity: 0;
        pointer-events: none;
        will-change: opacity;
      }
      .card:hover .thumb {
        transform: scale(1.04) translateZ(0);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 0 18px var(--theme-glow-2), 0 0 36px var(--theme-glow-3), 0 6px 18px rgba(0,0,0,0.32);
        will-change: transform;
        transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      .card:hover .thumb::after { opacity: 1; }
      /* Emphasize hovered card instantly without delay — spotlight effect */
      .grid:hover .card { 
        opacity: 0.9; 
        transition: opacity 0ms, filter 0ms, transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1); 
      }
      .grid:hover .card:not(:hover) { 
        opacity: 0.65; 
        filter: saturate(0.9); 
      }
      .thumb img.logo, .thumb svg.logo { 
        width: 72px; 
        height: 72px; 
        object-fit: contain; 
        filter: grayscale(0.2); 
        opacity: 0.96;
        transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
                    filter 220ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      /* Keep raster logos neutralized, but let SVG logos render their designed colors */
      .thumb svg.logo { 
        filter: none; 
        opacity: 1; 
        color: var(--fg);
      }
      /* Keep Subscriberlytics logo white, including on hover */
      .thumb .logo.logo-subscriberlytics { color: #ffffff; }
      .thumb .logo.logo-subscriberlytics [stroke] { stroke: #ffffff !important; }
      .thumb .logo.logo-subscriberlytics [fill] { fill: #ffffff !important; }
      .card:hover .thumb img.logo,
      .card:hover .thumb svg.logo {
        transform: scale(1.06) translateZ(0);
        opacity: 1;
        filter: grayscale(0);
      }
      /* GCSEMate: grayscale by default, full color on hover; remove any outlines */
      article[data-project="gcsemate"] .thumb img.logo { filter: grayscale(1) saturate(0.9); opacity: 0.95; box-shadow: none !important; outline: none !important; }
      article[data-project="gcsemate"]:hover .thumb img.logo,
      article[data-project="gcsemate"] .thumb:hover img.logo { filter: none; opacity: 1; }
      /* Larger featured logo */
      .card:first-child .thumb img.logo { width: 120px; height: 120px; }
      .card h3 { margin: 6px 0; font-size: 18px; font-weight: 600; }
      .card p { margin: 0; color: var(--muted); }
      .tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
      .tag { 
        /* fallback for older browsers */
        border: 1px solid var(--line);
        border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--line)); 
        padding: 6px 10px; 
        border-radius: 999px; 
        color: var(--muted); 
        font-size: 12px;
        transition: color 250ms cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateZ(0);
        display: inline-block;
        position: relative;
        will-change: transform, box-shadow;
        backface-visibility: hidden;
        
      }
      /* Enhanced touch targets for mobile/tablet */
      @media (pointer: coarse) { 
        .tag { padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; } 
        .chip { padding: 14px 16px; min-height: 48px; display: inline-flex; align-items: center; }
        .btn { min-height: 48px; padding: 14px 20px; }
        nav a { padding: 10px 12px; min-height: 44px; display: flex; align-items: center; }
        .card { padding: 28px; }
        /* Better touch feedback */
        .btn:active, .tag:active, .chip:active, .card:active {
          transform: scale(0.98) translateZ(0);
          transition-duration: 50ms;
        }
      }
      
      /* Prevent text selection during interactions on touch devices */
      @media (pointer: coarse) {
        .btn, .tag, .chip, .card, nav a {
          -webkit-tap-highlight-color: rgba(255,255,255,0.1);
          -webkit-touch-callout: none;
          -webkit-user-select: none;
          user-select: none;
        }
      }
      .tag::before {
        content: '';
        position: absolute;
        inset: -18px -22px;
        border-radius: 999px;
        background: radial-gradient(360px 140px at 50% 50%, rgba(255,255,255,0.08), rgba(255,255,255,0.0) 85%);
        filter: blur(14px);
        opacity: 0;
        transition: opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      .tag:hover { 
        color: var(--fg); 
        border-color: var(--accent); 
        /* fallback for older browsers (no color-mix) */
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06),
                    0 0 20px var(--theme-glow-2),
                    0 0 40px var(--theme-glow-3),
                    0 4px 16px rgba(0,0,0,0.25),
                    0 0 60px var(--theme-glow-4);
        /* preferred (overrides in supporting browsers): use color-mix for richer inset */
        box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 20%, transparent),
                    0 0 28px var(--theme-glow-2),
                    0 0 64px var(--theme-glow-3),
                    0 6px 22px rgba(0,0,0,0.28);
        transform: translateY(-2px) scale(1.05) translateZ(0);
      }
      .tag:hover::before {
        opacity: 1;
        background: radial-gradient(660px 220px at 50% 50%, rgba(255,232,140,0.10), transparent 98%);
      }

      /* Glass utility (for future elements) */
  .glass { background: rgba(17,17,17,0.6); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); }

      /* Experience */
      .timeline { display: grid; gap: 16px; }
      .item { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
      .item h4 { margin: 0; font-weight: 600; }
      .item .meta { color: var(--muted); font-size: 14px; }

      /* Skills */
      .skills-container { display: grid; gap: 40px; }
      .skill-category { opacity: 0; }
      .skill-category.slide-in-up {
        animation: slideInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      .chips { display: flex; flex-wrap: wrap; gap: 14px; }
  .chip { padding: 10px 12px; border: 1px solid var(--line); border: 1px solid color-mix(in oklab, var(--fg) 12%, var(--line)); border-radius: 999px; background: #0c0c0c; color: var(--fg); }

      /* FAQ Section - Smooth animations */
      .faq-list { display: grid; gap: 12px; }
      .faq-item {
        border: 1px solid var(--line);
        border-radius: var(--radius);
        background: rgba(17,17,17,0.78);
        -webkit-backdrop-filter: blur(10px) saturate(140%);
        backdrop-filter: blur(10px) saturate(140%);
        /* Allow hover glows/shadows to not get clipped by the container */
        overflow: visible;
        transition: border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                    background-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
        position: relative;
        transform: translateZ(0);
        will-change: transform, box-shadow;
        backface-visibility: hidden;
        
      }
      /* Add reflection effect to FAQ items */
      .faq-item::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius);
        background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 50%, rgba(255,255,255,0.04) 100%);
        opacity: 0;
        transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
      }
      
      .faq-item:hover {
        border-color: rgba(255,255,255,0.12);
        background: rgba(15,15,15,0.88);
        transform: translateY(-3px) translateZ(0);
        box-shadow: 0 4px 16px rgba(0,0,0,0.2), 
                    0 0 0 1px rgba(255,255,255,0.05),
                    0 8px 32px -8px var(--theme-glow-4);
      }
      
      .faq-item:hover::before {
        opacity: 1;
      }
      
      .faq-item[open] {
        border-color: rgba(255,255,255,0.18);
        background: rgba(12,12,12,0.92);
        transform: translateY(-2px) translateZ(0);
      }
      .faq-question {
        padding: 20px 24px;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
        list-style: none;
        position: relative;
        -webkit-user-select: none;
        user-select: none;
        transition: color 300ms cubic-bezier(0.16, 1, 0.3, 1),
                    padding 400ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      .faq-item:hover .faq-question {
        color: var(--fg);
      }
      .faq-question::-webkit-details-marker { display: none; }
      .faq-question::marker { display: none; }
      .faq-question::after {
        content: '+';
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%) scale(1);
        font-size: 22px;
        font-weight: 300;
        transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                     color 300ms cubic-bezier(0.16, 1, 0.3, 1);
        color: var(--muted);
        line-height: 1;
      }
      .faq-item[open] .faq-question::after {
        transform: translateY(-50%) rotate(45deg) scale(1.1);
        color: var(--fg);
      }
      .faq-item[open] .faq-question {
        padding-bottom: 16px;
        color: var(--fg);
      }
      .faq-answer {
        padding: 0 24px;
        color: var(--muted);
        line-height: 1.75;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-8px);
        transition: max-height 550ms cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 450ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 500ms cubic-bezier(0.16, 1, 0.3, 1),
                    padding 450ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      .faq-item[open] .faq-answer {
        max-height: 600px;
        opacity: 1;
        padding-bottom: 24px;
        padding-top: 0;
        transform: translateY(0);
      }
      .faq-answer p {
        margin: 0;
        margin-top: 8px;
        transform: translateY(-12px);
        opacity: 0;
        transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
                    opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
        transition-delay: 80ms;
      }
      .faq-item[open] .faq-answer p {
        transform: translateY(0);
        opacity: 1;
      }
      .particle-target {
        position: relative;
        display: inline-block;
      }

      /* Footer */
  footer { border-top: 1px solid var(--line); padding: 88px 0 112px; color: var(--muted); position: relative; z-index: 1; -webkit-backdrop-filter: blur(4px) saturate(120%); backdrop-filter: blur(4px) saturate(120%); background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,0.6)); margin-top: 36px; }
      .foot { gap: 20px; }
      .foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
      .handmade { margin-top: 10px; font-size: 13px; color: #9f9f9f; }

      /* Icons */
      .icon {
        width: 18px; height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        line-height: 1;
        color: var(--fg);
        margin: 0 2px;
        flex-shrink: 0;
      }
      /* Spotify-specific small alignment nudge without affecting other icons */
      .icon-spotify { transform: translateY(1px); }
      /* linkedin icon nudge up for better vertical centering */
      .btn [href="#icon-linkedin"] { transform: translateY(-1px); }
      
      /* brand colors on hover for social media buttons */
      .btn[href*="youtube.com"]:hover { 
        border-color: #FF0000 !important; 
        box-shadow: 0 0 40px 16px rgba(255, 0, 0, 0.3),
                    0 4px 20px -2px rgba(255, 0, 0, 0.4) !important;
      }
      .btn[href*="spotify.com"]:hover { 
        border-color: #1DB954 !important; 
        box-shadow: 0 0 40px 16px rgba(29, 185, 84, 0.3),
                    0 4px 20px -2px rgba(29, 185, 84, 0.4) !important;
      }
      .btn[href*="linkedin.com"]:hover { 
        border-color: #0A66C2 !important; 
        box-shadow: 0 0 40px 16px rgba(10, 102, 194, 0.3),
                    0 4px 20px -2px rgba(10, 102, 194, 0.4) !important;
      }
      .btn .icon { 
        margin-left: 8px; 
        width: 20px; 
        height: 20px; 
        padding: 0; 
        color: currentColor;
        transition: color 320ms cubic-bezier(0.4, 0, 0.2, 1);
        /* Ensure SVG icons inside buttons are centered vertically */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        flex-shrink: 0;
      }
      /* Fix icon rendering and ensure proper contrast */
      .btn.primary .icon { 
        color: var(--bg); 
        fill: var(--bg);
      }
      .btn.ghost .icon { 
        color: var(--fg);
        fill: var(--fg);
      }
      /* White icons on purple/lilac themed buttons for better contrast */
      .btn.primary:hover .icon,
      .btn.ghost:hover .icon {
        color: #ffffff;
        fill: #ffffff;
        filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
      }
      /* Ensure all icon SVGs render properly */
      .icon svg,
      .icon use {
        width: 100%;
        height: 100%;
        display: block;
      }
      /* Standalone heading icons: large glassmorphic circle with enhanced glow */
      .section-title .icon {
        width: 66px; height: 66px;
        display: inline-grid; place-items: center;
        vertical-align: middle; border-radius: 999px;
        padding: 16px; margin-right: 8px; margin-left: 0;
        background: rgba(17,17,17,0.6);
        border: 1px solid #2a2a2a;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 4px 12px rgba(0,0,0,0.32);
        transition: box-shadow 220ms var(--ease-smooth), border-color 220ms var(--ease-smooth), background 220ms var(--ease-smooth), transform 200ms var(--ease-out);
        position: relative;
        overflow: visible;
        isolation: isolate;
      }
      .section-title .icon::after {
        content: '';
        position: absolute;
        inset: -18px;
        border-radius: inherit;
        background: radial-gradient(100px 100px at 50% 50%, color-mix(in oklab, var(--theme-primary-3) 18%, transparent), transparent 65%);
        opacity: 0;
        filter: blur(12px);
        transition: opacity 180ms var(--ease-smooth);
        pointer-events: none;
        z-index: -1;
        will-change: opacity;
      }
      /* Enhanced glassy reflective hover with stronger glow */
      .section-title:hover .icon {
        /* fallback border-color and inset before using color-mix */
        border-color: #2a2a2a;
        border-color: color-mix(in oklab, var(--accent) 70%, #2a2a2a);
        box-shadow: 
          inset 0 0 0 2px rgba(255,255,255,0.02),
          inset 0 0 0 2px color-mix(in oklab, var(--accent) 35%, transparent),
          0 6px 20px rgba(0,0,0,0.32),
          0 0 20px var(--theme-glow-2),
          0 0 38px var(--theme-glow-3);
        background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(17,17,17,0.3));
        transform: translateY(-2px) scale(1.05);
        overflow: visible;
        will-change: transform;
      }
      .section-title:hover .icon::after {
        opacity: 1;
      }
      /* Slight active feedback (headings only) */
      .section-title:active .icon { transform: translateY(0) scale(0.98); }
      .icon-title { margin-right: 10px; }

      /* Floating scroll-to-top button */
      #toTop { position: fixed; right: 20px; bottom: 20px; z-index: 70; opacity: 0; transform: translateY(20px); transition: opacity 250ms var(--ease), transform 250ms var(--ease); }
      #toTop.visible { opacity: 1; transform: translateY(0); }
      /* Ensure high contrast for the floating Top button icon */
      #toTop.btn.primary { box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
      #toTop.btn.primary .icon { color: var(--bg); filter: none; mix-blend-mode: normal; }
      #toTop.btn.primary:hover .icon { color: var(--fg); }

      /* Command Palette */
  #cmdk { 
        position: fixed; 
        inset: 0; 
        z-index: 100; 
        display: none; 
        align-items: flex-start; 
        justify-content: center; 
        padding-top: 12vh; 
        background: rgba(0,0,0,0.65); 
        -webkit-backdrop-filter: blur(8px) saturate(120%); 
        backdrop-filter: blur(8px) saturate(120%); 
        animation: fadeIn 180ms ease-out;
      }
      #cmdk.open { display: flex; }
      @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }
      .cmdk-panel { 
        width: min(680px, 92vw); 
        background: linear-gradient(135deg, #111 0%, #0d0d0d 100%);
        border: 1px solid #2a2a2a; 
        border-radius: 14px; 
        box-shadow: 0 24px 60px rgba(0,0,0,0.7),
                    inset 0 1px 0 rgba(255,255,255,0.05); 
        overflow: hidden;
        animation: slideUp 220ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      @keyframes slideUp {
        from { 
          opacity: 0;
          transform: translateY(20px) scale(0.96); 
        }
        to { 
          opacity: 1;
          transform: translateY(0) scale(1); 
        }
      }
      .cmdk-head { 
        display: flex; 
        align-items: center; 
        gap: 10px; 
        padding: 16px 18px; 
        border-bottom: 1px solid #1f1f1f;
        background: rgba(255,255,255,0.02);
      }
      .cmdk-head::before {
        content: '⌘';
        font-size: 18px;
        opacity: 0.4;
      }
      .cmdk-input { 
        width: 100%; 
        background: transparent;
        border: none;
        color: #fff; 
        padding: 0;
        font-size: 16px;
        outline: none;
        position: relative;
      }
      
      /* Add subtle glow when focused */
      .cmdk-input:focus {
        text-shadow: 0 0 20px var(--theme-glow-3);
      }
      
      .cmdk-input::placeholder {
        color: #666;
      }
      .cmdk-list { 
        max-height: 52vh; 
        overflow: auto; 
        padding: 4px;
      }
      .cmdk-list::-webkit-scrollbar {
        width: 8px;
      }
      .cmdk-list::-webkit-scrollbar-track {
        background: transparent;
      }
      .cmdk-list::-webkit-scrollbar-thumb {
        background: #333;
        border-radius: 4px;
      }
      .cmdk-item { 
        display: flex; 
        align-items: center; 
        gap: 12px; 
        padding: 12px 14px; 
        border-radius: 8px;
        cursor: pointer;
        transition: background 120ms ease, transform 120ms ease;
        margin-bottom: 2px;
      }
      .cmdk-item:hover { 
        background: rgba(255,255,255,0.05); 
      }
      .cmdk-item[aria-selected="true"] { 
        background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
        border: 1px solid rgba(255,255,255,0.08);
        transform: translateX(4px);
      }
      .cmdk-item span:first-child {
        flex: 1;
      }
      .cmdk-kbd { 
        margin-left: auto; 
        color: #888; 
        font-size: 11px; 
        background: rgba(255,255,255,0.06);
        padding: 4px 8px;
        border-radius: 4px;
        border: 1px solid rgba(255,255,255,0.08);
        font-family: ui-monospace, monospace;
      }
      .cmdk-empty {
        padding: 32px 20px;
        text-align: center;
        color: #666;
        font-size: 14px;
      }
      .cmdk-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px 18px;
        border-top: 1px solid #1f1f1f;
        background: rgba(0,0,0,0.3);
        font-size: 11px;
        color: #666;
      }
      .cmdk-footer-shortcuts {
        display: flex;
        gap: 16px;
        align-items: center;
      }
      .cmdk-footer-shortcut {
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .cmdk-category {
        padding: 8px 14px 4px 14px;
        font-size: 11px;
        font-weight: 600;
        color: #888;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      /* Modal */
  #modal { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
      #modal.open { display: flex; }
      .modal-card { width: min(900px, 94vw); max-height: 84vh; overflow: auto; background: #0e0e0e; border: 1px solid #2a2a2a; border-radius: 14px; padding: 18px; box-shadow: 0 24px 48px rgba(0,0,0,0.5); }
      .modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 10px; }
      .modal-close { background: transparent; border: 1px solid #2a2a2a; border-radius: 8px; color: #fff; padding: 6px 10px; }
      .modal-grid { display:grid; grid-template-columns: 1fr; gap: 12px; }
      .modal-media { display:grid; grid-auto-flow: column; gap: 10px; overflow-x: auto; }
      .modal-media img { height: 180px; border-radius: 10px; border: 1px solid #222; }
      .badges { display:flex; flex-wrap:wrap; gap:8px; }
      .badge-tech { padding:6px 10px; border:1px solid #2a2a2a; border-radius:999px; color:#cfcfcf; }

      /* Tooltips */
      [data-tooltip] { position: relative; }
      [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%) translateY(4px);
        background: rgba(20,20,20,0.95);
        color: #fff;
        padding: 6px 8px;
        border-radius: 6px;
        font-size: 12px;
        line-height: 1;
        white-space: nowrap;
        border: 1px solid #2a2a2a;
        opacity: 0;
        pointer-events: none;
        transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
      }
      [data-tooltip]:hover::after, [data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

      /* Pros/Cons Table */
      /* Error overlay — simple, graphical error handling surface (slightly opinionated) */
      #errorOverlay {
        position: fixed;
        right: 16px;
        bottom: 84px;
        width: min(520px, 92vw);
        display: none;
        z-index: 120;
      }
      .error-card {
        background: rgba(18,18,18,0.95);
        border: 1px solid #2a2a2a;
        border-radius: 12px;
        box-shadow: 0 18px 44px rgba(0,0,0,0.45);
        padding: 14px 14px 10px;
        color: #eaeaea;
      }
      .error-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
      .error-title { font-weight: 700; font-size: 14px; }
      .error-actions { display:flex; gap:8px; }
      .error-actions button { background:#121212; color:#eaeaea; border:1px solid #2a2a2a; border-radius:8px; padding:6px 8px; cursor:pointer; }
      .error-body { margin-top: 8px; color:#bbbbbb; font-size: 13px; }
      .error-pre { margin-top: 8px; max-height: 200px; overflow:auto; background:#0e0e0e; border:1px solid #2a2a2a; border-radius:8px; padding:10px; color:#cfcfcf; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
      .table-wrapper { overflow: auto; }
      .pros-cons-table {
        width: 100%;
        border-collapse: collapse;
      }
      .pros-cons-table thead {
        color: var(--muted);
        text-align: left;
      }
      .pros-cons-table th,
      .pros-cons-table td {
        padding: 10px 8px;
        border-top: 1px solid var(--line);
      }
      .pros-cons-table tbody tr:hover {
        background: rgba(255,255,255,0.02);
        transition: background 180ms var(--ease);
      }

      /* Toast notification */
      #toast {
        position: fixed;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(20,20,20,0.95);
        color: #fff;
        padding: 14px 20px;
        border-radius: 999px;
        border: 1px solid #2a2a2a;
        box-shadow: 0 8px 24px rgba(0,0,0,0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
        z-index: 80;
        -webkit-backdrop-filter: blur(8px) saturate(140%);
        backdrop-filter: blur(8px) saturate(140%);
        font-size: 14px;
        font-weight: 500;
      }
      #toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
      }

      /* Bubble score UI animations */
      #bubbleScoreUI {
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      #bubbleScoreUI:hover {
        transform: translateY(0) scale(1.02);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
      }
      #bubbleScoreUI #bubbleScore {
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      #bubbleScoreUI #bubbleCombo {
        transition: opacity 0.3s ease;
      }
      #bubbleScoreUI button {
        transition: all 0.15s ease;
      }
      #bubbleScoreUI button:active {
        transform: scale(0.95);
      }
      #countdownDisplay {
        animation: countdownPulse 1s ease-in-out infinite;
      }
      @keyframes countdownPulse {
        0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
        50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.85; }
      }

      /* Skip link for accessibility */
      .skip-link {
        position: absolute;
        top: -100px;
        left: 0;
        background: var(--fg);
        color: var(--bg);
        padding: 12px 20px;
        z-index: 100;
        text-decoration: none;
        font-weight: 600;
        border-radius: 0 0 8px 0;
      }
      .skip-link:focus {
        top: 0;
      }

      /* Fire highlight effect — clean fiery glow for button interactions */
      .fire-highlight {
        position: relative;
        transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      .fire-highlight::before {
        content: '';
        position: absolute;
        inset: -18px -24px;
        border-radius: 8px;
        background: conic-gradient(from 0deg at 50% 50%, 
          rgba(255,217,102,0.12) 0%, 
          rgba(255,159,28,0.22) 20%, 
          rgba(255,106,0,0.28) 40%, 
          rgba(232,93,4,0.22) 60%, 
          rgba(157,2,8,0.18) 80%, 
          rgba(255,106,0,0.12) 100%);
        /* Broaden and blur heavily so the conic / colour bands diffuse naturally */
        opacity: 0;
        filter: blur(30px) saturate(115%);
        inset: -28px -34px; /* allow more bleed for softer falloff */
        z-index: -1;
        transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
        transform: scale(0.95);
        pointer-events: none;
      }
      .fire-highlight::after {
        content: '';
        position: absolute;
        inset: -18px -22px;
        border-radius: 8px;
        /* Softer linear layer with diffused shadows */
        background: linear-gradient(135deg,
          rgba(255,217,102,0.28) 0%,
          rgba(255,140,40,0.34) 50%,
          rgba(255,217,102,0.24) 100%);
        opacity: 0;
        filter: blur(18px) saturate(115%);
        box-shadow: 0 0 36px rgba(255,160,48,0.08),
                    0 0 84px rgba(255,120,36,0.06),
                    inset 0 0 28px rgba(255,217,102,0.12);
        z-index: -1;
        transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
      }
      .fire-highlight.active::before {
        opacity: 1;
        transform: scale(1);
        animation: firePulse 2s ease-in-out infinite;
      }
      .fire-highlight.active::after {
        opacity: 1;
      }
      
      /* For sections, use more padding */
      section.fire-highlight::before,
      section.fire-highlight::after {
        inset: -16px -20px;
      }
      section.fire-highlight::after {
        inset: -8px -12px;
        border-radius: var(--radius);
      }
      
      @keyframes firePulse {
        0%, 100% { 
          opacity: 0.85;
          transform: scale(1);
        }
        50% { 
          opacity: 1;
          transform: scale(1.02);
        }
      }

      /* Grid responsiveness */
      @media (min-width: 640px) {
        .card { grid-column: span 6; }
        .thumb { height: 208px; }
      }
      @media (min-width: 920px) {
        .card { grid-column: span 4; }
        .thumb { height: 228px; }
      }

      /* Reveal animations — quicker fade for snappier feel */
      .reveal { 
        opacity: 0; 
        transform: translateY(16px) scale(0.985); 
        transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1), 
                    transform 400ms cubic-bezier(0.16, 1, 0.3, 1); 
        will-change: auto;
      }
      .reveal.visible { 
        opacity: 1; 
        transform: translateY(0) scale(1);
        will-change: auto;
      }

      /* Keyboard shortcut styling */
      kbd {
        background: rgba(255,255,255,0.1);
        border: 1px solid var(--line);
        border-radius: 4px;
        padding: 4px 6px;
        font-family: ui-monospace, monospace;
        font-size: 12px;
        font-weight: 600;
        color: var(--fg);
        box-shadow: 0 1px 2px rgba(0,0,0,0.2);
      }

      /* Rainbow pulse animation for easter eggs */
      @keyframes rainbowPulse {
        0%, 100% { filter: hue-rotate(0deg); }
        25% { filter: hue-rotate(90deg); }
        50% { filter: hue-rotate(180deg); }
        75% { filter: hue-rotate(270deg); }
      }

      /* About section layout and speech bubble */
      .about-card {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 16px;
        align-items: start;
      }
      .about-media {
        width: 100px; height: 100px;
      }
      .about-media img {
        display: block; width: 100%; height: 100%; object-fit: cover;
        border-radius: 999px; border: 1px solid var(--line);
        box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      }
      .speech-bubble {
        position: relative;
        padding: 10px 12px;
        color: #fff;
        background: rgba(16,16,18,0.68);
        border: 1px solid var(--line);
        border-radius: 12px;
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
        box-shadow: 0 8px 24px rgba(0,0,0,0.35);
        max-width: min(560px, 100%);
        word-wrap: break-word;
        margin-bottom: 10px;
      }
      .speech-bubble::before {
        content: '';
        position: absolute;
        left: -6px; top: 20px;
        width: 10px; height: 10px;
        background: rgba(16,16,18,0.68);
        border-left: 1px solid var(--line);
        border-top: 1px solid var(--line);
        transform: rotate(45deg);
      }
      @media (max-width: 640px) {
        .about-card { grid-template-columns: 1fr; gap: 14px; }
        .about-media { width: 84px; height: 84px; }
        .about-media { justify-self: center; }
        .speech-bubble { margin-top: 2px; }
        .speech-bubble::before {
          left: 22px; top: -6px;
          border-left: 0; border-top: 0;
          border-right: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
      }

      /* Reduce motion */
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        .btn:hover, .card:hover { transform: none; }
        .reveal { opacity: 1; transform: none; }
        .thumb::after { display: none; }
        .btn::after { display: none; }
        .caret { display: none; }
        .sparkles { display: none; }
        .typer-shimmer .typer-text { animation: none; color: #ffffff; -webkit-background-clip: initial; background-clip: initial; }
      }

      /* Unified tooltip layer */
      #tooltip {
        position: fixed;
        top: 0; left: 0;
        transform: translate(-9999px, -9999px);
        z-index: 1000;
        pointer-events: none;
        background: rgba(20,20,20,0.92);
        border: 1px solid var(--line);
        color: var(--fg);
        padding: 6px 8px;
        font-size: 12px;
        border-radius: 8px;
        box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  max-width: min(52ch, 60vw);
  white-space: normal;
  text-align: center;
        opacity: 0;
        transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      #tooltip.show { opacity: 1; }
      /* High-contrast accent edge for brand fit */
      #tooltip::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 8px;
        pointer-events: none;
        /* fallback for older browsers */
        box-shadow: 0 0 0 1px rgba(255,255,255,0.02);
        box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent);
        opacity: 0.6;
      }
      #tooltip::before {
        content: '';
        position: absolute;
        width: 10px;
        height: 10px;
        background: rgba(20,20,20,0.92);
        border: 1px solid var(--line);
        transform: rotate(45deg);
        pointer-events: none;
        opacity: 0;
        transition: opacity 120ms cubic-bezier(0.16, 1, 0.3, 1);
      }
      #tooltip.show::before { opacity: 1; }
      #tooltip[data-side="top"]::before {
        bottom: -5px;
        left: calc(50% - 5px);
        border-top: none;
        border-left: none;
      }
      #tooltip[data-side="bottom"]::before {
        top: -5px;
        left: calc(50% - 5px);
        border-bottom: none;
        border-right: none;
      }
      #tooltip[data-side="left"]::before {
        right: -5px;
        top: calc(50% - 5px);
        border-left: none;
        border-bottom: none;
      }
      #tooltip[data-side="right"]::before {
        left: -5px;
        top: calc(50% - 5px);
        border-right: none;
        border-top: none;
      }
      .loading-screen {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: linear-gradient(135deg, #0a0a0f 0%, #12121a 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 24px;
        opacity: 1;
        transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
      }
      .loading-screen.loaded {
        opacity: 0;
        transform: scale(1.05);
      }
      .loading-spinner {
        width: 48px;
        height: 48px;
        border: 3px solid rgba(255,255,255,0.1);
        border-top-color: var(--theme-primary-4);
        border-radius: 50%;
        animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
        position: relative;
      }
      .loading-spinner::after {
        content: '';
        position: absolute;
        inset: 6px;
        border: 2px solid rgba(255,255,255,0.05);
        border-bottom-color: var(--theme-primary-5);
        border-radius: 50%;
        animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite reverse;
      }
      @keyframes spin {
        to { transform: rotate(360deg); }
      }
      @keyframes fadeInTip {
        from {
          opacity: 0;
          transform: translateX(-50%) translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateX(-50%) translateY(0);
        }
      }
      .loading-text {
        font-weight: 500;
        font-size: 14px;
        color: var(--muted);
        letter-spacing: 0.5px;
      }

      /* Utility classes for inline styles removal */
      .svg-hidden { position: absolute; }
      .about-subtitle { margin: 0 0 6px 0; }
      .about-description { margin: 0 0 10px 0; color: var(--muted); }
      .badges { display: flex; flex-wrap: wrap; gap: 8px; }
      .badge-link { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
      .icon-small { width: 16px; height: 16px; }
      .about-cta { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
      .project-logo { width: 72px; height: 72px; }
      .project-note { margin-top: 12px; font-size: 13px; color: var(--muted); font-style: italic; }
      .vision-cta { margin-top: 20px; }
      .faq-search-wrapper { margin-bottom: 16px; }
      .faq-search { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: #0c0c0c; color: var(--fg); font-size: 14px; transition: border-color 200ms var(--ease); }
      .faq-search:focus { border-color: var(--accent); outline: none; }
      .faq-search-count { margin-top: 8px; color: var(--muted); font-size: 13px; }
      .skills-category-title { margin-bottom: 14px; font-size: 18px; }
      .skills-category-chips { margin-bottom: 24px; }
      .testimonial-header { display: flex; gap: 12px; margin-bottom: 12px; align-items: center; }
      .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 20px; color: #fff; }
      .testimonial-avatar-s { background: linear-gradient(135deg, var(--theme-primary-3), var(--theme-primary-5)); }
      .testimonial-avatar-r { background: linear-gradient(135deg, var(--theme-primary-2), var(--theme-primary-4)); }
      .testimonial-avatar-a { background: linear-gradient(135deg, var(--theme-primary-4), var(--theme-primary-6)); }
      .testimonial-name { font-weight: 600; }
      .testimonial-role { color: var(--muted); font-size: 13px; }
      .resume-badges { margin-top: 12px; }
      .resume-section-title { margin-top: 20px; }
      .resume-timeline { display: grid; gap: 14px; margin-top: 10px; }
      .timeline-item-header { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
      .timeline-item-meta { color: var(--muted); }
      .timeline-item-list { margin-top: 6px; }
      .resume-chips { margin-top: 10px; }
      .help-cta { margin-top: 20px; }

      /* Mobile tooltip animations */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translate(-50%, 10px);
        }
        to {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }

      @keyframes fadeOutDown {
        from {
          opacity: 1;
          transform: translate(-50%, 0);
        }
        to {
          opacity: 0;
          transform: translate(-50%, 10px);
        }
      }

      /* Button press micro-interaction */
      @media (hover: none) and (pointer: coarse) {
        .btn:active, button:active, [role="button"]:active {
          transform: scale(0.96);
          transition: transform 0.1s ease;
        }
      }

      /* Smooth micro-interactions for desktop */
      @media (hover: hover) and (pointer: fine) {
        .btn, .card, .project-card, a {
          transition: transform 0.2s var(--ease-out), 
                      box-shadow 0.2s var(--ease-out),
                      background 0.2s var(--ease-out);
        }
        
        .btn:hover {
          transform: translateY(-2px);
        }
        
        .btn:active {
          transform: translateY(0px);
        }
      }

      /* Celebration animation for Easter egg */
      @keyframes pulse {
        0%, 100% {
          transform: scale(1);
          opacity: 1;
        }
        50% {
          transform: scale(1.05);
          opacity: 0.8;
        }
      }

      /* Focus visible improvements for keyboard navigation */
      :focus-visible {
        outline: 2px solid var(--theme-primary-3);
        outline-offset: 4px;
        border-radius: 4px;
      }

      /* Reduced motion overrides for accessibility */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }

      /* High contrast mode support */
      @media (prefers-contrast: high) {
        :root {
          --fg: #ffffff;
          --bg: #000000;
          --line: #ffffff;
        }
        
        .btn, .card {
          border: 2px solid var(--fg);
        }
      }

      /* Dark mode improvements (system preference) */
      @media (prefers-color-scheme: dark) {
        ::selection {
          background: var(--theme-primary-3);
          color: var(--bg);
        }
      }

      /* === GPU-Accelerated Animation System === */
      /* Force GPU acceleration for smooth 60fps animations */
      .btn, .card, .project-card, nav a, .section-title {
        will-change: auto; /* Changed from transform to auto to reduce memory usage */
        transform: translateZ(0);
        backface-visibility: hidden;
      }
      
      /* Only apply will-change during interactions */
      .btn:hover, .card:hover, nav a:hover {
        will-change: transform;
      }

      /* Entrance animations with staggered delays */
      .fade-in {
        animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
      }
      
      .slide-in-up {
        animation: slideInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
      }
      
      .slide-in-left {
        animation: slideInLeft 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
      }
      
      .slide-in-right {
        animation: slideInRight 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
      }
      
      .scale-in {
        animation: scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
      }

      /* Stagger animation delays for sequential entrance */
      [data-animate]:nth-child(1) { animation-delay: 0.05s; }
      [data-animate]:nth-child(2) { animation-delay: 0.1s; }
      [data-animate]:nth-child(3) { animation-delay: 0.15s; }
      [data-animate]:nth-child(4) { animation-delay: 0.2s; }
      [data-animate]:nth-child(5) { animation-delay: 0.25s; }
      [data-animate]:nth-child(6) { animation-delay: 0.3s; }
      [data-animate]:nth-child(7) { animation-delay: 0.35s; }
      [data-animate]:nth-child(8) { animation-delay: 0.4s; }
      [data-animate]:nth-child(9) { animation-delay: 0.45s; }
      [data-animate]:nth-child(10) { animation-delay: 0.5s; }

      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes slideInUp {
        from {
          opacity: 0;
          transform: translateY(30px) translateZ(0);
        }
        to {
          opacity: 1;
          transform: translateY(0) translateZ(0);
        }
      }

      @keyframes slideInLeft {
        from {
          opacity: 0;
          transform: translateX(-30px) translateZ(0);
        }
        to {
          opacity: 1;
          transform: translateX(0) translateZ(0);
        }
      }

      @keyframes slideInRight {
        from {
          opacity: 0;
          transform: translateX(30px) translateZ(0);
        }
        to {
          opacity: 1;
          transform: translateX(0) translateZ(0);
        }
      }

      @keyframes scaleIn {
        from {
          opacity: 0;
          transform: scale(0.9) translateZ(0);
        }
        to {
          opacity: 1;
          transform: scale(1) translateZ(0);
        }
      }

      /* Loading skeleton screens for better perceived performance */
      .skeleton {
        background: linear-gradient(90deg, 
          var(--card) 0%, 
          color-mix(in oklab, var(--card) 95%, var(--fg)) 50%, 
          var(--card) 100%
        );
        background-size: 200% 100%;
        animation: skeletonShimmer 1.5s ease-in-out infinite;
        border-radius: var(--radius);
      }

      @keyframes skeletonShimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }

      /* Subtle parallax effect for depth */
      [data-parallax] {
        will-change: transform;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Focus ring with theme colors for better accessibility */
      :focus-visible {
        outline: 2px solid var(--theme-primary-3);
        outline-offset: 3px;
        border-radius: 4px;
        transition: outline-color 280ms cubic-bezier(0.4, 0, 0.2, 1);
      }