/* =================================================================
   ✨ UI ENHANCEMENTS — Dynamic Interface Improvements
   Bao gồm: Scroll Progress, Custom Cursor, Card Hover Lift,
            Timeline Stagger, Skills Progress Bars, Nav Indicator,
            Noise Texture, Section Entrance Animations
   ================================================================= */

/* ============================================
   A. SCROLL PROGRESS BAR
   ============================================ */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #ef4444 0%, #ff6b6b 50%, #ef4444 100%);
    background-size: 200% 100%;
    box-shadow:
        0 0 8px rgba(239, 68, 68, 0.9),
        0 0 16px rgba(239, 68, 68, 0.5);
    z-index: 99999;
    transition: width 0.08s linear;
    animation: progress-shimmer 2s linear infinite;
    pointer-events: none;
}

#scroll-progress::after {
    content: none;
}

@keyframes progress-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   B. CUSTOM CYBERPUNK CURSOR
   ============================================ */
.cyber-cursor-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition: transform 0.05s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9), 0 0 16px rgba(239, 68, 68, 0.5);
    will-change: transform;
}

.cyber-cursor-ring {
    width: 28px;
    height: 28px;
    border: 1.5px solid rgba(239, 68, 68, 0.7);
    position: fixed;
    pointer-events: none;
    z-index: 999998;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);
    will-change: transform;
}

/* Cursor hover state — phóng to khi hover link/button */
body.cursor-hover .cyber-cursor-dot {
    width: 10px;
    height: 10px;
    background: #ff6b6b;
    box-shadow: 0 0 12px rgba(239, 68, 68, 1), 0 0 24px rgba(239, 68, 68, 0.7);
}

body.cursor-hover .cyber-cursor-ring {
    width: 44px;
    height: 44px;
    border-color: rgba(239, 68, 68, 1);
}

/* Cursor click state */
body.cursor-click .cyber-cursor-dot {
    transform: translate(-50%, -50%) scale(0.6);
    background: #fff;
}

body.cursor-click .cyber-cursor-ring {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0.5;
}

/* Ẩn cursor mặc định khi custom cursor active — chỉ trên desktop */
@media (pointer: fine) {
    body.custom-cursor-active {
        cursor: none !important;
    }
    /* Chỉ áp dụng cho interactive elements, không dùng * wildcard */
    body.custom-cursor-active a,
    body.custom-cursor-active button,
    body.custom-cursor-active input,
    body.custom-cursor-active textarea,
    body.custom-cursor-active select,
    body.custom-cursor-active label,
    body.custom-cursor-active [role="button"],
    body.custom-cursor-active [onclick] {
        cursor: none !important;
    }
}

/* Ẩn custom cursor trên touch device */
@media (pointer: coarse) {
    .cyber-cursor-dot,
    .cyber-cursor-ring {
        display: none !important;
    }
}

/* ============================================
   C. CARD HOVER — LIFT + GLOW EFFECT
   ============================================ */

/* Nâng cấp cyber-card hover: lift + depth shadow */
.cyber-card {
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease !important;
}

.cyber-card:hover {
    transform: translateY(-6px) scale(1.015) !important;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(239, 68, 68, 0.15),
        0 0 60px rgba(239, 68, 68, 0.05) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

/* Project cards — thêm tilt effect nhẹ */
.project-card.cyber-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
}

/* Skill cards — lift nhẹ hơn */
.skill-card.cyber-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
}

/* Service cards */
.service-card-cyber.cyber-card:hover {
    transform: translateY(-5px) scale(1.01) !important;
}

/* ============================================
   D. TIMELINE EDUCATION — STAGGER SLIDE-IN
   ============================================ */

