/*
 * ════════════════════════════════════════════════════════════
 *  SAJJAN REGMI — PORTFOLIO STYLESHEET
 *  regmisajjan.com · sajjanregmi60@gmail.com
 *  Version: 3.0.0 — Competition Edition
 *  Theme: Deep Space / Holographic Precision
 * ════════════════════════════════════════════════════════════
 *
 * Theme Name:  Sajjan Regmi Portfolio
 * Theme URI:   https://regmisajjan.com
 * Author:      Sajjan Regmi
 * Author URI:  https://regmisajjan.com
 * Description: Custom portfolio theme — BIT Data Engineering, TAFE NSW, Sydney.
 * Version:     3.0.0
 * Requires at least: 6.0
 * Tested up to: 6.7
 * Requires PHP: 8.0
 * License:     GNU General Public License v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: sajjan-portfolio
 */

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════════════════════════ */
:root {

    /* ── Core Backgrounds ── */
    --color-bg:              #030712;
    --color-bg-alt:          #060d1f;
    --color-bg-elevated:     #0a1628;
    --color-bg-glass:        rgba(6, 13, 31, 0.60);

    /* ── Surfaces ── */
    --color-surface:         rgba(255, 255, 255, 0.034);
    --color-surface-hover:   rgba(255, 255, 255, 0.065);
    --color-surface-active:  rgba(56, 189, 248, 0.08);
    --color-surface-dark:    rgba(3, 7, 18, 0.88);

    /* ── Borders ── */
    --color-border:          rgba(56, 189, 248, 0.10);
    --color-border-hover:    rgba(56, 189, 248, 0.38);
    --color-border-bright:   rgba(56, 189, 248, 0.65);
    --color-border-subtle:   rgba(255, 255, 255, 0.055);
    --color-border-white:    rgba(255, 255, 255, 0.10);

    /* ── Primary Accent — Electric Cyan ── */
    --color-accent:          #38bdf8;
    --color-accent-dim:      #0ea5e9;
    --color-accent-bright:   #7dd3fc;
    --color-accent-pale:     #bae6fd;
    --color-accent-glow:     rgba(56, 189, 248, 0.20);
    --color-accent-glow2:    rgba(56, 189, 248, 0.07);
    --color-accent-glow-sm:  rgba(56, 189, 248, 0.12);
    --color-accent-glow-lg:  rgba(56, 189, 248, 0.30);

    /* ── Secondary — Cosmic Indigo ── */
    --color-indigo:          #818cf8;
    --color-indigo-dim:      #6366f1;
    --color-indigo-glow:     rgba(129, 140, 248, 0.18);

    /* ── Tertiary — Emerald ── */
    --color-emerald:         #34d399;
    --color-emerald-glow:    rgba(52, 211, 153, 0.15);

    /* ── Status ── */
    --color-green:           #28c840;
    --color-green-glow:      rgba(40, 200, 64, 0.18);
    --color-amber:           #fbbf24;
    --color-red:             #ff5f57;

    /* ── Text ── */
    --color-text:            #e2e8f0;
    --color-text-muted:      #94a3b8;
    --color-text-faint:      #3d4f68;
    --color-white:           #ffffff;

    /* ── Typography ── */
    --font-heading:  'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body:     'Inter', system-ui, sans-serif;
    --font-code:     'JetBrains Mono', 'Fira Code', monospace;

    /* ── Type Scale ── */
    --text-2xs: 0.6875rem;
    --text-xs:  0.75rem;
    --text-sm:  0.875rem;
    --text-base:1rem;
    --text-lg:  1.125rem;
    --text-xl:  1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-hero:clamp(3rem, 6.5vw, 5.4rem);

    /* ── Spacing ── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* ── Layout ── */
    --container-max: 1200px;
    --container-pad: clamp(1.25rem, 5vw, 4rem);

    /* ── Border Radius ── */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   18px;
    --radius-xl:   26px;
    --radius-2xl:  36px;
    --radius-full: 9999px;

    /* ── Easing ── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Transitions ── */
    --transition-fast:   120ms var(--ease-smooth);
    --transition-base:   260ms var(--ease-smooth);
    --transition-slow:   420ms var(--ease-out);
    --transition-spring: 400ms var(--ease-spring);
    --transition-long:   700ms var(--ease-out);

    /* ── Shadows ── */
    --shadow-xs:      0 1px 2px rgba(0,0,0,0.6);
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.55);
    --shadow-md:      0 4px 20px rgba(0,0,0,0.50);
    --shadow-lg:      0 8px 40px rgba(0,0,0,0.55);
    --shadow-xl:      0 16px 64px rgba(0,0,0,0.60);

    --shadow-glow-xs: 0 0 12px rgba(56,189,248,0.20);
    --shadow-glow-sm: 0 0 24px rgba(56,189,248,0.18);
    --shadow-glow:    0 0 48px rgba(56,189,248,0.20);
    --shadow-glow-lg: 0 0 80px rgba(56,189,248,0.24);
    --shadow-glow-xl: 0 0 120px rgba(56,189,248,0.20);
    --shadow-indigo:  0 0 40px rgba(129,140,248,0.18);
}

