/* Animations NC Domotique : titres, apparitions, cartes, boutons, en-tête. */

/* Titres : dégradé cyan → bleu → violet qui circule */
main h1 em,main h1 span,main h2 span{background-image:linear-gradient(100deg,#39e6e0 0%,#6cbaff 30%,#bd75ff 55%,#6cbaff 78%,#39e6e0 100%);background-size:260% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:fxHue 9s linear infinite}
@keyframes fxHue{to{background-position:-260% center}}

/* Barre de progression de lecture */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#39e6e0,#6cbaff,#bd75ff);box-shadow:0 0 12px rgba(108,186,255,.8);pointer-events:none}

/* En-tête en verre au défilement */
.header{transition:background-color .35s,box-shadow .35s,backdrop-filter .35s}
.header.fx-scrolled{background-color:rgba(4,8,12,.72)!important;-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 rgba(108,186,255,.18),0 18px 40px -24px rgba(57,230,224,.45)}

/* Liens du menu : soulignement lumineux */
.nav>a:not(.btn){background:linear-gradient(90deg,#39e6e0,#bd75ff) no-repeat 0 100%/0 2px;transition:background-size .35s,color .25s;padding-bottom:4px}
.nav>a:not(.btn):hover,.nav>a:not(.btn):focus-visible{background-size:100% 2px;color:#fff}

/* Boutons : éclat qui traverse au survol */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.btn:hover::after,.btn:focus-visible::after{left:130%}
.hero-actions .btn:not(.btn-outline)::after,.welcome-cta::after{animation:fxSweep 5s ease-in-out 1.5s infinite}
@keyframes fxSweep{0%,70%{left:-75%}100%{left:130%}}

/* Halo lumineux qui dérive derrière le premier écran */
.fx-orbs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.fx-orbs i{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);opacity:.28}
.fx-orbs i:nth-child(1){left:-140px;top:-160px;background:#39e6e0;animation:fxDrift1 18s ease-in-out infinite alternate}
.fx-orbs i:nth-child(2){right:-160px;bottom:-220px;background:#bd75ff;animation:fxDrift2 22s ease-in-out infinite alternate}
@keyframes fxDrift1{to{transform:translate(160px,120px) scale(1.15)}}
@keyframes fxDrift2{to{transform:translate(-180px,-100px) scale(1.2)}}
.fx-has-orbs{position:relative;overflow:hidden}
.fx-has-orbs>.container{position:relative;z-index:1}

/* Image principale : flottement léger */
.solution-hero .solution-photo img,.about-photo img{animation:fxFloat 7s ease-in-out infinite}
@keyframes fxFloat{0%,100%{transform:translateY(0) scale(1.02)}50%{transform:translateY(-8px) scale(1.02)}}

/* Apparition au défilement (activée par le script) */
.fx-on .fx-r{opacity:0;translate:0 34px;transition:opacity .9s cubic-bezier(.16,.84,.24,1) var(--fx-d,0ms),translate .9s cubic-bezier(.16,.84,.24,1) var(--fx-d,0ms),filter .9s var(--fx-d,0ms)}
.fx-on .fx-r.fx-title{filter:blur(10px);translate:0 22px}
.fx-on .fx-r.fx-img{clip-path:inset(12% 12% 12% 12% round 18px);transition:opacity .9s var(--fx-d,0ms),translate .9s var(--fx-d,0ms),clip-path 1.2s cubic-bezier(.16,.84,.24,1) var(--fx-d,0ms)}
.fx-on .fx-r.fx-in{opacity:1;translate:0 0;filter:none}
.fx-on .fx-r.fx-img.fx-in{clip-path:inset(0 0 0 0 round 12px)}

/* Cartes : lumière qui suit la souris + inclinaison 3D */
.fx-spot{background-image:radial-gradient(420px circle at var(--fx-x,50%) var(--fx-y,50%),rgba(57,230,224,.10),rgba(189,117,255,.05) 35%,transparent 60%)}
.fx-tilt{transition:transform .5s cubic-bezier(.16,.84,.24,1),border-color .3s,box-shadow .4s;transform-style:preserve-3d;will-change:transform}
.fx-tilt.fx-tilting{transition:transform .08s linear,border-color .3s,box-shadow .4s;box-shadow:0 30px 60px -30px rgba(57,230,224,.45)}

/* Photos des réalisations et cartes services : zoom au survol */
.project-photo{overflow:hidden}
.project-photo img{transition:transform .8s cubic-bezier(.16,.84,.24,1)}
.project-photo:hover img{transform:scale(1.07)}
.service-card .service-visual{transition:transform .8s cubic-bezier(.16,.84,.24,1),filter .5s}
.service-card:hover .service-visual{transform:scale(1.06);filter:saturate(1.15)}
.service-card{overflow:hidden}

/* Petits titres : trait lumineux qui se dessine */
.fx-on .kicker.fx-r::after{content:"";display:inline-block;vertical-align:middle;width:0;height:2px;margin-left:12px;background:linear-gradient(90deg,#39e6e0,#bd75ff);transition:width 1s cubic-bezier(.16,.84,.24,1) calc(var(--fx-d,0ms) + 300ms)}
.fx-on .kicker.fx-r.fx-in::after{width:42px}

/* Logo : halo qui respire */
.header .brand-logo{animation:fxLogo 4s ease-in-out infinite}
@keyframes fxLogo{0%,100%{filter:drop-shadow(0 0 0 rgba(189,117,255,0))}50%{filter:drop-shadow(0 0 10px rgba(189,117,255,.75))}}

@media (prefers-reduced-motion:reduce){
 main h1 em,main h1 span,main h2 span,.hero-actions .btn::after,.welcome-cta::after,.fx-orbs i,.solution-hero .solution-photo img,.about-photo img,.header .brand-logo{animation:none}
 .btn::after{display:none}
 .fx-orbs{display:none}
}