/* ============================================================ anim.css — couche d'animations "smooth" pour portfolio vanilla Direction : micro-motion discret, présence pas spectacle. Easing signature : cubic-bezier(.16, 1, .3, 1) ============================================================ */ :root { --anim-ease: cubic-bezier(.16, 1, .3, 1); --anim-dur: .75s; /* reveals au scroll : 0.6–0.8s */ --anim-shift: 16px; /* translateY d'entrée */ } /* --- État de départ des éléments à révéler ---------------- */ /* Appliqué seulement si JS est actif (classe posée sur ) */ .js-anim [data-reveal] { opacity: 0; transform: translateY(var(--anim-shift)); transition: opacity var(--anim-dur) var(--anim-ease), transform var(--anim-dur) var(--anim-ease); will-change: opacity, transform; } /* Variantes de direction d'entrée (optionnelles) */ .js-anim [data-reveal="left"] { transform: translateX(calc(var(--anim-shift) * -1.5)); } .js-anim [data-reveal="right"] { transform: translateX(calc(var(--anim-shift) * 1.5)); } .js-anim [data-reveal="scale"] { transform: scale(.96); } /* --- État révélé ------------------------------------------ */ .js-anim [data-reveal].is-in { opacity: 1; transform: none; } /* --- Stagger : délai par position dans une liste ---------- */ /* Pose data-stagger sur le conteneur ; les enfants [data-reveal] cascadent */ .js-anim [data-stagger] > [data-reveal] { transition-delay: calc(var(--i, 0) * 80ms); } /* --- Hero : cascade au chargement ------------------------- */ .js-anim [data-hero] > * { opacity: 0; transform: translateY(var(--anim-shift)); transition: opacity .7s var(--anim-ease), transform .7s var(--anim-ease); } .js-anim [data-hero].is-ready > * { opacity: 1; transform: none; } .js-anim [data-hero].is-ready > *:nth-child(1) { transition-delay: .05s; } .js-anim [data-hero].is-ready > *:nth-child(2) { transition-delay: .13s; } .js-anim [data-hero].is-ready > *:nth-child(3) { transition-delay: .21s; } .js-anim [data-hero].is-ready > *:nth-child(4) { transition-delay: .29s; } .js-anim [data-hero].is-ready > *:nth-child(5) { transition-delay: .37s; } /* --- Titre du hero : révélation mot par mot --------------- */ .js-anim .hero-word { display: inline-block; opacity: 0; transform: translateY(.9em); transition: opacity .7s var(--anim-ease), transform .7s var(--anim-ease); } .js-anim [data-hero].is-ready .hero-word { opacity: 1; transform: none; } /* --- Micro-interactions (au repos, pilotées CSS) ---------- */ /* Cartes : léger soulèvement, ombre à peine perceptible */ [data-lift] { transition: transform .3s var(--anim-ease), box-shadow .3s var(--anim-ease); } [data-lift]:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, .05); } /* Boutons : réponse physique à l'appui */ [data-press] { transition: transform .12s ease, background-color .25s ease; } [data-press]:active { transform: scale(.98); } /* --- Respect de prefers-reduced-motion -------------------- */ /* On garde l'opacité (douce), on coupe tout déplacement/scale */ @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal], .js-anim [data-hero] > *, .js-anim .hero-word { transform: none !important; transition-duration: .3s !important; } [data-lift]:hover { transform: none; } [data-press]:active { transform: none; } }