/* Custom Styles for SonicSyncast */

:root {
    --brand-blue: #2563eb;
    --brand-purple: #8b5cf6;
    --brand-pink: #ec4899;
    --zinc-50: #fafafa;
    --zinc-900: #18181b;
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
}

/* --- The Assemblage Loading System --- */

.assemblage-item {
    opacity: 0;
    filter: grayscale(1) contrast(0.2) brightness(1.5);
    transition: 
        transform 1.2s var(--ease-out-expo),
        opacity 0.8s var(--ease-out-expo),
        filter 1.5s var(--ease-out-expo);
    will-change: transform, opacity, filter;
}

.assemblage-item.assembled {
    opacity: 1;
    filter: grayscale(0) contrast(1) brightness(1);
    transform: translate(0, 0) rotate(0) scale(1) !important;
}

/* Vibrant Background Elements */
.blob {
    transition: transform 0.8s var(--ease-out-expo);
    mix-blend-mode: multiply;
    filter: blur(100px);
    opacity: 0.15;
}

.blob-1 { background: var(--brand-blue); }
.blob-2 { background: var(--brand-purple); }
.blob-3 { background: var(--brand-pink); }

/* Spectacular Hover Effects */
.hover-lift {
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}

.hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px -12px rgba(37, 99, 235, 0.15);
}

.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s var(--ease-out-expo);
}

.btn-glow:hover::after {
    transform: translateX(100%);
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    50% { box-shadow: 0 0 30px 5px rgba(37, 99, 235, 0.3); }
}

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

/* Header Shrink Transitions */
.header-shrink {
    z-index: 1000 !important; /* Ensure it stays above all assemblage chaos */
    transition: 
        padding 0.4s var(--ease-out-expo),
        background-color 0.4s var(--ease-out-expo),
        backdrop-filter 0.4s var(--ease-out-expo),
        box-shadow 0.4s var(--ease-out-expo);
}

.header-shrink .shrink-target {
    transition: transform 0.4s var(--ease-out-expo), gap 0.4s var(--ease-out-expo);
}

.header-scrolled {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
}

.header-scrolled .shrink-target {
    transform: scale(0.9);
}

.header-scrolled .shrink-gap {
    gap: 1rem !important;
}

/* Refined Shadow */
.shadow-soft {
    box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.05);
}