@import "./styles.css";

@font-face {
    font-family: 'JetBrainsMono';
    src: url('../assets/font/JetBrainsMonoNerdFontMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LXGWWenKaiMono';
    src: url('../assets/font/LXGWWenKaiMono-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

body,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body a,
body span,
body li,
body td,
body th,
body input,
body button,
body textarea,
body select,
body .navbar-brand,
body .nav-link,
body .main-body,
body .main-body h1,
body .main-body h2,
body .main-body h3,
body .main-body h4,
body .home-landing-kicker,
body .home-primary-link,
body .theme-toggle-btn {
    font-family: 'JetBrainsMono', 'LXGWWenKaiMono', monospace !important;
}

body code,
body pre,
body pre code,
body .main-body code,
body .main-body pre code,
body .code-copy-btn {
    font-family: 'JetBrainsMono', 'LXGWWenKaiMono', monospace !important;
}

:root {
    --accent-rgb: 247, 142, 98;
    --accent-deep-rgb: 242, 106, 66;
    --h-title-color: #F78E62;
    --accent-light: rgba(var(--accent-rgb), 0.16);
    --accent-gradient: linear-gradient(135deg, #F78E62 0%, #F26A42 100%);
    --shadow-sm: 0 2px 8px rgba(var(--accent-rgb), 0.12);
    --shadow-md: 0 4px 20px rgba(var(--accent-rgb), 0.18);
    --shadow-lg: 0 8px 40px rgba(var(--accent-rgb), 0.22);
    --radius: 12px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Navbar ── */
.header {
    border-bottom: none;
    z-index: 10000;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    background: rgba(255, 255, 255, 0.82) !important;
    transition: box-shadow var(--transition);
}

.header.shadow-sm {
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.06) !important;
}

.header .navbar-brand {
    letter-spacing: 0.02em;
    color: var(--h-title-color) !important;
}

.navbar-audio-visualizer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 1.65rem;
    margin-left: 0.45rem;
    margin-right: auto;
    padding: 0.2rem 0.35rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.18);
    overflow: hidden;
}

.navbar-audio-visualizer-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.header .nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #374151 !important;
    position: relative;
    padding-bottom: 0.5rem;
    transition: color var(--transition);
}

.header .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-gradient);
    border-radius: 1px;
    transition: width var(--transition), left var(--transition);
}

.header .nav-link:hover,
.header .nav-link.active {
    color: var(--h-title-color) !important;
}

.header .nav-link:hover::after,
.header .nav-link.active::after {
    width: 100%;
    left: 0;
}

/* ── Hero / Top Section ── */
.top-section {
    position: relative;
    padding: 10rem 0;
    background-position: center;
    background-size: cover;
    height: 26rem;
}

.top-section h2 {
    font-weight: 400;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
    animation: heroTextIn 0.8s ease-out 0.2s both;
}

@keyframes heroTextIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.top-section .top-section-content {
    position: relative;
    z-index: 1;
}

.top-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.45) 0%, rgba(17, 24, 39, 0.55) 100%);
}

/* ── Home Landing ── */
.home-landing-page {
    min-height: 100vh;
    background: #0f172a;
}

.home-landing-main {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 15% 20%, rgba(var(--accent-rgb), 0.26) 0%, rgba(var(--accent-rgb), 0) 32%),
        linear-gradient(125deg, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0.78) 100%),
        url('../assets/img/background.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.about-page {
    min-height: 100vh;
    background: #0f172a;
}

.about-main {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 12% 16%, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0) 28%),
        linear-gradient(160deg, rgba(15, 23, 42, 0.16) 0%, rgba(15, 23, 42, 0.74) 100%),
        url('../assets/img/background.jpg') center center / cover no-repeat;
    overflow: hidden;
}

.about-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0.62) 100%);
}

.home-landing-main::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.16) 0%, rgba(15, 23, 42, 0.56) 100%);
}

.home-landing-main::after {
    content: "";
    position: absolute;
    right: -16vw;
    bottom: -18vw;
    width: min(44rem, 52vw);
    height: min(44rem, 52vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22) 0%, rgba(var(--accent-rgb), 0) 68%);
    filter: blur(10px);
}

