/* ============================================================ The Chuppah — sv-lux v1 · la physique du luxe Un seul easing signature partout : entrées longues out-expo, sorties courtes. Tout est additif : sans JS (pas de html.lux), rien n'est masqué. Sous prefers-reduced-motion : tout est posé. ============================================================ */ :root{ --ease-lux: cubic-bezier(.19,1,.22,1); /* entrées — easeOutExpo */ --ease-exit: cubic-bezier(.55,.085,.68,.53); /* sorties — inQuad */ --ease-wipe: cubic-bezier(.165,.84,.44,1); /* underlines, wipes */ --lux-stagger: 90ms; } /* --- Lenis housekeeping (classes posées par la lib sur ) --- */ html.lenis, html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} .lenis.lenis-stopped{overflow:hidden} /* --- Scrollbar signature (desktop) --- */ @media(pointer:fine){ html{scrollbar-color:#BFA085 #EAE0D4} ::-webkit-scrollbar{width:11px} ::-webkit-scrollbar-track{background:#EAE0D4} ::-webkit-scrollbar-thumb{background:#BFA085;border-radius:6px;border:3px solid #EAE0D4} ::-webkit-scrollbar-thumb:hover{background:#8A3A2E} } @media(prefers-reduced-motion: no-preference){ /* --- Titres : mots masqués qui se lèvent ([data-split], découpe par sv-lux.js) --- */ html.lux [data-split]{opacity:0} html.lux [data-split].lux-ready{opacity:1} /* Le masque doit dépasser la ligne de base : le span intérieur est aligné sur elle et le talon de police ajoute ~11px sous lui (mesuré à 70px). Sans ce padding, overflow:hidden ampute les descendantes (le « g » de mariage) et le débordement de l'italique. La marge négative annule le padding dans le flux : la hauteur du titre ne bouge pas. */ html.lux [data-split] .lux-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.18em;margin-bottom:-.18em} /* 145% (et non 118%) : le masque est plus haut, il faut de quoi sortir le mot entièrement. */ html.lux [data-split] .lux-w>span{display:inline-block;transform:translateY(145%);transition:transform 1.05s var(--ease-lux);transition-delay:calc(var(--i,0)*46ms)} html.lux [data-split].lux-on .lux-w>span{transform:none} /* --- Images : rideau + dé-zoom (le cadre reste, la peinture arrive) --- */ html.lux .lux-img img{clip-path:inset(0 0 100% 0);transform:scale(1.12);transition:clip-path 1.15s var(--ease-lux),transform 1.5s var(--ease-lux);transition-delay:calc(var(--d,0)*110ms)} html.lux .lux-img.lux-on img{clip-path:inset(0);transform:none} html.lux .lux-img .fg-cap{opacity:0;transition:opacity .7s var(--ease-lux);transition-delay:calc(var(--d,0)*110ms + .45s)} html.lux .lux-img.lux-on .fg-cap{opacity:1} /* --- Blocs : montée douce, stagger par --d --- */ html.lux .lux-rise{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease-lux),transform 1.2s var(--ease-lux);transition-delay:calc(var(--d,0)*var(--lux-stagger))} html.lux .lux-rise.lux-on{opacity:1;transform:none} /* --- Transitions de page (MPA, progressif : Chrome/Edge, ignoré ailleurs) --- */ @view-transition{navigation:auto} ::view-transition-old(root){animation-duration:.28s;animation-timing-function:var(--ease-exit)} ::view-transition-new(root){animation-duration:.45s;animation-timing-function:var(--ease-lux)} } @media(prefers-reduced-motion: reduce){ @view-transition{navigation:none} } /* --- Lien éditorial : soulignement wipe-through (sort à droite, revient à gauche) --- */ .lux-ul{background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);background-size:100% 1px,0 1px;background-position:100% calc(100% - .06em),0 calc(100% - .06em);background-repeat:no-repeat;text-decoration:none!important;transition:background-size .8s var(--ease-wipe)} .lux-ul:hover{background-size:0 1px,100% 1px} /* --- Ombre teintée (camel + encre, jamais grise) --- */ .lux-shadow{box-shadow:-18px -6px 40px rgba(169,136,98,.08),22px 14px 54px rgba(57,50,43,.07)}