/* ============================================================================ QrEat — couche d'animations (Motion) Chargée après styles.css. Tout ce qui est ici ne sert que lorsque assets/js/animations.js a pris la main (classe .mot sur ) : sans JavaScript, ou avec « réduire les animations », la page reste celle de styles.css. ============================================================================ */ /* Barre de progression de lecture */ .mot-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--orange), var(--yellow)); box-shadow: 0 0 12px rgba(255, 107, 53, 0.6); pointer-events: none; } /* Intro de marque (première visite de la session) */ .mot-intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--ink); pointer-events: none; } .mot-intro-logo { font-family: 'Poppins', sans-serif; font-weight: 900; font-size: clamp(3rem, 12vw, 8rem); letter-spacing: -0.05em; color: var(--text); display: flex; } .mot-intro-logo span { display: inline-block; } .mot-intro-logo .dot { color: var(--orange); } .mot-intro-bar { position: absolute; bottom: 18%; left: 50%; width: 160px; height: 2px; margin-left: -80px; background: linear-gradient(90deg, var(--orange), var(--yellow)); transform-origin: 0 50%; transform: scaleX(0); } /* Découpage des titres : chaque mot glisse derrière un masque */ .mot-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; } .mot-mask > span { display: inline-block; will-change: transform; } /* Lettres du grand titre, retournées en 3D */ .mot .h-display { perspective: 900px; } /* Un mot découpé en lettres ne doit jamais se couper en fin de ligne. */ .mot .h-display .word { white-space: nowrap; } .mot-letter { display: inline-block; transform-origin: 50% 100%; will-change: transform, opacity, filter; } /* Halo qui suit la souris dans le héros */ .mot-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(520px circle at var(--sx, 70%) var(--sy, 30%), rgba(255, 107, 53, 0.16), transparent 60%); } .mot .hero-visual { transform-style: preserve-3d; will-change: transform; } /* Notification du téléphone qui change de service */ .mot-swap { display: inline-block; will-change: transform, opacity, filter; } /* Cartes : halo lumineux sous le curseur et inclinaison */ .mot .mode-card::after, .mot .bento-card::after, .mot .testi-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.35s var(--ease-out); background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 182, 39, 0.14), transparent 55%); z-index: 0; } .mot .mode-card:hover::after, .mot .bento-card:hover::after, .mot .testi-card:hover::after { opacity: 1; } .mot .modes-grid, .mot .testimonial-grid { perspective: 1400px; } /* Bande défilante des services */ .mot-marquee { position: relative; overflow: hidden; padding: 1.35rem 0; border-bottom: 1px solid var(--ink-border); background: linear-gradient(90deg, rgba(255, 107, 53, 0.06), rgba(255, 182, 39, 0.04), rgba(255, 107, 53, 0.06)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .mot-marquee-track { display: flex; width: max-content; gap: 3rem; will-change: transform; } .mot-marquee-track span { font-family: 'Poppins', sans-serif; font-weight: 800; font-size: clamp(1.1rem, 2.4vw, 1.6rem); letter-spacing: -0.02em; color: var(--text); white-space: nowrap; display: inline-flex; align-items: center; gap: 3rem; } .mot-marquee-track span::after { content: '✦'; color: var(--orange); font-size: 0.8em; } .mot-marquee-track span:nth-child(3n+2) { color: var(--orange); } .mot-marquee-track span:nth-child(3n) { color: var(--yellow); } /* Curseur : anneau qui suit la souris et grossit sur ce qui se clique */ .mot-cursor { position: fixed; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(255, 107, 53, 0.7); pointer-events: none; z-index: 250; mix-blend-mode: screen; opacity: 0; transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), margin 0.25s var(--ease-out), background 0.25s, opacity 0.3s; } .mot-cursor.actif { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255, 107, 53, 0.12); } /* Anneau lumineux qui tourne autour du bloc final */ .mot .cta-inner { isolation: isolate; } .mot-ring { position: absolute; inset: -2px; border-radius: inherit; z-index: -1; padding: 2px; background: conic-gradient(from var(--angle, 0deg), transparent 0deg, var(--yellow) 60deg, transparent 120deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } @media (pointer: coarse) { .mot-cursor { display: none; } } /* Bandeau des services en orange plein, texte noir chaud */ .mot-marquee { background: linear-gradient(90deg, #E85420, #FF6B35 50%, #FF7A3D); border-bottom: 0; -webkit-mask-image: none; mask-image: none; box-shadow: 0 18px 60px -20px rgba(232, 84, 32, 0.55); } .mot-marquee-track span, .mot-marquee-track span:nth-child(3n+2), .mot-marquee-track span:nth-child(3n) { color: #080706; text-transform: uppercase; } .mot-marquee-track span::after { content: '•'; color: rgba(8, 7, 6, 0.55); }