/* Override reveal-hidden cho timeline items */
.timeline-reveal {
    opacity: 0;
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Item từ trái (odd) */
.timeline-reveal.from-left {
    transform: translateX(-40px);
}

/* Item từ phải (even) */
.timeline-reveal.from-right {
    transform: translateX(40px);
}

/* Khi revealed */
.timeline-reveal.revealed {
    opacity: 1;
    transform: translateX(0) !important;
}

/* Stagger delay cho từng item */
.timeline-reveal:nth-child(1) { transition-delay: 0.1s; }
.timeline-reveal:nth-child(2) { transition-delay: 0.25s; }
.timeline-reveal:nth-child(3) { transition-delay: 0.4s; }
.timeline-reveal:nth-child(4) { transition-delay: 0.55s; }

/* Timeline dot pulse khi revealed */
.timeline-dot-pulse {
    animation: timeline-dot-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    opacity: 0;
    transform: scale(0);
}

@keyframes timeline-dot-appear {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   E. ENHANCED SCROLL REVEAL — SLIDE UP + STAGGER
   ============================================ */

/* Nâng cấp reveal-hidden: slide up mạnh hơn */
.reveal-hidden {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Stagger cho grid children — áp dụng khi parent có class reveal-stagger */
.reveal-stagger > .reveal-hidden:nth-child(1)  { transition-delay: 0.05s; }
.reveal-stagger > .reveal-hidden:nth-child(2)  { transition-delay: 0.12s; }
.reveal-stagger > .reveal-hidden:nth-child(3)  { transition-delay: 0.19s; }
.reveal-stagger > .reveal-hidden:nth-child(4)  { transition-delay: 0.26s; }
.reveal-stagger > .reveal-hidden:nth-child(5)  { transition-delay: 0.33s; }
.reveal-stagger > .reveal-hidden:nth-child(6)  { transition-delay: 0.40s; }
.reveal-stagger > .reveal-hidden:nth-child(7)  { transition-delay: 0.47s; }
.reveal-stagger > .reveal-hidden:nth-child(8)  { transition-delay: 0.54s; }
.reveal-stagger > .reveal-hidden:nth-child(9)  { transition-delay: 0.61s; }
.reveal-stagger > .reveal-hidden:nth-child(10) { transition-delay: 0.68s; }

/* Slide từ trái */
.reveal-from-left {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-from-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Slide từ phải */
.reveal-from-right {
    opacity: 0;
    transform: translateX(40px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-from-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Scale in */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   F. SKILLS SECTION — ANIMATED PROGRESS BARS
   ============================================ */

/* Wrapper cho skill bar */
.skill-progress-wrapper {
    margin-top: 0.75rem;
    width: 100%;
}

.skill-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.skill-progress-label .skill-level-text {
    color: #ef4444;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.skill-progress-track {
    width: 100%;
    height: 4px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    position: relative;
    overflow: hidden;
    clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%);
}

.skill-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #dc2626 0%, #ef4444 50%, #ff6b6b 100%);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8), 0 0 16px rgba(239, 68, 68, 0.4);
    transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

/* Shimmer trên fill bar */
.skill-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: skill-bar-shimmer 2s ease-in-out infinite;
}

@keyframes skill-bar-shimmer {
    0%   { left: -100%; }
    100% { left: 200%; }
}

/* Dot indicator ở đầu fill */
.skill-progress-fill::before {
    content: '';
    position: absolute;
    right: -2px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #ff6b6b;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(239, 68, 68, 1);
    opacity: 0;
    transition: opacity 0.3s ease 1s;
}

.skill-progress-fill.animated::before {
    opacity: 1;
}

/* ============================================
   G. NAV ACTIVE INDICATOR — ANIMATED UNDERLINE
   ============================================ */

/* Animated underline cho nav links */
[data-nav-link] {
    position: relative;
}

[data-nav-link]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: none;
}

[data-nav-link]:hover::after,
[data-nav-link].text-primary::after {
    width: 100%;
    left: 0;
}

/* Active nav link — thêm glow */
[data-nav-link].text-primary {
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

/* ============================================
   H. NOISE TEXTURE OVERLAY — SUBTLE GRAIN
   ============================================ */

/* Noise texture — DISABLED for performance (causes forced compositing layer on entire page) */
/* html::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,...");
    background-size: 200px 200px;
    opacity: 0.02;
    pointer-events: none;
    z-index: 9990;
} */

/* ============================================
   I. SECTION ENTRANCE — HERO ELEMENTS
   ============================================ */

/* Hero content stagger */
#home .flex-1.flex.flex-col > * {
    animation: hero-slide-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#home .flex-1.flex.flex-col > *:nth-child(1) { animation-delay: 0.1s; }
#home .flex-1.flex.flex-col > *:nth-child(2) { animation-delay: 0.2s; }
#home .flex-1.flex.flex-col > *:nth-child(3) { animation-delay: 0.3s; }
#home .flex-1.flex.flex-col > *:nth-child(4) { animation-delay: 0.4s; }
#home .flex-1.flex.flex-col > *:nth-child(5) { animation-delay: 0.5s; }
#home .flex-1.flex.flex-col > *:nth-child(6) { animation-delay: 0.6s; }

@keyframes hero-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Avatar entrance */
.cyber-avatar-container {
    animation: avatar-entrance 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

@keyframes avatar-entrance {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   J. SECTION TRANSITION — SMOOTH DIVIDERS
   ============================================ */

/* Gradient line giữa các section — dùng border thay vì pseudo-element
   để tránh layout shift ảnh hưởng rendering */
section {
    border-top-color: #482323;
}

/* ============================================
   K. SCROLLBAR CYBERPUNK STYLE
   ============================================ */

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

::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-left: 1px solid rgba(239, 68, 68, 0.1);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ef4444, #dc2626);
    border-radius: 0;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff6b6b, #ef4444);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
}

/* ============================================
   L. MOBILE SIDEBAR QUICK NAV (thay thế left sidebar ẩn)
   ============================================ */

/* Floating action button trên mobile — scroll to top */
#scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    background: rgba(10, 10, 10, 0.9);
    border: 1.5px solid rgba(239, 68, 68, 0.6);
    color: #ef4444;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    clip-path: polygon(20% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%, 0% 20%);
    pointer-events: none;
    backdrop-filter: blur(8px);
}

#scroll-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#scroll-to-top:hover {
    background: rgba(239, 68, 68, 0.15);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    border-color: #ef4444;
}

/* Ẩn trên desktop (đã có left sidebar) */
@media (min-width: 1536px) {
    #scroll-to-top {
        display: none;
    }
}

/* ============================================
   M. SECTION NUMBER COUNTER ANIMATION
   ============================================ */

/* Section number hiện ra khi scroll vào */
.cyber-section-number {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.cyber-section-heading-wrapper.reveal-hidden .cyber-section-number {
    opacity: 0;
    transform: translateY(-50%) translateX(-10px);
}

.cyber-section-heading-wrapper.revealed .cyber-section-number {
    opacity: 0.3;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0.3s;
}

/* ============================================
   N. CARD SCANLINE HOVER ENHANCEMENT
   ============================================ */

/* Tăng tốc scanline khi hover card */
.cyber-card:hover .cyber-card-scanline {
    animation-duration: 1.5s !important;
}

/* Border scan sáng hơn khi hover */
.cyber-card:hover .cyber-card-border-scan {
    opacity: 1 !important;
    animation-duration: 1s !important;
}

/* ============================================
   O. REDUCED MOTION — Accessibility
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .cyber-cursor-dot,
    .cyber-cursor-ring,
    #scroll-progress,
    .reveal-hidden,
    .timeline-reveal,
    .reveal-from-left,
    .reveal-from-right,
    .reveal-scale,
    .skill-progress-fill,
    .cyber-avatar-container,
    #home .flex-1.flex.flex-col > * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .skill-progress-fill {
        width: var(--target-width, 80%) !important;
    }

    html::before {
        display: none;
    }
}

/* ============================================
   P. SMOOTH PAGE TRANSITION
   ============================================ */

/* Fade-out khi navigate sang page khác */
body.page-transitioning {
    opacity: 0;
    transform: scale(0.99);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Fade-in khi page load */
body.page-entering {
    animation: page-enter 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes page-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Q. MAGNETIC BUTTONS
   ============================================ */

.cyber-btn.magnetic-active {
    transition:
        transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 0.3s ease !important;
}

/* ============================================
   R. PROJECT CARD — IMAGE REVEAL ON HOVER
   ============================================ */

/* Image container trong project card */
.cyber-card .card-image-wrapper,
.custom-card .card-image-wrapper,
.project-card img,
.custom-card img {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

.cyber-card:hover .card-image-wrapper img,
.cyber-card:hover > div:first-child img,
.custom-card:hover img,
.project-card:hover img {
    transform: scale(1.08);
    filter: brightness(1.1) saturate(1.1);
}

/* Overlay gradient khi hover */
.cyber-card > div:first-child,
.custom-card > div:first-child {
    position: relative;
    overflow: hidden;
}

.cyber-card > div:first-child::after,
.custom-card > div:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 0%,
        transparent 40%,
        rgba(239, 68, 68, 0.05) 70%,
        rgba(239, 68, 68, 0.15) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.cyber-card:hover > div:first-child::after,
.custom-card:hover > div:first-child::after {
    opacity: 1;
}

/* ============================================
   S. ANIMATED COUNTER — Stats in Hero
   ============================================ */

.counter-animated {
    display: inline-block;
    min-width: 1.5ch;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   T. PARALLAX DEPTH LAYERS — Hero Section
   ============================================ */

/* Foreground layer — particles move faster */
.parallax-layer-fg {
    transition: transform 0.1s linear;
}

/* Midground layer — text/content normal speed */
.parallax-layer-mg {
    transition: transform 0.1s linear;
}

/* Background layer — slowest */
.parallax-layer-bg {
    transition: transform 0.1s linear;
}

/* ============================================
   U. TESTIMONIAL CAROUSEL — Auto-scroll
   ============================================ */

.testimonial-scroll-container {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1rem;
}

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

.testimonial-scroll-container > * {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 320px;
}

@media (min-width: 768px) {
    .testimonial-scroll-container > * {
        width: 360px;
    }
}

/* Scroll indicators */
.testimonial-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    background: rgba(239, 68, 68, 0.3);
    border: 1px solid rgba(239, 68, 68, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}

.testimonial-dot.active {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    width: 24px;
}

/* ============================================
   V. CONTACT FORM — MICRO-INTERACTIONS
   ============================================ */

/* Input focus glow */
.cyber-input-focus {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.cyber-input-focus:focus {
    border-color: #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4), inset 0 0 8px rgba(239, 68, 68, 0.05) !important;
    background: rgba(239, 68, 68, 0.02) !important;
}

/* Floating label */
.input-group-cyber {
    position: relative;
}

.input-group-cyber label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.875rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.input-group-cyber input:focus ~ label,
.input-group-cyber input:not(:placeholder-shown) ~ label,
.input-group-cyber textarea:focus ~ label,
.input-group-cyber textarea:not(:placeholder-shown) ~ label {
    top: -0.5rem;
    left: 0.75rem;
    font-size: 0.7rem;
    color: #ef4444;
    background: #0a0a0a;
    padding: 0 0.25rem;
}

/* Submit button success state */
.btn-submit-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5) !important;
}

/* ============================================
   W. FOOTER SOCIAL ICONS — HOVER EFFECT
   ============================================ */

.footer .social a,
footer .social a,
footer a[href*="facebook"],
footer a[href*="github"],
footer a[href*="discord"],
footer a[href*="steam"] {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer .social a:hover,
footer .social a:hover {
    transform: scale(1.2) translateY(-6px) !important;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4) !important;
}

/* Tooltip cyberpunk */
.social-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #fff;
    font-size: 0.65rem;
    font-family: var(--font-mono);
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px);
}

.social-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(239, 68, 68, 0.5);
}

*:hover > .social-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   X. MOUSE-REACTIVE TILT — Disabled (rollback)
   ============================================ */

/* ============================================
   Y. TYPING CURSOR — Neon Glow Pulse
   ============================================ */

/* Override cursor tĩnh thành neon pulse */
#text-span::after {
    content: '|';
    display: inline-block;
    margin-left: 2px;
    font-weight: 300;
    color: #ef4444;
    animation: cursor-neon-pulse 1s ease-in-out infinite;
}

@keyframes cursor-neon-pulse {
    0%, 100% {
        opacity: 1;
        text-shadow:
            0 0 4px #ef4444,
            0 0 10px #ef4444,
            0 0 20px rgba(239, 68, 68, 0.6);
    }
    50% {
        opacity: 0.2;
        text-shadow:
            0 0 2px rgba(239, 68, 68, 0.4);
    }
}

/* ============================================
   Z. BACKGROUND CODE RAIN — Matrix-style
   ============================================ */

#code-rain-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
}

/* ============================================
   AA. LEFT SIDEBAR ICONS — Hover Ripple
   ============================================ */

/* Sidebar icon links */
.hidden.\\32xl\\:flex.fixed a,
[class*="fixed left-8"] a,
div[class*="fixed"][class*="left-8"] a {
    position: relative;
    overflow: hidden;
}

div[class*="fixed"][class*="left-8"] a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.4) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

div[class*="fixed"][class*="left-8"] a:hover::after {
    transform: scale(2.5);
    opacity: 1;
}

/* ============================================
   AB. SECTION HEADING GLITCH ON SCROLL
   ============================================ */

/* Glitch mạnh khi heading vừa xuất hiện */
.cyber-section-title.glitch-entrance .cyber-section-title-text::before,
.cyber-section-title.glitch-entrance .cyber-section-title-text::after {
    opacity: 0.9 !important;
    animation-duration: 0.15s !important;
}

.cyber-section-title.glitch-entrance {
    animation: heading-glitch-burst 0.6s ease-out;
}

@keyframes heading-glitch-burst {
    0% {
        transform: translateY(-2px);
        text-shadow: -3px 0 #00f3ff, 3px 0 #ff00ff;
        filter: brightness(1.3);
    }
    10% {
        transform: translateX(3px) skewX(-2deg);
        text-shadow: -4px 0 #00f3ff, 4px 0 #ff00ff;
    }
    20% {
        transform: translateX(-2px) skewX(1deg);
        text-shadow: 2px 0 #00f3ff, -2px 0 #ff00ff;
    }
    30% {
        transform: translateX(1px);
        text-shadow: -1px 0 #00f3ff, 1px 0 #ff00ff;
        filter: brightness(1.1);
    }
    50% {
        transform: none;
        text-shadow: none;
        filter: brightness(1);
    }
    100% {
        transform: none;
        text-shadow: none;
        filter: none;
    }
}

