/* ===================================
   Rustyt Rooser — site theme
   Dark/Light Theme with Toggle
   =================================== */

/* ===== DARK THEME (Default) ===== */
:root {
    --bg-ocean: #120a0d;
    --bg-deep: #1a0c11;
    --bg-card: rgba(32, 14, 18, 0.85);
    --bg-card-hover: rgba(44, 18, 24, 0.95);

    --text-primary: #f3e7d2;
    --text-secondary: #d8b9a4;
    --text-muted: #9c7a68;

    --gold: #f5c842;
    --gold-light: #ffe066;
    --gold-dark: #c9991a;
    --crimson: #e23744;
    --crimson-light: #ff5a67;
    --crimson-dark: #a71d2a;

    --ocean-blue: #b91c1c;
    --ocean-light: #e63946;
    --ocean-deep: #6a040f;
    --sky-blue: #ff6b6b;

    --treasure-brown: #5c2a1e;
    --parchment: #e6efe9;
    --parchment-dark: #c7d3cb;
    --wood-brown: #1b1010;
    --wood-light: #3a2024;

    --luffy-red: #e0241f;
    --gear5-white: #fff6e6;
    --gear5-glow: rgba(255, 240, 200, 0.6);

    --accent-gradient: linear-gradient(135deg, var(--crimson), var(--gold));
    --ocean-gradient: linear-gradient(135deg, var(--ocean-deep), var(--ocean-light));
    --treasure-gradient: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
    --fire-gradient: linear-gradient(135deg, var(--crimson-dark), var(--crimson), #ff3b30);
    --night-ocean: linear-gradient(180deg, #120a0d 0%, #1c0d11 38%, #2e0f16 100%);
    --straw-hat-gradient: linear-gradient(135deg, var(--gold), var(--crimson), var(--gold));

    --border-color: rgba(226, 55, 68, 0.20);
    --border-hover: rgba(226, 55, 68, 0.5);
    --glow-gold: rgba(245, 200, 66, 0.22);
    --glow-red: rgba(226, 55, 68, 0.28);

    --code-bg: #1a0d10;
    --card-gradient-from: rgba(32, 14, 18, 0.9);
    --card-gradient-to: rgba(46, 18, 24, 0.85);
    --card-hover-from: rgba(46, 18, 24, 0.95);
    --card-hover-to: rgba(62, 24, 30, 0.9);
    --nav-bg: rgba(18, 10, 13, 0.95);
    --section-bg-a: rgba(42, 16, 20, 0.5);
    --section-bg-b: rgba(62, 18, 24, 0.32);
    --section-bg-c: rgba(18, 10, 13, 0.5);
    --footer-bg: rgba(18, 10, 13, 0.8);
    --wave1-from: rgba(226, 55, 68, 0.28);
    --wave1-to: rgba(122, 29, 38, 0.15);
    --wave2-from: rgba(245, 200, 66, 0.16);
    --wave2-to: rgba(226, 55, 68, 0.12);
    --wave3-from: rgba(255, 90, 103, 0.10);
    --wave3-to: rgba(245, 200, 66, 0.10);
    --watermark-opacity: 0.022;

    --font-pirate: 'Pirata One', cursive;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-display: 'Space Grotesk', sans-serif;

    --section-padding: 100px;
    --container-width: 1200px;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;

    color-scheme: dark;
}

/* ===== LIGHT THEME — Aged One Piece map / parchment + Luffy red (warm, vintage) ===== */
[data-theme="light"] {
    --bg-ocean: #ecd7b3;
    --bg-deep: #ddc498;
    --bg-card: rgba(248, 236, 208, 0.94);
    --bg-card-hover: rgba(252, 244, 222, 0.98);

    --text-primary: #3a1f12;
    --text-secondary: #5e3a26;
    --text-muted: #876a4c;

    --gold: #b8860b;
    --gold-light: #c9991a;
    --gold-dark: #a07818;
    --crimson: #c0271f;
    --crimson-light: #e63946;
    --crimson-dark: #7a1f1a;

    --ocean-blue: #b8312a;
    --ocean-light: #d94b3f;
    --ocean-deep: #7a1f1a;
    --sky-blue: #e07a5f;

    --border-color: rgba(140, 50, 35, 0.30);
    --border-hover: rgba(140, 50, 35, 0.55);
    --glow-gold: rgba(201, 153, 26, 0.18);
    --glow-red: rgba(192, 39, 31, 0.18);

    --code-bg: #2b1816;
    --card-gradient-from: rgba(248, 236, 208, 0.95);
    --card-gradient-to: rgba(236, 216, 184, 0.92);
    --card-hover-from: rgba(252, 244, 222, 0.98);
    --card-hover-to: rgba(242, 224, 196, 0.95);
    --nav-bg: rgba(236, 220, 186, 0.96);
    --section-bg-a: rgba(219, 199, 156, 0.42);
    --section-bg-b: rgba(192, 39, 31, 0.12);
    --section-bg-c: rgba(236, 220, 186, 0.36);
    --footer-bg: rgba(226, 208, 172, 0.93);
    --night-ocean: linear-gradient(180deg, #f1e3c2 0%, #e9d3a6 45%, #e0c193 100%);
    --wave1-from: rgba(192, 39, 31, 0.15);
    --wave1-to: rgba(122, 31, 26, 0.08);
    --wave2-from: rgba(201, 153, 26, 0.11);
    --wave2-to: rgba(192, 39, 31, 0.06);
    --wave3-from: rgba(224, 80, 60, 0.09);
    --wave3-to: rgba(120, 90, 40, 0.08);
    --watermark-opacity: 0.05;

    --accent-gradient: linear-gradient(135deg, var(--crimson), var(--gold));
    --treasure-gradient: linear-gradient(135deg, var(--gold-dark), var(--gold), var(--gold-light));
    --fire-gradient: linear-gradient(135deg, var(--crimson-dark), var(--crimson), #e63946);
    --ocean-gradient: linear-gradient(135deg, var(--ocean-deep), var(--ocean-light));

    color-scheme: light;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-primary);
    background: var(--night-ocean);
    color: var(--text-primary);
    line-height: 1.7;
    overflow-x: hidden;
    transition: background 0.4s ease, color 0.4s ease;
}

::selection { background: var(--crimson); color: #fff; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; }

/* ---------- Pirate Text ---------- */
.pirate-text {
    font-family: var(--font-pirate);
    background: var(--straw-hat-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px rgba(226, 55, 68, 0.45)) drop-shadow(0 0 6px rgba(245, 200, 66, 0.4));
}

/* ---------- Theme Toggle ---------- */
.theme-toggle {
    position: fixed; bottom: 28px; right: 28px; z-index: 1002;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--accent-gradient);
    border: 2px solid var(--border-hover);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #fff;
    box-shadow: 0 4px 20px rgba(220,53,69,0.3), 0 0 20px rgba(245, 200, 66,0.15);
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
}
.theme-toggle:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 6px 35px rgba(220,53,69,0.5), 0 0 40px rgba(245, 200, 66,0.25);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { position: absolute; transition: all 0.3s ease; }
.theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }
.theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }

[data-theme="light"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); }
[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }

[data-theme="light"] .theme-toggle {
    background: linear-gradient(135deg, #f5c842, #e6b422);
    border-color: rgba(201, 153, 26, 0.4);
    box-shadow: 0 4px 20px rgba(201, 153, 26,0.3);
}

/* ---------- Ocean BG + Waves ---------- */
.ocean-bg {
    position: fixed; bottom: 0; left: 0; width: 100%; height: 280px;
    z-index: 0; pointer-events: none; overflow: hidden;
}

.wave {
    position: absolute; bottom: 0; left: -50%; width: 200%; height: 120px;
    border-radius: 40% 45% 0 0;
}

.wave-1 {
    background: linear-gradient(180deg, var(--wave1-from), var(--wave1-to));
    animation: waveMove 8s ease-in-out infinite; bottom: 0;
}
.wave-2 {
    background: linear-gradient(180deg, var(--wave2-from), var(--wave2-to));
    animation: waveMove 10s ease-in-out infinite reverse; bottom: 15px;
}
.wave-3 {
    background: linear-gradient(180deg, var(--wave3-from), var(--wave3-to));
    animation: waveMove 12s ease-in-out infinite; bottom: 30px;
}

@keyframes waveMove {
    0%, 100% { transform: translateX(0) translateY(0); }
    50% { transform: translateX(2%) translateY(-12px); }
}

/* ---------- Ambient layer ---------- */
.particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* Site mark watermark */
body::before {
    content: '👒'; position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%); font-size: 40vw; opacity: var(--watermark-opacity);
    z-index: 0; pointer-events: none;
}

