/* Luxury Travel Brand - Custom CSS */

/* Base animations */
@keyframes scaleImage {
    from { transform: scale(1.05); }
    to { transform: scale(1); }
}

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

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

/* Hero immediate animations */
.scale-image {
    animation: scaleImage 16s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.header-fade-in {
    animation: fadeInNav 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    opacity: 0;
}

.hero-stagger-1 { animation: fadeInSoft 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s; opacity: 0; }
.hero-stagger-2 { animation: fadeInSoft 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.6s; opacity: 0; }
.hero-stagger-3 { animation: fadeInSoft 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.8s; opacity: 0; }
.hero-stagger-4 { animation: fadeInSoft 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 1.0s; opacity: 0; }
.hero-stagger-5 { animation: fadeInSoft 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards 1.2s; opacity: 0; }

/* Intersection Observer animations (Scroll) */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}

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

/* Subtle typographic dropshadows for images overlay */
.luxury-shadow {
    text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

/* Removing auto-fill harsh yellow background */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #EBE3D5 inset !important;
    -webkit-text-fill-color: #0A1520 !important;
    transition: background-color 5000s ease-in-out 0s;
}