/* ════════════════════════════════════════════════════════════
   RESET
════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior:          smooth;
    scroll-padding-top:       80px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust:         100%;
    font-size:                16px;
}

body {
    font-family:             var(--font-body);
    font-size:               var(--text-base);
    font-weight:             400;
    line-height:             1.72;
    color:                   var(--color-text);
    background-color:        var(--color-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x:              hidden;
    text-rendering:          optimizeLegibility;
}

body.no-scroll { overflow: hidden; }
ul, ol { list-style: none; }
img, video, svg { max-width: 100%; height: auto; display: block; }

a {
    color:           var(--color-accent);
    text-decoration: none;
    transition:      color var(--transition-base);
}
a:hover { color: var(--color-white); }
a:focus-visible {
    outline:        2px solid var(--color-accent);
    outline-offset: 4px;
    border-radius:  var(--radius-sm);
}

button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4, h5, h6 {
    font-family:    var(--font-heading);
    font-weight:    700;
    line-height:    1.12;
    letter-spacing: -0.025em;
    color:          var(--color-white);
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-4xl);  }
h3 { font-size: var(--text-2xl);  }
h4 { font-size: var(--text-xl);   }
h5 { font-size: var(--text-lg);   }
h6 { font-size: var(--text-base); }

p {
    color:         var(--color-text-muted);
    margin-bottom: var(--space-4);
    max-width:     68ch;
    line-height:   1.75;
}
p:last-child { margin-bottom: 0; }
strong { color: var(--color-white); font-weight: 600; }

code, kbd {
    font-family:   var(--font-code);
    font-size:     0.875em;
    background:    rgba(56,189,248,0.09);
    color:         var(--color-accent);
    padding:       0.15em 0.5em;
    border-radius: var(--radius-sm);
    border:        1px solid var(--color-border);
}

/* ════════════════════════════════════════════════════════════
   VIDEO BACKGROUND
════════════════════════════════════════════════════════════ */
#particles-canvas { display: none; }

.video-bg-wrapper {
    position:   fixed;
    inset:      0;
    z-index:    -3;
    overflow:   hidden;
}
.video-bg-wrapper video {
    position:   absolute;
    top:        50%;
    left:       50%;
    min-width:  100%;
    min-height: 100%;
    width:      auto;
    height:     auto;
    transform:  translate(-50%, -50%);
    object-fit: cover;
    opacity:    0;
    transition: opacity 1.4s ease;
}
.video-bg-wrapper video.loaded { opacity: 1; }

.video-bg-overlay {
    position:   fixed;
    inset:      0;
    z-index:    -2;
    background:
        radial-gradient(ellipse 80% 60% at 75% 15%,   rgba(56,189,248,0.055)  0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 20% 80%,   rgba(129,140,248,0.045) 0%, transparent 55%),
        radial-gradient(ellipse 100% 100% at 50% 50%, rgba(3,7,18,0.72)       0%, transparent 100%),
        linear-gradient(180deg,
            rgba(3, 7, 18, 0.76) 0%,
            rgba(3, 7, 18, 0.62) 45%,
            rgba(3, 7, 18, 0.80) 100%
        );
}

/* Cinematic grain overlay */
body::after {
    content:           '';
    position:          fixed;
    inset:             0;
    z-index:           -1;
    pointer-events:    none;
    background-image:  url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size:   200px 200px;
    opacity:           0.022;
    mix-blend-mode:    overlay;
}

/* ════════════════════════════════════════════════════════════
   UTILITY
════════════════════════════════════════════════════════════ */
.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--container-pad);
}

.section { padding: var(--space-24) 0; position: relative; z-index: 1; }
.section--alt { background: rgba(6, 13, 31, 0.65); backdrop-filter: blur(2px); }

.section-header         { margin-bottom: var(--space-16); }
.section-header--center { text-align: center; }
.section-header--center p { margin: var(--space-4) auto 0; }

.section-label {
    display:        inline-flex;
    align-items:    center;
    gap:            var(--space-3);
    font-family:    var(--font-code);
    font-size:      var(--text-xs);
    font-weight:    600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--color-accent);
    margin-bottom:  var(--space-4);
}
.section-label::before {
    content:    '';
    display:    inline-block;
    width:      22px;
    height:     1px;
    background: linear-gradient(90deg, var(--color-accent), rgba(56,189,248,0.3));
    box-shadow: 0 0 8px var(--color-accent);
    flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   PRELOADER
════════════════════════════════════════════════════════════ */
#preloader {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    background:      var(--color-bg);
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-6);
    transition:      opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
#preloader.preloader-done { opacity: 0; transform: translateY(-16px); pointer-events: none; }

.preloader-logo {
    font-family:    var(--font-heading);
    font-size:      var(--text-3xl);
    font-weight:    800;
    color:          var(--color-white);
    letter-spacing: -0.03em;
}
.preloader-logo span { color: var(--color-accent); text-shadow: 0 0 28px rgba(56,189,248,0.8); }

.preloader-bar-track {
    width:         220px;
    height:        2px;
    background:    rgba(56,189,248,0.10);
    border-radius: var(--radius-full);
    overflow:      hidden;
}
.preloader-fill {
    height:        100%;
    width:         0;
    background:    linear-gradient(90deg, var(--color-accent), var(--color-indigo));
    border-radius: var(--radius-full);
    transition:    width 0.1s ease;
    box-shadow:    0 0 14px rgba(56,189,248,0.8);
}
.preloader-pct { font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-accent); letter-spacing: 0.12em; }

/* ════════════════════════════════════════════════════════════
   SCROLL PROGRESS
════════════════════════════════════════════════════════════ */
#scroll-progress {
    position:   fixed;
    top:        0;
    left:       0;
    height:     2px;
    width:      0;
    z-index:    9998;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-indigo) 50%, var(--color-emerald) 100%);
    box-shadow: 0 0 12px rgba(56,189,248,0.7);
    transition: width 0.08s linear;
}

/* ════════════════════════════════════════════════════════════
   CUSTOM CURSOR
════════════════════════════════════════════════════════════ */
.cursor-dot {
    position:       fixed;
    top:            -4px;
    left:           -4px;
    width:          8px;
    height:         8px;
    background:     var(--color-accent);
    border-radius:  50%;
    pointer-events: none;
    z-index:        9997;
    box-shadow:     0 0 12px rgba(56,189,248,0.9);
    transition:     opacity var(--transition-fast), transform var(--transition-fast);
    will-change:    transform;
}
.cursor-dot--hidden { opacity: 0; transform: scale(0); }

