/* MHM Construct — intro « le logo qui se construit » + hero vivant (titre mot par mot, parallaxe, lames et poussière dorée, bande de logos partenaires en verre au bas du bandeau). À charger APRÈS /assets/eco/css/site.css. Tout ce qui est caché ici l'est par une classe posée par intro.js (ou par le rideau html.mi-pre, qui se retire tout seul) : sans JS ou en mouvement réduit, le site reste identique. Transform / opacity uniquement. Préfixe : mi-. CHRONOLOGIE de l'intro (ms à partir de l'écran sombre ; le compteur démarre quand le logo est chargé, 350 ms au plus tard) : 100–460 le toit se trace depuis la gauche jusqu'au faîte (trait masque, 360 ms) 420–580 le petit trait vertical du faîte descend 520–800 le pan droit du toit se trace 380–860 le H doré monte depuis la ligne de base des M 400–1300 halo doré derrière le logo 720–1130 M de gauche ; 780–1190 M de droite (glissent vers leur place) 920–1300 « CONSTRUCT » se déploie depuis le centre 1450 le rideau s'ouvre en deux (les mots du titre démarrent), fin à 1900 ms 2600 garde-fou CSS : rideau et overlay disparaissent seuls si le JS est mort */ :root{--mi-bg:radial-gradient(ellipse at 50% 46%,#1d1a13 0,#0d0d0d 56%,#070707 100%);--mi-or:#bea677;--mi-ease:cubic-bezier(.2,.8,.2,1)} /* ---------- 0. Rideau sombre dès le premier affichage (évite le flash du hero avant l'intro) ---------- Posé par la classe mi-pre écrite à la main sur de l'accueil. Trois sorties de secours : intro.js retire la classe, l'animation le fait disparaître seule à 2,6 s, et il n'existe pas du tout sans JS ni en mouvement réduit. */ @media (prefers-reduced-motion:no-preference){ html.mi-pre::after{content:'';position:fixed;inset:0;z-index:99998;background:var(--mi-bg);pointer-events:none;animation:miCover .01s linear 2.6s forwards} } @media (scripting:none){html.mi-pre::after{display:none}} @keyframes miCover{to{opacity:0;visibility:hidden}} /* ---------- 1. INTRO : le logo se construit ---------- */ #mi-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;contain:strict;animation:miGone .01s linear 2.6s forwards} @keyframes miGone{to{opacity:0;visibility:hidden;pointer-events:none}} .mi-half{position:absolute;top:0;bottom:0;width:50%;background:var(--mi-bg);background-size:200% 100%;will-change:transform;transition:transform .45s cubic-bezier(.7,0,.2,1)} .mi-hl{left:0;background-position:0 0} .mi-hr{right:0;background-position:100% 0} .mi-open .mi-hl{transform:translateX(-101%)} .mi-open .mi-hr{transform:translateX(101%)} .mi-fast .mi-half{transition-duration:.3s} /* liseré doré à la jointure, visible seulement pendant l'ouverture */ .mi-half::after{content:'';position:absolute;top:0;bottom:0;width:2px;background:var(--mi-or);box-shadow:0 0 14px 2px rgba(190,166,119,.7);opacity:0;transition:opacity .15s} .mi-hl::after{right:0} .mi-hr::after{left:0} .mi-open .mi-half::after{opacity:1} .mi-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .22s ease,transform .45s ease} .mi-open .mi-scene{opacity:0;transform:scale(1.05)} .mi-glow{position:absolute;left:50%;top:50%;width:min(76vmin,660px);aspect-ratio:1;margin:calc(min(76vmin,660px) / -2) 0 0 calc(min(76vmin,660px) / -2);border-radius:50%;background:radial-gradient(circle,rgba(193,147,90,.32) 0,rgba(193,147,90,.1) 42%,transparent 68%);opacity:0;pointer-events:none} .mi-logo{position:relative;display:block;width:clamp(280px,56vw,560px);height:auto;aspect-ratio:1433/709;overflow:visible} /* état de départ : tout est caché ; les animations ne partent qu'avec .mi-go (logo chargé) */ .mi-t{fill:none;stroke:#fff;stroke-dasharray:1;stroke-dashoffset:1} .mi-h{opacity:0;transform:translateY(640px)} .mi-mg,.mi-md{opacity:0} .mi-cw{transform-box:fill-box;transform-origin:50% 50%;transform:scaleX(0)} .mi-go .mi-t1{animation:miDraw .36s cubic-bezier(.55,0,.25,1) .1s forwards} .mi-go .mi-t2{animation:miDraw .16s linear .42s forwards} .mi-go .mi-t3{animation:miDraw .28s cubic-bezier(.3,0,.3,1) .52s forwards} .mi-go .mi-h{animation:miRise .48s cubic-bezier(.2,.9,.25,1) .38s forwards} .mi-go .mi-mg{animation:miInL .41s var(--mi-ease) .72s forwards} .mi-go .mi-md{animation:miInR .41s var(--mi-ease) .78s forwards} .mi-go .mi-cw{animation:miWipe .38s cubic-bezier(.3,0,.2,1) .92s forwards} .mi-go .mi-glow{animation:miGlow .9s ease-out .4s forwards} @keyframes miDraw{to{stroke-dashoffset:0}} @keyframes miRise{0%{opacity:0;transform:translateY(640px)}8%{opacity:1}100%{opacity:1;transform:none}} @keyframes miInL{from{opacity:0;transform:translateX(-70px)}to{opacity:1;transform:none}} @keyframes miInR{from{opacity:0;transform:translateX(70px)}to{opacity:1;transform:none}} @keyframes miWipe{to{transform:scaleX(1)}} @keyframes miGlow{0%{opacity:0;transform:scale(.7)}45%{opacity:1}100%{opacity:.55;transform:scale(1)}} /* ---------- 2. HERO : titre mot par mot, parallaxe, lames et poussière dorée ---------- */ .mi-w{display:inline-block} .mi-w>i{display:inline-block;font-style:normal;transition:opacity .7s var(--mi-ease),transform .85s var(--mi-ease),filter .7s ease;transition-delay:calc(var(--i,0)*70ms)} /* garde-fou CSS : même si le JS plante, les mots se montrent seuls au bout de 3,6 s */ html.mi-hide .mi-w>i{opacity:0;transform:translateY(.55em);filter:blur(6px);animation:miShow .01s linear 3.6s forwards} @keyframes miShow{to{opacity:1;transform:none;filter:none}} .mi-par{scale:1.06;will-change:translate} .mi-parts{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block} /* photos du hero sous 768 px : le style inline impose background-position:center, d'où !important. 65 % = brief (cadrage vers la droite) ; la façade de la photo actuelle (16:9) occupe la gauche et le centre, le ciel et l'arbre sont à droite : on garde la façade dans le cadre (voir captures-intro). Le texte prend toute la largeur : le dégradé latéral du thème devient un voile uniforme. */ @media (max-width:767px){ [data-hero-slide]{background-position:65% center!important} .mi-voile{background:linear-gradient(180deg,rgba(var(--overlay-rgb),.5) 0%,rgba(var(--overlay-rgb),.66) 100%)!important} } /* ---------- 3. HERO : logos partenaires, bande de verre sombre au bas du bandeau ---------- Le bloc défilant (.partenaires-piste, thème eco) est conservé tel quel ; on ne fait que l'habiller. Les logos sont sur fond blanc opaque : chacun garde sa plaquette claire arrondie (recadrée sur la hauteur utile du logo). Chaque piste fait au moins la largeur de l'écran pour que la boucle ne montre jamais de trou. */ .mi-marques{position:relative;z-index:2;width:100%;padding:16px 0;background:rgba(13,13,13,.55);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border-top:1px solid rgba(255,255,255,.14)} .mi-marques .partenaires-track{gap:0;min-width:100vw;justify-content:space-around;animation-duration:44s} .mi-marques .partenaires-track>div{background:#fff;border:0;border-radius:14px;overflow:hidden;padding:0;min-height:0;width:200px;height:80px;margin:0 16px;box-shadow:0 8px 22px -10px rgba(0,0,0,.7)} .mi-marques .partenaires-track img{display:block;width:100%;height:100%;max-height:none;object-fit:cover} @media (max-width:640px){ .mi-marques{padding:12px 0} .mi-marques .partenaires-track{animation-duration:28s} .mi-marques .partenaires-track>div{width:150px;height:60px;margin:0 8px;border-radius:12px} } /* ---------- Mouvement réduit : tout est coupé ---------- */ @media (prefers-reduced-motion:reduce){ html.mi-pre::after{display:none!important} #mi-intro{display:none!important} .mi-w>i{transition:none!important} html.mi-hide .mi-w>i{opacity:1!important;transform:none!important;filter:none!important;animation:none!important} .mi-parts{display:none!important} .mi-par{scale:1;translate:none!important} .mi-marques .partenaires-piste{display:block;-webkit-mask-image:none;mask-image:none} .mi-marques .partenaires-track{min-width:0;flex-wrap:wrap;justify-content:center;row-gap:10px;animation:none} .mi-marques .partenaires-track[aria-hidden="true"]{display:none} }