@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
}

:root {
    --bg-color: #07080c;
    --second-bg-color: #0f1117;
    --card-bg: rgba(255, 255, 255, 0.04);
    --card-border: rgba(255, 255, 255, 0.08);
    --text-color: #ffffff;
    --muted: #b8c0cc;
    --main-color: #0bb121;
    --main-color-rgb: 11, 177, 33;       /* RGB triplet for opacity-based use */
    --accent: #15e039;
    --shadow-color: rgba(var(--main-color-rgb), 0.35);
    --badge-tint: rgba(var(--main-color-rgb), 0.1);
}

[data-theme="light"] {
    --bg-color: #ebe5cf;            
    --second-bg-color: #f4efd8;
    --card-bg: rgba(40, 20, 10, 0.05);
    --card-border: rgba(120, 60, 20, 0.18);
    --text-color: #3a2510;          
    --muted: #75552e;
    --main-color: #f97316;               /* warm orange (lighter, sunrise) */
    --main-color-rgb: 249, 115, 22;      /* RGB triplet for opacity-based use */
    --accent: #fbbf24;                   /* bright amber */
    --shadow-color: rgba(249, 115, 22, 0.22);
    --badge-tint: rgba(249, 115, 22, 0.12);
}

/* --- Light theme tweaks (parchment + warm orange) --- */
[data-theme="light"] body { background: var(--bg-color); }
[data-theme="light"] .blob { opacity: 0.22; filter: blur(140px); }
[data-theme="light"] .blob-1 { background: #fbbf24; }   /* bright amber */
[data-theme="light"] .blob-2 { background: #c9a86a; }   /* khaki gold (kept) */
[data-theme="light"] .blob-3 { background: #fdba74; opacity: 0.2; } /* peach */
[data-theme="light"] .pheader {
    background: rgba(50, 58, 38, 0.94);          
    border-bottom-color: rgba(50, 58, 38, 0.35);
    backdrop-filter: blur(14px);
}
[data-theme="light"] .plogo { color: #ebe1bf; }
[data-theme="light"] .plogo span { color: #c9a86a; }   
[data-theme="light"] .pnavbar a.nav-link { color: #d8cea7; }
[data-theme="light"] .pnavbar a.nav-link:hover,
[data-theme="light"] .pnavbar a.nav-link.active { color: #d4b86a; }
[data-theme="light"] .pnavbar a.nav-link::after {
    background: linear-gradient(90deg, #fdba74, #fcd34d);  /* light orange to gold */
}
[data-theme="light"] .theme-toggle {
    background: rgba(235, 225, 191, 0.1);
    color: #ebe1bf;
    border-color: rgba(235, 225, 191, 0.22);
}
[data-theme="light"] .theme-toggle:hover {
    background: #d4b86a;
    color: #2e3823;
    border-color: #d4b86a;
}
[data-theme="light"] #pmenu-icon { color: #d4b86a; }
@media (max-width: 995px) {
    [data-theme="light"] .pnavbar {
        background: rgba(50, 58, 38, 0.96);
        border-color: #d4b86a;
    }
}
/* (services overlay removed for readability) */
[data-theme="light"] .ptyping-text span::after {
    background: var(--bg-color);
    border-left-color: var(--bg-color);
}
[data-theme="light"] .pendidikan .container::after {
    background: var(--bg-color);
    border-color: var(--main-color);
}
[data-theme="light"] .ke-wa-bae {
    box-shadow: 0 30px 60px rgba(20, 36, 16, 0.22);
}
[data-theme="light"] .toast {
    box-shadow: 0 10px 24px rgba(20, 36, 16, 0.18);
}
[data-theme="light"] html::-webkit-scrollbar-track { background: var(--bg-color); }
[data-theme="light"] .project-thumb {
    background: linear-gradient(135deg, var(--main-color), #b89456);
}
[data-theme="light"] .pfooter {
    background: var(--second-bg-color);
    border-top-color: rgba(20, 36, 16, 0.14);
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-padding-top: 8rem;
}

body {
    background: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    transition: background 0.4s ease, color 0.4s ease;
}

html::-webkit-scrollbar { width: 0.8rem; }
html::-webkit-scrollbar-track { background: var(--bg-color); }
html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--main-color), var(--accent));
    border-radius: 1rem;
}

/* ===== Scroll progress bar ===== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--main-color), var(--accent));
    z-index: 9999;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px var(--main-color);
}

/* ===== Background blobs ===== */
.bg-decor {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
}
.blob-1 { width: 420px; height: 420px; background: var(--main-color); top: -120px; left: -120px; }
.blob-2 { width: 320px; height: 320px; background: #1e7c2e; bottom: -100px; right: -120px; opacity: 0.22; }
.blob-3 { display: none; }

/* ===== Header / Navbar ===== */
.pheader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 9%;
    background: rgba(7, 8, 12, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    border-bottom: 1px solid var(--card-border);
    transition: padding 0.3s ease, background 0.3s ease;
}
.pheader.scrolled { padding: 1.2rem 9%; }

.plogo {
    font-size: 2.8rem;
    color: var(--text-color);
    font-weight: 800;
    cursor: pointer;
    transition: 0.5s ease;
    letter-spacing: 0.05rem;
}
.plogo span { color: var(--main-color); }
.plogo:hover { transform: scale(1.06); }

.pnavbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pnavbar a.nav-link {
    font-size: 1.6rem;
    color: var(--text-color);
    margin-left: 2.5rem;
    font-weight: 500;
    transition: 0.3s ease;
    position: relative;
    padding: 0.4rem 0;
}
.pnavbar a.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--main-color), var(--accent));
    transition: width 0.35s ease;
}
.pnavbar a.nav-link:hover::after,
.pnavbar a.nav-link.active::after { width: 100%; }
.pnavbar a.nav-link:hover,
.pnavbar a.nav-link.active { color: var(--main-color); }

.theme-toggle {
    margin-left: 2.5rem;
    background: var(--card-bg);
    color: var(--main-color);
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    border: 1px solid var(--card-border);
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle:hover {
    background: var(--main-color);
    color: #fff;
    transform: rotate(20deg) scale(1.05);
}

#pmenu-icon {
    font-size: 3rem;
    color: var(--main-color);
    display: none;
    cursor: pointer;
    z-index: 999;
    position: relative;
}

@media (max-width: 995px) {
    #pmenu-icon { display: block; }
    .pnavbar {
        position: absolute;
        top: 100%;
        right: 0;
        flex-direction: column;
        align-items: flex-start;
        width: 70%;
        max-width: 320px;
        border-left: 2px solid var(--main-color);
        border-bottom: 2px solid var(--main-color);
        border-bottom-left-radius: 1.6rem;
        padding: 2rem 2.5rem;
        background: rgba(15, 17, 23, 0.95);
        backdrop-filter: blur(14px);
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: all 0.4s ease-in-out;
        z-index: 98;
    }
    .pnavbar.active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .pnavbar a.nav-link {
        display: block;
        font-size: 1.8rem;
        margin: 1.2rem 0;
    }
    .theme-toggle { margin: 1.5rem 0 0; }
}

/* ===== Section base ===== */
section {
    min-height: 100vh;
    padding: 10rem 9% 6rem;
    position: relative;
}

.pheading {
    font-size: 4.6rem;
    text-align: center;
    margin-bottom: 5rem;
    font-weight: 700;
}
.pheading span { color: var(--main-color); }

/* ===== Reveal animation ===== */
[data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
[data-reveal].show {
    opacity: 1;
    transform: translateY(0);
}

/* ===== HOME / HERO ===== */
.phome {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    flex-wrap: wrap;
}
.phome-content { max-width: 60rem; }
.hello-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    padding: 0.6rem 1.4rem;
    border-radius: 4rem;
    margin-bottom: 1.5rem;
}
.hello-tag .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--main-color);
    box-shadow: 0 0 0 0 var(--main-color);
    animation: pulse 1.8s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0    rgba(var(--main-color-rgb), 0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(var(--main-color-rgb), 0);   }
    100% { box-shadow: 0 0 0 0    rgba(var(--main-color-rgb), 0);   }
}

.phome-content h1 {
    font-size: 6rem;
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.6rem;
}
.phome-content h1 span,
span { color: var(--main-color); }
/* Buttons need to keep their own text color (white) — exclude span inside .btn */
.btn span { color: inherit; }

.phome-content h3 {
    font-size: 3.2rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.phome-content #pisi-p {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--muted);
    text-align: justify;
    line-height: 1.7;
}

/* Hero image */
.phome-img {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.phome-img img {
    width: 32rem;
    max-width: 80vw;
    height: 32rem;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 40px var(--shadow-color);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: 0.4s ease;
}
.phome-img img:hover { transform: scale(1.04); }
.img-ring {
    position: absolute;
    width: 36rem;
    height: 36rem;
    max-width: 92vw;
    border-radius: 50%;
    border: 2px dashed var(--main-color);
    opacity: 0.45;
    animation: rotateRing 30s linear infinite;
    will-change: transform;
}
@keyframes rotateRing { to { transform: rotate(360deg); } }
.paused .img-ring,
.paused .particle,
.paused .shimmer,
.paused .ptyping-text span::before,
.paused .ptyping-text span::after,
.paused .hello-tag .dot,
.paused .scroll-indicator::after,
.paused .pheading::before { animation-play-state: paused; }

/* Social */
.psocial-icon {
    margin: 2rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.psocial-icon a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 4.4rem;
    height: 4.4rem;
    background: transparent;
    border: 0.2rem solid var(--main-color);
    font-size: 2rem;
    border-radius: 50%;
    color: var(--main-color);
    transition: 0.3s ease;
}
.psocial-icon a:hover {
    color: #fff;
    transform: translateY(-5px) scale(1.12);
    background: var(--main-color);
    box-shadow: 0 8px 20px var(--shadow-color);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.1rem 2.8rem;
    background: linear-gradient(135deg, var(--main-color), var(--accent));
    border-radius: 4rem;
    font-size: 1.5rem;
    color: #fff;
    border: 2px solid transparent;
    letter-spacing: 0.05rem;
    font-weight: 600;
    transition: 0.3s ease;
    cursor: pointer;
    box-shadow: 0 8px 20px var(--shadow-color);
}
.btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px var(--shadow-color);
    filter: brightness(1.1);
}
.btn-ghost {
    background: transparent;
    color: var(--main-color);
    border: 2px solid var(--main-color);
    box-shadow: none;
}
.btn-ghost:hover {
    background: var(--main-color);
    color: #fff;
}
.hero-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1rem; }

/* Typing text */
.ptyping-text {
    font-size: 3rem;
    font-weight: 700;
    min-width: 380px;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}
.ptyping-text span {
    position: relative;
    display: inline-block;
}
.ptyping-text span::before {
    content: 'Software Developer';
    color: var(--main-color);
    animation: words 20s infinite;
}
.ptyping-text span::after {
    content: '';
    background: var(--bg-color);
    position: absolute;
    width: calc(100% + 8px);
    height: 100%;
    border-left: 3px solid var(--bg-color);
    right: -8px;
    animation: cursor 0.6s infinite, typing 20s steps(14) infinite;
}
@keyframes cursor { to { border-left: 3px solid var(--main-color); } }
@keyframes words {
    0%, 20%   { content: 'Web Developer'; }
    21%, 40%  { content: 'Database Manager'; }
    41%, 60%  { content: 'Web Designer'; }
    61%, 80%  { content: 'Front-End Developer'; }
    81%, 100% { content: 'Back-End Developer'; }
}
@keyframes typing {
    10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95% { width: 0; }
    5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85%       { width: calc(100% + 8px); }
}

/* ===== SERVICES ===== */
#pservices { background: var(--second-bg-color); }
.pservices-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}
.pservices-box {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 2rem;
    padding: 3rem 2.5rem;
    cursor: pointer;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    overflow: hidden;
}
.pservices-box:hover {
    border-color: var(--main-color);
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px var(--shadow-color);
}
.pservices-box > * { position: relative; z-index: 1; }
.service-icon {
    font-size: 3.2rem;
    color: var(--main-color);
    margin-bottom: 1.2rem;
    display: inline-block;
    transition: transform 0.4s ease;
}
.pservices-box:hover .service-icon { transform: rotate(-8deg) scale(1.15); }
.pservices-info { display: flex; flex-direction: column; }
.pservices-info h4 {
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-color);
}
.pservices-info p {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 991px) { .pservices-container { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pservices-container { grid-template-columns: 1fr; } }

/* ===== SKILLS ===== */
#pskill { background: var(--bg-color); }
.pskill .pcontainer {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    border-radius: 1.6rem;
    padding: 3rem;
    width: 80%;
    margin: 0 auto;
}
.pskill .pcontainer .prow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
}
.pskill .pcontainer .pbar {
    padding: 1.5rem 1rem;
    border-radius: 1.2rem;
    background: var(--bg-color);
    border: 1px solid var(--card-border);
    transition: 0.3s ease;
}
.pskill .pcontainer .pbar:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px var(--shadow-color);
    border-color: var(--main-color);
}
.pskill .pcontainer .pbar .pinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}
.pskill .pcontainer .pbar .pinfo span {
    font-size: 1.6rem;
    font-weight: 600;
}
.pskill .pcontainer .pbar img {
    height: 80px;
    width: 80px;
    object-fit: contain;
    transition: transform 0.4s ease;
}
.pskill .pcontainer .pbar:hover img { transform: scale(1.1) rotate(-5deg); }

/* Skill bar */
.bar-track {
    width: 100%;
    height: 6px;
    background: var(--card-border);
    border-radius: 4rem;
    overflow: hidden;
    margin-top: 0.5rem;
}
.bar-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--main-color), var(--accent));
    border-radius: 4rem;
    transition: width 1.4s cubic-bezier(.2,.8,.2,1);
}

/* ===== EDUCATION ===== */
.pendidikan { background: var(--second-bg-color); }
.pendidikan .timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}
.pendidikan .timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background: linear-gradient(180deg, var(--main-color), transparent);
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    z-index: 0;
}
.pendidikan .container {
    padding: 1rem 4rem;
    position: relative;
    width: 50%;
}
.pendidikan .container::after {
    content: '\f19d';
    position: absolute;
    width: 36px;
    height: 36px;
    line-height: 30px;
    right: -18px;
    background: var(--bg-color);
    border: 3px solid var(--main-color);
    top: 22px;
    border-radius: 50%;
    z-index: 5;
    font-size: 1.6rem;
    text-align: center;
    font-weight: 900;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    color: var(--main-color);
    box-shadow: 0 0 12px var(--shadow-color);
}
.pendidikan .left  { left: 0; }
.pendidikan .right { left: 50%; }
.pendidikan .right::after { left: -18px; right: auto; }
.pendidikan .left::after { right: -18px; left: auto; }

.pendidikan .content {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    padding: 1.6rem 2rem;
    transition: 0.3s ease;
}
.pendidikan .content:hover {
    transform: translateY(-4px);
    border-color: var(--main-color);
    box-shadow: 0 10px 24px var(--shadow-color);
}
.pendidikan .content .tag {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.school-logo { width: 40px; height: 40px; object-fit: contain; }
.pendidikan .content .tag h2 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--main-color);
}
.pendidikan .content .decs p {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.6;
}

@media screen and (max-width: 768px) {
    .pendidikan .timeline::after { left: 20px; }
    .pendidikan .container { width: 100%; padding-left: 6rem; padding-right: 1rem; }
    .pendidikan .right { left: 0; }
    .pendidikan .container::after,
    .pendidikan .right::after { left: 2px; right: auto; }
}

/* ===== PROJECTS ===== */
.pengalaman { background: var(--bg-color); }
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.project-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1.6rem;
    overflow: hidden;
    transition: 0.4s ease;
    cursor: pointer;
}
.project-card:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: var(--main-color);
    box-shadow: 0 20px 40px var(--shadow-color);
}
.project-thumb i { transition: transform 0.5s ease; }
.project-card:hover .project-thumb i { transform: scale(1.15) rotate(8deg); }
.project-thumb {
    height: 200px;
    background: linear-gradient(135deg, var(--main-color), #1e90ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.project-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 50%);
    pointer-events: none;
}
/* === PROJECT IMAGE: covers thumb if loaded; falls back to icon if 404 === */
.project-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transition: transform 0.6s ease, filter 0.4s ease;
    will-change: transform;
}
/* When image is present, dim/hide the fallback icon underneath */
.project-thumb:has(.project-img:not([style*="display: none"])) > i {
    opacity: 0;
}
.project-card:hover .project-img {
    transform: scale(1.08);
    filter: brightness(1.05) saturate(1.1);
}
.project-body { padding: 2rem; }
.project-body h4 {
    font-size: 2rem;
    margin-bottom: 0.8rem;
    color: var(--text-color);
}
.project-body p {
    font-size: 1.4rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 1.2rem;
}
.tags { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tags span {
    font-size: 1.2rem;
    padding: 0.3rem 0.9rem;
    border-radius: 4rem;
    background: var(--card-bg);
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

/* ===== CONTACT ===== */
.contact { background: var(--second-bg-color); }
.contact form {
    max-width: 70rem;
    margin: 1rem auto;
    text-align: center;
}
.contact form .input-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.4rem;
}
.contact form input,
.contact form textarea {
    width: 100%;
    padding: 1.4rem 1.6rem;
    color: var(--text-color);
    background: var(--card-bg);
    border-radius: 0.8rem;
    border: 1px solid var(--card-border);
    font-size: 1.5rem;
    margin: 0.5rem 0;
    resize: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.contact form input::placeholder,
.contact form textarea::placeholder { color: var(--muted); }
.contact form input:focus,
.contact form textarea:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 4px var(--shadow-color);
}
.contact form textarea { margin-top: 1rem; }
.contact form .btn { margin-top: 2rem; }

@media (max-width: 600px) {
    .contact form .input-box { grid-template-columns: 1fr; }
}

/* ===== Pop up Wa ===== */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
.popup-overlay.active { opacity: 1; visibility: visible; }

.ke-wa-bae {
    position: fixed;
    top: 50%;
    left: 50%;
    background: var(--second-bg-color);
    padding: 3rem 2.5rem;
    text-align: center;
    z-index: 9999;
    border-radius: 1.6rem;
    border: 2px solid var(--main-color);
    width: min(44rem, 92vw);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.85);
    transition: opacity 0.4s ease, transform 0.4s ease;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
.ke-wa-bae .popup-close {
    position: absolute;
    top: 0.8rem;
    right: 1.2rem;
    background: transparent;
    color: var(--muted);
    font-size: 2.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.4rem;
    transition: color 0.2s ease, transform 0.2s ease;
}
.ke-wa-bae .popup-close:hover { color: var(--main-color); transform: rotate(90deg); }
.ke-wa-bae.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
body.no-scroll { overflow: hidden; }
.ke-wa-bae p {
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
    color: var(--text-color);
}
.ke-wa-bae button {
    margin: 0.5rem;
    padding: 1rem 2rem;
    cursor: pointer;
}
.btn-iyo {
    background: var(--main-color);
    color: #fff;
    border-radius: 0.8rem;
    font-size: 1.6rem;
    font-weight: 600;
    transition: 0.3s ease;
    border: 2px solid var(--main-color);
}
.btn-iyo:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px var(--shadow-color);
}
.btn-idak {
    background: transparent;
    color: var(--muted);
    border-radius: 0.8rem;
    font-size: 1.6rem;
    font-weight: 600;
    border: 2px solid var(--card-border);
    transition: 0.3s ease;
}
.btn-idak:hover {
    background: var(--card-bg);
    color: var(--text-color);
    border-color: var(--text-color);
    transform: translateY(-3px);
}

/* ===== Footer (full styles defined later in "Footer redesigned" section ~L1553) ===== */
/* Old duplicate block removed — was forcing .pfooter i to pink which broke social brand icon colors */

/* ===== Back to top ===== */
.back-to-top {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--main-color), var(--accent));
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px var(--shadow-color);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: 0.3s ease;
    z-index: 90;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.back-to-top:hover { transform: translateY(-4px); filter: brightness(1.1); }

