/* ============================================
   SOPATEL SILMANDE — Animations
   ============================================ */

/* --- Keyframes de base --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes slideInBar {
    from { width: 0; }
    to   { width: 60px; }
}

/* --- Classes déclenchées par JS au scroll --- */
.anim-hidden {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.anim-hidden.anim-left  { transform: translateX(-50px); }
.anim-hidden.anim-right { transform: translateX(50px); }
.anim-hidden.anim-zoom  { transform: scale(0.88); }
.anim-hidden.anim-down  { transform: translateY(-30px); }

.anim-visible {
    opacity: 1 !important;
    transform: none !important;
}

/* Délais en cascade pour les grilles */
.anim-delay-1 { transition-delay: 0.1s; }
.anim-delay-2 { transition-delay: 0.2s; }
.anim-delay-3 { transition-delay: 0.3s; }
.anim-delay-4 { transition-delay: 0.4s; }
.anim-delay-5 { transition-delay: 0.5s; }
.anim-delay-6 { transition-delay: 0.6s; }

/* ============================================
   HERO BANNER — texte animé au chargement
   ============================================ */
.banner_content h6 {
    animation: fadeInDown 0.8s ease both;
    animation-delay: 0.2s;
}
.banner_content h2 {
    animation: fadeInUp 0.9s ease both;
    animation-delay: 0.4s;
}
.banner_content p {
    animation: fadeInUp 0.9s ease both;
    animation-delay: 0.6s;
}
.banner_content .btn {
    animation: zoomIn 0.8s ease both;
    animation-delay: 0.8s;
}

/* Booking table slide up */
.hotel_booking_area {
    animation: fadeInUp 0.8s ease both;
    animation-delay: 0.9s;
}

/* ============================================
   NAVBAR
   ============================================ */
.header_area {
    animation: fadeInDown 0.6s ease both;
}
.navbar-brand img {
    transition: transform 0.3s ease;
}
.navbar-brand img:hover {
    transform: scale(1.05);
}

/* ============================================
   SECTION TITLES
   ============================================ */
.section_title h2::after {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #c19d60, transparent);
    margin: 10px auto 0;
    animation: slideInBar 0.8s ease forwards;
    animation-delay: 0.3s;
    width: 0;
}

/* ============================================
   CARDS HÉBERGEMENT
   ============================================ */
.accomodation_item {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.accomodation_item:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}
.hotel_img {
    overflow: hidden;
}
.hotel_img img {
    transition: transform 0.5s ease;
}
.hotel_img:hover img {
    transform: scale(1.07);
}

/* ============================================
   FACILITIES
   ============================================ */
.facilities_item {
    transition: background 0.3s ease, transform 0.3s ease;
}
.facilities_item:hover {
    transform: translateY(-5px);
}
.facilities_item h4 i {
    transition: transform 0.4s ease, color 0.3s ease;
    display: inline-block;
}
.facilities_item:hover h4 i {
    transform: scale(1.3) rotate(-5deg);
}

/* ============================================
   BOUTONS
   ============================================ */
.theme_btn, .book_now_btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease !important;
}
.theme_btn:hover, .book_now_btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
.theme_btn_two {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.theme_btn_two:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* ============================================
   GALERIE
   ============================================ */
.gallery_img {
    overflow: hidden;
    border-radius: 4px;
}
.gallery_img img {
    transition: transform 0.5s ease;
}
.gallery_img:hover img {
    transform: scale(1.1);
}
.gallery_img .hover {
    transition: opacity 0.4s ease;
}

/* ============================================
   BLOG CARDS
   ============================================ */
.single-recent-blog-post {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    border-radius: 4px;
    overflow: hidden;
}
.single-recent-blog-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}
.single-recent-blog-post .thumb img {
    transition: transform 0.5s ease;
}
.single-recent-blog-post:hover .thumb img {
    transform: scale(1.07);
}
.single-recent-blog-post .thumb {
    overflow: hidden;
}

.blog_post img {
    transition: transform 0.5s ease;
}
.blog_item:hover .blog_post img {
    transform: scale(1.04);
}

/* ============================================
   TÉMOIGNAGES
   ============================================ */
.testimonial_item {
    transition: transform 0.35s ease;
}
.testimonial_item:hover {
    transform: translateY(-5px);
}
.testimonial_item img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.testimonial_item:hover img {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* ============================================
   FOOTER LIENS
   ============================================ */
.footer-area a {
    transition: color 0.3s ease, transform 0.2s ease;
    display: inline-block;
}
.footer-area a:hover {
    transform: translateX(4px);
}
.footer-social a {
    transition: transform 0.3s ease, color 0.3s ease !important;
    display: inline-block !important;
}
.footer-social a:hover {
    transform: translateY(-4px) scale(1.2) !important;
}

/* ============================================
   ABOUT IMAGE
   ============================================ */
.about_history_area .col-md-6 img {
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    border-radius: 4px;
}
.about_history_area .col-md-6 img:hover {
    transform: scale(1.03);
    box-shadow: 0 16px 40px rgba(0,0,0,0.15);
}

/* ============================================
   BREADCRUMB
   ============================================ */
.page-cover h2 {
    animation: fadeInDown 0.8s ease both;
    animation-delay: 0.2s;
}
.page-cover .breadcrumb {
    animation: fadeInUp 0.7s ease both;
    animation-delay: 0.4s;
}

/* ============================================
   LOGO FLOTTANT (subtle)
   ============================================ */
.logo_h img {
    animation: floatY 4s ease-in-out infinite;
}

/* ============================================
   SCROLL TO TOP (si présent)
   ============================================ */
#scroll-top-btn {
    transition: transform 0.3s ease, opacity 0.3s ease;
}
#scroll-top-btn:hover {
    transform: translateY(-4px);
}