/* Zen motion layer — toggled by body[data-motion] = off | douces | immersives */
:root{--ease-zen:cubic-bezier(.22,.61,.24,1)}
#hero{overflow:hidden}
#hero>.wrap{position:relative;z-index:1}
.aura{position:absolute;inset:-10%;pointer-events:none;z-index:0}
.aura i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.32;will-change:transform}
.aura i:nth-child(1){width:46vw;height:46vw;left:48%;top:-8%;background:color-mix(in oklab,var(--accent) 45%,#fff);animation:drift1 38s ease-in-out infinite alternate}
.aura i:nth-child(2){width:34vw;height:34vw;left:-6%;top:40%;background:color-mix(in oklab,var(--accent) 20%,#f3ead8);animation:drift2 46s ease-in-out infinite alternate}
.aura i:nth-child(3){width:26vw;height:26vw;left:30%;top:60%;background:color-mix(in oklab,var(--accent) 28%,#dfe9ee);animation:drift3 52s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(-8vw,6vh) scale(1.12)}}
@keyframes drift2{to{transform:translate(10vw,-8vh) scale(.92)}}
@keyframes drift3{to{transform:translate(-6vw,-10vh) scale(1.18)}}
.page-aura{position:fixed;inset:0;z-index:-1;display:none}
.page-aura i{opacity:.14}
body{position:relative;z-index:0}

/* Hero title — words surface like through mist */
.hero-title .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.25em);animation:surface 1.6s var(--ease-zen) forwards}
@keyframes surface{to{opacity:1;filter:blur(0);transform:none}}
.hero-eyebrow,.hero-lede,.hero-meta,.hero-buttons{opacity:0;animation:surface 1.4s var(--ease-zen) forwards;filter:blur(6px)}
.hero-eyebrow{animation-delay:.1s}.hero-lede{animation-delay:1.3s}.hero-meta{animation-delay:1.6s}.hero-buttons{animation-delay:1.9s}

/* Hero image — slow breath + Ken Burns */
.hero-visual{opacity:0;animation:surface 2s var(--ease-zen) .6s forwards;filter:blur(8px)}
.hero-visual img{animation:kenburns 24s ease-in-out infinite alternate;transform-origin:60% 50%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
.hero-visual-tag{display:inline-flex;align-items:center;gap:10px;min-width:150px}
.breath-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 40%,transparent);animation:breathe 10s ease-in-out infinite}
@keyframes breathe{0%{transform:scale(.6);box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 35%,transparent)}40%{transform:scale(1.4);box-shadow:0 0 0 10px color-mix(in oklab,var(--accent) 0%,transparent)}100%{transform:scale(.6);box-shadow:0 0 0 0 transparent}}
.breath-txt{transition:opacity .8s}

/* Scroll reveals — soft, blurred, slower */
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 1.4s var(--ease-zen),transform 1.4s var(--ease-zen),filter 1.4s var(--ease-zen)}
.reveal.in{opacity:1;transform:none;filter:none}
.st{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease-zen),transform 1.1s var(--ease-zen)}
.in .st,.st.in{opacity:1;transform:none}

/* Highlights drawn like a brush stroke */
strong,.hl{background-repeat:no-repeat;background-size:0% 100%;transition:background-size 1.6s var(--ease-zen)}
strong.lit,.hl.lit{background-size:100% 100%}

/* Section number rule grows */
.section-num{border-top-color:transparent!important;position:relative}
.section-num::before{content:'';position:absolute;top:-1px;left:0;height:1px;width:0;background:currentColor;transition:width 1.6s var(--ease-zen)}
#contact .section-num::before{background:color-mix(in oklab,var(--paper) 40%,transparent)}
.reveal.in .section-num::before,.section-head.in .section-num::before{width:100%}

/* Illustrations float gently */
.concern-img img{animation:float 7s ease-in-out infinite}
.concern:nth-child(2) .concern-img img{animation-delay:-1.4s}
.concern:nth-child(3) .concern-img img{animation-delay:-2.8s}
.concern:nth-child(4) .concern-img img{animation-delay:-4.2s}
.concern:nth-child(5) .concern-img img{animation-delay:-5.6s}
@keyframes float{50%{transform:translateY(-7px) rotate(-1deg)}}
.concern{transition:background .5s,transform .6s var(--ease-zen)}
.concern:hover{transform:translateY(-4px)}

/* Tarifs rows — a line of light passes on hover */
.service-row{position:relative;overflow:hidden}
.service-row::after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease-zen)}
.service-row:hover::after{transform:scaleX(1)}
.service-row{transition:padding .6s var(--ease-zen)}

/* Buttons — soft ripple */
.btn,.contact-link-card,form button{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:ripple 1.2s var(--ease-zen) forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* Strip — slower, like a tide */
.strip-track{animation-duration:70s}

/* Scroll progress — a thin stem */
.zen-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(0);z-index:101;display:none;opacity:.7}

/* Immersive extras */
body[data-motion="immersives"] .page-aura{display:block}
body[data-motion="immersives"] .zen-progress{display:block}
body[data-motion="immersives"] .aura i{opacity:.42}

/* Off */
body[data-motion="off"] *,body[data-motion="off"] *::before,body[data-motion="off"] *::after{animation:none!important;transition:none!important}
body[data-motion="off"] .reveal,body[data-motion="off"] .st,body[data-motion="off"] .hero-title .w,body[data-motion="off"] .hero-eyebrow,body[data-motion="off"] .hero-lede,body[data-motion="off"] .hero-meta,body[data-motion="off"] .hero-buttons,body[data-motion="off"] .hero-visual{opacity:1!important;transform:none!important;filter:none!important}
body[data-motion="off"] strong,body[data-motion="off"] .hl{background-size:100% 100%}
body[data-motion="off"] .section-num::before{width:100%}
body[data-motion="off"] .aura,body[data-motion="off"] .page-aura{display:none}
@media (prefers-reduced-motion:reduce){.aura i,.hero-visual img,.concern-img img,.breath-dot{animation:none!important}}