/* ===== Toast ===== */
.toast-container {
    position: fixed;
    top: 9rem;
    right: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    z-index: 10000;
    pointer-events: none;
}
.toast {
    background: var(--second-bg-color);
    color: var(--text-color);
    border: 1px solid var(--main-color);
    padding: 1.2rem 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    min-width: 220px;
    max-width: 320px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 0.3s ease, transform 0.4s ease;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.success { border-color: var(--main-color); }
.toast.success i { color: var(--main-color); }
.toast.error { border-color: #c47b3a; }
.toast.error i { color: #c47b3a; }
.toast.info i { color: #1e90ff; }

/* ===== Accessibility ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.theme-toggle:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 3px;
    border-radius: 4px;
}
.skip-link {
    position: absolute;
    top: -40px;
    left: 1rem;
    background: var(--main-color);
    color: #fff;
    padding: 0.8rem 1.4rem;
    border-radius: 0.6rem;
    z-index: 10001;
    font-size: 1.4rem;
    font-weight: 600;
    transition: top 0.3s ease;
}
.skip-link:focus { top: 1rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .blob, .img-ring { animation: none; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 995px) {
    section { padding: 10rem 5% 4rem; }
    .pheader { padding: 2rem 5%; }
    .phome { flex-direction: column-reverse; gap: 4rem; text-align: center; }
    .hello-tag, .hero-actions { justify-content: center; margin-left: auto; margin-right: auto; }
    .psocial-icon { justify-content: center; }
    .phome-content #pisi-p { text-align: center; }
    .phome-content h1 { font-size: 4.6rem; }
    .phome-content h3 { font-size: 2.6rem; }
    .pheading { font-size: 3.6rem; }
    .pskill .pcontainer { width: 100%; }
    .ptyping-text { min-width: 0; font-size: 2.4rem; }
}

@media (max-width: 600px) {
    html { font-size: 56%; }
    .phome-img img { width: 24rem; height: 24rem; }
    .img-ring { width: 28rem; height: 28rem; }
}

/* =========================================================
   NEW FEATURES
   ========================================================= */

/* ===== Preloader ===== */
.preloader {
    position: fixed;
    inset: 0;
    background: var(--bg-color);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring {
    width: 60px;
    height: 60px;
    border: 4px solid var(--card-border);
    border-top-color: var(--main-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-text {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: 0.1em;
}
.loader-text span { color: var(--main-color); }

/* (cursor glow removed for performance) */
.cursor-glow { display: none !important; }

/* ===== Floating particles in hero ===== */
.particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--main-color);
    opacity: 0.5;
    animation: floatUp linear infinite;
    will-change: transform, opacity;
    box-shadow: 0 0 8px var(--main-color);
}
[data-theme="light"] .particle {
    /* Soft glowing pollen feel for morning theme */
    background: rgba(251, 191, 36, 0.7);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.5);
    opacity: 0.4;
}
@keyframes floatUp {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.6; }
    100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}
.phome > .phome-content,
.phome > .phome-img { position: relative; z-index: 2; }

/* ===== Shimmer text ===== */
.shimmer {
    background: linear-gradient(90deg, var(--main-color), var(--accent), #c9a86a, var(--accent), var(--main-color));
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerMove 4s linear infinite;
}
@keyframes shimmerMove {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== Stats / Counter section ===== */
.stats-section {
    background: var(--bg-color);
    min-height: auto;
    padding: 6rem 9%;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.stat-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1.6rem;
    padding: 3rem 2rem;
    text-align: center;
    transition: 0.4s ease;
    position: relative;
    overflow: hidden;
}
.stat-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--main-color), var(--accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}
.stat-item:hover {
    transform: translateY(-8px);
    border-color: var(--main-color);
    box-shadow: 0 20px 40px var(--shadow-color);
}
.stat-item:hover::before { transform: scaleX(1); }
.stat-icon {
    font-size: 2.6rem;
    color: var(--main-color);
    margin-bottom: 1rem;
    display: inline-block;
    transition: transform 0.4s ease;
}
.stat-item:hover .stat-icon { transform: rotate(-12deg) scale(1.15); }
.stat-number {
    font-size: 4.6rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1;
    margin-bottom: 0.6rem;
    background: linear-gradient(135deg, var(--main-color), var(--accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-item p {
    font-size: 1.4rem;
    color: var(--muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }

/* ===== Magnetic button compatibility ===== */
.btn { will-change: transform; }

/* (noise overlay removed for performance) */

/* ===== content-visibility: skip rendering of off-screen sections ===== */
/* Per-section intrinsic sizes match real heights so scrolling doesn't cause shift */
.pservices       { content-visibility: auto; contain-intrinsic-size: 100vw 1100px; }
.pskill          { content-visibility: auto; contain-intrinsic-size: 100vw 1300px; }
.pendidikan      { content-visibility: auto; contain-intrinsic-size: 100vw 1200px; }
.pengalaman      { content-visibility: auto; contain-intrinsic-size: 100vw 1400px; }
.contact         { content-visibility: auto; contain-intrinsic-size: 100vw 1100px; }
.pfooter         { content-visibility: auto; contain-intrinsic-size: 100vw 600px; }
.stats-section   { content-visibility: auto; contain-intrinsic-size: 100vw 300px; }

/* ===== Containment on repeated components ===== */
/* Isolates each card/timeline-item so internal hover/animation doesn't reflow the page */
.service-card,
.project-card,
.timeline-item,
.skill-card,
.pbar,
.tech-card,
.contact-info-item {
    contain: layout paint;
}

/* Parent .scene-decor isolates paint/layout for the entire decor system — no need
   to add contain on intermediate wrappers (.galaxy-decor, .morning-decor, etc).
   Those wrappers have no explicit size and would clip their absolutely-positioned
   children to a 0-height box if contain: paint were applied. */
.scene-decor,
.particles-bg {
    contain: layout paint;
}
.galaxy-decor,
.morning-decor,
.constellation,
.particles-bg {
    pointer-events: none;
}

/* ===== Tech Marquee ===== */
.tech-marquee {
    overflow: hidden;
    background: var(--card-bg);
    border-block: 1px solid var(--card-border);
    padding: 1.4rem 0;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
    display: flex;
    gap: 4rem;
    width: max-content;
    animation: marquee 30s linear infinite;
}
.marquee-track span {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    opacity: 0.75;
    transition: 0.3s ease;
}
.marquee-track span:hover { opacity: 1; color: var(--main-color); transform: scale(1.06); }
.marquee-track span i { color: var(--main-color); font-size: 2rem; }
.tech-marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ===== Tilt cards (lift only, no follow effects) ===== */
.tilt { position: relative; }
.tilt > * { position: relative; z-index: 1; }

/* (Section number decoration removed per design update) */

/* ===== Heading decoration line ===== */
.pheading {
    position: relative;
    display: block;
    padding-bottom: 1.6rem;
}
.pheading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--main-color), var(--accent));
    transform: translateX(-50%);
    border-radius: 4px;
}
.pheading::before {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 8px;
    height: 8px;
    background: var(--main-color);
    border-radius: 50%;
    transform: translateX(140%);
    box-shadow: 0 0 12px var(--main-color);
    animation: dotMove 3s ease-in-out infinite;
}
@keyframes dotMove {
    0%, 100% { transform: translateX(140%); }
    50%      { transform: translateX(-340%); }
}

/* Make sure content stays above noise/section number */
section > * { position: relative; z-index: 2; }

/* ===== Hero dot grid pattern ===== */
.phome::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, var(--main-color) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.08;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%);
    z-index: 0;
}
[data-theme="light"] .phome::before { opacity: 0.14; }

/* ===== Sticky social bar (left side, desktop only) ===== */
.social-sticky {
    position: fixed;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.social-sticky.show {
    opacity: 1;
    visibility: visible;
}
.social-sticky a {
    width: 3.6rem;
    height: 3.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    font-size: 1.4rem;
    transition: 0.3s ease;
}
.social-sticky a:hover {
    background: var(--main-color);
    color: #fff;
    transform: translateX(4px) scale(1.1);
    border-color: var(--main-color);
}
.social-sticky::after {
    content: '';
    width: 2px;
    height: 50px;
    background: var(--card-border);
    margin: 0 auto;
}
@media (max-width: 1100px) { .social-sticky { display: none; } }

/* ===== Project card overlay actions ===== */
.project-thumb { position: relative; }
.project-overlay {
    position: absolute;
    inset: 0;
    z-index: 2; /* above .project-img */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: rgba(7, 8, 12, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.project-card:hover .project-overlay { opacity: 1; }
.project-overlay a {
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #14241c;
    font-size: 1.6rem;
    transition: 0.3s ease;
    transform: translateY(10px);
    opacity: 0;
}
.project-card:hover .project-overlay a {
    transform: translateY(0);
    opacity: 1;
}
.project-card:hover .project-overlay a:nth-child(1) { transition-delay: 0.05s; }
.project-card:hover .project-overlay a:nth-child(2) { transition-delay: 0.15s; }
.project-overlay a:hover {
    background: var(--main-color);
    color: #fff;
    transform: scale(1.15) !important;
}

/* ===== Contact info cards ===== */
.contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 70rem;
    margin: 0 auto 3rem;
}
.contact-info-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    padding: 1.6rem 1.2rem;
    text-align: center;
    transition: 0.3s ease;
}
.contact-info-card:hover {
    transform: translateY(-4px);
    border-color: var(--main-color);
    box-shadow: 0 10px 24px var(--shadow-color);
}
.contact-info-card i {
    font-size: 2.2rem;
    color: var(--main-color);
    margin-bottom: 0.8rem;
    display: block;
}
.contact-info-card h5 {
    font-size: 1.4rem;
    color: var(--text-color);
    margin-bottom: 0.3rem;
    font-weight: 600;
}
.contact-info-card a, .contact-info-card span {
    font-size: 1.3rem;
    color: var(--muted);
    word-break: break-word;
}
.contact-info-card a:hover { color: var(--main-color); }
@media (max-width: 700px) { .contact-info { grid-template-columns: 1fr; } }

/* =========================================================
   ELEGANT POLISH (no cursor follow effects)
   ========================================================= */

/* ===== Section subtitle eyebrow above pheading ===== */
.section-eyebrow {
    display: block;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--main-color);
    margin-bottom: 1rem;
    opacity: 0.85;
}

/* ===== Subtle accent line on top of cards (replaces problematic gradient border) ===== */
.pservices-box,
.project-card {
    position: relative;
    isolation: isolate;
}
.pservices-box::after,
.project-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--main-color), var(--accent), #c9a86a, transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease;
    z-index: 2;
}
.pservices-box:hover::after,
.project-card:hover::after { transform: scaleX(1); }

/* ===== Scroll-down indicator at bottom of hero ===== */
.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: 3rem;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    z-index: 3;
    opacity: 0.8;
    text-decoration: none;
}
.scroll-indicator::after {
    content: '';
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, var(--main-color), transparent);
    animation: scrollLine 2s ease-in-out infinite;
    transform-origin: top;
}
@keyframes scrollLine {
    0%   { transform: scaleY(0); }
    50%  { transform: scaleY(1); }
    100% { transform: scaleY(0); transform-origin: bottom; }
}
.paused .scroll-indicator::after { animation-play-state: paused; }
@media (max-width: 768px) { .scroll-indicator { display: none; } }

/* ===== Floating labels for contact form ===== */
.contact form .input-box,
.contact form { position: relative; }
.field {
    position: relative;
}
.field input,
.field textarea {
    width: 100%;
    padding: 1.6rem 1.4rem 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 0.8rem;
    color: var(--text-color);
    font-size: 1.5rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
}
.field input:focus,
.field textarea:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px var(--shadow-color);
    outline: none;
}
.field label {
    position: absolute;
    left: 1.4rem;
    top: 1.4rem;
    color: var(--muted);
    font-size: 1.4rem;
    pointer-events: none;
    transition: 0.25s ease;
    background: transparent;
    padding: 0 0.4rem;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
    top: -0.7rem;
    left: 1rem;
    font-size: 1.2rem;
    color: var(--main-color);
    background: var(--second-bg-color);
}

/* ===== Footer redesigned ===== */
.pfooter {
    text-align: left;
    padding: 5rem 9% 2rem;
    background: var(--second-bg-color);
    border-top: 1px solid var(--card-border);
    color: var(--muted);
    font-size: 1.4rem;
}
.pfooter-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}
.pfooter h5 {
    color: var(--text-color);
    font-size: 1.6rem;
    margin-bottom: 1.4rem;
    font-weight: 600;
}
.pfooter-brand p {
    margin-top: 1rem;
    line-height: 1.7;
    max-width: 36rem;
}
.pfooter-logo {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-color);
}
.pfooter-logo span { color: var(--main-color); }
.pfooter-list { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.pfooter-list a {
    color: var(--muted);
    font-size: 1.4rem;
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.pfooter-list a::before {
    content: '\f054';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.9rem;
    color: var(--main-color);
    transition: transform 0.3s ease;
}
.pfooter-list a:hover {
    color: var(--main-color);
    transform: translateX(4px);
}
.pfooter-social {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
}
.pfooter-social a {
    width: 3.6rem; height: 3.6rem;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}
.pfooter-social a:hover {
    background: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
    transform: translateY(-3px);
}
.pfooter-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.6rem 1.2rem;
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid var(--card-border);
    font-size: 1.3rem;
    color: var(--muted);
}
.pfooter-bottom i.fa-heart { color: #ef4444; margin: 0 0.2rem; }
.pfooter-divider { color: var(--card-border); font-size: 1rem; opacity: 0.7; }
@media (max-width: 600px) {
    .pfooter-divider { display: none; }
    .pfooter-bottom { gap: 0.4rem; flex-direction: column; }
}
@media (max-width: 768px) {
    .pfooter-grid { grid-template-columns: 1fr; gap: 2rem; }
    .pfooter { text-align: center; padding: 4rem 5% 2rem; }
    .pfooter-list { align-items: center; }
    .pfooter-social { justify-content: center; }
}

/* ===== CSS-only ripple effect on buttons ===== */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: rippleExpand 0.6s ease-out;
    pointer-events: none;
    z-index: 0;
}
@keyframes rippleExpand {
    to { transform: scale(4); opacity: 0; }
}

/* ===== Skill icon richer hover (CSS-only) ===== */
.pskill .pcontainer .pbar {
    cursor: pointer;
    position: relative;
}
.pskill .pcontainer .pbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, var(--main-color), transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.pskill .pcontainer .pbar:hover::before { opacity: 0.12; }
.pskill .pcontainer .pbar:hover img { animation: bounceY 0.6s ease; }
@keyframes bounceY {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-8px) scale(1.12); }
    100% { transform: translateY(0) scale(1.08) rotate(-4deg); }
}

/* ===== Service icon spin on card hover ===== */
.pservices-box:hover .service-icon { animation: spinPop 0.6s ease; }
@keyframes spinPop {
    0%   { transform: rotate(0) scale(1); }
    50%  { transform: rotate(-15deg) scale(1.2); }
    100% { transform: rotate(0) scale(1.1); }
}

/* ===== Stat-item hover richer ===== */
.stat-item:hover .stat-icon { animation: spinPop 0.6s ease; }

/* ===== Marquee pause when off-screen via .paused-mq ===== */
.paused-mq .marquee-track { animation-play-state: paused; }

/* =========================================================
   UNIFIED HOVER STYLE — consistent accent line + animations
   ========================================================= */

/* Accent line on top of cards (also on skills container, education, stat, contact) */
.pskill .pcontainer,
.pendidikan .content,
.stat-item,
.contact-info-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.pskill .pcontainer::after,
.pendidikan .content::after,
.stat-item::after,
.contact-info-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--main-color), var(--accent), #c9a86a, transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s ease;
    z-index: 3;
    pointer-events: none;
}
.pskill .pcontainer:hover::after,
.pendidikan .content:hover::after,
.stat-item:hover::after,
.contact-info-card:hover::after { transform: scaleX(1); }

/* ===== Skill bar shimmer effect (CSS-only, paused off-screen) ===== */
.bar-track { position: relative; overflow: hidden; }
.bar-fill {
    position: relative;
    overflow: hidden;
}
.bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: barShimmer 2.5s ease-in-out infinite;
    animation-delay: 1.2s;
}
@keyframes barShimmer {
    0%   { left: -50%; }
    100% { left: 150%; }
}
.paused-skills .bar-fill::after { animation-play-state: paused; }