/* ============================================
   AC. DROPS SECTION — Dynamic Animations
   ============================================ */

/* Animated connection line between image and text */
#drops-section .grid::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, #ef4444, transparent, #ef4444);
    opacity: 0.4;
    animation: drops-pulse-line 2s ease-in-out infinite;
    display: none;
}

@media (min-width: 1024px) {
    #drops-section .grid::before {
        display: block;
    }
    #drops-section .grid {
        position: relative;
    }
}

@keyframes drops-pulse-line {
    0%, 100% { opacity: 0.2; width: 60px; }
    50% { opacity: 0.6; width: 100px; }
}

/* Animated data stream particles inside image frame */
#drops-section .drops-data-stream {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.drops-data-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ef4444;
    border-radius: 50%;
    opacity: 0;
    animation: drops-particle-fly 3s linear infinite;
}

.drops-data-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.drops-data-particle:nth-child(2) { left: 30%; animation-delay: 0.5s; }
.drops-data-particle:nth-child(3) { left: 50%; animation-delay: 1s; }
.drops-data-particle:nth-child(4) { left: 70%; animation-delay: 1.5s; }
.drops-data-particle:nth-child(5) { left: 90%; animation-delay: 2s; }
.drops-data-particle:nth-child(6) { left: 20%; animation-delay: 2.5s; }
.drops-data-particle:nth-child(7) { left: 60%; animation-delay: 0.8s; }
.drops-data-particle:nth-child(8) { left: 80%; animation-delay: 1.3s; }

