:root {
    --bg:#070511;
    --panel:rgba(12,10,27,.58);
    --line:rgba(255,255,255,.11);
    --text:#f5efff;
    --muted:#aaa0c1;
    --purple:#8b5cf6;
    --pink:#f0abff;
    --cyan:#76e4ff;
    --shadow:0 24px 90px rgba(0,0,0,.45);
    --radius:24px;
    --font:'Inter',sans-serif;
    --display:'Space Grotesk',sans-serif;
}

* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
    overflow-x:hidden;
}

body {
    margin:0;
    font-family:var(--font);
    background:
        radial-gradient(
            circle at 50% 0,
            #1b0e42 0,
            #0a0716 38%,
            #05030b 100%
        );
    color:var(--text);
    overflow-x:hidden;
    cursor:none;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a {
    color:inherit;
    text-decoration:none;
}

button {
    font:inherit;
    color:inherit;
}

#space {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-4;
    pointer-events:none;
    display:block;
}

.noise {
    pointer-events:none;
    position:fixed;
    inset:0;
    z-index:20;
    opacity:.045;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
    mix-blend-mode:screen;
}

.ambient {
    position:fixed;
    width:50vw;
    height:50vw;
    border-radius:50%;
    filter:blur(110px);
    opacity:.23;
    pointer-events:none;
    z-index:-3;
}

.ambient-a {
    background:#6d28d9;
    top:10%;
    left:-15%;
}

.ambient-b {
    background:#db2777;
    right:-18%;
    top:40%;
}

.glass {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );
    border:1px solid var(--line);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        var(--shadow);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.nav {
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:min(1180px,calc(100% - 32px));
    height:70px;
    border-radius:24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    z-index:30;
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:-.02em;
}

.brand-mark {
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#a78bfa,#f0abfc);
    color:#0b0617;
    box-shadow:0 0 36px rgba(139,92,246,.45);
}

.muted {
    opacity:.45;
}

.nav-links {
    display:flex;
    gap:26px;
    color:#b9aecb;
    font-size:14px;
}

.nav-links a {
    transition:.25s;
}

.nav-links a:hover {
    color:#fff;
}

.nav-actions {
    display:flex;
    align-items:center;
    gap:8px;
}

.icon-btn,
.cta-mini {
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    padding:0 13px;
    cursor:none;
}

.icon-btn {
    width:40px;
}

.cta-mini {
    gap:8px;
    font-size:13px;
}

.section {
    position:relative;
    width:min(1180px,calc(100% - 32px));
    margin:0 auto;
}

.hero {
    min-height:100vh;
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:50px;
    align-items:center;
    padding-top:100px;
}

.hero-art {
    position:absolute;
    inset:5% -15% auto;
    height:76vh;
    overflow:visible;
    z-index:-1;
}

.moon {
    position:absolute;
    width:330px;
    height:330px;
    border-radius:50%;
    left:50%;
    top:20%;
    transform:translateX(-50%);
    background:
        radial-gradient(
            circle at 35% 30%,
            #fff 0,
            #efe9ff 12%,
            #b995ff 45%,
            #5b3aa1 78%,
            #17102b 100%
        );
    box-shadow:
        0 0 90px rgba(188,146,255,.28),
        0 0 180px rgba(139,92,246,.16);
}

.moon:before {
    content:"";
    position:absolute;
    inset:18px;
    border-radius:50%;
    background:
        radial-gradient(
            circle at 45% 40%,
            rgba(22,9,46,.1),
            transparent 55%
        );
}

.moon-halo {
    position:absolute;
    width:590px;
    height:590px;
    border:1px solid rgba(193,160,255,.1);
    border-radius:50%;
    left:50%;
    top:1%;
    transform:translateX(-50%);
    box-shadow:inset 0 0 100px rgba(125,75,255,.05);
}

.cloud {
    position:absolute;
    width:55vw;
    height:200px;
    filter:blur(16px);
    opacity:.75;
    background:
        radial-gradient(
            ellipse at 20% 70%,
            rgba(32,16,67,.95),
            transparent 55%
        ),
        radial-gradient(
            ellipse at 60% 50%,
            rgba(22,17,42,.97),
            transparent 60%
        ),
        radial-gradient(
            ellipse at 85% 75%,
            rgba(40,16,74,.9),
            transparent 48%
        );
}

.cloud-1 {
    left:-8%;
    bottom:5%;
    transform:rotate(-8deg);
}

.cloud-2 {
    right:-12%;
    bottom:3%;
    transform:rotate(7deg);
}

.cloud-3 {
    left:16%;
    bottom:-11%;
    width:70vw;
    opacity:.58;
}

.orbit {
    position:absolute;
    border:1px solid rgba(207,182,255,.16);
    border-radius:50%;
    left:50%;
    top:28%;
    transform:translate(-50%,-50%) rotate(-20deg);
    pointer-events:none;
}

.orbit-1 {
    width:720px;
    height:260px;
}

.orbit-2 {
    width:900px;
    height:370px;
    transform:translate(-50%,-50%) rotate(17deg);
}

.hero-copy {
    padding:70px 0 30px;
}

.eyebrow,
.section-kicker {
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:#a796bb;
}

.eyebrow span {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#b68cff;
    box-shadow:0 0 16px #b68cff;
    margin-right:9px;
}

.hero h1 {
    font-family:var(--display);
    font-size:clamp(48px,6vw,88px);
    line-height:.96;
    letter-spacing:-.055em;
    margin:18px 0 22px;
    max-width:760px;
}

.gradient-text {
    background:
        linear-gradient(
            90deg,
            #fff 10%,
            #d9c0ff 37%,
            #9f7cff 68%,
            #ffb7f8 100%
        );
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    text-shadow:0 0 44px rgba(179,141,255,.16);
}

.hero-desc {
    max-width:640px;
    color:#bdb2cb;
    font-size:17px;
    line-height:1.75;
    margin:0;
}

.hero-pills,
.tag-row {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:22px;
}

.hero-pills span,
.tag-row span {
    border:1px solid var(--line);
    padding:8px 12px;
    border-radius:100px;
    color:#cfc4d8;
    background:rgba(255,255,255,.035);
    font-size:12px;
}

.hero-actions {
    display:flex;
    gap:12px;
    margin-top:30px;
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:14px 18px;
    border-radius:15px;
    border:1px solid var(--line);
    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;
}

.btn.primary {
    background:linear-gradient(135deg,#9f7bff,#7c4dff);
    border-color:rgba(255,255,255,.18);
    box-shadow:0 12px 40px rgba(99,42,196,.32);
}

.btn:hover {
    transform:translateY(-3px);
    border-color:rgba(255,255,255,.25);
}

.quick-stats {
    display:flex;
    gap:38px;
    margin-top:40px;
}

.quick-stats div {
    display:flex;
    flex-direction:column;
    gap:5px;
}

.quick-stats strong {
    font-family:var(--display);
    font-size:22px;
}

.quick-stats span {
    font-size:11px;
    color:#8d829e;
}

.hero-card-wrap {
    display:flex;
    justify-content:flex-end;
}

.profile-card {
    width:min(360px,100%);
    border-radius:30px;
    padding:22px;
    position:relative;
    transform-style:preserve-3d;
    overflow:hidden;
}

.profile-card:before {
    content:"";
    position:absolute;
    inset:-1px;
    background:
        radial-gradient(
            circle at 50% 0,
            rgba(180,140,255,.25),
            transparent 38%
        );
    pointer-events:none;
}

.profile-card-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#9f96ab;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.14em;
}

.status-dot {
    display:inline-block;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#86efac;
    box-shadow:0 0 14px #4ade80;
    margin-right:5px;
}

.more {
    background:none;
    border:none;
    color:#9f96ab;
}

.avatar-shell {
    width:150px;
    height:150px;
    margin:36px auto 22px;
    position:relative;
    display:grid;
    place-items:center;
}

.avatar-ring {
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        conic-gradient(
            from 120deg,
            #f0abff,
            #8b5cf6,
            #54d2ff,
            #f0abff
        );
    filter:blur(1px);
    animation:spin 10s linear infinite;
}

.avatar-core {
    width:126px;
    height:126px;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-family:var(--display);
    font-size:56px;
    font-weight:700;
    color:#f8efff;
    background:
        radial-gradient(
            circle at 40% 30%,
            #3b2b68,
            #120b25 72%
        );
    border:5px solid #150d2b;
    box-shadow:
        inset 0 0 50px rgba(166,117,255,.18),
        0 0 50px rgba(155,102,255,.24);
}

.profile-card h2 {
    text-align:center;
    font-family:var(--display);
    font-size:30px;
    margin:0;
}

.role,
.location {
    text-align:center;
    color:#8f85a0;
    font-size:12px;
    margin:6px 0;
}

.location {
    margin-top:10px;
}

.music-card {
    position:relative;
    margin-top:20px;
    border:1px solid var(--line);
    border-radius:20px;
    padding:12px;
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) 118px !important;
    align-items:center;
    gap:10px;
    background:rgba(0,0,0,.15);
    overflow:hidden;
}

.album-orb {
    width:44px;
    height:44px;
    border-radius:14px;
    background:
        radial-gradient(
            circle at 35% 25%,
            #d9b6ff,
            #6942c7 50%,
            #120d25 100%
        );
    box-shadow:0 0 24px rgba(137,87,255,.24);
}

.track-meta {
    display:flex;
    flex-direction:column;
    gap:3px;
    min-width:0;
    overflow:hidden;
}

.track-meta strong,
.track-meta span {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.track-meta strong {
    font-size:13px;
}

.track-meta span {
    font-size:10px;
    color:#82798e;
}

.play {
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(255,255,255,.06);
    cursor:none;
}

.playlist-controls {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    width:118px;
    margin:0;
    flex-shrink:0;
}

.playlist-btn {
    position:relative;
    flex:0 0 auto;
    width:32px;
    height:32px;
    padding:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
    -webkit-tap-highlight-color:transparent;
}

.playlist-btn span {
    line-height:1;
    pointer-events:none;
}

.playlist-prev span,
.playlist-next span {
    font-size:21px;
    font-weight:300;
    transform:translateY(-1px);
}

.playlist-play {
    width:40px;
    height:40px;
    border-color:rgba(255,255,255,.3);
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.3),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #8b5cf6,
            #c084fc,
            #e8a8ff
        );
    box-shadow:
        0 0 18px rgba(139,92,246,.5),
        0 0 35px rgba(217,156,255,.18),
        inset 0 1px 0 rgba(255,255,255,.3);
}

.playlist-play span {
    font-size:13px;
    margin-left:2px;
}

.playlist-btn:hover {
    transform:translateY(-2px) scale(1.06);
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.3);
}

.playlist-play:hover {
    box-shadow:
        0 0 25px rgba(139,92,246,.7),
        0 0 45px rgba(217,156,255,.25),
        inset 0 1px 0 rgba(255,255,255,.35);
}

.playlist-btn:active {
    transform:scale(.92);
}

.playlist-info {
    grid-column:1/-1;
    min-width:0;
    width:100%;
    margin:0 !important;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.playlist-info > div:first-child {
    font-size:11px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.58);
}

.wave {
    grid-column:1/-1;
    display:flex;
    gap:4px;
    align-items:center;
    height:17px;
}

.playlist-info .wave {
    display:flex;
    grid-column:auto;
    height:20px;
    gap:3px;
}

.wave i {
    display:block;
    width:3px;
    border-radius:100px;
    background:linear-gradient(#f0abff,#7f6bff);
    height:35%;
    opacity:.7;
}

.wave i:nth-child(2) {
    height:75%;
}

.wave i:nth-child(3) {
    height:46%;
}

.wave i:nth-child(4) {
    height:90%;
}

.wave i:nth-child(5) {
    height:58%;
}

.wave i:nth-child(6) {
    height:78%;
}

.wave i:nth-child(7) {
    height:40%;
}

.wave i:nth-child(8) {
    height:65%;
}

.section-pad {
    padding:120px 0;
}

.section-head {
    max-width:720px;
    margin-bottom:50px;
}

.section-head h2 {
    font-family:var(--display);
    font-size:48px;
    letter-spacing:-.04em;
    margin:10px 0;
}

.section-head p {
    color:#9f95ad;
    line-height:1.7;
}

.about-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.story-card {
    padding:28px;
    border-radius:26px;
    min-height:290px;
}

.card-icon {
    width:40px;
    height:40px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:rgba(174,135,255,.1);
    border:1px solid rgba(174,135,255,.15);
    margin-bottom:22px;
}

.story-card h3 {
    margin:0 0 12px;
    font-family:var(--display);
    font-size:21px;
}

.story-card p {
    color:#9d93aa;
    line-height:1.75;
    font-size:14px;
}

.meter {
    margin-top:20px;
}

.meter>div {
    display:flex;
    justify-content:space-between;
    color:#a89eaf;
    font-size:11px;
}

.meter i {
    display:block;
    height:6px;
    background:rgba(255,255,255,.06);
    border-radius:100px;
    margin-top:8px;
    overflow:hidden;
}

.meter em {
    display:block;
    height:100%;
    background:linear-gradient(90deg,#7449ff,#de9dff);
    border-radius:inherit;
    box-shadow:0 0 16px rgba(151,99,255,.45);
}

.clean-list {
    list-style:none;
    padding:0;
    margin:18px 0 0;
}

.clean-list li {
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:14px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
    color:#b5acbf;
    font-size:13px;
    line-height:1.55;
}

.clean-list li:last-child {
    border-bottom:none;
}

.clean-list li span {
    color:#7b65a1;
    font-size:10px;
    margin-top:3px;
}

.skill-orbit {
    height:560px;
    position:relative;
    max-width:850px;
    margin:0 auto;
    border-radius:38px;
    background:
        radial-gradient(
            circle at center,
            rgba(132,87,235,.12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.012)
        );
    border:1px solid var(--line);
    box-shadow:inset 0 0 70px rgba(118,87,255,.07);
}

.skill-orbit:before,
.skill-orbit:after {
    content:"";
    position:absolute;
    inset:80px 140px;
    border:1px solid rgba(195,170,255,.09);
    border-radius:50%;
}

.skill-orbit:after {
    inset:140px 90px;
    transform:rotate(55deg);
}

.skill-node {
    position:absolute;
    left:var(--x);
    top:var(--y);
    transform:translate(-50%,-50%);
    width:86px;
    height:86px;
    border-radius:50%;
    border:1px solid var(--line);
    background:rgba(13,9,29,.66);
    box-shadow:0 0 28px rgba(135,90,255,.12);
    font-size:10px;
    letter-spacing:.12em;
    cursor:none;
    transition:.25s;
}

.skill-node:hover,
.skill-node.active {
    background:rgba(133,90,255,.18);
    border-color:rgba(209,185,255,.28);
    box-shadow:0 0 50px rgba(135,90,255,.24);
    transform:translate(-50%,-50%) scale(1.05);
}

.skill-core {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:250px;
    height:250px;
    border-radius:50%;
    display:grid;
    place-items:center;
    text-align:center;
    padding:30px;
}

.skill-core span {
    font-family:var(--display);
    font-size:27px;
    font-weight:700;
    letter-spacing:.02em;
}

.skill-core p {
    color:#968ca0;
    font-size:11px;
    line-height:1.5;
    max-width:150px;
}

.skill-line {
    width:130px;
    height:4px;
    border-radius:100px;
    background:rgba(255,255,255,.05);
    overflow:hidden;
}

.skill-line i {
    display:block;
    height:100%;
    width:94%;
    border-radius:inherit;
    background:linear-gradient(90deg,#7f55ff,#ebafff);
    box-shadow:0 0 16px rgba(161,111,255,.5);
}

.skill-core b {
    font-size:10px;
    color:#bdb3cc;
}

.project-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

.project-card {
    border-radius:26px;
    overflow:hidden;
    transform-style:preserve-3d;
}

.project-visual {
    height:260px;
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden;
}

.project-visual:before {
    content:"";
    position:absolute;
    inset:-40%;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(195,155,255,.4),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #0b0619,
            #201046 50%,
            #08040f
        );
    transform:rotate(15deg);
}

.project-visual:after {
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.08) 50%,
            transparent 75%
        );
    transform:translateX(-100%);
    transition:1.1s;
}

.project-card:hover .project-visual:after {
    transform:translateX(100%);
}

.project-visual span,
.project-visual strong {
    position:relative;
    z-index:1;
}

.project-visual span {
    font-size:10px;
    color:#a398b1;
}

.project-visual strong {
    font-family:var(--display);
    font-size:22px;
    letter-spacing:.1em;
}

.v2:before {
    background:
        radial-gradient(
            circle at 55% 40%,
            rgba(255,170,229,.38),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #140714,
            #3b1030 56%,
            #08040f
        );
}

.v3:before {
    background:
        radial-gradient(
            circle at 38% 55%,
            rgba(120,223,255,.32),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            #061019,
            #132347 56%,
            #05070f
        );
}

.project-body {
    padding:22px;
}

.project-body>span {
    font-size:10px;
    color:#93879f;
    text-transform:uppercase;
    letter-spacing:.13em;
}

.project-body h3 {
    font-family:var(--display);
    margin:7px 0;
    font-size:21px;
}

.project-body p {
    font-size:13px;
    color:#9c93a7;
    line-height:1.65;
    min-height:44px;
}

.text-link {
    display:inline-block;
    font-size:12px;
    margin-top:8px;
    color:#d4c2f9;
}

.links-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.social-card {
    border-radius:20px;
    padding:16px;
    display:grid;
    grid-template-columns:48px 1fr auto;
    align-items:center;
    gap:14px;
    transition:.25s;
}

.social-card:hover {
    transform:translateY(-4px);
    border-color:rgba(205,178,255,.28);
    background:rgba(255,255,255,.055);
}

.social-icon {
    width:48px;
    height:48px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:rgba(184,145,255,.09);
    border:1px solid rgba(184,145,255,.12);
    font-size:22px;
}