.cursor-ring {
    position:       fixed;
    top:            -20px;
    left:           -20px;
    width:          40px;
    height:         40px;
    border:         1.5px solid rgba(56,189,248,0.55);
    border-radius:  50%;
    pointer-events: none;
    z-index:        9996;
    transition:     width 0.28s var(--ease-out), height 0.28s var(--ease-out), border-color 0.28s var(--ease-smooth), background 0.28s var(--ease-smooth);
    will-change:    transform;
}
.cursor-ring--expanded { width: 64px; height: 64px; top: -32px; left: -32px; border-color: rgba(56,189,248,0.30); background: rgba(56,189,248,0.05); }
.cursor-ring--click    { transform: scale(0.80); border-color: rgba(56,189,248,0.80); }

/* ════════════════════════════════════════════════════════════
   SKIP LINK
════════════════════════════════════════════════════════════ */
.skip-link { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus {
    position: fixed; top: var(--space-4); left: var(--space-4);
    width: auto; height: auto; overflow: visible; z-index: 99999;
    background: var(--color-accent); color: var(--color-bg);
    padding: var(--space-2) var(--space-5); border-radius: var(--radius-full);
    font-weight: 600; font-size: var(--text-sm);
}

/* ════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR
════════════════════════════════════════════════════════════ */
.announce-bar {
    position:        relative;
    z-index:         200;
    background:      linear-gradient(90deg, rgba(56,189,248,0.08) 0%, rgba(129,140,248,0.08) 50%, rgba(56,189,248,0.08) 100%);
    border-bottom:   1px solid rgba(56,189,248,0.15);
    padding:         9px var(--container-pad);
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-4);
    backdrop-filter: blur(12px);
    overflow:        hidden;
    max-height:      60px;
    transition:      max-height 0.4s var(--ease-out), opacity 0.4s ease, padding 0.4s ease;
}
.announce-bar::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(90deg, transparent 0%, rgba(56,189,248,0.04) 50%, transparent 100%);
    animation:  shimmer-bar 4s ease-in-out infinite;
}
@keyframes shimmer-bar { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.announce-bar.hidden { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border: none; pointer-events: none; }
.announce-inner  { display: flex; align-items: center; gap: var(--space-3); flex: 1; justify-content: center; position: relative; z-index: 1; }
.announce-dot    { width: 6px; height: 6px; background: var(--color-green); border-radius: 50%; box-shadow: 0 0 8px var(--color-green); flex-shrink: 0; animation: pulse-dot 1.5s ease-in-out infinite; }
.announce-text   { font-family: var(--font-code); font-size: 11px; color: var(--color-text-muted); letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.announce-link   { color: var(--color-accent); font-weight: 600; transition: color var(--transition-base); }
.announce-link:hover { color: var(--color-white); }
.announce-close  { background: transparent; border: none; color: var(--color-text-faint); font-size: 11px; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); transition: color var(--transition-base), background var(--transition-base); position: relative; z-index: 1; flex-shrink: 0; }
.announce-close:hover { color: var(--color-text); background: rgba(255,255,255,0.06); }

/* ════════════════════════════════════════════════════════════
   SITE HEADER
════════════════════════════════════════════════════════════ */
.site-header {
    position:      fixed;
    left:          0;
    width:         100%;
    z-index:       100;
    padding:       var(--space-5) 0;
    background:    transparent;
    border-bottom: 1px solid transparent;
    transition:
        background      0.5s var(--ease-smooth),
        border-color    0.5s var(--ease-smooth),
        backdrop-filter 0.5s var(--ease-smooth),
        padding         0.4s var(--ease-smooth),
        box-shadow      0.5s var(--ease-smooth);
}
.site-header.scrolled {
    background:      rgba(3, 7, 18, 0.82);
    backdrop-filter: blur(32px) saturate(200%);
    border-color:    var(--color-border);
    padding:         var(--space-3) 0;
    box-shadow:      0 1px 0 var(--color-border), 0 4px 40px rgba(0,0,0,0.50);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }

.site-logo {
    font-family:    var(--font-heading);
    font-size:      var(--text-xl);
    font-weight:    800;
    color:          var(--color-white);
    letter-spacing: -0.04em;
    transition:     color var(--transition-base);
    position:       relative;
    padding-bottom: 2px;
}
.site-logo::after {
    content: ''; position: absolute; bottom: -2px; left: 0;
    width: 0; height: 1px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    box-shadow: 0 0 6px var(--color-accent);
    transition: width var(--transition-slow);
}
.site-logo:hover      { color: var(--color-accent); }
.site-logo:hover::after { width: 100%; }
.site-logo span { color: var(--color-accent); text-shadow: 0 0 24px rgba(56,189,248,0.75), 0 0 50px rgba(56,189,248,0.30); }

.main-navigation ul { display: flex; align-items: center; gap: var(--space-8); }
.main-navigation a {
    font-family:    var(--font-body);
    font-size:      var(--text-sm);
    font-weight:    500;
    color:          var(--color-text-muted);
    position:       relative;
    padding:        3px 0;
    transition:     color var(--transition-base);
    letter-spacing: 0.01em;
}
.main-navigation a::before {
    content: ''; position: absolute; bottom: -1px; left: 0;
    width: 0; height: 1px;
    background: linear-gradient(90deg, var(--color-accent), rgba(56,189,248,0.4));
    box-shadow: 0 0 8px rgba(56,189,248,0.6);
    transition: width var(--transition-base);
}
.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation a.active-section { color: var(--color-white); }
.main-navigation a:hover::before,
.main-navigation .current-menu-item > a::before,
.main-navigation a.active-section::before { width: 100%; }

.nav-right-group { display: flex; align-items: center; gap: var(--space-3); }

.nav-avail-chip {
    display:         flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--font-code);
    font-size:       10px;
    font-weight:     600;
    color:           var(--color-green);
    letter-spacing:  0.08em;
    padding:         5px 12px;
    border-radius:   var(--radius-full);
    background:      rgba(40,200,64,0.08);
    border:          1px solid rgba(40,200,64,0.22);
    backdrop-filter: blur(8px);
    white-space:     nowrap;
    transition:      border-color var(--transition-base), box-shadow var(--transition-base);
}
.nav-avail-chip:hover { border-color: rgba(40,200,64,0.45); box-shadow: 0 0 16px rgba(40,200,64,0.18); }
.nav-avail-dot { width: 6px; height: 6px; background: var(--color-green); border-radius: 50%; box-shadow: 0 0 8px var(--color-green); animation: pulse-dot 1.5s ease-in-out infinite; }

.nav-cta {
    font-size:       var(--text-xs) !important;
    font-weight:     600 !important;
    color:           var(--color-accent) !important;
    border:          1px solid var(--color-border-hover) !important;
    padding:         7px 18px !important;
    border-radius:   var(--radius-full) !important;
    background:      rgba(56, 189, 248, 0.07) !important;
    backdrop-filter: blur(12px);
    letter-spacing:  0.04em !important;
    transition:      background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base), border-color var(--transition-base) !important;
}
.nav-cta:hover {
    background:   rgba(56, 189, 248, 0.18) !important;
    box-shadow:   var(--shadow-glow-sm) !important;
    color:        var(--color-white) !important;
    border-color: var(--color-accent) !important;
}

.header-progress-bar {
    position:   absolute;
    bottom:     -1px;
    left:       0;
    height:     2px;
    width:      0;
    background: linear-gradient(90deg, var(--color-accent), var(--color-indigo));
    box-shadow: 0 0 10px rgba(56,189,248,0.6);
    transition: width 0.08s linear;
}

.menu-toggle { display: none; flex-direction: column; gap: 5px; padding: var(--space-2); z-index: 200; }
.menu-toggle span { display: block; width: 24px; height: 2px; background-color: var(--color-text); border-radius: var(--radius-full); transition: transform var(--transition-base), opacity var(--transition-base), background-color var(--transition-base); }
.menu-toggle:hover span        { background-color: var(--color-accent); }
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════════ */
.hero {
    position:    relative;
    min-height:  100vh;
    display:     flex;
    align-items: center;
    padding:     var(--space-32) 0 var(--space-24);
    overflow:    hidden;
    z-index:     1;
}

.hero-bg-glow {
    position:       absolute;
    top:            -15%;
    right:          -8%;
    width:          720px;
    height:         720px;
    background:     radial-gradient(circle, rgba(56,189,248,0.09) 0%, rgba(56,189,248,0.03) 40%, transparent 70%);
    border-radius:  50%;
    pointer-events: none;
    animation:      glow-breathe 10s ease-in-out infinite alternate;
    mix-blend-mode: screen;
}
.hero-bg-glow-2 {
    position:       absolute;
    bottom:         -20%;
    left:           -12%;
    width:          580px;
    height:         580px;
    background:     radial-gradient(circle, rgba(129,140,248,0.07) 0%, rgba(129,140,248,0.02) 45%, transparent 70%);
    border-radius:  50%;
    pointer-events: none;
    animation:      glow-breathe 14s ease-in-out infinite alternate-reverse;
    mix-blend-mode: screen;
}

.hero .container {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   var(--space-16);
    align-items:           center;
    position:              relative;
    z-index:               1;
}

.hero-content { animation: reveal-up 0.9s var(--ease-out) both; }

.hero-greeting {
    font-family:    var(--font-code);
    font-size:      var(--text-sm);
    color:          var(--color-accent);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom:  var(--space-4);
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
    opacity:        0;
    animation:      reveal-up 0.7s var(--ease-out) 0.1s both;
}
.hero-greeting::before {
    content: ''; display: inline-block; width: 28px; height: 1px;
    background: linear-gradient(90deg, var(--color-accent), rgba(56,189,248,0.3));
    box-shadow: 0 0 8px var(--color-accent); flex-shrink: 0;
}

