/* VIDE MAISON CAROLO — intro « la clé qui tourne » + hero vivant (préfixe vi-). À charger APRÈS /assets/css/site.css. Accueil seulement. Mécanique reprise de Nemelec / Com'in Clean : tout ce qui est caché ici l'est par une classe posée sur (vi-pre = rideau, vi-hide = hero en attente) par un petit script en tête de page ; chaque classe a une sortie de secours CSS qui joue toute seule. Sans JS, en mouvement réduit ou si l'intro a déjà été vue : rien n'est caché. Transform / opacity uniquement. Couleurs : noir #202020, crème #f8f6f1, rouge clair #ff5a5a (5,3:1 sur le noir ; le rouge #c42727 du site n'atteint que 2,8:1 sur fond sombre). */ :root{--vi-noir:#202020;--vi-creme:#f8f6f1;--vi-rouge:#ff5a5a;--vi-ease:cubic-bezier(.2,.8,.2,1)} /* ---------- 0. Rideau noir dès le premier affichage (pas de flash du hero avant l'intro) ---------- Classe vi-pre écrite sur par le script de tête (accueil + intro pas encore vue + mouvement normal). Trois sorties : intro.js la retire, l'animation ci-dessous fait disparaître le rideau 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.vi-pre::after{content:'';position:fixed;inset:0;z-index:99998;background:var(--vi-noir);pointer-events:none;animation:viCover .01s linear 2.6s forwards} } @media (scripting:none){html.vi-pre::after{display:none}} @keyframes viCover{to{opacity:0;visibility:hidden}} /* ---------- 1. INTRO : la clé qui tourne ---------- Chronologie (ms, toute en CSS ; le JS ne fait que poser/retirer le calque et lancer le titre) : 0 rideau noir ; la serrure apparaît (0–280) 120 le nom « VIDE MAISON CAROLO. » monte (120–460) 220 la clé s'enfonce dans la serrure : grande et floue → à sa taille (220–560) 600 un quart de tour, léger recul avant (600–920) 920 « clac » : anneau rouge qui s'élargit (920–1200) 980 serrure et nom s'effacent (980–1150) 1000 les deux battants pivotent vers l'intérieur et révèlent le site (1000–1450) 1050 le titre du hero démarre (mot par mot) ; 1500 le calque est retiré. Garde-fou CSS : 2600. */ #vi-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;perspective:1600px;perspective-origin:50% 50%;contain:strict;animation:viGone .01s linear 2.6s forwards} #vi-intro.vi-fast{animation:viFade .28s ease-out forwards;pointer-events:none} @keyframes viGone{to{opacity:0;visibility:hidden}} @keyframes viFade{to{opacity:0}} .vi-door{position:absolute;top:0;bottom:0;width:calc(50% + 1px);background:var(--vi-noir);backface-visibility:hidden;will-change:transform,opacity} .vi-l{left:0;transform-origin:0 50%;animation:viDoorL .45s cubic-bezier(.7,0,.25,1) 1s both} .vi-r{right:0;transform-origin:100% 50%;animation:viDoorR .45s cubic-bezier(.7,0,.25,1) 1s both} /* filets de porte : un cadre fin, discret, et l'ombre de la jointure */ .vi-door::before{content:'';position:absolute;inset:clamp(18px,5vmin,52px);border:1px solid rgba(248,246,241,.09)} .vi-door::after{content:'';position:absolute;top:0;bottom:0;width:90px;pointer-events:none} .vi-l::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.35))} .vi-r::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.35))} @keyframes viDoorL{0%{transform:none;opacity:1}85%{opacity:1}100%{transform:rotateY(98deg);opacity:0}} @keyframes viDoorR{0%{transform:none;opacity:1}85%{opacity:1}100%{transform:rotateY(-98deg);opacity:0}} .vi-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.4vmin,32px);animation:viSceneOut .17s ease-in .98s both;pointer-events:none} @keyframes viSceneOut{to{opacity:0;transform:scale(1.06)}} .vi-lock{position:relative;width:clamp(150px,30vmin,250px);aspect-ratio:1;animation:viPlate .28s var(--vi-ease) both} @keyframes viPlate{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}} .vi-lock svg{display:block;width:100%;height:100%;overflow:visible} .vi-key-in,.vi-key{transform-box:view-box;transform-origin:50% 50%} .vi-key-in{animation:viKeyIn .34s cubic-bezier(.3,.7,.2,1) .22s both} .vi-key{animation:viKeyTurn .32s cubic-bezier(.55,0,.25,1) .6s both;filter:drop-shadow(0 6px 8px rgba(0,0,0,.55))} @keyframes viKeyIn{from{opacity:0;transform:scale(1.7)}to{opacity:1;transform:none}} @keyframes viKeyTurn{0%{transform:none}22%{transform:rotate(-7deg)}100%{transform:rotate(90deg)}} .vi-ring{transform-box:view-box;transform-origin:50% 50%;opacity:0;animation:viClac .28s ease-out .92s forwards} @keyframes viClac{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.16)}} .vi-nom{font-family:var(--titre);font-weight:400;font-size:clamp(1.7rem,5.4vmin,3.1rem);line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--vi-creme);text-align:center;margin:0;padding:0 16px;animation:viNom .34s var(--vi-ease) .12s both} .vi-nom b{font-weight:400;color:var(--vi-rouge)} @keyframes viNom{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} /* ---------- 2. HERO : titre mot par mot, photo qui respire, poussières de lumière ---------- */ .vi-w{display:inline-block} .vi-w>i{display:inline-block;font-style:normal;transition:opacity .65s var(--vi-ease),transform .8s var(--vi-ease),filter .65s ease;transition-delay:calc(var(--i,0)*45ms)} /* avant le découpage en mots (JS pas encore passé) : le titre entier attend, puis les mots prennent le relais */ html.vi-hide .hero h1:not(.vi-ok){opacity:0} html.vi-hide .hero h1 .vi-w>i{opacity:0;transform:translateY(.55em);filter:blur(6px)} /* garde-fou CSS : même si le JS plante, tout se montre seul au bout de 3,6 s */ html.vi-hide .hero h1:not(.vi-ok){animation:viShow .01s linear 3.6s forwards} html.vi-hide .hero h1 .vi-w>i{animation:viShow .01s linear 3.6s forwards} @keyframes viShow{to{opacity:1;transform:none;filter:none}} /* le carré rouge devant le sur-titre et le point rouge final se posent avec les mots */ .hero h1 .sur-titre::before{transition:transform .5s var(--vi-ease),opacity .5s ease;transform-origin:0 50%} html.vi-hide .hero h1 .sur-titre::before{opacity:0;transform:scale(0);animation:viShow .01s linear 3.6s forwards} .hero h1 .sq::after{display:inline-block;color:var(--vi-rouge);transition:opacity .45s ease,transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--vi-n,15)*45ms + 120ms)} html.vi-hide .hero h1 .sq::after{opacity:0;transform:scale(0) translateY(.3em);animation:viShow .01s linear 3.6s forwards} /* la photo : léger zoom arrière à l'ouverture, puis parallaxe (translate posé par intro.js) */ .vi-par{scale:1.1;transition:scale 2.4s cubic-bezier(.2,.7,.2,1);will-change:translate,scale} html.vi-hide .vi-par{scale:1.2;transition:none} /* poussières de lumière */ .vi-dust{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;display:block} /* texte court, boutons, pastilles : apparaissent après le titre (--vi-n = nombre de mots du titre) */ .hero .hero-contenu>*{animation:none} .hero .hero-sous{transition:opacity .7s var(--vi-ease),transform .8s var(--vi-ease);transition-delay:calc(var(--vi-n,15)*45ms + 80ms)} .hero .hero-actions{transition:opacity .7s var(--vi-ease),transform .8s var(--vi-ease);transition-delay:calc(var(--vi-n,15)*45ms + 260ms)} .hero .hero-note{transition:opacity .7s var(--vi-ease),transform .8s var(--vi-ease);transition-delay:calc(var(--vi-n,15)*45ms + 380ms)} html.vi-hide .hero .hero-sous,html.vi-hide .hero .hero-actions,html.vi-hide .hero .hero-note{opacity:0;transform:translateY(18px);transition:none;animation:viShow .01s linear 3.8s forwards} /* 3 garanties = pastilles à icônes (verre léger), en cascade après les boutons */ .hero .garanties{display:flex;flex-wrap:wrap;gap:10px 12px;border-top:0;background:none;padding:6px 0 40px} .hero .garanties li,.hero .garanties li + li{display:inline-flex;align-items:center;gap:11px;padding:7px 20px 7px 8px;border:1px solid rgba(255,255,255,.3);border-radius:40px; font-size:.95rem;font-weight:600;line-height:1.25;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4); background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.07)); -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2); box-shadow:0 10px 24px -12px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22); transition:opacity .7s var(--vi-ease),transform .8s var(--vi-ease),filter .7s ease,background-color .3s,border-color .3s; transition-delay:calc(var(--vi-n,15)*45ms + 480ms + var(--i,0)*150ms),calc(var(--vi-n,15)*45ms + 480ms + var(--i,0)*150ms),calc(var(--vi-n,15)*45ms + 480ms + var(--i,0)*150ms),0s,0s} .hero .garanties li:hover{border-color:rgba(255,255,255,.6);background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,.12))} .vi-g-ico{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:rgba(196,39,39,.5);border:1px solid rgba(255,140,140,.6);color:#fff} .hero .garanties .vi-g-ico .ico{width:18px;height:18px;margin:0;stroke-width:2.1} html.vi-hide .hero .garanties li{opacity:0;transform:translateY(16px) scale(.96);filter:blur(5px);transition:none;animation:viShow .01s linear 4s forwards} /* ---------- Mobile : photo recadrée sur la camionnette, pastilles resserrées ---------- */ @media (max-width:767px){ .hero-photo img{object-position:83% 50%} .hero .garanties{gap:8px;padding-bottom:30px} .hero .garanties li,.hero .garanties li + li{font-size:.88rem;padding:6px 16px 6px 6px;gap:9px} .vi-g-ico{width:28px;height:28px} .hero .garanties .vi-g-ico .ico{width:16px;height:16px} .vi-door::before{inset:14px} } /* ---------- Mouvement réduit : tout est coupé ---------- */ @media (prefers-reduced-motion:reduce){ html.vi-pre::after{display:none!important} #vi-intro{display:none!important} .vi-w>i,.hero h1 .sur-titre::before,.hero h1 .sq::after{transition:none!important} html.vi-hide .hero h1:not(.vi-ok),html.vi-hide .hero h1 .vi-w>i,html.vi-hide .hero h1 .sur-titre::before,html.vi-hide .hero h1 .sq::after{opacity:1!important;transform:none!important;filter:none!important;animation:none!important} html.vi-hide .hero .hero-sous,html.vi-hide .hero .hero-actions,html.vi-hide .hero .hero-note,html.vi-hide .hero .garanties li{opacity:1!important;transform:none!important;filter:none!important;animation:none!important} .hero .hero-sous,.hero .hero-actions,.hero .hero-note,.hero .garanties li{transition:none!important} .vi-dust{display:none!important} .vi-par{scale:1;translate:none!important;transition:none} html.vi-hide .vi-par{scale:1} }