/* Communauté hero — constellation (inline SVG, page CSS drives animation) */

.gf-communaute-hero-root .gf-communaute-constellation-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.gf-communaute-hero-root .gf-constellation-line {
  stroke: #e8a045;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.75;
}

.gf-communaute-hero-root .gf-constellation-line--corner {
  stroke: #db683a;
}

.gf-communaute-hero-root .gf-constellation-node {
  fill: #e8a045;
  stroke: rgba(232, 160, 69, 0.35);
  stroke-width: 4px;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.gf-communaute-hero-root .gf-constellation-node--corner {
  fill: #db683a;
  stroke: rgba(219, 104, 58, 0.32);
  stroke-width: 3px;
}

.gf-communaute-hero-root .gf-constellation-halo {
  fill: #e8a045;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line {
    animation: gf-communaute-line-draw 900ms var(--gf-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) forwards;
  }

  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--1 { animation-delay: 1.55s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--2 { animation-delay: 1.68s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--3 { animation-delay: 1.81s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--4 { animation-delay: 1.94s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--5 { animation-delay: 2.07s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--6 { animation-delay: 2.2s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--c1 { animation-delay: 2.45s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--c2 { animation-delay: 2.58s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-line--c3 { animation-delay: 2.71s; }

  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node {
    animation:
      gf-communaute-dot-pop 500ms var(--gf-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both,
      gf-communaute-dot-twinkle 4.5s var(--gf-ease-in-out, cubic-bezier(0.65, 0, 0.35, 1)) infinite 2.4s;
  }

  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node--1 { animation-delay: 1.45s, 2.55s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node--2 { animation-delay: 1.6s, 2.7s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node--3 { animation-delay: 1.75s, 2.85s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node--4 { animation-delay: 1.9s, 3s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node--5 { animation-delay: 2.05s, 3.15s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node--c1 { animation-delay: 2.5s, 3.6s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node--c2 { animation-delay: 2.65s, 3.75s; }
  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-node--c3 { animation-delay: 2.8s, 3.9s; }

  .gf-communaute-hero-root .gf-communaute-hero--animate .gf-constellation-halo {
    animation: gf-communaute-halo-pulse 3.6s var(--gf-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) infinite 2.4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gf-communaute-hero-root .gf-constellation-line {
    stroke-dashoffset: 0;
    opacity: 0.85;
    animation: none !important;
  }

  .gf-communaute-hero-root .gf-constellation-node,
  .gf-communaute-hero-root .gf-constellation-halo {
    opacity: 1;
    animation: none !important;
  }
}

@keyframes gf-communaute-line-draw {
  to {
    stroke-dashoffset: 0;
    opacity: 0.9;
  }
}

@keyframes gf-communaute-dot-pop {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  60% {
    opacity: 1;
    transform: scale(1.15);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes gf-communaute-dot-twinkle {
  0%, 100% {
    transform: scale(1);
    stroke-width: 4px;
  }

  50% {
    transform: scale(1.18);
    stroke-width: 10px;
  }
}

@keyframes gf-communaute-halo-pulse {
  0% {
    opacity: 0;
    transform: scale(1);
  }

  50% {
    opacity: 0.18;
    transform: scale(2.4);
  }

  100% {
    opacity: 0;
    transform: scale(3.6);
  }
}