.social-card span:nth-child(2) {
    display:flex;
    flex-direction:column;
    gap:4px;
}

.social-card b {
    font-size:14px;
}

.social-card small {
    color:#8f859b;
    font-size:11px;
}

.social-card em {
    font-style:normal;
    color:#81768f;
}

.link-bar {
    margin-top:12px;
    border-radius:20px;
    padding:14px 16px;
    display:flex;
    align-items:center;
    gap:13px;
    color:#a79bad;
}

.link-bar strong {
    font-family:var(--display);
    font-size:14px;
    color:#ddd3ea;
}

.copy-btn {
    margin-left:auto;
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
    border-radius:11px;
    padding:9px 12px;
    cursor:none;
}

.contact-panel {
    border-radius:30px;
    padding:40px;
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:30px;
    background:
        radial-gradient(
            circle at 15% 50%,
            rgba(139,92,246,.19),
            transparent 35%
        ),
        rgba(255,255,255,.035);
}

.contact-panel h2 {
    font-family:var(--display);
    font-size:44px;
    margin:8px 0;
}

.contact-panel p {
    color:#9e94aa;
    max-width:580px;
}

.footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    color:#6e6578;
    padding-top:40px;
    padding-bottom:50px;
    font-size:12px;
}

.footer>div {
    display:flex;
    gap:14px;
    align-items:center;
}

.scroll-progress {
    position:fixed;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    width:3px;
    height:90px;
    background:rgba(255,255,255,.07);
    border-radius:10px;
    z-index:25;
}

.scroll-progress i {
    display:block;
    width:100%;
    height:0;
    border-radius:inherit;
    background:linear-gradient(#a17bff,#f3b3fa);
    box-shadow:0 0 13px rgba(186,137,255,.5);
}

.cursor-dot,
.cursor-ring,
.cursor-label {
    position:fixed;
    pointer-events:none;
    z-index:100;
    mix-blend-mode:screen;
}

.cursor-dot {
    width:6px;
    height:6px;
    background:#fff;
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 15px #fff;
}

.cursor-ring {
    width:38px;
    height:38px;
    border:1px solid rgba(213,190,255,.55);
    border-radius:50%;
    transform:translate(-50%,-50%);
    transition:
        width .2s,
        height .2s,
        border-color .2s;
}

.cursor-label {
    font-size:9px;
    letter-spacing:.12em;
    color:#fff;
    opacity:0;
    transform:translate(18px,18px);
    transition:opacity .2s;
}

.loader {
    position:fixed;
    inset:0;
    background:#05030b;
    display:grid;
    place-items:center;
    z-index:200;
}

.loader-orbit {
    width:90px;
    height:90px;
    border:1px solid rgba(209,187,255,.16);
    border-top-color:#ba94ff;
    border-radius:50%;
    animation:spin 1s linear infinite;
    box-shadow:0 0 45px rgba(140,88,255,.25);
}

.loader-text {
    position:absolute;
    font-family:var(--display);
    font-size:13px;
    color:#bfa9df;
}

.toast {
    position:fixed;
    bottom:24px;
    left:50%;
    transform:translate(-50%,20px);
    padding:11px 14px;
    border-radius:13px;
    background:#161126;
    border:1px solid var(--line);
    opacity:0;
    transition:.25s;
    z-index:60;
    font-size:12px;
}

.toast.show {
    opacity:1;
    transform:translate(-50%,0);
}

.reveal {
    opacity:0;
    transform:translateY(24px);
    transition:
        opacity .8s,
        transform .8s;
}

.reveal.visible {
    opacity:1;
    transform:none;
}

.delay-1 {
    transition-delay:.08s;
}

.delay-2 {
    transition-delay:.16s;
}

@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}

@keyframes bar {
    from {
        transform:scaleY(.35);
    }

    to {
        transform:scaleY(1.35);
    }
}

@keyframes ripple {
    to {
        width:110px;
        height:110px;
        opacity:0;
    }
}

@media(max-width:960px) {
    .nav-links {
        display:none;
    }

    .hero {
        grid-template-columns:1fr;
        padding-top:150px;
    }

    .hero-card-wrap {
        justify-content:flex-start;
    }

    .about-grid,
    .project-grid {
        grid-template-columns:1fr;
    }

    .links-grid {
        grid-template-columns:1fr;
    }

    .contact-panel {
        align-items:flex-start;
        flex-direction:column;
    }

    .section-head h2 {
        font-size:39px;
    }

    .hero h1 {
        font-size:clamp(46px,12vw,76px);
    }

    .ambient {
        filter:blur(90px);
    }
}

@media(max-width:600px) {
    body {
        cursor:auto;
    }

    .cursor-dot,
    .cursor-ring,
    .cursor-label {
        display:none;
    }

    .nav {
        top:10px;
        width:calc(100% - 18px);
        height:62px;
        border-radius:19px;
    }

    .cta-mini {
        display:none;
    }

    .hero {
        min-height:auto;
        padding-top:132px;
    }

    .hero-copy {
        padding-top:30px;
    }

    .hero-desc {
        font-size:15px;
    }

    .quick-stats {
        gap:22px;
    }

    .skill-orbit {
        height:460px;
    }

    .skill-orbit:before,
    .skill-orbit:after {
        inset:50px 60px;
    }

    .skill-core {
        width:185px;
        height:185px;
    }

    .skill-node {
        width:70px;
        height:70px;
        font-size:9px;
    }

    .moon {
        width:220px;
        height:220px;
    }

    .section-pad {
        padding:85px 0;
    }

    .footer {
        flex-direction:column;
        gap:12px;
        align-items:flex-start;
    }

    .ambient {
        filter:blur(70px);
    }

    .glass {
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
    }

    .music-card {
        grid-template-columns:44px minmax(0,1fr) 112px !important;
        gap:8px;
    }

    .music-card .playlist-controls {
        width:112px;
        gap:5px;
    }

    .music-card .playlist-btn {
        width:30px;
        height:30px;
    }

    .music-card .playlist-play {
        width:38px;
        height:38px;
    }
}

.moon {
    display:none !important;
}

.moon-halo {
    display:none !important;
}

.skill-orbit {
    position: relative;
    isolation: isolate;
}

.skill-node {
    position: absolute;
    z-index: 20;
    pointer-events: auto;
}

.skill-orbit::before,
.skill-orbit::after {
    z-index: 0;
    pointer-events: none;
}

.skill-core {
    z-index: 5;
    pointer-events: none;
}

/* =========================================
   THEME 2 — NEBULA / AURORA
   ========================================= */

:root.theme-nebula {
    --purple: #8b5cf6;
    --pink: #ec4899;
    --cyan: #22d3ee;
    --line: rgba(255,255,255,.16);
}

/* Nền */

html.theme-nebula body {
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(139,92,246,.18),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 25%,
            rgba(34,211,238,.12),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 85%,
            rgba(236,72,153,.10),
            transparent 30%
        ),
        #05030b;
}

/* Tăng chiều sâu không gian */

html.theme-nebula #space {
    filter: saturate(1.25) brightness(1.12);
}

/* Ambient */

html.theme-nebula .ambient {
    opacity: .34;
    filter: blur(100px) saturate(1.3);
}

html.theme-nebula .ambient.a {
    background: #8b5cf6;
}

html.theme-nebula .ambient.b {
    background: #22d3ee;
}

html.theme-nebula .ambient.c {
    background: #ec4899;
}

/* Navbar */

html.theme-nebula .nav {
    border-color: rgba(255,255,255,.16);
    box-shadow:
        0 0 25px rgba(139,92,246,.14),
        0 12px 45px rgba(0,0,0,.28);
}

/* Glass cards */

html.theme-nebula .glass {
    border-color: rgba(255,255,255,.14);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.025),
        0 10px 50px rgba(0,0,0,.28),
        0 0 35px rgba(139,92,246,.08);
}

/* Profile */

html.theme-nebula .profile-card {
    box-shadow:
        0 20px 70px rgba(0,0,0,.35),
        0 0 45px rgba(139,92,246,.12);
}

/* Avatar */

html.theme-nebula .avatar-ring {
    box-shadow:
        0 0 18px rgba(139,92,246,.5),
        0 0 45px rgba(236,72,153,.18);
}

/* Buttons */

html.theme-nebula button,
html.theme-nebula .btn {
    box-shadow:
        0 0 18px rgba(139,92,246,.08);
}

html.theme-nebula button:hover,
html.theme-nebula .btn:hover {
    box-shadow:
        0 0 22px rgba(139,92,246,.22),
        0 0 40px rgba(34,211,238,.08);
}

/* Skill orbit */

html.theme-nebula .skill-orbit {
    filter: saturate(1.2);
}

html.theme-nebula .skill-node {
    box-shadow:
        0 0 16px rgba(139,92,246,.14);
}

html.theme-nebula .skill-node:hover {
    box-shadow:
        0 0 24px rgba(139,92,246,.35),
        0 0 45px rgba(34,211,238,.1);
}

/* Skill core */