/* ===== Skill percentage tooltip on hover (data-level set by JS on .pbar) ===== */
.pbar::after {
    content: attr(data-level) "%";
    position: absolute;
    top: 0.4rem;
    right: 0.8rem;
    background: var(--main-color);
    color: #fff;
    padding: 0.2rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    z-index: 4;
}
.pbar:hover::after {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Education timeline interactivity ===== */
.pendidikan .content { transition: transform 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.pendidikan .content:hover .school-logo {
    animation: spinPop 0.6s ease;
}
.pendidikan .content:hover h2 { color: var(--main-color); }
.pendidikan .content h2 { transition: color 0.3s ease; }

/* Education marker pulse on hover */
.pendidikan .container:hover::after {
    transform: scale(1.15);
    box-shadow: 0 0 24px var(--shadow-color), 0 0 0 6px rgba(var(--main-color-rgb), 0.15);
}
.pendidikan .container::after { transition: transform 0.4s ease, box-shadow 0.4s ease; }

/* ===== Stat number gradient text on hover ===== */
.stat-number { transition: background 0.3s ease, color 0.3s ease; }
.stat-item:hover .stat-number {
    background: linear-gradient(135deg, var(--main-color), var(--accent), #c9a86a);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ===== Contact info card interactivity ===== */
.contact-info-card i {
    transition: transform 0.4s ease;
    display: inline-block;
}
.contact-info-card:hover i { animation: spinPop 0.6s ease; }

/* ===== Section eyebrow shine on view ===== */
.section-eyebrow {
    background: linear-gradient(90deg, var(--main-color), #c9a86a, var(--main-color));
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: eyebrowShine 4s linear infinite;
}
@keyframes eyebrowShine {
    to { background-position: -200% 0; }
}
.paused .section-eyebrow,
.paused-mq .section-eyebrow { animation-play-state: paused; }

/* ===== Project tags ripple on hover ===== */
.tags span {
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    cursor: default;
}
.tags span:hover {
    transform: translateY(-3px) scale(1.08);
    background: var(--main-color);
    color: #fff;
}

/* ===== Footer social icons rotate on hover ===== */
.pfooter-social a i { transition: transform 0.4s ease; }
.pfooter-social a:hover i { transform: rotate(360deg); }

/* ===== Hero hello-tag pulse on hover ===== */
.hello-tag {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}
.hello-tag:hover {
    transform: translateY(-2px);
    border-color: var(--main-color);
    box-shadow: 0 4px 14px var(--shadow-color);
}

/* ===== Performance: only animate visible ===== */
.bar-fill, .stat-number, .pheading, .img-ring { will-change: transform; }

/* =========================================================
   NEW INTERACTIVE FEATURES (lightweight)
   ========================================================= */

/* ===== Scroll progress bar (top of page) ===== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--main-color), var(--accent), #c9a86a);
    transform-origin: left;
    transform: scaleX(0);
    z-index: 1100;
    pointer-events: none;
    will-change: transform;
}

/* ===== Available for hire badge ===== */
.available-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1rem;
    background: var(--badge-tint);
    border: 1px solid var(--main-color);
    border-radius: 4rem;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--main-color);
    margin-bottom: 1.4rem;
    cursor: default;
    transition: 0.3s ease;
}
.available-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px var(--shadow-color);
}
.available-badge .ping {
    position: relative;
    width: 8px;
    height: 8px;
    background: var(--main-color);
    border-radius: 50%;
}
.available-badge .ping::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    border-radius: 50%;
    animation: pingExpand 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes pingExpand {
    0%   { transform: scale(1); opacity: 0.7; }
    80%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}
.paused .available-badge .ping::before { animation-play-state: paused; }

/* ===== Social sticky tooltip on hover ===== */
.social-sticky a {
    position: relative;
}
.social-sticky a::after {
    content: attr(aria-label);
    position: absolute;
    left: calc(100% + 1.2rem);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    background: var(--main-color);
    color: #fff;
    padding: 0.3rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.social-sticky a::before {
    content: '';
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    width: 0; height: 0;
    border: 5px solid transparent;
    border-right-color: var(--main-color);
    transform: translateY(-50%) translateX(-4px);
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}
.social-sticky a:hover::after,
.social-sticky a:hover::before {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* ===== Theme toggle click animation (.flip class added by JS) ===== */
.theme-toggle i { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.theme-toggle.flip i { transform: rotate(360deg) scale(0.8); }

/* ===== Timeline center line draws on scroll (extends original responsive line) ===== */
.pendidikan .timeline::after {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.5s ease 0.2s;
    background: linear-gradient(180deg, transparent, var(--main-color), var(--accent), var(--main-color), transparent);
    width: 3px;
    margin-left: -1.5px;
    z-index: 0;
}
.pendidikan .container::after { z-index: 5; }
.pendidikan .timeline.in-view::after { transform: scaleY(1); }

/* (Service "Learn more" arrow removed — cleaner card per previous design) */
.pservices-info::after {
    content: none;
    display: none;
    margin-top: 0;
    color: transparent;
    font-size: 1.3rem;
    font-weight: 600;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.pservices-box:hover .pservices-info::after {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Hero photo glow burst on click (.burst class added by JS) ===== */
.phome-img img.burst { animation: burst 0.6s ease; }
@keyframes burst {
    0%   { transform: scale(1); box-shadow: 0 0 40px var(--shadow-color); }
    50%  { transform: scale(1.05); box-shadow: 0 0 80px var(--main-color); }
    100% { transform: scale(1); box-shadow: 0 0 40px var(--shadow-color); }
}

/* ===== Stat icon container with subtle glow ===== */
.stat-item { transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; }
.stat-item:hover { transform: translateY(-6px); }

/* ===== Magnetic-style nav highlight (slide indicator, fades cleanly) ===== */
.pnavbar { position: relative; }
@media (min-width: 996px) {
    .pnavbar::before {
        content: '';
        position: absolute;
        bottom: -0.4rem;
        left: var(--nav-x, 0);
        width: var(--nav-w, 0);
        height: 2px;
        background: linear-gradient(90deg, var(--main-color), #c9a86a);
        border-radius: 2px;
        transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.25s ease;
        opacity: var(--nav-op, 0);
        pointer-events: none;
    }
}

/* =========================================================
   ADDITIONAL LIGHTWEIGHT ANIMATIONS
   ========================================================= */

/* ===== Education marker pop on view (gentle, never invisible) ===== */
.pendidikan .timeline.in-view .container::after {
    animation: markerPop 0.5s ease-out;
}
.pendidikan .timeline.in-view .container:nth-child(1)::after { animation-delay: 0.3s; }
.pendidikan .timeline.in-view .container:nth-child(2)::after { animation-delay: 0.5s; }
.pendidikan .timeline.in-view .container:nth-child(3)::after { animation-delay: 0.7s; }
.pendidikan .timeline.in-view .container:nth-child(4)::after { animation-delay: 0.9s; }
@keyframes markerPop {
    0%   { box-shadow: 0 0 0 0 var(--main-color); }
    50%  { box-shadow: 0 0 0 6px rgba(var(--main-color-rgb), 0.3); }
    100% { box-shadow: 0 0 12px var(--shadow-color); }
}

/* ===== Footer link underline expand on hover ===== */
.pfooter-list a {
    position: relative;
}
.pfooter-list a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 1.6rem;
    width: 0;
    height: 1px;
    background: var(--main-color);
    transition: width 0.3s ease;
}
.pfooter-list a:hover::after { width: calc(100% - 1.6rem); }

/* ===== Skill logo glow ring on hover ===== */
.pskill .pcontainer .pbar img {
    position: relative;
    z-index: 1;
}
.pskill .pcontainer .pbar .pinfo {
    position: relative;
}
.pskill .pcontainer .pbar .pinfo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translateX(-50%) scale(0);
    border-radius: 50%;
    background: radial-gradient(circle, var(--main-color), transparent 70%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}
@media (hover: hover) {
    .pskill .pcontainer .pbar:hover .pinfo::before {
        transform: translateX(-50%) scale(1);
        opacity: 0.25;
    }
}

/* ===== Hero photo orbit dot (desktop only, prevents mobile overflow) ===== */
.phome-img {
    position: relative;
}
@media (min-width: 996px) {
    .phome-img::after {
        content: '';
        position: absolute;
        width: 12px;
        height: 12px;
        background: var(--accent);
        border-radius: 50%;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        box-shadow: 0 0 16px var(--accent), 0 0 32px var(--main-color);
        animation: photoOrbit 8s linear infinite;
        z-index: 1;
    }
    @keyframes photoOrbit {
        from { transform: rotate(0deg) translateX(18rem) rotate(0deg); }
        to   { transform: rotate(360deg) translateX(18rem) rotate(-360deg); }
    }
    .paused .phome-img::after { animation-play-state: paused; }
}

/* ===== Stats reveal stagger (uses existing [data-reveal].show, just stagger) ===== */
.stats-grid .stat-item:nth-child(1) { transition-delay: 0s; }
.stats-grid .stat-item:nth-child(2) { transition-delay: 0.1s; }
.stats-grid .stat-item:nth-child(3) { transition-delay: 0.2s; }
.stats-grid .stat-item:nth-child(4) { transition-delay: 0.3s; }

/* ===== Project card image zoom on hover ===== */
.project-card { overflow: hidden; }
.project-thumb { transition: transform 0.6s ease; }
@media (hover: hover) {
    .project-card:hover .project-thumb { transform: scale(1.06); }
}

/* (Service border pulse removed — cleaner per previous design) */

/* ===== NEW: Hero greeting tag has waving emoji feel via combined pulse + slight bob ===== */
.hello-tag .dot {
    animation: pulse 1.8s infinite, helloBob 3s ease-in-out infinite;
}
@keyframes helloBob {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-2px) scale(1.15); }
}

/* ===== NEW: Skill bar finishing pulse (1-time after fill) ===== */
.bar-fill {
    transition: width 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bar-fill[style*="%"] {
    animation: barFinishPulse 1s ease-out 1.5s 1 backwards;
}
@keyframes barFinishPulse {
    0%   { box-shadow: 0 0 0 0 var(--main-color); }
    50%  { box-shadow: 0 0 8px 2px var(--main-color); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ===== NEW: Hero photo gentle breathing ===== */
.phome-img img {
    animation: photoBreathe 5s ease-in-out infinite;
}
@keyframes photoBreathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.015); }
}
.paused .phome-img img { animation-play-state: paused; }
@media (hover: hover) {
    .phome-img img:hover { animation: none; transform: scale(1.04); }
}

/* ===== NEW: Marquee fade edges (cleaner edge look) ===== */
.tech-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* ===== NEW: Project tags stagger entrance on view ===== */
.project-card.show .tags span {
    animation: tagPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.project-card.show .tags span:nth-child(1) { animation-delay: 0.2s; }
.project-card.show .tags span:nth-child(2) { animation-delay: 0.3s; }
.project-card.show .tags span:nth-child(3) { animation-delay: 0.4s; }
.project-card.show .tags span:nth-child(4) { animation-delay: 0.5s; }
@keyframes tagPop {
    0%   { transform: scale(0) translateY(8px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ===== NEW: Stat-icon glow on hover (already spinPop, add glow) ===== */
.stat-icon {
    transition: filter 0.3s ease;
}
@media (hover: hover) {
    .stat-item:hover .stat-icon {
        filter: drop-shadow(0 0 8px var(--main-color));
    }
}

/* (eyebrow underline removed — was breaking layout. Shine animation kept) */

/* ===== NEW: Footer "Yuga." logo subtle pulse ===== */
.pfooter-logo {
    display: inline-block;
    transition: transform 0.3s ease;
}
.pfooter-logo span {
    display: inline-block;
    animation: dotPulse 2s ease-in-out infinite;
    transform-origin: center;
}
.pfooter-logo:hover { transform: translateY(-2px); }
@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}

/* ===== NEW: Available badge entrance scale-in ===== */
.phome-content.show .available-badge {
    animation: badgeEntry 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s backwards;
}
@keyframes badgeEntry {
    0%   { transform: scale(0) translateY(-4px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* (Service icon orbit ring removed — cleaner card per previous design) */

/* ===== NEW: Hero buttons stagger entrance ===== */
.phome-content.show .hero-actions .btn:nth-child(1) {
    animation: btnSlide 0.5s ease 0.6s backwards;
}
.phome-content.show .hero-actions .btn:nth-child(2) {
    animation: btnSlide 0.5s ease 0.75s backwards;
}
@keyframes btnSlide {
    0%   { transform: translateY(15px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* ===== NEW: Skill logo entrance pop on view (one-time) ===== */
.pskill .pcontainer.show .pbar img {
    animation: logoEntry 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}
.pskill .pcontainer.show .pbar:nth-child(1) img { animation-delay: 0.1s; }
.pskill .pcontainer.show .pbar:nth-child(2) img { animation-delay: 0.2s; }
.pskill .pcontainer.show .pbar:nth-child(3) img { animation-delay: 0.3s; }
.pskill .pcontainer.show .pbar:nth-child(4) img { animation-delay: 0.4s; }
.pskill .pcontainer.show .pbar:nth-child(5) img { animation-delay: 0.5s; }
.pskill .pcontainer.show .pbar:nth-child(6) img { animation-delay: 0.6s; }
@keyframes logoEntry {
    0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ===== NEW: Theme toggle hover ring (cleaner than border) ===== */
.theme-toggle {
    position: relative;
}
.theme-toggle::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--main-color);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
@media (hover: hover) {
    .theme-toggle:hover::before {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== NEW: Contact info card icon entrance (bounce-in then gentle float) ===== */
.contact-info.show .contact-info-card i {
    animation: iconBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
               pinDrop 4s ease-in-out infinite 0.8s;
}
.contact-info.show .contact-info-card:nth-child(1) i { animation-delay: 0.1s, 0.9s; }
.contact-info.show .contact-info-card:nth-child(2) i { animation-delay: 0.2s, 1.0s; }
.contact-info.show .contact-info-card:nth-child(3) i { animation-delay: 0.3s, 1.1s; }
@keyframes iconBounce {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}



/* ===== Service icon floating animation (paused off-screen, hover devices only) ===== */
@media (hover: hover) {
    .service-icon { animation: floatIcon 3s ease-in-out infinite; }
    .pservices-box:hover .service-icon { animation: spinPop 0.6s ease; }
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
section.paused .service-icon { animation-play-state: paused; }

/* =========================================================
   MOBILE OPTIMIZATION & TOUCH INTERACTIVITY
   ========================================================= */

/* Custom tap highlight (cleaner than browser default) */
* { -webkit-tap-highlight-color: transparent; }

/* Scope desktop hover effects to actual hover devices */
@media (hover: none) {
    .pservices-box:hover,
    .project-card:hover,
    .pendidikan .content:hover,
    .stat-item:hover,
    .contact-info-card:hover,
    .pskill .pcontainer .pbar:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Active (tap) state for cards on touch devices */
@media (hover: none) {
    .pservices-box:active,
    .project-card:active,
    .pendidikan .content:active,
    .stat-item:active,
    .contact-info-card:active {
        transform: scale(0.98);
        transition: transform 0.15s ease;
    }
    .pservices-box:active::after,
    .project-card:active::after,
    .pendidikan .content:active::after,
    .stat-item:active::after,
    .contact-info-card:active::after,
    .pskill .pcontainer:active::after {
        transform: scaleX(1);
    }
    .btn:active { transform: scale(0.96); filter: brightness(1.05); }
    .psocial-icon a:active { transform: scale(0.9); background: var(--main-color); color: #fff; }
}

/* ===== Mobile menu icon: proper tap target (a11y: min 44x44) =====
   IMPORTANT: do NOT add `#pmenu-icon::before { content: none }` here —
   Font Awesome renders the bars/xmark glyph via ::before content. */
#pmenu-icon {
    background: transparent;
    border: 0;
    padding: 0.8rem;          /* 0.8rem * 2 + 3rem glyph = ~46px tap area */
    line-height: 1;
    margin: -0.8rem;          /* counteract padding so visual position matches old layout */
    /* font-size, color, display, z-index already set in primary rule (line 233) */
}
#pmenu-icon:active { transform: scale(0.92); }
#pmenu-icon:hover { color: var(--accent); }
@media (hover: none) {
    #pmenu-icon:hover { color: var(--main-color); } /* no hover on touch — keep main color */
}

/* Smaller phones: tighter header padding so logo + icon don't squeeze */
@media (max-width: 480px) {
    .pheader { padding: 1.6rem 5%; }
    .pheader.scrolled { padding: 1rem 5%; }
    .plogo { font-size: 2.4rem; }
    #pmenu-icon { font-size: 2.6rem; }
}

/* ===== Mobile FAB (floating action - WhatsApp) ===== */
.mobile-fab {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 5.4rem;
    height: 5.4rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
    z-index: 99;
    text-decoration: none;
    transition: transform 0.3s ease;
    animation: fabPulse 2.5s ease-in-out infinite;
}
.mobile-fab::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #25d366;
    opacity: 0;
    animation: fabRing 2.5s ease-out infinite;
}
@keyframes fabPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes fabRing {
    0%   { transform: scale(0.95); opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}
.mobile-fab:active { transform: scale(0.92); }
.mobile-fab.fab-hide {
    opacity: 0;
    transform: scale(0.6) translateY(20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.mobile-fab {
    transition: opacity 0.4s ease, transform 0.3s ease;
}
@media (max-width: 768px) {
    .mobile-fab { display: inline-flex; }
}

/* ===== Section dots indicator (mobile only) ===== */
.section-dots {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    flex-direction: column;
    gap: 0.8rem;
    z-index: 80;
    padding: 0.8rem 0.5rem;
    background: rgba(7, 8, 12, 0.4);
    backdrop-filter: blur(8px);
    border-radius: 4rem;
    border: 1px solid var(--card-border);
}
[data-theme="light"] .section-dots { background: rgba(50, 58, 38, 0.6); }
.section-dots a {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--card-border);
    transition: all 0.3s ease;
    display: block;
}
.section-dots a.active {
    background: var(--main-color);
    transform: scale(1.6);
    box-shadow: 0 0 8px var(--shadow-color);
}
@media (max-width: 768px) {
    .section-dots { display: flex; }
}

/* ===== Mobile-specific size adjustments ===== */
@media (max-width: 600px) {
    .available-badge {
        font-size: 1.1rem;
        padding: 0.3rem 0.9rem;
    }
    .section-eyebrow { font-size: 1rem; letter-spacing: 0.3em; }
    .scroll-indicator { display: none; }
    .pheading { font-size: 3rem !important; }
}

/* ===== Tap target sizing for accessibility ===== */
@media (max-width: 768px) {
    .psocial-icon a,
    .pfooter-social a,
    .pnavbar a.nav-link,
    .theme-toggle,
    .btn,
    .pservices-box,
    .project-card,
    .stat-item {
        min-height: 44px;
    }
}

/* ===== Mobile menu enhanced slide-in (fixed + transform for reliability) ===== */
@media (max-width: 995px) {
    .pnavbar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: auto !important;
        width: 70% !important;
        max-width: 320px;
        height: 100vh !important;
        padding: 8rem 2rem 2rem !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem !important;
        background: rgba(7, 8, 12, 0.96) !important;
        backdrop-filter: blur(20px);
        border-left: 1px solid var(--card-border);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
        display: flex !important;
        z-index: 999;
    }
    [data-theme="light"] .pnavbar {
        background: rgba(50, 58, 38, 0.97) !important;
    }
    .pnavbar.active {
        transform: translateX(0) !important;
    }
    .pnavbar a.nav-link {
        font-size: 2rem;
        padding: 1rem 0;
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        color: #fff;
    }
    .pnavbar a.nav-link::after { display: none; }
    .pnavbar .theme-toggle {
        margin-top: 1rem;
        align-self: flex-start;
    }
}

/* ===== Backdrop overlay when mobile menu open ===== */
.menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    z-index: 90;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.menu-backdrop.show {
    opacity: 1;
    visibility: visible;
}
@media (min-width: 996px) {
    .menu-backdrop { display: none; }
}

/* ===== Reduced animations on mobile for perf (still interactive) ===== */
@media (max-width: 768px) {
    .blob { display: none; }
    .particle { display: none; }
    .img-ring { animation-duration: 60s; }
    .marquee-track { animation-duration: 60s; }
    .bar-fill::after { animation-duration: 4s; }
    .available-badge .ping::before { animation-duration: 2s; }
}

/* =========================================================
   FINAL MOBILE RESPONSIVE FIXES
   ========================================================= */

/* Prevent any horizontal scroll on mobile */
html, body { overflow-x: hidden; max-width: 100vw; }

/* Hero centered properly on mobile */
@media (max-width: 995px) {
    .available-badge { align-self: center; }
    .phome-content { width: 100%; max-width: 100%; align-items: center; display: flex; flex-direction: column; }
    .phome-content #pisi-p { text-align: center; }
    .psocial-icon { justify-content: center; }
    .hero-actions { justify-content: center; }
}

/* Section eyebrow & heading more compact on small phones */
@media (max-width: 600px) {
    .pheading { padding-bottom: 1rem !important; }
}

/* Z-index hierarchy for mobile menu interaction:
   - Header (with menu icon + dropdown navbar) MUST sit above backdrop
     so the close (X) button remains tappable while menu is open.
   - Backdrop covers section content but not the fixed header.        */
.pheader       { z-index: 1000; }
.menu-backdrop { z-index: 990; }
.pnavbar       { z-index: 999; } /* local to pheader's stacking context */

/* FAB never overlaps back-to-top (different sides verified) */
@media (max-width: 768px) {
    .back-to-top { right: 1.5rem; bottom: 1.5rem; }
    .mobile-fab { left: 1.5rem; bottom: 1.5rem; }
}

/* Section dots smaller & dont overlap content on small phones */
@media (max-width: 480px) {
    .section-dots {
        right: 0.6rem;
        padding: 0.6rem 0.4rem;
        gap: 0.6rem;
    }
    .section-dots a {
        width: 6px;
        height: 6px;
    }
}

/* Project card grid - 1 column on small phones */
@media (max-width: 600px) {
    .projects-grid { grid-template-columns: 1fr; }
    .project-thumb { height: 180px; font-size: 4rem; }
}

/* Skill grid 2 columns on phone, 1 on very small */
@media (max-width: 600px) {
    .pskill .pcontainer .prow {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .pskill .pcontainer { padding: 1.5rem; }
    .pskill .pcontainer .pbar img { height: 56px; width: 56px; }
}
@media (max-width: 360px) {
    .pskill .pcontainer .prow { grid-template-columns: 1fr; }
}

/* Tag pills smaller on mobile */
@media (max-width: 480px) {
    .tags span { font-size: 1.1rem; padding: 0.2rem 0.7rem; }
}

/* Show project overlay on mobile by default (no hover available) */
@media (hover: none) {
    .project-overlay {
        opacity: 0.95 !important;
        background: rgba(7, 8, 12, 0.55) !important;
    }
    .project-overlay a { transform: none !important; opacity: 1 !important; }
}

/* (mobile Learn more removed) */

/* Skill tooltip showing on touch is fine; ensure pbar relative */
.pbar { position: relative; }

/* Smooth scroll on iOS */
html { -webkit-text-size-adjust: 100%; }

/* Generic image overflow protection (hero photo CSS is more specific & wins) */
img { max-width: 100%; }

/* Reduce hero typing min-width on mobile */
@media (max-width: 600px) {
    .ptyping-text { font-size: 2rem !important; }
    .phome-content h1 { font-size: 4rem !important; }
}

/* Stats grid better mobile */
@media (max-width: 768px) {
    .stats-grid { gap: 1rem; }
    .stat-item { padding: 1.6rem 1rem; }
    .stat-number { font-size: 3rem; }
}

/* Prevent contact form overflow */
.contact form { max-width: 100%; padding: 0 1rem; box-sizing: border-box; }
@media (max-width: 600px) {
    .contact form { padding: 0; }
}

/* =========================================================
   BULLETPROOF TIMELINE POSITIONING (transform-based centering)
   Marker placed at container's timeline-facing edge, then
   translated by half its width so it's exactly on the line.
   ========================================================= */

/* DESKTOP layout (alternating sides) */
@media (min-width: 769px) {
    .pendidikan .timeline::after {
        left: 50% !important;
        margin-left: -1px !important;
        width: 2px !important;
        z-index: 1 !important;
        opacity: 0.45 !important;
    }
    .pendidikan .left  { left: 0 !important; }
    .pendidikan .right { left: 50% !important; }

    /* Reset position offsets, use transform centering */
    .pendidikan .container::after {
        margin: 0 !important;
        top: 22px !important;
        z-index: 10 !important;
        background: var(--bg-color) !important;
    }
    /* .left: marker at container's RIGHT edge, shift +18px right */
    .pendidikan .left::after {
        left: auto !important;
        right: 0 !important;
        transform: translateX(50%) !important;
    }
    .pendidikan .left:hover::after {
        transform: translateX(50%) scale(1.15) !important;
    }
    /* .right: marker at container's LEFT edge, shift -18px left */
    .pendidikan .right::after {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }
    .pendidikan .right:hover::after {
        transform: translateX(-50%) scale(1.15) !important;
    }
}

/* MOBILE layout (vertical, all on left at line x=20px) */
@media (max-width: 768px) {
    .pendidikan .timeline::after {
        left: 20px !important;
        margin-left: -1px !important;
        width: 2px !important;
        z-index: 1 !important;
        opacity: 0.45 !important;
    }
    .pendidikan .container,
    .pendidikan .left,
    .pendidikan .right {
        left: 0 !important;
        width: 100% !important;
    }
    /* All markers placed at line position with -50% transform centering */
    .pendidikan .container::after,
    .pendidikan .left::after,
    .pendidikan .right::after {
        left: 20px !important;
        right: auto !important;
        margin: 0 !important;
        top: 22px !important;
        transform: translateX(-50%) !important;
        z-index: 10 !important;
        background: var(--bg-color) !important;
    }
    .pendidikan .container:hover::after {
        transform: translateX(-50%) scale(1.15) !important;
    }
}

/* Force-isolate timeline & containers to root stacking context for predictable z-order */
.pendidikan .timeline { z-index: 0; isolation: isolate; }

/* =========================================================
   NEW INTERACTIVE ANIMATIONS (CSS-only, optimized)
   ========================================================= */

/* ===== 1. Mobile FAB continuous pulse ring (catches attention) ===== */
.mobile-fab {
    position: fixed;
}
.mobile-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--accent);
    animation: fabRing 2s ease-out infinite;
    pointer-events: none;
}
@keyframes fabRing {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* ===== 2. Scroll indicator pulse arrow ===== */
.scroll-indicator i {
    animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.6; }
    50%      { transform: translateY(6px); opacity: 1; }
}

/* ===== 3. Project card lift + shadow expand on hover ===== */
.project-card {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.4s ease;
}
@media (hover: hover) {
    .project-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(var(--main-color-rgb), 0.18),
                    0 0 0 1px var(--main-color);
    }
}

/* ===== 4. Hero greeting tag border shimmer ===== */
.hello-tag {
    position: relative;
    overflow: hidden;
}
.hello-tag::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--main-color-rgb), 0.3),
        transparent);
    animation: helloShimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes helloShimmer {
    0%, 100% { left: -100%; }
    50%      { left: 100%; }
}
.paused .hello-tag::after { animation-play-state: paused; }

/* ===== 5. Section eyebrow letter spacing reveal on view ===== */
.section-eyebrow {
    transition: letter-spacing 0.6s ease 0.2s, opacity 0.5s ease;
}
.section-eyebrow[data-reveal]:not(.show) {
    letter-spacing: 0.2em;
    opacity: 0.4;
}

/* ===== 6. Skill bar finish ping (one-time after fill) ===== */
.bar-fill {
    position: relative;
}
.bar-fill::before {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    transform: translateY(-50%) scale(0);
    box-shadow: 0 0 12px var(--accent);
}
.bar-fill[style*="%"]::before {
    animation: barPing 0.8s ease-out 1.6s 1 forwards;
}
@keyframes barPing {
    0%   { transform: translateY(-50%) scale(0); opacity: 1; }
    50%  { transform: translateY(-50%) scale(1.5); opacity: 1; }
    100% { transform: translateY(-50%) scale(1); opacity: 1; }
}

/* ===== 7. Tag pill hover bounce ===== */
.tags span {
    transition: transform 0.2s ease, background 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
    .tags span:hover {
        transform: translateY(-2px) scale(1.05);
        background: var(--main-color);
        color: #fff;
    }
}

/* ===== 8. Service card icon container glow on hover ===== */
.service-icon {
    transition: transform 0.4s ease, filter 0.4s ease;
}
@media (hover: hover) {
    .pservices-box:hover .service-icon {
        filter: drop-shadow(0 0 12px var(--main-color));
    }
}

/* ===== 9. Back-to-top progress arc (visual feedback as user scrolls) ===== */
.back-to-top {
    position: fixed;
}
.back-to-top::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(
        var(--main-color) 0%,
        var(--main-color) calc(var(--scroll, 0) * 1%),
        rgba(255, 255, 255, 0.08) calc(var(--scroll, 0) * 1%),
        rgba(255, 255, 255, 0.08) 100%
    );
    -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
            mask: radial-gradient(circle, transparent 58%, #000 60%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.back-to-top.show::before { opacity: 1; }

/* ===== 10. Hero subtle parallax on scroll (CSS-only via scroll-driven, modern browsers) ===== */
@keyframes heroParallax {
    to { transform: translateY(-30px); }
}
@supports (animation-timeline: scroll()) {
    .phome-img {
        animation: heroParallax linear;
        animation-timeline: scroll(root);
        animation-range: 0 100vh;
    }
}

/* ===== 11. Button click ripple (active state) ===== */
.btn {
    position: relative;
    overflow: hidden;
}
.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    opacity: 0;
}
.btn:active::after {
    animation: btnRipple 0.5s ease-out;
}
@keyframes btnRipple {
    0%   { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(40); opacity: 0; }
}

/* ===== 13. Hero photo edge glow on hover (desktop) ===== */
@media (hover: hover) and (min-width: 996px) {
    .phome-img {
        position: relative;
    }
    .phome-img::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32rem;
        height: 32rem;
        margin: -16rem 0 0 -16rem;
        border-radius: 50%;
        box-shadow: 0 0 0 0 var(--main-color);
        opacity: 0;
        transition: box-shadow 0.6s ease, opacity 0.6s ease;
        pointer-events: none;
        z-index: 0;
    }
    .phome-img:hover::before {
        box-shadow: 0 0 60px 8px var(--main-color);
        opacity: 0.4;
    }
}

/* ===== 14. Stat number gradient text (existing class enhancement) ===== */
.stat-item:hover .stat-number {
    background: linear-gradient(135deg, var(--main-color), var(--accent));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}

/* ===== 15. Education content card slide-in from side on view (one-time animation) ===== */
@keyframes eduSlideLeft {
    0%   { transform: translateX(-30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes eduSlideRight {
    0%   { transform: translateX(30px); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}
@media (min-width: 769px) {
    .pendidikan .container.left.show .content {
        animation: eduSlideLeft 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
    }
    .pendidikan .container.right.show .content {
        animation: eduSlideRight 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
    }
}
@media (max-width: 768px) {
    .pendidikan .container.show .content {
        animation: eduSlideRight 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
    }
}

/* ===== 16. Scroll-down indicator hover invite (subtle bigger pulse) ===== */
@media (hover: hover) {
    .scroll-indicator {
        transition: transform 0.3s ease;
        cursor: pointer;
    }
    .scroll-indicator:hover {
        transform: translateY(4px) scale(1.05);
    }
    .scroll-indicator:hover i {
        animation-duration: 0.8s;
    }
}

/* (skill percentage tooltip already exists via .pbar:hover::after — kept) */

/* ===== 18. Hero name letters subtle hover wave (whole h1 element) ===== */
.phome-content h1 {
    transition: text-shadow 0.4s ease;
}
@media (hover: hover) {
    .phome-content h1:hover {
        text-shadow: 0 0 30px rgba(var(--main-color-rgb), 0.4);
    }
}

/* Service & project accent: ONLY on hover (per previous cleaner design) */
.project-card.show::after {
    transform: scaleX(1);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

/* =========================================================
   PER-SECTION INTERACTIVE MICRO-ANIMATIONS
   ========================================================= */

/* ===== HERO: tech marquee item hover scale ===== */
.marquee-track span {
    transition: transform 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
    .marquee-track span:hover {
        transform: translateY(-4px) scale(1.1);
        color: var(--main-color);
    }
}

/* (Service title underline removed — using simple bold heading per previous design) */

/* ===== SKILL: pcontainer overflow visible (allows tooltip + glow) ===== */
.pskill .pcontainer {
    overflow: visible;
}

/* ===== EDUCATION: school logo gentle pulse on view ===== */
.pendidikan .container.show .school-logo {
    animation: schoolLogoPulse 1s ease-out 0.5s 1 backwards;
}
@keyframes schoolLogoPulse {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== PROJECTS: thumb image gradient sweep on hover (additive light pass) ===== */
.project-thumb {
    position: relative;
    overflow: hidden;
}
.project-thumb::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%);
    transition: left 0.6s ease;
    pointer-events: none;
}
@media (hover: hover) {
    .project-card:hover .project-thumb::after {
        left: 100%;
    }
}

/* ===== STATS: stat-item hover lift + icon scale ===== */
.stat-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
    .stat-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 12px 24px rgba(var(--main-color-rgb), 0.15);
    }
}

/* ===== CONTACT: input focus border glow ===== */
.contact .field {
    position: relative;
    transition: transform 0.3s ease;
}
.contact input,
.contact textarea {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.contact input:focus,
.contact textarea:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 3px rgba(var(--main-color-rgb), 0.15),
                0 4px 12px rgba(var(--main-color-rgb), 0.08);
    outline: none;
}

/* (removed: rotate(360deg) on hover — was conflicting with existing spinPop animation) */
.contact-info-card i {
    display: inline-block;
    transition: transform 0.4s ease;
}

/* ===== FOOTER: social icons hover lift + rotate ===== */
.pfooter-social a {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                color 0.3s ease,
                background 0.3s ease;
}
@media (hover: hover) {
    .pfooter-social a:hover {
        transform: translateY(-4px) rotate(-8deg) scale(1.1);
    }
}

/* ===== SCROLL PROGRESS: top bar gentle pulse when at 100% ===== */
#scroll-progress {
    transition: transform 0.1s linear, box-shadow 0.3s ease;
}
#scroll-progress[style*="scaleX(1)"] {
    box-shadow: 0 0 10px var(--main-color);
}

/* ===== HEADER: logo hover wave (Yuga.) ===== */
.plogo {
    transition: transform 0.3s ease;
    display: inline-block;
}
@media (hover: hover) {
    .plogo:hover {
        transform: rotate(-3deg) scale(1.05);
    }
}

/* ===== ALL: section heading subtle entrance (one-time) ===== */
.pheading {
    transition: letter-spacing 0.6s ease 0.1s;
}
.pheading[data-reveal]:not(.show) {
    letter-spacing: -0.02em;
}

/* ===== Available badge hover ===== */
.available-badge .ping {
    position: relative;
}
.available-badge {
    transition: transform 0.3s ease;
}
@media (hover: hover) {
    .available-badge:hover {
        transform: scale(1.03);
    }
}

/* =========================================================
   POLISHED INTERACTIVE ANIMATIONS (added later)
   ========================================================= */

/* ===== HERO: photo subtle CSS-only "tilt" on hover (no JS, perspective trick) ===== */
@media (hover: hover) and (min-width: 996px) {
    .phome-img img {
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease;
    }
    .phome-img:hover img {
        animation: none;
        transform: perspective(800px) rotateY(-5deg) rotateX(2deg) scale(1.02);
        filter: brightness(1.05) saturate(1.1);
    }
}

/* ===== HERO: blob extra movement (more organic) ===== */
.blob {
    animation-duration: 18s;
}

/* ===== EDUCATION: content card hover green border + glow ===== */
.pendidikan .content {
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
@media (hover: hover) {
    .pendidikan .content:hover {
        border-color: var(--main-color);
        box-shadow: 0 8px 24px rgba(var(--main-color-rgb), 0.15);
    }
}

/* (school-logo hover already handled by existing spinPop animation) */

/* ===== PROJECTS: overlay action buttons slide-up entrance on hover ===== */
.project-overlay a {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                background 0.3s ease;
}
@media (hover: hover) {
    .project-overlay a {
        transform: translateY(20px);
        opacity: 0;
    }
    .project-overlay a:nth-child(1) { transition-delay: 0.05s; }
    .project-overlay a:nth-child(2) { transition-delay: 0.15s; }
    .project-card:hover .project-overlay a {
        transform: translateY(0);
        opacity: 1;
    }
}

/* (older submit button arrow rule removed — superseded by paper plane below) */
#submit-bae::after {
    display: none !important;
}

/* ===== FOOTER: heart icon enhanced beat ===== */
.pfooter i.fa-heart {
    display: inline-block;
    animation: heartBeat 1.5s ease-in-out infinite;
    transform-origin: center;
}
@keyframes heartBeat {
    0%, 100%   { transform: scale(1); }
    14%        { transform: scale(1.2); }
    28%        { transform: scale(1); }
    42%        { transform: scale(1.15); }
    70%        { transform: scale(1); }
}
.paused .pfooter i.fa-heart { animation-play-state: paused; }

/* ===== STATS: number "burst" effect when hovered ===== */
.stat-number {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
    display: inline-block;
}
@media (hover: hover) {
    .stat-item:hover .stat-number {
        transform: scale(1.08);
    }
}

/* ===== HERO: scroll indicator click ripple (visual feedback) ===== */
.scroll-indicator:active {
    animation: scrollClick 0.4s ease;
}
@keyframes scrollClick {
    0%   { transform: scale(1); }
    50%  { transform: scale(0.92); }
    100% { transform: scale(1); }
}

/* ===== NAV: link hover slide indicator ===== */
.pnavbar a.nav-link {
    position: relative;
    overflow: hidden;
}
@media (hover: hover) and (min-width: 996px) {
    .pnavbar a.nav-link::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        height: 2px;
        background: var(--main-color);
        transition: width 0.3s ease;
    }
    .pnavbar a.nav-link:hover::before,
    .pnavbar a.nav-link.active::before {
        width: 100%;
    }
}

/* ===== TIMELINE marker hover transition (smooth scale on hover) ===== */
@media (hover: hover) {
    .pendidikan .container::after {
        transition: transform 0.4s ease, box-shadow 0.4s ease;
    }
}

/* =========================================================
   CONTACT SECTION — INTERACTIVE & ANIMATIVE
   ========================================================= */

/* ===== Animated mesh gradient background ===== */
.contact {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.contact::after {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 20% 30%, rgba(var(--main-color-rgb), 0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(201, 168, 106, 0.06), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(var(--main-color-rgb), 0.04), transparent 50%);
    animation: contactMesh 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}
@keyframes contactMesh {
    0%, 100% { transform: rotate(0deg) scale(1); }
    33%      { transform: rotate(120deg) scale(1.1); }
    66%      { transform: rotate(240deg) scale(0.95); }
}
.paused-mq .contact::after { animation-play-state: paused; }

/* ===== Form field stagger entrance on view (opacity only — no translate, prevents label visual jumble) ===== */
#contact-form.show .field {
    animation: fieldFade 0.5s ease backwards;
}
#contact-form.show .input-box .field:nth-child(1) { animation-delay: 0.1s; }
#contact-form.show .input-box .field:nth-child(2) { animation-delay: 0.2s; }
#contact-form.show .input-box .field:nth-child(3) { animation-delay: 0.3s; }
#contact-form.show .input-box .field:nth-child(4) { animation-delay: 0.4s; }
#contact-form.show > .field { animation-delay: 0.5s; }
#contact-form.show #submit-bae { animation: fieldFade 0.5s ease 0.6s backwards; }
@keyframes fieldFade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ===== Fix Chrome/Edge autofill white background bug ===== */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text-color) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--card-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--card-bg) inset !important;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--main-color);
}
/* Ensure focus ring still shows on autofilled inputs */
.field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--card-bg) inset,
                        0 0 0 3px rgba(var(--main-color-rgb), 0.15),
                        0 4px 12px rgba(var(--main-color-rgb), 0.08) !important;
}

/* ===== Smoother label transition (uses original positioning) ===== */
.field label {
    transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                font-size 0.25s ease,
                color 0.3s ease;
    will-change: top, left, font-size;
}

/* ===== Required asterisk: better positioning + smaller ===== */
.field input[required] + label::before,
.field textarea[required] + label::before {
    content: '*';
    color: var(--main-color);
    margin-right: 0.25rem;
    font-weight: 700;
    display: inline-block;
}

/* (removed: brutal rotating idle animations — envelopeWiggle, phoneRing
   conflicted with existing spinPop hover, causing icons to rotate violently.
   Icons now use only the gentle pinDrop float + existing spinPop on hover.) */
.contact-info-card i {
    animation: pinDrop 4s ease-in-out infinite;
}
@keyframes pinDrop {
    0%, 100%  { transform: translateY(0); }
    50%       { transform: translateY(-3px); }
}
.paused-mq .contact-info-card i { animation-play-state: paused; }

/* ===== Contact card decorative corner accent ===== */
.contact-info-card {
    position: relative;
}
.contact-info-card::before {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--main-color);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.4s ease;
}
@media (hover: hover) {
    .contact-info-card:hover::before {
        opacity: 1;
        transform: scale(1.5);
        box-shadow: 0 0 12px var(--main-color);
    }
}

/* ===== Submit button: PAPER PLANE FLY effect on hover ===== */
#submit-bae {
    position: relative;
    overflow: visible;
    cursor: pointer;
}
#submit-bae::before {
    content: '\f1d8';
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%) translateX(0) rotate(0);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.3s ease;
    pointer-events: none;
}
@media (hover: hover) {
    #submit-bae:hover {
        padding-right: 5rem;
        background: linear-gradient(135deg, var(--main-color), var(--accent));
        color: #fff;
    }
    #submit-bae:hover::before {
        opacity: 1;
        transform: translateY(-50%) translateX(0) rotate(0);
    }
    #submit-bae:hover::after {
        display: none;
    }
}

