/* Custom styles and animations for Island88 Shopping Mall */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

.hero-gradient {
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(30, 58, 138, 0.7) 100%);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #2563eb;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

.floor-plan-tab.active {
    background-color: #2563eb;
    color: white;
}

/* =========================================
   ANIMATIONS
   ========================================= */

/* 1. Scroll Reveal Animation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for grid items */
.animate-on-scroll.delay-100 { transition-delay: 0.1s; }
.animate-on-scroll.delay-200 { transition-delay: 0.2s; }
.animate-on-scroll.delay-300 { transition-delay: 0.3s; }
.animate-on-scroll.delay-400 { transition-delay: 0.4s; }

/* 2. Hover Lift Effect for Cards */
.hover-lift {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 3. Image Zoom on Hover */
.img-zoom-container {
    overflow: hidden;
}

.img-zoom-container img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.img-zoom-container:hover img {
    transform: scale(1.08);
}

/* 4. Button Pulse Animation */
@keyframes subtle-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); }
    50% { transform: scale(1.03); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); }
}

.btn-pulse {
    transition: all 0.3s ease;
}

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

/* 5. Fade In Down for Headers */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
}

/* 6. Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}