@keyframes drops-particle-fly {
    0% {
        top: 100%;
        opacity: 0;
        transform: scale(0.5);
    }
    10% {
        opacity: 1;
        transform: scale(1);
    }
    90% {
        opacity: 0.8;
        transform: scale(1);
    }
    100% {
        top: -5%;
        opacity: 0;
        transform: scale(0.3);
    }
}

/* Feature icons — stagger entrance */
#drops-section ul li {
    opacity: 0;
    transform: translateX(20px);
    animation: drops-feature-in 0.5s ease forwards;
}

#drops-section ul li:nth-child(1) { animation-delay: 0.3s; }
#drops-section ul li:nth-child(2) { animation-delay: 0.5s; }
#drops-section ul li:nth-child(3) { animation-delay: 0.7s; }
#drops-section ul li:nth-child(4) { animation-delay: 0.9s; }

@keyframes drops-feature-in {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Icon boxes — rotating border on hover */
#drops-section .group\/item > div:last-child {
    position: relative;
    overflow: hidden;
}

#drops-section .group\/item > div:last-child::after {
    content: '';
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent, #ef4444, transparent);
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#drops-section .group\/item:hover > div:last-child::after {
    opacity: 0.3;
    animation: drops-icon-spin 2s linear infinite;
}

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

