/* 
    Portfolio Stylesheet — Industrial Monochrome
    Author: Adel Yassin Gumama
    Version: 3.0 (UI Redesign)
*/

/* ================================================================
   GALAXY STARFIELD CANVAS — Fixed behind all content
   ================================================================ */
#galaxy-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    display: block;
    will-change: transform;
    opacity: 1;
}

/* Hide the old div-based global star overlay — canvas handles everything */
.global-stars-container {
    display: none !important;
}

/* Cursor ripple burst effect */
.star-ripple {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transform: scale(0);
    animation: starRippleExpand 0.8s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

@keyframes starRippleExpand {
    0% {
        transform: scale(0);
        opacity: 0.7;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}

:root {
    --bg: #121212;
    --bg-elevated: #1a1a1a;
    --bg-card: rgba(255, 255, 255, 0.03);
    --fg: #e8e8e8;
    --fg-muted: #8a8a8a;
    --fg-dim: #5c5c5c;
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.22);
    --primary: #c4c4c4;
    --accent: #a3a3a3;
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.1);
    --tracking-wide: 0.35em;
    --font-display: 'Syne', 'Inter', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --card-radius: 14px;
    --card-radius-sm: 10px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: #0a0a0f;
    /* Smooth theme color transitions */
    transition:
        background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    background: transparent;
    color: var(--fg);
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    /* ensure vertical scroll is always on */
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    font-family: var(--font-body);
    font-weight: 300;
    transition:
        background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

html,
body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-x: hidden;
    max-width: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

.font-display {
    font-family: var(--font-display);
}

/* Show content if AOS fails to load (broken script, network, etc.) */
html:not(.aos-init) [data-aos],
html.aos-fallback [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

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

/* --- Legacy utility aliases (Tailwind classes in HTML) --- */
.text-primary-400 {
    color: var(--primary) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.bg-primary-500\/10,
.bg-primary-400\/10 {
    background-color: var(--glass-bg) !important;
}

.bg-accent\/10 {
    background-color: var(--glass-bg) !important;
}

.border-accent\/20,
.border-accent\/10,
.border-accent\/30 {
    border-color: var(--border) !important;
}

.border-primary-500\/10,
.border-primary-500\/20,
.border-primary-400\/20 {
    border-color: var(--border) !important;
}

.text-slate-400 {
    color: var(--fg-muted) !important;
}

.text-slate-500 {
    color: var(--fg-dim) !important;
}

.text-slate-300 {
    color: #b0b0b0 !important;
}

.text-slate-600 {
    color: var(--fg-dim) !important;
}

.text-white {
    color: #ffffff !important;
}

.bg-slate-900\/10,
.bg-slate-900\/20 {
    background: transparent !important;
}

.bg-slate-950\/40,
.bg-slate-950\/90 {
    background: rgba(18, 18, 18, 0.85) !important;
}

.bg-slate-900\/60 {
    background: var(--bg-elevated) !important;
}

/* --- Section numbers (background) --- */
section[id] {
    position: relative;
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

section[id]::before {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    letter-spacing: -0.04em;
}

#hero::before {
    content: '01';
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(12rem, 28vw, 22rem);
    opacity: 0.9;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}

#hero::after {
    content: '01';
    position: absolute;
    left: -6%;
    top: 28%;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(6rem, 14vw, 11rem);
    transform: scaleX(-1) rotate(-6deg);
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.03);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

#about::before {
    content: '02';
    left: -4%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translateY(-50%);
    font-size: clamp(6rem, 14vw, 10rem);
    opacity: 0.28;
}

#skills::before {
    content: '03';
    left: -2%;
    top: 5%;
    font-size: clamp(7rem, 16vw, 12rem);
    opacity: 0.6;
    transform: scaleX(-1);
}

#videography::before {
    content: '04';
    right: 3%;
    top: 10%;
    font-size: clamp(7rem, 16vw, 12rem);
    opacity: 0.45;
}

#figma::before {
    content: '05';
    left: -2%;
    bottom: 8%;
    font-size: clamp(7rem, 16vw, 12rem);
    opacity: 0.45;
    transform: scaleX(-1);
}

#systems::before {
    content: '06';
    left: 2%;
    bottom: 5%;
    font-size: clamp(7rem, 16vw, 12rem);
    opacity: 0.5;
}

#certificates::before {
    content: '07';
    right: 5%;
    top: 8%;
    font-size: clamp(7rem, 16vw, 12rem);
}

#services::before {
    content: '08';
    left: -1%;
    top: 12%;
    font-size: clamp(7rem, 16vw, 12rem);
    opacity: 0.55;
}

#connect::before {
    content: '09';
    right: 0;
    top: 15%;
    font-size: clamp(8rem, 18vw, 13rem);
}

#contact::before {
    content: '10';
    left: 50%;
    bottom: 5%;
    transform: translateX(-50%);
    font-size: clamp(6rem, 14vw, 10rem);
    opacity: 0.3;
}

/* --- Components --- */
.glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--card-radius);
    transition:
        border-color 0.4s ease,
        transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
        box-shadow 0.45s ease,
        background 0.4s ease;
    position: relative;
    overflow: hidden;
    transform-origin: center center;
    will-change: transform, box-shadow;
}

.glass-card .rounded-xl {
    border-radius: var(--card-radius-sm) !important;
}

.glass-card .rounded-2xl,
.glass-card .rounded-lg {
    border-radius: var(--card-radius-sm) !important;
}

.glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.35);
    transform: scale(1.015) translateY(-2px);
    background: rgba(255, 255, 255, 0.06);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25),
        0 8px 28px rgba(0, 0, 0, 0.3),
        0 4px 14px rgba(0, 0, 0, 0.2);
}

.glass-card:hover::after {
    background: linear-gradient(125deg,
            rgba(255, 255, 255, 0.14) 0%,
            transparent 42%,
            rgba(255, 255, 255, 0.06) 100%);
}

.glass-overlay {
    background: transparent;
}

/* --- Section layout --- */
.section-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 7rem clamp(1.5rem, 5vw, 4rem);
    position: relative;
    z-index: auto;
    background: transparent;
}

.section-container>* {
    position: relative;
    z-index: 1;
}

.section-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 300;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 1.25rem;
}

.section-tag::before {
    content: '{ ';
}

.section-tag::after {
    content: ' }';
}

.chevron-line {
    letter-spacing: 0.15em;
    color: var(--fg-dim);
    font-size: 0.7rem;
}

.gradient-text {
    background: linear-gradient(90deg, #ffffff 0%, #6b6b6b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Hero --- */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 6rem 0 8rem;
}

.hero-inner {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding-left: clamp(1.5rem, 5vw, 4rem);
    padding-right: clamp(1.5rem, 5vw, 4rem);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: clamp(3rem, 6vw, 5rem);
    }
}

.hero-col-left {
    text-align: center;
}

.hero-col-right {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-col-left {
        text-align: left;
        padding-right: clamp(1.5rem, 3vw, 2.5rem);
    }

    .hero-col-right {
        text-align: left;
        align-items: flex-start;
        padding-left: clamp(1.5rem, 3vw, 2.5rem);
        border-left: 1px solid var(--border);
    }
}

.hero-eyebrow {
    font-size: 0.65rem;
    font-weight: 300;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    margin-bottom: 2rem;
    text-align: right;
    display: none;
}

@media (min-width: 1024px) {
    .hero-eyebrow {
        display: block;
        position: absolute;
        top: 3rem;
        right: 4rem;
        z-index: 25;
    }
}

.hero-badge {
    display: inline-block;
    padding: 0.35rem 0;
    margin-bottom: 2rem;
    font-size: 0.65rem;
    font-weight: 300;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--fg-muted);
    border: none;
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.hero-title .hero-intro {
    display: block;
    font-size: clamp(2rem, 2vw, 3.25rem);
    line-height: 1.2;
    color: var(--fg);
    -webkit-text-fill-color: var(--fg);
}

.hero-title .name-highlight {
    display: block;
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    line-height: 1.15;
    background: linear-gradient(110deg, #7a7a7a 20%, #ffffff 50%, #7a7a7a 80%);
    background-size: 200% auto;
    background-position: 200% center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-bottom: 0.05em;
    will-change: background-position;
}

.hero-title .name-line+.name-line {
    margin-top: 0.05em;
}

.hero-desc-group {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
    max-width: 26rem;
}

.hero-desc {
    font-size: 1rem;
    font-weight: 300;
    color: var(--fg-muted);
    line-height: 1.75;
    margin: 0;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

/* --- Bracket hover links --- */
.bracket-link {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fg-muted);
    text-decoration: none;
    padding: 0.35rem 0;
    transition: color 0.35s ease;
}

.bracket-link .bracket-link-text {
    transition: letter-spacing 0.4s ease, color 0.35s ease;
}

.bracket-link .bracket {
    display: inline-block;
    font-weight: 300;
    color: var(--fg);
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.bracket-link .bracket-l {
    transform: translateX(10px);
    margin-right: 0;
}

.bracket-link .bracket-r {
    transform: translateX(-10px);
    margin-left: 0;
}

.bracket-link:hover {
    color: var(--fg);
}

.bracket-link:hover .bracket {
    opacity: 1;
    transform: translateX(0);
}

.bracket-link:hover .bracket-l {
    margin-right: 0.45em;
}

.bracket-link:hover .bracket-r {
    margin-left: 0.45em;
}

.bracket-link:hover .bracket-link-text {
    letter-spacing: 0.32em;
    color: var(--fg);
}

.social-bracket-links {
    justify-content: flex-start;
}

@media (max-width: 1023px) {
    .social-bracket-links {
        justify-content: center;
    }
}

.hero-bg-image {
    opacity: 0 !important;
    filter: grayscale(100%) contrast(1.1);
}

/* --- Section headers --- */
.section-heading {
    margin-bottom: 3.5rem;
}

.section-heading h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.35;
}

.section-heading p {
    margin-top: 0.75rem;
    font-weight: 300;
    color: var(--fg-muted);
    font-size: 0.95rem;
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin-bottom: 3.5rem;
    padding-bottom: 0;
}

/* --- About (split layout) --- */
.about-layout {
    position: relative;
    z-index: 2;
}

.about-section-tag {
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .about-section-tag {
        margin-bottom: 3rem;
    }
}

.about-split {
    align-items: center;
}

.about-content {
    position: relative;
    z-index: 2;
}

.about-heading {
    line-height: 1.3;
}

.about-stats {
    max-width: 28rem;
    margin-inline: auto;
}

@media (min-width: 768px) {
    .about-stats {
        max-width: none;
        margin-inline: 0;
    }
}

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

    .profile-card-container,
    .void-orb,
    .holo-gem {
        animation: none;
        opacity: 0.2;
    }
}

/* --- Showcase sections (Videography / Figma) --- */
.showcase-section {
    position: relative;
}

.showcase-icon-wrap {
    border-radius: var(--card-radius);
    border: 1px solid var(--border);
}

.showcase-card {
    text-align: center;
}


/* --- Contact split layout (form left / description right) --- */
.contact-form-section {
    padding-bottom: 5rem;
    overflow: visible;
    height: auto;
    max-height: none;
}

.contact-split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: start;
    overflow: visible;
    height: auto;
    max-height: none;
}

@media (min-width: 1024px) {
    .contact-split-layout {
        grid-template-columns: 1fr 1fr;
        gap: clamp(3rem, 6vw, 5rem);
        align-items: start;
    }
}

.contact-form-col {
    width: 100%;
}

.contact-desc-col {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 0;
}

@media (min-width: 1024px) {
    .contact-desc-col {
        padding-left: clamp(1.5rem, 3vw, 2.5rem);
        border-left: 1px solid var(--border);
    }
}

.contact-desc-heading {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 2rem;
}

.contact-desc-body {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
    margin-bottom: 2.5rem;
}

.contact-desc-body p {
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--fg-muted);
    line-height: 1.85;
    margin: 0;
}

/* Trust stats row */
.contact-trust-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    border-top: 1px solid var(--border);
    padding-top: 1.75rem;
    margin-top: 0.5rem;
}

.trust-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: center;
    text-align: center;
    padding: 0;
    margin: 0;
    border-right: none;
}

@media (min-width: 640px) {
    .contact-trust-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
    }

    .trust-item {
        align-items: flex-start;
        text-align: left;
        padding-right: clamp(1.5rem, 3vw, 2.5rem);
        margin-right: clamp(1.5rem, 3vw, 2.5rem);
        border-right: 1px solid var(--border);
    }

    .trust-item:last-child {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }
}

.trust-num {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 700;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1;
}

.trust-label {
    font-size: clamp(0.7rem, 1.5vw, 0.75rem);
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-muted);
}



.contact-form {
    padding: 2rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* Border-line sweep animation for contact form */
.contact-form.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    z-index: 10;
    pointer-events: none;
    transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-form.glass-card:hover::before {
    left: 100%;
}

.contact-form.glass-card:hover {
    transform: none;
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

:root[data-theme="light"] .contact-form.glass-card::before {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
}

:root[data-theme="light"] .contact-form.glass-card:hover {
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.contact-form .hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-field label {
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.form-field input,
.form-field textarea {
    width: 100%;
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    border-radius: var(--card-radius-sm);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 300;
    line-height: 1.6;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: var(--fg-dim);
}

.form-field input:focus,
.form-field textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.06);
}

.form-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    align-self: flex-start;
    margin-top: 0.5rem;
    padding: 0.9rem 1.75rem;
    background: var(--fg);
    color: var(--bg);
    border: 1px solid var(--fg);
    border-radius: var(--card-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.form-submit .bracket {
    opacity: 1;
    transform: none;
    color: inherit;
    font-weight: 300;
}

.form-submit:hover {
    background: transparent;
    color: var(--fg);
    transform: scale(1.02);
}

.form-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.form-status {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    color: var(--fg-muted);
    min-height: 1.25rem;
    margin: 0;
}

.form-status.success {
    color: #a3a3a3;
}

.form-status.error {
    color: #c4c4c4;
}

/* Profile float + void glow */
.profile-float-void {
    position: relative;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .profile-float-void {
        margin: 0;
        max-width: 22rem;
    }
}

.void-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(52px);
    z-index: 0;
}

.void-orb-1 {
    width: 75%;
    height: 55%;
    top: 8%;
    left: 0;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.09) 0%, transparent 72%);
    animation: void-drift 9s ease-in-out infinite;
}

.void-orb-2 {
    width: 55%;
    height: 45%;
    bottom: 6%;
    right: -4%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
    animation: void-drift 9s ease-in-out infinite reverse;
    animation-delay: -4.5s;
}

/* Hologram diamond field (behind profile) */
.holo-field {
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.holo-gem {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.12) 0%,
            rgba(255, 255, 255, 0.02) 45%,
            transparent 100%);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.06);
    opacity: 0;
    animation: holo-gem-fade 5s ease-in-out infinite;
}

.holo-gem:nth-child(1) {
    top: 8%;
    left: 12%;
    animation-delay: 0s;
}

.holo-gem:nth-child(2) {
    top: 18%;
    left: 68%;
    animation-delay: 0.4s;
    width: 16px;
    height: 16px;
}

.holo-gem:nth-child(3) {
    top: 32%;
    left: 5%;
    animation-delay: 0.9s;
    width: 28px;
    height: 28px;
}

.holo-gem:nth-child(4) {
    top: 28%;
    left: 82%;
    animation-delay: 1.3s;
}

.holo-gem:nth-child(5) {
    top: 48%;
    left: 22%;
    animation-delay: 1.8s;
    width: 14px;
    height: 14px;
}

.holo-gem:nth-child(6) {
    top: 44%;
    left: 58%;
    animation-delay: 2.2s;
    width: 26px;
    height: 26px;
}

.holo-gem:nth-child(7) {
    top: 62%;
    left: 8%;
    animation-delay: 2.6s;
}

.holo-gem:nth-child(8) {
    top: 58%;
    left: 78%;
    animation-delay: 3s;
    width: 18px;
    height: 18px;
}

.holo-gem:nth-child(9) {
    top: 72%;
    left: 38%;
    animation-delay: 3.4s;
    width: 12px;
    height: 12px;
}

.holo-gem:nth-child(10) {
    top: 78%;
    left: 62%;
    animation-delay: 3.8s;
}

.holo-gem:nth-child(11) {
    top: 12%;
    left: 42%;
    animation-delay: 4.2s;
    width: 20px;
    height: 20px;
}

.holo-gem:nth-child(12) {
    top: 52%;
    left: 92%;
    animation-delay: 4.6s;
    width: 15px;
    height: 15px;
}

.holo-gem:nth-child(13) {
    top: 85%;
    left: 18%;
    animation-delay: 0.6s;
    width: 17px;
    height: 17px;
}

.holo-gem:nth-child(14) {
    top: 6%;
    left: 88%;
    animation-delay: 1.1s;
    width: 24px;
    height: 24px;
}

.holo-gem:nth-child(15) {
    top: 38%;
    left: 35%;
    animation-delay: 2.5s;
    width: 10px;
    height: 10px;
    opacity: 0;
}

.holo-gem:nth-child(16) {
    top: 68%;
    left: 48%;
    animation-delay: 3.3s;
    width: 30px;
    height: 30px;
}

@keyframes holo-gem-fade {

    0%,
    100% {
        opacity: 0;
        transform: rotate(45deg) scale(0.5);
        filter: blur(2px);
    }

    35%,
    65% {
        opacity: 0.75;
        transform: rotate(45deg) scale(1);
        filter: blur(0);
        box-shadow: 0 0 24px rgba(255, 255, 255, 0.15);
    }
}

.holo-gem:nth-child(odd) {
    animation-direction: alternate;
}

.holo-gem:nth-child(even) {
    animation-duration: 6.5s;
}

@keyframes void-drift {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.55;
    }

    50% {
        transform: translate(12px, -18px) scale(1.1);
        opacity: 0.95;
    }
}

.profile-card-container {
    position: relative;
    z-index: 1;
    animation: float-subtle 7s ease-in-out infinite;
}

.profile-card-container:hover {
    animation-play-state: paused;
}

@keyframes float-subtle {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-14px) rotate(0.4deg);
    }
}

.profile-img {
    border-radius: calc(var(--card-radius) - 4px);
}

.resume-btn {
    background: var(--fg);
    color: var(--bg);
    border: 1px solid var(--fg);
    border-radius: var(--card-radius-sm);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.resume-btn:hover {
    background: transparent;
    color: var(--fg);
}

/* --- System cards (image polish) --- */
.system-card-media {
    padding: 0;
    overflow: hidden;
    border-radius: var(--card-radius) 0 0 var(--card-radius);
}

/* On mobile, top image spans full width so radius only on top corners */
@media (max-width: 1023px) {
    .system-card-media {
        border-radius: var(--card-radius) var(--card-radius) 0 0;
    }
}

.system-card-img {
    border-radius: 0;
    display: block;
}

.system-card .absolute.bottom-4 {
    bottom: 1.25rem;
    left: 1.25rem;
}

/* Connect section alignment */
#connect .section-tag {
    display: block;
    margin-bottom: 1rem;
}

#connect .space-y-6 {
    border-left: 1px solid var(--border);
    padding-left: 1.5rem;
    margin-bottom: 2.5rem;
}

/* Make Connect section non-scrollable */
#connect {
    overflow: hidden;
}

/* --- Stat cards --- */
.stat-card h3 {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 800;
    color: var(--fg) !important;
}