html.theme-nebula .skill-core {
    box-shadow:
        0 0 20px rgba(139,92,246,.25),
        0 0 60px rgba(236,72,153,.10);
}

/* Music card */

html.theme-nebula .music-card {
    box-shadow:
        0 0 30px rgba(139,92,246,.08);
}

/* Color wheel */

html.theme-nebula .color-wheel {
    box-shadow:
        0 0 25px rgba(139,92,246,.4),
        0 0 50px rgba(236,72,153,.14),
        inset 0 0 12px rgba(255,255,255,.16);
}

/* Project cards */

html.theme-nebula .project-card,
html.theme-nebula .link-card {
    box-shadow:
        0 12px 45px rgba(0,0,0,.24),
        0 0 28px rgba(139,92,246,.07);
}

html.theme-nebula .project-card:hover,
html.theme-nebula .link-card:hover {
    box-shadow:
        0 18px 60px rgba(0,0,0,.32),
        0 0 35px rgba(139,92,246,.16);
}

/* Footer */

html.theme-nebula .footer {
    border-top-color: rgba(255,255,255,.08);
}

/* Nút theme */

html.theme-nebula #themeBtn.active {
    color: #fff;
    text-shadow:
        0 0 10px rgba(139,92,246,.85),
        0 0 20px rgba(236,72,153,.45);
}

/* =========================================================
   REVEAL ANIMATION — BI-DIRECTIONAL
========================================================= */


/* =========================================
   DELAY CHO CÁC ELEMENT
========================================= */

.reveal:nth-child(1) {
    transition-delay: .03s;
}

.reveal:nth-child(2) {
    transition-delay: .10s;
}

.reveal:nth-child(3) {
    transition-delay: .17s;
}

.reveal:nth-child(4) {
    transition-delay: .24s;
}

.reveal:nth-child(5) {
    transition-delay: .31s;
}


/* =========================================
   GIẢM CHUYỂN ĐỘNG NẾU USER BẬT REDUCE MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .reveal {
        transition-duration: .01ms;
        transform: none;
        filter: none;
    }

}

/* =========================================================
   SMOOTH BIDIRECTIONAL REVEAL
========================================================= */

.reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
    filter: blur(7px);

    transition:
        opacity .75s cubic-bezier(.22, 1, .36, 1),
        transform .85s cubic-bezier(.22, 1, .36, 1),
        filter .75s cubic-bezier(.22, 1, .36, 1);

    will-change:
        opacity,
        transform,
        filter;
}


/* ---------------------------------------------------------
   VÀO VIEWPORT TỪ DƯỚI
--------------------------------------------------------- */

.reveal.reveal-from-bottom:not(.visible) {
    opacity: 0;
    transform:
        translate3d(0, 34px, 0)
        scale(.985);
    filter: blur(7px);
}


/* ---------------------------------------------------------
   VÀO VIEWPORT TỪ TRÊN
--------------------------------------------------------- */

.reveal.reveal-from-top:not(.visible) {
    opacity: 0;
    transform:
        translate3d(0, -34px, 0)
        scale(.985);
    filter: blur(7px);
}


/* ---------------------------------------------------------
   ĐANG HIỂN THỊ
--------------------------------------------------------- */

.reveal.visible {
    opacity: 1;
    transform:
        translate3d(0, 0, 0)
        scale(1);
    filter: blur(0);
}


/* ---------------------------------------------------------
   EXIT KHÔNG DELAY
--------------------------------------------------------- */

.reveal:not(.visible) {
    transition-delay: 0s;
}


/* ---------------------------------------------------------
   STAGGER NHẸ KHI XUẤT HIỆN
--------------------------------------------------------- */

.reveal.visible:nth-child(1) {
    transition-delay: .00s;
}

.reveal.visible:nth-child(2) {
    transition-delay: .06s;
}

.reveal.visible:nth-child(3) {
    transition-delay: .12s;
}

.reveal.visible:nth-child(4) {
    transition-delay: .18s;
}

.reveal.visible:nth-child(5) {
    transition-delay: .24s;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .reveal {
        transform:
            translate3d(0, 24px, 0)
            scale(.99);

        filter: blur(5px);

        transition:
            opacity .6s ease,
            transform .7s cubic-bezier(.22, 1, .36, 1),
            filter .6s ease;
    }

    .reveal.reveal-from-top:not(.visible) {
        transform:
            translate3d(0, -24px, 0)
            scale(.99);
    }

}

/* =========================================================
   CURSOR STATES
========================================================= */

#cursorRing {
    transition:
        width .25s cubic-bezier(.22, 1, .36, 1),
        height .25s cubic-bezier(.22, 1, .36, 1),
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


/* -----------------------------------------
   DEFAULT
----------------------------------------- */

#cursorRing.state-default {
    border-color: rgba(220, 190, 255, .55);
}


/* -----------------------------------------
   OPEN
----------------------------------------- */

#cursorRing.state-open {
    border-color: rgba(255, 255, 255, .75);

    box-shadow:
        0 0 18px rgba(139, 92, 246, .25);
}


/* -----------------------------------------
   VIEW
----------------------------------------- */

#cursorRing.state-view {
    border-color: rgba(139, 92, 246, .8);

    box-shadow:
        0 0 20px rgba(139, 92, 246, .35),
        0 0 40px rgba(139, 92, 246, .12);
}


/* -----------------------------------------
   SKILL
----------------------------------------- */

#cursorRing.state-skill {
    border-color: rgba(34, 211, 238, .85);

    box-shadow:
        0 0 18px rgba(34, 211, 238, .35),
        0 0 40px rgba(34, 211, 238, .12);
}


/* -----------------------------------------
   PLAY
----------------------------------------- */

#cursorRing.state-play {
    border-color: rgba(236, 72, 153, .85);

    box-shadow:
        0 0 20px rgba(236, 72, 153, .38),
        0 0 42px rgba(236, 72, 153, .13);
}


/* -----------------------------------------
   NEXT / PREV
----------------------------------------- */

#cursorRing.state-next,
#cursorRing.state-prev {
    border-color: rgba(210, 190, 255, .8);

    box-shadow:
        0 0 18px rgba(139, 92, 246, .3);
}


/* -----------------------------------------
   COLOR
----------------------------------------- */

#cursorRing.state-color {
    border-color: rgba(255, 255, 255, .9);

    box-shadow:
        0 0 18px rgba(255, 255, 255, .3),
        0 0 40px rgba(139, 92, 246, .2);
}


/* -----------------------------------------
   THEME
----------------------------------------- */

#cursorRing.state-theme {
    border-color: rgba(139, 92, 246, .95);

    box-shadow:
        0 0 20px rgba(139, 92, 246, .45),
        0 0 50px rgba(236, 72, 153, .16);
}


/* -----------------------------------------
   SOUND
----------------------------------------- */

#cursorRing.state-sound {
    border-color: rgba(34, 211, 238, .8);

    box-shadow:
        0 0 20px rgba(34, 211, 238, .35);
}


/* -----------------------------------------
   COPY
----------------------------------------- */

#cursorRing.state-copy {
    border-color: rgba(255, 255, 255, .8);

    box-shadow:
        0 0 18px rgba(255, 255, 255, .25);
}


/* -----------------------------------------
   SOCIAL
----------------------------------------- */

#cursorRing.state-social {
    border-color: rgba(236, 72, 153, .8);

    box-shadow:
        0 0 20px rgba(236, 72, 153, .32);
}


/* =========================================================
   CURSOR LABEL
========================================================= */

#cursorLabel {
    transition:
        opacity .2s ease,
        transform .25s cubic-bezier(.22, 1, .36, 1);

    white-space: nowrap;
    pointer-events: none;
    user-select: none;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}


/* =========================================================
   REVEAL — MƯỢT 2 CHIỀU
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translate3d(0, 34px, 0)
        scale(.985);

    filter: blur(7px);

    transition:
        opacity .75s cubic-bezier(.22, 1, .36, 1),
        transform .85s cubic-bezier(.22, 1, .36, 1),
        filter .75s cubic-bezier(.22, 1, .36, 1);

    will-change:
        opacity,
        transform,
        filter;
}


.reveal.reveal-from-bottom:not(.visible) {
    opacity: 0;

    transform:
        translate3d(0, 34px, 0)
        scale(.985);

    filter: blur(7px);
}


.reveal.reveal-from-top:not(.visible) {
    opacity: 0;

    transform:
        translate3d(0, -34px, 0)
        scale(.985);

    filter: blur(7px);
}


.reveal.visible {
    opacity: 1;

    transform:
        translate3d(0, 0, 0)
        scale(1);

    filter: blur(0);
}


.reveal:not(.visible) {
    transition-delay: 0s;
}


/* =========================================================
   REVEAL STAGGER
========================================================= */

.reveal.visible:nth-child(1) {
    transition-delay: .00s;
}

.reveal.visible:nth-child(2) {
    transition-delay: .06s;
}

.reveal.visible:nth-child(3) {
    transition-delay: .12s;
}

.reveal.visible:nth-child(4) {
    transition-delay: .18s;
}

.reveal.visible:nth-child(5) {
    transition-delay: .24s;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    #cursorRing,
    #cursorDot,
    #cursorLabel {
        display: none;
    }

    .reveal {
        transform:
            translate3d(0, 24px, 0)
            scale(.99);

        filter: blur(5px);

        transition:
            opacity .6s ease,
            transform .7s cubic-bezier(.22, 1, .36, 1),
            filter .6s ease;
    }

    .reveal.reveal-from-top:not(.visible) {
        transform:
            translate3d(0, -24px, 0)
            scale(.99);
    }


/* =========================================================
   MUSIC VISUALIZER
========================================================= */

#playlistWave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 34px;
    min-width: 75px;
    overflow: hidden;
}


/* Thanh waveform */

#playlistWave i {
    display: block;

    width: 3px;
    height: 7px;

    min-height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            to top,
            var(--purple),
            var(--pink),
            var(--cyan)
        );

    box-shadow:
        0 0 7px
        rgba(139, 92, 246, .35);

    opacity: .55;

    transition:
        height .08s linear,
        opacity .08s linear,
        filter .2s ease;
}


/* Khi đang phát */

#playlistPlay.playing
~ #playlistWave i {
    filter:
        drop-shadow(
            0 0 5px
            rgba(139, 92, 246, .35)
        );
}


/* Glow nhẹ cho music card khi đang phát */

.music-card:has(
    #playlistPlay.playing
) {
    box-shadow:
        0 0 25px
        rgba(139, 92, 246, .08);
}}

/* =========================================================
   PROJECT SHOWCASE 3D
========================================================= */

.project-card {
    position: relative;
    overflow: hidden;
    cursor: none;
    transform-style: preserve-3d;
    transition:
        transform .25s cubic-bezier(.22, 1, .36, 1),
        box-shadow .35s ease,
        border-color .35s ease;
}


/* -----------------------------------------
   PROJECT VISUAL
----------------------------------------- */

.project-visual {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}


.project-main::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            transparent 25%,
            rgba(255,255,255,.07) 50%,
            transparent 75%
        );

    transform:
        translateX(-120%);

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1);

    pointer-events: none;
}


.project-card:hover .project-main::after {
    transform:
        translateX(120%);
}


/* -----------------------------------------
   HOVER OVERLAY
----------------------------------------- */

.project-hover {
    position: absolute;
    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 10px;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.20),
            rgba(5,3,11,.76)
        );

    opacity: 0;

    transform:
        scale(.94);

    transition:
        opacity .4s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1);

    pointer-events: none;

    z-index: 5;
}


.project-card:hover .project-hover {
    opacity: 1;

    transform:
        scale(1);
}


.project-hover span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}


.project-hover-icon {
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius: 50%;

    background:
        rgba(255,255,255,.06);

    box-shadow:
        0 0 30px
        rgba(139,92,246,.35);

    font-size: 22px;

    transform:
        translateY(8px);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}


.project-card:hover
.project-hover-icon {
    transform:
        translateY(0)
        rotate(8deg);
}


/* -----------------------------------------
   PROJECT SITE BADGE
----------------------------------------- */

.project-site-badge {
    position: relative;
    z-index: 3;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease;
}


.project-card:hover
.project-site-badge {
    transform:
        translateY(-4px);
}


/* -----------------------------------------
   PROJECT BODY
----------------------------------------- */

.project-body {
    position: relative;
    z-index: 4;
}


.project-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    flex-wrap: wrap;
}


/* -----------------------------------------
   PREVIEW BUTTON
----------------------------------------- */

.project-preview-btn {
    appearance: none;
    border: 1px solid var(--line);

    background:
        rgba(255,255,255,.045);

    color: inherit;

    border-radius: 999px;

    padding:
        9px 14px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    font:
        inherit;

    font-size: 11px;
    font-weight: 700;

    cursor: none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.project-preview-btn:hover {
    transform:
        translateY(-2px);

    background:
        rgba(139,92,246,.12);

    border-color:
        rgba(139,92,246,.42);

    box-shadow:
        0 0 24px
        rgba(139,92,246,.14);
}


.project-preview-btn span {
    font-size: 14px;
}


/* -----------------------------------------
   PROJECT CARD HOVER
----------------------------------------- */

.project-card:hover {
    border-color:
        rgba(139,92,246,.32);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.35),
        0 0 45px
        rgba(139,92,246,.12);
}


/* -----------------------------------------
   FULLSCREEN PROJECT PREVIEW
----------------------------------------- */

.project-modal {
    position: fixed;
    inset: 0;

    z-index: 999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background:
        rgba(2,1,7,.82);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.project-modal.open {
    opacity: 1;
    visibility: visible;
}


/* -----------------------------------------
   MODAL WINDOW
----------------------------------------- */

.project-modal-window {
    width:
        min(1400px, 96vw);

    height:
        min(860px, 92vh);

    display:
        grid;

    grid-template-rows:
        auto 1fr;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        24px;

    background:
        rgba(8,5,18,.94);

    box-shadow:
        0 35px 120px
        rgba(0,0,0,.55),
        0 0 80px
        rgba(139,92,246,.12);

    transform:
        translateY(22px)
        scale(.97);

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}


.project-modal.open
.project-modal-window {
    transform:
        translateY(0)
        scale(1);
}


/* -----------------------------------------
   MODAL HEADER
----------------------------------------- */

.project-modal-header {
    min-height: 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap: 16px;

    padding:
        10px 14px 10px 18px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    background:
        rgba(255,255,255,.025);
}


.project-modal-title {
    display:
        flex;

    flex-direction:
        column;

    min-width: 0;
}


.project-modal-title strong {
    font-size: 13px;
    letter-spacing: .06em;
}


.project-modal-title span {
    margin-top: 3px;

    font-size: 10px;

    color:
        rgba(255,255,255,.48);
}


/* -----------------------------------------
   MODAL ACTIONS
----------------------------------------- */

.project-modal-actions {
    display:
        flex;

    align-items:
        center;

    gap: 8px;
}


.project-modal-open {
    display:
        inline-flex;

    align-items:
        center;

    gap: 7px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:
        999px;

    color:
        rgba(255,255,255,.8);

    text-decoration:
        none;

    font-size:
        10px;

    font-weight:
        700;

    transition:
        background .25s ease,
        border-color .25s ease;
}


.project-modal-open:hover {
    background:
        rgba(139,92,246,.12);

    border-color:
        rgba(139,92,246,.35);
}


.project-modal-close {
    width: 38px;
    height: 38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.045);

    color:
        white;

    font-size:
        19px;

    cursor:
        none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.project-modal-close:hover {
    transform:
        rotate(90deg);

    background:
        rgba(236,72,153,.10);

    border-color:
        rgba(236,72,153,.35);
}


/* -----------------------------------------
   IFRAME
----------------------------------------- */

.project-modal-frame {
    position:
        relative;

    min-height:
        0;

    background:
        #05030b;
}


.project-modal-frame iframe {
    width:
        100%;

    height:
        100%;

    display:
        block;

    border:
        0;

    background:
        #05030b;
}


/* -----------------------------------------
   LOADING LINE
----------------------------------------- */

.project-frame-loader {
    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        0;

    height:
        2px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.04);

    pointer-events:
        none;
}


.project-frame-loader::after {
    content: "";

    position:
        absolute;

    top:
        0;

    left:
        -40%;

    width:
        40%;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--purple),
            var(--pink),
            transparent
        );

    animation:
        projectLoader 1.2s
        ease-in-out
        infinite;
}


@keyframes projectLoader {

    0% {
        transform:
            translateX(0);
    }

    100% {
        transform:
            translateX(350%);
    }

}


/* -----------------------------------------
   BODY LOCK
----------------------------------------- */

html.project-modal-open,
html.project-modal-open body {
    overflow:
        hidden;
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .project-modal {
        padding:
            10px;
    }

    .project-modal-window {
        width:
            100%;

        height:
            94vh;

        border-radius:
            18px;
    }

    .project-modal-open {
        display:
            none;
    }

    .project-modal-header {
        padding:
            9px 10px 9px 14px;
    }

    .project-hover {
        display:
            none;
    }

    .project-preview-btn {
        cursor:
            pointer;
    }

}

/* =========================================================
   FIX CURSOR KHI PROJECT PREVIEW ĐANG MỞ
========================================================= */

/*
   Modal nằm ở z-index 999,
   nên custom cursor phải nằm cao hơn modal.
*/

.cursor-dot,
.cursor-ring,
.cursor-label {
    position: fixed !important;
    pointer-events: none !important;
    z-index: 10050 !important;
}


/* Cursor dot */

.cursor-dot {
    pointer-events: none !important;
}


/* Cursor ring */

.cursor-ring {
    pointer-events: none !important;
}


/* Cursor label */

.cursor-label {
    pointer-events: none !important;
}


/*
   Đảm bảo modal vẫn nhận click bình thường
*/

.project-modal {
    z-index: 999 !important;
}


/*
   iframe không được phép tranh chấp
   với custom cursor
*/

