/* ===== BASE ===== */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

::selection { background: rgba(13, 148, 136, 0.2); color: #0f172a; }

/* ===== HEADER SCROLL ===== */
#site-header {
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
#site-header.scrolled {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}
#site-header.scrolled .font-display { color: #0f172a; }

/* ===== MOBILE MENU ===== */
#mobile-menu {
    animation: slideDown 0.25s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== MARQUEE ===== */
.marquee-track {
    animation: marquee 30s linear infinite;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===== SELECTION CARDS ===== */
.selection-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    cursor: pointer;
}
.selection-card img {
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.selection-card:hover img {
    transform: scale(1.08);
}

/* ===== FEATURE ICONS ===== */
.feature-icon {
    transition: transform 0.3s ease, background 0.3s ease;
}
.feature-row:hover .feature-icon {
    transform: scale(1.1) rotate(-3deg);
    background: #ccfbf1;
}

/* ===== CTA BUTTONS ===== */
.cta-btn {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* ===== MAP ===== */
.map-container iframe {
    transition: filter 0.3s ease;
}
.map-container:hover iframe {
    filter: saturate(1.1);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .font-display { line-height: 1.15; }
}