.hero-name {
    font-size:               var(--text-hero);
    line-height:             1.02;
    margin-bottom:           var(--space-4);
    background:              linear-gradient(140deg, var(--color-white) 0%, rgba(226,232,240,0.90) 40%, rgba(148,163,184,0.75) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
    filter:                  drop-shadow(0 0 40px rgba(56,189,248,0.22));
    opacity:                 0;
    animation:               reveal-up 0.8s var(--ease-out) 0.2s both;
}

.hero-role {
    font-family:   var(--font-code);
    font-size:     var(--text-xl);
    color:         var(--color-text-muted);
    margin-bottom: var(--space-6);
    min-height:    2rem;
    opacity:       0;
    animation:     reveal-up 0.7s var(--ease-out) 0.3s both;
}
.hero-role .typed-text {
    color:         var(--color-accent);
    text-shadow:   0 0 24px rgba(56,189,248,0.55);
    border-right:  2px solid var(--color-accent);
    padding-right: 4px;
    animation:     blink-cursor 0.75s step-end infinite;
}

.hero-bio {
    font-size:     var(--text-lg);
    color:         var(--color-text-muted);
    line-height:   1.82;
    margin-bottom: var(--space-8);
    max-width:     52ch;
    opacity:       0;
    animation:     reveal-up 0.7s var(--ease-out) 0.4s both;
}

.hero-actions {
    display:     flex;
    gap:         var(--space-4);
    flex-wrap:   wrap;
    align-items: center;
    opacity:     0;
    animation:   reveal-up 0.7s var(--ease-out) 0.5s both;
}

/* Avatar */
.hero-image-wrapper {
    position:        relative;
    display:         flex;
    justify-content: center;
    opacity:         0;
    animation:       reveal-fade 1s var(--ease-out) 0.35s both;
}
.hero-image-wrapper::before {
    content: ''; position: absolute; inset: -18px; border-radius: 50%;
    border: 1px solid rgba(56,189,248,0.18);
    animation: spin-cw 28s linear infinite;
}
.hero-image-wrapper::after {
    content: ''; position: absolute; inset: -36px; border-radius: 50%;
    border: 1px dashed rgba(56,189,248,0.08);
    animation: spin-ccw 44s linear infinite;
}
.hero-image-ring {
    position: absolute; inset: -56px; border-radius: 50%;
    border: 1px solid rgba(129,140,248,0.06);
    animation: spin-cw 65s linear infinite;
    pointer-events: none;
}

.hero-photo {
    width:         300px;
    height:        300px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid rgba(56,189,248,0.42);
    box-shadow:    0 0 0 10px rgba(56,189,248,0.055), 0 0 70px rgba(56,189,248,0.22), 0 0 130px rgba(56,189,248,0.09), var(--shadow-xl);
    position:      relative;
    z-index:       1;
    transition:    box-shadow var(--transition-slow), transform var(--transition-slow);
}
.hero-image-wrapper:hover .hero-photo {
    box-shadow: 0 0 0 12px rgba(56,189,248,0.10), 0 0 90px rgba(56,189,248,0.32), 0 0 160px rgba(56,189,248,0.14), var(--shadow-xl);
    transform: scale(1.025);
}

.hero-badge {
    position:        absolute;
    bottom:          18px;
    right:           -12px;
    background:      rgba(3,7,18,0.88);
    border:          1px solid var(--color-border-hover);
    border-radius:   var(--radius-full);
    padding:         var(--space-2) var(--space-5);
    font-family:     var(--font-code);
    font-size:       var(--text-xs);
    color:           var(--color-accent);
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    z-index:         2;
    backdrop-filter: blur(20px);
    box-shadow:      var(--shadow-glow-sm), var(--shadow-md);
    animation:       float 4.5s ease-in-out infinite;
}

.hero-scroll-hint {
    position:       absolute;
    bottom:         var(--space-8);
    left:           50%;
    transform:      translateX(-50%);
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-2);
    font-family:    var(--font-code);
    font-size:      var(--text-xs);
    color:          var(--color-text-faint);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    z-index:        1;
    opacity:        0;
    animation:      reveal-fade 1.2s var(--ease-out) 1.8s both;
}
.scroll-mouse {
    width:           20px; height: 34px;
    border:          1.5px solid rgba(56,189,248,0.28);
    border-radius:   var(--radius-full);
    display:         flex;
    justify-content: center;
    padding-top:     6px;
}
.scroll-mouse::before {
    content:       '';
    width:         3px; height: 7px;
    background:    var(--color-accent);
    border-radius: var(--radius-full);
    animation:     scroll-wheel 2s ease-in-out infinite;
    box-shadow:    0 0 8px var(--color-accent);
}

/* ════════════════════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════════════════════ */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    font-family:     var(--font-body);
    font-size:       var(--text-sm);
    font-weight:     600;
    letter-spacing:  0.025em;
    padding:         0.72rem var(--space-6);
    border-radius:   var(--radius-full);
    border:          1px solid transparent;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
    white-space:     nowrap;
    text-decoration: none;
    transition:      background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-spring), box-shadow var(--transition-base);
    will-change:     transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn::before {
    content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    transform: skewX(-20deg);
    transition: left 0.5s var(--ease-out);
}
.btn:hover::before { left: 160%; }

.btn--primary {
    background:  var(--color-accent);
    color:       var(--color-bg);
    border-color:var(--color-accent);
    box-shadow:  0 4px 24px rgba(56,189,248,0.32), inset 0 1px 0 rgba(255,255,255,0.25);
    font-weight: 700;
}
.btn--primary:hover {
    background: var(--color-accent-dim);
    box-shadow: 0 8px 36px rgba(56,189,248,0.48), 0 0 60px rgba(56,189,248,0.15), inset 0 1px 0 rgba(255,255,255,0.25);
    color: var(--color-bg);
}

.btn--outline {
    background:      transparent;
    color:           var(--color-text);
    border-color:    rgba(255,255,255,0.14);
    backdrop-filter: blur(12px);
}
.btn--outline:hover { color: var(--color-white); border-color: var(--color-accent); background: rgba(56,189,248,0.10); box-shadow: var(--shadow-glow-sm); }

.btn--ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; }
.btn--ghost:hover { color: var(--color-white); background: rgba(255,255,255,0.06); border-color: var(--color-border-white); }

.spinner {
    display:       inline-block;
    width:         13px; height: 13px;
    border:        2px solid rgba(3,7,18,0.28);
    border-top:    2px solid var(--color-bg);
    border-radius: 50%;
    animation:     spin-cw 0.65s linear infinite;
    vertical-align: middle;
    margin-right:  5px;
}

/* ════════════════════════════════════════════════════════════
   GLASS CARD
════════════════════════════════════════════════════════════ */
.glass-card {
    background:      var(--color-surface);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-lg);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    transition:      border-color var(--transition-base), background var(--transition-base), transform var(--transition-spring), box-shadow var(--transition-base);
}
.glass-card:hover { border-color: var(--color-border-hover); background: var(--color-surface-hover); box-shadow: var(--shadow-glow), var(--shadow-md); }

/* ════════════════════════════════════════════════════════════
   SECTION ENTRANCE
════════════════════════════════════════════════════════════ */
.section-hidden { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.section-visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   ABOUT
════════════════════════════════════════════════════════════ */
.about .container { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.about-text p { margin-bottom: var(--space-5); }
.about-facts { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

.fact-chip {
    display:         flex;
    align-items:     center;
    gap:             var(--space-2);
    background:      rgba(56,189,248,0.05);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-full);
    padding:         var(--space-2) var(--space-4);
    font-family:     var(--font-code);
    font-size:       var(--text-xs);
    color:           var(--color-text-muted);
    backdrop-filter: blur(10px);
    transition:      border-color var(--transition-base), color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-spring);
    cursor: default;
}
.fact-chip:hover { border-color: var(--color-accent); color: var(--color-white); background: rgba(56,189,248,0.10); box-shadow: var(--shadow-glow-xs); transform: translateY(-2px); }

/* ════════════════════════════════════════════════════════════
   TERMINAL CARD
════════════════════════════════════════════════════════════ */
.terminal-card {
    background:      rgba(3, 7, 18, 0.78);
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-lg);
    overflow:        hidden;
    backdrop-filter: blur(28px);
    transition:      border-color var(--transition-base), box-shadow var(--transition-base);
}
.terminal-card:hover { border-color: var(--color-border-hover); box-shadow: var(--shadow-glow), var(--shadow-lg); }

.terminal-titlebar {
    display:       flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-3) var(--space-5);
    background:    rgba(255,255,255,0.025);
    border-bottom: 1px solid var(--color-border);
}
.terminal-dot         { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.terminal-dot--red    { background: #ff5f57; box-shadow: 0 0 8px rgba(255,95,87,0.6); }
.terminal-dot--yellow { background: #febc2e; box-shadow: 0 0 8px rgba(254,188,46,0.5); }
.terminal-dot--green  { background: #28c840; box-shadow: 0 0 8px rgba(40,200,64,0.5); }
.terminal-title { font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-text-faint); margin-left: var(--space-2); letter-spacing: 0.06em; }

.terminal-body { padding: var(--space-6); font-family: var(--font-code); font-size: var(--text-sm); line-height: 2.3; }
.terminal-line   { display: flex; gap: var(--space-2); align-items: baseline; }
.terminal-prompt { color: var(--color-accent); user-select: none; flex-shrink: 0; text-shadow: 0 0 14px rgba(56,189,248,0.65); }
.terminal-cmd    { color: var(--color-white); }
.terminal-output { color: var(--color-text-muted); padding-left: var(--space-6); }
.terminal-output.highlight { color: var(--color-accent); text-shadow: 0 0 14px rgba(56,189,248,0.40); }

/* ════════════════════════════════════════════════════════════
   SKILLS
════════════════════════════════════════════════════════════ */
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5); }

.skill-card { padding: var(--space-6); position: relative; overflow: hidden; }
.skill-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
    opacity: 0; transition: opacity var(--transition-base);
}
.skill-card::after {
    content: ''; position: absolute; top: -50px; right: -50px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(56,189,248,0.09), transparent 70%);
    opacity: 0; transition: opacity var(--transition-slow); pointer-events: none;
}
.skill-card:hover::before { opacity: 1; }
.skill-card:hover::after  { opacity: 1; }
.skill-card:hover          { transform: translateY(-6px); }

.skill-card-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.skill-icon { font-size: 1.65rem; line-height: 1; }
.skill-category { font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }

.skill-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.skill-tag {
    background:    rgba(56, 189, 248, 0.07);
    border:        1px solid rgba(56, 189, 248, 0.16);
    border-radius: var(--radius-xs);
    padding:       3px var(--space-3);
    font-family:   var(--font-code);
    font-size:     var(--text-xs);
    color:         var(--color-accent);
    letter-spacing: 0.02em;
    transition:    background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.skill-tag:hover { background: rgba(56,189,248,0.16); border-color: var(--color-accent); box-shadow: 0 0 14px rgba(56,189,248,0.22); transform: translateY(-1px); }

.skill-bar-track { height: 5px; background: rgba(56,189,248,0.08); border-radius: var(--radius-full); overflow: hidden; margin-top: var(--space-2); }
.skill-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--color-accent), var(--color-indigo)); border-radius: var(--radius-full); transition: width 1.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: 0 0 12px rgba(56,189,248,0.45); }

/* ════════════════════════════════════════════════════════════
   PROJECTS
════════════════════════════════════════════════════════════ */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-6); }

.project-card { display: flex; flex-direction: column; overflow: hidden; position: relative; }
.project-card:hover { transform: translateY(-9px); }

.project-image { position: relative; overflow: hidden; height: 220px; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); }
.project-card:hover .project-image img { transform: scale(1.07); }

.project-placeholder-img {
    width:           100%; height: 220px;
    display:         flex; align-items: center; justify-content: center;
    font-size:       3.5rem;
    background:      linear-gradient(135deg, rgba(56,189,248,0.07), rgba(3,7,18,0.85));
    position:        relative; overflow: hidden;
}

.project-image-overlay {
    position:        absolute; inset: 0;
    background:      rgba(3, 7, 18, 0.84);
    display:         flex; align-items: center; justify-content: center;
    gap:             var(--space-4);
    opacity:         0; transition: opacity var(--transition-base);
    backdrop-filter: blur(8px); z-index: 2;
}
.project-card:hover .project-image-overlay { opacity: 1; }

.project-overlay-link {
    display:         flex; align-items: center; gap: var(--space-2);
    background:      rgba(56,189,248,0.10);
    border:          1px solid rgba(56,189,248,0.38);
    border-radius:   var(--radius-full);
    padding:         var(--space-2) var(--space-5);
    font-family:     var(--font-code); font-size: var(--text-xs); font-weight: 600;
    color:           var(--color-accent); text-decoration: none; letter-spacing: 0.05em;
    transition:      background var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}
.project-overlay-link:hover { background: var(--color-accent); color: var(--color-bg); box-shadow: var(--shadow-glow-sm); }

