/* Sumedicon MVC - Custom CSS Enhancements & Animations */

:root {
    --primary: #4f46e5;
    --primary-glow: rgba(79, 70, 229, 0.06);
    --secondary-glow: rgba(8, 145, 178, 0.06);
    --border-color: rgba(0, 0, 0, 0.08);
    --bg-dark: #f8fafc;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base custom background ambient glow highlights */
body {
    position: relative;
    min-height: 100vh;
}

body::before {
    content: '';
    position: absolute;
    top: -10%;
    left: 10%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

body::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, var(--secondary-glow) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

/* Tech Carousel Infinite Ticker Styles */
.tech-ticker-container {
    width: 100%;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.015);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 2.25rem 0;
    position: relative;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.tech-ticker-container::before,
.tech-ticker-container::after {
    content: "";
    height: 100%;
    position: absolute;
    width: 180px;
    z-index: 2;
    pointer-events: none;
    top: 0;
}

.tech-ticker-container::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-dark) 0%, transparent 100%);
}

.tech-ticker-container::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-dark) 0%, transparent 100%);
}

.tech-ticker-track {
    display: flex;
    width: calc(240px * 24); /* 12 items * 2 sets */
    animation: scrollTicker 35s linear infinite;
}

.tech-ticker-track:hover {
    animation-play-state: paused;
}

.tech-ticker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 240px;
    gap: 0.75rem;
    transition: var(--transition-fast);
}

.tech-ticker-item:hover {
    transform: scale(1.1);
}

.tech-ticker-item img {
    height: 40px;
    width: auto;
    max-width: 110px;
    object-fit: contain;
}

.tech-ticker-item img.rounded-logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.tech-ticker-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

/* Custom Keyframe Animations */
@keyframes scrollTicker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-240px * 12), 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

/* Slow floating glow blobs */
@keyframes floatGlow {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.08);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.95);
    }
}

.animate-float-glow {
    animation: floatGlow 15s ease-in-out infinite;
}

/* AI sandbox terminal styling */
.terminal-glow {
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(79, 70, 229, 0.15);
}

.cursor-blink {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { color: transparent }
    50% { color: #818cf8 }
}

/* Custom submit button shimmer and slide transition */
@keyframes shimmerAnimation {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.animate-shimmer {
    position: relative;
    overflow: hidden;
}

.animate-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.22) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    animation: shimmerAnimation 3s infinite ease-in-out;
    pointer-events: none;
}

/* Portfolio Filter Button Styles */
.portfolio-filter {
    transition: all 0.2s ease;
}

.portfolio-filter.active {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15) !important;
}

/* Scroll Reveal Animations (Hardware Accelerated) */
.reveal-fade-up,
.reveal-fade-left,
.reveal-fade-right,
.reveal-scale-up {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-up {
    transform: translateY(30px);
}

.reveal-fade-left {
    transform: translateX(-40px);
}

.reveal-fade-right {
    transform: translateX(40px);
}

.reveal-scale-up {
    transform: scale(0.96);
}

/* Reveal Active States */
.reveal-fade-up.reveal-active,
.reveal-fade-left.reveal-active,
.reveal-fade-right.reveal-active,
.reveal-scale-up.reveal-active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Staggered Delay Utilities */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }
.delay-700 { transition-delay: 700ms; }
.delay-800 { transition-delay: 800ms; }





/* --- Named backgrounds ---------------------------------------------------
   These were inline Tailwind arbitrary values holding two stacked gradients.
   The build-time class extractor cannot parse the top-level comma between
   them, so they produced no CSS at all once the CDN compiler was removed.
   Naming them here also keeps a 140-character class out of the markup. */
.bg-grid-slate {
    background-image: linear-gradient(to right, #1e293b 1px, transparent 1px),
                      linear-gradient(to bottom, #1e293b 1px, transparent 1px);
}
.bg-grid-slate-thick {
    background-image: linear-gradient(to right, #1e293b 1.5px, transparent 1.5px),
                      linear-gradient(to bottom, #1e293b 1.5px, transparent 1.5px);
}
.bg-grid-ink {
    background-image: linear-gradient(to right, #0f172a 1px, transparent 1px),
                      linear-gradient(to bottom, #0f172a 1px, transparent 1px);
}
.bg-grid-light {
    background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px),
                      linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
}
.bg-grid-mid {
    background-image: linear-gradient(to right, #cbd5e1 1px, transparent 1px),
                      linear-gradient(to bottom, #cbd5e1 1px, transparent 1px);
}
.bg-grid-faint {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}
.bg-dots-light {
    background-image: radial-gradient(#e2e8f0 1.5px, transparent 1.5px);
}

/* Services mega-menu: min()/calc() with a comma, same extractor limitation. */
.w-mega-menu {
    width: min(40rem, calc(100vw - 3rem));
}

/* Native select chevron. Previously an inline bg-[url('data:image/svg+xml...')]
   containing literal spaces, which is not a valid arbitrary value. */
.select-chevron {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 1rem;
}

/* Homepage ambient glows. Written inline as bg-radial-gradient(circle, ...)
   with a literal space, which is not a Tailwind utility at all — the glows
   never rendered. */
.bg-glow-indigo { background-image: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%); }
.bg-glow-cyan   { background-image: radial-gradient(circle, rgba(8, 145, 178, 0.10) 0%, transparent 70%); }

/* Hides the scrollbar on the mobile drawer and the portfolio filter rail. */
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }