/* ==========================================================
   OUMARCO SARL
   ANIMATIONS
   ==========================================================

   Projet  : OUMARCO_SARL_V0.1
   Version : 0.1

   Direction :
   - animations élégantes
   - transitions lentes
   - aucun effet excessif
   - sensation de précision et de maîtrise
   ========================================================== */


/* ==========================================================
   01. APPARITION GÉNÉRALE
   ========================================================== */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================================
   02. APPARITION LENTE
   ========================================================== */

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}


/* ==========================================================
   03. GLISSEMENT HORIZONTAL
   ========================================================== */

@keyframes slideInLeft {

    from {

        opacity: 0;

        transform: translateX(-35px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}


/* ==========================================================
   04. LIGNE QUI SE DÉPLOIE
   ========================================================== */

@keyframes lineReveal {

    from {

        transform: scaleX(0);

        transform-origin: left;

    }

    to {

        transform: scaleX(1);

        transform-origin: left;

    }

}


/* ==========================================================
   05. ANIMATION HERO
   ========================================================== */

.hero-eyebrow {

    animation:
        slideInLeft 0.8s ease both;

}


.hero h1 {

    animation:
        fadeUp 1s ease 0.15s both;

}


.hero-description {

    animation:
        fadeUp 1s ease 0.3s both;

}


.hero-actions {

    animation:
        fadeUp 1s ease 0.45s both;

}


.hero-index {

    animation:
        fadeIn 1s ease 0.7s both;

}


.hero-scroll {

    animation:
        fadeIn 1.2s ease 1s both;

}


/* ==========================================================
   06. ANIMATION DES CHIFFRES
   ========================================================== */

.number-item {

    opacity: 0;

    animation:
        fadeUp 0.8s ease both;

}


.number-item:nth-child(1) {

    animation-delay: 0.1s;

}


.number-item:nth-child(2) {

    animation-delay: 0.2s;

}


.number-item:nth-child(3) {

    animation-delay: 0.3s;

}


.number-item:nth-child(4) {

    animation-delay: 0.4s;

}


/* ==========================================================
   07. SECTION INTRODUCTION
   ========================================================== */

.intro-title {

    animation:
        slideInLeft 0.9s ease both;

}


.intro-content {

    animation:
        fadeUp 0.9s ease 0.15s both;

}


/* ==========================================================
   08. EXPERTISES
   ========================================================== */

.expertise-item {

    position: relative;

    overflow: hidden;

}


.expertise-item::before {

    content: '';

    position: absolute;

    left: 0;

    top: 0;

    width: 2px;

    height: 100%;

    background: var(--color-orange);

    transform: scaleY(0);

    transform-origin: bottom;

    transition:
        transform 0.45s ease;

}


.expertise-item:hover::before {

    transform: scaleY(1);

    transform-origin: top;

}


/* ==========================================================
   09. CTA
   ========================================================== */

.closing-cta-content {

    animation:
        fadeUp 1s ease both;

}


/* ==========================================================
   10. LOGO
   ========================================================== */

.nav-logo {

    transition:
        opacity var(--transition-fast);

}


.nav-logo:hover {

    opacity: 0.78;

}


/* ==========================================================
   11. BOUTONS
   ========================================================== */

.btn {

    position: relative;

    overflow: hidden;

}


.btn::before {

    content: '';

    position: absolute;

    top: 0;

    left: -120%;

    width: 100%;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18),
            transparent
        );

    transition:
        left 0.6s ease;

}


.btn:hover::before {

    left: 120%;

}


/* ==========================================================
   12. LIENS
   ========================================================== */

.text-link span {

    display: inline-block;

    transition:
        transform var(--transition-fast);

}


.text-link:hover span {

    transform:
        translateX(5px);

}


/* ==========================================================
   13. SCROLL LINE
   ========================================================== */

@keyframes scrollLine {

    0% {

        transform:
            scaleX(0);

        transform-origin: left;

    }

    50% {

        transform:
            scaleX(1);

        transform-origin: left;

    }

    51% {

        transform-origin: right;

    }

    100% {

        transform:
            scaleX(0);

        transform-origin: right;

    }

}


.scroll-line {

    animation:
        scrollLine 2.5s ease-in-out infinite;

}


/* ==========================================================
   14. DROPDOWN
   ========================================================== */

.dropdown-item {

    position: relative;

}


.dropdown-item::after {

    content: '↗';

    position: absolute;

    right: 18px;

    top: 50%;

    transform:
        translateY(-50%)
        translateX(-5px);

    color: var(--color-orange);

    opacity: 0;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);

}


.dropdown-item:hover::after {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(0);

}


/* ==========================================================
   15. ACCESSIBILITÉ
   ========================================================== */

/*
   Certains utilisateurs préfèrent réduire les animations.
   Nous respectons leur préférence système.
*/

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;

    }

}


/* ==========================================================
   FIN DES ANIMATIONS
   ========================================================== */