.home-landing-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 7rem;
    padding-bottom: 3rem;
}

.home-landing-panel {
    width: min(100%, 62rem);
    text-align: center;
    padding: 2.25rem 2rem;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.home-landing-kicker {
    margin-bottom: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: rgba(255, 255, 255, 0.76);
}

.home-landing-portrait {
    width: min(12rem, 42vw);
    margin: 0 auto 1.35rem;
    padding: 0.45rem;
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.35), rgba(var(--accent-rgb), 0.3), rgba(255, 255, 255, 0.15), rgba(var(--accent-rgb), 0.28));
    background-size: 300% 300%;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.24);
}

.home-landing-portrait img {
    display: block;
    width: 100%;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
}

.home-typing-wrap {
    width: min(100%, 56rem);
    margin: 0 auto;
}

.home-typing-svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 28px rgba(15, 23, 42, 0.32));
}

.home-landing-note {
    max-width: 32rem;
    margin: 1.4rem auto 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 1rem;
    line-height: 1.8;
}

.home-landing-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 1.75rem;
}

.home-primary-link,
.home-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-width: 11rem;
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}

.home-primary-link {
    background: rgba(255, 255, 255, 0.92);
    color: #1e293b;
}

.home-secondary-link {
    background: rgba(255, 255, 255, 0.12);
    color: #fff7f2;
    border: 1px solid rgba(255, 255, 255, 0.26);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.home-primary-link:hover,
.home-secondary-link:hover {
    background: #fff;
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.26);
}

.home-secondary-link:hover {
    border-color: rgba(255, 255, 255, 0.36);
}

.home-landing-footer {
    position: relative;
    z-index: 1;
    padding: 0 0 2rem;
    text-align: center;
}

.home-landing-footer .text-white-50 {
    color: rgba(255, 255, 255, 0.72) !important;
}

.home-landing-footer .text-white-50 a {
    color: rgba(255, 255, 255, 0.8);
}

.home-landing-footer .text-white-50 a:hover {
    color: #fff;
}

.home-bio-section {
    position: relative;
    z-index: 1;
    padding-top: 0;
    padding-bottom: 3.5rem;
}

.home-bio-grid {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.home-bio-avatar {
    position: sticky;
    top: 6.5rem;
}

.home-bio-avatar img {
    display: block;
    width: 100%;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.28);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.home-bio-card {
    padding: 1.8rem 2rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.home-bio-card header h2 {
    margin-bottom: 1.25rem;
}

.home-bio-card .main-body {
    font-size: 1.02rem;
    line-height: 1.95;
}

.home-bio-card .main-body p:first-child {
    margin-bottom: 1rem;
}

.home-bio-card .main-body h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.55rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--h-title-color);
}

.home-bio-card .main-body ul,
.home-bio-card .main-body ol {
    padding-left: 1.25rem;
}

.home-bio-card .main-body img {
    max-width: 100%;
}

.about-bio-section {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    padding-top: 7rem;
}

.about-page-header {
    margin-bottom: 1.75rem;
}

.about-page-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    color: #fff7f2;
    text-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
}

/* ── Avatar ── */
#avatar {
    position: relative;
    height: 0;
    top: min(-65px, max(-100px, calc(-1*100vw/12)));
    max-width: 55em;
    margin: 0 1.5rem 0 0;
    float: right;
    z-index: 9000;
}

#avatar img {
    height: max(130px, min(200px, calc(100vw/6)));
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition), box-shadow var(--transition);
    object-fit: cover;
}

#avatar img:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 48px rgba(var(--accent-rgb), 0.24);
}

@media screen and (max-width: 991px) {
    #avatar {
        margin: 0;
    }
}

/* ── Blog Entry Button ── */
.blog-entry-card {
    position: absolute;
    top: 8rem;
    right: 2rem;
    z-index: 1000;
}

.blog-entry-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.6rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    text-decoration: none;
    border-radius: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 500;
    font-size: 0.95rem;
    transition: all var(--transition);
    animation: heroTextIn 0.6s ease-out 0.5s both;
}

.blog-entry-link:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.blog-entry-link i {
    font-size: 1.1rem;
}

@media screen and (max-width: 767px) {
    .blog-entry-card {
        top: auto;
        bottom: 1rem;
        right: 1rem;
    }
}

/* ── Sections ── */
.bg-bottom {
    background: var(--accent-gradient);
}

section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

section header h2 {
    font-family: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--h-title-color);
    font-size: 2rem;
    font-weight: 600;
    line-height: 3.5rem;
    position: relative;
    display: inline-block;
    padding-bottom: 0.5rem;
}

section header h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3rem;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: 2px;
}

section .main-body {
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 2.2rem;
    color: #374151;
}

section .main-body a {
    color: var(--h-title-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--transition);
}

section .main-body a:hover {
    border-bottom-color: var(--h-title-color);
}

.bg-gradient-primary-to-secondary-light {
    background: #fff !important;
}

.bg-gradient-primary-to-secondary-gray {
    background: #f8f9fc !important;
}

/* ── Footer ── */
footer.bg-bottom {
    padding: 2.5rem 0;
}

footer .text-white-50 a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--transition);
}

footer .text-white-50 a:hover {
    color: #fff;
}

/* ── Code Blocks (main page) ── */
.main-body pre {
    background: #1e1e2e;
    border-radius: var(--radius);
    padding: 1.2rem 1.4rem;
    overflow-x: auto;
    margin: 1.5rem 0;
    border: 1px solid #313244;
}

.main-body code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.main-body :not(pre)>code {
    background: var(--accent-light);
    color: var(--h-title-color);
    padding: 0.15em 0.45em;
    border-radius: 6px;
    font-size: 0.85em;
}

.main-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 0.85rem;
    line-height: 1.7;
}

/* ── Code Copy Button ── */
.code-block-wrapper {
    position: relative;
    margin: 1.5rem 0;
}

.code-block-wrapper pre {
    margin: 0;
}

.code-copy-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #888;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    font-family: inherit;
    transition: all var(--transition);
    z-index: 10;
}

.code-copy-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ccc;
}

.code-copy-btn.copied {
    background: rgba(34, 197, 94, 0.6);
    border-color: rgba(34, 197, 94, 0.7);
    color: #fff;
}

/* ── Theme Toggle Button ── */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 1rem;
    transition: all var(--transition);
    margin-left: 0.5rem;
}

.theme-toggle-btn:hover {
    border-color: var(--h-title-color);
    color: var(--h-title-color);
    background: rgba(var(--accent-rgb), 0.08);
}

/* ── Dark Theme ── */
[data-theme="dark"] {
    --h-title-color: #F78E62;
    --accent-light: rgba(var(--accent-rgb), 0.18);
    --accent-gradient: linear-gradient(135deg, #F78E62 0%, #F26A42 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

[data-theme="dark"] body {
    background: #111827;
    color: #e5e7eb;
}

[data-theme="dark"] .header {
    background: rgba(17, 24, 39, 0.85) !important;
}

[data-theme="dark"] .header.shadow-sm {
    box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .header .nav-link {
    color: #d1d5db !important;
}

[data-theme="dark"] .navbar-audio-visualizer {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.28);
}

[data-theme="dark"] .header .nav-link:hover,
[data-theme="dark"] .header .nav-link.active {
    color: var(--h-title-color) !important;
}

[data-theme="dark"] .header .navbar-toggler {
    color: #d1d5db;
    border-color: #374151;
}

[data-theme="dark"] .home-landing-panel {
    background: rgba(15, 23, 42, 0.38);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .home-landing-portrait {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(var(--accent-rgb), 0.25), rgba(255, 255, 255, 0.08), rgba(var(--accent-rgb), 0.22));
    background-size: 300% 300%;
}

[data-theme="dark"] .home-bio-card {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .home-bio-avatar img {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .home-primary-link {
    background: rgba(var(--accent-rgb), 0.92);
    color: #fff7f2;
}

[data-theme="dark"] .home-secondary-link {
    background: rgba(255, 255, 255, 0.08);
    color: #ffe5d8;
    border-color: rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .home-primary-link:hover {
    background: #F26A42;
    color: #fff;
}

[data-theme="dark"] .home-secondary-link:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff7f2;
}

[data-theme="dark"] .about-page-title {
    color: #fff7f2;
}

[data-theme="dark"] .theme-toggle-btn {
    border-color: #4b5563;
    color: #fbbf24;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    border-color: #fbbf24;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

[data-theme="dark"] #avatar img {
    border-color: #1f2937;
}

[data-theme="dark"] .bg-gradient-primary-to-secondary-light {
    background: #111827 !important;
}

[data-theme="dark"] .bg-gradient-primary-to-secondary-gray {
    background: #0f172a !important;
}

[data-theme="dark"] section .main-body {
    color: #d1d5db;
}

[data-theme="dark"] section .main-body a {
    color: var(--h-title-color);
}

[data-theme="dark"] .main-body :not(pre)>code {
    background: var(--accent-light);
    color: var(--h-title-color);
}

[data-theme="dark"] .main-body pre {
    background: #0d1117;
    border-color: #21262d;
}

[data-theme="dark"] footer.bg-bottom {
    background: linear-gradient(135deg, #9a4d30 0%, #F26A42 100%);
}

[data-theme="dark"] .scroll-progress {
    background: linear-gradient(90deg, #F78E62 0%, #F26A42 100%);
}

[data-theme="dark"] .music-player-shell {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.8);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .music-player-tab {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.88);
    color: #ffd8c6;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .music-player-count,
[data-theme="dark"] .music-player-artist,
[data-theme="dark"] .music-player-time {
    color: #94a3b8;
}

[data-theme="dark"] .music-player-title {
    color: #f8fafc;
}

/* ── Scroll Progress Bar ── */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--accent-gradient);
    z-index: 99999;
    transition: width 0.1s linear;
}

/* ── Music Player ── */
.music-player {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 9800;
    width: min(22rem, calc(100vw - 2rem));
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    overflow: visible;
}

.music-player-tab {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 3.35rem;
    min-height: 5.6rem;
    padding: 0.65rem 0.35rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    color: var(--h-title-color);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.music-player-tab span {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.music-player-tab i {
    font-size: 1rem;
}

.music-player-tab:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.2);
}

.music-player-shell {
    flex: 1 1 auto;
    padding: 0.95rem 1rem 0.9rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

.music-player-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.music-player-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--h-title-color);
}

.music-player-count {
    font-size: 0.76rem;
    color: #64748b;
}

.music-player-meta {
    min-width: 0;
}

.music-player-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-player-artist {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music-player-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.music-player-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition);
}

.music-player-btn:hover {
    transform: translateY(-1px);
}

.music-player-btn-secondary {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--h-title-color);
}

.music-player-btn-secondary:hover {
    background: rgba(var(--accent-rgb), 0.18);
}

.music-player-btn-primary {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 999px;
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.28);
}

.music-player-btn-primary:hover {
    box-shadow: 0 14px 32px rgba(var(--accent-rgb), 0.34);
}

.music-player-btn i {
    font-size: 1rem;
    line-height: 1;
}

.music-player-btn-primary i {
    font-size: 1.25rem;
}

.music-player-progress {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.music-player-time {
    font-size: 0.72rem;
    color: #64748b;
}

.music-player-slider {
    width: 100%;
    height: 0.35rem;
    accent-color: var(--h-title-color);
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .music-player-shell {
        transform: translateX(calc(-100% - 0.55rem));
        opacity: 0;
        pointer-events: none;
        transition: transform var(--transition), opacity var(--transition);
    }

    .music-player:hover .music-player-shell,
    .music-player:focus-within .music-player-shell {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
    }

    .music-player:hover .music-player-tab,
    .music-player:focus-within .music-player-tab {
        transform: translateY(-1px);
    }
}

/* ── Navbar Compact on Scroll ── */
.header.navbar-compact {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

.header .container {
    transition: padding var(--transition);
}

.header.navbar-compact .navbar-brand {
    font-size: 0.95rem;
}

/* ── Hero Parallax ── */
.top-section,
.blog-top-section {
    background-attachment: fixed;
    will-change: background-position;
    background-position: center calc(50% + var(--parallax-y, 0px));
}

@media (max-width: 768px), (hover: none) {
    .top-section,
    .blog-top-section {
        background-attachment: scroll;
        background-position: center;
    }

    .navbar-audio-visualizer {
        width: 4.1rem;
        height: 1.45rem;
        margin-left: 0.35rem;
    }
}

@media (max-width: 767px) {
    .home-landing-content {
        padding-top: 6rem;
        padding-bottom: 2.5rem;
    }

    .music-player {
        left: 0.85rem;
        right: 0.85rem;
        bottom: 0.85rem;
        width: auto;
        gap: 0;
    }

    .music-player-shell {
        padding: 0.85rem 0.9rem 0.8rem;
        border-radius: 18px;
    }

    .music-player-tab {
        display: none;
    }

    .home-landing-panel {
        padding: 1.5rem 1rem;
        border-radius: 22px;
    }

    .home-landing-kicker {
        letter-spacing: 0.22em;
    }

    .home-landing-portrait {
        width: min(9rem, 46vw);
        margin-bottom: 1.1rem;
        border-radius: 24px;
    }

    .home-landing-portrait img {
        border-radius: 18px;
    }

    .home-landing-note {
        font-size: 0.95rem;
    }

    .home-primary-link,
    .home-secondary-link {
        width: 100%;
        max-width: 16rem;
    }

    .home-bio-section {
        padding-bottom: 2.5rem;
    }

    .about-bio-section {
        padding-top: 6rem;
    }

    .home-bio-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .home-bio-avatar {
        position: static;
        top: auto;
        max-width: 12rem;
        margin: 0 auto;
    }

    .home-bio-card {
        padding: 1.25rem 1rem;
        border-radius: 20px;
    }

    .about-page-title {
        font-size: 1.55rem;
    }
}

/* ── Theme Toggle Spin ── */
.theme-toggle-btn.spin {
    animation: toggleSpin 0.5s ease;
}

@keyframes toggleSpin {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

/* ── Avatar Float ── */
#avatar img {
    animation: avatarFloat 4s ease-in-out infinite;
}

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

#avatar img:hover {
    animation-play-state: paused;
    transform: scale(1.05);
}

/* ── Scroll-triggered Section Reveal ── */
section.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

/* ── Section Header Underline Slide-in ── */
section header h2.reveal-header::after {
    width: 0;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

section header h2.reveal-header.revealed::after {
    width: 3rem;
}

/* ── Footer (remove old section animation) ── */
section .container {
    /* no static animation — handled by reveal observer now */
}

/* ══════════════════════════════════════
   Visual Enhancements
   ══════════════════════════════════════ */

/* ── Custom Scrollbar ── */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.25) transparent;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.25);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.45);
}

/* ── Text Selection ── */
::selection {
    background: rgba(var(--accent-rgb), 0.25);
}

/* ── Homepage Staggered Entrance ── */
.home-landing-panel {
    animation: panelReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-landing-kicker {
    animation: fadeSlideUp 0.6s ease-out 0.2s both;
}

.home-landing-portrait {
    animation: fadeSlideUp 0.7s ease-out 0.35s both, portraitGradient 6s ease-in-out 1.5s infinite;
}

.home-landing-portrait img {
    animation: portraitFloat 6s ease-in-out 1.5s infinite;
}

.home-typing-wrap {
    animation: fadeSlideUp 0.7s ease-out 0.5s both;
}

.home-landing-actions {
    animation: fadeSlideUp 0.7s ease-out 0.65s both;
}

.home-landing-footer {
    animation: fadeSlideUp 0.6s ease-out 0.8s both;
}

@keyframes panelReveal {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes portraitGradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

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

/* ── Button Shine Effect ── */
.home-primary-link,
.home-secondary-link {
    position: relative;
    overflow: hidden;
}

.home-primary-link::before,
.home-secondary-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-25deg);
    pointer-events: none;
}

.home-primary-link:hover::before,
.home-secondary-link:hover::before {
    left: 125%;
    transition: left 0.6s ease;
}