.project-modal-frame iframe {
    display: block;
}


/*
   Khi modal mở, body vẫn ẩn cursor gốc,
   custom cursor sẽ luôn nằm trên cùng.
*/

html.project-modal-open,
html.project-modal-open body {
    cursor: none !important;
}


/*
   Các nút trong modal vẫn dùng custom cursor
*/

.project-modal button,
.project-modal a {
    cursor: none !important;
}

/* =========================================================
   WORLD MAP
========================================================= */

.world-map {
    position: fixed;
    inset: 0;

    z-index: 1000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(139,92,246,.12),
            transparent 35%
        ),
        rgba(2,1,8,.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .4s ease,
        visibility .4s ease;
}

.world-map.open {
    opacity: 1;
    visibility: visible;
}


/* -----------------------------------------
   MAP CONTAINER
----------------------------------------- */

.world-map-inner {
    position: relative;

    width: min(1000px, 94vw);
    height: min(720px, 88vh);

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 28px;

    background:
        radial-gradient(
            circle at center,
            rgba(139,92,246,.08),
            rgba(7,4,15,.94) 60%
        );

    box-shadow:
        0 30px 120px rgba(0,0,0,.55),
        0 0 80px rgba(139,92,246,.12);

    transform:
        scale(.96)
        translateY(15px);

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1);
}

.world-map.open
.world-map-inner {
    transform:
        scale(1)
        translateY(0);
}


/* -----------------------------------------
   STARS / GRID
----------------------------------------- */

.world-map-grid {
    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .28;

    background-image:
        linear-gradient(
            rgba(255,255,255,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.045) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    mask-image:
        radial-gradient(
            circle,
            black 25%,
            transparent 80%
        );
}


/* -----------------------------------------
   HEADER
----------------------------------------- */

.world-map-header {
    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);

    background:
        rgba(5,3,12,.35);
}

.world-map-title {
    display: flex;
    flex-direction: column;
}

.world-map-title strong {
    font-size: 13px;
    letter-spacing: .15em;
}

.world-map-title span {
    margin-top: 4px;

    font-size: 9px;

    letter-spacing: .14em;
    text-transform: uppercase;

    color:
        rgba(255,255,255,.42);
}

.world-map-close {
    width: 38px;
    height: 38px;

    border:
        1px solid
        rgba(255,255,255,.1);

    border-radius: 50%;

    background:
        rgba(255,255,255,.04);

    color: white;

    font-size: 20px;

    cursor: none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.world-map-close:hover {
    transform: rotate(90deg);

    background:
        rgba(236,72,153,.1);

    border-color:
        rgba(236,72,153,.35);
}


/* -----------------------------------------
   UNIVERSE
----------------------------------------- */

.world-universe {
    position: absolute;
    inset: 75px 20px 30px;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* -----------------------------------------
   ORBITS
----------------------------------------- */

.world-orbit {
    position: absolute;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 50%;

    pointer-events: none;
}

.world-orbit-1 {
    width: 360px;
    height: 360px;
}

.world-orbit-2 {
    width: 580px;
    height: 380px;

    transform:
        rotate(-18deg);
}


/* -----------------------------------------
   CENTER CORE
----------------------------------------- */

.world-core {
    position: relative;

    z-index: 10;

    width: 132px;
    height: 132px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.17);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,.27),
            rgba(22,10,40,.9) 65%
        );

    box-shadow:
        0 0 30px rgba(139,92,246,.3),
        0 0 100px rgba(139,92,246,.11);

    text-align: center;
}

.world-core::before {
    content: "";

    position: absolute;
    inset: -14px;

    border:
        1px solid
        rgba(139,92,246,.16);

    border-radius: 50%;

    animation:
        worldPulse 3s ease-in-out infinite;
}

.world-core strong {
    font-size: 13px;
    letter-spacing: .16em;
}

.world-core span {
    margin-top: 7px;

    font-size: 8px;

    letter-spacing: .17em;

    color:
        rgba(255,255,255,.43);
}

@keyframes worldPulse {
    0%,100% {
        transform: scale(.96);
        opacity: .35;
    }

    50% {
        transform: scale(1.05);
        opacity: .9;
    }
}


/* -----------------------------------------
   PLANETS
----------------------------------------- */

.world-node {
    position: absolute;

    width: 88px;
    height: 88px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(255,255,255,.13);

    border-radius: 50%;

    background:
        rgba(12,8,25,.92);

    color: white;

    cursor: none;

    box-shadow:
        0 0 18px rgba(139,92,246,.08);

    transition:
        transform .35s cubic-bezier(.22,1,.36,1),
        border-color .25s ease,
        box-shadow .3s ease,
        background .25s ease;
}

.world-node span {
    font-size: 9px;

    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;
}

.world-node small {
    margin-top: 4px;

    font-size: 7px;

    letter-spacing: .08em;

    color:
        rgba(255,255,255,.38);
}

.world-node:hover {
    transform:
        scale(1.16);

    border-color:
        rgba(139,92,246,.55);

    background:
        rgba(139,92,246,.13);

    box-shadow:
        0 0 25px rgba(139,92,246,.27),
        0 0 55px rgba(139,92,246,.08);
}


/* -----------------------------------------
   NODE POSITIONS
----------------------------------------- */

.world-node-home {
    top: 8%;
    left: 50%;

    transform:
        translateX(-50%);
}

.world-node-home:hover {
    transform:
        translateX(-50%)
        scale(1.16);
}

.world-node-about {
    top: 25%;
    left: 10%;
}

.world-node-skills {
    top: 10%;
    right: 17%;
}

.world-node-projects {
    bottom: 13%;
    right: 13%;
}

.world-node-links {
    bottom: 8%;
    left: 26%;
}

.world-node-contact {
    top: 48%;
    right: 3%;
}


/* -----------------------------------------
   CONNECTION LINES
----------------------------------------- */

.world-line {
    position: absolute;

    height: 1px;

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139,92,246,.28),
            transparent
        );

    pointer-events: none;
}

.world-line-1 {
    width: 200px;

    top: 35%;
    left: 25%;

    transform:
        rotate(-18deg);
}

.world-line-2 {
    width: 210px;

    top: 33%;
    right: 23%;

    transform:
        rotate(20deg);
}

.world-line-3 {
    width: 230px;

    bottom: 27%;
    left: 31%;

    transform:
        rotate(14deg);
}

.world-line-4 {
    width: 220px;

    bottom: 27%;
    right: 25%;

    transform:
        rotate(-14deg);
}


/* -----------------------------------------
   FOOTER HINT
----------------------------------------- */

.world-map-hint {
    position: absolute;

    bottom: 15px;
    left: 50%;

    transform:
        translateX(-50%);

    font-size: 8px;

    letter-spacing: .16em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.32);

    white-space: nowrap;
}


/* -----------------------------------------
   THEME
----------------------------------------- */

html.theme-nebula .world-map {
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(139,92,246,.18),
            transparent 38%
        ),
        rgba(2,1,8,.9);
}


/* -----------------------------------------
   MOBILE
----------------------------------------- */

@media (max-width: 700px) {

    .world-map {
        padding: 10px;
    }

    .world-map-inner {
        width: 100%;
        height: 90vh;

        border-radius: 20px;
    }

    .world-universe {
        inset: 70px 8px 25px;
    }

    .world-orbit-1 {
        width: 220px;
        height: 220px;
    }

    .world-orbit-2 {
        width: 310px;
        height: 220px;
    }

    .world-core {
        width: 100px;
        height: 100px;
    }

    .world-node {
        width: 66px;
        height: 66px;
    }

    .world-node span {
        font-size: 7px;
    }

    .world-node small {
        display: none;
    }

    .world-node-home {
        top: 8%;
    }

    .world-node-about {
        top: 28%;
        left: 2%;
    }

    .world-node-skills {
        top: 20%;
        right: 2%;
    }

    .world-node-projects {
        bottom: 16%;
        right: 4%;
    }

    .world-node-links {
        bottom: 9%;
        left: 12%;
    }

    .world-node-contact {
        top: 49%;
        right: -2%;
    }

    .world-line {
        display: none;
    }

    .world-map-hint {
        bottom: 9px;
    }
}
/* =========================================================
   THEME 3 — HACKER / MATRIX
========================================================= */

html.theme-hacker {
    --purple: #39ff14;
    --pink: #7cff5b;
    --cyan: #00ff88;
    --line: rgba(57,255,20,.18);
}


/* -----------------------------------------
   BACKGROUND
----------------------------------------- */

html.theme-hacker body {
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(57,255,20,.08),
            transparent 38%
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(0,255,136,.06),
            transparent 30%
        ),
        #020603;
}


/* -----------------------------------------
   MATRIX RAIN CANVAS
----------------------------------------- */

#matrixRain {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -2;

    display: block;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity .5s ease;
}

html.theme-hacker #matrixRain {
    opacity: .32;
}


/* -----------------------------------------
   SPACE STARS
----------------------------------------- */

html.theme-hacker #space {
    filter:
        saturate(.45)
        brightness(.65);

    opacity: .55;
}


