/* ------------------------------------------------------------------
   schema-depth.css — la profondeur du schéma, du fond vers l'avant :
   1. l'aurore : trois taches très larges qui dérivent lentement ;
   2. la grille locale : 32 px, visible au centre seulement ;
   3. le panneau de verre : flou, liseré poli, anneau conique qui tourne, grain.
   (4. la constellation vit dans schema-core.css.)
   Tout ce qui bouge ici bouge par transform ou opacity, jamais autrement.
   ------------------------------------------------------------------ */

.schema {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* --- 1. L'aurore : des dégradés déjà doux, sans filtre de flou (le verre coûte assez cher) --- */
.aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.aurora span {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}

.aurora-a {
  top: 8%;
  left: 12%;
  width: 700px;
  height: 520px;
  background: radial-gradient(closest-side, rgb(var(--gold-rgb) / 0.06), transparent);
}

.aurora-b {
  top: 30%;
  right: 6%;
  width: 560px;
  height: 480px;
  background: radial-gradient(closest-side, rgb(var(--teal-rgb) / 0.04), transparent);
}

.aurora-c {
  bottom: 4%;
  left: 38%;
  width: 420px;
  height: 380px;
  background: radial-gradient(closest-side, rgb(var(--gold-rgb) / 0.05), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .aurora-a { animation: drift-a 34s ease-in-out -6s infinite alternate; }
  .aurora-b { animation: drift-b 40s ease-in-out -18s infinite alternate; }
  .aurora-c { animation: drift-c 28s ease-in-out -11s infinite alternate; }
}

@keyframes drift-a {
  to { transform: translate(90px, 40px) scale(1.12); }
}

@keyframes drift-b {
  to { transform: translate(-110px, -30px) scale(0.9); }
}

@keyframes drift-c {
  to { transform: translate(-60px, -70px) scale(1.18); }
}

/* --- 2. La grille locale : elle donne l'échelle, et s'efface vers les bords --- */
.flow-grid {
  position: relative;
}

.stage-grid {
  position: absolute;
  inset: -40px -24px;
  z-index: -1;
  background:
    linear-gradient(rgb(var(--gold-rgb) / 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgb(var(--gold-rgb) / 0.06) 1px, transparent 1px) 0 0 / 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 20%, transparent 100%);
  mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black 20%, transparent 100%);
  pointer-events: none;
}

/* --- 3. Le panneau de verre --- */
.heart {
  position: relative;
  isolation: isolate;
  border-radius: 24px;
  background: rgb(var(--deep-rgb) / 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  box-shadow:
    inset 0 1px 0 rgb(var(--white-rgb) / 0.1),
    0 40px 120px rgb(var(--black-rgb) / 0.55),
    0 0 90px rgb(var(--gold-rgb) / 0.07);
}

/* Le grain : bruit fractal statique, à peine perceptible */
.heart::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px;
  opacity: 0.02;
  pointer-events: none;
}

/* L'anneau : un cadre d'un pixel, évidé par mask-composite. À l'intérieur, un disque de dégradé
   conique qui tourne — par transform, jamais en repeignant le dégradé. */
.heart-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  padding: 1px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  pointer-events: none;
}

.heart-ring-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  background: conic-gradient(
    rgb(var(--gold-rgb) / 0.55),
    rgb(var(--teal-rgb) / 0.25) 25%,
    rgb(var(--gold-rgb) / 0.08) 55%,
    rgb(var(--gold-rgb) / 0.55)
  );
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: no-preference) {
  .heart-ring-spin {
    animation: ring-spin 18s linear infinite;
  }
}

@keyframes ring-spin {
  to { transform: translate(-50%, -50%) rotate(1turn); }
}

/* Sur téléphone, un flou plus léger : les processeurs graphiques mobiles le paient cher */
@media (max-width: 767px) {
  .heart {
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    backdrop-filter: blur(10px) saturate(120%);
  }

  .heart-ring-spin {
    width: 220%;
  }

  .aurora-a { width: 460px; height: 420px; left: -20%; }
  .aurora-b { width: 380px; height: 360px; right: -30%; }
  .aurora-c { width: 320px; height: 300px; left: 10%; }
}