/* ═══════════════════════════════════════════════
   1. CUSTOM CURSOR
═══════════════════════════════════════════════ */
    *,
    *::before,
    *::after {
        cursor: none !important;
    }

    #gfx-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #00d4ff;
        box-shadow: 0 0 8px 3px rgba(0, 212, 255, 0.9),
            0 0 20px 6px rgba(0, 150, 255, 0.5);
        pointer-events: none;
        z-index: 2147483647;   /* con trỏ luôn nằm trên cùng, trên cả side menu */
        transform: translate(-50%, -50%);
        transition: opacity 0.2s;
        mix-blend-mode: screen;
    }

    #gfx-cursor-ring {
        position: fixed;
        top: 0;
        left: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 1.5px solid rgba(0, 210, 255, 0.85);
        box-shadow: 0 0 10px rgba(0, 210, 255, 0.5),
            0 0 24px rgba(0, 140, 255, 0.3),
            inset 0 0 10px rgba(0, 200, 255, 0.08);
        pointer-events: none;
        z-index: 2147483646;
        transform: translate(-50%, -50%);
        transition: width 0.3s cubic-bezier(.22, 1, .36, 1),
            height 0.3s cubic-bezier(.22, 1, .36, 1),
            border-color 0.3s ease,
            box-shadow 0.3s ease,
            opacity 0.2s;
        mix-blend-mode: screen;
    }

    #gfx-cursor-ring.gfx-hover {
        width: 58px;
        height: 58px;
        border-color: rgba(0, 255, 220, 1);
        box-shadow: 0 0 20px rgba(0, 255, 220, 0.7),
            0 0 50px rgba(0, 200, 255, 0.4),
            inset 0 0 16px rgba(0, 255, 200, 0.12);
    }

    #gfx-cursor-ring.gfx-click {
        width: 24px;
        height: 24px;
        opacity: 0.6;
    }

    #gfx-cursor-trail-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 2147483645;
        overflow: hidden;
    }

    .gfx-trail-particle {
        position: absolute;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(0, 210, 255, 0.8), transparent 70%);
        pointer-events: none;
        transform: translate(-50%, -50%);
        animation: gfxTrailFade var(--dur, 0.6s) ease-out forwards;
    }

    @keyframes gfxTrailFade {
        0% {
            opacity: 0.7;
            transform: translate(-50%, -50%) scale(1);
        }

        100% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.1);
        }
    }

    /* Hide custom cursor on mobile/touch devices */
    @media (hover: none) and (pointer: coarse),
    (max-width: 1024px) {

        *,
        *::before,
        *::after {
            cursor: auto !important;
        }

        #gfx-cursor-dot,
        #gfx-cursor-ring,
        #gfx-cursor-trail-container,
        .gfx-trail-particle {
            display: none !important;
            opacity: 0 !important;
            visibility: hidden !important;
        }
    }

    /* ═══════════════════════════════════════════════
   2. PARALLAX SCROLL — APPEAR / DISAPPEAR
   All elements get .gfx-reveal class, controlled by JS
═══════════════════════════════════════════════ */

    /* Base hidden state for scroll-reveal elements */
    /* Không dùng filter: blur() trong reveal — blur trên hàng chục phần tử
       cùng lúc là nguyên nhân chính gây giật scroll trên máy yếu */
    .gfx-reveal {
        transition:
            opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Enter from below */
    .gfx-reveal[data-gfx-dir="up"] {
        opacity: 0;
        transform: translateY(60px) scale(0.96);
    }

    /* Enter from left */
    .gfx-reveal[data-gfx-dir="left"] {
        opacity: 0;
        transform: translateX(-80px) scale(0.95);
    }

    /* Enter from right */
    .gfx-reveal[data-gfx-dir="right"] {
        opacity: 0;
        transform: translateX(80px) scale(0.95);
    }

    /* Scale in */
    .gfx-reveal[data-gfx-dir="scale"] {
        opacity: 0;
        transform: scale(0.7) translateY(30px);
    }

    /* Fade only */
    .gfx-reveal[data-gfx-dir="fade"] {
        opacity: 0;
    }

    /* Rotate in */
    .gfx-reveal[data-gfx-dir="rotate"] {
        opacity: 0;
        transform: rotate(-8deg) translateY(40px) scale(0.9);
    }

    /* VISIBLE STATE */
    .gfx-reveal.gfx-visible {
        opacity: 1 !important;
        transform: none !important;
    }

    /* DISAPPEAR going up — exit state */
    .gfx-reveal.gfx-exited-up {
        opacity: 0 !important;
        transform: translateY(-50px) scale(0.94) !important;
    }

    /* ═══════════════════════════════════════════════
   3. WOW HOVER EFFECTS on interactive elements
═══════════════════════════════════════════════ */

    /* --- Avatar hover: orbit ring + scale --- */
    #space-sunrise-wp-root .avatar-container {
        position: relative;
        transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1) !important;
    }

    #space-sunrise-wp-root .avatar-container::before,
    #space-sunrise-wp-root .avatar-container::after {
        content: '';
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 1.5px solid transparent;
        opacity: 0;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #space-sunrise-wp-root .avatar-container::before {
        border-color: rgba(0, 200, 255, 0.6);
        animation: none;
    }

    #space-sunrise-wp-root .avatar-container::after {
        inset: -16px;
        border-color: rgba(0, 120, 255, 0.3);
        animation: none;
    }

    #space-sunrise-wp-root .avatar-container:hover {
        transform: scale(1.08) !important;
    }

    #space-sunrise-wp-root .avatar-container:hover::before {
        opacity: 1;
        animation: gfxOrbitRing 2s linear infinite;
    }

    #space-sunrise-wp-root .avatar-container:hover::after {
        opacity: 1;
        animation: gfxOrbitRing 3.5s linear infinite reverse;
    }

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

    /* --- Social badge: neon burst --- */
    #space-sunrise-wp-root .social-badge {
        position: relative;
        overflow: hidden;
        transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
            box-shadow 0.3s ease,
            background 0.3s ease !important;
    }

    #space-sunrise-wp-root .social-badge::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%),
                rgba(0, 200, 255, 0.25) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s;
    }

    #space-sunrise-wp-root .social-badge:hover {
        transform: translateY(-4px) scale(1.06) !important;
        box-shadow: 0 8px 30px rgba(0, 180, 255, 0.35),
            0 0 20px rgba(0, 150, 255, 0.2);
    }

    #space-sunrise-wp-root .social-badge:hover::before {
        opacity: 1;
    }

    /* --- Headline text --- */
    #space-sunrise-wp-root .headline {
        position: relative;
        display: inline-block;
    }

    /* --- Bio name: shimmer sweep --- */
    #bio-intro-root .bio-name:hover {
        animation: gfxShimmerSweep 0.8s ease forwards;
    }

    @keyframes gfxShimmerSweep {
        0% {
            background-position: -100% 0;
        }

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

    #bio-intro-root .bio-name {
        background-size: 200% auto;
        transition: background-position 0.8s ease;
    }

    /* --- Bio photo: cinematic reveal --- */
    #bio-intro-root .bio-image-wrap {
        transition: transform 0.6s cubic-bezier(.22, 1, .36, 1),
            box-shadow 0.6s ease !important;
        overflow: hidden;
    }

    /* Card is transparent now — lift on hover but no rectangular glow/tint
       (they would reveal the invisible card's edges) */
    #bio-intro-root .bio-image-wrap:hover {
        transform: scale(1.02) translateY(-6px) !important;
        box-shadow: none !important;
    }

    /* --- Orbit hub: pulse explosion --- */
    #orbit-component .oc-hub {
        transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
            box-shadow 0.4s ease !important;
        cursor: pointer;
    }

    #orbit-component .oc-hub:hover {
        transform: scale(1.15) !important;
        box-shadow: 0 0 80px rgba(0, 160, 255, 0.7),
            0 0 150px rgba(0, 80, 255, 0.4),
            inset 0 0 50px rgba(0, 200, 255, 0.2) !important;
    }

    /* Pulse: animate transform/opacity của pseudo-element (compositor) thay vì
       animate box-shadow (repaint mỗi frame) */
    #orbit-component .oc-hub::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: 2px solid rgba(0, 200, 255, 0.6);
        opacity: 0;
        pointer-events: none;
    }

    #orbit-component .oc-hub:hover::after {
        animation: gfxHubPulse 0.6s ease-out;
    }

    @keyframes gfxHubPulse {
        0% {
            opacity: 1;
            transform: scale(1);
        }

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

    /* --- Work cards: magnetic tilt + scan line --- */
    #myworks-wp-root .mw-card {
        position: relative;
        transition: transform 0.4s cubic-bezier(.22, 1, .36, 1) !important;
    }

    #myworks-wp-root .mw-card::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 20px;
        background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.06) 0%,
                transparent 60%);
        opacity: 0;
        transform: translateY(-100%);
        transition: opacity 0.3s, transform 0.5s cubic-bezier(.22, 1, .36, 1);
        pointer-events: none;
        z-index: 5;
    }

    #myworks-wp-root .mw-card:hover::after {
        opacity: 1;
        transform: translateY(0);
    }

    /* --- Service cards: icon spin + border trace --- */
    #whatido-wp-root .wid-service-card {
        position: relative;
        overflow: hidden;
        transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
            box-shadow 0.4s ease !important;
    }

    #whatido-wp-root .wid-service-card:hover {
        transform: translateY(-8px) scale(1.02) !important;
        box-shadow: 0 20px 50px -10px rgba(0, 120, 255, 0.2),
            0 0 30px rgba(0, 200, 255, 0.1) !important;
    }

    #whatido-wp-root .wid-service-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg,
                transparent, rgba(0, 200, 255, 0.8), transparent);
        transition: left 0.5s ease;
    }

    #whatido-wp-root .wid-service-card:hover::before {
        left: 100%;
    }

    #whatido-wp-root .wid-service-icon {
        transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
            filter 0.3s ease !important;
    }

    #whatido-wp-root .wid-service-card:hover .wid-service-icon {
        transform: rotate(10deg) scale(1.15) !important;
        filter: drop-shadow(0 0 8px rgba(0, 200, 255, 0.6)) !important;
    }

    /* --- Client cards: border glow pulse --- */
    #whatido-wp-root .wid-client-card {
        position: relative;
        transition: transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
            box-shadow 0.4s ease,
            border-color 0.3s ease !important;
    }

    #whatido-wp-root .wid-client-card:hover {
        transform: translateY(-6px) scale(1.02) !important;
        box-shadow: 0 16px 48px -8px rgba(0, 150, 255, 0.25),
            0 0 40px rgba(0, 180, 255, 0.12) !important;
    }

    #whatido-wp-root .wid-client-icon {
        transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1) !important;
    }

    #whatido-wp-root .wid-client-card:hover .wid-client-icon {
        transform: scale(1.2) rotate(-5deg) !important;
        animation: gfxIconBounce 0.5s cubic-bezier(.34, 1.56, .64, 1);
    }

    @keyframes gfxIconBounce {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.3) rotate(-8deg);
        }

        100% {
            transform: scale(1.2) rotate(-5deg);
        }
    }

    /* --- AI card: warp distortion on hover --- */
    #whatido-wp-root .wid-ai-card {
        transition: transform 0.5s cubic-bezier(.22, 1, .36, 1) !important;
    }

    #whatido-wp-root .wid-ai-card:hover {
        transform: scale(1.02) translateY(-6px) !important;
    }

    #whatido-wp-root .wid-ai-glow {
        transition: opacity 0.4s ease !important;
    }

    #whatido-wp-root .wid-ai-card:hover .wid-ai-glow {
        opacity: 1 !important;
        animation: gfxAiGlowPulse 1.5s ease-in-out infinite !important;
    }

    @keyframes gfxAiGlowPulse {

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

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

    /* --- AI tags: pop on hover --- */
    #whatido-wp-root .wid-ai-tag {
        transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1),
            box-shadow 0.3s ease,
            background 0.3s ease !important;
    }

    #whatido-wp-root .wid-ai-tag:hover {
        transform: scale(1.12) translateY(-2px) !important;
        box-shadow: 0 4px 20px rgba(0, 200, 255, 0.3) !important;
    }

    /* --- Cooperation section headline: letter wave --- */
    #coop-wp-root .coop-title {
        display: inline-block;
        transition: letter-spacing 0.4s cubic-bezier(.22, 1, .36, 1) !important;
        cursor: default;
    }

    #coop-wp-root .coop-title:hover {
        letter-spacing: 0.04em !important;
        text-shadow: 0 0 30px rgba(100, 160, 255, 0.5);
    }

    /* --- Divider: expand on section enter --- */
    #coop-wp-root .coop-divider {
        transition: width 1s cubic-bezier(.22, 1, .36, 1),
            box-shadow 0.5s ease !important;
    }

    #coop-wp-root .coop-revealed.coop-divider {
        width: 120px !important;
        box-shadow: 0 0 20px rgba(100, 100, 255, 0.5) !important;
    }

    /* --- Money particles for coop title --- */
    .coop-money-particle {
        position: absolute;
        pointer-events: none;
        user-select: none;
        font-family: inherit;
        font-weight: 700;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255, 215, 0, 0.9);
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
        z-index: 10;
        animation: coopMoneyFly var(--dur) cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    @keyframes coopMoneyFly {
        0% {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.5);
        }

        20% {
            opacity: 1;
            transform: translate(calc(-50% + var(--tx) * 0.2), calc(-50% + var(--ty) * 0.2)) scale(1);
        }

        100% {
            opacity: 0;
            transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5);
        }
    }

    /* --- Orbit logo nodes: enhanced --- */
    #orbit-component .oc-logo-node {
        transition: transform 0.35s cubic-bezier(.34, 1.56, .64, 1),
            box-shadow 0.3s ease,
            border-color 0.3s ease !important;
    }

    /* --- Bio highlight spans: shimmer --- */
    #bio-intro-root .bio-highlight {
        position: relative;
        display: inline-block;
        transition: color 0.3s ease !important;
    }

    #bio-intro-root .bio-highlight::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: linear-gradient(90deg, #00d4ff, #7b5cf5);
        transition: width 0.5s cubic-bezier(.22, 1, .36, 1);
    }

    #bio-intro-root .bio-highlight:hover::after {
        width: 100%;
    }

    #bio-intro-root .bio-highlight:hover {
        color: #60d0ff !important;
        text-shadow: 0 0 20px rgba(0, 200, 255, 0.4);
    }

    /* --- Scroll sections: staggered children --- */
    .gfx-stagger>* {
        transition-delay: calc(var(--gfx-i, 0) * 0.07s) !important;
    }

    /* ═══════════════════════════════════════════════
   4. MAGNETIC BUTTON EFFECT for any .gfx-magnetic
═══════════════════════════════════════════════ */
    .gfx-magnetic {
        display: inline-block;
        transition: transform 0.3s cubic-bezier(.22, 1, .36, 1);
    }

    /* ═══════════════════════════════════════════════
   5. SECTION ENTER — global glow shimmer
═══════════════════════════════════════════════ */
    /* (gfxSectionEnterGlow — animate box-shadow — đã bỏ, không nơi nào dùng) */

    /* ═══════════════════════════════════════════════
   6. PARTICLE BURST for interactive clicks
═══════════════════════════════════════════════ */
    .gfx-burst-particle {
        position: fixed;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        pointer-events: none;
        z-index: 2147483644;
        background: #00d4ff;
        box-shadow: 0 0 6px rgba(0, 200, 255, 0.8);
        animation: gfxBurstMove var(--dur) ease-out forwards;
    }

    @keyframes gfxBurstMove {
        0% {
            opacity: 1;
            transform: translate(0, 0) scale(1);
        }

        100% {
            opacity: 0;
            transform: translate(var(--tx), var(--ty)) scale(0.2);
        }
    }

    /* ═══════════════════════════════════════════════
   7. RIPPLE EFFECT on cards
═══════════════════════════════════════════════ */
    .gfx-ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(0, 200, 255, 0.15);
        transform: scale(0);
        animation: gfxRippleOut 0.6s ease-out forwards;
        pointer-events: none;
        z-index: 10;
    }

    @keyframes gfxRippleOut {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }

    /* ═══════════════════════════════════════════════
   8. SCROLLBAR styling — clean minimal
═══════════════════════════════════════════════ */
    ::-webkit-scrollbar {
        width: 4px;
        height: 0px; /* Hide horizontal scrollbar */
    }

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

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

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.25);
    }

    /* Hide scrollbar for Firefox */
    html {
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    }

    /* Prevent any horizontal overflow.
       NOTE: `hidden` turns body into a scroll container and BREAKS
       position:sticky (the orbit section scroll-lock). `clip` blocks
       horizontal overflow without killing sticky — use it where supported. */
    html, body {
        overflow-x: hidden;
    }

    @supports (overflow-x: clip) {
        html, body {
            overflow-x: clip;
        }
    }

    /* ═══════════════════════════════════════════════
   9. ACCESSIBILITY — respect reduced-motion preference
═══════════════════════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }