/* =========================================================== Ligō Solution — dynamique.css Effets, chacun commandé par une classe sur : .dyn-reveal — révélations marquées (mots, filets, portrait) .dyn-micro — micro-interactions (survol, boutons magnétiques) .dyn-o — le ō en fond de section, animé au défilement .dyn-trans — transitions entre pages (voile marine) .dyn-marquee — bandeau cinétique de la devise Intensité globale : --dyn-k (≈0.2 à 1.7 ; 1 = médian). =========================================================== */ :root{--dyn-k:1} /* ---------- 2. Révélations marquées ---------- */ /* les titres découpés en mots : le conteneur reste visible, chaque mot émerge avec un léger décalage */ html.js.dyn-reveal .wsplit{opacity:1 !important;transform:none !important} html.dyn-reveal .wsplit .wi{ display:inline-block;opacity:0;white-space:nowrap; transform:translateY(calc(.4em * var(--dyn-k))); transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1); transition-delay:var(--wd,0ms); } html.dyn-reveal .wsplit.in .wi{opacity:1;transform:none} /* révélation de base plus ample */ html.js.dyn-reveal .reveal:not(.wsplit){transform:translateY(calc(12px + 14px * var(--dyn-k)))} html.js.dyn-reveal .reveal.in{transform:none} /* filets des registres de services : la ligne se trace de gauche à droite */ html.js.dyn-reveal .svc-row, html.js.dyn-reveal .svcd{border-top-color:transparent;position:relative} html.js.dyn-reveal .svc-row::before, html.js.dyn-reveal .svcd::before{ content:"";position:absolute;top:-1px;left:0;width:100%;height:1px; background:var(--line-2);transform:scaleX(0);transform-origin:left; transition:transform 1s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rd,0ms); } html.js.dyn-reveal .svcd::before{background:var(--trait)} html.js.dyn-reveal .svc-row.in::before, html.js.dyn-reveal .svcd.in::before{transform:scaleX(1)} /* portrait : dévoilement par balayage + très léger zoom qui se pose */ html.js.dyn-reveal .portrait-plate{ clip-path:inset(0 100% 0 0 round var(--r-md)); transition:opacity .7s cubic-bezier(.2,.7,.2,1),clip-path 1.1s cubic-bezier(.2,.7,.2,1); } html.js.dyn-reveal .portrait-plate.in{clip-path:inset(0 0 0 0 round var(--r-md))} html.js.dyn-reveal .portrait-plate img{transform:scale(1.07);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)} html.js.dyn-reveal .portrait-plate.in img{transform:none} @media (prefers-reduced-motion:reduce){ html.dyn-reveal .wsplit .wi{opacity:1;transform:none;transition:none} } /* ---------- 3. Micro-interactions ---------- */ html.dyn-micro .os-btn,html.dyn-micro .nav-cta{will-change:transform} @media (hover:hover){ html.dyn-micro .svc-row{transition:transform .4s cubic-bezier(.2,.7,.2,1)} html.dyn-micro .svc-row:hover{transform:translateX(calc(7px * var(--dyn-k)))} html.dyn-micro .os-tag{transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s ease} html.dyn-micro .os-tag:hover{transform:translateY(-2px);border-color:var(--orange)} html.dyn-micro .svcd-list li::before{transition:transform .3s cubic-bezier(.2,.7,.2,1)} /* le ō se délie d'un souffle au survol (intensité fixe ≈ 1, indépendante du curseur global) — arcs, macron et ō assemblé, une fois la scène posée */ html.dyn-micro .o-wrap .o-layer path{ transition:transform .5s cubic-bezier(.2,.7,.2,1); transform-box:fill-box;transform-origin:center; } html.dyn-micro .scene-done .o-wrap:hover .arc-left path, html.dyn-micro .scene-static .o-wrap:hover .arc-left path, html.dyn-micro .scene-done .o-wrap:hover .o-ghost path:nth-of-type(1), html.dyn-micro .scene-static .o-wrap:hover .o-ghost path:nth-of-type(1){transform:translate(-1.4px,0.8px)} html.dyn-micro .scene-done .o-wrap:hover .arc-bottom path, html.dyn-micro .scene-static .o-wrap:hover .arc-bottom path, html.dyn-micro .scene-done .o-wrap:hover .o-ghost path:nth-of-type(2), html.dyn-micro .scene-static .o-wrap:hover .o-ghost path:nth-of-type(2){transform:translateY(1.6px)} html.dyn-micro .scene-done .o-wrap:hover .arc-right path, html.dyn-micro .scene-static .o-wrap:hover .arc-right path, html.dyn-micro .scene-done .o-wrap:hover .o-ghost path:nth-of-type(3), html.dyn-micro .scene-static .o-wrap:hover .o-ghost path:nth-of-type(3){transform:translate(1.4px,0.8px)} html.dyn-micro .scene-done .o-wrap:hover .o-layer.macron path, html.dyn-micro .scene-static .o-wrap:hover .o-layer.macron path, html.dyn-micro .scene-done .o-wrap:hover .o-ghost path.g-macron, html.dyn-micro .scene-static .o-wrap:hover .o-ghost path.g-macron{transform:translateY(-1.8px)} } /* ---------- 4. Le ō en fond de section ---------- */ .o-watermark--sec{top:50%;height:clamp(280px,36vw,480px)} html.js:not(.dyn-o) .o-watermark{display:none} .has-owm{overflow:clip} /* mode « tracé » : les arcs se posent un à un à l'arrivée de la section */ html.o-trace .o-watermark .ospin path{ opacity:0;transform-box:fill-box;transform-origin:center; transform:rotate(-18deg); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); } html.o-trace .o-watermark .ospin path:nth-of-type(2){transition-delay:.16s} html.o-trace .o-watermark .ospin path:nth-of-type(3){transition-delay:.32s} html.o-trace .o-watermark .ospin path.macron-w{transition-delay:.5s} html.o-trace .o-watermark.owm-in .ospin path{opacity:.07;transform:none} html.o-trace .o-watermark.owm-in .ospin path.macron-w{opacity:.3} /* ---------- 5. Transitions entre pages ---------- */ .page-veil{ position:fixed;inset:0;z-index:2000;background:var(--marine); transform:translateY(103%);pointer-events:none;display:none; visibility:hidden; } html.dyn-trans .page-veil{display:block} .page-veil.veil-on{visibility:visible} /* entrée : la page arrive COUVERTE (classe posée avant le premier rendu par un script d'en-tête), puis le voile se retire vers le haut tout seul — aucun flash possible */ html.veil-entree::before{ content:"";position:fixed;inset:0;z-index:2001;pointer-events:none; background-color:var(--marine); background-image:url("monogram-veil.svg"); background-repeat:no-repeat;background-position:center; background-size:auto min(104vh,1040px); border-bottom:5px solid var(--orange); animation:veil-entree-up .36s cubic-bezier(0,0,.3,1) .08s forwards; } @keyframes veil-entree-up{to{transform:translateY(-103%)}} @media (prefers-reduced-motion:reduce){html.veil-entree::before{display:none}} .page-veil::before,.page-veil::after{ content:"";position:absolute;left:0;right:0;height:5px;background:var(--orange); } .page-veil::before{top:-5px} .page-veil::after{bottom:-5px} /* le ō du logo, posé au centre du voile — apparaît avec le voile et repart vers le haut avec lui à l'entrée */ .page-veil .veil-o{ position:absolute;inset:0;display:grid;place-items:center; opacity:0;transform:scale(.86); transition:opacity .22s cubic-bezier(.2,.7,.2,1),transform .34s cubic-bezier(.2,.7,.2,1); } .page-veil.veil-on .veil-o{opacity:1;transform:none} .page-veil.veil-instant .veil-o{transition:none;opacity:1;transform:none} .page-veil .veil-o{overflow:hidden} .page-veil .veil-o svg{height:min(104vh,1040px);width:auto;display:block} .page-veil .veil-o svg path{fill:var(--ecume);opacity:.09} .page-veil .veil-o svg path.macron-w{fill:var(--orange);opacity:.32} @media (prefers-reduced-motion:reduce){.page-veil .veil-o{transition:none}}