.stat-card p {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* --- Skill icon box --- */
.skill-icon-box {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: var(--card-radius-sm);
    flex-shrink: 0;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.skill-icon-box:hover {
    border-color: rgba(255, 255, 255, 0.35) !important;
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.skill-icon-box i {
    color: var(--fg-muted) !important;
    transition: color 0.3s ease;
}

.skill-icon-box:hover i {
    color: var(--fg) !important;
}

/* --- Project / system cards --- */
.glass-card h3,
.glass-card h4 {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.glass-card .aspect-video,
.glass-card [class*="aspect-"] {
    background: var(--bg-elevated) !important;
    border-bottom: 1px solid var(--border);
}

.glass-card [class*="aspect-"] i {
    color: var(--fg-dim) !important;
}

.glass-card span[class*="text-["],
.glass-card span[class*="text-primary"],
.glass-card span[class*="text-accent"],
.glass-card span[class*="text-emerald"],
.glass-card span[class*="text-orange"],
.glass-card span[class*="text-sky"],
.glass-card span[class*="text-yellow"],
.glass-card span[class*="text-rose"],
.glass-card span[class*="text-blue"] {
    background: var(--glass-bg) !important;
    color: var(--fg-muted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius-sm) !important;
    backdrop-filter: none !important;
}

.card-link-btn {
    width: 100%;
    padding: 0.85rem;
    background: transparent !important;
    color: var(--fg) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius-sm) !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
}

.card-link-btn:hover {
    background: var(--fg) !important;
    color: var(--bg) !important;
    border-color: var(--fg) !important;
}

.card-link-btn.hover-green:hover,
.card-link-btn.hover-orange:hover {
    background: var(--fg) !important;
    color: var(--bg) !important;
    border-color: var(--fg) !important;
}

/* --- Dividers --- */
hr,
.border-white\/5 {
    border-color: var(--border) !important;
}

/* --- Navigation Dock --- */
.nav-dock {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 0.75rem;
    background: rgba(18, 18, 18, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    width: max-content;
    animation: slideUpCenter 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideUpCenter {
    from {
        transform: translateX(-50%) translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

.nav-dock:hover {
    border-color: var(--border-hover);
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 1rem;
    color: var(--fg-dim);
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-4px);
}

.nav-label {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--bg-elevated);
    color: var(--fg-muted);
    padding: 0.4rem 0.75rem;
    border-radius: var(--card-radius-sm);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--border);
}

.nav-label::before {
    content: '{ ';
}

.nav-label::after {
    content: ' }';
}

.nav-item:hover .nav-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.menu-toggle-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.25rem;
    height: 3.25rem;
    background: var(--fg);
    color: var(--bg);
    border-radius: 1rem;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    border: 1px solid var(--fg);
    cursor: pointer;
    transition: all 0.3s ease;
}

.menu-toggle-btn:hover {
    background: transparent;
    color: var(--fg);
}

/* --- Skill / hover effects --- */
.hover-glow:hover,
.hover-green:hover,
.hover-orange:hover {
    border-color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Profile card --- */
.profile-card-container .glass-card {
    border-radius: var(--card-radius);
}

.profile-card-container img {
    filter: grayscale(20%) contrast(1.05);
}

.profile-card-container button {
    border-radius: var(--card-radius-sm) !important;
    background: var(--fg) !important;
    color: var(--bg) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
}

.profile-card-container button:hover {
    background: transparent !important;
    color: var(--fg) !important;
    border: 1px solid var(--fg);
}

/* --- Contact / platform links --- */
.platform-link {
    border-radius: var(--card-radius) !important;
}

.platform-link:hover {
    border-color: var(--border-hover) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    transform: translateX(4px) !important;
}

.platform-link .icon-wrap {
    background: var(--glass-bg) !important;
    color: var(--fg-muted) !important;
    border-radius: var(--card-radius-sm) !important;
}

.platform-link:hover .icon-wrap {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--fg) !important;
}

/* --- Verified badge --- */
.verified-badge {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--card-radius) !important;
    color: var(--fg-muted) !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
}

/* --- GitHub link --- */
.github-link {
    color: var(--fg-muted) !important;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.github-link:hover {
    color: var(--fg) !important;
}

/* --- Footer --- */
footer {
    font-size: 0.65rem !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* --- Social --- */
.social-mask {
    background-color: var(--fg-dim);
    aspect-ratio: 1/1;
    width: 1.25rem;
    transition: all 0.3s ease;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
}

.group:hover .social-mask {
    background-color: var(--fg);
}

/* --- Certificate / service icon hovers --- */
.glass-card .group-hover\:bg-primary-500,
.glass-card .group-hover\:bg-accent {
    transition: background 0.4s ease, color 0.4s ease;
}

.glass-card.group:hover [class*="group-hover:bg-primary"],
.glass-card.group:hover [class*="group-hover:bg-accent"] {
    background: rgba(255, 255, 255, 0.15) !important;
}

.glass-card.group:hover [class*="group-hover:text-slate"] {
    color: var(--fg) !important;
}

.glass-card.group:hover h4 {
    color: var(--fg) !important;
}

.glass-card.group:hover h3 {
    color: var(--fg) !important;
}

.mask-facebook {
    -webkit-mask-image: url('https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/facebook.svg');
    mask-image: url('https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/facebook.svg');
}

.mask-instagram {
    -webkit-mask-image: url('https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/instagram.svg');
    mask-image: url('https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/instagram.svg');
}

.mask-github {
    -webkit-mask-image: url('https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/github.svg');
    mask-image: url('https://raw.githubusercontent.com/simple-icons/simple-icons/develop/icons/github.svg');
}

/* --- Feature gallery (Skills & Services — reference layout) --- */
.gallery-header {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

/* --- Services Vertical Layout --- */
.service-content-panel.expanded {
    opacity: 1 !important;
    max-height: 500px !important;
}

.service-content-panel {
    min-width: 0;
}

.service-label:has(+ .service-content-panel.expanded) i[data-lucide="chevron-down"] {
    transform: rotate(180deg);
}

/* --- Services Horizontal Layout --- */
.service-card-horizontal.expanded {
    max-width: 400px !important;
    flex: 1 1 400px;
}

.service-card-horizontal.expanded .service-content {
    opacity: 1 !important;
    max-width: 100% !important;
}

.service-card-horizontal.expanded h3 {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    transform: none !important;
}

.writing-mode-vertical {
    writing-mode: vertical-rl;
}

/* --- Services Grid --- */
.services-grid {
    align-items: start;
}

.service-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 120px;
}

.service-card.glass-card:hover {
    transform: translateY(-4px);
}

.service-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.service-card.is-expanded {
    border-color: rgba(255, 255, 255, 0.85) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.1),
        0 0 32px rgba(255, 255, 255, 0.08);
}

.service-card.is-expanded .service-card-content {
    opacity: 1;
    max-height: 500px;
}

.service-card.is-expanded .service-card-indicator {
    transform: rotate(45deg);
    background: rgba(255, 255, 255, 0.1);
    color: var(--fg);
}

@media (min-width: 768px) {
    .service-card.is-expanded {
        grid-column: span 2;
    }

    .service-card.is-expanded .service-card-inner {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
    }

    .service-card.is-expanded .service-card-header {
        flex: 0 0 auto;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        gap: 1.5rem;
    }

    .service-card.is-expanded .service-card-header>div {
        flex-direction: row-reverse;
    }

    .service-card.is-expanded .service-card-content {
        flex: 1 1 auto;
    }

    .service-card.is-expanded .service-card-content>div {
        border-top: none;
        border-right: 1px solid var(--border);
        padding-top: 0;
        padding-right: 2rem;
        margin-top: 0;
    }
}

/* Services decorative wave */
.services-section {
    padding-bottom: 0;
}

.services-wave {
    position: relative;
    width: 100%;
    margin-top: 3.5rem;
    height: clamp(60px, 10vw, 100px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
    filter: drop-shadow(0 -8px 24px rgba(255, 255, 255, 0.04));
}

.services-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.services-wave path {
    animation: wave-shimmer 8s ease-in-out infinite alternate;
}

@keyframes wave-shimmer {
    0% {
        opacity: 0.85;
    }

    100% {
        opacity: 1;
    }
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .nav-dock {
        bottom: 7rem;
        left: 1.5rem;
        /* keep in layout flow */
        transform: translateX(calc(-100% - 2rem));
        /* slide off-screen via transform */
        width: 3.5rem;
        height: auto;
        flex-direction: column;
        border-radius: 1.5rem;
        padding: 0.75rem 0;
        gap: 0.1rem;
        background: rgba(18, 18, 18, 0.95);
        border: 1px solid var(--border);
        animation: none;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.35s ease;
        opacity: 0;
    }

    .nav-dock.active {
        transform: translateX(0);
        opacity: 1;
    }

    .nav-item {
        width: 3rem;
        height: 3rem;
    }

    .nav-item:hover {
        transform: none;
    }

    .menu-toggle-btn {
        display: flex;
        left: 1.5rem;
        right: auto;
    }

    .nav-label {
        display: none;
    }

    section[id]::before {
        font-size: 6rem !important;
        opacity: 0.35 !important;
    }

    #skills::before,
    #videography::before,
    #certificates::before,
    #services::before,
    #connect::before {
        top: 1.5rem !important;
    }

    .section-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}


@media (max-width: 640px) {
    .section-container {
        padding: 5rem 1.25rem;
    }

    .nav-dock {
        bottom: 6rem;
        left: 1rem;
        transform: translateX(calc(-100% - 1.5rem));
    }

    .nav-dock.active {
        transform: translateX(0);
    }

    .menu-toggle-btn {
        left: 1rem;
        bottom: 1.5rem;
    }
}

/* --- 3D Object Floating Animations --- */
@keyframes float-camera {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    50% {
        transform: translateY(-15px) rotate(2deg) scale(1.02);
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes float-pen {
    0% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    50% {
        transform: translateY(-12px) rotate(-3deg) scale(1.01);
    }

    100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
}

.animate-float-camera {
    animation: float-camera 6s ease-in-out infinite;
}

.animate-float-pen {
    animation: float-pen 7s ease-in-out infinite;
}

/* --- Resume Side Panel --- */
#resume-panel.active {
    left: 0;
}

#resume-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* --- Premium Staggered Reveal Animation --- */
@keyframes luxury-reveal {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
        filter: blur(8px);
        transform: translate3d(-16px, 0, 0) skewX(-4deg);
    }

    100% {
        clip-path: inset(0 -10% 0 0);
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) skewX(0deg);
    }
}

@keyframes luxury-shimmer {
    0% {
        background-position: 200% center;
    }

    100% {
        background-position: -200% center;
    }
}

.typing-line {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    will-change: transform, opacity, filter, clip-path;
}

.animate-typing-1 {
    animation: luxury-reveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-typing-2 {
    animation:
        luxury-reveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s,
        luxury-shimmer 3s linear infinite 2s;
}

.animate-typing-3 {
    animation:
        luxury-reveal 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.8s,
        luxury-shimmer 3s linear infinite 2.4s;
}

/* ============================================
   Section Reveal Animations
   ============================================ */

.section-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 20%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0.05) 80%, transparent 100%);
    z-index: 20;
    pointer-events: none;
    opacity: 0;
}

.section-container.section-revealed::after {
    animation: section-sweep-line 1.1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes section-sweep-line {
    0% {
        left: -100%;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    92% {
        opacity: 1;
    }

    100% {
        left: 105%;
        opacity: 0;
    }
}

.section-container.section-anim {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.section-container.section-anim.section-revealed {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Staggered entrance for immediate children of the section */
.section-container.section-anim>* {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition:
        opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.section-container.section-anim.section-revealed>* {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.section-container.section-anim.section-revealed>*:nth-child(1) {
    transition-delay: 0.1s;
}

.section-container.section-anim.section-revealed>*:nth-child(2) {
    transition-delay: 0.2s;
}

.section-container.section-anim.section-revealed>*:nth-child(3) {
    transition-delay: 0.3s;
}

.section-container.section-anim.section-revealed>*:nth-child(4) {
    transition-delay: 0.4s;
}

/* ========================================================
   PREMIUM MICRO-INTERACTIONS & GLOW REFLECTIONS
   ======================================================== */

.glass-card {
    will-change: transform, box-shadow, border-color, background-color;
    transition:
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Skew glare sweep line on glass cards */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent);
    transform: skewX(-25deg);
    transition: none;
    z-index: 5;
    pointer-events: none;
}

.glass-card:hover::before {
    left: 150%;
    transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
    transform: scale(1.03) translate3d(0, -2px, 0);
}

/* High-performance sinusoidal floating animations (GPU accelerated) */
@keyframes float-subtle {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -16px, 0) rotate(0.8deg);
    }
}

@keyframes void-drift {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.55;
    }

    50% {
        transform: translate3d(14px, -20px, 0) scale(1.1);
        opacity: 0.95;
    }
}

@keyframes float-camera {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate3d(0, -15px, 0) rotate(2deg) scale(1.02);
    }
}

@keyframes float-pen {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate3d(0, -12px, 0) rotate(-3deg) scale(1.01);
    }
}

.profile-card-container {
    animation: float-subtle 7s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite !important;
}

.void-orb-1 {
    animation: void-drift 9s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite !important;
}

.void-orb-2 {
    animation: void-drift 9s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite reverse !important;
    animation-delay: -4.5s !important;
}

.animate-float-camera {
    animation: float-camera 6s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite !important;
}

.animate-float-pen {
    animation: float-pen 7s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite !important;
}

/* Nav Dock item responsiveness */
.nav-item {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform;
}

.nav-item:hover {
    color: var(--fg) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: scale(1.18) translate3d(0, -6px, 0) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
}

/* =======================================================
   SERVICES ACCORDION — NEW ACCORDION MOBILE STYLES
   ======================================================= */

@media (max-width: 768px) {
    /* Stack accordion vertically on mobile */
    .services-accordion {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 0.5rem !important;
        overflow: visible !important;
        touch-action: pan-y;
    }

    /* Allow the section to grow on mobile instead of clipping */
    .services-section {
        overflow: visible !important;
        overflow-x: hidden !important;
    }

    .service-accordion-item {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 56px !important;
        transition: min-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                    flex 0s !important;
    }

    .service-accordion-item.active {
        flex: none !important;
        min-height: 200px !important;
    }

    /* Collapsed icon row on mobile */
    .service-accordion-collapsed {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 0.75rem !important;
        padding: 1rem 1.25rem !important;
        height: 56px !important;
    }

    /* Content area on mobile */
    .service-accordion-content {
        position: static !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 1.25rem !important;
        transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.3s ease !important;
    }

    .service-accordion-item.active .service-accordion-content {
        height: auto !important;
        min-height: 140px !important;
        padding: 1rem 1.25rem !important;
    }
}

/* =======================================================
   SERVICES ACCORDION — MOBILE RESPONSIVENESS ADAPTATIONS
   ======================================================= */

@media (max-width: 768px) {
    .services-horizontal {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1.25rem !important;
        width: 100% !important;
    }

    .service-card-horizontal {
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        border-radius: var(--card-radius) !important;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* Convert horizontal sidebar to horizontal header for vertical stack */
    .service-card-horizontal>div:first-child {
        flex-direction: row !important;
        width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
        padding: 1.25rem 1.5rem !important;
        border-left: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 1.25rem !important;
    }

    .service-card-horizontal .service-icon {
        margin-bottom: 0 !important;
    }

    .service-card-horizontal h3 {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        transform: none !important;
        font-size: 1.1rem !important;
        font-family: var(--font-display) !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        margin: 0 !important;
    }

    /* Expandable content area (height-based) */
    .service-card-horizontal .service-content {
        width: 100% !important;
        max-width: 100% !important;
        height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
        transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
        background: rgba(18, 18, 18, 0.4) !important;
    }

    .service-card-horizontal.active .service-content {
        height: auto !important;
        min-height: 180px !important;
        opacity: 1 !important;
    }

    .service-card-horizontal .service-content-inner {
        width: 100% !important;
        padding: 1.5rem !important;
        box-sizing: border-box !important;
    }
}

/* --- Resume Panel Custom Scrollbar --- */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* =====================================================
   THEME SYSTEM — Dark / Light Mode
   ===================================================== */

/* Global transition for theme switching */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, box-shadow, opacity, fill, stroke;
    transition-duration: 0.45s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Override for elements that have their own complex transitions */
.glass-card,
.nav-item,
.gallery-card,
.service-card-horizontal,
.bracket-link,
.bracket-link .bracket,
.bracket-link .bracket-link-text,
.platform-link,
.form-field input,
.form-field textarea,
.holo-gem,
.void-orb,
.profile-card-container,
.section-container {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity, filter, clip-path !important;
    transition-duration: inherit;
    transition-timing-function: inherit;
}

/* Light Mode Token Overrides */
:root[data-theme="light"] {
    --bg: #F5F2ED;
    --bg-elevated: #EDE8E0;
    --bg-card: rgba(0, 0, 0, 0.03);
    --fg: #1a1a1a;
    --fg-muted: #5a5a5a;
    --fg-dim: #9a9a9a;
    --border: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.28);
    --primary: #2a2a2a;
    --accent: #444444;
    --glass-bg: rgba(0, 0, 0, 0.04);
    --glass-border: rgba(0, 0, 0, 0.1);
    /* html itself is hardcoded dark (#0a0a0f) as a base default —
       override it here so overscroll/elastic-scroll edges and any
       area outside body's painted box don't flash dark in light mode */
    background: var(--bg);
}

:root[data-theme="light"] body {
    background: var(--bg);
    color: var(--fg);
}

:root[data-theme="light"] .grain-overlay {
    opacity: 0.12;
    mix-blend-mode: multiply;
}

:root[data-theme="light"] .hero-bg-image {
    opacity: 0.08 !important;
    filter: grayscale(100%) contrast(0.9) invert(1);
}

:root[data-theme="light"] .glass-overlay {
    background: linear-gradient(105deg, rgba(245, 242, 237, 0.97) 0%, rgba(245, 242, 237, 0.75) 45%, rgba(245, 242, 237, 0.4) 100%);
}

:root[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(16px);
}

:root[data-theme="light"] .glass-card:hover {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 0, 0, 0.35) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.2),
        0 8px 28px rgba(0, 0, 0, 0.12),
        0 4px 14px rgba(0, 0, 0, 0.08) !important;
    transform: scale(1.015) translateY(-2px);
}

:root[data-theme="light"] .nav-dock {
    background: rgba(245, 242, 237, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .nav-item:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

:root[data-theme="light"] .nav-label {
    background: var(--bg-elevated);
    border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .menu-toggle-btn {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}

:root[data-theme="light"] .gradient-text {
    background: linear-gradient(90deg, #1a1a1a 0%, #666666 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Improved contrast for hero title in light mode */
:root[data-theme="light"] .hero-title .hero-intro {
    color: #0a0a0a !important;
    -webkit-text-fill-color: #0a0a0a !important;
}

:root[data-theme="light"] .hero-title .name-highlight {
    background: linear-gradient(110deg, #1a1a1a 20%, #444444 50%, #1a1a1a 80%);
    background-size: 200% auto;
    background-position: 200% center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Improved contrast for section headings */
:root[data-theme="light"] .section-heading h2 {
    color: #0a0a0a !important;
}

:root[data-theme="light"] .section-heading p {
    color: #3a3a3a;
}

/* Improved contrast for body text and descriptions */
:root[data-theme="light"] .hero-desc {
    color: #2a2a2a;
}

:root[data-theme="light"] .bracket-link {
    color: #3a3a3a;
}

:root[data-theme="light"] .bracket-link:hover {
    color: #0a0a0a;
}

:root[data-theme="light"] .bracket {
    color: #1a1a1a;
}

/* Improved logo contrast */
:root[data-theme="light"] .site-logo,
:root[data-theme="light"] .logo-text {
    color: #0a0a0a !important;
    fill: #0a0a0a !important;
}

:root[data-theme="light"] .text-white {
    color: #1a1a1a !important;
}

/* Tailwind's raw white/opacity utilities (border-white/5, bg-white/10, etc.)
   are generated once against the dark palette and don't repaint themselves
   for the light theme — remap them here so dividers and glass panels keep
   the same subtle contrast instead of turning invisible on a light bg. */
:root[data-theme="light"] .border-white\/5 {
    border-color: rgba(0, 0, 0, 0.05) !important;
}

:root[data-theme="light"] .border-white\/10 {
    border-color: rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .bg-white\/5 {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

:root[data-theme="light"] .bg-white\/10 {
    background-color: rgba(0, 0, 0, 0.06) !important;
}

:root[data-theme="light"] .text-white\/50 {
    color: rgba(0, 0, 0, 0.5) !important;
}

:root[data-theme="light"] .text-slate-400 {
    color: #606060 !important;
}

:root[data-theme="light"] .text-slate-300 {
    color: #444444 !important;
}

:root[data-theme="light"] .text-slate-500 {
    color: #808080 !important;
}

:root[data-theme="light"] .border-white\/5,
:root[data-theme="light"] hr {
    border-color: rgba(0, 0, 0, 0.07) !important;
}

:root[data-theme="light"] .form-field input,
:root[data-theme="light"] .form-field textarea {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--fg);
}

:root[data-theme="light"] .form-field input:focus,
:root[data-theme="light"] .form-field textarea:focus {
    border-color: rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.06);
}

:root[data-theme="light"] .form-submit {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}

:root[data-theme="light"] .form-submit:hover {
    background: transparent;
    color: var(--fg);
}

:root[data-theme="light"] .card-link-btn {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: var(--fg) !important;
}

:root[data-theme="light"] .card-link-btn:hover {
    background: var(--fg) !important;
    color: var(--bg) !important;
}

:root[data-theme="light"] .resume-btn {
    background: var(--fg) !important;
    color: var(--bg) !important;
}

:root[data-theme="light"] #resume-panel {
    background: #F0EDE7;
    border-right-color: rgba(0, 0, 0, 0.1);
}

:root[data-theme="light"] #resume-overlay {
    background: rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] .skill-icon-box {
    border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .holo-gem {
    border-color: rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0%, transparent 100%);
}

:root[data-theme="light"] .void-orb-1 {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.06) 0%, transparent 72%);
}

:root[data-theme="light"] .void-orb-2 {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.04) 0%, transparent 70%);
}

:root[data-theme="light"] section[id]::before {
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.04);
}

:root[data-theme="light"] #hero::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.02) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 0;
}

:root[data-theme="light"] .section-container::after {
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.05) 80%, transparent 100%);
}

:root[data-theme="light"] .glass-card::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

:root[data-theme="light"] .platform-link:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

:root[data-theme="light"] .scroll-progress-bar {
    background: linear-gradient(90deg, #1a1a1a 0%, #666 100%);
}

:root[data-theme="light"] .custom-cursor,
:root[data-theme="light"] .cursor-dot {
    background: #1a1a1a;
}

:root[data-theme="light"] .loading-screen {
    background: #F5F2ED;
}

:root[data-theme="light"] .gallery-3d-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.12);
}

:root[data-theme="light"] .gallery-3d-card-back {
    background: rgba(235, 230, 220, 0.95);
}

:root[data-theme="light"] .carousel-3d-btn {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--fg);
}

:root[data-theme="light"] .carousel-3d-btn:hover {
    background: rgba(0, 0, 0, 0.14);
}

:root[data-theme="light"] .carousel-3d-dot {
    background: rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] .carousel-3d-dot.active {
    background: var(--fg);
}

/* =====================================================
   DARK MODE TOGGLE BUTTON
   ===================================================== */
/* =====================================================
   DARK MODE TRANSITION OVERLAY
   ===================================================== */
.theme-flash-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 0;
    background: radial-gradient(circle at var(--flash-x, 50%) var(--flash-y, 50%),
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.06) 40%,
            transparent 70%);
}

.theme-flash-overlay.active {
    opacity: 1;
}

/* Global CSS property transitions for smooth theme switch */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow;
    transition-duration: 0.38s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Exclude elements that should NOT have the global color transition */
.marquee-row,
.marquee-row-1,
.marquee-inner,
.hero-particle,
#galaxy-canvas,
.custom-cursor,
.cursor-dot,
.scroll-progress-bar,
.loading-screen,
.loading-bar,
.gd-3d-card,
.gd-3d-card-inner,
.gd-3d-card-image img {
    transition-property: none !important;
}

/* Re-apply individual transitions for elements that need custom timing */
.glass-card {
    transition:
        border-color 0.4s ease,
        background-color 0.4s ease,
        transform 0.45s cubic-bezier(0.34, 1.25, 0.64, 1),
        box-shadow 0.45s ease !important;
}

.theme-toggle {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 1100;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* override global transition for the button itself */
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background-color 0.38s ease !important;
    animation: slideDownFade 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
}

@keyframes slideDownFade {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.theme-toggle:hover {
    transform: scale(1.12) rotate(15deg) !important;
    border-color: var(--border-hover);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .theme-toggle:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    color: var(--fg);
}

.theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
}

.theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

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

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

/* =====================================================
   LOADING SCREEN
   ===================================================== */
.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: #121212;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    pointer-events: none;
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.65s !important;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-logo {
    width: 80px;
    height: 80px;
    opacity: 0;
    animation: logoReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

@keyframes logoReveal {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(16px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.loading-bar-wrap {
    width: 120px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    border-radius: 2px;
    opacity: 0;
    animation: fadeIn 0.4s ease forwards 0.5s;
}

.loading-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
    animation: loadBar 1s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.6s;
}

@keyframes loadBar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* =====================================================
   SCROLL PROGRESS BAR
   ===================================================== */
.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.4) 100%);
    z-index: 9997;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    transition: width 0.1s linear !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* =====================================================
   CUSTOM CURSOR
   ===================================================== */
@media (pointer: fine) {
    body {
        cursor: none;
    }

    a,
    button,
    [role="button"],
    input,
    textarea,
    select,
    label {
        cursor: none;
    }
}

.custom-cursor {
    position: fixed;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: transparent;
    pointer-events: none;
    z-index: 99999;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background 0.3s ease, opacity 0.3s ease !important;
    opacity: 0;
    mix-blend-mode: difference;
}

.cursor-dot {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    pointer-events: none;
    z-index: 100000;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease !important;
}

.custom-cursor.visible,
.cursor-dot.visible {
    opacity: 1;
}

.custom-cursor.hovering {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

:root[data-theme="light"] .custom-cursor {
    border-color: rgba(0, 0, 0, 0.5);
    mix-blend-mode: multiply;
}

:root[data-theme="light"] .cursor-dot {
    background: rgba(0, 0, 0, 0.85);
}

/* =====================================================
   NAV DOCK — ACTIVE SECTION INDICATOR
   ===================================================== */
.nav-item.nav-active {
    color: var(--fg) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .nav-item.nav-active {
    background: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.06);
}

/* =====================================================
   3D GALLERY CAROUSEL
   ===================================================== */
.gallery-3d-section {
    perspective: 1200px;
    perspective-origin: 50% 50%;
}

.carousel-3d-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    height: 420px;
}

@media (max-width: 768px) {
    .carousel-3d-wrapper {
        height: 320px;
    }
}

@media (max-width: 480px) {
    .carousel-3d-wrapper {
        height: 260px;
    }
}

.carousel-3d-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-3d-card {
    position: absolute;
    width: 300px;
    height: 380px;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    transform-style: preserve-3d;
    cursor: pointer;
    border-radius: var(--card-radius);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.5s ease, border-color 0.4s ease !important;
    overflow: visible;
}

@media (max-width: 768px) {
    .gallery-3d-card {
        width: 240px;
        height: 310px;
    }
    .gallery-3d-card-front-label {
        bottom: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
    }
    .gallery-3d-card-front-label h3 {
        font-size: 0.78rem;
    }
    .gallery-3d-card-front-label p {
        font-size: 0.65rem;
    }
    .gallery-3d-card-back {
        padding: 1rem 0.85rem !important;
        gap: 0.45rem !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }
    .gallery-3d-card-back::-webkit-scrollbar {
        display: none !important;
    }
    .gallery-3d-card-back h3 {
        font-size: 0.78rem;
        margin-bottom: 0.15rem;
    }
    .gallery-3d-card-back p {
        font-size: 0.65rem;
        line-height: 1.45;
        flex: none !important;
    }
    .gallery-3d-card-back .card-tag {
        font-size: 0.55rem;
        padding: 0.15rem 0.45rem;
    }
}

@media (max-width: 480px) {
    .gallery-3d-card {
        width: 200px;
        height: 260px;
    }
    .gallery-3d-card-front-label {
        bottom: 0.6rem;
        left: 0.6rem;
        right: 0.6rem;
    }
    .gallery-3d-card-front-label h3 {
        font-size: 0.72rem;
        line-height: 1.25;
    }
    .gallery-3d-card-front-label p {
        font-size: 0.6rem;
    }
    .gallery-3d-card-back {
        padding: 0.85rem 0.7rem !important;
        gap: 0.4rem !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        scrollbar-width: none !important;
    }
    .gallery-3d-card-back::-webkit-scrollbar {
        display: none !important;
    }
    .gallery-3d-card-back h3 {
        font-size: 0.72rem;
        margin-bottom: 0.1rem;
        line-height: 1.2;
    }
    .gallery-3d-card-back p {
        font-size: 0.6rem;
        line-height: 1.35;
        flex: none !important;
    }
    .gallery-3d-card-back .card-tags {
        gap: 0.25rem;
    }
    .gallery-3d-card-back .card-tag {
        font-size: 0.52rem;
        padding: 0.1rem 0.35rem;
    }
}

.gallery-3d-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: var(--card-radius);
}

.gallery-3d-card:hover .gallery-3d-card-inner {
    transform: translateY(-4px);
}

.gallery-3d-card.is-center:hover .gallery-3d-card-inner {
    transform: rotateY(180deg) translateY(-4px);
}

.gallery-3d-card-front,
.gallery-3d-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--card-radius);
    overflow: hidden;
}

.gallery-3d-card-front {
    background: var(--bg-elevated);
}

.gallery-3d-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-3d-card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 55%);
    pointer-events: none;
}

.gallery-3d-card-front-label {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 2;
    color: #fff;
}

.gallery-3d-card-front-label h3 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.25rem;
}

.gallery-3d-card-front-label p {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 300;
}

.gallery-3d-card-back {
    background: var(--bg-elevated);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.5rem;
    gap: 0.75rem;
    border: 1px solid var(--border);
}

:root[data-theme="light"] .gallery-3d-card-back {
    background: rgba(235, 230, 220, 0.98);
}

.gallery-3d-card-back h3 {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg);
    margin-bottom: 0.25rem;
}

.gallery-3d-card-back p {
    font-size: 0.75rem;
    color: var(--fg-muted);
    line-height: 1.65;
    font-weight: 300;
    flex: 1;
}

.gallery-3d-card-back .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.gallery-3d-card-back .card-tag {
    font-size: 0.6rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--fg-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gallery-3d-card-back .card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.15rem;
    transition: gap 0.3s ease, border-color 0.3s ease !important;
    margin-top: 0.25rem;
}

.gallery-3d-card-back .card-link:hover {
    gap: 0.6rem;
    border-color: var(--border-hover);
}

/* Position cards in 3D space via JS-applied inline styles */
.gallery-3d-card.is-center {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25) !important;
    z-index: 10;
}

:root[data-theme="light"] .gallery-3d-card.is-center {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.2) !important;
}

/* Carousel controls */
.carousel-3d-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3.5rem;
    position: relative;
    z-index: 20;
}

.carousel-3d-btn {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, border-color 0.3s ease !important;
    backdrop-filter: blur(12px);
}

.carousel-3d-btn:hover {
    transform: scale(1.12);
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--border-hover);
}

:root[data-theme="light"] .carousel-3d-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.carousel-3d-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.carousel-3d-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fg-dim);
    cursor: pointer;
    transition: transform 0.3s ease, background 0.3s ease, width 0.3s ease !important;
}

.carousel-3d-dot.active {
    background: var(--fg);
    transform: scale(1.4);
    width: 18px;
    border-radius: 3px;
}

/* Auto-play toggle */
.carousel-3d-autoplay {
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-dim);
    cursor: pointer;
    border: 1px solid var(--border);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    transition: color 0.3s ease, border-color 0.3s ease !important;
}

.carousel-3d-autoplay:hover {
    color: var(--fg);
    border-color: var(--border-hover);
}

.carousel-3d-autoplay.paused {
    color: var(--fg-muted);
}

/* =====================================================
   COUNTER ANIMATIONS
   ===================================================== */
.stat-counter {
    display: inline-block;
}

/* =====================================================
   ENHANCED HERO PARTICLES
   ===================================================== */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.hero-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    animation: particleFloat linear infinite;
    will-change: transform, opacity;
}

:root[data-theme="light"] .hero-particle {
    background: rgba(0, 0, 0, 0.1);
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-20vh) translateX(var(--drift, 30px)) scale(1.2);
        opacity: 0;
    }
}

/* =====================================================
   SCROLL INDICATOR
   ===================================================== */
.scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 20;
    opacity: 0;
    animation: fadeIn 1s ease forwards 2.5s;
}

.scroll-indicator span {
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.scroll-mouse {
    width: 22px;
    height: 34px;
    border: 1px solid var(--fg-dim);
    border-radius: 11px;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 5px;
}

.scroll-wheel {
    width: 3px;
    height: 7px;
    background: var(--fg-muted);
    border-radius: 2px;
    animation: scrollWheel 2s ease infinite;
}

@keyframes scrollWheel {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    60% {
        transform: translateY(10px);
        opacity: 0;
    }

    61% {
        transform: translateY(0);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* =====================================================
   ENHANCED SKILL PROGRESS BARS
   ===================================================== */
.skill-progress-bar {
    height: 2px;
    background: var(--border);
    border-radius: 1px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.skill-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--fg-dim) 0%, var(--fg) 100%);
    border-radius: 1px;
    width: 0%;
    transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.skill-progress-fill.animated {
    width: var(--progress);
}

/* =====================================================
   GALLERY SECTION STYLES
   ===================================================== */
#gallery::before {
    content: '05.5';
    right: 3%;
    top: 10%;
    font-size: clamp(5rem, 12vw, 10rem);
    opacity: 0.35;
}

.gallery-3d-hint {
    text-align: center;
    font-size: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-top: 1rem;
    animation: pulse 3s ease infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* =====================================================
   GALAXY & NEBULA EFFECTS
   ===================================================== */
#galaxy-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    opacity: 1;
    background: transparent;
}

/* Shooting star flash */
@keyframes shootingStar {
    0% {
        transform: translateX(0) translateY(0) scaleX(0);
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    60% {
        opacity: 0.85;
        scaleX: 1;
    }

    100% {
        transform: translateX(380px) translateY(160px) scaleX(0);
        opacity: 0;
    }
}

/* Cosmic pulse for hero logo */
@keyframes cosmicPulse {

    0%,
    100% {
        box-shadow: 0 0 0px rgba(139, 120, 255, 0),
            0 0 0px rgba(80, 180, 255, 0);
    }

    50% {
        box-shadow: 0 0 60px rgba(139, 120, 255, 0.25),
            0 0 120px rgba(80, 180, 255, 0.15);
    }
}

/* Hero logo glow halo animation */
@keyframes logoHaloRotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0px) scale(1);
    }

    50% {
        transform: translateY(-8px) scale(1.02);
    }
}

/* Enhanced hero logo container */
.hero-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
    animation: logoFloat 6s ease-in-out infinite;
}

.hero-logo-wrap::before {
    content: '';
    position: absolute;
    inset: -18px;
    border-radius: 50%;
    border: 1px solid rgba(139, 120, 255, 0.18);
    animation: logoHaloRotate 12s linear infinite;
}

.hero-logo-wrap::after {
    content: '';
    position: absolute;
    inset: -36px;
    border-radius: 50%;
    border: 1px solid rgba(80, 180, 255, 0.1);
    animation: logoHaloRotate 20s linear infinite reverse;
}

.hero-logo-img {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 24px rgba(139, 120, 255, 0.45)) drop-shadow(0 0 48px rgba(80, 180, 255, 0.25)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) !important;
    transition: filter 0.5s ease !important;
}

.hero-logo-img:hover {
    filter: drop-shadow(0 0 36px rgba(139, 120, 255, 0.7)) drop-shadow(0 0 72px rgba(80, 180, 255, 0.4)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.9)) !important;
}

.nebula-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.22;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

/* Light mode adjusts nebula blend modes and opacity */
:root[data-theme="light"] .nebula-glow {
    opacity: 0.08;
    mix-blend-mode: multiply;
    filter: blur(160px);
}

.nebula-1 {
    width: 65vw;
    height: 65vw;
    max-width: 780px;
    max-height: 780px;
    /* Deep violet-blue galaxy core */
    background: radial-gradient(ellipse,
            rgba(139, 120, 255, 0.55) 0%,
            rgba(80, 60, 200, 0.25) 30%,
            rgba(30, 60, 180, 0.12) 55%,
            transparent 75%);
    top: 5%;
    left: -15%;
    animation: nebulaDrift1 28s ease-in-out infinite alternate;
}

.nebula-2 {
    width: 75vw;
    height: 75vw;
    max-width: 860px;
    max-height: 860px;
    /* Cyan-teal nebula arm */
    background: radial-gradient(ellipse,
            rgba(80, 200, 255, 0.4) 0%,
            rgba(30, 140, 220, 0.2) 35%,
            rgba(20, 80, 160, 0.08) 60%,
            transparent 80%);
    bottom: 25%;
    right: -20%;
    animation: nebulaDrift2 35s ease-in-out infinite alternate-reverse;
}

.nebula-3 {
    width: 58vw;
    height: 58vw;
    max-width: 700px;
    max-height: 700px;
    /* Magenta-rose galactic dust */
    background: radial-gradient(ellipse,
            rgba(220, 80, 200, 0.35) 0%,
            rgba(160, 40, 160, 0.15) 40%,
            rgba(80, 20, 120, 0.07) 65%,
            transparent 80%);
    top: 45%;
    left: 20%;
    animation: nebulaDrift3 42s ease-in-out infinite alternate;
}

/* nebula-4 for lower sections */
.nebula-4 {
    width: 55vw;
    height: 55vw;
    max-width: 640px;
    max-height: 640px;
    background: radial-gradient(ellipse,
            rgba(255, 140, 60, 0.28) 0%,
            rgba(200, 80, 30, 0.1) 45%,
            transparent 72%);
    top: 30%;
    right: -10%;
    animation: nebulaDrift1 38s ease-in-out infinite alternate-reverse;
}

/* Light theme overrides for nebulas using soft warm tones */
:root[data-theme="light"] .nebula-1 {
    background: radial-gradient(ellipse, rgba(139, 100, 220, 0.18) 0%, rgba(180, 160, 240, 0.07) 45%, transparent 70%);
    opacity: 0.1;
}

:root[data-theme="light"] .nebula-2 {
    background: radial-gradient(ellipse, rgba(60, 160, 200, 0.15) 0%, rgba(140, 200, 230, 0.06) 50%, transparent 75%);
    opacity: 0.1;
}

:root[data-theme="light"] .nebula-3 {
    background: radial-gradient(ellipse, rgba(180, 60, 160, 0.12) 0%, rgba(220, 160, 210, 0.05) 50%, transparent 70%);
    opacity: 0.08;
}

:root[data-theme="light"] .nebula-4 {
    opacity: 0.07;
}

@keyframes nebulaDrift1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
        opacity: 0.12;
    }

    50% {
        transform: translate3d(8%, 6%, 0) scale(1.15) rotate(15deg);
        opacity: 0.18;
    }

    100% {
        transform: translate3d(-4%, -8%, 0) scale(0.9) rotate(-10deg);
        opacity: 0.14;
    }
}

@keyframes nebulaDrift2 {
    0% {
        transform: translate3d(0, 0, 0) scale(0.95) rotate(0deg);
        opacity: 0.14;
    }

    50% {
        transform: translate3d(-10%, 4%, 0) scale(1.1) rotate(-20deg);
        opacity: 0.19;
    }

    100% {
        transform: translate3d(6%, -5%, 0) scale(1) rotate(10deg);
        opacity: 0.11;
    }
}

