/* anim.css — couche d'animation des pages sombres de Dropfleet. * * 100 % CSS, auto-hébergé (compatible CSP : aucun script). Lié sur l'accueil * FR/EN et sur la page de téléchargement /d/ (où seul le fond aurora s'applique, * jamais de JS). * * Principes : * - on n'anime que `transform` et `opacity` (couche compositeur, GPU) ; * - aucune animation continue de `filter`, `box-shadow` ou `width` ; * - tout est neutralisé sous `prefers-reduced-motion: reduce` ; * - les effets de survol sont réservés aux pointeurs fins (pas le tactile) ; * - le scroll-reveal est piloté par reveal.js et n'est actif que si la classe * `js-reveal` est posée sur → contenu toujours visible sans JS. */ /* ============================================================ * 1. Fond aurora — deux couches de halos qui dérivent (zéro markup) * ============================================================ */ body::before, body::after { content: ""; position: fixed; inset: -25%; /* débordement : les translations ne révèlent pas les bords */ z-index: -1; /* derrière le contenu, au-dessus du fond du */ pointer-events: none; background-repeat: no-repeat; will-change: transform; } body::before { background-image: radial-gradient(38% 38% at 22% 26%, rgba(108, 123, 255, 0.50), transparent 70%), radial-gradient(32% 34% at 80% 16%, rgba(0, 212, 184, 0.34), transparent 72%), radial-gradient(42% 42% at 60% 88%, rgba(124, 99, 255, 0.34), transparent 72%); filter: blur(45px); animation: auroraDrift 26s ease-in-out infinite alternate; } body::after { background-image: radial-gradient(34% 34% at 82% 68%, rgba(108, 123, 255, 0.32), transparent 72%), radial-gradient(30% 30% at 12% 76%, rgba(0, 212, 184, 0.26), transparent 74%); filter: blur(55px); opacity: 0.9; animation: auroraDrift2 34s ease-in-out infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 50% { transform: translate3d(5%, 3%, 0) scale(1.12); } 100% { transform: translate3d(2%, -4%, 0) scale(1.06); } } @keyframes auroraDrift2 { 0% { transform: translate3d(3%, 4%, 0) scale(1.08); } 50% { transform: translate3d(-5%, -3%, 0) scale(1); } 100% { transform: translate3d(-2%, 5%, 0) scale(1.1); } } /* ============================================================ * 2. Hero — apparition au chargement + sheen sur le titre * ============================================================ */ .hero { animation: fadeUp 0.7s ease both; } #uploader { animation: fadeUp 0.7s ease 0.12s both; } .hero h1 { background: linear-gradient( 100deg, var(--ink) 0%, var(--accent) 42%, var(--accent-2) 64%, var(--ink) 100% ); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: heroShimmer 7s ease-in-out 0.7s infinite; } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes heroShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ============================================================ * 3. Apparition au défilement (base CSS — activée par reveal.js) * ============================================================ */ .js-reveal .reveal-target { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); } .js-reveal .reveal-target.in { opacity: 1; transform: none; } /* ============================================================ * 4. Micro-interactions au survol (pointeurs fins uniquement) * ============================================================ */ @media (hover: hover) and (pointer: fine) { .feature { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .feature:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 16px 40px rgba(108, 123, 255, 0.20); } .primary { transition: box-shadow 0.25s ease, transform 0.12s ease; } .primary:hover:not(:disabled) { box-shadow: 0 10px 32px rgba(108, 123, 255, 0.45); } .primary:active:not(:disabled) { transform: translateY(1px); } .chip { transition: border-color 0.15s ease, background 0.2s ease, transform 0.12s ease; } .chip:hover { background: rgba(108, 123, 255, 0.10); } .chip:active { transform: translateY(1px); } .faq-item { transition: border-color 0.2s ease, background 0.2s ease; } .faq-item:hover { border-color: var(--accent); } .step-n { transition: transform 0.25s ease, box-shadow 0.25s ease; } .step:hover .step-n { transform: scale(1.08); box-shadow: 0 6px 18px rgba(0, 212, 184, 0.35); } } /* Lueur d'accent quand on glisse un fichier sur la zone de dépôt */ .dropzone.drag { box-shadow: 0 0 0 3px rgba(108, 123, 255, 0.18); } /* ============================================================ * 5. Finitions upload / résultat * ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* reflet qui balaie la barre de progression pendant l'envoi */ .bar-fill { position: relative; overflow: hidden; } .bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-100%); animation: barSheen 1.4s ease-in-out infinite; } @keyframes barSheen { to { transform: translateX(100%); } } /* « pop » de la carte résultat + du titre quand le transfert est prêt */ #result.is-popping { animation: resultPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; } #result.is-popping h2 { display: inline-block; transform-origin: left center; animation: checkPop 0.6s 0.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes resultPop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } @keyframes checkPop { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } } } /* ============================================================ * 6. Format mobile — fond allégé pour économiser GPU / batterie * ============================================================ */ @media (max-width: 640px) { body::after { display: none; } /* une seule couche aurora */ body::before { filter: blur(32px); animation-duration: 32s; } .js-reveal .reveal-target { transform: translateY(14px); } } /* ============================================================ * 7. Respect de prefers-reduced-motion — tout devient statique * ============================================================ */ @media (prefers-reduced-motion: reduce) { body::before, body::after, .hero, #uploader, .hero h1 { animation: none !important; } .js-reveal .reveal-target { opacity: 1 !important; transform: none !important; transition: none !important; } #result.is-popping, #result.is-popping h2 { animation: none !important; } }