/* -----------------------------------------
   AMBIENT
----------------------------------------- */

html.theme-hacker .ambient {
    opacity: .20;

    filter:
        blur(105px)
        saturate(.5);
}

html.theme-hacker .ambient-a {
    background: #39ff14;
}

html.theme-hacker .ambient-b {
    background: #00ff88;
}


/* -----------------------------------------
   NAV
----------------------------------------- */

html.theme-hacker .nav {
    border-color:
        rgba(57,255,20,.20);

    box-shadow:
        0 0 25px
        rgba(57,255,20,.08),
        0 12px 45px
        rgba(0,0,0,.35);
}

html.theme-hacker .nav,
html.theme-hacker .nav a,
html.theme-hacker .nav button {
    font-family:
        "Courier New",
        monospace;
}


/* -----------------------------------------
   TEXT
----------------------------------------- */

html.theme-hacker .gradient-text {
    background:
        linear-gradient(
            90deg,
            #39ff14,
            #00ff88,
            #7cff5b
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* -----------------------------------------
   GLASS
----------------------------------------- */

html.theme-hacker .glass {
    border-color:
        rgba(57,255,20,.14);

    box-shadow:
        0 0 0 1px
        rgba(57,255,20,.02),

        0 15px 55px
        rgba(0,0,0,.3),

        0 0 35px
        rgba(57,255,20,.05);
}


/* -----------------------------------------
   PROFILE
----------------------------------------- */

html.theme-hacker .profile-card {
    box-shadow:
        0 20px 75px
        rgba(0,0,0,.4),

        0 0 45px
        rgba(57,255,20,.08);
}


/* -----------------------------------------
   AVATAR
----------------------------------------- */

html.theme-hacker .avatar-ring {
    box-shadow:
        0 0 20px
        rgba(57,255,20,.55),

        0 0 45px
        rgba(0,255,136,.16);
}


/* -----------------------------------------
   BUTTONS
----------------------------------------- */

html.theme-hacker button:hover,
html.theme-hacker .btn:hover {
    border-color:
        rgba(57,255,20,.45);

    box-shadow:
        0 0 20px
        rgba(57,255,20,.15);
}


/* -----------------------------------------
   SKILLS
----------------------------------------- */

html.theme-hacker .skill-node {
    box-shadow:
        0 0 16px
        rgba(57,255,20,.10);
}

html.theme-hacker .skill-node:hover,
html.theme-hacker .skill-node.active {
    border-color:
        rgba(57,255,20,.55);

    box-shadow:
        0 0 25px
        rgba(57,255,20,.28),

        0 0 50px
        rgba(0,255,136,.08);
}

html.theme-hacker .skill-core {
    box-shadow:
        0 0 25px
        rgba(57,255,20,.18),

        0 0 65px
        rgba(0,255,136,.07);
}


/* -----------------------------------------
   MUSIC
----------------------------------------- */

html.theme-hacker .music-card {
    box-shadow:
        0 0 30px
        rgba(57,255,20,.07);
}

html.theme-hacker #playlistWave i {
    background:
        linear-gradient(
            to top,
            #39ff14,
            #00ff88
        );

    box-shadow:
        0 0 7px
        rgba(57,255,20,.45);
}


/* -----------------------------------------
   PROJECT
----------------------------------------- */

html.theme-hacker .project-card:hover {
    border-color:
        rgba(57,255,20,.32);

    box-shadow:
        0 25px 80px
        rgba(0,0,0,.35),

        0 0 45px
        rgba(57,255,20,.10);
}


/* -----------------------------------------
   COLOR WHEEL
----------------------------------------- */

html.theme-hacker .color-wheel {
    box-shadow:
        0 0 25px
        rgba(57,255,20,.25),

        0 0 50px
        rgba(0,255,136,.08);
}


/* -----------------------------------------
   CURSOR
----------------------------------------- */

html.theme-hacker #cursorRing.state-theme,
html.theme-hacker #cursorRing.state-map,
html.theme-hacker #cursorRing.state-view,
html.theme-hacker #cursorRing.state-skill {
    border-color:
        rgba(57,255,20,.9);

    box-shadow:
        0 0 20px
        rgba(57,255,20,.45),

        0 0 45px
        rgba(0,255,136,.12);
}


/* -----------------------------------------
   MATRIX SCANLINES
----------------------------------------- */

html.theme-hacker body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: -1;

    pointer-events: none;

    opacity: .07;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 3px,
            rgba(57,255,20,.14) 4px
        );

    mix-blend-mode: screen;
}


/* -----------------------------------------
   HACKER ACTIVE BUTTON
----------------------------------------- */

html.theme-hacker #themeBtn.active {
    color: #39ff14;

    text-shadow:
        0 0 8px
        rgba(57,255,20,.8),

        0 0 20px
        rgba(57,255,20,.35);
}


/* -----------------------------------------
   REDUCE MOTION
----------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    #matrixRain {
        display: none;
    }


}

.hacker-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    transition: opacity .5s ease;
}

.hacker-layer.active {
    opacity: 1;
}


/* MATRIX */

#matrixRain {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .72;
    pointer-events: none;
}


/* nền grid rất nhẹ */

.hacker-grid {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            rgba(57,255,20,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(57,255,20,.028) 1px,
            transparent 1px
        );

    background-size: 46px 46px;

    opacity: .35;

    mask-image:
        radial-gradient(
            circle,
            black 20%,
            transparent 85%
        );
}


/* scanline */

.hacker-scanline {
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 4px,
            rgba(57,255,20,.025) 5px
        );

    opacity: .45;

    animation:
        hackerScan
        8s
        linear
        infinite;
}


@keyframes hackerScan {

    0% {
        transform:
            translateY(-20px);
    }

    100% {
        transform:
            translateY(20px);
    }

}


/* code fragments */

.hacker-code-stream {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 15%;

    overflow: hidden;

    opacity: .4;
}

.hacker-code-left {
    left: 0;
}

.hacker-code-right {
    right: 0;
}


.hacker-code-fragment {
    position: absolute;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: .08em;

    color:
        #39ff14;

    text-shadow:
        0 0 7px
        rgba(57,255,20,.45);

    white-space: nowrap;
}


.code-fall {
    animation:
        hackerFall
        linear
        infinite;
}


.code-rise {
    animation:
        hackerRise
        linear
        infinite;
}


@keyframes hackerFall {

    from {
        transform:
            translateY(-15vh);
    }

    to {
        transform:
            translateY(115vh)
            translateX(20px);
    }

}


@keyframes hackerRise {

    from {
        transform:
            translateY(115vh);
    }

    to {
        transform:
            translateY(-15vh)
            translateX(-20px);
    }

}


/* Hacker status */

.hacker-status {
    position: absolute;

    left: 18px;
    bottom: 16px;

    display: flex;
    gap: 14px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    letter-spacing: .12em;

    color:
        rgba(57,255,20,.55);

    text-shadow:
        0 0 7px
        rgba(57,255,20,.35);
}


.hacker-terminal-tag {
    position: absolute;

    right: 18px;
    bottom: 16px;

    font-family:
        "Courier New",
        monospace;

    font-size: 9px;

    color:
        rgba(57,255,20,.42);

    text-shadow:
        0 0 7px
        rgba(57,255,20,.3);
}
/* =========================================================
   HACKER BODY
========================================================= */

html.theme-hacker body {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(57,255,20,.08),
            transparent 35%
        ),
        #010402;
}


/* =========================================================
   SPACE
========================================================= */

html.theme-hacker #space {
    opacity: .25;

    filter:
        grayscale(.8)
        brightness(.45)
        saturate(.5);
}


/* =========================================================
   NAV
========================================================= */

html.theme-hacker .nav {
    border-color:
        rgba(57,255,20,.25);

    box-shadow:
        0 0 25px
        rgba(57,255,20,.08);

    background:
        rgba(1,8,3,.78);
}


html.theme-hacker .nav a,
html.theme-hacker .nav button,
html.theme-hacker .brand {
    font-family:
        "Courier New",
        monospace;
}


/* =========================================================
   HEADINGS
========================================================= */

html.theme-hacker h1,
html.theme-hacker h2,
html.theme-hacker h3 {
    text-shadow:
        0 0 18px
        rgba(57,255,20,.08);
}