.project-body { padding: var(--space-6); flex: 1; display: flex; flex-direction: column; position: relative; z-index: 1; }
.project-tags   { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.project-title  { font-size: var(--text-xl); margin-bottom: var(--space-3); line-height: 1.3; }
.project-title a { color: var(--color-white); transition: color var(--transition-base); }
.project-title a:hover { color: var(--color-accent); }
.project-description { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.75; flex: 1; max-width: 100%; }

/* ════════════════════════════════════════════════════════════
   CONTACT
════════════════════════════════════════════════════════════ */
.contact { text-align: center; position: relative; z-index: 1; }
.contact-intro { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 52ch; margin: var(--space-4) auto var(--space-8); line-height: 1.8; }

.contact-email-link {
    display:        inline-flex; align-items: center; gap: var(--space-3);
    font-family:    var(--font-code); font-size: var(--text-2xl); color: var(--color-white);
    position:       relative; padding-bottom: var(--space-1);
    transition:     color var(--transition-base), text-shadow var(--transition-base);
}
.contact-email-link::after {
    content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1.5px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
    box-shadow: 0 0 10px var(--color-accent); transition: width var(--transition-slow);
}
.contact-email-link:hover { color: var(--color-accent); text-shadow: 0 0 36px rgba(56,189,248,0.55); }
.contact-email-link:hover::after { width: 100%; }

.social-links { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-10); flex-wrap: wrap; }
.social-link {
    display:         flex; align-items: center; justify-content: center;
    width:           48px; height: 48px;
    border:          1px solid var(--color-border);
    border-radius:   var(--radius-md);
    color:           var(--color-text-muted); font-size: 1.1rem;
    background:      var(--color-surface); backdrop-filter: blur(12px);
    text-decoration: none;
    transition:      border-color var(--transition-base), color var(--transition-base), transform var(--transition-spring), background var(--transition-base), box-shadow var(--transition-base);
}
.social-link:hover { border-color: var(--color-accent); color: var(--color-accent); transform: translateY(-5px); background: rgba(56,189,248,0.10); box-shadow: var(--shadow-glow-sm); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-12); align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-card {
    display:         flex; align-items: center; gap: var(--space-4);
    background:      var(--color-surface); border: 1px solid var(--color-border);
    border-radius:   var(--radius-lg); padding: var(--space-4) var(--space-6);
    backdrop-filter: blur(16px);
    transition:      border-color var(--transition-base), transform var(--transition-spring), box-shadow var(--transition-base);
}
.contact-card:hover { border-color: var(--color-border-hover); transform: translateX(7px); box-shadow: var(--shadow-glow-sm); }
.contact-card-icon {
    width: 44px; height: 44px;
    background: rgba(56,189,248,0.08); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent); font-size: 1.1rem; flex-shrink: 0;
    box-shadow: 0 0 18px rgba(56,189,248,0.12);
}
.contact-card-body h4 { font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--space-1); font-weight: 600; }
.contact-card-body a,
.contact-card-body p  { font-size: var(--text-sm); color: var(--color-text); margin-bottom: 0; transition: color var(--transition-base); max-width: 100%; }
.contact-card-body a:hover { color: var(--color-accent); }

.contact-form-wrapper { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); backdrop-filter: blur(24px); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-group   { display: flex; flex-direction: column; gap: var(--space-2); }
.form-group label { font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.form-group input,
.form-group textarea {
    background:    rgba(3,7,18,0.68); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding:       var(--space-3) var(--space-4);
    color:         var(--color-text); width: 100%; outline: none;
    transition:    border-color var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
    backdrop-filter: blur(10px);
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--color-accent); background: rgba(3,7,18,0.88); box-shadow: 0 0 0 3px rgba(56,189,248,0.13), var(--shadow-glow-xs); }
.form-group input.valid   { border-color: rgba(40,200,64,0.50); }
.form-group input.invalid { border-color: rgba(255,95,87,0.50); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-text-faint); }
.form-group textarea { resize: vertical; min-height: 140px; }

.form-feedback { font-family: var(--font-code); font-size: var(--text-sm); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); display: none; letter-spacing: 0.02em; }
.form-feedback.success { display: block; background: rgba(56,189,248,0.08); border: 1px solid rgba(56,189,248,0.35); color: var(--color-accent); }
.form-feedback.error   { display: block; background: rgba(255,95,87,0.08); border: 1px solid rgba(255,95,87,0.35); color: var(--color-red); }

#char-counter { font-family: var(--font-code); font-size: 11px; color: var(--color-text-muted); text-align: right; margin-top: 4px; transition: color var(--transition-base); }

/* ════════════════════════════════════════════════════════════
   PAGE HERO
════════════════════════════════════════════════════════════ */
.page-hero { padding: var(--space-32) 0 var(--space-16); margin-top: 0; position: relative; z-index: 1; }
.page-hero h1 { font-size: var(--text-5xl); margin-bottom: var(--space-4); }
.page-hero p  { font-size: var(--text-lg); max-width: 60ch; }

/* ════════════════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════════════════ */
.site-footer { background: rgba(3, 7, 18, 0.95); border-top: 1px solid var(--color-border); position: relative; z-index: 1; backdrop-filter: blur(24px); }
.site-footer > .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.footer-copy { font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.05em; }
.footer-copy a       { color: var(--color-text-muted); transition: color var(--transition-base); }
.footer-copy a:hover { color: var(--color-accent); }
.back-to-top { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-text-faint); letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: color var(--transition-base); }
.back-to-top:hover     { color: var(--color-accent); }
.back-to-top svg       { transition: transform var(--transition-spring); }
.back-to-top:hover svg { transform: translateY(-3px); filter: drop-shadow(0 0 6px var(--color-accent)); }

