/* Animations CSS Compl�tes pour Maison Mayaki */



/* Keyframes Principales */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(30px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeIn {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}



@keyframes slideInLeft {

    from {

        opacity: 0;

        transform: translateX(-50px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInRight {

    from {

        opacity: 0;

        transform: translateX(50px);

    }



    to {

        opacity: 1;

        transform: translateX(0);

    }

}



@keyframes slideInUp {

    from {

        opacity: 0;

        transform: translateY(50px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes slideInDown {

    from {

        opacity: 0;

        transform: translateY(-50px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(0.8);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

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

    }



    40% {

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

    }



    60% {

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

    }

}



@keyframes pulse {

    0% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.05);

    }



    100% {

        transform: scale(1);

    }

}



@keyframes float {

    0%, 100% {

        transform: translateY(0);

    }



    50% {

        transform: translateY(-10px);

    }

}



@keyframes typewriter {

    from {

        width: 0;

    }



    to {

        width: 100%;

    }

}



@keyframes blink {

    0%, 100% {

        opacity: 1;

    }



    50% {

        opacity: 0;

    }

}



@keyframes gradientShift {

    0% {

        background-position: 0% 50%;

    }



    50% {

        background-position: 100% 50%;

    }



    100% {

        background-position: 0% 50%;

    }

}



@keyframes morph {

    0% {

        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;

    }



    50% {

        border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;

    }



    100% {

        border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;

    }

}



/* Classes d'animation de base */

.fade-in {

    opacity: 0;

    transform: translateY(30px);

    transition: all 0.6s ease;

}



    .fade-in.visible {

        opacity: 1;

        transform: translateY(0);

    }



.slide-in-left {

    opacity: 0;

    transform: translateX(-50px);

    transition: all 0.6s ease;

}



    .slide-in-left.visible {

        opacity: 1;

        transform: translateX(0);

    }



.slide-in-right {

    opacity: 0;

    transform: translateX(50px);

    transition: all 0.6s ease;

}



    .slide-in-right.visible {

        opacity: 1;

        transform: translateX(0);

    }



.slide-in-up {

    opacity: 0;

    transform: translateY(50px);

    transition: all 0.6s ease;

}



    .slide-in-up.visible {

        opacity: 1;

        transform: translateY(0);

    }



.zoom-in {

    opacity: 0;

    transform: scale(0.8);

    transition: all 0.6s ease;

}



    .zoom-in.visible {

        opacity: 1;

        transform: scale(1);

    }



/* Animations sp�cifiques aux sections */

.hero-title {

    animation: fadeUp 1s ease-out;

}



.hero-subtitle {

    animation: fadeUp 1s ease-out 0.2s both;

}



.hero-description {

    animation: fadeUp 1s ease-out 0.4s both;

}



.hero-buttons {

    animation: fadeUp 1s ease-out 0.6s both;

}



.scroll-indicator {

    animation: bounce 2s infinite;

}



/* Animations au hover */

.presentation-card,

.service-card,

.suite-card {

    transition: all 0.3s ease;

}



    .presentation-card:hover,

    .service-card:hover,

    .suite-card:hover {

        transform: translateY(-10px);

    }



.btn {

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



    .btn::before {

        content: '';

        position: absolute;

        top: 0;

        left: -100%;

        width: 100%;

        height: 100%;

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

        transition: left 0.5s;

    }



    .btn:hover::before {

        left: 100%;

    }



.nav-link {

    position: relative;

    overflow: hidden;

}



    .nav-link::before {

        content: '';

        position: absolute;

        bottom: 0;

        left: -100%;

        width: 100%;

        height: 2px;

        background: var(--dor�);

        transition: left 0.3s ease;

    }



    .nav-link:hover::before {

        left: 0;

    }



/* Animations de loading */

.loading-dots {

    display: inline-flex;

    gap: 4px;

}



    .loading-dots span {

        width: 6px;

        height: 6px;

        border-radius: 50%;

        background: var(--dor�);

        animation: bounce 1.4s infinite ease-in-out;

    }



        .loading-dots span:nth-child(1) {

            animation-delay: -0.32s;

        }



        .loading-dots span:nth-child(2) {

            animation-delay: -0.16s;

        }



/* Animation de r�v�lation au scroll */

.reveal-on-scroll {

    opacity: 0;

    transform: translateY(50px);

    transition: all 0.8s ease;

}



    .reveal-on-scroll.revealed {

        opacity: 1;

        transform: translateY(0);

    }



/* Animation de fond gradient */

.gradient-bg {

    background: linear-gradient(-45deg, #f8f5f2, #ffffff, #f8f5f2, #ffffff);

    background-size: 400% 400%;

    animation: gradientShift 15s ease infinite;

}



/* Animation de flottement */

.float {

    animation: float 6s ease-in-out infinite;

}



.float-slow {

    animation: float 8s ease-in-out infinite;

}



.float-fast {

    animation: float 4s ease-in-out infinite;

}



/* Animation de pulse */

.pulse {

    animation: pulse 2s infinite;

}



.pulse-slow {

    animation: pulse 3s infinite;

}



/* Animation de morphing */

.morph {

    animation: morph 8s ease-in-out infinite;

}



/* Animation de typewriter */

.typewriter {

    overflow: hidden;

    border-right: 2px solid var(--dor�);

    white-space: nowrap;

    margin: 0 auto;

    animation: typewriter 3.5s steps(40, end), blink 0.75s step-end infinite;

}



/* Animations pour les ic�nes */

.icon-float {

    animation: float 4s ease-in-out infinite;

}



.icon-pulse {

    animation: pulse 2s infinite;

}



.icon-spin {

    animation: spin 2s linear infinite;

}



@keyframes spin {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}



/* Animations de stagger pour les listes */

.stagger-item {

    opacity: 0;

    transform: translateY(20px);

    transition: all 0.5s ease;

}



    .stagger-item.visible {

        opacity: 1;

        transform: translateY(0);

    }



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

        transition-delay: 0.1s;

    }



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

        transition-delay: 0.2s;

    }



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

        transition-delay: 0.3s;

    }



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

        transition-delay: 0.4s;

    }



    .stagger-item:nth-child(5) {

        transition-delay: 0.5s;

    }



/* Animation de curtain reveal */

.curtain-reveal {

    position: relative;

    overflow: hidden;

}



    .curtain-reveal::before {

        content: '';

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        height: 100%;

        background: var(--dor�);

        transform: translateX(-100%);

        animation: curtainReveal 1s ease-out forwards;

    }



@keyframes curtainReveal {

    to {

        transform: translateX(100%);

    }

}



/* Animation de scale-in */

.scale-in {

    animation: scaleIn 0.5s ease-out;

}



@keyframes scaleIn {

    from {

        opacity: 0;

        transform: scale(0.8);

    }



    to {

        opacity: 1;

        transform: scale(1);

    }

}



/* Animation de flip */

.flip-in {

    animation: flipIn 0.8s ease-out;

    transform-style: preserve-3d;

}



@keyframes flipIn {

    from {

        opacity: 0;

        transform: rotateY(90deg);

    }



    to {

        opacity: 1;

        transform: rotateY(0);

    }

}



/* Support reduced motion */

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

    * {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }



    .fade-in,

    .slide-in-left,

    .slide-in-right,

    .slide-in-up,

    .zoom-in {

        opacity: 1;

        transform: none;

        transition: none;

    }

}



/* Optimisations de performance */

.will-change {

    will-change: transform, opacity;

}



/* Animations pour les �tats de chargement */

.skeleton {

    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);

    background-size: 200% 100%;

    animation: loading 1.5s infinite;

}



@keyframes loading {

    0% {

        background-position: 200% 0;

    }



    100% {

        background-position: -200% 0;

    }

}



/* Animation de vibration pour les erreurs */

.shake {

    animation: shake 0.5s ease-in-out;

}



@keyframes shake {

    0%, 100% {

        transform: translateX(0);

    }



    25% {

        transform: translateX(-5px);

    }



    75% {

        transform: translateX(5px);

    }

}



/* Animation de fade out */

.fade-out {

    animation: fadeOut 0.5s ease-out forwards;

}



@keyframes fadeOut {

    to {

        opacity: 0;

        visibility: hidden;

    }

}



/* Animation de slide out */

.slide-out-left {

    animation: slideOutLeft 0.5s ease-out forwards;

}



@keyframes slideOutLeft {

    to {

        opacity: 0;

        transform: translateX(-50px);

    }

}



.slide-out-right {

    animation: slideOutRight 0.5s ease-out forwards;

}



@keyframes slideOutRight {

    to {

        opacity: 0;

        transform: translateX(50px);

    }

}