@keyframes nebulaDrift3 {
    0% {
        transform: translate3d(0, 0, 0) scale(1.05) rotate(0deg);
        opacity: 0.1;
    }

    50% {
        transform: translate3d(5%, -12%, 0) scale(0.85) rotate(25deg);
        opacity: 0.16;
    }

    100% {
        transform: translate3d(-5%, 8%, 0) scale(1.1) rotate(-15deg);
        opacity: 0.12;
    }
}

/* Flashlight Custom Cursor highlight */
.custom-cursor.flashlight-glow::after {
    content: '';
    position: absolute;
    inset: -120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.035) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

:root[data-theme="light"] .custom-cursor.flashlight-glow::after {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.02) 0%, transparent 70%);
}

/* Ensure sections contain the nebula overlays properly */
.section-container {
    position: relative;
}

/* =====================================================
   ENHANCED GALAXY STARFIELD — z-index layering fix
   ===================================================== */
:root[data-theme="light"] #galaxy-canvas {
    opacity: 0.35;
}

/* =====================================================
   INTERACTIVE SKILLS SECTION — Orbital / Cosmic Design
   ===================================================== */
.skills-cosmic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 72rem;
    margin: 0 auto;
    position: relative;
}

@media (max-width: 1024px) {
    .skills-cosmic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .skills-cosmic-grid {
        grid-template-columns: 1fr;
    }
}

/* Skill Orb Cards */
.skill-orb-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--border);
    background: var(--glass-bg);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    cursor: default;
    transition: border-color 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease !important;
    will-change: transform;
}

/* Skill orb header - standardizes flex layout across all cards */
.skill-orb-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.skill-orb-header>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.skill-orb-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.skill-orb-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.06), 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] .skill-orb-card:hover {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.06);
}

/* Glowing icon ring */
.skill-orb-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease !important;
    z-index: 1;
}

.skill-orb-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    animation: orbitRing 4s linear infinite;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.04);
}

:root[data-theme="light"] .skill-orb-icon::after {
    border-color: rgba(0, 0, 0, 0.12);
}

.skill-orb-card:hover .skill-orb-icon {
    transform: scale(1.18) rotate(8deg);
    box-shadow: 0 0 28px rgba(255, 255, 255, 0.14);
}

@keyframes orbitRing {
    0% {
        transform: rotate(0deg) scaleX(1);
    }

    25% {
        transform: rotate(90deg) scaleX(0.7);
    }

    50% {
        transform: rotate(180deg) scaleX(1);
    }

    75% {
        transform: rotate(270deg) scaleX(0.7);
    }

    100% {
        transform: rotate(360deg) scaleX(1);
    }
}

/* Skill label and category */
.skill-orb-label {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg);
    z-index: 1;
    position: relative;
    margin: 0;
    line-height: 1.2;
}

.skill-orb-category {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--fg-dim);
    z-index: 1;
    margin: 0.25rem 0 0 0;
    line-height: 1.2;
    position: relative;
}

/* Skill items list */
.skill-orb-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 1;
    position: relative;
}

.skill-orb-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--fg-muted);
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.skill-orb-card:hover .skill-orb-item {
    color: var(--fg);
}

.skill-orb-item:hover {
    transform: translateX(4px);
}

.skill-orb-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fg-dim);
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
}

.skill-orb-item:hover .skill-orb-item-dot {
    background: var(--fg);
    transform: scale(1.4);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

:root[data-theme="light"] .skill-orb-item:hover .skill-orb-item-dot {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

/* Level bars for each skill */
.skill-orb-level {
    height: 1px;
    background: var(--border);
    border-radius: 1px;
    overflow: hidden;
    margin-top: 0.2rem;
    width: 100%;
    flex: 1;
}

.skill-orb-level-fill {
    height: 100%;
    border-radius: 1px;
    width: 0%;
    background: linear-gradient(90deg, var(--fg-dim), var(--fg));
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.skill-orb-level-fill.animated {
    width: var(--level);
}

/* Big index number watermark on each card */
.skill-orb-num {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.03);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
    transition: color 0.4s ease !important;
}

.skill-orb-card:hover .skill-orb-num {
    color: rgba(255, 255, 255, 0.06);
}

:root[data-theme="light"] .skill-orb-num {
    color: rgba(0, 0, 0, 0.03);
}

/* Floating spark on card corner */
.skill-orb-spark {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    animation: sparkPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sparkPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.8);
    }
}

/* =====================================================
   VIDEO CAROUSEL SHOWCASE
   ===================================================== */
.video-carousel-wrapper {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

/* Swiper cube container — replaces the old .video-carousel-track */
.video-cube-swiper {
    position: relative;
    width: 100%;
    border-radius: 1.25rem;
    background: transparent;
    aspect-ratio: 9/16;
    /* Cube effect needs room around the box to rotate visibly */
    overflow: visible;
}

@media (min-width: 768px) {
    .video-cube-swiper {
        aspect-ratio: 4/5;
    }
}

.video-cube-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    border: 1px solid var(--glass-border);
    background: transparent;
    visibility: visible;
    pointer-events: auto;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.video-cube-swiper .swiper-cube-shadow {
    display: none !important;
    background: transparent !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide slide shadows from cube effect */
.video-cube-swiper .swiper-slide-shadow-left,
.video-cube-swiper .swiper-slide-shadow-right,
.video-cube-swiper .swiper-slide-shadow-top,
.video-cube-swiper .swiper-slide-shadow-bottom {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide any Swiper wrapper backgrounds */
.video-cube-swiper .swiper-wrapper {
    background: transparent;
}

.video-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 50%);
    pointer-events: none;
    z-index: 2;
}

.video-slide-label {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    z-index: 3;
}

.video-slide-label h4 {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 0.2rem;
}

.video-slide-label p {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 300;
}

/* Video carousel navigation */
.video-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
}

.video-carousel-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--fg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease !important;
}

.video-carousel-btn:hover {
    transform: scale(1.15);
    background: rgba(255, 255, 255, 0.1);
}

:root[data-theme="light"] .video-carousel-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* 3D pagination — lives inside the main Swiper, styled to match the old dots */
.video-cube-pagination.swiper-pagination {
    position: absolute;
    left: 0;
    bottom: 0.9rem;
    width: 100%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.video-cube-pagination .swiper-pagination-bullet {
    width: 5px;
    height: 5px;
    margin: 0;
    border-radius: 50%;
    background: var(--fg-dim);
    opacity: 1;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.3s ease, width 0.3s ease;
}

.video-cube-pagination .swiper-pagination-bullet-active {
    background: var(--fg);
    transform: scale(1.3);
    width: 14px;
    border-radius: 3px;
}

/* =====================================================
   ENHANCED STAR GLOW — more star sizes
   ===================================================== */
.nebula-glow {
    opacity: 0.22;
}

.nebula-1 {
    opacity: 0.24;
}

.nebula-2 {
    opacity: 0.18;
}

.nebula-3 {
    opacity: 0.20;
}

.nebula-4 {
    opacity: 0.18;
}

:root[data-theme="light"] .nebula-1,
:root[data-theme="light"] .nebula-2,
:root[data-theme="light"] .nebula-3,
:root[data-theme="light"] .nebula-4 {
    opacity: 0.09;
}

/* =====================================================
   PREMIUM STAGGERED REVEALS FOR CARDS & GRID ITEMS
   ===================================================== */

/* Initial hidden state for items inside animated sections */
.section-container.section-anim .skill-orb-card,
.section-container.section-anim .system-card,
.section-container.section-anim .service-card-horizontal,
.section-container.section-anim .trust-item,
.section-container.section-anim .platform-link,
.section-container.section-anim .form-field,
.section-container.section-anim .stat-card,
.section-container.section-anim .gallery-3d-card {
    opacity: 0;
    transform: translate3d(0, 32px, 0) scale(0.98);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        background-color 0.4s ease,
        box-shadow 0.4s ease !important;
}

/* Revealed entrance state */
.section-container.section-revealed .skill-orb-card,
.section-container.section-revealed .system-card,
.section-container.section-revealed .service-card-horizontal,
.section-container.section-revealed .trust-item,
.section-container.section-revealed .platform-link,
.section-container.section-revealed .form-field,
.section-container.section-revealed .stat-card,
.section-container.section-revealed .gallery-3d-card {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* 1. Skill cards stagger delays */
.section-revealed .skill-orb-card:nth-child(1) {
    transition-delay: 0.1s !important;
}

.section-revealed .skill-orb-card:nth-child(2) {
    transition-delay: 0.2s !important;
}

.section-revealed .skill-orb-card:nth-child(3) {
    transition-delay: 0.3s !important;
}

.section-revealed .skill-orb-card:nth-child(4) {
    transition-delay: 0.4s !important;
}

.section-revealed .skill-orb-card:nth-child(5) {
    transition-delay: 0.5s !important;
}

.section-revealed .skill-orb-card:nth-child(6) {
    transition-delay: 0.6s !important;
}

/* 2. System and Figma cards stagger delays */
.section-revealed .system-card:nth-child(1) {
    transition-delay: 0.15s !important;
}

.section-revealed .system-card:nth-child(2) {
    transition-delay: 0.3s !important;
}

.section-revealed .system-card:nth-child(3) {
    transition-delay: 0.45s !important;
}

/* 3. Horizontal services layout stagger delays */
.section-revealed .service-card-horizontal:nth-child(1) {
    transition-delay: 0.1s !important;
}

.section-revealed .service-card-horizontal:nth-child(2) {
    transition-delay: 0.2s !important;
}

.section-revealed .service-card-horizontal:nth-child(3) {
    transition-delay: 0.3s !important;
}

.section-revealed .service-card-horizontal:nth-child(4) {
    transition-delay: 0.4s !important;
}

.section-revealed .service-card-horizontal:nth-child(5) {
    transition-delay: 0.5s !important;
}

.section-revealed .service-card-horizontal:nth-child(6) {
    transition-delay: 0.6s !important;
}

.section-revealed .service-card-horizontal:nth-child(7) {
    transition-delay: 0.7s !important;
}

/* 4. Connection platforms & trust metrics delays */
.section-revealed .platform-link:nth-child(1) {
    transition-delay: 0.15s !important;
}

.section-revealed .platform-link:nth-child(2) {
    transition-delay: 0.3s !important;
}

.section-revealed .platform-link:nth-child(3) {
    transition-delay: 0.45s !important;
}

.section-revealed .trust-item:nth-child(1) {
    transition-delay: 0.2s !important;
}

.section-revealed .trust-item:nth-child(2) {
    transition-delay: 0.35s !important;
}

.section-revealed .trust-item:nth-child(3) {
    transition-delay: 0.5s !important;
}

.section-revealed .form-field:nth-child(1) {
    transition-delay: 0.1s !important;
}

.section-revealed .form-field:nth-child(2) {
    transition-delay: 0.25s !important;
}

/* 5. Stat cards animation delays */
.section-revealed .stat-card:nth-child(1) {
    transition-delay: 0.1s !important;
}

.section-revealed .stat-card:nth-child(2) {
    transition-delay: 0.3s !important;
}

/* 6. Light Mode logo adaptations */
:root[data-theme="light"] .hero-logo-img {
    filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.18)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.1)) !important;
}

:root[data-theme="light"] .hero-logo-wrap::before {
    border-color: rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .hero-logo-wrap::after {
    border-color: rgba(0, 0, 0, 0.08);
}

/* =====================================================
   GRAPHIC DESIGN CAROUSEL
   ===================================================== */

/* Section header: title left, description right */
.gd-section-header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .gd-section-header {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 3rem;
        margin-bottom: 3rem;
    }

    .gd-section-header>div {
        flex-shrink: 0;
    }

    .gd-section-header>p {
        max-width: 28rem;
        padding-top: 0.5rem;
    }
}

/* ================================================================
   PREMIUM 3D CURVED CAROUSEL - Graphic Design Section
   ================================================================ */

/* ---- Carousel Root Container ---- */
.gd-3d-carousel-root {
    position: relative;
    margin: 0 auto;
    max-width: 1400px;
    padding: 3rem 0 4rem;
}