html.theme-hacker .gradient-text {
    background:
        linear-gradient(
            90deg,
            #39ff14,
            #00ff88,
            #b7ff9a
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


/* =========================================================
   GLASS
========================================================= */

html.theme-hacker .glass {
    border-color:
        rgba(57,255,20,.16);

    background:
        rgba(2,10,5,.55);

    box-shadow:
        inset 0 0 25px
        rgba(57,255,20,.015),

        0 15px 50px
        rgba(0,0,0,.35);
}


/* =========================================================
   PROFILE
========================================================= */

html.theme-hacker .profile-card {
    box-shadow:
        0 20px 80px
        rgba(0,0,0,.5),

        0 0 45px
        rgba(57,255,20,.08);
}


/* =========================================================
   AVATAR
========================================================= */

html.theme-hacker .avatar-ring {
    border-color:
        rgba(57,255,20,.55);

    box-shadow:
        0 0 18px
        rgba(57,255,20,.5),

        0 0 40px
        rgba(57,255,20,.12);
}


/* =========================================================
   SKILLS
========================================================= */

html.theme-hacker .skill-node {
    font-family:
        "Courier New",
        monospace;

    border-color:
        rgba(57,255,20,.16);

    box-shadow:
        0 0 12px
        rgba(57,255,20,.06);
}


html.theme-hacker .skill-node.active,
html.theme-hacker .skill-node:hover {
    border-color:
        rgba(57,255,20,.6);

    color:
        #39ff14;

    box-shadow:
        0 0 22px
        rgba(57,255,20,.25);
}


html.theme-hacker .skill-core {
    border-color:
        rgba(57,255,20,.2);

    box-shadow:
        0 0 30px
        rgba(57,255,20,.12);
}


/* =========================================================
   MUSIC
========================================================= */

html.theme-hacker .music-card {
    border-color:
        rgba(57,255,20,.16);

    box-shadow:
        0 0 28px
        rgba(57,255,20,.06);
}


html.theme-hacker #playlistWave i {
    background:
        linear-gradient(
            to top,
            #39ff14,
            #00ff88,
            #b7ff9a
        );

    box-shadow:
        0 0 8px
        rgba(57,255,20,.5);
}


/* =========================================================
   BUTTONS
========================================================= */

html.theme-hacker button:hover,
html.theme-hacker .btn:hover {
    border-color:
        rgba(57,255,20,.45);

    color:
        #39ff14;

    box-shadow:
        0 0 22px
        rgba(57,255,20,.15);
}


/* =========================================================
   THEME BUTTON
========================================================= */

html.theme-hacker #themeBtn.active {
    color:
        #39ff14;

    text-shadow:
        0 0 8px
        rgba(57,255,20,.8),

        0 0 22px
        rgba(57,255,20,.3);
}


/* =========================================================
   CURSOR
========================================================= */

html.theme-hacker #cursorRing {
    border-color:
        rgba(57,255,20,.55);

    box-shadow:
        0 0 15px
        rgba(57,255,20,.18);
}


html.theme-hacker #cursorLabel {
    color:
        #39ff14;

    text-shadow:
        0 0 8px
        rgba(57,255,20,.6);

    font-family:
        "Courier New",
        monospace;
}


/* =========================================================
   PROJECT
========================================================= */

html.theme-hacker .project-card:hover {
    border-color:
        rgba(57,255,20,.4);

    box-shadow:
        0 25px 75px
        rgba(0,0,0,.45),

        0 0 45px
        rgba(57,255,20,.10);
}


/* =========================================================
   WORLD MAP
========================================================= */

html.theme-hacker .world-map {
    background:
        radial-gradient(
            circle at center,
            rgba(57,255,20,.08),
            transparent 45%
        ),
        rgba(0,5,2,.93);
}


html.theme-hacker .world-core {
    border-color:
        rgba(57,255,20,.35);

    background:
        radial-gradient(
            circle,
            rgba(57,255,20,.13),
            rgba(0,10,3,.95)
        );

    box-shadow:
        0 0 35px
        rgba(57,255,20,.2);
}


html.theme-hacker .world-node:hover {
    border-color:
        rgba(57,255,20,.6);

    color:
        #39ff14;

    box-shadow:
        0 0 30px
        rgba(57,255,20,.25);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .hacker-code-stream {
        width: 11%;
        opacity: .3;
    }

    .hacker-terminal-tag {
        display: none;
    }

    .hacker-status {
        left: 10px;
        bottom: 10px;
    }

    #matrixRain {
        opacity: .6;
    }

}

/* =========================================================
   FIX HERO / ABOUT SEPARATOR
========================================================= */

.hero {
    position: relative;
    isolation: isolate;
}


/* Không tạo mảng tối ở đáy Hero */

.hero::after {
    content: none !important;
}


/* About dùng cùng nền với toàn trang */

#about {
    position: relative;
    background: transparent !important;
}


/* Không có đường kẻ ngang giữa 2 section */

#about::before {
    content: none !important;
}


/* Đảm bảo Hero không bị tạo một band nền */

.hero + #about {
    border-top: 0 !important;
    background: transparent !important;
}

/* =========================================================
   REMOVE HORIZONTAL BAND IN HERO
========================================================= */

/* Hero và các lớp bên trong không được tạo background */
.hero,
.hero-copy,
.hero-card-wrap,
.hero-art,
.hero + .section {
    background: transparent !important;
}


/* Tắt toàn bộ pseudo-element có thể tạo dải ngang */
.hero::before,
.hero::after,
.hero-copy::before,
.hero-copy::after,
.hero-card-wrap::before,
.hero-card-wrap::after,
.hero-art::before,
.hero-art::after {
    content: none !important;
    display: none !important;
}


/* Hero không dùng border ngang */
.hero {
    border-bottom: 0 !important;
    box-shadow: none !important;
}


/* Section phía sau cũng không tạo đường nền */
#about {
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

#about::before,
#about::after {
    content: none !important;
    display: none !important;
}


/* Đảm bảo canvas background phủ đều toàn màn hình */
#space {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -4 !important;
    pointer-events: none !important;
}


/* Không cho main/section tự tạo mảng nền */
main,
.section {
    background: transparent !important;
}


/* Chỉ giữ background chính của body */
body {
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(139,92,246,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 28%,
            rgba(236,72,153,.08),
            transparent 28%
        ),
        #05030b !important;
}


/* =========================================================
   NEBULA
========================================================= */

html.theme-nebula body {
    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(139,92,246,.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 82% 25%,
            rgba(34,211,238,.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 85%,
            rgba(236,72,153,.08),
            transparent 30%
        ),
        #05030b !important;
}


/* =========================================================
   HACKER
========================================================= */

html.theme-hacker body {
    background:
        radial-gradient(
            circle at 50% 30%,
            rgba(57,255,20,.06),
            transparent 35%
        ),
        #010402 !important;
}
/* =========================================================
   SECTION TRACKER — DOTS ONLY
========================================================= */

.section-tracker {
    position: fixed;

    right: 22px;
    top: 50%;

    transform:
        translateY(-50%);

    z-index: 80;

    display: flex;
    flex-direction: column;

    gap: 11px;
}


.section-dot {
    position: relative;

    width: 11px;
    height: 11px;

    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;

    cursor: none;

    opacity: .42;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* Chấm */

.section-dot-point {
    width: 5px;
    height: 5px;

    display: block;

    border-radius: 50%;

    background:
        rgba(255,255,255,.7);

    box-shadow:
        0 0 0
        rgba(139,92,246,0);

    transition:
        width .3s cubic-bezier(.22,1,.36,1),
        height .3s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        box-shadow .3s ease;
}


/* Hover */

.section-dot:hover {
    opacity: .9;

    transform:
        scale(1.15);
}


.section-dot:hover
.section-dot-point {
    width: 7px;
    height: 7px;

    background:
        var(--purple);

    box-shadow:
        0 0 12px
        var(--purple);
}


/* Active */

.section-dot.active {
    opacity: 1;

    transform:
        scale(1.05);
}


.section-dot.active
.section-dot-point {
    width: 9px;
    height: 9px;

    background:
        var(--purple);

    box-shadow:
        0 0 8px
        var(--purple),

        0 0 18px
        rgba(139,92,246,.55);
}


/* Label */

.section-dot strong {
    position: absolute;

    right: 19px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(6px);

    white-space: nowrap;

    font-size: 8px;

    letter-spacing: .15em;

    font-weight: 700;

    color:
        rgba(255,255,255,.75);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .2s ease,
        transform .25s ease;
}


.section-dot:hover strong,
.section-dot.active strong {
    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);
}


/* =========================================================
   TẮT THANH SCROLL PROGRESS CŨ
========================================================= */

.scroll-progress {
    display: none !important;
}


/* =========================================================
   HACKER MODE
========================================================= */

html.theme-hacker
.section-dot-point {
    background:
        rgba(57,255,20,.65);
}


html.theme-hacker
.section-dot.active
.section-dot-point,
html.theme-hacker
.section-dot:hover
.section-dot-point {
    background:
        #39ff14;

    box-shadow:
        0 0 8px
        #39ff14,

        0 0 18px
        rgba(57,255,20,.45);
}


html.theme-hacker
.section-dot strong {
    color:
        #39ff14;

    font-family:
        "Courier New",
        monospace;
}


/* =========================================================
   NEBULA
========================================================= */

html.theme-nebula
.section-dot.active
.section-dot-point {
    background:
        var(--purple);

    box-shadow:
        0 0 8px
        var(--purple),

        0 0 18px
        rgba(139,92,246,.5);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .section-tracker {
        right: 8px;

        gap: 9px;
    }

    .section-dot strong {
        display: none;
    }

    .section-dot-point {
        width: 4px;
        height: 4px;
    }

    .section-dot.active
    .section-dot-point {
        width: 7px;
        height: 7px;
    }

}