/* Click → paper plane flies right + fades */
#submit-bae:active::before {
    animation: planeFly 0.7s ease forwards;
}
@keyframes planeFly {
    0%   { transform: translateY(-50%) translateX(0) rotate(0); opacity: 1; }
    100% { transform: translateY(-150%) translateX(80px) rotate(-30deg); opacity: 0; }
}

/* ===== WhatsApp popup modal entrance enhancement ===== */
.ke-wa-bae {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.3s ease,
                visibility 0.3s ease;
}
.ke-wa-bae.active {
    animation: popupBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popupBounce {
    0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.popup-overlay {
    transition: opacity 0.3s ease;
}

/* Popup buttons hover */
.btn-iyo,
.btn-idak {
    transition: transform 0.2s ease,
                background 0.3s ease,
                box-shadow 0.3s ease;
}
@media (hover: hover) {
    .btn-iyo:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 16px rgba(var(--main-color-rgb), 0.3);
    }
    .btn-idak:hover {
        transform: translateY(-2px) scale(1.03);
    }
}

/* (Required asterisk handled in earlier rule - simple static, no pulse to keep clean) */

/* =========================================================
   ADDITIONAL POLISHED CONTACT ANIMATIONS
   ========================================================= */

/* ===== Submit button gentle invite-glow pulse (very subtle, 4s loop) ===== */
#submit-bae {
    animation: btnInvitePulse 3s ease-in-out infinite;
}
@keyframes btnInvitePulse {
    0%, 100% { box-shadow: 0 8px 20px var(--shadow-color); }
    50%      { box-shadow: 0 8px 24px var(--shadow-color),
                           0 0 24px rgba(var(--main-color-rgb), 0.25); }
}
.paused-mq #submit-bae { animation-play-state: paused; }

/* On hover, stop invite pulse + show paper plane (existing) */
@media (hover: hover) {
    #submit-bae:hover {
        animation: none;
    }
}

/* (.contact::before currently free; section number decoration was removed) */

/* ===== Contact section heading subtle gradient text (when in view) ===== */
.contact .pheading.show span {
    background: linear-gradient(135deg, var(--main-color), var(--accent), var(--main-color));
    background-size: 200% 100%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: contactHeadingShine 4s linear infinite;
}
@keyframes contactHeadingShine {
    to { background-position: -200% 0; }
}
.paused-mq .contact .pheading.show span { animation-play-state: paused; }

/* ===== Contact info card: smooth hover lift + glow trail ===== */
.contact-info-card {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}
@media (hover: hover) {
    .contact-info-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 32px rgba(var(--main-color-rgb), 0.18),
                    0 0 0 1px var(--main-color);
    }
}

/* ===== Field hover (not focused) subtle border highlight ===== */
@media (hover: hover) {
    .field input:hover:not(:focus),
    .field textarea:hover:not(:focus) {
        border-color: rgba(var(--main-color-rgb), 0.4);
    }
}

/* ===== Submit button click → success burst (pseudo confirm visual) ===== */
#submit-bae:active {
    transform: translateY(-2px) scale(0.97);
}

/* ===== Contact form labels stagger color on focus group (focus-within indicator) ===== */
.field:focus-within label {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ===== Polish: textarea resize handle stylized ===== */
.field textarea {
    resize: vertical;
    min-height: 12rem;
}

/* ===== Mobile: reduce contact mesh animation cost ===== */
@media (max-width: 768px) {
    .contact::after {
        animation-duration: 30s; /* slower on mobile */
    }
}

/* ===== Disable button-invite-pulse on prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    #submit-bae { animation: none; }
    .contact::after { animation: none; }
    .contact-info-card i { animation: none; }
}

/* ============================================================ */
/* ===== SERVICES — KIRI/KANAN DECORATIVE ANIMATIONS ========== */
/* ============================================================ */

/* New stacking context so ::after at z-index:-1 stays above section bg */
.pservices {
    isolation: isolate;
}

/* Floating orbs filling the 9% empty padding area on LEFT + RIGHT */
.pservices::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* LEFT side orbs (3) */
        radial-gradient(circle 90px  at 4% 18%, rgba(var(--main-color-rgb), 0.10), transparent 70%),
        radial-gradient(circle 60px  at 7% 46%, rgba(201, 168, 106, 0.09), transparent 70%),
        radial-gradient(circle 110px at 3% 80%, rgba(var(--main-color-rgb), 0.07), transparent 70%),
        /* RIGHT side orbs (3) */
        radial-gradient(circle 100px at 96% 22%, rgba(var(--main-color-rgb), 0.10), transparent 70%),
        radial-gradient(circle 70px  at 93% 58%, rgba(201, 168, 106, 0.09), transparent 70%),
        radial-gradient(circle 90px  at 97% 85%, rgba(var(--main-color-rgb), 0.07), transparent 70%);
    animation: serviceOrbsBreath 18s ease-in-out infinite;
    transform: translateZ(0); /* GPU layer */
}

@keyframes serviceOrbsBreath {
    0%, 100% { transform: scale(1) rotate(0deg)   translateZ(0); opacity: 0.75; }
    50%      { transform: scale(1.08) rotate(2deg) translateZ(0); opacity: 1; }
}

/* Container relative for dashed line decorations */
.pservices-container {
    position: relative;
}

/* Traveling dashed vertical lines on LEFT + RIGHT of grid */
.pservices-container::before,
.pservices-container::after {
    content: '';
    position: absolute;
    top: -2rem;
    bottom: -2rem;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        var(--main-color) 0,
        var(--main-color) 6px,
        transparent 6px,
        transparent 14px
    );
    background-size: 2px 14px;
    opacity: 0.22;
    pointer-events: none;
    border-radius: 2px;
}
.pservices-container::before {
    left: -3rem;
    animation: dashFlowDown 9s linear infinite;
}
.pservices-container::after {
    right: -3rem;
    animation: dashFlowUp 9s linear infinite;
}

@keyframes dashFlowDown {
    from { background-position: 0 0;    }
    to   { background-position: 0 14px; }
}
@keyframes dashFlowUp {
    from { background-position: 0 14px; }
    to   { background-position: 0 0;    }
}

/* Pause all decorative animations when section is off-screen */
.paused-mq .pservices::after,
.paused-mq .pservices-container::before,
.paused-mq .pservices-container::after {
    animation-play-state: paused;
}

/* Tablet: dim orbs, hide dashed lines (empty space too narrow) */
@media (max-width: 991px) {
    .pservices-container::before,
    .pservices-container::after {
        display: none;
    }
    .pservices::after {
        opacity: 0.55;
        animation-duration: 24s;
    }
}

/* Mobile: orbs lighter still */
@media (max-width: 600px) {
    .pservices::after {
        background:
            radial-gradient(circle 60px at 6% 22%, rgba(var(--main-color-rgb), 0.08), transparent 70%),
            radial-gradient(circle 60px at 94% 78%, rgba(201, 168, 106, 0.07), transparent 70%);
        animation-duration: 30s;
    }
}

/* Reduced motion: keep visual but freeze movement */
@media (prefers-reduced-motion: reduce) {
    .pservices::after,
    .pservices-container::before,
    .pservices-container::after {
        animation: none;
    }
}

/* ============================================================ */
/* ===== EDUCATION — GREEN GALAXY BACKGROUND ================== */
/* ============================================================ */