/* ---- Enhanced Background Particles ---- */
.gd-particles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.gd-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
    pointer-events: none;
    animation: particleFloat linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-100vh) scale(1);
        opacity: 0;
    }
}

/* ---- Ambient Glow Behind Active Card ---- */
.gd-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---- 3D Viewport with Perspective ---- */
.gd-3d-viewport {
    position: relative;
    width: 100%;
    height: 520px;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    overflow: visible;
    z-index: 1;
}

@media (min-width: 768px) {
    .gd-3d-viewport {
        height: 580px;
        perspective: 1500px;
    }
}

@media (min-width: 1024px) {
    .gd-3d-viewport {
        height: 640px;
        perspective: 1800px;
    }
}

/* ---- 3D Stage for Transform Context ---- */
.gd-3d-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/* ---- 3D Track Container (legacy, kept for compatibility) ---- */
.gd-3d-track {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    will-change: transform;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ---- Panoramic 3D Carousel — Swiper.js Coverflow Effect ---- */
.gd-coverflow-swiper {
    position: relative;
    width: 100%;
    padding: 2.5rem 0 4rem;
    z-index: 1;
    /* Coverflow needs the sides to be visible, not clipped */
    overflow: visible;
}

.gd-coverflow-swiper .swiper-wrapper {
    align-items: center;
}

/* Swiper positions slides itself; drop the old absolute/curved-carousel
   positioning so it doesn't fight the coverflow transform */
.gd-coverflow-swiper .swiper-slide.gd-3d-card {
    position: relative;
    top: auto;
    left: auto;
    margin: 0;
    width: 300px;
    height: 400px;
    opacity: 1;
}

@media (min-width: 640px) {
    .gd-coverflow-swiper .swiper-slide.gd-3d-card {
        width: 340px;
        height: 440px;
    }
}

@media (min-width: 1024px) {
    .gd-coverflow-swiper .swiper-slide.gd-3d-card {
        width: 380px;
        height: 480px;
    }
}

/* ---- Individual 3D Card ---- */
.gd-3d-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 420px;
    margin-left: -160px;
    margin-top: -210px;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    cursor: pointer;
}

/* Remove animation to prevent conflict with Swiper transforms */
.gd-3d-card.active {
    opacity: 1;
}

@media (min-width: 640px) {
    .gd-3d-card {
        width: 360px;
        height: 460px;
        margin-left: -180px;
        margin-top: -230px;
    }
}

@media (min-width: 1024px) {
    .gd-3d-card {
        width: 400px;
        height: 500px;
        margin-left: -200px;
        margin-top: -250px;
    }
}

/* ---- Card Inner with Glassmorphism ---- */
.gd-3d-card-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-style: preserve-3d;
    position: relative;
}

/* ---- Card Image Container ---- */
.gd-3d-card-image {
    position: relative;
    width: 100%;
    height: 65%;
    overflow: hidden;
    background: var(--bg-elevated);
}

.gd-3d-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Card Category Badge ---- */
.gd-3d-card-category {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.8rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    z-index: 2;
}

/* ---- Card Content ---- */
.gd-3d-card-content {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.gd-3d-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg);
    margin-bottom: 0.6rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.gd-3d-card-desc {
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--fg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

/* ---- Active Card State ---- */
.gd-3d-card.active .gd-3d-card-inner {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.15),
        0 0 80px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    animation: activeCardFloat 6s ease-in-out infinite;
}

.gd-3d-card.active .gd-3d-card-title {
    color: #ffffff;
}

.gd-3d-card.active .gd-3d-card-desc {
    color: rgba(255, 255, 255, 0.7);
}

/* ---- Hover Effects ---- */
.gd-3d-card:hover .gd-3d-card-inner {
    transform: translateY(-8px) scale(1.02);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 100px rgba(255, 255, 255, 0.12);
}

.gd-3d-card:hover .gd-3d-card-image img {
    transform: scale(1.08);
}

.gd-3d-card:hover .gd-3d-card-title {
    color: #ffffff;
}

.gd-3d-card:hover .gd-3d-card-desc {
    color: rgba(255, 255, 255, 0.85);
}

/* ---- Active Card Floating Animation — Cinematic ---- */
@keyframes activeCardFloat {
    0% {
        transform: translateY(0px) rotateX(0deg) scale(1);
    }

    25% {
        transform: translateY(-6px) rotateX(0.8deg) scale(1.005);
    }

    50% {
        transform: translateY(-10px) rotateX(0deg) scale(1.008);
    }

    75% {
        transform: translateY(-6px) rotateX(-0.8deg) scale(1.005);
    }

    100% {
        transform: translateY(0px) rotateX(0deg) scale(1);
    }
}

/* ---- Navigation Arrows ---- */
.gd-3d-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: var(--fg);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 10;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gd-3d-arrow:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
}

.gd-3d-arrow:active {
    transform: translateY(-50%) scale(1.05);
}

.gd-3d-prev {
    left: -1rem;
}

.gd-3d-next {
    right: -1rem;
}

@media (min-width: 768px) {
    .gd-3d-prev {
        left: -2rem;
    }

    .gd-3d-next {
        right: -2rem;
    }
}

@media (min-width: 1024px) {
    .gd-3d-prev {
        left: -3rem;
    }

    .gd-3d-next {
        right: -3rem;
    }
}

/* ---- Modern Animated Indicators ---- */
.gd-3d-indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    z-index: 10;
}

/* Override Swiper's default absolute-positioned pagination */
.gd-3d-indicators.swiper-pagination {
    position: static;
    width: auto;
    left: auto;
    bottom: auto;
}

.gd-3d-indicator {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.gd-3d-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: var(--fg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gd-3d-indicator.active {
    width: 32px;
    background: rgba(255, 255, 255, 0.3);
}

.gd-3d-indicator.active::before {
    transform: scaleX(1);
}

.gd-3d-indicator:hover:not(.active) {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.3);
}

/* ---- Technology Tags - Elegant Pill Buttons ---- */
.gd-tech-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 3rem;
}

.gd-tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--fg-muted);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.gd-tech-pill:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--fg);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(255, 255, 255, 0.08);
}

.gd-tech-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--fg-muted);
    opacity: 0.75;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.gd-tech-icon svg {
    width: 15px;
    height: 15px;
}

.gd-tech-pill:hover .gd-tech-icon {
    color: var(--fg);
    opacity: 1;
}

/* ---- Light Mode Adjustments ---- */
:root[data-theme="light"] .gd-3d-card-inner {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .gd-3d-card.active .gd-3d-card-inner {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.1),
        0 0 80px rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .gd-3d-card-title {
    color: rgba(0, 0, 0, 0.9);
}

:root[data-theme="light"] .gd-3d-card-desc {
    color: rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] .gd-3d-arrow {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.7);
}

:root[data-theme="light"] .gd-3d-indicator {
    background: rgba(0, 0, 0, 0.2);
}

:root[data-theme="light"] .gd-3d-indicator::before {
    background: rgba(0, 0, 0, 0.8);
}

:root[data-theme="light"] .gd-tech-pill {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] .gd-tech-pill:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.9);
}

/* ---- Reduced Motion Support ---- */
@media (prefers-reduced-motion: reduce) {

    .gd-3d-card,
    .gd-3d-card-inner,
    .gd-3d-track,
    .gd-3d-arrow,
    .gd-3d-indicator,
    .gd-tech-pill,
    .gd-ambient-glow {
        transition: none !important;
        animation: none !important;
    }

    .gd-3d-card.active .gd-3d-card-inner {
        animation: none !important;
    }

    .gd-particle {
        animation: none !important;
    }
}

/* ---- Mobile Responsiveness ---- */
@media (max-width: 639px) {
    .gd-3d-viewport {
        height: 480px;
    }

    .gd-3d-card {
        width: 280px;
        height: 380px;
        margin-left: -140px;
        margin-top: -190px;
    }

    .gd-3d-arrow {
        width: 3rem;
        height: 3rem;
        opacity: 1;
    }

    .gd-3d-prev {
        left: 0.5rem;
    }

    .gd-3d-next {
        right: 0.5rem;
    }

    .gd-tech-tags {
        gap: 0.5rem;
    }

    .gd-tech-pill {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
}

/* ---- Old Carousel Styles (Legacy) ---- */

/* Pause float on hover and apply scale-up */
.gd-carousel-slide.active .gd-card-inner:hover {
    animation-play-state: paused;
    transform: scale(1.1);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.55),
        0 0 35px rgba(255, 255, 255, 0.05);
}

/* Hover effects for regular (non-center) cards */
.gd-carousel-slide:not(.active) .gd-card-inner:hover {
    transform: scale(1.03);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.38);
}

/* ---- Image wrapper ---- */
.gd-slide-img-wrap {
    position: relative;
    width: 100%;
    height: 52%;
    overflow: hidden;
    background: #000;
}

.gd-slide-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.75s cubic-bezier(0.25, 1, 0.5, 1);
    user-select: none;
    -webkit-user-drag: none;
}

/* Subtle image zoom on card hover */
.gd-card-inner:hover .gd-slide-img-wrap img {
    transform: scale(1.06);
}

/* Gradient overlay at bottom of image */
.gd-slide-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.1) 85%,
            transparent 100%);
    z-index: 1;
    opacity: 0.85;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.gd-card-inner:hover .gd-slide-img-wrap::after {
    opacity: 1;
}

/* ---- Category badge (top-right corner) ---- */
.gd-slide-category {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 3;
}

.gd-slide-category span {
    display: inline-block;
    font-size: 0.58rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(20, 20, 28, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.22rem 0.55rem;
    border-radius: 99px;
}

/* ---- Slide info panel ---- */
.gd-slide-info {
    padding: 1.25rem 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    background: rgba(10, 10, 15, 0.35);
    z-index: 2;
}

.gd-slide-title {
    font-family: var(--font-display);
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin: 0 0 0.4rem;
    line-height: 1.35;
    transform: translateY(12px);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.gd-slide-desc {
    font-size: clamp(0.68rem, 1.6vw, 0.76rem);
    font-weight: 300;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.55;
    margin: 0 0 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    opacity: 0;
    transform: translateY(18px);
    transition:
        transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.5s ease;
}

/* Show View Project action */
.gd-slide-action {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--primary);
    opacity: 0;
    transform: translateY(15px);
    transition:
        transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        opacity 0.5s ease,
        color 0.3s ease;
}

.gd-slide-action svg {
    transition: transform 0.3s ease;
}

/* Hover micro-interaction on the arrow */
.gd-card-inner:hover .gd-slide-action svg {
    transform: translateX(4px);
}

/* Smooth reveal animation when card is hovered or is the active (centered) card */
.gd-card-inner:hover .gd-slide-title,
.gd-carousel-slide.active .gd-slide-title {
    transform: translateY(0);
}

.gd-card-inner:hover .gd-slide-desc,
.gd-carousel-slide.active .gd-slide-desc {
    opacity: 1;
    transform: translateY(0);
}

.gd-card-inner:hover .gd-slide-action,
.gd-carousel-slide.active .gd-slide-action {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Arrow navigation buttons ---- */
.gd-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: rgba(20, 20, 28, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition:
        opacity 0.3s ease,
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.3s ease,
        border-color 0.3s ease;
    flex-shrink: 0;
}

.gd-carousel-root:hover .gd-carousel-arrow,
.gd-carousel-root:focus-within .gd-carousel-arrow {
    opacity: 1;
}

.gd-carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-50%) scale(1.12);
}

.gd-carousel-prev {
    left: 0.25rem;
}

.gd-carousel-next {
    right: 0.25rem;
}

/* On mobile: always visible (no hover needed) */
@media (max-width: 639px) {
    .gd-carousel-arrow {
        opacity: 1;
        width: 2.2rem;
        height: 2.2rem;
    }

    .gd-carousel-prev {
        left: 0.2rem;
    }

    .gd-carousel-next {
        right: 0.2rem;
    }
}

/* Light mode adjustments */
:root[data-theme="light"] .gd-carousel-arrow {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.12);
    color: #111;
}