/* Platform badges — wave entrance */
#drops-section .flex.flex-wrap.gap-2.mt-5 > span {
    opacity: 0;
    transform: translateY(10px);
    animation: drops-badge-in 0.4s ease forwards;
}

#drops-section .flex.flex-wrap.gap-2.mt-5 > span:nth-child(1) { animation-delay: 0.6s; }
#drops-section .flex.flex-wrap.gap-2.mt-5 > span:nth-child(2) { animation-delay: 0.7s; }
#drops-section .flex.flex-wrap.gap-2.mt-5 > span:nth-child(3) { animation-delay: 0.8s; }
#drops-section .flex.flex-wrap.gap-2.mt-5 > span:nth-child(4) { animation-delay: 0.9s; }
#drops-section .flex.flex-wrap.gap-2.mt-5 > span:nth-child(5) { animation-delay: 1.0s; }

@keyframes drops-badge-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Live transfer indicator — blinking */
#drops-section .absolute.bottom-3.right-3 {
    animation: drops-live-blink 3s ease-in-out infinite;
}

@keyframes drops-live-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Floating speed indicator */
.drops-speed-indicator {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(239, 68, 68, 0.3);
    backdrop-filter: blur(4px);
    z-index: 10;
    font-family: var(--font-mono);
    font-size: 9px;
    color: #ef4444;
    letter-spacing: 0.1em;
    animation: drops-speed-count 2s steps(20) infinite;
}

@keyframes drops-speed-count {
    0% { --speed: 0; }
    100% { --speed: 100; }
}

/* Transfer progress bar animation inside image */
.drops-transfer-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #ef4444, #ff6b6b);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    z-index: 10;
    animation: drops-transfer-progress 4s ease-in-out infinite;
}

@keyframes drops-transfer-progress {
    0% { width: 0%; opacity: 0; }
    10% { opacity: 1; }
    80% { width: 100%; opacity: 1; }
    100% { width: 100%; opacity: 0; }
}

/* ============================================
   AD. DROPS SLIDER — Cinematic Orientation Transition
   ============================================ */

/* Slider container — fixed 16:9 */
#drops-slider {
    /* Khung cố định, ảnh portrait sẽ contain bên trong */
}

.drops-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s ease;
    will-change: opacity, transform;
}

.drops-slide.active {
    opacity: 1;
    transform: none;
    z-index: 3;
}

/* Portrait images — fit inside container without stretching */
.drops-slide[data-orient="portrait"] {
    object-fit: contain;
    background: #000;
}

/* Transition: landscape → portrait (rotate effect) */
.drops-slide.exit-to-portrait {
    opacity: 0;
    transform: rotate(3deg) scale(0.9);
    filter: blur(4px);
}

.drops-slide.enter-from-landscape {
    opacity: 0;
    transform: rotate(-3deg) scale(0.9);
    filter: blur(4px);
}

/* Transition: portrait → landscape (rotate back) */
.drops-slide.exit-to-landscape {
    opacity: 0;
    transform: rotate(-3deg) scale(0.9);
    filter: blur(4px);
}

.drops-slide.enter-from-portrait {
    opacity: 0;
    transform: rotate(3deg) scale(0.9);
    filter: blur(4px);
}

/* Normal same-orientation transition */
.drops-slide.exit-normal {
    opacity: 0;
    transform: scale(0.95);
}

.drops-slide.enter-normal {
    opacity: 0;
    transform: scale(1.05);
}

/* Dots */
.drops-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.drops-dot.active {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
    width: 18px;
    border-radius: 3px;
}

.drops-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.6);
}