/* ===================================================================== MI12 FUN CENTER — motion.css Tout ce qui bouge. Séparé du reste pour qu'on puisse juger le site sans mouvement en commentant une seule ligne dans le . RÈGLE DE TENUE -------------- Le site est très animé (demande client), mais le mouvement obéit à trois principes, sinon ça devient une foire : 1. rien ne bouge tant que ce n'est pas visible ; 2. une seule courbe d'accélération sur tout le site ; 3. le mouvement va dans le sens de la lecture — de bas en haut pour les apparitions, de droite à gauche pour la vitesse — jamais au hasard. `prefers-reduced-motion` neutralise tout : voir variables.css. ===================================================================== */ /* ==================================================================== */ /* 1. RÉVÉLATION AU DÉFILEMENT */ /* ==================================================================== */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); transition-delay: var(--d, 0ms); } [data-reveal="left"] { transform: translateX(-34px); } [data-reveal="right"] { transform: translateX(34px); } [data-reveal="skew"] { transform: translateY(26px) skewX(-6deg); } [data-reveal="zoom"] { transform: scale(0.94); } [data-reveal].is-in { opacity: 1; transform: none; } /* ==================================================================== */ /* 2. TITRE CINÉTIQUE */ /* js/motion.js découpe le titre en lignes ; chaque ligne monte */ /* derrière un masque, décalée. C'est l'effet « générique de film » */ /* et il ne coûte qu'un transform. */ /* ==================================================================== */ .kin { display: block; } /* Le masque doit laisser passer les ACCENTS. Avec un interlignage à 0,84 et des capitales accentuées (SOIRÉE, ACTIVITÉS), un `overflow:hidden` nu rogne l'accent aigu et le mot devient faux. On ouvre le masque vers le haut, puis on récupère la place par une marge négative pour que l'interlignage reste celui voulu. */ .kin__l { display: block; overflow: hidden; padding-top: 0.16em; margin-top: -0.16em; } .kin__i { display: block; transform: translateY(105%) skewX(6deg); transition: transform 0.9s var(--ease-out); transition-delay: var(--d, 0ms); } .kin.is-in .kin__i { transform: none; } /* ==================================================================== */ /* 3. FOND DU HÉROS : faisceaux + grille */ /* Trois plans qui dérivent à des vitesses différentes. Aucun n'est */ /* net : c'est une ambiance de salle, pas un motif à regarder. */ /* ==================================================================== */ .beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .beams__grid { position: absolute; inset: -30%; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 64px 64px; transform: skewX(var(--skew)); animation: gridPan 26s linear infinite; } @keyframes gridPan { to { transform: skewX(var(--skew)) translate(64px, 64px); } } /* Les faisceaux : de longues bandes penchées qui traversent lentement. Le flou de 30 px est remplacé par un dégradé HORIZONTAL : c'est ce que le flou produisait — des bords fondus — mais obtenu par la couleur, et non par une passe de post-traitement sur 26vw de large à chaque image. */ .beams__b { position: absolute; top: -30%; bottom: -30%; width: 26vw; transform: skewX(var(--skew)); background: linear-gradient(90deg, transparent, var(--accent-glow) 42%, var(--accent-glow) 58%, transparent), linear-gradient(180deg, transparent, rgba(228, 3, 46, 0.16) 45%, transparent); background-blend-mode: multiply; opacity: 0; animation: sweep 13s var(--ease-out) infinite; } .beams__b:nth-child(2) { left: -20%; animation-delay: 0s; } .beams__b:nth-child(3) { left: 18%; animation-delay: 4.4s; width: 16vw; } .beams__b:nth-child(4) { left: 56%; animation-delay: 8.8s; width: 22vw; } @keyframes sweep { 0% { opacity: 0; transform: skewX(var(--skew)) translateX(-14vw); } 18% { opacity: 0.9; } 70% { opacity: 0.5; } 100% { opacity: 0; transform: skewX(var(--skew)) translateX(60vw); } } /* Halo sourd, immobile, qui empêche le noir d'être plat. Sans flou : les arrêts du dégradé sont étalés jusqu'à 100 %, ce qui donne la même diffusion douce que le blur de 90 px. */ .beams__halo { position: absolute; width: 74vw; height: 74vw; right: -26vw; top: -30vw; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(228, 3, 46, 0.22) 0%, rgba(228, 3, 46, 0.11) 40%, rgba(228, 3, 46, 0.04) 70%, transparent 100%); animation: breathe 9s ease-in-out infinite; } @keyframes breathe { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } } /* ==================================================================== */ /* 4. BANDEAU DÉFILANT */ /* Deux copies du contenu qui se suivent : la boucle est invisible. */ /* ==================================================================== */ .marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); background: var(--void); padding-block: 18px; transform: skewY(-1.2deg); margin-block: -1px; } .marquee__row { display: flex; width: max-content; animation: slide 34s linear infinite; } .marquee:hover .marquee__row { animation-play-state: paused; } .marquee__g { display: flex; align-items: center; flex: none; } .marquee__i { display: inline-flex; align-items: center; gap: 22px; padding-inline: 22px; font-family: var(--font-display); font-stretch: var(--w-jersey); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 4.4vw, 3.1rem); color: transparent; -webkit-text-stroke: 1.4px var(--line-strong); white-space: nowrap; } .marquee__i:nth-child(even) { color: var(--text); -webkit-text-stroke: 0; } .marquee__i i { font-style: normal; color: var(--accent-ink); -webkit-text-stroke: 0; } @keyframes slide { to { transform: translateX(-50%); } } /* ==================================================================== */ /* 5. COMPTEURS */ /* ==================================================================== */ .count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ==================================================================== */ /* 6. SURVOL AIMANTÉ */ /* js/motion.js pose --mx / --my. Le décalage est volontairement */ /* petit : au-delà de 6 px le bouton fuit le curseur. */ /* ==================================================================== */ .magnet { transition: transform var(--t-fast); } .magnet:hover { transform: translate(var(--mx, 0), var(--my, 0)); } /* ==================================================================== */ /* 7. PARALLAXE */ /* Une variable posée par le JS, appliquée en CSS : le navigateur */ /* compose, le JS ne touche jamais au layout. */ /* ==================================================================== */ [data-para] { will-change: transform; transform: translate3d(0, var(--py, 0), 0); } /* ==================================================================== */ /* 8. CARTES QUI RÉAGISSENT */ /* ==================================================================== */ .lift { transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } /* Le trait rouge qui se déploie sous un titre de section. */ .rule-grow { position: relative; padding-bottom: 18px; } .rule-grow::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--accent); transform: skewX(var(--skew)); transition: width 0.8s var(--ease-out) 0.15s; } .rule-grow.is-in::after { width: 96px; } /* ==================================================================== */ /* 9. PASTILLE VIVANTE (états, « ouvert maintenant ») */ /* ==================================================================== */ .pulse { position: relative; } .pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid currentColor; animation: ping 2.1s var(--ease-out) infinite; } @keyframes ping { 0% { transform: scale(0.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }