/* ============================================================
   Merit Construction Chemicals — Global Styles
   Extracted from layouts/app.blade.php <style> block
   ============================================================ */

/* Base font */
body {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ────────────────────────────────────────────────────────────
   KEYFRAME ANIMATIONS
──────────────────────────────────────────────────────────── */

@keyframes slowZoom {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@keyframes floatBlob {
    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); }
}

@keyframes scrollMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes textShine {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@keyframes bg-pan-left {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes border-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes float-particle {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    20%  { opacity: 0.5; }
    80%  { opacity: 0.5; }
    100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
}

/* ────────────────────────────────────────────────────────────
   ANIMATION UTILITY CLASSES
──────────────────────────────────────────────────────────── */

.animate-slow-zoom {
    animation: slowZoom 25s ease-in-out infinite;
}

.animate-float-blob {
    animation: floatBlob 12s infinite alternate ease-in-out;
}

.animate-marquee {
    animation: scrollMarquee 40s linear infinite;
    display: flex;
    width: max-content;
}
.animate-marquee:hover {
    animation-play-state: paused;
}

.animate-text-shine {
    background-size: 200% auto;
    animation: textShine 4s linear infinite;
}

.animate-bg-pan {
    background-size: 200% 200%;
    animation: bg-pan-left 20s linear infinite alternate;
}

/* ────────────────────────────────────────────────────────────
   NEON CARD COMPONENT
──────────────────────────────────────────────────────────── */

.neon-card {
    position: relative;
    padding: 4px;
    border-radius: 2.5rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.neon-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 70%,
        #3b82f6 80%,
        #06b6d4 100%
    );
    animation: border-spin 4s linear infinite;
    opacity: 0.6;
    transition: all 0.5s ease;
}

.neon-card:hover::before {
    opacity: 1;
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        transparent 70%,
        #f59e0b 80%,
        #ea580c 100%
    );
    animation-duration: 2s;
}

.neon-card-inner {
    position: relative;
    background: white;
    border-radius: 2.3rem;
    height: 100%;
    z-index: 1;
}

/* ────────────────────────────────────────────────────────────
   PARTICLE EFFECT
──────────────────────────────────────────────────────────── */

.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    animation: float-particle linear infinite;
}

/* ────────────────────────────────────────────────────────────
   CUSTOM SCROLLBAR
──────────────────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Chat-specific scrollbar (narrower) */
.chat-scroll::-webkit-scrollbar {
    width: 6px;
}
.chat-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.chat-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}
.chat-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}