/* Com'in Clean — couche d'animations (intro raclette, vagues, bulles, 3D, reflets).
   À charger APRÈS /assets/eco/css/site.css. Tout ce qui est caché ici l'est par une classe posée
   par anim.js : sans JS, le site reste identique. Transform / opacity / filter uniquement. */

:root{--cc-acc:var(--accent,#2AD3D5);--cc-acc-d:var(--accent-fonce,#1BA5A7);--cc-ease:cubic-bezier(.2,.8,.2,1);--cc-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- 1. INTRO : coup de raclette sur la vitre ---------- */
#cc-intro{position:fixed;inset:0;z-index:99999;overflow:hidden;cursor:pointer;transition:opacity .28s ease;--bw:clamp(90px,16vw,240px)}
#cc-intro.cc-out{opacity:0;pointer-events:none}
.cc-wipe{position:absolute;inset:0;transform:translateX(-32px);animation:ccWipe .85s cubic-bezier(.65,0,.3,1) .6s both;will-change:transform}
.cc-panel{position:absolute;inset:0 -40px;padding-left:64px;background:radial-gradient(circle at 50% 46%,#fff 0,#f1f9f7 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.cc-logo{display:block;width:auto;height:clamp(64px,13vw,118px);max-width:78vw;object-fit:contain;animation:ccLogoIn .6s var(--cc-ease) both,ccLogoOut .35s ease-in .95s forwards}
.cc-line{display:block;width:clamp(90px,16vw,150px);height:3px;border-radius:3px;background:linear-gradient(90deg,var(--cc-acc-d),var(--cc-acc));transform-origin:left center;animation:ccLine .55s var(--cc-ease) .3s both,ccLogoOut .3s ease-in .95s forwards}
.cc-blade{position:absolute;top:-6%;height:112%;width:var(--bw);display:block;animation:ccWob .45s ease-in-out infinite alternate;will-change:transform}
.cc-b1{left:calc(30px - var(--bw));color:var(--cc-acc)}
.cc-b2{left:calc(-6px - var(--bw) - 24px);color:var(--cc-acc-d);animation-delay:-.22s}
.cc-glint{position:absolute;top:-10%;bottom:-10%;left:0;width:20vw;background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);transform:translateX(-30vw) skewX(-18deg);animation:ccGlint .8s cubic-bezier(.5,0,.3,1) .72s both;pointer-events:none;will-change:transform}
@keyframes ccWipe{from{transform:translateX(-32px)}to{transform:translateX(125%)}}
@keyframes ccLogoIn{from{opacity:0;transform:translateY(14px) scale(.92)}to{opacity:1;transform:none}}
@keyframes ccLogoOut{to{opacity:0;transform:scale(1.05)}}
@keyframes ccLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ccWob{from{transform:translateY(-14px)}to{transform:translateY(14px)}}
@keyframes ccGlint{from{transform:translateX(-30vw) skewX(-18deg)}to{transform:translateX(130vw) skewX(-18deg)}}

/* ---------- 2. HERO : titre mot par mot, bulles ---------- */
.cc-w{display:inline-block}
.cc-w>i{display:inline-block;font-style:normal;transition:opacity .7s var(--cc-ease),transform .85s var(--cc-ease),filter .7s ease;transition-delay:calc(var(--i,0)*70ms)}
html.cc-pre .cc-w>i{opacity:0;transform:translateY(.55em);filter:blur(6px)}
.cc-par{scale:1.12;will-change:transform,translate}
.cc-bubbles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}

/* ---------- 5. Apparitions au scroll : par-dessus celles du thème ([data-reveal] + .is-hidden) ---------- */
[data-reveal]{transition:opacity .85s var(--cc-ease),transform .95s var(--cc-ease),filter .85s ease}
[data-reveal].is-hidden{filter:blur(8px)}
[data-reveal].is-hidden[data-reveal="1"]{transform:translateY(46px) scale(.985)}
[data-reveal].is-hidden[data-reveal="left"]{transform:translateX(-70px) scale(.97)}
[data-reveal].is-hidden[data-reveal="right"]{transform:translateX(70px) scale(.97)}
[data-reveal].is-hidden[data-reveal="zoom"]{transform:scale(.9)}

/* ---------- 3. 3D au survol : tilt + reflet qui suit la souris ---------- */
.cc-tilt{position:relative;--cc-rx:0deg;--cc-ry:0deg;--cc-lift:-6px;--cc-g:0}
.cc-tilt::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:var(--cc-g);transition:opacity .3s ease;background:radial-gradient(420px circle at var(--cc-mx,50%) var(--cc-my,50%),rgba(255,255,255,.34),transparent 55%)}
html .cc-tilt.cc-hot{--cc-g:1;transform:perspective(900px) rotateX(var(--cc-rx)) rotateY(var(--cc-ry)) translateY(var(--cc-lift));transition:transform .12s ease-out,box-shadow .35s,background .3s!important}
.eco-piste-slide>.cc-tilt{--cc-lift:0px;transition:transform .4s var(--cc-ease)}

/* ---------- 4. Vitre qui brille : reflet diagonal sur les images ---------- */
.cc-shiny{position:relative}
.cc-shiny::before{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(0) skewX(-20deg)}
.cc-shiny.cc-shine-go::before{animation:ccShine 1.3s cubic-bezier(.4,0,.3,1) .15s 1 both}
.cc-shiny.cc-shine-done:hover::before,.hv23:hover .cc-shiny.cc-shine-done::before{animation:ccShine2 1.1s cubic-bezier(.4,0,.3,1) 1 both}
@keyframes ccShine{0%{opacity:0;transform:translateX(0) skewX(-20deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(450%) skewX(-20deg)}}
@keyframes ccShine2{0%{opacity:0;transform:translateX(0) skewX(-20deg)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(450%) skewX(-20deg)}}

/* ---------- 6. Séparateurs en vague ---------- */
.cc-wave{position:absolute;left:0;right:0;height:clamp(26px,4vw,52px);overflow:hidden;pointer-events:none}
.cc-wave-b{bottom:-1px}
.cc-wave-t{top:-1px;transform:scaleY(-1)}
.cc-wave svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block;animation:ccWaveX 20s linear infinite;will-change:transform}
.cc-wave svg:nth-child(2){animation-duration:13s;animation-direction:reverse}
.cc-wave svg:nth-child(3){animation-duration:9s}
.cc-wave.cc-paused svg{animation-play-state:paused}
@keyframes ccWaveX{to{transform:translateX(-50%)}}

/* ---------- 7. Boutons : brillance + ressort ---------- */
.hv21b,.hv04,.hv03,.hv20,.hv10,.hv08{position:relative;overflow:hidden;isolation:isolate}
.hv21b::after,.hv04::after,.hv03::after,.hv20::after,.hv10::after,.hv08::after{content:'';position:absolute;top:0;bottom:0;left:0;width:55%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-140%) skewX(-20deg);transition:transform .75s var(--cc-ease)}
.hv21b:hover::after,.hv04:hover::after,.hv03:hover::after,.hv20:hover::after,.hv10:hover::after,.hv08:hover::after{transform:translateX(260%) skewX(-20deg)}
html .hv21b,html .hv04,html .hv03,html .hv20,html .hv10,html .hv08{transition:transform .5s var(--cc-spring),background .2s,box-shadow .25s,color .2s,border-color .2s!important}
html .hv21b:hover,html .hv04:hover,html .hv03:hover,html .hv20:hover,html .hv10:hover,html .hv08:hover{transform:translateY(-3px) scale(1.045)}
html .hv21b:active,html .hv04:active,html .hv03:active,html .hv20:active,html .hv10:active,html .hv08:active{transform:scale(.97)}