/* ---------- Treasure Cards ---------- */
.treasure-card {
    background: linear-gradient(135deg, var(--card-gradient-from), var(--card-gradient-to));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all var(--transition-base);
    position: relative; overflow: hidden;
}

.treasure-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--treasure-gradient); opacity: 0;
    transition: opacity var(--transition-base);
}

.treasure-card:hover {
    background: linear-gradient(135deg, var(--card-hover-from), var(--card-hover-to));
    border-color: var(--border-hover);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px var(--glow-gold),
        inset 0 1px 0 rgba(245, 200, 66, 0.1);
}
.treasure-card:hover::before { opacity: 1; }

/* Light theme card shadows */
[data-theme="light"] .treasure-card:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 0 40px rgba(201, 153, 26,0.1),
        inset 0 1px 0 rgba(201, 153, 26,0.15);
}

/* ---------- Navbar ---------- */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 16px 0; transition: all var(--transition-base);
}

.navbar.scrolled {
    padding: 10px 0;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--glow-gold);
}

[data-theme="light"] .navbar.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(201, 153, 26,0.08);
}

.nav-container {
    max-width: var(--container-width); margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between;
}

.nav-logo {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-pirate); font-size: clamp(1rem, 2.5vw, 1.5rem);
    transition: transform var(--transition-fast);
    white-space: nowrap;
}
.nav-logo:hover { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(245, 200, 66, 0.4)); }

.jolly-roger { font-size: 1.5rem; animation: jollyBob 3s ease-in-out infinite; }
@keyframes jollyBob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

.logo-text {
    background: var(--treasure-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-link {
    font-size: 0.9rem; font-weight: 500; color: var(--text-secondary);
    padding: 8px 16px; border-radius: var(--radius-sm);
    transition: all var(--transition-fast); position: relative;
}
.nav-link:hover, .nav-link.active { color: var(--gold); }
.nav-link.active { background: rgba(245, 200, 66, 0.1); }

.nav-toggle {
    display: none; flex-direction: column; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px; z-index: 1001;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--gold); border-radius: 2px; transition: all var(--transition-base); }
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ---------- Hero ---------- */
.hero {
    min-height: 100vh; display: flex; align-items: center;
    position: relative; padding: 100px 24px 60px; overflow: hidden; z-index: 1;
}

.hero::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 30% 50%, rgba(245, 200, 66, 0.06), transparent 60%),
        radial-gradient(ellipse 60% 50% at 70% 30%, rgba(220, 53, 69, 0.05), transparent 60%),
        radial-gradient(ellipse 40% 40% at 50% 80%, rgba(21, 101, 192, 0.08), transparent 60%);
    pointer-events: none;
}

.hero::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f5c842' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none; opacity: 0.5;
}

.hero-content {
    max-width: var(--container-width); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
    align-items: center; position: relative; z-index: 1;
}

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 20px;
    background: rgba(245, 200, 66, 0.1);
    border: 1px solid rgba(245, 200, 66, 0.25);
    border-radius: 50px; font-size: 0.85rem; font-weight: 500;
    color: var(--gold); margin-bottom: 24px;
}

.badge-dot { width: 8px; height: 8px; background: #00d26a; border-radius: 50%; animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,210,106,0.4); } 50% { box-shadow: 0 0 0 6px rgba(0,210,106,0); } }

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 800; line-height: 1.15; margin-bottom: 20px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* Bounty Poster — uses image now, old text styles removed */

.hero-typewriter {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 1.8vw, 1.1rem);
    color: var(--gold-light); margin-bottom: 16px; min-height: 1.8rem;
}
.typewriter-prefix { color: var(--text-muted); }
.typewriter-cursor { animation: blink 1s step-end infinite; color: var(--crimson); }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.hero-description {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--text-secondary); max-width: 560px;
    margin-bottom: 32px; line-height: 1.8;
}

.hero-cta { display: flex; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 50px;
    font-family: var(--font-primary); font-size: 0.95rem; font-weight: 600;
    cursor: pointer; transition: all var(--transition-base); border: none;
    position: relative; overflow: hidden;
}

.btn-primary {
    background: var(--accent-gradient); color: #fff;
    box-shadow: 0 4px 20px rgba(220,53,69,0.3), 0 0 20px rgba(245, 200, 66,0.15);
}
.btn-primary:hover {
    box-shadow: 0 6px 35px rgba(220,53,69,0.5), 0 0 40px rgba(245, 200, 66,0.25);
    transform: translateY(-3px);
}

.btn-secondary {
    background: transparent; color: var(--gold);
    border: 1px solid var(--border-hover);
}
.btn-secondary:hover {
    background: rgba(245, 200, 66,0.1);
    transform: translateY(-3px);
    box-shadow: 0 4px 20px rgba(245, 200, 66,0.15);
}

/* Hero Stats */
.hero-stats { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.stat { text-align: center; }

.stat-number {
    font-family: var(--font-pirate); font-size: 2.4rem;
    background: var(--treasure-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; filter: drop-shadow(0 0 6px rgba(245, 200, 66,0.3));
}
.stat-plus { font-size: 1.4rem; color: var(--crimson); }
.stat-label { display: block; font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }
.stat-divider { color: var(--gold-dark); font-size: 1rem; opacity: 0.5; }

/* Hero Image */
.hero-image-side { display: flex; justify-content: center; }
.hero-image-frame { position: relative; max-width: 500px; width: 100%; }

.hero-image {
    width: 100%; height: auto; border-radius: var(--radius-lg);
    position: relative; z-index: 1;
    animation: heroFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.hero-image-glow {
    position: absolute; inset: -30px;
    background: radial-gradient(circle, rgba(245, 200, 66,0.15), rgba(220,53,69,0.1) 50%, transparent 70%);
    border-radius: 50%; z-index: 0;
    animation: glowPulse 4s ease-in-out infinite;
}

@keyframes glowPulse { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

/* Scroll Indicator */
.hero-scroll-indicator {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.1em;
    text-transform: uppercase; animation: scrollBounce 2s ease-in-out infinite; z-index: 2;
}
.scroll-compass { font-size: 1.5rem; animation: compassSwing 3s ease-in-out infinite; }
@keyframes compassSwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* ---------- Sections ---------- */
.section { padding: var(--section-padding) 0; position: relative; z-index: 1; }
.section-header { text-align: center; margin-bottom: 56px; }

.section-tag { font-family: var(--font-pirate); font-size: 1rem; color: var(--gold-dark); display: block; margin-bottom: 10px; letter-spacing: 0.05em; }
.section-title { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.section-subtitle { font-size: 1rem; color: var(--text-secondary); }

/* About */
.about { background: linear-gradient(180deg, var(--section-bg-a), var(--section-bg-b), var(--section-bg-c)); position: relative; }
.about::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f5c842' fill-opacity='0.015'%3E%3Cpath d='M20 0L0 20h8l12-12 12 12h8z'/%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; }

.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.about-card { padding: 36px 28px; text-align: center; }
.about-icon { font-size: 2.5rem; margin-bottom: 16px; }
.about-card h3 { font-family: var(--font-pirate); font-size: 1.5rem; color: var(--gold); margin-bottom: 12px; text-shadow: 0 0 15px rgba(245, 200, 66,0.2); }
.about-card p { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.7; }

/* Skills */
.skills { background: linear-gradient(180deg, var(--section-bg-c), var(--section-bg-a), var(--section-bg-c)); }
.skills-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.skill-category { padding: 28px; }

.category-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; color: var(--gold); }
.skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.skill-tag {
    padding: 6px 16px; background: rgba(245, 200, 66,0.06);
    border: 1px solid rgba(245, 200, 66,0.12); border-radius: 50px;
    font-size: 0.85rem; font-weight: 500; color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.skill-tag:hover { background: rgba(245, 200, 66,0.15); color: var(--gold); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(245, 200, 66,0.15); }

/* Contact */
.contact { background: linear-gradient(180deg, var(--section-bg-a), var(--section-bg-b), var(--section-bg-c)); }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 800px; margin: 0 auto; }
.contact-card { padding: 36px 24px; text-align: center; }

.contact-icon { width: 52px; height: 52px; background: rgba(245, 200, 66,0.1); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--gold); font-size: 1.3rem; }
.contact-card h3 { font-family: var(--font-pirate); font-size: 1.3rem; color: var(--gold); margin-bottom: 8px; }
.contact-link { color: var(--text-secondary); font-size: 0.88rem; transition: color var(--transition-fast); }
a.contact-link:hover { color: var(--gold); }

/* Footer */
.footer { padding: 36px 0; border-top: 1px solid var(--border-color); z-index: 1; position: relative; background: var(--footer-bg); }
.footer-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-logo { font-family: var(--font-pirate); font-size: clamp(1rem, 2.5vw, 1.2rem); display: flex; align-items: center; gap: 8px; }
.footer-text { color: var(--text-muted); font-size: 0.85rem; }
.footer-links a { color: var(--text-secondary); font-size: 0.85rem; transition: color var(--transition-fast); }
.footer-links a:hover { color: var(--gold); }

/* ---------- Floating Pirate Ship & Jolly Flags ---------- */
.floating-ship {
    position: fixed;
    bottom: 20px;
    right: 10px;
    z-index: 0;
    pointer-events: none;
    animation: shipSail 6s ease-in-out infinite;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
    opacity: 0.6;
}

.ship-img {
    width: clamp(80px, 14vw, 180px);
    height: auto;
}

@keyframes shipSail {
    0% { transform: translateY(0) rotate(-1.5deg); }
    20% { transform: translateY(-10px) rotate(0.5deg); }
    40% { transform: translateY(-4px) rotate(1.5deg); }
    60% { transform: translateY(-14px) rotate(-0.5deg); }
    80% { transform: translateY(-6px) rotate(1deg); }
    100% { transform: translateY(0) rotate(-1.5deg); }
}

.jolly-flag {
    position: fixed;
    z-index: 0;
    pointer-events: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

.jolly-flag-left {
    bottom: 140px;
    left: 12px;
    animation: flagFloatL 7s ease-in-out infinite;
}

.jolly-flag-right {
    bottom: 180px;
    right: 12px;
    animation: flagFloatR 8s ease-in-out infinite;
}

.flag-img {
    width: clamp(40px, 6vw, 70px);
    height: auto;
    animation: flagWave 4s ease-in-out infinite;
    opacity: 0.5;
    border-radius: 10px;
}

@keyframes flagFloatL {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    33% { transform: translateY(-14px) rotate(2deg); }
    66% { transform: translateY(-6px) rotate(-2deg); }
}

@keyframes flagFloatR {
    0%, 100% { transform: translateY(0) rotate(3deg); }
    33% { transform: translateY(-10px) rotate(-2deg); }
    66% { transform: translateY(-16px) rotate(1deg); }
}

/* ---------- Bounty Poster Image ---------- */
.bounty-poster-frame {
    display: inline-block;
    max-width: 240px;
    margin-bottom: 20px;
    animation: posterFloat 4s ease-in-out infinite;
    filter: drop-shadow(4px 4px 20px rgba(0,0,0,0.5)) drop-shadow(0 0 30px rgba(245, 200, 66,0.15));
    transform: rotate(-2deg);
    transition: transform var(--transition-base), filter var(--transition-base);
    cursor: default;
}

.bounty-poster-frame:hover {
    transform: rotate(0deg) scale(1.05);
    filter: drop-shadow(4px 4px 30px rgba(0,0,0,0.6)) drop-shadow(0 0 50px rgba(245, 200, 66,0.3));
}

.bounty-poster-img {
    width: 100%;
    height: auto;
    border-radius: 6px;
}

@keyframes posterFloat {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50% { transform: rotate(0.5deg) translateY(-6px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    :root { --section-padding: 80px; }
    .hero-content { grid-template-columns: 1fr; text-align: center; gap: 40px; }
    .hero-text-side { order: 1; }
    .hero-image-side { order: 0; }
    .hero-image-frame { max-width: 350px; }
    .hero-cta { justify-content: center; }
    .hero-stats { justify-content: center; }
    .hero-description { margin-left: auto; margin-right: auto; }
}

@media (max-width: 768px) {
    :root { --section-padding: 60px; }
    .nav-toggle { display: flex; }
    .nav-links {
        position: fixed; top: 0; right: -100%; width: 280px; height: 100vh;
        background: var(--bg-ocean); border-left: 1px solid var(--border-color);
        flex-direction: column; padding: 100px 32px 32px; gap: 4px;
        transition: right var(--transition-base); z-index: 999;
    }
    .nav-links.active { right: 0; }
    .nav-link { width: 100%; padding: 14px 16px; font-size: 1rem; }
    .about-grid { grid-template-columns: 1fr; }
    .floating-ship { bottom: 12px; right: 6px; opacity: 0.6; }
    .ship-img { width: 132px; }
    .jolly-flag { opacity: 0.2; }
    .jolly-flag-left { bottom: 80px; left: 6px; }
    .jolly-flag-right { bottom: 100px; right: 6px; }
    .flag-img { width: 30px; }
    .bounty-poster-frame { max-width: 180px; }
    .contact-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 20px; }
    .stat-divider { display: none; }
    .footer-content { flex-direction: column; text-align: center; }
    .hero-scroll-indicator { display: none; }
    .theme-toggle { bottom: 20px; right: 20px; width: 46px; height: 46px; font-size: 1.2rem; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.8rem; }
    .hero-cta { flex-direction: column; }
    .btn { width: 100%; justify-content: center; }
    .skills-categories { grid-template-columns: 1fr; }
    .bounty-poster-frame { max-width: 150px; }
    .floating-ship { bottom: 8px; right: 4px; opacity: 0.55; }
    .ship-img { width: 108px; }
    .jolly-flag-left { bottom: 60px; left: 4px; }
    .jolly-flag-right { bottom: 75px; right: 4px; }
    .flag-img { width: 22px; }
}

/* ===================================================================
    IMMERSIVE UPGRADE — Preloader, Hero Video, Cinematic FX, Logo
   =================================================================== */

/* ---------- Preloader: "Hoist the Colors" ---------- */
.preloader {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    background:
        radial-gradient(ellipse 70% 60% at 50% 40%, rgba(21, 101, 192,0.15), transparent 70%),
        var(--night-ocean);
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader.done { animation: none; opacity: 0; visibility: hidden; pointer-events: none; }
/* No-JS / failsafe: fade the gate even if scripts never fire */
.preloader { animation: preloaderFailsafe 0.7s ease 6s forwards; }
@keyframes preloaderFailsafe { to { opacity: 0; visibility: hidden; } }
body.loaded { overflow: visible; }
.preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 24px; }
.preloader-logo-wrap { position: relative; width: 140px; height: 140px; display: flex; align-items: center; justify-content: center; }
.preloader-logo {
    width: 110px; height: auto; z-index: 2;
    filter: drop-shadow(0 0 18px rgba(255,71,87,0.35)) drop-shadow(0 0 30px rgba(245, 200, 66,0.15));
    animation: jollyBob 3s ease-in-out infinite, logoEyes 2.2s ease-in-out infinite;
}
.preloader-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--crimson-light);
    border-right-color: var(--gold);
    animation: spin 1.1s linear infinite;
}
.preloader-title {
    font-family: 'Cinzel', var(--font-pirate); font-weight: 900;
    letter-spacing: 0.32em; font-size: clamp(0.85rem, 2.4vw, 1.15rem);
    background: var(--treasure-gradient);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    padding-left: 0.32em;
}
.preloader-bar { width: min(240px, 70vw); height: 4px; border-radius: 4px; background: rgba(245, 200, 66,0.12); overflow: hidden; }
.preloader-bar span { display: block; height: 100%; width: 0%; border-radius: 4px; background: var(--accent-gradient); box-shadow: 0 0 12px rgba(245, 200, 66,0.5); transition: width 0.25s ease; }
.preloader-text { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.05em; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes logoEyes {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(255,71,87,0.30)) drop-shadow(0 0 26px rgba(245, 200, 66,0.12)); }
    50% { filter: drop-shadow(0 0 22px rgba(255,71,87,0.6)) drop-shadow(0 0 40px rgba(245, 200, 66,0.22)); }
}

/* ---------- Cinematic Overlays (film grain + vignette) ---------- */
.grain-overlay {
    position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 0.6s steps(2) infinite;
}
@keyframes grainShift {
    0% { transform: translate(0,0); } 50% { transform: translate(-4%, 3%); } 100% { transform: translate(3%, -2%); }
}
.vignette-overlay {
    position: fixed; inset: 0; z-index: 9997; pointer-events: none;
    background: radial-gradient(ellipse 100% 100% at 50% 45%, transparent 55%, rgba(0,0,0,0.35) 100%);
}
[data-theme="light"] .vignette-overlay { background: radial-gradient(ellipse 100% 100% at 50% 45%, transparent 60%, rgba(60,40,10,0.10) 100%); }
[data-theme="light"] .grain-overlay { opacity: 0.03; }

/* ---------- Site mark (nav / footer) ---------- */
.nav-logo-img {
    width: 38px; height: 38px; object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255,71,87,0.35));
    animation: jollyBob 3s ease-in-out infinite, logoEyes 2.6s ease-in-out infinite;
    transition: transform var(--transition-fast);
}
.nav-logo:hover .nav-logo-img { transform: scale(1.12) rotate(4deg); }
.footer-logo-img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255,71,87,0.3)); }
[data-theme="light"] .nav-logo-img,
[data-theme="light"] .footer-logo-img,
[data-theme="light"] .flag-img,
[data-theme="light"] .preloader-logo { filter: drop-shadow(0 0 6px rgba(220,53,69,0.35)) drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }

/* ---------- Hero alias subtitle ---------- */
.hero-alias {
    display: block; font-family: var(--font-mono); font-weight: 500;
    font-size: clamp(0.7rem, 1.4vw, 0.95rem); letter-spacing: 0.08em;
    color: var(--text-muted); margin-top: 8px; opacity: 0.85;
}

/* ---------- Hero Cinematic Video Backdrop ---------- */
.hero-video-wrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover;
    opacity: 0.22; filter: saturate(1.1) contrast(1.05);
}
.hero-video-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, var(--bg-ocean) 0%, transparent 25%, transparent 60%, var(--bg-ocean) 100%),
        radial-gradient(ellipse 60% 70% at 30% 50%, transparent 30%, rgba(10, 14, 26,0.55) 100%);
}
[data-theme="light"] .hero-video { opacity: 0.14; }
.hero-content { z-index: 3; }

/* ---------- Bounty Poster shine sweep ---------- */
.bounty-poster-frame { position: relative; }
.bounty-shine {
    position: absolute; inset: 0; border-radius: 6px; overflow: hidden; pointer-events: none;
}
.bounty-shine::after {
    content: ''; position: absolute; top: -60%; left: -120%; width: 60%; height: 220%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: rotate(18deg); animation: bountySheen 5.5s ease-in-out infinite;
}
@keyframes bountySheen { 0%, 65% { left: -120%; } 85%, 100% { left: 160%; } }

/* ---------- Reduced motion: respect user preference ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .grain-overlay, .hero-video { display: none; }
}

/* ---------- Responsive tweaks for new elements ---------- */
@media (max-width: 768px) {
    .nav-logo-img { width: 32px; height: 32px; }
    .hero-video { display: none; }
    .hero-video-overlay { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(21, 101, 192,0.12), transparent 70%); }
    .preloader-logo { width: 88px; }
    .preloader-logo-wrap { width: 116px; height: 116px; }
}

/* ===================================================================
     CV INTEGRATION — Bio intro, Voyage Log timeline, Side Quests
   =================================================================== */
.about-intro {
    max-width: 820px; margin: 0 auto 42px; text-align: center;
    color: var(--text-secondary); font-size: clamp(0.98rem, 1.4vw, 1.14rem); line-height: 1.95;
}
.about-intro strong { color: var(--gold); font-weight: 700; }
.inline-link { color: var(--gold); border-bottom: 1px dashed var(--border-hover); transition: all var(--transition-fast); }
.inline-link:hover { color: var(--gold-light); border-bottom-color: var(--gold); text-shadow: 0 0 12px var(--glow-gold); }
.hero-description .inline-link { font-weight: 600; }

/* Experience section background (alternating) */
.experience { background: linear-gradient(180deg, var(--section-bg-c), var(--section-bg-a), var(--section-bg-c)); }

/* Voyage Log timeline */
.timeline { position: relative; max-width: 820px; margin: 0 auto; padding-left: 40px; }
.timeline::before {
    content: ''; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 2px;
    background: linear-gradient(180deg, var(--gold), var(--crimson) 60%, transparent);
    opacity: 0.5;
}
.timeline-item { padding: 22px 26px; margin-bottom: 22px; position: relative; }
.timeline-dot {
    position: absolute; left: -40px; top: 22px; width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
    background: var(--bg-deep); border: 2px solid var(--border-hover); border-radius: 50%;
    box-shadow: 0 0 16px var(--glow-gold); z-index: 1;
}
.timeline-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.timeline-role { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; color: var(--text-primary); }
.timeline-date { font-family: var(--font-mono); font-size: 0.76rem; color: var(--gold); white-space: nowrap; }
.timeline-item p { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.78; margin-bottom: 12px; }
.timeline-item em { color: var(--gold-light); font-style: italic; }
.timeline-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Side Quests */
.sidequest-header { text-align: center; margin: 50px 0 24px; }
.sidequests { margin-top: 0; }

@media (max-width: 600px) {
    .timeline { padding-left: 30px; }
    .timeline-dot { left: -30px; width: 22px; height: 22px; font-size: 0.7rem; top: 20px; }
    .timeline-item { padding: 18px 18px; }
    .sidequests { grid-template-columns: 1fr; }
}

/* ===================================================================
   Zoro card — jade buttons and blade accents
   =================================================================== */
:root { --accent-gradient: linear-gradient(135deg, var(--crimson), var(--gold)); }
[data-theme="light"] { --accent-gradient: linear-gradient(135deg, var(--crimson), var(--gold)); }