/* Stars baked directly into section's background-image (always visible, no z-index issues) */
.pendidikan {
    position: relative;
    isolation: isolate;
    background-color: var(--second-bg-color);
    background-image:
        /* White stars with halo (bigger + glowing) */
        radial-gradient(circle at 8% 6%,   #ffffff 0, #ffffff 2px, rgba(255,255,255,0.3) 4px, transparent 8px),
        radial-gradient(circle at 38% 5%,  #ffffff 0, #ffffff 1.5px, rgba(255,255,255,0.25) 3px, transparent 6px),
        radial-gradient(circle at 72% 8%,  #ffffff 0, #ffffff 2px, rgba(255,255,255,0.3) 4px, transparent 8px),
        radial-gradient(circle at 4% 32%,  #ffffff 0, #ffffff 1.5px, rgba(255,255,255,0.25) 3px, transparent 6px),
        radial-gradient(circle at 33% 38%, #ffffff 0, #ffffff 1.5px, rgba(255,255,255,0.25) 3px, transparent 6px),
        radial-gradient(circle at 65% 35%, #ffffff 0, #ffffff 2px, rgba(255,255,255,0.3) 4px, transparent 8px),
        radial-gradient(circle at 95% 36%, #ffffff 0, #ffffff 1.5px, rgba(255,255,255,0.25) 3px, transparent 6px),
        radial-gradient(circle at 28% 68%, #ffffff 0, #ffffff 2px, rgba(255,255,255,0.3) 4px, transparent 8px),
        radial-gradient(circle at 60% 72%, #ffffff 0, #ffffff 1.5px, rgba(255,255,255,0.25) 3px, transparent 6px),
        radial-gradient(circle at 92% 70%, #ffffff 0, #ffffff 2px, rgba(255,255,255,0.3) 4px, transparent 8px),
        radial-gradient(circle at 6% 88%,  #ffffff 0, #ffffff 1.5px, rgba(255,255,255,0.25) 3px, transparent 6px),
        radial-gradient(circle at 42% 85%, #ffffff 0, #ffffff 2px, rgba(255,255,255,0.3) 4px, transparent 8px),
        radial-gradient(circle at 74% 88%, #ffffff 0, #ffffff 1.5px, rgba(255,255,255,0.25) 3px, transparent 6px),
        /* Green stars (bigger, with green halo) */
        radial-gradient(circle at 22% 14%, #0bb121 0, #0bb121 2.5px, rgba(var(--main-color-rgb),0.35) 5px, transparent 10px),
        radial-gradient(circle at 55% 12%, #0bb121 0, #0bb121 2px,   rgba(var(--main-color-rgb),0.3) 4px, transparent 8px),
        radial-gradient(circle at 88% 16%, #0bb121 0, #0bb121 2.5px, rgba(var(--main-color-rgb),0.35) 5px, transparent 10px),
        radial-gradient(circle at 18% 42%, #0bb121 0, #0bb121 2px,   rgba(var(--main-color-rgb),0.3) 4px, transparent 8px),
        radial-gradient(circle at 50% 48%, #0bb121 0, #0bb121 2.5px, rgba(var(--main-color-rgb),0.35) 5px, transparent 10px),
        radial-gradient(circle at 82% 44%, #0bb121 0, #0bb121 2px,   rgba(var(--main-color-rgb),0.3) 4px, transparent 8px),
        radial-gradient(circle at 12% 62%, #0bb121 0, #0bb121 2px,   rgba(var(--main-color-rgb),0.3) 4px, transparent 8px),
        radial-gradient(circle at 45% 65%, #0bb121 0, #0bb121 2.5px, rgba(var(--main-color-rgb),0.35) 5px, transparent 10px),
        radial-gradient(circle at 76% 58%, #0bb121 0, #0bb121 2px,   rgba(var(--main-color-rgb),0.3) 4px, transparent 8px),
        radial-gradient(circle at 24% 92%, #0bb121 0, #0bb121 2.5px, rgba(var(--main-color-rgb),0.35) 5px, transparent 10px),
        radial-gradient(circle at 58% 95%, #0bb121 0, #0bb121 2px,   rgba(var(--main-color-rgb),0.3) 4px, transparent 8px),
        radial-gradient(circle at 90% 94%, #0bb121 0, #0bb121 2.5px, rgba(var(--main-color-rgb),0.35) 5px, transparent 10px);
    background-repeat: no-repeat;
}

/* ===== NEBULA layer — soft green swirl below content ===== */
.pendidikan::before {
    content: '';
    position: absolute;
    inset: -15%;  /* extend so rotation doesn't reveal corners */
    z-index: -1;  /* above section bg (with isolation), below static content */
    pointer-events: none;
    background:
        radial-gradient(ellipse 45% 35% at 22% 28%, rgba(var(--main-color-rgb), 0.18), transparent 70%),
        radial-gradient(ellipse 55% 45% at 78% 72%, rgba(var(--main-color-rgb), 0.15), transparent 70%),
        radial-gradient(ellipse 35% 28% at 50% 50%, rgba(var(--main-color-rgb), 0.12), transparent 65%),
        radial-gradient(ellipse 30% 25% at 15% 80%, rgba(var(--main-color-rgb), 0.10), transparent 70%),
        radial-gradient(ellipse 30% 25% at 85% 20%, rgba(var(--main-color-rgb), 0.10), transparent 70%);
    animation: nebulaSwirl 80s linear infinite;
    transform-origin: center;
    will-change: transform;
}

@keyframes nebulaSwirl {
    from { transform: rotate(0deg)   scale(1); }
    50%  { transform: rotate(180deg) scale(1.04); }
    to   { transform: rotate(360deg) scale(1); }
}

/* ===== TWINKLE highlight stars (subset, animated opacity) ===== */
.pendidikan::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        /* Bright twinkle stars — bigger, more visible */
        radial-gradient(circle at 15% 20%, #0bb121 0, #0bb121 2.5px, transparent 5px),
        radial-gradient(circle at 48% 18%, #ffffff 0, #ffffff 2px,   transparent 4px),
        radial-gradient(circle at 80% 30%, #0bb121 0, #0bb121 2.5px, transparent 5px),
        radial-gradient(circle at 25% 55%, #ffffff 0, #ffffff 2px,   transparent 4px),
        radial-gradient(circle at 68% 50%, #0bb121 0, #0bb121 2.5px, transparent 5px),
        radial-gradient(circle at 35% 80%, #ffffff 0, #ffffff 2px,   transparent 4px),
        radial-gradient(circle at 85% 78%, #0bb121 0, #0bb121 2.5px, transparent 5px);
    background-repeat: no-repeat;
    animation: galaxyTwinkle 3s ease-in-out infinite;
    will-change: opacity;
}

@keyframes galaxyTwinkle {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 1; }
}

/* ===== Pause off-screen for performance ===== */
.paused-mq .pendidikan::before,
.paused-mq .pendidikan::after {
    animation-play-state: paused;
}

/* ===== Tablet: slow nebula a bit ===== */
@media (max-width: 991px) {
    .pendidikan::before { animation-duration: 100s; }
    .pendidikan::after  { animation-duration: 4s; }
}

/* ===== Mobile: very slow nebula, fewer twinkle stars ===== */
@media (max-width: 600px) {
    .pendidikan::before { animation-duration: 120s; }
    .pendidikan::after {
        background-image:
            radial-gradient(circle at 25% 25%, #0bb121 0, #0bb121 2.5px, transparent 5px),
            radial-gradient(circle at 70% 40%, #ffffff 0, #ffffff 2px,   transparent 4px),
            radial-gradient(circle at 40% 70%, #0bb121 0, #0bb121 2.5px, transparent 5px),
            radial-gradient(circle at 80% 80%, #ffffff 0, #ffffff 2px,   transparent 4px);
        animation-duration: 4s;
    }
}

/* ===== Reduced motion: freeze galaxy animations ===== */
@media (prefers-reduced-motion: reduce) {
    .pendidikan::before,
    .pendidikan::after {
        animation: none;
    }
}

/* ===== Light theme: replace white stars with dark-green for parchment bg visibility ===== */
[data-theme="light"] .pendidikan {
    /* Note: this rule sets stars for parchment fallback; later rule overrides with sky gradient */
    background-image:
        radial-gradient(circle at 8% 6%,   #c2410c 0, #c2410c 1.5px, transparent 3px),
        radial-gradient(circle at 38% 5%,  #c2410c 0, #c2410c 1px,   transparent 2.5px),
        radial-gradient(circle at 72% 8%,  #c2410c 0, #c2410c 1.5px, transparent 3px),
        radial-gradient(circle at 4% 32%,  #c2410c 0, #c2410c 1px,   transparent 2.5px),
        radial-gradient(circle at 33% 38%, #c2410c 0, #c2410c 1px,   transparent 2.5px),
        radial-gradient(circle at 65% 35%, #c2410c 0, #c2410c 1.5px, transparent 3px),
        radial-gradient(circle at 95% 36%, #c2410c 0, #c2410c 1px,   transparent 2.5px),
        radial-gradient(circle at 28% 68%, #c2410c 0, #c2410c 1.5px, transparent 3px),
        radial-gradient(circle at 60% 72%, #c2410c 0, #c2410c 1px,   transparent 2.5px),
        radial-gradient(circle at 92% 70%, #c2410c 0, #c2410c 1.5px, transparent 3px),
        radial-gradient(circle at 6% 88%,  #c2410c 0, #c2410c 1px,   transparent 2.5px),
        radial-gradient(circle at 42% 85%, #c2410c 0, #c2410c 1.5px, transparent 3px),
        radial-gradient(circle at 74% 88%, #c2410c 0, #c2410c 1px,   transparent 2.5px),
        radial-gradient(circle at 22% 14%, #f97316 0, #f97316 2px,   transparent 4px),
        radial-gradient(circle at 55% 12%, #f97316 0, #f97316 1.5px, transparent 3px),
        radial-gradient(circle at 88% 16%, #f97316 0, #f97316 2px,   transparent 4px),
        radial-gradient(circle at 18% 42%, #f97316 0, #f97316 1.5px, transparent 3px),
        radial-gradient(circle at 50% 48%, #f97316 0, #f97316 2px,   transparent 4px),
        radial-gradient(circle at 82% 44%, #f97316 0, #f97316 1.5px, transparent 3px),
        radial-gradient(circle at 12% 62%, #f97316 0, #f97316 1.5px, transparent 3px),
        radial-gradient(circle at 45% 65%, #f97316 0, #f97316 2px,   transparent 4px),
        radial-gradient(circle at 76% 58%, #f97316 0, #f97316 1.5px, transparent 3px),
        radial-gradient(circle at 24% 92%, #f97316 0, #f97316 2px,   transparent 4px),
        radial-gradient(circle at 58% 95%, #f97316 0, #f97316 1.5px, transparent 3px),
        radial-gradient(circle at 90% 94%, #f97316 0, #f97316 2px,   transparent 4px);
}

[data-theme="light"] .pendidikan::before {
    background:
        radial-gradient(ellipse 45% 35% at 22% 28%, rgba(249, 115, 22, 0.12), transparent 70%),
        radial-gradient(ellipse 55% 45% at 78% 72%, rgba(249, 115, 22, 0.10), transparent 70%),
        radial-gradient(ellipse 35% 28% at 50% 50%, rgba(251, 191, 36, 0.10), transparent 65%),
        radial-gradient(ellipse 30% 25% at 15% 80%, rgba(249, 115, 22, 0.07), transparent 70%),
        radial-gradient(ellipse 30% 25% at 85% 20%, rgba(249, 115, 22, 0.07), transparent 70%);
}

/* ============================================================ */
/* ===== SCENE DECOR: GALAXY (dark) / MORNING (light) ========= */
/* ============================================================ */

.scene-decor {
    position: absolute;
    inset: 0;
    z-index: -1; /* above section bg-image stars, below static content */
    pointer-events: none;
    overflow: hidden;
    /* PERF: isolate layout/paint so animations don't trigger reflows of section content */
    contain: layout style paint;
    transform: translateZ(0); /* Force GPU layer */
}

/* Default: show galaxy, hide morning (dark theme is default) */
.morning-decor { display: none; }

/* ===== SATURN RINGS (3 concentric, tilted, rotating) ===== */
.saturn-ring {
    position: absolute;
    top: 18%;
    right: 6%;
    border: 2px solid rgba(var(--main-color-rgb), 0.35);
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(var(--main-color-rgb), 0.2),
                inset 0 0 16px rgba(var(--main-color-rgb), 0.15);
    transform-origin: center;
    will-change: transform;
}
.saturn-ring-1 {
    width: 140px;
    height: 140px;
    border-color: rgba(var(--main-color-rgb), 0.4);
    animation: ringOrbit 18s linear infinite;
}
.saturn-ring-2 {
    width: 200px;
    height: 200px;
    top: calc(18% - 30px);
    right: calc(6% - 30px);
    border-color: rgba(var(--main-color-rgb), 0.25);
    border-style: solid;
    animation: ringOrbit 28s linear infinite reverse;
}
.saturn-ring-3 {
    width: 270px;
    height: 270px;
    top: calc(18% - 65px);
    right: calc(6% - 65px);
    border-color: rgba(var(--main-color-rgb), 0.18);
    border-width: 1px;
    animation: ringOrbit 40s linear infinite;
}

@keyframes ringOrbit {
    from { transform: rotateX(70deg) rotateZ(0deg); }
    to   { transform: rotateX(70deg) rotateZ(360deg); }
}

/* Mobile: smaller, lower-left positioning */
@media (max-width: 768px) {
    .saturn-ring-1 { width: 80px; height: 80px; top: 8%; right: 5%; }
    .saturn-ring-2 { width: 120px; height: 120px; top: calc(8% - 20px); right: calc(5% - 20px); }
    .saturn-ring-3 { width: 160px; height: 160px; top: calc(8% - 40px); right: calc(5% - 40px); }
}

/* ===== COMETS (streaking diagonally — random sides) ===== */
.comet {
    position: absolute;
    width: 120px;
    height: 2px;
    border-radius: 2px;
    filter: drop-shadow(0 0 4px rgba(var(--main-color-rgb), 0.7));
    will-change: transform, opacity;
    opacity: 0;
}

/* LR comets: gradient head on right, fly left → right */
.comet-1, .comet-3, .comet-5 {
    background: linear-gradient(to right,
        transparent 0%,
        rgba(var(--main-color-rgb), 0.4) 30%,
        rgba(180, 255, 200, 0.9) 80%,
        #ffffff 100%);
}

/* RL comets: gradient head on left (mirrored), fly right → left */
.comet-2, .comet-4 {
    background: linear-gradient(to left,
        transparent 0%,
        rgba(var(--main-color-rgb), 0.4) 30%,
        rgba(180, 255, 200, 0.9) 80%,
        #ffffff 100%);
}

.comet-1 {
    top: 11%;  left: -15%;  width: 120px;
    animation: cometFlyLR_a 9s  ease-in  2s infinite;
}
.comet-2 {
    top: 30%;  right: -15%; width: 100px;
    animation: cometFlyRL_a 11s ease-in  4s infinite;
}
.comet-3 {
    top: 52%;  left: -15%;  width: 90px;
    animation: cometFlyLR_b 13s ease-in  7s infinite;
}
.comet-4 {
    top: 72%;  right: -15%; width: 140px;
    animation: cometFlyRL_b 10s ease-in 12s infinite;
}
.comet-5 {
    top: 88%;  left: -15%;  width: 70px;
    animation: cometFlyLR_c 14s ease-in 16s infinite;
}

/* LR keyframes — variations in angle and Y drift */
@keyframes cometFlyLR_a {
    0%   { transform: translate(0, 0)         rotate(18deg);  opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(130vw, 30vh)  rotate(18deg);  opacity: 0; }
}
@keyframes cometFlyLR_b {
    0%   { transform: translate(0, 0)         rotate(12deg);  opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(130vw, 22vh)  rotate(12deg);  opacity: 0; }
}
@keyframes cometFlyLR_c {
    0%   { transform: translate(0, 0)         rotate(25deg);  opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(130vw, 18vh)  rotate(25deg);  opacity: 0; }
}

/* RL keyframes — mirror angle (negative rotate), translate negative X */
@keyframes cometFlyRL_a {
    0%   { transform: translate(0, 0)         rotate(-22deg); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(-130vw, 28vh) rotate(-22deg); opacity: 0; }
}
@keyframes cometFlyRL_b {
    0%   { transform: translate(0, 0)         rotate(-15deg); opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(-130vw, 20vh) rotate(-15deg); opacity: 0; }
}

/* ===== SUN (light mode) ===== */
.sun {
    position: absolute;
    top: 8%;
    right: 8%;
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, #fff7c2 0%, #ffd54a 40%, #ff9100 90%);
    border-radius: 50%;
    box-shadow:
        0 0 40px rgba(255, 200, 50, 0.6),
        0 0 80px rgba(255, 180, 80, 0.4),
        0 0 120px rgba(255, 160, 100, 0.25);
    will-change: transform, box-shadow;
    animation: sunPulse 5s ease-in-out infinite;
}
.sun::before {
    content: '';
    position: absolute;
    inset: -25%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(255, 220, 100, 0.3) 10deg, transparent 20deg,
        transparent 40deg, rgba(255, 220, 100, 0.3) 50deg, transparent 60deg,
        transparent 80deg, rgba(255, 220, 100, 0.3) 90deg, transparent 100deg,
        transparent 120deg, rgba(255, 220, 100, 0.3) 130deg, transparent 140deg,
        transparent 160deg, rgba(255, 220, 100, 0.3) 170deg, transparent 180deg,
        transparent 200deg, rgba(255, 220, 100, 0.3) 210deg, transparent 220deg,
        transparent 240deg, rgba(255, 220, 100, 0.3) 250deg, transparent 260deg,
        transparent 280deg, rgba(255, 220, 100, 0.3) 290deg, transparent 300deg,
        transparent 320deg, rgba(255, 220, 100, 0.3) 330deg, transparent 340deg);
    animation: sunRays 30s linear infinite;
    pointer-events: none;
}

@keyframes sunPulse {
    0%, 100% {
        box-shadow: 0 0 40px rgba(255, 200, 50, 0.6),
                    0 0 80px rgba(255, 180, 80, 0.4),
                    0 0 120px rgba(255, 160, 100, 0.25);
    }
    50% {
        box-shadow: 0 0 50px rgba(255, 200, 50, 0.75),
                    0 0 100px rgba(255, 180, 80, 0.5),
                    0 0 150px rgba(255, 160, 100, 0.35);
    }
}
@keyframes sunRays {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (max-width: 600px) {
    .sun { width: 60px; height: 60px; top: 5%; right: 5%; }
}

/* ===== CLOUDS (CSS-only fluffy with translate animation) ===== */
.cloud {
    position: absolute;
    width: 60px;
    height: 20px;
    background: #ffffff;
    border-radius: 100px;
    box-shadow:
        25px -10px 0 -2px #ffffff,
        50px -5px 0 -4px #ffffff,
        -20px -8px 0 -3px #ffffff,
        10px -18px 0 -6px #ffffff;
    opacity: 0.9;
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.5));
    will-change: transform;
}
.cloud-1 {
    top: 15%;
    left: -10%;
    animation: cloudFloat 35s linear infinite;
}
.cloud-2 {
    top: 35%;
    left: -10%;
    width: 80px;
    animation: cloudFloat 50s linear 8s infinite;
}
.cloud-3 {
    top: 55%;
    left: -10%;
    width: 50px;
    opacity: 0.7;
    animation: cloudFloat 42s linear 15s infinite;
}

@keyframes cloudFloat {
    from { transform: translateX(0); }
    to   { transform: translateX(130vw); }
}

@media (max-width: 600px) {
    .cloud-1 { width: 50px; }
    .cloud-2 { width: 60px; }
    .cloud-3 { width: 40px; }
}

/* ===== BIRDS (V-shape flying with wing flap) ===== */
.bird {
    position: absolute;
    width: 18px;
    height: 8px;
    will-change: transform;
}
.bird::before,
.bird::after {
    content: '';
    position: absolute;
    top: 0;
    width: 10px;
    height: 8px;
    border-top: 2px solid #2c3e50;
    border-radius: 50% 50% 0 0;
    animation: wingFlap 0.4s ease-in-out infinite alternate;
}
.bird::before { left: 0; transform-origin: right center; }
.bird::after  { left: 8px; transform-origin: left center; }

.bird-1 {
    top: 18%;
    left: -5%;
    animation: birdFly1 22s linear infinite;
}
.bird-2 {
    top: 28%;
    left: -5%;
    animation: birdFly2 28s linear 5s infinite;
}
.bird-3 {
    top: 22%;
    left: -5%;
    animation: birdFly3 26s linear 12s infinite;
}

@keyframes wingFlap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0.4); }
}
@keyframes birdFly1 {
    0%   { transform: translate(0, 0)         scale(1); }
    50%  { transform: translate(60vw, -20px)  scale(1); }
    100% { transform: translate(120vw, 10px)  scale(1); }
}
@keyframes birdFly2 {
    0%   { transform: translate(0, 0)         scale(0.8); }
    50%  { transform: translate(60vw, 20px)   scale(0.8); }
    100% { transform: translate(120vw, -10px) scale(0.8); }
}
@keyframes birdFly3 {
    0%   { transform: translate(0, 0)         scale(0.7); }
    50%  { transform: translate(60vw, -10px)  scale(0.7); }
    100% { transform: translate(120vw, 15px)  scale(0.7); }
}

/* ============================================================ */
/* ===== LIGHT THEME: morning sky takeover ==================== */
/* ============================================================ */

[data-theme="light"] .pendidikan {
    /* Replace galaxy stars with morning sky gradient */
    background-image: linear-gradient(180deg,
        #87ceeb 0%,
        #b8d8e8 30%,
        #fce8b8 70%,
        #fde4a0 100%);
    background-color: #87ceeb;
}

/* Hide nebula + twinkle in light mode */
[data-theme="light"] .pendidikan::before,
[data-theme="light"] .pendidikan::after {
    background: none;
    animation: none;
}

/* Hide galaxy decor, show morning decor */
[data-theme="light"] .galaxy-decor { display: none; }
[data-theme="light"] .morning-decor { display: block; }

/* Brighten timeline cards so they're readable on sky-blue bg */
[data-theme="light"] .pendidikan .content {
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(249, 115, 22, 0.3);
    box-shadow: 0 4px 16px rgba(120, 60, 20, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
[data-theme="light"] .pendidikan .timeline::after {
    background: rgba(249, 115, 22, 0.4); /* orange vertical line */
}
[data-theme="light"] .pendidikan .container::after {
    background: #ffffff !important; /* marker dot stays bright on sky */
}

/* ============================================================ */
/* ===== PERFORMANCE GUARDS =================================== */
/* ============================================================ */

/* Pause all scene animations when off-screen */
.paused-mq .saturn-ring,
.paused-mq .comet,
.paused-mq .sun,
.paused-mq .sun::before,
.paused-mq .cloud,
.paused-mq .bird,
.paused-mq .bird::before,
.paused-mq .bird::after {
    animation-play-state: paused;
}

/* GPU layer dedup: parent .scene-decor is already its own composite layer
   (transform: translateZ(0) + contain: layout style paint). Child will-change
   would create redundant layers — reset to let transform/opacity animations
   ride the parent's layer. Saves significant memory on mid-spec devices. */
.scene-decor *,
.scene-decor *::before,
.scene-decor *::after {
    will-change: auto;
}

/* NOTE: We don't pause children of .scene-decor when section is .paused.
   Reason: comets/birds/petals etc. have opacity:0 keyframes at cycle start/end
   plus staggered animation-delay. Pausing mid-cycle hides them when user scrolls
   back in. content-visibility: auto already skips rendering off-screen, which
   gives us the perf win without breaking visuals. */

/* Reduced motion: stop all scene animations */
@media (prefers-reduced-motion: reduce) {
    .saturn-ring,
    .comet,
    .sun,
    .sun::before,
    .cloud,
    .bird,
    .bird::before,
    .bird::after {
        animation: none;
    }
    .comet { opacity: 0.6; }
}

/* Tablet: hide 2 comets (keep both directions: 1 LR, 2 RL, 5 LR) */
@media (max-width: 991px) {
    .comet-3, .comet-4 { display: none; }
    .bird-3 { display: none; }
    .saturn-ring-3 { opacity: 0.6; }
}

/* Mobile: keep only 2 comets — one LR, one RL */
@media (max-width: 600px) {
    .comet-3, .comet-4, .comet-5 { display: none; } /* keep 1 LR + 2 RL */
    .saturn-ring-3 { display: none; }
    .bird-3 { display: none; }
    .cloud-3 { display: none; }
}

/* ============================================================ */
/* ===== HERO PHOTO — SATURN ORBIT RINGS ====================== */
/* ============================================================ */

.hero-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 2px solid rgba(var(--main-color-rgb), 0.35);
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.hero-orbit-1 {
    width: 40rem;
    height: 40rem;
    border-color: rgba(var(--main-color-rgb), 0.4);
    box-shadow: 0 0 18px rgba(var(--main-color-rgb), 0.2),
                inset 0 0 18px rgba(var(--main-color-rgb), 0.12);
    animation: heroOrbit 22s linear infinite;
}
.hero-orbit-2 {
    width: 48rem;
    height: 48rem;
    border-color: rgba(var(--main-color-rgb), 0.22);
    border-width: 1.5px;
    animation: heroOrbit 35s linear infinite reverse;
}

@keyframes heroOrbit {
    from { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(0deg); }
    to   { transform: translate(-50%, -50%) rotateX(72deg) rotateZ(360deg); }
}

/* Pause when off-screen (uses .paused on body from existing observer) */
.paused .hero-orbit { animation-play-state: paused; }

/* Light theme: rings turn golden (sun halo) */
[data-theme="light"] .hero-orbit-1 {
    border-color: rgba(255, 152, 0, 0.45);
    box-shadow: 0 0 18px rgba(255, 193, 7, 0.25),
                inset 0 0 18px rgba(255, 193, 7, 0.15);
}
[data-theme="light"] .hero-orbit-2 {
    border-color: rgba(255, 193, 7, 0.3);
}

/* Hero responsive */
@media (max-width: 768px) {
    .hero-orbit-1 { width: 32rem; height: 32rem; }
    .hero-orbit-2 { width: 38rem; height: 38rem; }
}
@media (max-width: 600px) {
    .hero-orbit-2 { display: none; } /* only 1 ring on phone */
    .hero-orbit-1 { width: 28rem; height: 28rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hero-orbit { animation: none; }
}

/* ============================================================ */
/* ===== PER-SECTION SCENE VARIATIONS ========================= */
/* (each section overrides positions to feel unique)           */
/* ============================================================ */

/* ============================================================ */
/* ===== UNIQUE ELEMENT TYPES (per-section variety) =========== */
/* ============================================================ */

/* === CONSTELLATION (rasi bintang) — used in services, projects, contact */
.constellation {
    position: absolute;
    width: 110px;
    height: 80px;
    background-image:
        radial-gradient(circle at 10% 25%, #ffffff 0, #ffffff 2px, transparent 4px),
        radial-gradient(circle at 32% 50%, #ffffff 0, #ffffff 1.5px, transparent 3px),
        radial-gradient(circle at 55% 30%, #ffffff 0, #ffffff 2.5px, transparent 5px),
        radial-gradient(circle at 78% 55%, #ffffff 0, #ffffff 1.5px, transparent 3px),
        radial-gradient(circle at 95% 75%, #ffffff 0, #ffffff 2px, transparent 4px),
        radial-gradient(circle at 50% 85%, #ffffff 0, #ffffff 1.5px, transparent 3px);
    pointer-events: none;
    will-change: opacity;
    animation: constellationTwinkle 4s ease-in-out infinite;
}
@keyframes constellationTwinkle {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 1; }
}

/* === MOON (full, with craters) — Skills section */
.moon {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fefce8 0%, #f1eea2 60%, #c8c386 100%);
    box-shadow:
        inset -10px -10px 16px rgba(0, 0, 0, 0.25),
        0 0 28px rgba(254, 252, 232, 0.5);
    pointer-events: none;
    will-change: transform, filter;
    animation: moonGlow 6s ease-in-out infinite, moonDrift 30s ease-in-out infinite;
}
.moon::before {
    content: '';
    position: absolute;
    top: 30%;
    left: 22%;
    width: 7px;
    height: 7px;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 50%;
    box-shadow:
        13px 8px 0 -1px rgba(0, 0, 0, 0.13),
        -3px 18px 0 -2px rgba(0, 0, 0, 0.12),
        20px -5px 0 -3px rgba(0, 0, 0, 0.1);
}
@keyframes moonGlow {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.15); }
}
@keyframes moonDrift {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* === GALAXY SPIRAL — Skills section */
.galaxy-spiral {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(var(--main-color-rgb), 0.22) 0%, transparent 55%),
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(var(--main-color-rgb), 0.4) 45deg,
            transparent 110deg,
            rgba(var(--main-color-rgb), 0.3) 180deg,
            transparent 240deg,
            rgba(var(--main-color-rgb), 0.35) 300deg,
            transparent 360deg);
    filter: blur(2px);
    pointer-events: none;
    will-change: transform;
    animation: galaxySpin 25s linear infinite;
}
@keyframes galaxySpin {
    to { transform: rotate(360deg); }
}

/* === DISTANT GALAXY (bigger, dimmer) — Projects section */
.distant-galaxy {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(var(--main-color-rgb), 0.18) 5%, transparent 65%),
        conic-gradient(from 0deg,
            transparent 0deg,
            rgba(var(--main-color-rgb), 0.32) 60deg,
            transparent 130deg,
            rgba(var(--main-color-rgb), 0.22) 200deg,
            transparent 260deg,
            rgba(var(--main-color-rgb), 0.27) 320deg);
    filter: blur(3px);
    pointer-events: none;
    will-change: transform;
    animation: galaxySpin 50s linear infinite reverse;
}

/* === MOON CRESCENT — Contact section */
.moon-crescent {
    position: absolute;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #fefce8;
    box-shadow: 0 0 24px rgba(254, 252, 232, 0.5);
    pointer-events: none;
    will-change: filter;
    animation: moonGlow 7s ease-in-out infinite;
}
.moon-crescent::after {
    content: '';
    position: absolute;
    top: -3px;
    left: 14px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--second-bg-color);
}

/* === WIND streaks — Services light mode */
.wind {
    position: absolute;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 40%,
        rgba(255, 255, 255, 0.85) 60%,
        transparent 100%);
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0;
}
.wind-1 { top: 22%; left: -20%; width: 80px;  animation: windFlow 6s linear 0s  infinite; }
.wind-2 { top: 48%; left: -20%; width: 120px; animation: windFlow 8s linear 2s  infinite; }
.wind-3 { top: 70%; left: -20%; width: 60px;  animation: windFlow 5s linear 4s  infinite; }
@keyframes windFlow {
    0%   { transform: translateX(0);     opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.8; }
    100% { transform: translateX(140vw); opacity: 0; }
}

/* === PLANE (Font Awesome icon flying) — Skills light */
.plane {
    position: absolute;
    top: 25%;
    left: -5%;
    color: rgba(60, 80, 100, 0.7);
    font-size: 22px;
    pointer-events: none;
    will-change: transform, opacity;
    animation: planeFly 25s linear infinite;
}
.plane.plane-2 {
    top: 55%;
    color: rgba(50, 70, 90, 0.65);
    font-size: 18px;
    animation: planeFly2 35s linear 8s infinite;
}
.plane::before {
    /* contrail */
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 60px;
    height: 1.5px;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.7), transparent);
    transform: translateY(-50%);
}
@keyframes planeFly {
    0%   { transform: translate(0, 0)        rotate(-15deg); opacity: 0; }
    5%   { opacity: 1; }
    50%  { transform: translate(60vw, -10px) rotate(-15deg); opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translate(125vw, 5px)  rotate(-15deg); opacity: 0; }
}
@keyframes planeFly2 {
    0%   { transform: translate(0, 0)        rotate(-10deg); opacity: 0; }
    5%   { opacity: 1; }
    50%  { transform: translate(60vw, 10px)  rotate(-10deg); opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translate(125vw, -5px) rotate(-10deg); opacity: 0; }
}

/* === HOT AIR BALLOON — Projects light */
.balloon {
    position: absolute;
    width: 30px;
    height: 36px;
    border-radius: 50% 50% 45% 45%;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.15));
}
.balloon::before {
    /* basket */
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 7px;
    background: #92400e;
    border-radius: 1px 1px 2px 2px;
}
.balloon::after {
    /* string */
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 6px;
    background: #4a3018;
}
.balloon-1 {
    top: 18%; left: -5%;
    background: linear-gradient(135deg, #ef4444, #f97316);
    animation: balloonFloat1 35s linear infinite;
}
.balloon-2 {
    top: 45%; left: -5%;
    width: 28px;
    height: 34px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    animation: balloonFloat2 45s linear 10s infinite;
}
@keyframes balloonFloat1 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(30vw, -15px); }
    50%  { transform: translate(60vw, -25px); }
    75%  { transform: translate(90vw, -10px); }
    100% { transform: translate(120vw, 5px); }
}
@keyframes balloonFloat2 {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(30vw, 10px); }
    50%  { transform: translate(60vw, 20px); }
    75%  { transform: translate(90vw, 5px); }
    100% { transform: translate(120vw, -5px); }
}

/* === PAPER PLANE — Contact light */
.paper-plane {
    position: absolute;
    top: 30%;
    left: -5%;
    color: rgba(70, 90, 110, 0.75);
    font-size: 22px;
    pointer-events: none;
    will-change: transform, opacity;
    animation: paperPlaneFly 22s linear infinite;
}
@keyframes paperPlaneFly {
    0%   { transform: translate(0, 0)        rotate(-25deg); opacity: 0; }
    5%   { opacity: 1; }
    25%  { transform: translate(30vw, -20px) rotate(-15deg); opacity: 1; }
    50%  { transform: translate(60vw, 15px)  rotate(-25deg); opacity: 1; }
    75%  { transform: translate(90vw, -10px) rotate(-20deg); opacity: 1; }
    95%  { opacity: 1; }
    100% { transform: translate(125vw, 0)    rotate(-25deg); opacity: 0; }
}

/* === KITE — Contact light, anchored bottom-left, swaying */
.kite {
    position: absolute;
    top: 20%;
    left: 12%;
    width: 28px;
    height: 28px;
    pointer-events: none;
    will-change: transform;
    transform-origin: top left;
    animation: kiteSway 4s ease-in-out infinite;
}
.kite::before {
    /* diamond body */
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    transform: rotate(45deg);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}
.kite::after {
    /* trailing tail */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1.5px;
    height: 80px;
    background: linear-gradient(to bottom, rgba(74, 48, 24, 0.7), transparent);
    transform-origin: top;
    animation: kiteString 4s ease-in-out infinite;
}
@keyframes kiteSway {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
}
@keyframes kiteString {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}

/* ============================================================ */
/* ===== PER-SECTION POSITIONS (UNIQUE PLACEMENT) ============ */
/* ============================================================ */

/* SERVICES — mini ring + 2 constellations */
.scene-services .saturn-ring-mini-1 {
    width: 80px; height: 80px;
    top: 14%; left: 6%; right: auto;
    border-width: 1.5px;
    border-color: rgba(var(--main-color-rgb), 0.3);
    box-shadow: 0 0 12px rgba(var(--main-color-rgb), 0.18);
    animation: ringOrbit 24s linear infinite;
}
.scene-services .constellation-1 { top: 22%; right: 8%; }
.scene-services .constellation-2 { top: 65%; left: 5%; transform: scale(0.8); }
.scene-services .pulsar          { top: 7%; left: 4%; right: auto; }
.scene-services .meteor-1        { top: 8%;  right: 6%;  animation-delay: 0s;   }
.scene-services .meteor-2        { top: 50%; right: 3%;  animation-delay: 1.4s; animation-duration: 2.4s; }
.scene-services .meteor-3        { top: 88%; right: 8%;  animation-delay: 2.8s; }
.scene-services .petal-1   { left: 12%; animation-delay: 0s;  }
.scene-services .petal-2   { left: 35%; animation-delay: 3s;  animation-duration: 14s; }
.scene-services .petal-3   { left: 62%; animation-delay: 6s;  }
.scene-services .petal-4   { left: 85%; animation-delay: 9s;  animation-duration: 16s; }
.scene-services .sparkle-1 { top: 28%; left: 22%; animation-delay: 0s;   }
.scene-services .sparkle-2 { top: 58%; left: 70%; animation-delay: 1.2s; transform: scale(0.7); }
.scene-services .sparkle-3 { top: 78%; left: 30%; animation-delay: 2s;   transform: scale(0.85); }
.scene-services .bee-1     { top: 30%; left: -3%; animation-delay: 1s;  animation-duration: 12s; }
.scene-services .bee-2     { top: 65%; left: -3%; animation-delay: 5s;  animation-duration: 14s; }

/* ============================================================ */
/* ===== NEW ELEMENTS: pulsar, meteor, petal, sparkle ========= */
/* ============================================================ */

/* === PULSAR (neutron star with twinkling cross-spike) — Services dark */
.pulsar {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #15e039 55%, transparent 80%);
    box-shadow: 0 0 14px rgba(15, 222, 50, 0.75), 0 0 6px rgba(255,255,255,0.6);
    pointer-events: none;
    will-change: transform, opacity;
    animation: pulsarBeat 1.6s ease-in-out infinite;
}
/* Cross-spike rays — fixed orientation (horizontal + vertical), only twinkle */
.pulsar::before,
.pulsar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(15, 222, 50, 0.5) 30%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(15, 222, 50, 0.5) 70%,
        transparent 100%);
    transform: translate(-50%, -50%);
    filter: blur(0.5px);
    will-change: opacity;
    animation: pulsarSpike 1.6s ease-in-out infinite;
    pointer-events: none;
}
.pulsar::after {
    /* vertical spike */
    transform: translate(-50%, -50%) rotate(90deg);
}
@keyframes pulsarBeat {
    0%, 100% { transform: scale(1);   opacity: 0.85; }
    50%      { transform: scale(1.4); opacity: 1;    }
}
@keyframes pulsarSpike {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.95; }
}

/* === METEOR (small fast streaks for meteor shower) — Services dark */
.meteor {
    position: absolute;
    width: 50px;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.85) 60%,
        #15e039 100%);
    border-radius: 1px;
    pointer-events: none;
    transform: rotate(20deg);
    transform-origin: right center;
    will-change: transform, opacity;
    opacity: 0;
    animation: meteorFly 2.2s ease-in infinite;
}
@keyframes meteorFly {
    0%   { transform: translate(0, 0)         rotate(20deg); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(-180px, 65px) rotate(20deg); opacity: 0; }
}

/* === CHERRY BLOSSOM PETAL — Services light */
.petal {
    position: absolute;
    top: -20px;
    width: 11px;
    height: 13px;
    background: linear-gradient(135deg, #fda4af 0%, #fb7185 60%, #f43f5e 100%);
    border-radius: 100% 0% 100% 0%;  /* leaf-shape */
    pointer-events: none;
    box-shadow: 0 0 4px rgba(251, 113, 133, 0.3);
    will-change: transform, opacity;
    opacity: 0;
    animation: petalFall 12s linear infinite;
}
@keyframes petalFall {
    0%   { transform: translateY(0)     translateX(0)     rotate(0deg);   opacity: 0; }
    8%   { opacity: 0.85; }
    25%  { transform: translateY(25vh)  translateX(-20px) rotate(90deg); }
    50%  { transform: translateY(50vh)  translateX(25px)  rotate(180deg); }
    75%  { transform: translateY(75vh)  translateX(-15px) rotate(270deg); }
    92%  { opacity: 0.85; }
    100% { transform: translateY(110vh) translateX(20px)  rotate(360deg); opacity: 0; }
}

/* === SPARKLE (twinkling sun glints) — Services light */
.sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ffffff 0%, #fbbf24 40%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 10px rgba(251, 191, 36, 0.5);
    pointer-events: none;
    will-change: opacity, transform;
    opacity: 0;
    animation: sparkleTwinkle 2.5s ease-in-out infinite;
}
@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0;   transform: scale(0.5); }
    50%      { opacity: 1;   transform: scale(1.2); }
}

/* ============================================================ */
/* === NEW PROJECTS ELEMENTS: nebula, asteroid, shooting-star,
       rainbow, dandelion ===================================== */
/* ============================================================ */

/* === NEBULA (soft glowing emerald-teal cloud) — Projects dark */
.nebula {
    position: absolute;
    width: 140px;
    height: 90px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 30% 45%, rgba(var(--main-color-rgb), 0.55)   0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(34, 197, 94, 0.45)   0%, transparent 55%),
        radial-gradient(ellipse at 55% 35%, rgba(45, 212, 191, 0.35)  0%, transparent 50%),
        radial-gradient(ellipse at center,  rgba(20, 83, 45, 0.45)    0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    will-change: transform, opacity;
    animation: nebulaBreath 9s ease-in-out infinite;
}
@keyframes nebulaBreath {
    0%, 100% { transform: scale(1)    rotate(0deg);  opacity: 0.65; }
    50%      { transform: scale(1.15) rotate(8deg);  opacity: 1;    }
}

/* === ASTEROID (small drifting rocks) — Projects dark */
.asteroid {
    position: absolute;
    width: 16px;
    height: 14px;
    border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
    background: radial-gradient(circle at 35% 30%, #6b7280 0%, #374151 55%, #1f2937 100%);
    box-shadow:
        inset -2px -2px 3px rgba(0, 0, 0, 0.4),
        0 0 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    will-change: transform;
    animation: asteroidDrift 22s linear infinite;
}
.scene-projects .asteroid-2 {
    /* Smaller variant with reverse drift */
    width: 12px; height: 11px;
    animation-name: asteroidDriftReverse;
}
@keyframes asteroidDrift {
    0%   { transform: translate(0, 0)         rotate(0deg);   }
    25%  { transform: translate(20px, -15px)  rotate(90deg);  }
    50%  { transform: translate(40px, -8px)   rotate(180deg); }
    75%  { transform: translate(15px, 12px)   rotate(270deg); }
    100% { transform: translate(0, 0)         rotate(360deg); }
}
@keyframes asteroidDriftReverse {
    0%   { transform: translate(0, 0)         rotate(0deg);    }
    25%  { transform: translate(-18px, 14px)  rotate(-90deg);  }
    50%  { transform: translate(-30px, 5px)   rotate(-180deg); }
    75%  { transform: translate(-12px, -16px) rotate(-270deg); }
    100% { transform: translate(0, 0)         rotate(-360deg); }
}

/* === SHOOTING STAR (long graceful arc with head glow) — Projects dark */
.shooting-star {
    position: absolute;
    width: 90px;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--main-color-rgb), 0.4) 30%,
        rgba(255, 255, 255, 0.95) 90%,
        #ffffff 100%);
    border-radius: 100px;
    transform-origin: right center;
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: shootingStarFly 5.5s ease-out infinite;
}
.shooting-star::after {
    /* Bright head glow at the leading edge */
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, rgba(var(--main-color-rgb), 0.7) 40%, transparent 80%);
    transform: translate(50%, -50%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
}
@keyframes shootingStarFly {
    0%   { transform: translate(0, 0)        rotate(18deg); opacity: 0; }
    8%   { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translate(-320px, 95px) rotate(18deg); opacity: 0; }
}

/* === RAINBOW ARC (concentric color bands using box-shadow) — Projects light */
.rainbow {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 0 0 30px rgba(239, 68, 68, 0.32),
        0 0 0 38px rgba(251, 146, 60, 0.32),
        0 0 0 46px rgba(252, 211, 77, 0.32),
        0 0 0 54px rgba(74, 222, 128, 0.32),
        0 0 0 62px rgba(96, 165, 250, 0.32),
        0 0 0 70px rgba(168, 85, 247, 0.30);
    pointer-events: none;
    will-change: opacity, transform;
    opacity: 0;
    animation: rainbowFade 14s ease-in-out infinite;
}
@keyframes rainbowFade {
    0%, 100% { opacity: 0;   transform: scale(0.95); }
    25%, 75% { opacity: 0.55; transform: scale(1);    }
    50%      { opacity: 0.7;  transform: scale(1.02); }
}

/* === DANDELION SEED (white fluff floating UP — opposite of petals) — Projects light */
.dandelion {
    position: absolute;
    bottom: -20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 255, 255, 0.95) 0%,
        rgba(255, 255, 255, 0.55) 35%,
        transparent 65%);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0;
    animation: dandelionRise 14s linear infinite;
}
.dandelion::before {
    /* Fuzzy spokes around the seed head */
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background:
        radial-gradient(2px 7px at 50% 0%,   rgba(255, 255, 255, 0.7), transparent 70%),
        radial-gradient(2px 7px at 50% 100%, rgba(255, 255, 255, 0.7), transparent 70%),
        radial-gradient(7px 2px at 0% 50%,   rgba(255, 255, 255, 0.7), transparent 70%),
        radial-gradient(7px 2px at 100% 50%, rgba(255, 255, 255, 0.7), transparent 70%),
        radial-gradient(2px 5px at 18% 18%,  rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(2px 5px at 82% 18%,  rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(2px 5px at 18% 82%,  rgba(255, 255, 255, 0.55), transparent 70%),
        radial-gradient(2px 5px at 82% 82%,  rgba(255, 255, 255, 0.55), transparent 70%);
    pointer-events: none;
}
@keyframes dandelionRise {
    0%   { transform: translateY(0)      translateX(0)    rotate(0deg);   opacity: 0; }
    8%   { opacity: 0.85; }
    25%  { transform: translateY(-25vh)  translateX(15px) rotate(120deg); }
    50%  { transform: translateY(-50vh)  translateX(-12px) rotate(240deg); }
    75%  { transform: translateY(-75vh)  translateX(20px) rotate(300deg); }
    92%  { opacity: 0.85; }
    100% { transform: translateY(-110vh) translateX(-10px) rotate(420deg); opacity: 0; }
}

/* ============================================================ */
/* === MORNING SCENIC LANDSCAPES (per section, light mode) ==== */
/* Mostly static (no animations) for max performance */
/* ============================================================ */

/* === TREE LINE (forest silhouette) — Hero light */
.tree-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: linear-gradient(180deg, #5b8a3a 0%, #3d5e22 100%);
    clip-path: polygon(
        0% 100%, 0% 65%,
        3% 50%, 6% 75%, 9% 55%, 12% 70%,
        15% 45%, 18% 65%, 21% 50%, 24% 70%,
        27% 40%, 30% 60%, 33% 50%, 36% 65%,
        39% 35%, 42% 55%, 45% 50%, 48% 70%,
        51% 45%, 54% 60%, 57% 50%, 60% 70%,
        63% 40%, 66% 65%, 69% 55%, 72% 70%,
        75% 45%, 78% 60%, 81% 50%, 84% 70%,
        87% 35%, 90% 60%, 93% 50%, 96% 70%,
        100% 50%, 100% 100%
    );
    pointer-events: none;
    opacity: 0.5;
}
.tree-line::before {
    /* Distant lighter back-row of trees */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #8aaf5e 0%, #6b8c45 100%);
    clip-path: polygon(
        0% 100%, 0% 80%,
        8% 70%, 16% 78%, 24% 68%, 32% 76%,
        40% 65%, 48% 78%, 56% 70%, 64% 76%,
        72% 65%, 80% 75%, 88% 68%, 96% 78%,
        100% 72%, 100% 100%
    );
    opacity: 0.55;
}

/* === HILLS LINE (gentle rolling hills) — Services light */
.hills-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 95px;
    background: linear-gradient(180deg, rgba(132, 204, 22, 0.6) 0%, rgba(74, 124, 30, 0.75) 100%);
    clip-path: polygon(
        0% 100%, 0% 60%,
        15% 35%, 30% 55%,
        45% 30%, 60% 50%,
        75% 32%, 90% 55%,
        100% 40%, 100% 100%
    );
    pointer-events: none;
    opacity: 0.45;
}
.hills-line::before {
    /* Front lighter hills */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(163, 230, 53, 0.55) 0%, rgba(101, 163, 13, 0.7) 100%);
    clip-path: polygon(
        0% 100%, 0% 80%,
        20% 65%, 40% 80%,
        55% 70%, 75% 82%,
        95% 72%, 100% 78%, 100% 100%
    );
    opacity: 0.6;
}

/* === WATERFALL (animated cascade) — Skills light */
.waterfall {
    position: absolute;
    top: 6%;
    right: 4%;
    width: 70px;
    height: 70%;
    background: linear-gradient(180deg,
        rgba(186, 230, 253, 0.0) 0%,
        rgba(186, 230, 253, 0.55) 8%,
        rgba(96, 165, 250, 0.6) 50%,
        rgba(59, 130, 246, 0.55) 92%,
        rgba(186, 230, 253, 0.0) 100%);
    border-radius: 8px 8px 50% 50% / 8px 8px 18% 18%;
    overflow: visible;
    pointer-events: none;
    will-change: opacity;
    animation: waterfallBreath 4s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(96, 165, 250, 0.35);
}
.waterfall::before {
    /* Flowing white stripes */
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg,
        transparent 0,
        rgba(255, 255, 255, 0.22) 3px,
        rgba(255, 255, 255, 0.05) 6px,
        transparent 12px);
    animation: waterfallFlow 1.4s linear infinite;
    will-change: transform;
    border-radius: inherit;
}
.waterfall::after {
    /* Top lip / source highlight */
    content: '';
    position: absolute;
    top: 0;
    left: -8%;
    right: -8%;
    height: 7px;
    background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(186,230,253,0.5));
    border-radius: 50%;
    filter: blur(1px);
}
.waterfall-mist {
    position: absolute;
    bottom: -28px;
    left: -28px;
    right: -28px;
    height: 60px;
    background: radial-gradient(ellipse at 50% 40%,
        rgba(255, 255, 255, 0.65) 0%,
        rgba(186, 230, 253, 0.45) 35%,
        transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    will-change: transform, opacity;
    animation: mistPulse 3s ease-in-out infinite;
}
@keyframes waterfallFlow {
    0%   { transform: translateY(0); }
    100% { transform: translateY(15px); }
}
@keyframes waterfallBreath {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 0.9; }
}
@keyframes mistPulse {
    0%, 100% { transform: scale(1);    opacity: 0.55; }
    50%      { transform: scale(1.15); opacity: 0.8;  }
}

/* === BAMBOO GROVE (4 stalks via stacked gradients) — Skills light */
.bamboo-grove {
    position: absolute;
    bottom: 0;
    left: 2%;
    width: 150px;
    height: 220px;
    pointer-events: none;
    background:
        linear-gradient(180deg, #6b9b3f, #4a7c30 50%, #2d4a1d) 4%  bottom / 12px 100% no-repeat,
        linear-gradient(180deg, #7aab4a, #5a8a35 50%, #3d6624) 28% bottom / 12px 92%  no-repeat,
        linear-gradient(180deg, #6b9b3f, #4a7c30 50%, #2d4a1d) 56% bottom / 12px 96%  no-repeat,
        linear-gradient(180deg, #7aab4a, #5a8a35 50%, #3d6624) 84% bottom / 12px 88%  no-repeat;
    opacity: 0.85;
    filter: drop-shadow(2px 0 4px rgba(0,0,0,0.18));
}
.bamboo-grove::before {
    /* Bamboo leaves clusters at top of each stalk */
    content: '';
    position: absolute;
    top: -8px;
    left: -6%;
    right: -6%;
    height: 50px;
    background:
        radial-gradient(ellipse 14px 7px at 12% 50%, rgba(107, 155, 63, 0.9), transparent 65%),
        radial-gradient(ellipse 11px 5px at 16% 25%, rgba(90, 138, 53, 0.85), transparent 65%),
        radial-gradient(ellipse 11px 5px at 8%  35%, rgba(122, 171, 74, 0.85), transparent 65%),
        radial-gradient(ellipse 14px 7px at 36% 55%, rgba(122, 171, 74, 0.9), transparent 65%),
        radial-gradient(ellipse 11px 5px at 40% 30%, rgba(107, 155, 63, 0.85), transparent 65%),
        radial-gradient(ellipse 11px 5px at 32% 38%, rgba(90, 138, 53, 0.85), transparent 65%),
        radial-gradient(ellipse 14px 7px at 64% 50%, rgba(107, 155, 63, 0.9), transparent 65%),
        radial-gradient(ellipse 11px 5px at 68% 25%, rgba(122, 171, 74, 0.85), transparent 65%),
        radial-gradient(ellipse 11px 5px at 60% 35%, rgba(90, 138, 53, 0.85), transparent 65%),
        radial-gradient(ellipse 14px 7px at 92% 50%, rgba(122, 171, 74, 0.9), transparent 65%),
        radial-gradient(ellipse 11px 5px at 96% 28%, rgba(107, 155, 63, 0.85), transparent 65%),
        radial-gradient(ellipse 11px 5px at 88% 38%, rgba(90, 138, 53, 0.85), transparent 65%);
    pointer-events: none;
}
.bamboo-grove::after {
    /* Joint segment marks on stalks (darker dots) */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 4px 2px at 8%  25%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 8%  50%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 8%  75%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 32% 20%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 32% 45%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 32% 70%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 60% 30%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 60% 55%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 60% 80%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 88% 22%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 88% 48%, rgba(30, 58, 12, 0.7), transparent 60%),
        radial-gradient(ellipse 4px 2px at 88% 73%, rgba(30, 58, 12, 0.7), transparent 60%);
    pointer-events: none;
    opacity: 0.6;
}

/* === WINDMILL (4-blade star rotor) — Skills light */
/* Anchored to BOTTOM so tower base sits on the grass-tuft (was floating at top) */
.windmill {
    position: absolute;
    bottom: 8px;     /* sits inside the 22px grass-tuft for "planted" look */
    right: 4%;
    width: 80px;
    height: 170px;   /* taller so rotor reaches up into sky */
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}
.windmill::before {
    /* Tower (trapezoid, taller so it stretches from grass to rotor) */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 16px;
    height: 130px;
    background: linear-gradient(180deg, #e4e4e7 0%, #a1a1aa 60%, #52525b 100%);
    transform: translateX(-50%);
    clip-path: polygon(35% 0, 65% 0, 100% 100%, 0% 100%);
    box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.2);
    border-radius: 2px 2px 0 0;
}
.windmill::after {
    /* 4-bladed star rotor (clip-path star polygon) */
    content: '';
    position: absolute;
    top: 6px;
    left: 50%;
    width: 70px;
    height: 70px;
    background:
        /* Bright orange center hub (visible at 50% 50%) */
        radial-gradient(circle 8px at 50% 50%, #f59e0b 0%, #d97706 70%, transparent 100%),
        /* Blade gradient: white outer → light gray inner */
        radial-gradient(circle at 50% 50%, #f3f4f6 0%, #e5e7eb 60%, #d1d5db 100%);
    /* 4-pointed star with concave sides (8 vertices) */
    clip-path: polygon(
        50% 0%,    /* top tip */
        56% 44%,   /* top-right inner */
        100% 50%,  /* right tip */
        56% 56%,   /* bottom-right inner */
        50% 100%,  /* bottom tip */
        44% 56%,   /* bottom-left inner */
        0% 50%,    /* left tip */
        44% 44%    /* top-left inner */
    );
    transform: translateX(-50%);
    transform-origin: 50% 50%;
    will-change: transform;
    animation: windmillSpin 4.5s linear infinite;
}
@keyframes windmillSpin {
    from { transform: translateX(-50%) rotate(0deg);   }
    to   { transform: translateX(-50%) rotate(360deg); }
}

/* === FIREFLY (small glowing dots floating) — reusable for light scenes */
.firefly {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fde047;
    box-shadow:
        0 0 6px 2px rgba(253, 224, 71, 0.7),
        0 0 12px 4px rgba(253, 224, 71, 0.35);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: fireflyDance 6s ease-in-out infinite;
}
@keyframes fireflyDance {
    0%, 100% { opacity: 0;    transform: translate(0, 0); }
    20%      { opacity: 0.9;  transform: translate(8px, -10px); }
    40%      { opacity: 0.5;  transform: translate(-6px, -18px); }
    60%      { opacity: 0.95; transform: translate(12px, -28px); }
    80%      { opacity: 0.6;  transform: translate(-4px, -36px); }
}

/* === ROLLING HILL (single gentle slope) — Education light */
.rolling-hill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 75px;
    background: linear-gradient(180deg, rgba(132, 204, 22, 0.55) 0%, rgba(74, 124, 30, 0.7) 100%);
    border-radius: 50% 50% 0 0 / 70% 70% 0 0;
    transform: scaleX(1.4);
    transform-origin: bottom center;
    pointer-events: none;
    opacity: 0.45;
}
.rolling-hill::before {
    /* Smaller front hill bump */
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    right: 25%;
    height: 50px;
    background: linear-gradient(180deg, rgba(163, 230, 53, 0.5) 0%, rgba(101, 163, 13, 0.65) 100%);
    border-radius: 50% 50% 0 0;
    opacity: 0.7;
}

/* === FLOWER FIELD (grass + small flower dots) — Projects light */
.flower-field {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45px;
    background: linear-gradient(180deg, transparent 0%, rgba(132, 204, 22, 0.5) 35%, rgba(74, 124, 30, 0.7) 100%);
    clip-path: polygon(
        0% 100%, 0% 70%,
        2% 45%, 4% 80%, 6% 55%, 8% 75%,
        10% 50%, 12% 80%, 14% 60%, 16% 75%,
        18% 45%, 20% 80%, 22% 55%, 24% 75%,
        26% 50%, 28% 78%, 30% 60%, 32% 80%,
        34% 45%, 36% 78%, 38% 55%, 40% 80%,
        42% 50%, 44% 75%, 46% 60%, 48% 80%,
        50% 45%, 52% 78%, 54% 55%, 56% 80%,
        58% 50%, 60% 75%, 62% 60%, 64% 80%,
        66% 45%, 68% 78%, 70% 55%, 72% 80%,
        74% 50%, 76% 75%, 78% 60%, 80% 80%,
        82% 45%, 84% 78%, 86% 55%, 88% 80%,
        90% 50%, 92% 75%, 94% 60%, 96% 80%,
        98% 50%, 100% 75%, 100% 100%
    );
    pointer-events: none;
    opacity: 0.55;
}
.flower-field::before {
    /* Scattered flower dots (using radial-gradients) */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    height: 18px;
    background:
        radial-gradient(circle 4px at 8%  60%, #f59e0b 0%, #f59e0b 60%, transparent 70%),
        radial-gradient(circle 4px at 18% 40%, #ef4444 0%, #ef4444 60%, transparent 70%),
        radial-gradient(circle 4px at 28% 65%, #ffffff 0%, #ffffff 60%, transparent 70%),
        radial-gradient(circle 4px at 38% 45%, #ec4899 0%, #ec4899 60%, transparent 70%),
        radial-gradient(circle 4px at 48% 60%, #facc15 0%, #facc15 60%, transparent 70%),
        radial-gradient(circle 4px at 58% 40%, #ffffff 0%, #ffffff 60%, transparent 70%),
        radial-gradient(circle 4px at 68% 65%, #f59e0b 0%, #f59e0b 60%, transparent 70%),
        radial-gradient(circle 4px at 78% 45%, #ec4899 0%, #ec4899 60%, transparent 70%),
        radial-gradient(circle 4px at 88% 60%, #facc15 0%, #facc15 60%, transparent 70%),
        radial-gradient(circle 4px at 95% 50%, #ef4444 0%, #ef4444 60%, transparent 70%);
    opacity: 0.7;
    pointer-events: none;
}

/* === LIGHTHOUSE (silhouette with subtle pulsing top light) — Contact light */
.lighthouse {
    position: absolute;
    bottom: 0;
    right: 6%;
    width: 30px;
    height: 110px;
    background: linear-gradient(180deg,
        #dc2626 0%, #dc2626 18%,
        #f3f4f6 18%, #f3f4f6 32%,
        #dc2626 32%, #dc2626 46%,
        #f3f4f6 46%, #f3f4f6 60%,
        #dc2626 60%, #dc2626 74%,
        #57534e 74%, #57534e 100%);
    clip-path: polygon(
        30% 0%, 70% 0%,
        70% 16%, 80% 16%, 80% 22%,
        90% 22%, 90% 100%,
        10% 100%, 10% 22%,
        20% 22%, 20% 16%, 30% 16%
    );
    pointer-events: none;
    opacity: 0.55;
    filter: drop-shadow(0 -2px 4px rgba(0,0,0,0.15));
}
.lighthouse::before {
    /* Top dome cap */
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    width: 14px;
    height: 10px;
    background: #57534e;
    border-radius: 50% 50% 10% 10%;
    transform: translateX(-50%);
}
.lighthouse::after {
    /* Pulsing lamp glow at top */
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: radial-gradient(circle, #fde68a 0%, rgba(251, 191, 36, 0.6) 50%, transparent 80%);
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.8);
    will-change: opacity, transform;
    animation: lighthouseLamp 2.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lighthouseLamp {
    0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(0.85); }
    50%      { opacity: 1;   transform: translateX(-50%) scale(1.15); }
}

/* === BOOK STACK (3 stacked books) — Education light */
.book-stack {
    position: absolute;
    bottom: 0;
    right: 8%;
    width: 70px;
    height: 60px;
    pointer-events: none;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    /* Top book (3rd) — blue, drawn via background */
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
    background-position: 12px 8px;
    background-size: 48px 14px;
    background-repeat: no-repeat;
    border-radius: 0;
}
.book-stack::before {
    /* Bottom book (widest) — green */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 18px;
    background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    border-radius: 2px 4px 4px 2px;
    box-shadow:
        inset 4px 0 0 rgba(0, 0, 0, 0.15),
        inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.book-stack::after {
    /* Middle book — red, slightly tilted */
    content: '';
    position: absolute;
    bottom: 18px;
    left: 6px;
    width: 60px;
    height: 16px;
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    border-radius: 2px 4px 4px 2px;
    transform: rotate(-3deg);
    transform-origin: bottom left;
    box-shadow:
        inset 4px 0 0 rgba(0, 0, 0, 0.15),
        inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

/* === BEACH WAVE (subtle ocean wave at bottom) — Contact light */
.beach-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(180deg,
        rgba(186, 230, 253, 0.5) 0%,
        rgba(96, 165, 250, 0.55) 60%,
        rgba(59, 130, 246, 0.6)  100%);
    pointer-events: none;
    opacity: 0.55;
    overflow: hidden;
}
.beach-wave::before {
    /* Wave top edge with rolling foam */
    content: '';
    position: absolute;
    top: -8px;
    left: -10%;
    right: -10%;
    height: 16px;
    background:
        radial-gradient(ellipse 40px 8px at 0%   50%, rgba(255,255,255,0.85) 30%, transparent 60%),
        radial-gradient(ellipse 40px 8px at 25%  50%, rgba(255,255,255,0.7)  30%, transparent 60%),
        radial-gradient(ellipse 40px 8px at 50%  50%, rgba(255,255,255,0.85) 30%, transparent 60%),
        radial-gradient(ellipse 40px 8px at 75%  50%, rgba(255,255,255,0.7)  30%, transparent 60%),
        radial-gradient(ellipse 40px 8px at 100% 50%, rgba(255,255,255,0.85) 30%, transparent 60%);
    border-radius: 50%;
    will-change: transform;
    animation: waveRoll 8s ease-in-out infinite;
}
.beach-wave::after {
    /* Subtle horizontal sparkles on water surface */
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 30%,
        transparent 50%,
        rgba(255, 255, 255, 0.5) 70%,
        transparent 100%);
    will-change: opacity;
    animation: waveShimmer 3s ease-in-out infinite;
}
@keyframes waveRoll {
    0%, 100% { transform: translateX(0)    scaleY(1);    }
    50%      { transform: translateX(-15px) scaleY(1.2); }
}
@keyframes waveShimmer {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.9; }
}

/* === GALAXY CLUSTER (faint distant cluster of stars) — dark sections */
.galaxy-cluster {
    position: absolute;
    width: 80px;
    height: 50px;
    pointer-events: none;
    background-image:
        radial-gradient(circle 1.5px at 20% 30%, #ffffff 50%, transparent 100%),
        radial-gradient(circle 1px   at 35% 50%, rgba(255,255,255,0.85) 50%, transparent 100%),
        radial-gradient(circle 2px   at 50% 35%, #ffffff 50%, transparent 100%),
        radial-gradient(circle 1.2px at 60% 60%, rgba(255,255,255,0.85) 50%, transparent 100%),
        radial-gradient(circle 1px   at 75% 40%, #ffffff 50%, transparent 100%),
        radial-gradient(circle 1.5px at 85% 65%, rgba(255,255,255,0.85) 50%, transparent 100%),
        radial-gradient(circle 1px   at 30% 75%, #ffffff 50%, transparent 100%),
        radial-gradient(circle 1.2px at 65% 80%, rgba(255,255,255,0.85) 50%, transparent 100%),
        /* Soft greenish glow nebula behind cluster */
        radial-gradient(ellipse 50% 60% at 50% 50%, rgba(var(--main-color-rgb), 0.25) 0%, rgba(34, 197, 94, 0.12) 40%, transparent 75%);
    will-change: opacity, transform;
    animation: clusterDrift 14s ease-in-out infinite;
    opacity: 0.7;
}
@keyframes clusterDrift {
    0%, 100% { transform: translate(0, 0)   scale(1);    opacity: 0.55; }
    50%      { transform: translate(6px, -4px) scale(1.05); opacity: 0.9;  }
}

/* === BOAT (small sailboat on the ocean) — Contact light */
.boat {
    position: absolute;
    bottom: 28px;
    left: 18%;
    width: 50px;
    height: 38px;
    pointer-events: none;
    will-change: transform;
    animation: boatBob 4s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
}
.boat::before {
    /* Hull (trapezoid) */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 14px;
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
    border-radius: 0 0 6px 6px;
}
.boat::after {
    /* Sail (white triangle) */
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    width: 30px;
    height: 26px;
    background: linear-gradient(135deg, #ffffff 0%, #f3f4f6 50%, #d1d5db 100%);
    clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    transform: translateX(-50%);
    box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.12);
}
@keyframes boatBob {
    0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
    50%      { transform: translateY(-3px) rotate(1.5deg);  }
}

/* === SEAGULL (small flying gull, "M" wing silhouette) — Contact light */
.seagull {
    position: absolute;
    width: 20px;
    height: 8px;
    pointer-events: none;
    background: transparent;
    border-top: 2px solid #6b7280;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    will-change: transform;
    opacity: 0;
    animation: seagullFly 18s linear infinite;
}
.seagull::before {
    /* Second wing arc to make M-shape */
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 10px;
    height: 4px;
    border-top: 2px solid #6b7280;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    transform: translateX(-50%);
}
@keyframes seagullFly {
    0%   { opacity: 0; transform: translate(0, 0)        scaleX(1); }
    8%   { opacity: 0.8; }
    50%  { transform: translate(50vw, -8px)  scaleX(1); }
    92%  { opacity: 0.8; }
    100% { opacity: 0; transform: translate(110vw, 4px) scaleX(1); }
}

/* === GRASS TUFT (ground vegetation strip) — Skills light */
.grass-tuft {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 22px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(107, 155, 63, 0.55) 0%, rgba(74, 124, 48, 0.7) 100%);
    clip-path: polygon(
        0% 100%, 0% 60%,
        2% 30%, 4% 70%, 6% 25%, 8% 65%, 10% 35%, 12% 55%, 14% 20%, 16% 60%, 18% 40%,
        20% 50%, 22% 25%, 24% 65%, 26% 35%, 28% 55%, 30% 20%, 32% 60%, 34% 40%, 36% 50%, 38% 30%,
        40% 65%, 42% 25%, 44% 55%, 46% 35%, 48% 60%, 50% 30%, 52% 50%, 54% 25%, 56% 65%, 58% 40%,
        60% 55%, 62% 30%, 64% 60%, 66% 35%, 68% 50%, 70% 25%, 72% 65%, 74% 40%, 76% 55%, 78% 30%,
        80% 60%, 82% 35%, 84% 50%, 86% 25%, 88% 65%, 90% 40%, 92% 55%, 94% 30%, 96% 60%, 98% 35%,
        100% 60%, 100% 100%
    );
    opacity: 0.6;
}

/* === PENCIL (yellow with brown tip + pink eraser) — Education light */
.pencil {
    position: absolute;
    bottom: 50px;
    right: 22%;
    width: 60px;
    height: 10px;
    pointer-events: none;
    transform: rotate(-18deg);
    transform-origin: center;
    will-change: transform;
    animation: pencilFloat 5s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
    opacity: 0.85;
}
.pencil::before {
    /* Body (yellow with wood-tone striping) */
    content: '';
    position: absolute;
    inset: 0 16px 0 8px;
    background:
        repeating-linear-gradient(0deg,
            #fbbf24 0 2px,
            #f59e0b 2px 3px),
        linear-gradient(180deg, #fbbf24, #f59e0b);
    border-radius: 2px;
}
.pencil::after {
    /* Tip + eraser */
    content: '';
    position: absolute;
    inset: 0;
    background:
        /* Pink eraser (left end) */
        linear-gradient(90deg, #ec4899 0 6px, transparent 6px),
        /* Metal band */
        linear-gradient(90deg, transparent 0 6px, #d1d5db 6px 8px, transparent 8px),
        /* Wood tip (right end) */
        linear-gradient(90deg, transparent 0 calc(100% - 16px), #d4a574 calc(100% - 16px) calc(100% - 6px), transparent calc(100% - 6px)),
        /* Graphite point */
        linear-gradient(90deg, transparent 0 calc(100% - 6px), #1f2937 calc(100% - 6px) 100%);
    border-radius: 5px 1px 1px 5px;
    clip-path: polygon(0% 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 0% 100%);
}
@keyframes pencilFloat {
    0%, 100% { transform: rotate(-18deg) translateY(0); }
    50%      { transform: rotate(-15deg) translateY(-4px); }
}

/* === SATELLITE (small blinking light traveling slowly) — dark sections */
.satellite {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.9),
        0 0 8px rgba(96, 165, 250, 0.6);
    pointer-events: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: satelliteOrbit 20s linear infinite, satelliteBlink 1.5s ease-in-out infinite;
}
@keyframes satelliteOrbit {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(110vw, -30px); }
}
@keyframes satelliteBlink {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
}

/* === BEE (small flying bee) — Services light */
.bee {
    position: absolute;
    width: 14px;
    height: 9px;
    border-radius: 50%;
    background:
        linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    pointer-events: none;
    will-change: transform, opacity;
    opacity: 0;
    animation: beeFly 10s ease-in-out infinite;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.bee::before {
    /* Black stripes on body */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(90deg,
            transparent 0% 30%,
            rgba(0, 0, 0, 0.55) 30% 38%,
            transparent 38% 55%,
            rgba(0, 0, 0, 0.55) 55% 63%,
            transparent 63% 100%);
}
.bee::after {
    /* Translucent wings (top) */
    content: '';
    position: absolute;
    top: -4px;
    left: 30%;
    width: 8px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 4px 0 0 -1px rgba(255, 255, 255, 0.6);
    will-change: transform;
    animation: beeWingFlap 0.18s ease-in-out infinite alternate;
}
@keyframes beeFly {
    0%   { opacity: 0;  transform: translate(0, 0)         rotate(0deg); }
    8%   { opacity: 1; }
    25%  { transform: translate(25vw, -15px) rotate(5deg);  }
    50%  { transform: translate(50vw, 10px)  rotate(-4deg); }
    75%  { transform: translate(75vw, -10px) rotate(6deg);  }
    92%  { opacity: 1; }
    100% { opacity: 0; transform: translate(110vw, 5px)    rotate(0deg); }
}
@keyframes beeWingFlap {
    from { transform: scaleY(1);   }
    to   { transform: scaleY(0.4); }
}

/* ============================================================ */
/* === HERO UNIQUE ELEMENTS: aurora, planet, star-field,
       mountain-back ========================================== */
/* ============================================================ */

/* === AURORA RIBBON (dancing emerald lights) — Hero dark */
.aurora {
    position: absolute;
    top: 4%;
    left: -15%;
    right: -15%;
    height: 70px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--main-color-rgb), 0.0)   8%,
        rgba(var(--main-color-rgb), 0.28) 22%,
        rgba(34, 197, 94, 0.42) 42%,
        rgba(45, 212, 191, 0.38) 58%,
        rgba(var(--main-color-rgb), 0.32) 78%,
        rgba(var(--main-color-rgb), 0.0)  92%,
        transparent 100%);
    filter: blur(14px);
    border-radius: 50%;
    transform: skewY(-3deg);
    pointer-events: none;
    will-change: transform, opacity;
    animation: auroraWave 12s ease-in-out infinite;
    opacity: 0.7;
}
.aurora::before {
    /* Second layer offset for shimmer depth */
    content: '';
    position: absolute;
    inset: -10px 0 -10px 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--main-color-rgb), 0.18) 30%,
        rgba(34, 197, 94, 0.25) 55%,
        rgba(var(--main-color-rgb), 0.18) 80%,
        transparent 100%);
    filter: blur(20px);
    border-radius: 50%;
    transform: skewY(2deg);
    will-change: transform, opacity;
    animation: auroraWave 9s ease-in-out infinite reverse;
    opacity: 0.6;
}
@keyframes auroraWave {
    0%, 100% { transform: skewY(-3deg) translateY(0)  scaleY(1);    opacity: 0.5; }
    50%      { transform: skewY(2deg)  translateY(8px) scaleY(1.15); opacity: 0.85; }
}

/* === PLANET (small ringed gas giant) — Hero dark */
.planet {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, #fbbf24 0%, #f59e0b 35%, #c2410c 70%, #7c2d12 100%);
    box-shadow:
        inset -5px -5px 8px rgba(0, 0, 0, 0.45),
        inset 3px 3px 6px rgba(255, 200, 100, 0.25),
        0 0 14px rgba(245, 158, 11, 0.45);
    pointer-events: none;
    will-change: transform;
    animation: planetDrift 26s ease-in-out infinite;
}
.planet::before {
    /* Tilted ring */
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    right: -10px;
    height: 12px;
    border: 1.5px solid rgba(245, 158, 11, 0.55);
    border-radius: 50%;
    transform: translateY(-50%) rotate(-18deg);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.25);
}
.planet::after {
    /* Subtle banding stripe */
    content: '';
    position: absolute;
    top: 45%;
    left: 8%;
    right: 8%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(124, 45, 18, 0.5), transparent);
    border-radius: 50%;
}
@keyframes planetDrift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8px, -6px); }
}

/* === STAR FIELD (multiple twinkling stars in 1 layer) — Hero dark */
.star-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.2px 1.2px at 8%  12%, #ffffff 50%, transparent 100%),
        radial-gradient(1px   1px   at 18% 28%, rgba(255,255,255,0.9) 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 28% 18%, #ffffff 50%, transparent 100%),
        radial-gradient(1px   1px   at 36% 42%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 48% 22%, #ffffff 50%, transparent 100%),
        radial-gradient(1px   1px   at 56% 52%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 64% 32%, #ffffff 50%, transparent 100%),
        radial-gradient(1px   1px   at 72% 14%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 80% 48%, #ffffff 50%, transparent 100%),
        radial-gradient(1.8px 1.8px at 92% 30%, #ffffff 50%, transparent 100%),
        radial-gradient(1px   1px   at 14% 60%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 26% 72%, #ffffff 50%, transparent 100%),
        radial-gradient(1px   1px   at 42% 82%, rgba(255,255,255,0.7) 50%, transparent 100%),
        radial-gradient(1.5px 1.5px at 58% 68%, #ffffff 50%, transparent 100%),
        radial-gradient(1px   1px   at 74% 88%, rgba(255,255,255,0.8) 50%, transparent 100%),
        radial-gradient(1.2px 1.2px at 88% 76%, #ffffff 50%, transparent 100%);
    will-change: opacity;
    animation: starFieldTwinkle 5s ease-in-out infinite;
    opacity: 0.7;
}
@keyframes starFieldTwinkle {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.95; }
}

/* === MOUNTAIN BACK (distant mountains behind tree-line) — Hero light */
.mountain-back {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    background: linear-gradient(180deg,
        rgba(148, 163, 184, 0.45) 0%,
        rgba(100, 116, 139, 0.6)  60%,
        rgba(71, 85, 105, 0.7)    100%);
    clip-path: polygon(
        0% 100%, 0% 70%,
        10% 35%, 20% 60%,
        32% 22%, 45% 55%,
        58% 28%, 72% 58%,
        85% 32%, 100% 60%,
        100% 100%
    );
    pointer-events: none;
    opacity: 0.5;
}
.mountain-back::before {
    /* Distant lighter mountain row (atmospheric perspective) */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(203, 213, 225, 0.55) 0%, rgba(148, 163, 184, 0.65) 100%);
    clip-path: polygon(
        0% 100%, 0% 78%,
        18% 55%, 32% 72%,
        48% 50%, 65% 72%,
        82% 58%, 100% 72%,
        100% 100%
    );
    opacity: 0.55;
}

/* SKILLS — black hole + galaxy spiral + 3 constellations */
.scene-skills .black-hole {
    top: 12%; right: 10%;
}
.scene-skills .galaxy-spiral {
    top: 65%; left: 6%;
}
.scene-skills .constellation-1 { top: 28%; left: 12%; transform: scale(0.7); }
.scene-skills .constellation-2 { top: 55%; right: 14%; transform: scale(0.85); }
.scene-skills .constellation-3 { top: 82%; left: 35%; transform: scale(0.6); }

/* SKILLS LIGHT extras: sun rays + butterflies + fireflies */
.scene-skills .sun-rays {
    top: -40px; right: -40px;
}
.scene-skills .butterfly-1 { top: 30%; left: -5%; animation-delay: 0s; }
.scene-skills .butterfly-2 { top: 60%; left: -5%; animation-delay: 9s; animation-duration: 26s; }
.scene-skills .firefly-1   { top: 70%; left: 18%; animation-delay: 0s;   }
.scene-skills .firefly-2   { top: 55%; left: 28%; animation-delay: 2.5s; animation-duration: 7s; }
.scene-skills .firefly-3   { top: 80%; left: 12%; animation-delay: 4s;   animation-duration: 8s; }

/* SKILLS DARK extras: shooting star + galaxy cluster + satellite (positioned in corners away from skill cards) */
.scene-skills .shooting-star-1   { top: 8%;  right: 30%; animation-delay: 2.5s; animation-duration: 6s; }
.scene-skills .galaxy-cluster-1  { top: 6%;  left: 6%; width: 65px; height: 40px; }
.scene-skills .satellite-1       { top: 14%; left: -3%; animation-delay: 8s; }

/* ============================================================ */
/* ===== NEW ELEMENTS: black-hole, sun-rays, butterfly ======== */
/* ============================================================ */

/* === BLACK HOLE with rotating accretion disk — Skills dark */
.black-hole {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        #000 0%,
        #000 32%,
        rgba(var(--main-color-rgb), 0.05) 35%,
        transparent 50%);
    box-shadow:
        0 0 24px 4px rgba(var(--main-color-rgb), 0.18),
        inset 0 0 12px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    will-change: transform;
}
.black-hole::before {
    /* Accretion disk: rotating bright ring around event horizon */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        transparent 0deg,
        rgba(var(--main-color-rgb), 0.55) 40deg,
        rgba(15, 222, 50, 0.85) 90deg,
        rgba(var(--main-color-rgb), 0.5) 150deg,
        transparent 200deg,
        rgba(var(--main-color-rgb), 0.4) 260deg,
        rgba(15, 222, 50, 0.6) 320deg,
        transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 32%, #000 36%, #000 50%, transparent 56%);
            mask: radial-gradient(circle, transparent 32%, #000 36%, #000 50%, transparent 56%);
    filter: blur(1.5px);
    will-change: transform;
    animation: blackHoleSpin 9s linear infinite;
}
.black-hole::after {
    /* Outer faint glow halo */
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 45%, rgba(var(--main-color-rgb), 0.12) 55%, transparent 75%);
    pointer-events: none;
}
@keyframes blackHoleSpin {
    to { transform: rotate(360deg); }
}

/* === SUN RAYS (corner sunburst) — Skills light */
.sun-rays {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(251, 191, 36, 0.32) 0deg,
        transparent 18deg,
        rgba(251, 191, 36, 0.25) 40deg,
        transparent 58deg,
        rgba(253, 186, 116, 0.3)  80deg,
        transparent 98deg,
        rgba(251, 191, 36, 0.28) 120deg,
        transparent 138deg,
        rgba(253, 186, 116, 0.22) 160deg,
        transparent 178deg,
        rgba(251, 191, 36, 0.3)  200deg,
        transparent 218deg,
        rgba(253, 186, 116, 0.25) 240deg,
        transparent 258deg,
        rgba(251, 191, 36, 0.28) 280deg,
        transparent 298deg,
        rgba(253, 186, 116, 0.22) 320deg,
        transparent 340deg,
        rgba(251, 191, 36, 0.3)  360deg);
    -webkit-mask: radial-gradient(circle, transparent 0%, #000 28%, transparent 80%);
            mask: radial-gradient(circle, transparent 0%, #000 28%, transparent 80%);
    pointer-events: none;
    will-change: transform;
    animation: sunRaysRotate 80s linear infinite;
}
@keyframes sunRaysRotate {
    to { transform: rotate(360deg); }
}

/* === BUTTERFLY (CSS-only, two flapping wings) — Skills light */
.butterfly {
    position: absolute;
    width: 18px;
    height: 14px;
    pointer-events: none;
    will-change: transform;
    animation: butterflyMove 22s ease-in-out infinite;
}
.butterfly::before,
.butterfly::after {
    content: '';
    position: absolute;
    top: 0;
    width: 8px;
    height: 11px;
    border-radius: 70% 70% 40% 40% / 60% 60% 40% 40%;
    background: linear-gradient(135deg, #fb923c 0%, #fbbf24 100%);
    box-shadow: 0 0 4px rgba(251, 146, 60, 0.45);
    will-change: transform;
    animation: butterflyFlap 0.32s ease-in-out infinite alternate;
}
.butterfly::before {
    left: 0;
    transform-origin: bottom right;
}
.butterfly::after {
    right: 0;
    transform-origin: bottom left;
    background: linear-gradient(225deg, #fb923c 0%, #fbbf24 100%);
}
@keyframes butterflyFlap {
    0%   { transform: scaleX(1)   rotate(-15deg); }
    100% { transform: scaleX(0.4) rotate(20deg);  }
}
@keyframes butterflyMove {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 1; }
    20%  { transform: translate(25vw, -30px); }
    35%  { transform: translate(40vw, 20px); }
    55%  { transform: translate(60vw, -20px); }
    75%  { transform: translate(80vw, 15px); }
    95%  { opacity: 1; }
    100% { transform: translate(110vw, -10px); opacity: 0; }
}

/* PROJECTS — Saturn ring + distant galaxy + nebula + 3 constellations + asteroids + shooting star */
.scene-projects .saturn-ring-1 {
    width: 130px; height: 130px;
    top: 8%; left: 3%; right: auto;
    border-color: rgba(var(--main-color-rgb), 0.35);
    animation: ringOrbit 22s linear infinite;
}
.scene-projects .distant-galaxy {
    top: 62%; right: 4%; left: auto;
}
.scene-projects .nebula-1         { top: 22%; right: 4%; }
.scene-projects .constellation-1  { top: 16%; right: 4%; transform: scale(0.85); }
.scene-projects .constellation-2  { top: 78%; left: 4%;  transform: scale(0.75); }
.scene-projects .constellation-3  { top: 45%; left: 3%;  transform: scale(0.7);  }
.scene-projects .asteroid-1       { top: 38%; left: 6%;  animation-duration: 22s; }
.scene-projects .asteroid-2       { top: 70%; right: 6%; animation-duration: 26s; animation-delay: -8s; }
.scene-projects .shooting-star-1  { top: 28%; right: 35%; animation-delay: 1.8s; }
/* Light: balloons + rainbow + dandelions */
.scene-projects .rainbow-1        { top: -110px; right: -90px; }
.scene-projects .dandelion-1      { left: 8%;  animation-delay: 0s;  }
.scene-projects .dandelion-2      { left: 32%; animation-delay: 4s;  animation-duration: 16s; }
.scene-projects .dandelion-3      { left: 60%; animation-delay: 8s;  }
.scene-projects .dandelion-4      { left: 88%; animation-delay: 11s; animation-duration: 18s; }

/* CONTACT — crescent moon + 1 constellation + extras */
.scene-contact .moon-crescent {
    top: 16%; right: 10%;
}
.scene-contact .constellation-1 {
    top: 60%; left: 10%; transform: scale(0.85);
}
.scene-contact .shooting-star-1   { top: 8%;  left: 30%; animation-delay: 3s; animation-duration: 6s; }
.scene-contact .galaxy-cluster-1  { top: 8%;  left: 8%; width: 60px; height: 38px; }
.scene-contact .seagull-1         { top: 18%; left: -5%; animation-delay: 0s;  animation-duration: 16s; }
.scene-contact .seagull-2         { top: 28%; left: -5%; animation-delay: 6s;  animation-duration: 22s; transform: scale(0.85); }

/* EDUCATION dark extras */
.pendidikan .galaxy-decor .galaxy-cluster-1 {
    top: 8%; left: 6%; width: 65px; height: 40px;
}

/* ============================================================ */
/* ===== EDUCATION — moon at SUN's position (dark mirror) ==== */
/* ============================================================ */

/* Moon mirrors the sun's position (top:8%, right:8%) — appears in dark mode */
.pendidikan .galaxy-decor .moon-edu {
    top: 8%;
    right: 8%;
    width: 90px;
    height: 90px;
    /* Override base moon size to match sun size */
}
.pendidikan .galaxy-decor .moon-edu::before {
    /* Bigger craters for bigger moon */
    width: 11px;
    height: 11px;
    top: 28%;
    left: 22%;
    box-shadow:
        18px 12px 0 -2px rgba(0, 0, 0, 0.13),
        -5px 26px 0 -3px rgba(0, 0, 0, 0.12),
        28px -8px 0 -4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 600px) {
    .pendidikan .galaxy-decor .moon-edu {
        width: 60px;
        height: 60px;
        top: 5%;
        right: 5%;
    }
}

/* ============================================================ */
/* ===== HERO — scene-decor positions for extras ============== */
/* ============================================================ */

/* Hero dark: aurora + moon + planet + star-field + constellations + comet */
.scene-hero .moon          { top: 10%; right: 8%; }
.scene-hero .planet-1      { top: 38%; left: 5%; }
.scene-hero .constellation-1 {
    top: 22%;
    right: 22%;
    transform: scale(0.9);
}
.scene-hero .constellation-2 {
    top: 65%;
    left: 8%;
    transform: scale(0.75);
}
.scene-hero .constellation-3 {
    top: 78%;
    right: 14%;
    transform: scale(0.65);
}
.scene-hero .comet-1 {
    /* Override default to be subtler & slower for hero */
    top: 18%;
    left: -15%;
    right: auto;
    width: 80px;
    animation: cometFlyLR_b 16s ease-in 5s infinite;
}
.scene-hero .satellite-1 {
    top: 12%; left: -3%;
    animation-delay: 4s;
}

/* Hero light: sun + 3 birds + 3 clouds + 2 butterflies + mountains + trees */
.scene-hero .sun {
    top: 8%; right: 8%;
}
.scene-hero .bird-1 {
    top: 30%;
    left: -5%;
    animation: birdFly1 28s linear 3s infinite;
}
.scene-hero .bird-2 {
    top: 18%;
    left: -5%;
    animation: birdFly2 32s linear 8s infinite;
}
.scene-hero .bird-3 {
    top: 55%;
    left: -5%;
    animation: birdFly3 36s linear 14s infinite;
}
.scene-hero .butterfly-1 {
    top: 60%; left: 15%;
}
.scene-hero .butterfly-2 {
    top: 40%; right: 18%;
    animation-delay: 2s;
}
.scene-hero .cloud-1 {
    top: 14%;
    left: -10%;
    width: 80px;
    animation: cloudFloat 48s linear infinite;
}
.scene-hero .cloud-2 {
    top: 45%;
    left: -10%;
    width: 60px;
    opacity: 0.75;
    animation: cloudFloat 65s linear 12s infinite;
}
.scene-hero .cloud-3 {
    top: 28%;
    left: -10%;
    width: 70px;
    opacity: 0.65;
    animation: cloudFloat 55s linear 24s infinite;
}

/* Mobile: simplify hero scene */
@media (max-width: 768px) {
    .scene-hero .constellation-2 { display: none; }
    .scene-hero .constellation-3 { display: none; }
    .scene-hero .cloud-2         { display: none; }
    .scene-hero .bird-3          { display: none; }
    .scene-hero .butterfly-2     { display: none; }
    .scene-hero .planet-1        { width: 30px; height: 30px; }
    .scene-hero .moon            { width: 50px; height: 50px; }
    .mountain-back               { height: 110px; opacity: 0.4; }
    .aurora                      { height: 50px; opacity: 0.55; }
}
@media (max-width: 600px) {
    .scene-hero .constellation-1 { display: none; }
    .scene-hero .comet-1         { display: none; }
    .scene-hero .planet-1        { display: none; }
    .scene-hero .butterfly-1     { display: none; }
    .scene-hero .cloud-3         { display: none; }
    .scene-hero .bird-2          { display: none; }
    .star-field                  { opacity: 0.4; }
    .mountain-back               { height: 80px; }
    .mountain-back::before       { display: none; }
    .aurora                      { display: none; }
}

/* Add isolation to hero so scene-decor stacking works */
.phome {
    position: relative;
    isolation: isolate;
}

/* ============================================================ */
/* ===== Pause off-screen for new elements ==================== */
/* ============================================================ */

.paused-mq .constellation,
.paused-mq .moon,
.paused-mq .galaxy-spiral,
.paused-mq .distant-galaxy,
.paused-mq .moon-crescent,
.paused-mq .black-hole,
.paused-mq .black-hole::before,
.paused-mq .sun-rays,
.paused-mq .butterfly,
.paused-mq .butterfly::before,
.paused-mq .butterfly::after,
.paused-mq .pulsar,
.paused-mq .pulsar::before,
.paused-mq .pulsar::after,
.paused-mq .meteor,
.paused-mq .petal,
.paused-mq .sparkle,
.paused-mq .nebula,
.paused-mq .asteroid,
.paused-mq .shooting-star,
.paused-mq .rainbow,
.paused-mq .dandelion,
.paused-mq .waterfall,
.paused-mq .waterfall::before,
.paused-mq .waterfall-mist,
.paused-mq .lighthouse::after,
.paused-mq .aurora,
.paused-mq .aurora::before,
.paused-mq .planet,
.paused-mq .star-field,
.paused-mq .windmill::after,
.paused-mq .firefly,
.paused-mq .beach-wave::before,
.paused-mq .beach-wave::after,
.paused-mq .galaxy-cluster,
.paused-mq .bee,
.paused-mq .bee::after,
.paused-mq .boat,
.paused-mq .seagull,
.paused-mq .pencil,
.paused-mq .satellite,
.paused-mq .wind,
.paused-mq .plane,
.paused-mq .balloon,
.paused-mq .paper-plane,
.paused-mq .kite,
.paused-mq .kite::after {
    animation-play-state: paused;
}

/* ===== Reduced motion: freeze all new elements ===== */
@media (prefers-reduced-motion: reduce) {
    .constellation,
    .moon,
    .galaxy-spiral,
    .distant-galaxy,
    .moon-crescent,
    .black-hole,
    .black-hole::before,
    .sun-rays,
    .butterfly,
    .butterfly::before,
    .butterfly::after,
    .pulsar,
    .pulsar::before,
    .pulsar::after,
    .meteor,
    .petal,
    .sparkle,
    .nebula,
    .asteroid,
    .shooting-star,
    .rainbow,
    .dandelion,
    .waterfall,
    .waterfall::before,
    .waterfall-mist,
    .lighthouse::after,
    .aurora,
    .aurora::before,
    .planet,
    .star-field,
    .windmill::after,
    .firefly,
    .beach-wave::before,
    .beach-wave::after,
    .galaxy-cluster,
    .bee,
    .bee::after,
    .boat,
    .seagull,
    .pencil,
    .satellite,
    .wind,
    .plane,
    .balloon,
    .paper-plane,
    .kite,
    .kite::after {
        animation: none;
    }
    .wind, .plane, .paper-plane, .balloon, .butterfly, .meteor, .petal, .dandelion, .shooting-star, .bee, .seagull { opacity: 0.5; }
    .sparkle, .pulsar, .nebula, .rainbow, .waterfall, .lighthouse::after, .aurora, .star-field, .firefly, .galaxy-cluster, .satellite { opacity: 0.6; }
    .boat, .pencil { opacity: 0.7; }
}

/* ===== Mobile: hide some elements to save GPU ===== */
@media (max-width: 768px) {
    .scene-services .constellation-2 { display: none; }
    .scene-services .meteor-3        { display: none; }
    .scene-services .petal-4         { display: none; }
    .scene-services .sparkle-3       { display: none; }
    .scene-skills .constellation-3   { display: none; }
    .scene-skills .butterfly-2       { display: none; }
    .scene-projects .constellation-3 { display: none; }
    .scene-projects .asteroid-2      { display: none; }
    .scene-projects .dandelion-4     { display: none; }
    .plane.plane-2                   { display: none; }
    .balloon-2                       { display: none; }
    .wind-3                          { display: none; }
    .kite                            { display: none; }
    .sun-rays                        { width: 160px; height: 160px; top: -30px; right: -30px; }
    .nebula                          { width: 110px; height: 70px; }
    .rainbow                         { box-shadow:
                                          0 0 0 22px rgba(239, 68, 68, 0.32),
                                          0 0 0 28px rgba(251, 146, 60, 0.32),
                                          0 0 0 34px rgba(252, 211, 77, 0.32),
                                          0 0 0 40px rgba(74, 222, 128, 0.32),
                                          0 0 0 46px rgba(96, 165, 250, 0.30); }
    .pulsar::before, .pulsar::after  { width: 36px; }
    /* Shrink scenic landscapes on tablets */
    .tree-line                       { height: 60px; }
    .hills-line                      { height: 70px; }
    .rolling-hill                    { height: 55px; }
    .flower-field                    { height: 32px; }
    .waterfall                       { width: 50px; right: 2%; }
    .lighthouse                      { width: 24px; height: 85px; }
    /* New elements scaled down */
    .scene-services .bee-2           { display: none; }
    .scene-skills  .firefly-3        { display: none; }
    .scene-skills  .galaxy-cluster-1 { display: none; }
    .scene-contact .galaxy-cluster-1 { display: none; }
    .scene-contact .seagull-2        { display: none; }
    .scene-skills .satellite-1       { display: none; }
    .bamboo-grove                    { width: 110px; height: 160px; }
    .windmill                        { width: 64px; height: 135px; right: 3%; bottom: 6px; }
    .windmill::before                { width: 12px; height: 100px; }
    .windmill::after                 { width: 56px; height: 56px; }
    .book-stack                      { width: 56px; height: 50px; right: 5%; }
    .beach-wave                      { height: 40px; }
    .grass-tuft                      { height: 16px; opacity: 0.5; }
    .pencil                          { width: 50px; right: 18%; bottom: 40px; }
    .boat                            { width: 42px; height: 32px; left: 14%; }
    .boat::before                    { width: 42px; height: 12px; }
    .boat::after                     { width: 26px; height: 22px; }
}

@media (max-width: 600px) {
    .scene-services .constellation-1 { display: none; }
    .scene-services .meteor-2        { display: none; }
    .scene-services .petal-3         { display: none; }
    .scene-services .sparkle-2       { display: none; }
    .scene-skills .constellation-2   { display: none; }
    .scene-skills .butterfly-1       { display: none; }
    .scene-projects .constellation-2 { display: none; }
    .scene-projects .nebula-1        { display: none; }
    .scene-projects .dandelion-3     { display: none; }
    .scene-projects .shooting-star-1 { display: none; }
    .scene-projects .distant-galaxy  { width: 80px; height: 80px; }
    .galaxy-spiral                   { width: 60px; height: 60px; }
    .black-hole                      { width: 60px; height: 60px; }
    .moon                            { width: 45px; height: 45px; }
    .moon-crescent                   { width: 40px; height: 40px; }
    .moon-crescent::after            { width: 40px; height: 40px; left: 10px; }
    .wind-2                          { display: none; }
    .sun-rays                        { width: 120px; height: 120px; }
    /* Hide animated scenic on phones; keep static silhouettes shorter */
    .waterfall                       { display: none; }
    .lighthouse                      { display: none; }
    .tree-line                       { height: 45px; opacity: 0.4; }
    .tree-line::before               { display: none; }
    .hills-line                      { height: 55px; opacity: 0.35; }
    .hills-line::before              { display: none; }
    .rolling-hill                    { height: 45px; opacity: 0.35; }
    .flower-field                    { height: 25px; }
    .flower-field::before            { display: none; }
    /* Hide complex animated elements on phones */
    .windmill                        { display: none; }
    .scene-services .bee-1           { display: none; }
    .scene-skills .firefly-2         { display: none; }
    .scene-skills .shooting-star-1   { display: none; }
    .scene-contact .shooting-star-1  { display: none; }
    .beach-wave                      { height: 30px; opacity: 0.4; }
    .beach-wave::before              { display: none; }
    .bamboo-grove                    { width: 80px; height: 110px; opacity: 0.55; }
    .bamboo-grove::after             { display: none; }
    .book-stack                      { width: 48px; height: 42px; opacity: 0.55; }
    /* Hide complex polish elements on phones */
    .scene-contact .seagull-1        { display: none; }
    .scene-hero .satellite-1         { display: none; }
    .grass-tuft                      { display: none; }
    .pencil                          { display: none; }
    .boat                            { width: 32px; height: 24px; left: 10%; opacity: 0.7; }
}

/* ============================================================ */
/* ===== Each section needs isolation + position for scene === */
/* ============================================================ */

.pservices, .pskill, .pengalaman, .contact {
    position: relative;
    isolation: isolate;
}

/* ============================================================ */
/* ===== LIGHT THEME: per-section unique morning gradients === */
/* ============================================================ */

/* Services — golden sunrise (use ID to beat existing #pservices specificity) */
[data-theme="light"] #pservices {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 60%, #fcd34d 100%);
}

/* Skills — cool early morning blue-cyan (use ID for specificity) */
[data-theme="light"] #pskill {
    background: linear-gradient(180deg, #dbeafe 0%, #e0f2fe 50%, #ecfdf5 100%);
}

/* Projects — golden hour amber */
[data-theme="light"] .pengalaman {
    background: linear-gradient(135deg, #fed7aa 0%, #fdba74 50%, #f59e0b 100%);
}

/* Contact — soft lavender dawn */
[data-theme="light"] .contact {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 50%, #fce7f3 100%);
}

/* In light mode, hide all galaxy-decor across sections, show morning-decor */
[data-theme="light"] .galaxy-decor { display: none; }
[data-theme="light"] .morning-decor { display: block; }


/* =========================================================
   CONTACT FORM — Dual delivery (Email + WhatsApp) + validation
   ========================================================= */

/* Action buttons row: Email + WA side-by-side, wraps on mobile */
.form-actions {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}
.form-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    min-width: 20rem;
    padding: 1.2rem 2.4rem;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.form-actions .btn i {
    font-size: 1.7rem;
}

/* WhatsApp button: brand-green styling (overrides default .btn) */
.btn-wa {
    background: #25d366;
    color: #ffffff;
    border: none;
    border-radius: 4rem;
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}
.btn-wa::before,
.btn-wa::after { display: none !important; }   /* kill paper-plane effect from #submit-bae sibling rules */
.btn-wa:hover {
    background: #1ea952;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, 0.5);
}
.btn-wa:active {
    transform: translateY(-1px) scale(0.97);
}

/* Mobile: stack buttons full-width */
@media (max-width: 600px) {
    .form-actions { flex-direction: column; gap: 0.9rem; }
    .form-actions .btn { width: 100%; min-width: 0; }
}

/* Button: disabled / sending state */
.form-actions .btn:disabled,
.form-actions .btn.is-sending {
    opacity: 0.65;
    cursor: progress;
    pointer-events: none;
}
.form-actions .btn.is-sending i {
    animation: btnSpin 0.8s linear infinite;
}
@keyframes btnSpin {
    to { transform: rotate(360deg); }
}

/* ===== Field validation states ===== */
.field input.invalid,
.field textarea.invalid {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
    animation: fieldShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.field input.valid,
.field textarea.valid {
    border-color: #22c55e !important;
}
@keyframes fieldShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

/* ===== Inline error hint below each field ===== */
.field-hint {
    display: block;
    font-size: 1.15rem;
    color: #ef4444;
    margin-top: 0.4rem;
    padding-left: 0.4rem;
    min-height: 1.5rem;
    font-weight: 500;
    line-height: 1.3;
    transition: opacity 0.25s ease;
}
.field-hint:empty {
    min-height: 0;
    margin: 0;
}

/* Light theme tweak: slightly desaturated red for parchment bg */
[data-theme="light"] .field-hint { color: #c2410c; }
[data-theme="light"] .field input.invalid,
[data-theme="light"] .field textarea.invalid {
    border-color: #c2410c !important;
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15) !important;
}
[data-theme="light"] .field input.valid,
[data-theme="light"] .field textarea.valid {
    border-color: #15803d !important;
}