/* bouton d'appel / WhatsApp flottant : respiration + onde douce */
a[aria-label="Appeler"][style*="position:fixed"],a[aria-label*="WhatsApp"][style*="position:fixed"]{animation:ccBreath 3.4s ease-in-out infinite}
a[aria-label="Appeler"][style*="position:fixed"]::after,a[aria-label*="WhatsApp"][style*="position:fixed"]::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid var(--accent);pointer-events:none;animation:ccRing 2.8s ease-out 1.2s infinite}
@keyframes ccBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ccRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* ---------- 8. Barre de progression ---------- */
[data-progress]{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent)}
.cc-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;pointer-events:none;background:linear-gradient(90deg,var(--cc-acc-d),var(--cc-acc));transform-origin:left center;transform:scaleX(0);box-shadow:0 0 12px color-mix(in srgb,var(--cc-acc) 70%,transparent)}

/* ---------- Mouvement réduit : tout est coupé ---------- */
@media (prefers-reduced-motion:reduce){
  #cc-intro{display:none!important}
  [data-reveal]{transition:none!important;filter:none!important}
  .cc-w>i{transition:none!important}
  .cc-wave svg{animation:none!important}
  .cc-tilt::after,.cc-shiny::before{display:none!important}
  .hv21b::after,.hv04::after,.hv03::after,.hv20::after,.hv10::after,.hv08::after{display:none!important}
  html .hv21b:hover,html .hv04:hover,html .hv03:hover,html .hv20:hover,html .hv10:hover,html .hv08:hover{transform:none}
  a[aria-label="Appeler"][style*="position:fixed"],a[aria-label*="WhatsApp"][style*="position:fixed"]{animation:none!important}
  a[aria-label="Appeler"][style*="position:fixed"]::after,a[aria-label*="WhatsApp"][style*="position:fixed"]::after{display:none!important}
  .cc-bubbles{display:none!important}
}