/* =========================================
   NOUVEAUX COMPOSANTS (FLIP CARDS & VEHICULES)
   ========================================= */

/* --- EFFET 3D FLIP (Anti-clipping) --- */
.flip-card { 
    perspective: 1000px; 
    -webkit-perspective: 1000px; 
}

.flip-card-inner { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    transition: transform 0.7s ease-in-out; 
    transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 
}

.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner { 
    transform: rotateY(180deg); 
}

.flip-card-front, .flip-card-back { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    backface-visibility: hidden; 
    -webkit-backface-visibility: hidden; 
    -webkit-transform: translateZ(1px); 
    transform: translateZ(1px); 
}

.flip-card-back { 
    -webkit-transform: rotateY(180deg) translateZ(1px); 
    transform: rotateY(180deg) translateZ(1px); 
}

/* --- ANIMATIONS AVIONS ET BATEAUX (Nouvelle version) --- */
@keyframes flight {
    0% { transform: translateX(-200px); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translateX(calc(100vw + 200px)); opacity: 0; }
}

@keyframes sail {
    0% { transform: translateX(-200px); opacity: 0; }
    5% { opacity: 1; }
    95% { opacity: 1; }
    100% { transform: translateX(calc(100vw + 200px)); opacity: 0; }
}

.plane-wrapper {
    position: absolute; 
    left: 0; 
    will-change: transform; 
    animation: flight linear infinite; 
}

.ship-wrapper {
    position: absolute; 
    left: 0; 
    will-change: transform; 
    animation: sail linear infinite; 
}
/* =========================================
   ANIMATIONS DE LA SECTION HERO
   ========================================= */

/* 1. Apparition du Halo lumineux centré */
@keyframes heroHaloAnim {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.animate-hero-halo {
    animation: heroHaloAnim 3s ease-out forwards;
}

/* 2. Effet cascade (Slide Up) pour les textes */
@keyframes heroSlideUpAnim {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-hero-slide-up {
    opacity: 0;
    animation: heroSlideUpAnim 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3. Fondu retardé (Pour faire apparaître le bouton Discover à la fin) */
@keyframes fadeInAnim {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in-delayed {
    opacity: 0;
    animation: fadeInAnim 1.5s ease-out 2s forwards;
}

/* 4. Le trait qui défile dans le bouton Discover */
@keyframes scrollLineAnim {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(200%); }
}
.animate-scroll-line {
    animation: scrollLineAnim 2s ease-in-out infinite;
}