/* PureRGB — « Lumière RGB » : shader du hero, anneaux LED, halos des pages internes. */

/* ─── shader plein hero ─── */
.rgb-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.rgb-light.on { opacity: 1; }

/* la grille de points du site reste visible par-dessus la lumière (effet matrice de LED) */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
  background-size: 28px 28px;
}

/* repli sans WebGL / appareil faible : deux halos conic qui tournent lentement */
.rgb-fallback {
  position: absolute;
  right: -20%;
  top: 10%;
  width: 90vmax;
  height: 90vmax;
  max-width: 1100px;
  max-height: 1100px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ef4444, #d946ef, #3b82f6, #22d3ee, #22c55e, #eab308, #ef4444);
  /* disque adouci par un masque radial plutôt qu'un filter: blur (rotation = composition seule) */
  -webkit-mask: radial-gradient(closest-side, #000, transparent);
  mask: radial-gradient(closest-side, #000, transparent);
  opacity: 0.2;
  will-change: transform;
  animation: rgb-spin 24s linear infinite;
}

@keyframes rgb-spin { to { transform: rotate(360deg); } }

/* ─── anneau LED (bordure qui tourne) ─── */
.rgb-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.rgb-ring i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 125%;
  aspect-ratio: 1;
  margin-left: -62.5%;
  translate: 0 -50%;
  background: conic-gradient(from 0deg, #ef4444, #d946ef, #3b82f6, #22d3ee, #22c55e, #eab308, #ef4444);
  will-change: transform;
  animation: rgb-spin 6s linear infinite;
  animation-play-state: paused;
}

.rgb-ring--live { opacity: 0.85; }
.rgb-ring--live i { animation-play-state: running; }

.feature-card:hover > .rgb-ring,
.release-card:hover > .rgb-ring { opacity: 1; mix-blend-mode: screen; } /* lumière additive, seulement pendant le survol (mélange coûteux en continu) */
.feature-card:hover > .rgb-ring i,
.release-card:hover > .rgb-ring i { animation-play-state: running; animation-duration: 3s; }

/* ─── pages internes : halo RGB derrière le titre ─── */
.page-main { isolation: isolate; overflow-x: clip; }
.page-main::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  width: min(1000px, 130vw);
  aspect-ratio: 1;
  margin-left: calc(min(1000px, 130vw) / -2);
  border-radius: 50%;
  background: conic-gradient(from 0deg, #ef4444, #d946ef, #3b82f6, #22d3ee, #22c55e, #eab308, #ef4444);
  -webkit-mask: radial-gradient(closest-side, #000, transparent);
  mask: radial-gradient(closest-side, #000, transparent);
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
  translate: 0 -45%;
  will-change: transform;
  animation: rgb-spin 30s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .rgb-ring i, .rgb-fallback, .page-main::before { animation: none; }
}