/*
 * Fond animé du hero ADES.
 * Direction visuelle inspirée de Stream Convergence / Echo Vale (ThreeUI Community, MIT).
 * Shader et orchestration réécrits pour ADES ; voir /THIRD_PARTY_NOTICES.txt.
 * Ce fichier est volontairement limité au hero de la page d'accueil.
 */

#hero.hero-flow-enabled{
  isolation:isolate;
  background:
    radial-gradient(ellipse at 78% 42%,rgba(173,210,212,.34),transparent 39%),
    linear-gradient(126deg,#2a73a1 0%,#3485b7 56%,#2d789f 100%);
}

#hero.hero-flow-enabled::before{
  z-index:1;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.11),rgba(173,210,212,.045) 48%,transparent 73%);
  opacity:1;
}

#hero.hero-flow-enabled::after{
  z-index:2;
}

#hero.hero-flow-enabled .hero-backdrop-grid,
#hero.hero-flow-enabled .hero-glow{
  z-index:1;
  pointer-events:none;
}

#hero.hero-flow-enabled .hero-backdrop-grid{
  opacity:.18;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.58),transparent 76%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.58),transparent 76%);
}

#hero.hero-flow-enabled .hero-glow{
  opacity:.42;
  filter:blur(2px);
}

.hero-flow-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  contain:strict;
  opacity:.68;
  mix-blend-mode:screen;
}

.hero-flow-orbits{
  position:absolute;
  inset:-14%;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.hero-flow-orbit{
  position:absolute;
  border:1px solid rgba(173,210,212,.27);
  border-radius:48% 52% 44% 56% / 56% 42% 58% 44%;
  transform:rotate(var(--hero-orbit-rotation,0deg));
  transform-origin:center;
  will-change:transform;
}

.hero-flow-orbit:nth-child(1){
  width:73%;
  aspect-ratio:1.92;
  right:-7%;
  top:8%;
  --hero-orbit-rotation:-8deg;
  border-color:rgba(255,255,255,.22);
}

.hero-flow-orbit:nth-child(2){
  width:57%;
  aspect-ratio:1.56;
  right:8%;
  top:28%;
  --hero-orbit-rotation:7deg;
  border-color:rgba(173,210,212,.32);
}

.hero-flow-orbit:nth-child(3){
  width:45%;
  aspect-ratio:1.82;
  left:-9%;
  bottom:7%;
  --hero-orbit-rotation:11deg;
  border-color:rgba(255,255,255,.16);
}

.hero-flow-orbit::after{
  content:'';
  position:absolute;
  width:10px;
  height:10px;
  right:18%;
  top:-5px;
  border-radius:50%;
  background:rgba(173,210,212,.9);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.38),0 8px 22px rgba(42,115,161,.18);
}

#hero.hero-flow-enabled .hero-inner{
  position:relative;
  z-index:3;
}

#hero.hero-flow-enabled .hero-corner{
  z-index:3;
}

@media (prefers-reduced-motion:no-preference){
  .hero-flow-orbit:nth-child(1){animation:heroFlowOrbit 18s ease-in-out infinite alternate}
  .hero-flow-orbit:nth-child(2){animation:heroFlowOrbitReverse 22s ease-in-out infinite alternate}
  .hero-flow-orbit:nth-child(3){animation:heroFlowOrbit 26s ease-in-out infinite alternate-reverse}
}

#hero.hero-flow-offscreen .hero-flow-orbit{
  animation-play-state:paused!important;
  will-change:auto;
}

@keyframes heroFlowOrbit{
  from{transform:translate3d(-2%,1%,0) rotate(var(--hero-orbit-rotation,0deg)) scale(.98)}
  to{transform:translate3d(5%,-4%,0) rotate(calc(var(--hero-orbit-rotation,0deg) + 6deg)) scale(1.05)}
}

@keyframes heroFlowOrbitReverse{
  from{transform:translate3d(3%,-2%,0) rotate(var(--hero-orbit-rotation,0deg)) scale(1.03)}
  to{transform:translate3d(-5%,4%,0) rotate(calc(var(--hero-orbit-rotation,0deg) - 7deg)) scale(.96)}
}

@media(max-width:768px){
  #hero.hero-flow-enabled{overflow:hidden}
  .hero-flow-canvas{opacity:.52}
  .hero-flow-orbits{inset:-6% -34%}
  .hero-flow-orbit:nth-child(1){width:112%;right:-29%}
  .hero-flow-orbit:nth-child(2){width:90%;right:-18%}
  .hero-flow-orbit:nth-child(3){width:72%;left:-25%}
}

@media(prefers-reduced-motion:reduce){
  .hero-flow-canvas{display:none}
  .hero-flow-orbit{animation:none!important;will-change:auto}
}


/* Static orbit markup prevents late layout-instability; reveal only after enhancement is ready. */
#hero:not(.hero-flow-enabled) .hero-flow-orbits{opacity:0}
#hero.hero-flow-enabled .hero-flow-orbits{opacity:1}