:root[data-theme="light"] .gd-carousel-arrow:hover {
    background: rgba(255, 255, 255, 0.98);
}

/* ---- Dot indicators ---- */
.gd-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.5rem;
}

.gd-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--fg-dim);
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
        background 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gd-carousel-dot.active {
    background: var(--fg);
    transform: scale(1.35);
    width: 18px;
    border-radius: 3px;
}

.gd-carousel-dot:hover:not(.active) {
    background: var(--fg-muted);
    transform: scale(1.2);
}

/* ---- Tools row (below carousel) ---- */
.gd-tools-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2rem;
}

.gd-tool-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-muted);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 0.35rem 0.85rem;
    border-radius: 99px;
    transition:
        border-color 0.3s ease,
        color 0.3s ease,
        background 0.3s ease;
}

.gd-tool-badge:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--fg);
    background: rgba(255, 255, 255, 0.06);
}

.gd-tool-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fg-dim);
    flex-shrink: 0;
    transition: background 0.3s ease;
}

.gd-tool-badge:hover .gd-tool-dot {
    background: var(--fg-muted);
}

/* Light mode tweaks */
:root[data-theme="light"] .gd-carousel-viewport {
    background: transparent;
}

:root[data-theme="light"] .gd-card-inner {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .gd-carousel-slide.active .gd-card-inner {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.12),
        0 0 30px rgba(0, 0, 0, 0.02);
}

:root[data-theme="light"] .gd-slide-info {
    background: rgba(255, 255, 255, 0.85);
}

:root[data-theme="light"] .gd-slide-title {
    color: #111111;
}

:root[data-theme="light"] .gd-slide-desc {
    color: rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] .gd-slide-category span {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(0, 0, 0, 0.65);
    border-color: rgba(255, 255, 255, 0.15);
}

:root[data-theme="light"] .gd-tool-badge {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

:root[data-theme="light"] .gd-tool-badge:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.2);
    color: rgba(0, 0, 0, 0.85);
}

:root[data-theme="light"] .gd-carousel-dot {
    background: rgba(0, 0, 0, 0.25);
}

:root[data-theme="light"] .gd-carousel-dot.active {
    background: rgba(0, 0, 0, 0.8);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gd-carousel-slide {
        transition: none !important;
    }

    .gd-card-inner {
        transition: none !important;
        animation: none !important;
    }

    .gd-carousel-slide.active .gd-card-inner {
        animation: none !important;
    }

    .gd-slide-img-wrap img {
        transition: none !important;
    }
}

/* ================================================================
   LANGUAGES & SOFTWARE HORIZONTAL SCROLL SECTION
   ================================================================ */

.lang-scroll-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 3rem 0 3.5rem;
    background: linear-gradient(180deg,
            rgba(10, 10, 15, 0) 0%,
            rgba(10, 10, 15, 0.6) 30%,
            rgba(10, 10, 15, 0.6) 70%,
            rgba(10, 10, 15, 0) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1;
}

.lang-scroll-label {
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    margin-bottom: 2rem;
    user-select: none;
}

.lang-scroll-label .chevron-line {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 0.5em;
    font-style: normal;
}

.lang-scroll-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.lang-scroll-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.lang-scroll-fade-left {
    left: 0;
    background: linear-gradient(to right,
            rgba(10, 10, 15, 1) 0%,
            rgba(10, 10, 15, 0) 100%);
}

.lang-scroll-fade-right {
    right: 0;
    background: linear-gradient(to left,
            rgba(10, 10, 15, 1) 0%,
            rgba(10, 10, 15, 0) 100%);
}

.lang-scroll-container {
    width: 100%;
    overflow: hidden;
    /* clip the track — no manual scrollbar */
    position: relative;
}

.lang-scroll-container::-webkit-scrollbar {
    display: none;
}

/* Track becomes a flex row — animated horizontally */
.lang-scroll-track {
    display: flex;
    width: max-content;
    gap: 0;
    padding: 0.5rem 0;
    will-change: transform;
    animation: langScrollLeft 30s linear infinite !important;
    animation-play-state: running !important;
}

.lang-scroll-track:hover {
    animation-play-state: paused !important;
}

/* Inner marquee strips */
.lang-scroll-track .marquee-inner {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0;
}

@keyframes langScrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.lang-scroll-track .tech-icon-item {
    flex-shrink: 0;
    /* Override animation on hover since track animation is paused */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.lang-scroll-track .tech-icon-item:hover {
    transform: translateY(-8px) scale(1.1);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 12px 32px rgba(0, 0, 0, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

/* Light mode adjustments */
:root[data-theme="light"] .lang-scroll-section {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 30%,
            rgba(255, 255, 255, 0.6) 70%,
            rgba(255, 255, 255, 0) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

:root[data-theme="light"] .lang-scroll-label {
    color: #0a0a0a;
    font-weight: 700;
}

:root[data-theme="light"] .lang-scroll-label .chevron-line {
    color: #0a0a0a;
}

:root[data-theme="light"] .lang-scroll-fade-left {
    background: linear-gradient(to right,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%);
}

:root[data-theme="light"] .lang-scroll-fade-right {
    background: linear-gradient(to left,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 0) 100%);
}

:root[data-theme="light"] .lang-scroll-track .tech-icon-item:hover {
    background: rgba(0, 0, 0, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Mobile responsiveness */
@media (max-width: 639px) {
    .lang-scroll-fade {
        width: 60px;
    }

    .lang-scroll-label {
        font-size: 0.58rem;
        margin-bottom: 1.5rem;
    }

    .lang-scroll-track {
        gap: 1.5rem;
        padding: 1rem;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .lang-scroll-track {
        gap: 1.75rem;
        padding: 1rem 1.5rem;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .lang-scroll-track .tech-icon-item {
        transition: none;
    }

    .lang-scroll-container {
        scroll-behavior: auto;
    }
}

/* Void-like animation for certification icons */
@keyframes voidPulse {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.1));
    }

    25% {
        transform: scale(1.05) rotate(2deg);
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    }

    50% {
        transform: scale(1.1) rotate(0deg);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.4));
    }

    75% {
        transform: scale(1.05) rotate(-2deg);
        filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.3));
    }
}

.glass-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Service Accordion */
.service-accordion-item {
    flex: 1;
    transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.service-accordion-item.active {
    flex: 4;
}

/* Collapsed icon state */
.service-accordion-collapsed {
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: auto;
}

.service-accordion-item.active .service-accordion-collapsed {
    opacity: 0;
    pointer-events: none;
}

/* Expanded content state */
.service-accordion-content {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.service-accordion-item.active .service-accordion-content {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.15s;
}

.service-accordion-content-inner {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.service-accordion-item.active .service-accordion-content-inner {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Certification icon container */
.glass-card>div:first-child {
    position: relative;
    overflow: hidden;
}

/* ================================================================
   TECH ICONS MARQUEE SECTION
   ================================================================ */

.tech-marquee-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 3rem 0 3.5rem;
    background: linear-gradient(180deg,
            rgba(10, 10, 15, 0) 0%,
            rgba(10, 10, 15, 0.6) 30%,
            rgba(10, 10, 15, 0.6) 70%,
            rgba(10, 10, 15, 0) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 1;
}

/* Light mode background */
:root[data-theme="light"] .tech-marquee-section {
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(245, 245, 250, 0.8) 30%,
            rgba(245, 245, 250, 0.8) 70%,
            rgba(255, 255, 255, 0) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

:root[data-theme="light"] .tech-marquee-label {
    color: #0a0a0a;
    font-weight: 700;
}

:root[data-theme="light"] .tech-marquee-label .chevron-line {
    color: #0a0a0a;
}

/* Top label "TECH STACK & TOOLS" */
.tech-marquee-label {
    text-align: center;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    color: rgba(255, 255, 255, 0.25);
    text-transform: uppercase;
    margin-bottom: 2rem;
    user-select: none;
}

.tech-marquee-label .chevron-line {
    color: rgba(255, 255, 255, 0.15);
    margin: 0 0.5em;
    font-style: normal;
}

/* Outer wrapper — clips the marquee and hosts the fade overlays */
.tech-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Gradient fade on left & right edges */
.marquee-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}

.marquee-fade-left {
    left: 0;
    background: linear-gradient(to right,
            rgba(10, 10, 15, 1) 0%,
            rgba(10, 10, 15, 0) 100%);
}

.marquee-fade-right {
    right: 0;
    background: linear-gradient(to left,
            rgba(10, 10, 15, 1) 0%,
            rgba(10, 10, 15, 0) 100%);
}

/* Light mode fade edges */
:root[data-theme="light"] .marquee-fade-left {
    background: linear-gradient(to right,
            rgba(245, 245, 250, 1) 0%,
            rgba(245, 245, 250, 0) 100%);
}

:root[data-theme="light"] .marquee-fade-right {
    background: linear-gradient(to left,
            rgba(245, 245, 250, 1) 0%,
            rgba(245, 245, 250, 0) 100%);
}
    background: linear-gradient(to left,
            rgba(10, 10, 15, 1) 0%,
            rgba(10, 10, 15, 0) 100%);
}

/* The track: holds rows */
.tech-marquee-track {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Each row */
.marquee-row {
    display: flex;
    width: max-content;
}

/* Row 1 scrolls left — continuous infinite loop */
.marquee-row-1 {
    animation: marqueeScrollLeft 30s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform;
}

.marquee-row-1:hover {
    animation-play-state: paused;
}

/* Inner strip — two identical copies for seamless loop */
.marquee-inner {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0;
}

/* ── Keyframes ── */
@keyframes marqueeScrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── Hover lift animation on icon items ── */
@keyframes iconPop {
    0% {
        transform: translateY(0) scale(1);
    }

    40% {
        transform: translateY(-9px) scale(1.15);
    }

    60% {
        transform: translateY(-7px) scale(1.13);
    }

    100% {
        transform: translateY(-6px) scale(1.12);
    }
}

/* ── Individual icon card ── */
.tech-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 1rem 1.4rem;
    min-width: 90px;
    cursor: default;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.22s ease;
    border-radius: var(--card-radius-sm);
    background: transparent;
    position: relative;
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

/* Hover: lift with springy animation and glow */
.tech-icon-item:hover {
    animation: iconPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    background: rgba(255, 255, 255, 0.05);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.3);
}

.tech-icon-item:hover .tech-svg {
    filter:
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.25)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease;
}

.tech-icon-item:hover .tech-name {
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.1em;
    transition: color 0.25s ease, letter-spacing 0.3s ease;
}

/* The SVG icon itself */
.tech-svg {
    width: 44px;
    height: 44px;
    display: block;
    flex-shrink: 0;
    transition: filter 0.28s ease;
    visibility: visible;
    opacity: 1;
    pointer-events: none;
}

/* Icon label */
.tech-name {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.22s ease;
    user-select: none;
    visibility: visible;
    opacity: 1;
}

/* Light mode tech icon improvements */
:root[data-theme="light"] .tech-name {
    color: #0a0a0a;
    font-weight: 600;
}

:root[data-theme="light"] .tech-icon-item:hover .tech-name {
    color: #000000;
}

/* ── Separator dots between items ── */
.tech-icon-item+.tech-icon-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.06);
}

/* ── Responsive adjustments ── */
@media (max-width: 768px) {
    .tech-svg {
        width: 36px;
        height: 36px;
    }

    .tech-icon-item {
        padding: 0.75rem 1.1rem;
        min-width: 72px;
        gap: 0.4rem;
    }

    .tech-name {
        font-size: 0.55rem;
    }

    .marquee-fade {
        width: 60px;
    }

    .marquee-row-1 {
        animation-duration: 35s;
    }

    .tech-marquee-label {
        font-size: 0.58rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .tech-svg {
        width: 30px;
        height: 30px;
    }

    .tech-icon-item {
        padding: 0.6rem 0.85rem;
        min-width: 60px;
    }

    .marquee-row-1 {
        animation-duration: 28s;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .marquee-row-1 {
        animation: none;
    }

    .marquee-row {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
}