/* ── Animated Background Orbs ── */
.home-landing-main::after {
    animation: orbFloat 8s ease-in-out infinite;
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-2vw, -3vh);
    }
    50% {
        transform: translate(-1vw, 2vh);
    }
    75% {
        transform: translate(2vw, -1vh);
    }
}

/* ── Twinkling Stars ── */
.home-landing-content::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    top: 0;
    left: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        10vw 15vh 0 1px rgba(255, 255, 255, 0.12),
        28vw 78vh 0 0.5px rgba(255, 255, 255, 0.08),
        52vw 38vh 0 1px rgba(var(--accent-rgb), 0.1),
        72vw 68vh 0 0.5px rgba(255, 255, 255, 0.06),
        88vw 22vh 0 1px rgba(var(--accent-rgb), 0.08),
        18vw 52vh 0 0.5px rgba(255, 255, 255, 0.1),
        62vw 8vh 0 1px rgba(var(--accent-rgb), 0.06),
        38vw 88vh 0 0.5px rgba(255, 255, 255, 0.08),
        92vw 48vh 0 1px rgba(var(--accent-rgb), 0.12),
        14vw 32vh 0 0.5px rgba(255, 255, 255, 0.05),
        78vw 12vh 0 1px rgba(255, 255, 255, 0.09),
        42vw 62vh 0 0.5px rgba(var(--accent-rgb), 0.06),
        6vw 42vh 0 1px rgba(255, 255, 255, 0.07),
        56vw 82vh 0 0.5px rgba(var(--accent-rgb), 0.09),
        82vw 58vh 0 1px rgba(255, 255, 255, 0.05);
    animation: starsTwinkle 5s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 0;
}

@keyframes starsTwinkle {
    0% {
        opacity: 0.4;
    }
    100% {
        opacity: 1;
    }
}

/* ── Panel Hover Glow ── */
.home-landing-panel {
    transition: box-shadow var(--transition), border-color var(--transition);
}

.home-landing-panel:hover {
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24), 0 0 60px rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.2);
}

[data-theme="dark"] .home-landing-panel:hover {
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4), 0 0 60px rgba(var(--accent-rgb), 0.1);
}

/* ── Navbar Brand Hover Glow ── */
.header .navbar-brand {
    transition: text-shadow var(--transition);
}

.header .navbar-brand:hover {
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

/* ── Navbar Compact Accent Line ── */
.header.navbar-compact {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(var(--accent-rgb), 0.12) !important;
}

[data-theme="dark"] .header.navbar-compact {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(var(--accent-rgb), 0.15) !important;
}

/* ── Music Player Enhanced Glow ── */
.music-player-btn-primary:hover {
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.35), 0 14px 32px rgba(var(--accent-rgb), 0.3);
}

/* ── About Page Entrance ── */
.about-bio-section .about-page-header {
    animation: fadeSlideUp 0.6s ease-out 0.1s both;
}

.about-bio-section .home-bio-avatar {
    animation: fadeSlideUp 0.7s ease-out 0.25s both;
}

.about-bio-section .home-bio-card {
    animation: fadeSlideUp 0.7s ease-out 0.4s both;
}

/* ── About Card Hover ── */
.home-bio-card {
    transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

.home-bio-card:hover {
    box-shadow: 0 28px 65px rgba(15, 23, 42, 0.22), 0 0 40px rgba(var(--accent-rgb), 0.06);
    transform: translateY(-2px);
}

[data-theme="dark"] .home-bio-card:hover {
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.35), 0 0 40px rgba(var(--accent-rgb), 0.08);
}

/* ── About Avatar Hover ── */
.home-bio-avatar img {
    transition: transform var(--transition), box-shadow var(--transition);
}

.home-bio-avatar img:hover {
    transform: scale(1.03);
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.32), 0 0 30px rgba(var(--accent-rgb), 0.1);
}

/* ── About Page Floating Orb ── */
.about-main::after {
    content: "";
    position: absolute;
    right: -12vw;
    bottom: -14vw;
    width: min(36rem, 44vw);
    height: min(36rem, 44vw);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14) 0%, transparent 68%);
    filter: blur(12px);
    animation: orbFloat 10s ease-in-out infinite;
    pointer-events: none;
}