/* Animations */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.animate-scroll-left {
    animation: scroll-left 80s linear infinite;
}

.animate-scroll-left-fast {
    animation: scroll-left 60s linear infinite;
}

.animate-scroll-right {
    animation: scroll-right 80s linear infinite;
}

@keyframes levitate {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(var(--tw-rotate));
    }
    50% {
        transform: translateY(-8px) rotate(var(--tw-rotate));
    }
}

.animate-float {
    animation: float 12s ease-in-out infinite;
}

@keyframes texture-pan {
    0% {
        transform: translate3d(0%, 0%, 0px);
    }
    100% {
        transform: translate3d(-10%, -30%, 0px);
    }
}

.texture-pan {
    animation: texture-pan 12s ease-in-out infinite alternate;
    will-change: transform;
}

.texture-overlay {
    background-image: url('/images/site/texture.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.05;
}

/* Custom Scrollbar for Services */
.service-cards::-webkit-scrollbar {
    height: 8px;
}

.service-cards::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}

.service-cards::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.service-cards::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Reveal elements */
.reveal,
.reveal-title {
    visibility: hidden;
}

.gps-hero {
    background-color: #1e293b;
}

/* Section « C'est magique » — écriture manuscrite lettre par lettre (Cookie) */
.magic-text-handwrite {
    font-family: 'Cookie', cursive;
    font-size: clamp(3.25rem, 9vw, 5.75rem);
    line-height: 1.05;
    color: #2563eb;
    min-height: 1.2em;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.magic-text-handwrite.is-active {
    opacity: 1;
    visibility: visible;
}

.magic-text__chars {
    display: inline-block;
    white-space: pre;
}

.magic-text__char {
    display: inline-block;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateY(0.18em) rotate(-3deg);
    transform-origin: left bottom;
}

.magic-text__char--space {
    width: 0.28em;
}

.magic-text-handwrite.is-writing .magic-text__char {
    animation: magic-char-write 0.52s cubic-bezier(0.33, 1, 0.45, 1) forwards;
    animation-delay: calc(var(--char-index) * 0.075s);
}

.magic-text-handwrite.is-done .magic-text__char {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0) rotate(0deg);
}

@keyframes magic-char-write {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: translateY(0.22em) rotate(-4deg);
    }
    35% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translateY(0) rotate(0deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .magic-text-handwrite.is-writing .magic-text__char {
        animation: none;
    }

    .magic-text-handwrite.is-done .magic-text__char,
    .magic-text-handwrite.is-writing .magic-text__char {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

@keyframes french-flag-wave {
    0%, 100% {
        transform: rotate(-1deg) translateY(0);
    }
    50% {
        transform: rotate(1deg) translateY(-3px);
    }
}

.french-flag.is-visible {
    animation: french-flag-wave 4s ease-in-out infinite;
    transform-origin: top center;
}