/* ════════════════════════════════════════════════════════════
   PAGINATION
════════════════════════════════════════════════════════════ */
.nav-links { display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-12); }
.page-numbers { font-family: var(--font-code); font-size: var(--text-xs); font-weight: 600; padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-muted); text-decoration: none; transition: all var(--transition-base); letter-spacing: 0.06em; }
.page-numbers:hover    { border-color: var(--color-accent); color: var(--color-accent); background: rgba(56,189,248,0.08); }
.page-numbers.current  { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-bg); box-shadow: 0 0 20px rgba(56,189,248,0.38); }
.page-numbers.dots     { border-color: transparent; cursor: default; }

/* ════════════════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════════════════ */
@keyframes reveal-up   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink-cursor { 0%, 100% { border-color: var(--color-accent); } 50% { border-color: transparent; } }
@keyframes float       { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
@keyframes spin-cw     { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes spin-ccw    { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
@keyframes glow-breathe { 0% { opacity: 0.5; transform: scale(1); } 100% { opacity: 1; transform: scale(1.12); } }
@keyframes scroll-wheel { 0%, 100% { transform: translateY(0);  opacity: 1;   } 50% { transform: translateY(9px); opacity: 0.3; } }
@keyframes pulse-dot    { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.45); } }
@keyframes shake        { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
@keyframes ripple-expand { to { transform: scale(1); opacity: 0; } }
@keyframes glitch-clip   { 0% { clip-path: inset(0 0 96% 0); transform: translateX(-3px); } 25% { clip-path: inset(48% 0 28% 0); transform: translateX(3px); } 50% { clip-path: inset(18% 0 62% 0); transform: translateX(-2px); } 75% { clip-path: inset(72% 0 8% 0); transform: translateX(2px); } 100% { clip-path: inset(0 0 0 0); transform: translateX(0); } }
@keyframes success-bounce { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes toast-in  { from { opacity: 0; transform: translateX(-50%) translateY(16px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(-50%) translateY(16px); } }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ring-pulse { 0%, 100% { opacity: 0.4; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.04); } }
@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.4); } }
@keyframes timeline-glow { 0%, 100% { box-shadow: 0 0 28px rgba(56,189,248,0.28); } 50% { box-shadow: 0 0 48px rgba(56,189,248,0.52); } }

.glitch { animation: glitch-clip 0.3s steps(2) forwards; }

/* ════════════════════════════════════════════════════════════
   AOS
════════════════════════════════════════════════════════════ */
[data-aos]             { transition-duration: 720ms !important; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important; }
[data-aos="fade-up"]   { transform: translateY(36px); }
[data-aos].aos-animate { transform: translateY(0); opacity: 1; }

/* ════════════════════════════════════════════════════════════
   LIVE CLOCK
════════════════════════════════════════════════════════════ */
#live-clock, #footer-clock { font-family: var(--font-code); font-size: 11px; color: var(--color-accent); letter-spacing: 0.06em; }

/* ════════════════════════════════════════════════════════════
   TOAST
════════════════════════════════════════════════════════════ */
.sr-toast {
    position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%);
    background: rgba(56,189,248,0.12); border: 1px solid rgba(56,189,248,0.38);
    backdrop-filter: blur(24px); border-radius: var(--radius-full);
    padding: 12px 28px; font-family: var(--font-code); font-size: 13px;
    color: var(--color-accent); z-index: 9999;
    box-shadow: 0 0 40px rgba(56,189,248,0.24);
    white-space: nowrap; animation: toast-in 0.4s var(--ease-spring) both; pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hero .container    { grid-template-columns: 1fr; text-align: center; }
    .hero-bio           { margin-left: auto; margin-right: auto; }
    .hero-greeting      { justify-content: center; }
    .hero-actions       { justify-content: center; }
    .hero-image-wrapper { order: -1; }
    .about .container   { grid-template-columns: 1fr; }
    .about-facts        { justify-content: center; }
    .contact-grid       { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }

    .main-navigation ul {
        position: fixed; top: 0; right: 0; bottom: 0; left: 0;
        background: rgba(3, 7, 18, 0.97);
        flex-direction: column; justify-content: center; align-items: center;
        gap: var(--space-8); opacity: 0; pointer-events: none;
        transform: translateY(-18px);
        transition: opacity var(--transition-base), transform var(--transition-base);
        backdrop-filter: blur(40px); z-index: 150;
    }
    .main-navigation ul.nav-open { opacity: 1; pointer-events: all; transform: translateY(0); }
    .main-navigation a { font-size: var(--text-2xl); letter-spacing: -0.01em; }

    .section                     { padding: var(--space-16) 0; }
    .hero-photo                  { width: 220px; height: 220px; }
    .projects-grid, .skills-grid { grid-template-columns: 1fr; }
    .contact-email-link          { font-size: var(--text-xl); }
    .page-hero h1                { font-size: var(--text-4xl); }
    .social-links                { justify-content: center; }
    .nav-avail-chip              { display: none; }
    .site-footer > .container    { flex-direction: column; text-align: center; align-items: center; }
    .announce-text               { font-size: 10px; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    :root { --container-pad: 1.25rem; }
    .hero-actions { flex-direction: column; width: 100%; }
    .btn          { width: 100%; justify-content: center; }
    .hero-photo   { width: 190px; height: 190px; }
}

/* ════════════════════════════════════════════════════════════
   REDUCED MOTION
════════════════════════════════════════════════════════════ */
@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; }
    .video-bg-wrapper video { display: none; }
    .video-bg-overlay { background: var(--color-bg); }
    html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════
   PRINT
════════════════════════════════════════════════════════════ */
@media print {
    .video-bg-wrapper, .video-bg-overlay, .cursor-dot, .cursor-ring,
    .announce-bar, .hero-scroll-hint, #scroll-progress, #preloader { display: none !important; }
    body { background: #fff; color: #000; }
    .glass-card { border: 1px solid #ccc; background: #fff; }
}