/* Index CSS */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; /* Improved text rendering */
}

body {
    overflow-x: hidden;
    background-color: #020202; /* RESTORED: Solid black for overscroll areas, transparency no longer needed due to App.tsx architecture fix */
}

/* 
  REMOVED: Global Noise Texture 
  Reason: Visual clean-up for Phase 1 (OLED Black Theme)
*/

/* Selection Color - High Contrast */
::selection {
    background: rgba(0, 191, 108, 0.3); /* Slightly more visible */
    color: #ffffff;
}

/* Custom Scrollbar - Minimalist & Dark */
::-webkit-scrollbar {
    width: 8px; /* Slightly wider for usability */
}

::-webkit-scrollbar-track {
    background: #020202;
}

::-webkit-scrollbar-thumb {
    background: #262626; /* Dark Gray */
    border-radius: 4px;
    border: 2px solid #020202; /* Creates padding effect */
}

    ::-webkit-scrollbar-thumb:hover {
        background: #404040; /* Lighter on hover */
    }

/* Utility for glass panels - Cleaner, Less Hazy */
.glass-panel {
    background: rgba(10, 10, 10, 0.8); /* Darker, less milky */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Animations for Global Background */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }

    33% {
        transform: translate(30px, -50px) scale(1.1);
    }

    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }

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

.animate-blob {
    animation: blob 15s infinite ease-in-out alternate;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* PHASE 3: Micro-interaction Animations */
@keyframes sheen {
    0% {
        left: -100%;
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

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

.group:hover .animate-sheen {
    animation: sheen 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(0, 191, 108, 0.2);
    }

    50% {
        box-shadow: 0 0 20px rgba(0, 191, 108, 0.5);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 3s infinite;
}

/* 還原原代碼的 bg-radial-gradient */
.bg-radial-gradient {
    background: radial-gradient(circle at center, var(--tw-gradient-from), var(--tw-gradient-to));
}

/* 還原 Receipt Style 的分隔線效果（虛線） */
.border-dashed {
    border-style: dashed;
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    /* 捲動到一半時重置實現無縫 */
}

.animate-scroll-left {
    display: flex;
    animation: scroll-left 40s linear infinite;
}

/* 暫停效果 */
#marquee-content:hover {
    animation-play-state: paused;
}

/* Features */
@keyframes pipeline-flow {
    0% {
        left: -20%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

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

.monitor-scroll {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    padding-bottom: 1rem;
}

    .monitor-scroll::-webkit-scrollbar {
        height: 12px;
    }

    .monitor-scroll::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
    }

/* Timeline */
@keyframes flow-beam {
    0% {
        left: -100%;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

@keyframes pulse-slow {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.4;
    }
}

.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}

/* Architecture */
@keyframes sheen {
    0% {
        transform: translateX(-100%);
    }

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

.group:hover .group-hover\:animate-sheen {
    animation: sheen 1.5s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(0, 191, 108, 0.4);
    }

    50% {
        box-shadow: 0 0 35px rgba(0, 191, 108, 0.7);
    }
}

.animate-pulse-glow {
    animation: pulse-glow 2s infinite;
}