:root {
    --bg-1: url('');
    --bg-2: url('');
    --bg-3: url('');
}

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.bg-landscape {
    background-color: #f8fafc;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition: background-image 0.5s ease-in-out;
}

@keyframes slideTrackAnimation {
    0%,  25% { transform: translateX(0%);      }
    33%, 58% { transform: translateX(-33.33%); }
    66%, 91% { transform: translateX(-66.66%); }
    100%     { transform: translateX(0%);       }
}

.slider-track {
    display: flex; width: 300%; height: 100%;
    animation: slideTrackAnimation 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.slider-item { width: 33.33%; height: 100%; background-size: cover; background-position: center; }

.glass-card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.07);
}

.bento-card {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
    border-radius: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255,255,255,0.5);
    transition: all 0.4s ease;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.bento-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -5px rgba(0,188,212,0.15);
    border-color: #00BCD4;
}

.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5,0,0,1); }
.reveal.active { opacity: 1; transform: translateY(0); }