/* ------------------------------------------------------------------
   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 tache derrière le panneau : ce que le verre floute ;
   3. le panneau de verre : flou, liseré poli, anneau conique qui tourne, grain.
   (4. le rail et la constellation vivent 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 tache derrière le panneau : elle le suit dans les trois mises en page --- */
.flow-grid {
  position: relative;
}

.heart-wrap::before {
  content: "";
  position: absolute;
  inset: -30% -12%;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--gold-rgb) / 0.1), transparent);
  pointer-events: none;
}

/* --- 3. Le panneau de verre --- */
.heart {
  position: relative;
  isolation: isolate;
  border-radius: 24px;
  background: linear-gradient(160deg, rgb(var(--card-rgb) / 0.75), rgb(var(--deep-rgb) / 0.6));
  -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.65),
    rgb(var(--teal-rgb) / 0.28) 25%,
    rgb(var(--gold-rgb) / 0.1) 55%,
    rgb(var(--gold-rgb) / 0.65)
  );
  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%; }
}