/* ==========================================================================
   SBTA BOUAKÉ - ANIMATIONS FIDÈLES AUX VIDÉOS DE RÉFÉRENCE JITTER
   Frame-1-2.mp4 (Page 2) & Frame-4.mp4 (Page 3)
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE 1 (Hero) - Animation des écritures et composants
   -------------------------------------------------------------------------- */
@keyframes heroNavFade {
  0% {
    opacity: 0;
    transform: translateY(-16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroWordFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroWhisperPop {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-header {
  animation: heroNavFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-eyebrow,
.hero-word-votre,
.hero-word-voyage,
.hero-word-commence,
.hero-description,
.hero-actions {
  opacity: 0;
}

.hero-section.is-visible .hero-eyebrow {
  opacity: 0;
  animation: heroWordFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero-section.is-visible .hero-word-votre {
  opacity: 0;
  animation: heroWordFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}

.hero-section.is-visible .hero-word-voyage {
  opacity: 0;
  animation: heroWhisperPop 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.55s forwards;
}

.hero-section.is-visible .hero-word-commence {
  opacity: 0;
  animation: heroWordFadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.75s forwards;
}

.hero-section.is-visible .hero-description {
  opacity: 0;
  animation: heroWordFadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.95s forwards;
}

.hero-section.is-visible .hero-actions {
  opacity: 0;
  animation: heroWordFadeInUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1.15s forwards;
}


/* --------------------------------------------------------------------------
   PAGE 2 - Animation fidèle à la vidéo Frame-1-2.mp4
   - Apparition des titres
   - Dévoilement vertical de la carte centrale (0.9s à 1.5s)
   - Glissement de la bande typique violette et verte en arrière-plan (1.5s à 2.1s)
   -------------------------------------------------------------------------- */

/* En-tête */
.teaser-header-left {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.teaser-header-right {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}

/* Carte centrale du car : Dévoilement vertical de haut en bas (comme dans Frame-1-2.mp4) */
.teaser-card {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.85s;
}

/* Bande typique violette et verte en arrière-plan : glisse en diagonale depuis le haut-gauche */
.teaser-bands-img {
  opacity: 0;
  transform: translate(calc(-50% - 240px), -180px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) 1.45s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1.45s;
}

/* Déclenchement à la visibilité */
.section-destinations-teaser.is-visible .teaser-header-left {
  opacity: 1;
  transform: translateY(0);
}

.section-destinations-teaser.is-visible .teaser-header-right {
  opacity: 1;
  transform: translateY(0);
}

.section-destinations-teaser.is-visible .teaser-card {
  clip-path: inset(0 0 0% 0);
}

.section-destinations-teaser.is-visible .teaser-bands-img {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Réinitialisation instantanée hors écran */
.section-destinations-teaser:not(.is-visible) .teaser-header-left,
.section-destinations-teaser:not(.is-visible) .teaser-header-right,
.section-destinations-teaser:not(.is-visible) .teaser-card,
.section-destinations-teaser:not(.is-visible) .teaser-bands-img {
  transition: none !important;
  opacity: 0;
}

.section-destinations-teaser:not(.is-visible) .teaser-card {
  clip-path: inset(0 0 100% 0) !important;
}

.section-destinations-teaser:not(.is-visible) .teaser-bands-img {
  transform: translate(calc(-50% - 240px), -180px) !important;
}


/* --------------------------------------------------------------------------
   PAGE 3 - Animation fidèle à la vidéo Frame-4.mp4
   - Décomposition du titre principal (27 destinations -> mille possibilités de -> voyage)
   - Descente douce des 3 lignes du paragraphe descriptif
   - Apparition individuelle en cascade des cartes
   - Apparition des flèches et des boutons inférieurs
   -------------------------------------------------------------------------- */

/* Mots du titre de la page 3 */
.deck-word {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.deck-desc-line {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.deck-controls-bar {
  opacity: 0;
  transition: opacity 0.45s ease 2.35s;
}

/* Cartes de destinations : glissement vertical ascendant de 44px + fondu (conforme à la vidéo Frame-4.mp4) */
.section-destinations-deck .dest-card {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
  will-change: opacity, transform;
}

/* Boutons d'action inférieurs : apparition en fondu pur (conforme Frame-4.mp4) */
.deck-bottom-actions .btn-retour-green {
  opacity: 0;
  transition: opacity 0.5s ease 3.15s;
}

.deck-bottom-actions .btn-horaires-purple {
  opacity: 0;
  transition: opacity 0.5s ease 3.65s;
}

/* Séquence d'apparition à la visibilité (calquée exactement sur Frame-4.mp4) */

/* 1. Mots du titre */
.section-destinations-deck.is-visible .deck-word-count {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.05s;
}

.section-destinations-deck.is-visible .deck-word-rest {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.25s;
}

.section-destinations-deck.is-visible .deck-word-voyage {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

/* 2. Lignes descriptives */
.section-destinations-deck.is-visible .deck-desc-line-1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.75s;
}

.section-destinations-deck.is-visible .deck-desc-line-2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.95s;
}

.section-destinations-deck.is-visible .deck-desc-line-3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.15s;
}

/* 3. Flèches de navigation */
.section-destinations-deck.is-visible .deck-controls-bar {
  opacity: 1;
  transition-delay: 2.25s;
}

/* 4. Cascade d'apparition des cartes du premier slide */
.section-destinations-deck.is-visible .deck-slide.slide-intro-active .dest-card {
  opacity: 1;
  transform: translateY(0);
}

.section-destinations-deck.is-visible .deck-slide.slide-intro-active .dest-card:nth-child(1) {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1.45s;
}

.section-destinations-deck.is-visible .deck-slide.slide-intro-active .dest-card:nth-child(2) {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1.80s;
}

.section-destinations-deck.is-visible .deck-slide.slide-intro-active .dest-card:nth-child(3) {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 2.15s;
}

.section-destinations-deck.is-visible .deck-slide.slide-intro-active .dest-card:nth-child(4) {
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 2.50s;
}

/* 5. Boutons d'action inférieurs : Retour et Horaires */
.section-destinations-deck.is-visible .deck-bottom-actions .btn-retour-green {
  opacity: 1;
  transition-delay: 2.95s;
}

.section-destinations-deck.is-visible .deck-bottom-actions .btn-horaires-purple {
  opacity: 1;
  transition-delay: 3.35s;
}

/* Réinitialisation instantanée hors écran pour la section 3 */
.section-destinations-deck:not(.is-visible) .deck-word,
.section-destinations-deck:not(.is-visible) .deck-desc-line,
.section-destinations-deck:not(.is-visible) .deck-controls-bar,
.section-destinations-deck:not(.is-visible) .dest-card,
.section-destinations-deck:not(.is-visible) .deck-bottom-actions .btn-retour-green,
.section-destinations-deck:not(.is-visible) .deck-bottom-actions .btn-horaires-purple {
  transition: none !important;
  opacity: 0;
}

.section-destinations-deck:not(.is-visible) .dest-card {
  transform: translateY(44px) !important;
}

.section-destinations-deck:not(.is-visible) .deck-word {
  transform: translateY(-16px) !important;
}

.section-destinations-deck:not(.is-visible) .deck-desc-line {
  transform: translateY(-8px) !important;
}


/* --------------------------------------------------------------------------
   Transitions lors de l'interaction avec tous les lots et les retours
   Les cartes du lot actif s'animent systématiquement en cascade montante
   -------------------------------------------------------------------------- */
.section-destinations-deck .deck-slide.slide-enter-active .dest-card {
  opacity: 1;
  transform: translateY(0);
}

.section-destinations-deck .deck-slide.slide-enter-active .dest-card:nth-child(1) {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0s;
}

.section-destinations-deck .deck-slide.slide-enter-active .dest-card:nth-child(2) {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.04s;
}

.section-destinations-deck .deck-slide.slide-enter-active .dest-card:nth-child(3) {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.08s;
}

.section-destinations-deck .deck-slide.slide-enter-active .dest-card:nth-child(4) {
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.12s;
}

/* Une fois le slide stabilisé (après cascade d'entrée ou intro), les cartes répondent instantanément au hover */
.section-destinations-deck .deck-slide.is-settled .dest-card {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, opacity 0.25s ease;
  transition-delay: 0s;
}

/* Cartes des slides inactifs réinitialisées immédiatement prêtes pour leur prochaine animation */
.section-destinations-deck .deck-slide:not(.slide-intro-active):not(.slide-enter-active):not(.is-settled) .dest-card {
  opacity: 0;
  transform: translateY(44px);
  transition: none;
}

/* Effet de survol interactif fluide sur les cartes visibles */
.section-destinations-deck .deck-slide.is-settled .dest-card:hover,
.section-destinations-deck .deck-slide.slide-intro-active .dest-card:hover,
.section-destinations-deck .deck-slide.slide-enter-active .dest-card:hover,
.dest-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
  transition-delay: 0s !important;
}


/* ==========================================================================
   PAGE 4 — ANIMATION FIDÈLE À LA VIDÉO Frame-14.mp4 (Section Horaires)
   - Apparition des cercles décoratifs et du titre principal
   - Apparition du paragraphe descriptif
   - Dévoilement en cascade ascendante des 7 lignes d'horaires (Abidjan à Bondoukou)
   - Apparition de la note d'information (NB) et du bouton Découvrir la gare
   ========================================================================== */

/* En-tête de section */
.horaires-header-left {
  opacity: 0;
  transform: translateY(-16px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.horaires-header-right {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Cartes des horaires : initialement invisibles et décalées vers le bas de 36px */
.horaires-card {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease;
  will-change: opacity, transform;
}

/* Footer (Note NB et bouton) */
.horaires-footer {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Séquence d'apparition lorsque la section devient visible (.section-horaires.is-visible) */

/* 1. Titre et description */
.section-horaires.is-visible .horaires-header-left {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.section-horaires.is-visible .horaires-header-right {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

/* 2. Cascade des 7 lignes d'horaires (timing fidèle à Frame-14.mp4) */
.section-horaires.is-visible .horaires-card {
  opacity: 1;
  transform: translateY(0);
}

/* Ligne 1 : Abidjan à 0.85s */
.section-horaires.is-visible .horaires-card:nth-child(1) {
  transition-delay: 0.85s;
}

/* Ligne 2 : Abengourou à 1.15s */
.section-horaires.is-visible .horaires-card:nth-child(2) {
  transition-delay: 1.15s;
}

/* Ligne 3 : San Pedro à 1.45s */
.section-horaires.is-visible .horaires-card:nth-child(3) {
  transition-delay: 1.45s;
}

/* Ligne 4 : Gagnoa à 1.75s */
.section-horaires.is-visible .horaires-card:nth-child(4) {
  transition-delay: 1.75s;
}

/* Ligne 5 : Oumé à 2.05s */
.section-horaires.is-visible .horaires-card:nth-child(5) {
  transition-delay: 2.05s;
}

/* Ligne 6 : Divo à 2.35s */
.section-horaires.is-visible .horaires-card:nth-child(6) {
  transition-delay: 2.35s;
}

/* Ligne 7 : Bondoukou à 2.65s */
.section-horaires.is-visible .horaires-card:nth-child(7) {
  transition-delay: 2.65s;
}

/* 3. Note NB et bouton à 3.05s */
.section-horaires.is-visible .horaires-footer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 3.05s;
}

/* Une fois stabilisé (.is-settled), survol immédiat sans délai */
.section-horaires.is-settled .horaires-card {
  transition-delay: 0s !important;
}

/* Réinitialisation instantanée hors écran */
.section-horaires:not(.is-visible) .horaires-header-left,
.section-horaires:not(.is-visible) .horaires-header-right,
.section-horaires:not(.is-visible) .horaires-card,
.section-horaires:not(.is-visible) .horaires-footer {
  transition: none !important;
  opacity: 0;
}

.section-horaires:not(.is-visible) .horaires-card {
  transform: translateY(36px) !important;
}

.section-horaires:not(.is-visible) .horaires-header-left {
  transform: translateY(-16px) !important;
}

.section-horaires:not(.is-visible) .horaires-header-right {
  transform: translateY(-12px) !important;
}

.section-horaires:not(.is-visible) .horaires-footer {
  transform: translateY(14px) !important;
}


/* ==========================================================================
   PAGE 5 — Apparition des informations sur les colis
   ========================================================================== */
.services-eyebrow,
.services-title {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-title {
  transition-delay: 0.18s;
}

.services-image {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.services-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.18s;
}

.services-footer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.48s;
}

.section-services.is-visible .services-eyebrow,
.section-services.is-visible .services-title,
.section-services.is-visible .services-image,
.section-services.is-visible .services-card,
.section-services.is-visible .services-footer {
  opacity: 1;
  transform: translate(0, 0);
}

.section-services:not(.is-visible) .services-eyebrow,
.section-services:not(.is-visible) .services-title,
.section-services:not(.is-visible) .services-image,
.section-services:not(.is-visible) .services-card,
.section-services:not(.is-visible) .services-footer {
  transition: none !important;
}


/* ==========================================================================
   PAGE 6 — Apparition de la carte et diaporama de la gare
   ========================================================================== */
.gare-header {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.gare-map {
  opacity: 0;
  transform: translateX(-18px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.18s;
}

.gare-gallery {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.38s;
}

.gare-footer {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 0.75s;
}

.section-gare.is-visible .gare-header,
.section-gare.is-visible .gare-map,
.section-gare.is-visible .gare-gallery,
.section-gare.is-visible .gare-footer {
  opacity: 1;
  transform: translate(0, 0);
}

.section-gare:not(.is-visible) .gare-header,
.section-gare:not(.is-visible) .gare-map,
.section-gare:not(.is-visible) .gare-gallery,
.section-gare:not(.is-visible) .gare-footer {
  transition: none !important;
}

/* --------------------------------------------------------------------------
   PAGE 7 — Apparition cohérente des informations de contact
   -------------------------------------------------------------------------- */
.contact-header {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-card {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-card:nth-child(2) {
  transition-delay: 0.18s;
}

.section-contact.is-visible .contact-header,
.section-contact.is-visible .contact-card {
  opacity: 1;
  transform: translateY(0);
}

.section-contact:not(.is-visible) .contact-header,
.section-contact:not(.is-visible) .contact-card {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .section-services .services-eyebrow,
  .section-services .services-title,
  .section-services .services-image,
  .section-services .services-card,
  .section-services .services-footer,
  .section-gare .gare-header,
  .section-gare .gare-map,
  .section-gare .gare-gallery,
  .section-gare .gare-footer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .section-contact .contact-header,
  .section-contact .contact-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .section-gare .gare-photo:not(.is-active) {
    opacity: 0 !important;
  }
}