.skill-category.sword-wado { box-shadow: inset 4px 0 0 #e9ecef; }
.skill-category.sword-kitetsu { box-shadow: inset 4px 0 0 #c1121f; }
.skill-category.sword-shusui { box-shadow: inset 4px 0 0 #6c757d; }
.skill-category.sword-enma { box-shadow: inset 4px 0 0 #c9991a; }
.skill-category.sword-haki { box-shadow: inset 4px 0 0 #adb5bd; }

/* Portrait placeholder — shown only until images/rustyt.png is added. */
.hero-image.is-placeholder {
    object-fit: contain;
    padding: 18%;
    opacity: .5;
    background: radial-gradient(circle at 50% 45%, rgba(245,200,66,.10), transparent 70%);
}

/* ===================================================================
   SYSTEMS UI REFRESH — cool technical palette and asymmetric layout
   =================================================================== */
:root {
    --bg-ocean: #07131f;
    --bg-deep: #0a1928;
    --bg-card: rgba(10, 27, 43, 0.86);
    --bg-card-hover: rgba(14, 37, 57, 0.96);

    --text-primary: #edf7ff;
    --text-secondary: #b7c9d8;
    --text-muted: #7890a3;

    --gold: #5eead4;
    --gold-light: #a7f3e8;
    --gold-dark: #22b8aa;
    --crimson: #818cf8;
    --crimson-light: #a5b4fc;
    --crimson-dark: #5967d8;

    --ocean-blue: #38bdf8;
    --ocean-light: #67e8f9;
    --ocean-deep: #164e63;
    --sky-blue: #7dd3fc;

    --accent-gradient: linear-gradient(120deg, #5eead4 0%, #67e8f9 48%, #818cf8 100%);
    --ocean-gradient: linear-gradient(135deg, #0e7490, #4338ca);
    --treasure-gradient: linear-gradient(110deg, #5eead4, #67e8f9 52%, #a5b4fc);
    --fire-gradient: linear-gradient(135deg, #5967d8, #818cf8, #67e8f9);
    --night-ocean: linear-gradient(145deg, #06101a 0%, #0a1928 48%, #07131f 100%);
    --straw-hat-gradient: linear-gradient(110deg, #5eead4 0%, #67e8f9 50%, #a5b4fc 100%);

    --border-color: rgba(103, 232, 249, 0.16);
    --border-hover: rgba(94, 234, 212, 0.52);
    --glow-gold: rgba(94, 234, 212, 0.16);
    --glow-red: rgba(129, 140, 248, 0.20);

    --code-bg: #06111d;
    --card-gradient-from: rgba(9, 25, 40, 0.94);
    --card-gradient-to: rgba(12, 33, 50, 0.88);
    --card-hover-from: rgba(12, 35, 53, 0.98);
    --card-hover-to: rgba(16, 42, 62, 0.94);
    --nav-bg: rgba(7, 19, 31, 0.82);
    --section-bg-a: rgba(11, 31, 47, 0.56);
    --section-bg-b: rgba(20, 48, 68, 0.32);
    --section-bg-c: rgba(7, 19, 31, 0.50);
    --footer-bg: rgba(5, 16, 27, 0.92);
    --watermark-opacity: 1;

    --font-pirate: 'Space Grotesk', sans-serif;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
}

[data-theme="light"] {
    --bg-ocean: #eef7fa;
    --bg-deep: #dcecf1;
    --bg-card: rgba(255, 255, 255, 0.88);
    --bg-card-hover: rgba(255, 255, 255, 0.98);
    --text-primary: #102536;
    --text-secondary: #38566b;
    --text-muted: #6f8797;
    --gold: #087f78;
    --gold-light: #0e9f95;
    --gold-dark: #086b67;
    --crimson: #5665d8;
    --crimson-light: #7280e8;
    --crimson-dark: #3f4bb5;
    --border-color: rgba(8, 127, 120, 0.20);
    --border-hover: rgba(8, 127, 120, 0.48);
    --glow-gold: rgba(8, 127, 120, 0.12);
    --glow-red: rgba(86, 101, 216, 0.14);
    --card-gradient-from: rgba(255, 255, 255, 0.94);
    --card-gradient-to: rgba(237, 248, 250, 0.92);
    --card-hover-from: rgba(255, 255, 255, 0.99);
    --card-hover-to: rgba(231, 246, 248, 0.97);
    --nav-bg: rgba(245, 252, 253, 0.86);
    --section-bg-a: rgba(213, 237, 240, 0.48);
    --section-bg-b: rgba(221, 229, 251, 0.42);
    --section-bg-c: rgba(238, 247, 250, 0.56);
    --footer-bg: rgba(228, 241, 244, 0.94);
    --night-ocean: linear-gradient(145deg, #f8fcfd 0%, #e9f5f7 48%, #eef3fb 100%);
    --accent-gradient: linear-gradient(120deg, #087f78, #159aab 52%, #5665d8);
    --treasure-gradient: linear-gradient(110deg, #087f78, #159aab 52%, #5665d8);
    --straw-hat-gradient: linear-gradient(110deg, #087f78, #159aab 52%, #5665d8);
}

body {
    background-color: var(--bg-ocean);
    background-image:
        radial-gradient(circle at 12% 12%, rgba(94, 234, 212, 0.10), transparent 28%),
        radial-gradient(circle at 88% 28%, rgba(129, 140, 248, 0.11), transparent 32%),
        linear-gradient(rgba(103, 232, 249, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 249, 0.025) 1px, transparent 1px),
        var(--night-ocean);
    background-size: auto, auto, 44px 44px, 44px 44px, auto;
}

body::before {
    content: '';
    top: 90px;
    left: auto;
    right: -120px;
    width: 420px;
    height: 420px;
    transform: none;
    opacity: .32;
    background: repeating-radial-gradient(circle at center, transparent 0 30px, rgba(103, 232, 249, .08) 31px 32px);
    mask-image: linear-gradient(135deg, #000, transparent 72%);
}

.ocean-bg { display: none; }
.particles { opacity: .48; }
.grain-overlay { opacity: .018; mix-blend-mode: soft-light; }
.vignette-overlay { background: radial-gradient(ellipse 120% 110% at 50% 42%, transparent 58%, rgba(1, 8, 16, .38) 100%); }
[data-theme="light"] .vignette-overlay { background: radial-gradient(ellipse 120% 110% at 50% 42%, transparent 68%, rgba(34, 84, 104, .08) 100%); }

.pirate-text {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -.035em;
    filter: none;
}

.navbar { top: 14px; padding: 0; }
.navbar.scrolled {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.nav-container {
    width: calc(100% - 40px);
    min-height: 64px;
    padding: 8px 12px 8px 18px;
    background: var(--nav-bg);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .18);
}
.nav-logo {
    font-family: var(--font-display);
    font-size: .96rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.logo-text {
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.nav-logo-img {
    width: 34px;
    height: 34px;
    animation: none;
    filter: drop-shadow(0 0 9px rgba(94, 234, 212, .32));
}
.nav-link { border-radius: 7px; padding: 8px 14px; }
.nav-link:hover { background: rgba(94, 234, 212, .07); }
.nav-link.active {
    color: #06131e;
    background: var(--gold);
}
.nav-link.active::after { display: none; }

.hero { padding-top: 126px; }
.hero-content {
    grid-template-columns: .88fr 1.12fr;
    gap: clamp(54px, 7vw, 92px);
}
.hero-text-side { grid-column: 2; grid-row: 1; }
.hero-image-side { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.hero::before {
    background:
        radial-gradient(ellipse 52% 68% at 23% 45%, rgba(94, 234, 212, .10), transparent 70%),
        radial-gradient(ellipse 45% 55% at 76% 42%, rgba(129, 140, 248, .09), transparent 72%);
}
.hero::after {
    background-image: linear-gradient(90deg, transparent 49.8%, rgba(103, 232, 249, .06) 50%, transparent 50.2%);
    background-size: 100% 100%;
    opacity: 1;
}
.hero-badge {
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--gold);
    background: rgba(94, 234, 212, .055);
    color: var(--gold-light);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.badge-dot { border-radius: 2px; background: var(--gold); animation: none; }
.hero-title {
    max-width: 650px;
    font-size: clamp(2.7rem, 5.4vw, 4.65rem);
    line-height: 1.01;
    letter-spacing: -.055em;
    text-shadow: none;
}
.hero-alias {
    margin-top: 18px;
    color: var(--text-secondary);
    font-size: clamp(.68rem, 1.15vw, .86rem);
    letter-spacing: .065em;
    line-height: 1.65;
}
.hero-typewriter {
    padding-left: 14px;
    border-left: 2px solid var(--crimson);
    color: var(--gold-light);
}
.hero-description { line-height: 1.72; }
.hero-cta { margin-bottom: 34px; }
.btn {
    border-radius: 8px;
    padding: 13px 22px;
    letter-spacing: .015em;
}
.btn-primary {
    color: #06131e;
    box-shadow: 0 10px 30px rgba(94, 234, 212, .16);
}
.btn-primary:hover { box-shadow: 0 14px 36px rgba(94, 234, 212, .24); }
.btn-secondary { color: var(--gold-light); background: rgba(8, 25, 39, .34); }
.btn-secondary:hover { background: rgba(94, 234, 212, .08); }
.hero-stats { gap: 10px; }
.stat {
    min-width: 116px;
    padding: 11px 14px;
    text-align: left;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: rgba(8, 24, 38, .46);
}
[data-theme="light"] .stat { background: rgba(255, 255, 255, .58); }
.stat-number { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; filter: none; }
.stat-plus { font-size: 1rem; color: var(--crimson-light); }
.stat-label { font-size: .63rem; letter-spacing: .1em; }
.stat-divider { display: none; }

.hero-image-frame {
    max-width: 455px;
    padding: 10px;
    border: 1px solid var(--border-hover);
    border-radius: 12px 54px 12px 54px;
    background: linear-gradient(145deg, rgba(94, 234, 212, .08), rgba(129, 140, 248, .09));
    box-shadow: -20px 24px 70px rgba(0, 0, 0, .34);
}
.hero-image-frame::before {
    content: '';
    position: absolute;
    inset: -14px 18px 18px -14px;
    z-index: -1;
    border-left: 1px solid rgba(94, 234, 212, .42);
    border-top: 1px solid rgba(129, 140, 248, .34);
    border-radius: 14px 58px 14px 58px;
}
.hero-image-frame::after {
    content: 'PROFILE // 01';
    position: absolute;
    right: 18px;
    bottom: -27px;
    z-index: 3;
    padding: 5px 9px;
    color: var(--gold-light);
    background: var(--bg-deep);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font: 600 9px/1 var(--font-mono);
    letter-spacing: .14em;
}
.hero-image {
    border-radius: 7px 45px 7px 45px;
    animation: none;
    filter: saturate(.82) contrast(1.04) drop-shadow(0 18px 32px rgba(0,0,0,.28));
}
.hero-image-glow {
    inset: -38px;
    background: radial-gradient(circle, rgba(94, 234, 212, .14), rgba(129, 140, 248, .09) 48%, transparent 72%);
}
.scroll-compass { font-family: var(--font-mono); font-size: 1rem; animation: none; }

.theme-toggle {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border-width: 1px;
    background: rgba(10, 28, 43, .88);
    color: var(--gold-light);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
}
.theme-toggle:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0, 0, 0, .34); }
[data-theme="light"] .theme-toggle { background: rgba(255, 255, 255, .92); border-color: var(--border-color); box-shadow: 0 10px 30px rgba(24, 70, 90, .12); }

.treasure-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 44px rgba(0, 0, 0, .12);
}
.treasure-card::before {
    top: 18px;
    right: auto;
    bottom: 18px;
    left: 0;
    width: 3px;
    height: auto;
    opacity: .75;
    border-radius: 0 4px 4px 0;
}
.treasure-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 52px rgba(0, 0, 0, .20), 0 0 28px var(--glow-gold);
}
.section-header { text-align: left; margin-bottom: 42px; }
.section-tag {
    font-family: var(--font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.section-tag::before { content: '// '; color: var(--crimson-light); }
.section-title { letter-spacing: -.035em; text-shadow: none; }
.about-intro { margin-left: 0; text-align: left; }
.about-card { text-align: left; padding: 30px 28px; }
.about-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: rgba(94, 234, 212, .055);
    font-size: 1.45rem;
}
.about-card h3,
.contact-card h3 {
    font-family: var(--font-display);
    font-size: 1.12rem;
    color: var(--text-primary);
    text-shadow: none;
}
.skill-tag {
    border-radius: 6px;
    background: rgba(94, 234, 212, .045);
}
.contact-icon { border-radius: 9px; background: rgba(94, 234, 212, .07); }
.footer-logo { font-family: var(--font-display); font-weight: 700; }
.preloader {
    background:
        linear-gradient(rgba(103, 232, 249, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(103, 232, 249, .035) 1px, transparent 1px),
        var(--night-ocean);
    background-size: 44px 44px, 44px 44px, auto;
}
.preloader-ring { border-radius: 18px; border-top-color: var(--gold); border-right-color: var(--crimson-light); }
.preloader-title { font-family: var(--font-display); }
.preloader-logo { filter: drop-shadow(0 0 18px rgba(94, 234, 212, .30)); }
.preloader-bar { height: 3px; border-radius: 0; background: rgba(103, 232, 249, .10); }
.lightning-overlay { background: radial-gradient(ellipse at 50% 30%, rgba(103, 232, 249, .07), transparent 70%); }

@media (max-width: 1024px) {
    .hero-content { grid-template-columns: 1fr; text-align: left; }
    .hero-text-side { grid-column: 1; grid-row: 1; order: 0; }
    .hero-image-side { grid-column: 1; grid-row: 2; order: 1; justify-content: center; }
    .hero-description { margin-left: 0; }
    .hero-cta, .hero-stats { justify-content: flex-start; }
}

@media (max-width: 768px) {
    .navbar { top: 10px; }
    .nav-container { width: calc(100% - 20px); min-height: 58px; padding-left: 13px; }
    .nav-links {
        top: 0;
        background: rgba(7, 19, 31, .97);
        border-left-color: var(--border-color);
        padding-top: 90px;
    }
    [data-theme="light"] .nav-links { background: rgba(242, 250, 251, .98); }
    .hero { padding: 106px 20px 58px; }
    .hero-content { gap: 48px; }
    .hero-title { font-size: clamp(2.35rem, 11vw, 3.6rem); }
    .hero-image-frame { max-width: 390px; }
    .section-header { margin-bottom: 34px; }
}

@media (max-width: 480px) {
    .nav-logo { font-size: .76rem; }
    .hero-title { font-size: 2.55rem; }
    .hero-badge { line-height: 1.45; }
    .stat { flex: 1 1 92px; min-width: 0; }
    .hero-image-frame { border-radius: 10px 40px 10px 40px; }
    .hero-image { border-radius: 6px 32px 6px 32px; }
}

/* ===================================================================
   KONOHA LEAF THEME — forest palette with quiet falling leaves
   =================================================================== */
:root {
    --bg-ocean: #07140d;
    --bg-deep: #0b2014;
    --bg-card: rgba(10, 34, 19, 0.88);
    --bg-card-hover: rgba(14, 46, 25, 0.96);

    --text-primary: #effaf1;
    --text-secondary: #bfd5c4;
    --text-muted: #7e9e86;

    --gold: #6ee7a0;
    --gold-light: #b7f7cd;
    --gold-dark: #2fbf6a;
    --crimson: #a3e635;
    --crimson-light: #bef264;
    --crimson-dark: #65a30d;

    --ocean-blue: #4ade80;
    --ocean-light: #86efac;
    --ocean-deep: #14532d;
    --sky-blue: #bbf7d0;

    --accent-gradient: linear-gradient(120deg, #4ade80 0%, #86efac 52%, #bef264 100%);
    --ocean-gradient: linear-gradient(135deg, #166534, #4d7c0f);
    --treasure-gradient: linear-gradient(110deg, #4ade80, #86efac 52%, #bef264);
    --fire-gradient: linear-gradient(135deg, #15803d, #4ade80, #a3e635);
    --night-ocean: linear-gradient(145deg, #050f09 0%, #0a2012 48%, #07140d 100%);
    --straw-hat-gradient: linear-gradient(110deg, #4ade80 0%, #86efac 52%, #bef264 100%);

    --border-color: rgba(74, 222, 128, 0.17);
    --border-hover: rgba(110, 231, 160, 0.54);
    --glow-gold: rgba(74, 222, 128, 0.17);
    --glow-red: rgba(163, 230, 53, 0.17);

    --code-bg: #061109;
    --card-gradient-from: rgba(8, 29, 16, 0.95);
    --card-gradient-to: rgba(11, 39, 21, 0.89);
    --card-hover-from: rgba(12, 43, 23, 0.98);
    --card-hover-to: rgba(17, 52, 28, 0.95);
    --nav-bg: rgba(6, 22, 12, 0.84);
    --section-bg-a: rgba(11, 42, 22, 0.56);
    --section-bg-b: rgba(25, 61, 31, 0.31);
    --section-bg-c: rgba(6, 22, 12, 0.52);
    --footer-bg: rgba(4, 17, 9, 0.93);
}

[data-theme="light"] {
    --bg-ocean: #f1f8f0;
    --bg-deep: #dfeddf;
    --bg-card: rgba(253, 255, 251, 0.90);
    --bg-card-hover: rgba(255, 255, 253, 0.98);
    --text-primary: #15341f;
    --text-secondary: #3e6249;
    --text-muted: #718d78;
    --gold: #1f8249;
    --gold-light: #279c58;
    --gold-dark: #17663a;
    --crimson: #608f1c;
    --crimson-light: #78a929;
    --crimson-dark: #496f14;
    --border-color: rgba(31, 130, 73, 0.20);
    --border-hover: rgba(31, 130, 73, 0.49);
    --glow-gold: rgba(31, 130, 73, 0.12);
    --glow-red: rgba(96, 143, 28, 0.12);
    --card-gradient-from: rgba(255, 255, 253, 0.95);
    --card-gradient-to: rgba(235, 247, 234, 0.93);
    --card-hover-from: rgba(255, 255, 253, 0.99);
    --card-hover-to: rgba(229, 244, 228, 0.98);
    --nav-bg: rgba(247, 252, 245, 0.88);
    --section-bg-a: rgba(216, 238, 215, 0.50);
    --section-bg-b: rgba(232, 241, 209, 0.40);
    --section-bg-c: rgba(240, 248, 239, 0.58);
    --footer-bg: rgba(226, 240, 224, 0.95);
    --night-ocean: linear-gradient(145deg, #fbfdf8 0%, #eaf5e8 50%, #f2f7e9 100%);
    --accent-gradient: linear-gradient(120deg, #248a4f, #48ad62 52%, #78a929);
    --treasure-gradient: linear-gradient(110deg, #1f8249, #48ad62 52%, #78a929);
    --straw-hat-gradient: linear-gradient(110deg, #1f8249, #48ad62 52%, #78a929);
}

body {
    background-image:
        radial-gradient(circle at 12% 12%, rgba(74, 222, 128, 0.10), transparent 28%),
        radial-gradient(circle at 88% 28%, rgba(163, 230, 53, 0.075), transparent 32%),
        linear-gradient(rgba(134, 239, 172, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(134, 239, 172, 0.022) 1px, transparent 1px),
        var(--night-ocean);
}

body::before {
    content: '';
    background: repeating-radial-gradient(circle at center, transparent 0 30px, rgba(74, 222, 128, .07) 31px 32px);
}

.particles { opacity: 1; }
.falling-leaf {
    --leaf-size: 10px;
    --leaf-color: #6ee7a0;
    --leaf-opacity: .34;
    --leaf-drift: 60px;
    --leaf-sway: -24px;
    --leaf-tilt: 18deg;
    position: absolute;
    top: -12vh;
    width: var(--leaf-size);
    height: calc(var(--leaf-size) * .58);
    border-radius: 100% 0 100% 0;
    background: linear-gradient(145deg, color-mix(in srgb, var(--leaf-color) 72%, white), var(--leaf-color));
    opacity: var(--leaf-opacity);
    transform-origin: 80% 80%;
    box-shadow: 0 0 8px color-mix(in srgb, var(--leaf-color) 18%, transparent);
    animation: leafFall linear infinite;
    will-change: transform;
}
.falling-leaf::after {
    content: '';
    position: absolute;
    right: -24%;
    bottom: -16%;
    width: 52%;
    height: 1px;
    background: currentColor;
    color: var(--leaf-color);
    transform: rotate(38deg);
    transform-origin: left center;
    opacity: .75;
}

@keyframes leafFall {
    0%   { transform: translate3d(0, -12vh, 0) rotate(var(--leaf-tilt)); }
    24%  { transform: translate3d(var(--leaf-sway), 22vh, 0) rotate(calc(var(--leaf-tilt) + 135deg)); }
    52%  { transform: translate3d(var(--leaf-drift), 54vh, 0) rotate(calc(var(--leaf-tilt) + 285deg)); }
    76%  { transform: translate3d(var(--leaf-sway), 82vh, 0) rotate(calc(var(--leaf-tilt) + 430deg)); }
    100% { transform: translate3d(var(--leaf-drift), 114vh, 0) rotate(calc(var(--leaf-tilt) + 620deg)); }
}

.nav-logo-img,
.footer-logo-img { filter: drop-shadow(0 0 9px rgba(74, 222, 128, .34)); }
.nav-link:hover { background: rgba(74, 222, 128, .075); }
.nav-link.active,
.btn-primary { color: #06130a; }
.hero::before {
    background:
        radial-gradient(ellipse 52% 68% at 23% 45%, rgba(74, 222, 128, .105), transparent 70%),
        radial-gradient(ellipse 45% 55% at 76% 42%, rgba(163, 230, 53, .075), transparent 72%);
}
.hero::after {
    background-image: linear-gradient(90deg, transparent 49.8%, rgba(134, 239, 172, .055) 50%, transparent 50.2%);
}
.hero-badge { background: rgba(74, 222, 128, .055); }
.btn-primary { box-shadow: 0 10px 30px rgba(74, 222, 128, .17); }
.btn-primary:hover { box-shadow: 0 14px 36px rgba(74, 222, 128, .25); }
.btn-secondary { background: rgba(7, 31, 16, .38); }
.btn-secondary:hover { background: rgba(74, 222, 128, .085); }
.stat { background: rgba(7, 31, 16, .50); }
.hero-image-frame {
    background: linear-gradient(145deg, rgba(74, 222, 128, .085), rgba(163, 230, 53, .075));
}
.hero-image-frame::before {
    border-left-color: rgba(74, 222, 128, .44);
    border-top-color: rgba(163, 230, 53, .34);
}
.hero-image-glow {
    background: radial-gradient(circle, rgba(74, 222, 128, .15), rgba(163, 230, 53, .075) 48%, transparent 72%);
}
.theme-toggle { background: rgba(7, 31, 16, .90); }
.about-icon,
.skill-tag,
.contact-icon { background: rgba(74, 222, 128, .055); }
.preloader {
    background:
        linear-gradient(rgba(134, 239, 172, .032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(134, 239, 172, .032) 1px, transparent 1px),
        var(--night-ocean);
    background-size: 44px 44px, 44px 44px, auto;
}
.preloader-logo { filter: drop-shadow(0 0 18px rgba(74, 222, 128, .32)); }
.preloader-bar { background: rgba(134, 239, 172, .10); }
.lightning-overlay { background: radial-gradient(ellipse at 50% 30%, rgba(74, 222, 128, .055), transparent 70%); }

@media (max-width: 768px) {
    .nav-links { background: rgba(6, 24, 12, .98); }
    [data-theme="light"] .nav-links { background: rgba(244, 251, 242, .99); }
}

@media (prefers-reduced-motion: reduce) {
    .falling-leaf { display: none; }
}

/* ===================================================================
   SKY THEME — the toggle trades the forest for pale clouds and snow
   =================================================================== */
html { overflow-x: clip; }

[data-theme="light"] {
    --bg-ocean: #e7f5fb;
    --bg-deep: #d5ebf5;
    --bg-card: rgba(255, 255, 255, 0.58);
    --bg-card-hover: rgba(255, 255, 255, 0.76);
    --text-primary: #183448;
    --text-secondary: #486a7e;
    --text-muted: #7794a4;

    --gold: #4b8eb2;
    --gold-light: #70acd0;
    --gold-dark: #347697;
    --crimson: #91bdd5;
    --crimson-light: #b5d8e9;
    --crimson-dark: #699eb9;

    --ocean-blue: #73b7d8;
    --ocean-light: #b9e2f3;
    --ocean-deep: #4b8baa;
    --sky-blue: #dff5ff;

    --accent-gradient: linear-gradient(120deg, #72b7d6 0%, #a8d8eb 52%, #d6eef8 100%);
    --ocean-gradient: linear-gradient(135deg, #72abc7, #b8deed);
    --treasure-gradient: linear-gradient(110deg, #4b8eb2, #84bfd9 52%, #c6e6f2);
    --fire-gradient: linear-gradient(135deg, #4f8eae, #8cc6df, #d8f1fa);
    --night-ocean: linear-gradient(180deg, #dceff9 0%, #edf8fc 48%, #f9fcfd 100%);
    --straw-hat-gradient: linear-gradient(110deg, #4384a5, #78b7d3 52%, #a8d5e8);

    --border-color: rgba(75, 142, 178, 0.15);
    --border-hover: rgba(75, 142, 178, 0.34);
    --glow-gold: rgba(102, 178, 214, 0.12);
    --glow-red: rgba(180, 220, 238, 0.15);

    --code-bg: #edf7fb;
    --card-gradient-from: rgba(255, 255, 255, 0.68);
    --card-gradient-to: rgba(236, 247, 252, 0.54);
    --card-hover-from: rgba(255, 255, 255, 0.82);
    --card-hover-to: rgba(239, 249, 253, 0.72);
    --nav-bg: rgba(255, 255, 255, 0.55);
    --section-bg-a: rgba(228, 244, 251, 0.38);
    --section-bg-b: rgba(247, 252, 254, 0.46);
    --section-bg-c: rgba(217, 238, 247, 0.26);
    --footer-bg: rgba(236, 247, 251, 0.70);
    color-scheme: light;
}

[data-theme="light"] body {
    background-color: #dceff8;
    background-image:
        radial-gradient(circle at 84% 7%, rgba(255, 255, 255, .70) 0 5%, transparent 20%),
        linear-gradient(180deg, #d7edf8 0%, #eaf6fb 48%, #f7fbfd 100%);
    background-size: auto;
    background-attachment: fixed;
}

[data-theme="light"] body::before {
    content: '';
    top: -2vh;
    left: -12vw;
    right: auto;
    width: 124vw;
    height: 70vh;
    transform: translate3d(calc(-1.5% + var(--cloud-near-x, 0px)), var(--cloud-near-y, 0px), 0) scale(var(--cloud-near-scale, 1));
    transform-origin: center top;
    opacity: .86;
    border-radius: 0;
    background:
        radial-gradient(ellipse 13% 18% at 7% 31%, rgba(255, 255, 255, .95) 0 50%, transparent 67%),
        radial-gradient(ellipse 18% 15% at 18% 35%, rgba(255, 255, 255, .90) 0 52%, transparent 68%),
        radial-gradient(ellipse 12% 20% at 29% 29%, rgba(255, 255, 255, .91) 0 49%, transparent 66%),
        radial-gradient(ellipse 26% 10% at 18% 43%, rgba(126, 180, 205, .20) 0 47%, transparent 65%),
        radial-gradient(ellipse 12% 17% at 64% 18%, rgba(255, 255, 255, .91) 0 50%, transparent 67%),
        radial-gradient(ellipse 18% 14% at 76% 21%, rgba(255, 255, 255, .88) 0 52%, transparent 68%),
        radial-gradient(ellipse 11% 18% at 87% 16%, rgba(255, 255, 255, .92) 0 49%, transparent 66%),
        radial-gradient(ellipse 26% 9% at 76% 29%, rgba(126, 180, 205, .18) 0 47%, transparent 65%);
    filter: blur(1.5px) drop-shadow(0 12px 20px rgba(80, 139, 168, .10));
    mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0 72%, transparent 100%);
    animation: none;
    will-change: transform;
}

/* The same lightweight nodes become snow crystals when sky mode is active. */
[data-theme="light"] .falling-leaf {
    width: var(--leaf-size);
    height: var(--leaf-size);
    border-radius: 50%;
    background:
        linear-gradient(90deg, transparent 45%, rgba(89, 151, 183, .82) 46% 54%, transparent 55%),
        linear-gradient(30deg, transparent 45%, rgba(89, 151, 183, .82) 46% 54%, transparent 55%),
        linear-gradient(-30deg, transparent 45%, rgba(89, 151, 183, .82) 46% 54%, transparent 55%);
    opacity: var(--snow-opacity, .16);
    box-shadow: 0 0 9px rgba(255, 255, 255, .48);
    transform-origin: center;
    animation-name: snowFall;
}

[data-theme="light"] .falling-leaf::after {
    top: 36%;
    left: 36%;
    right: auto;
    bottom: auto;
    width: 28%;
    height: 28%;
    border-radius: 50%;
    background: rgba(255, 255, 255, .95);
    color: transparent;
    transform: none;
    opacity: .82;
}

@keyframes snowFall {
    0%   { transform: translate3d(0, -12vh, 0) rotate(0deg); }
    28%  { transform: translate3d(var(--leaf-sway), 24vh, 0) rotate(70deg); }
    56%  { transform: translate3d(var(--leaf-drift), 58vh, 0) rotate(145deg); }
    78%  { transform: translate3d(var(--leaf-sway), 84vh, 0) rotate(210deg); }
    100% { transform: translate3d(var(--leaf-drift), 114vh, 0) rotate(280deg); }
}

[data-theme="light"] .vignette-overlay {
    background: radial-gradient(ellipse 125% 115% at 50% 38%, transparent 72%, rgba(108, 164, 193, .055) 100%);
}
[data-theme="light"] .grain-overlay {
    display: none;
}
[data-theme="light"] .lightning-overlay {
    inset: -8%;
    background:
        radial-gradient(ellipse 25% 12% at 19% 20%, rgba(255, 255, 255, .52) 0 40%, rgba(131, 183, 207, .12) 58%, transparent 72%),
        radial-gradient(ellipse 29% 13% at 79% 32%, rgba(255, 255, 255, .46) 0 40%, rgba(131, 183, 207, .10) 58%, transparent 73%);
    animation: none;
    transform: translate3d(var(--cloud-far-x, 0px), var(--cloud-far-y, 0px), 0) scale(var(--cloud-far-scale, 1));
    transform-origin: center top;
    will-change: transform;
}
[data-theme="light"] .nav-container {
    box-shadow: 0 16px 46px rgba(91, 145, 174, .10);
}
[data-theme="light"] .nav-link:hover { background: rgba(104, 178, 213, .09); }
[data-theme="light"] .hero::before {
    background:
        radial-gradient(ellipse 52% 68% at 23% 45%, rgba(255, 255, 255, .34), transparent 70%),
        radial-gradient(ellipse 45% 55% at 76% 42%, rgba(139, 199, 225, .10), transparent 72%);
}
[data-theme="light"] .hero::after {
    background-image: linear-gradient(90deg, transparent 49.8%, rgba(109, 178, 210, .055) 50%, transparent 50.2%);
}
[data-theme="light"] .hero-badge,
[data-theme="light"] .about-icon,
[data-theme="light"] .skill-tag,
[data-theme="light"] .contact-icon { background: rgba(255, 255, 255, .42); }
[data-theme="light"] .btn-primary {
    color: #17374a;
    box-shadow: 0 10px 28px rgba(91, 158, 190, .16);
}
[data-theme="light"] .btn-secondary,
[data-theme="light"] .stat { background: rgba(255, 255, 255, .36); }
[data-theme="light"] .btn-secondary:hover { background: rgba(255, 255, 255, .58); }
[data-theme="light"] .hero-image-frame {
    background: linear-gradient(145deg, rgba(255, 255, 255, .34), rgba(155, 208, 230, .14));
}
[data-theme="light"] .hero-image-frame::before {
    border-left-color: rgba(94, 162, 194, .28);
    border-top-color: rgba(166, 211, 231, .35);
}
[data-theme="light"] .hero-image-glow {
    background: radial-gradient(circle, rgba(255, 255, 255, .44), rgba(143, 198, 222, .12) 48%, transparent 72%);
}
[data-theme="light"] .theme-toggle {
    background: rgba(255, 255, 255, .58);
    border-color: rgba(75, 142, 178, .22);
    color: #477f9d;
    box-shadow: 0 12px 32px rgba(75, 129, 158, .12);
}
[data-theme="light"] .preloader {
    background:
        radial-gradient(ellipse 36% 15% at 18% 18%, rgba(255, 255, 255, .55), transparent 72%),
        radial-gradient(ellipse 30% 13% at 82% 30%, rgba(255, 255, 255, .40), transparent 74%),
        var(--night-ocean);
}
[data-theme="light"] .preloader-bar { background: rgba(104, 178, 213, .11); }

@media (max-width: 768px) {
    [data-theme="light"] .nav-links { background: rgba(242, 249, 252, .96); }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="light"] body::before,
    [data-theme="light"] .lightning-overlay { transform: none; }
}