/* --- Keyframes --- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes clipReveal {
    0% {
        opacity: 1;
        clip-path: inset(0 100% 0 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}

/* État initial (avant .animate) */
.main-nav a,
.hero-right h1,
.hero-right p,
.signature, .niche{
    opacity: 0;
    will-change: opacity, transform, clip-path;
}

/* ------- SEQUENCE ------- */
/* 1) Menu : arrive du bas vers le haut, en cascade */
body.animate .main-nav a {
    animation: fadeUp 0.5s ease forwards;
}

body.animate .main-nav a:nth-child(1) {
    animation-delay: 0.10s;
}

body.animate .main-nav a:nth-child(2) {
    animation-delay: 0.25s;
}

body.animate .main-nav a:nth-child(3) {
    animation-delay: 0.40s;
}

/* 2) H1 puis paragraphe */
body.animate .hero-right h1 {
    animation: fadeUp 0.6s ease forwards;
    animation-delay: 0.5s;
}

body.animate .hero-right p {
    animation: fadeUp 0.6s ease forwards;
    animation-delay: 0.75s;
}


body.animate .signature {
    animation: clipReveal 0.7s ease forwards;
    animation-delay: 0.9s;
}

body.animate .niche {
    animation: fadeUp 0.7s ease forwards;
    animation-delay: 0.9s;
}

/* Accessibilité : réduit les animations si demandé par l’utilisateur */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    .main-nav a,
    .hero-right h1,
    .hero-right p,
    .signature {
        opacity: 1;
        transform: none;
        clip-path: none;
    }
}


/* ANIMATION BLOC PORTFOLIO */

.anim-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

.anim-title span.visible {
    animation: fadeUpWord 0.5s ease forwards;
}

@keyframes fadeUpWord {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    opacity: 0;
    transform: translateY(24px) scale(1);
    transition: opacity .6s ease, transform .6s ease;
}

.card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.card.visible:hover {
    transform: translateY(0) scale(1.04);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
@media (prefers-reduced-motion: reduce) {
    .cards-grid .card {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Apparition sans utiliser transform */
.back-to-top {
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity .3s ease, bottom .3s ease;
}

.back-to-top.show {
    opacity: 1;
    pointer-events: auto;
}

/* état initial */
.contact-card,
.form-card,
.form-card label,
.form-card .btn-submit,
.contact-decor {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

/* quand la section est visible */
.contact-section.in-view .contact-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .05s;
}

.contact-section.in-view .form-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: .20s;
}

/* Stagger des champs du formulaire */
.contact-section.in-view .form-card label:nth-of-type(1) {
    transition-delay: .30s;
    opacity: 1;
    transform: translateY(0);
}

.contact-section.in-view .form-card label:nth-of-type(2) {
    transition-delay: .38s;
    opacity: 1;
    transform: translateY(0);
}

.contact-section.in-view .form-card label:nth-of-type(3) {
    transition-delay: .46s;
    opacity: 1;
    transform: translateY(0);
}

.contact-section.in-view .form-card label:nth-of-type(4) {
    transition-delay: .54s;
    opacity: 1;
    transform: translateY(0);
}

.contact-section.in-view .form-card label:nth-of-type(5) {
    transition-delay: .62s;
    opacity: 1;
    transform: translateY(0);
}

.contact-section.in-view .form-card .btn-submit {
    transition-delay: .75s;
    opacity: 1;
    transform: translateY(0);
}

/* petit slide latéral/fondu du décor */
.contact-decor {
    transform: translate(14px, 14px);
}

.contact-section.in-view .contact-decor {
    opacity: 1;
    transform: translate(0, 0);
    transition-delay: .85s;
}

/* accessibilité */
@media (prefers-reduced-motion: reduce) {

    .contact-card,
    .form-card,
    .form-card label,
    .form-card .btn-submit,
    .contact-decor {
        transition: none;
        opacity: 1;
        transform: none;
    }
}