/* =========================================================================
   HORNETPATH - LIQUID GLASS
   Verre epais qui refracte, capte la lumiere sur ses aretes et reagit au
   pointeur. Depend de tokens.css. Quatre couches, dans cet ordre :

     1. TEINTE      un voile de --cream translucide, pour le contraste du texte
     2. FILTRE      backdrop-filter : flou + saturation + luminosite
     3. SPECULAIRE  liseres internes clairs sur les aretes hautes et basses
     4. VIVANT      lueur qui suit le pointeur (--mx/--my) et refraction SVG

   Le speculaire est ce qui separe le liquid glass du glassmorphism plat de
   2020. Ne jamais retirer les inset shadows.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. BASE
   `.glass` est autonome : il fonctionne seul sur n'importe quel conteneur.
   ------------------------------------------------------------------------- */
.glass {
  --g-blur:   18px;
  --g-sat:    170%;
  --g-tint:   55%;    /* part de --cream dans le voile */
  --g-spec:   .22;    /* intensite du liseré speculaire haut */
  --g-radius: var(--r-glass);

  position: relative;
  isolation: isolate;              /* contient les ::before/::after */
  border-radius: var(--g-radius);
  background: color-mix(in srgb, var(--cream) var(--g-tint), transparent);
  color: var(--ink);

  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(1.06);
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(1.06);

  /* Speculaire : lumiere qui rase l'arete haute, rebond faible en bas.
     L'ombre exterieure reste longue, basse et a spread negatif. */
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / var(--g-spec)),
    inset 0 -1px 0 0 rgb(255 255 255 / .06),
    inset 1px 0 0 0 rgb(255 255 255 / .05),
    inset -1px 0 0 0 rgb(255 255 255 / .05),
    var(--sh-2);

  transition:
    box-shadow var(--t-base) var(--ease),
    transform  var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease);
}

:root.light .glass {
  --g-tint: 72%;
  --g-spec: .8;
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / var(--g-spec)),
    inset 0 -1px 0 0 rgb(255 255 255 / .35),
    inset 1px 0 0 0 rgb(255 255 255 / .3),
    inset -1px 0 0 0 rgb(255 255 255 / .3),
    var(--sh-2);
}

/* -------------------------------------------------------------------------
   2. ARETE REFRACTANTE
   Un anneau en degrade conique : le verre plie la lumiere plus fort sur deux
   aretes opposees. C'est le detail qui donne l'epaisseur.
   ------------------------------------------------------------------------- */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 145deg,
    rgb(var(--rgb-honey) / .55),
    rgb(255 255 255 / .06) 25%,
    rgb(var(--rgb-azure) / .35) 48%,
    rgb(255 255 255 / .04) 70%,
    rgb(var(--rgb-ember) / .5)
  );
  /* n'affiche que le contour de 1px */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .9;
}

/* En clair, le blanc du degrade disparait sur fond creme : on remplace les
   segments neutres par de la cire pour garder l'arete lisible. */
:root.light .glass::before {
  background: conic-gradient(
    from 145deg,
    rgb(var(--rgb-honey) / .75),
    rgb(231 220 192 / .95) 25%,
    rgb(var(--rgb-azure) / .3) 48%,
    rgb(231 220 192 / .95) 70%,
    rgb(var(--rgb-ember) / .7)
  );
  opacity: 1;
}

/* -------------------------------------------------------------------------
   3. LUEUR QUI SUIT LE POINTEUR
   Alimentee par --mx / --my (en %), poses par le JS de patterns.html.
   Sans JS, la lueur reste au centre : degradation propre.
   ------------------------------------------------------------------------- */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    22rem 22rem at var(--mx, 50%) var(--my, 0%),
    rgb(var(--rgb-ember) / .16),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
  pointer-events: none;
}
.glass:hover::after,
.glass:focus-within::after { opacity: 1; }

/* -------------------------------------------------------------------------
   4. VARIANTES D'EPAISSEUR
   Deux profondeurs de verre par ecran, pas trois. Au-dela, l'oeil perd la
   hierarchie et le GPU souffre.
   ------------------------------------------------------------------------- */

/* Voile : barres, chips, elements qui doivent laisser voir le fond. */
.glass--thin {
  --g-blur: 10px;
  --g-sat: 140%;
  --g-tint: 38%;
  --g-spec: .14;
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / var(--g-spec)),
    var(--sh-1);
}

/* Bloc : modales, panneaux flottants, ce qui doit dominer le fond. */
.glass--thick {
  --g-blur: 30px;
  --g-sat: 190%;
  --g-tint: 78%;
  --g-spec: .3;
  box-shadow:
    inset 0 1px 0 0 rgb(255 255 255 / var(--g-spec)),
    inset 0 -1px 0 0 rgb(255 255 255 / .08),
    var(--sh-3);
}

/* Teinte miel : reserve a UN element focal par ecran. */
.glass--ember {
  background:
    linear-gradient(155deg, rgb(var(--rgb-ember) / .16), rgb(var(--rgb-honey) / .06) 55%, transparent),
    color-mix(in srgb, var(--cream) var(--g-tint), transparent);
}

/* Teinte bleue : categorie « cours », etats informatifs. */
.glass--azure {
  background:
    linear-gradient(155deg, rgb(var(--rgb-azure) / .18), transparent 60%),
    color-mix(in srgb, var(--cream) var(--g-tint), transparent);
}

/* Interactif : le verre se souleve et s'eclaircit sous le doigt. */
.glass--interactive { cursor: pointer; }
.glass--interactive:hover {
  transform: translateY(-3px);
  --g-spec: .34;
}
.glass--interactive:active { transform: translateY(-1px) scale(.995); }

/* -------------------------------------------------------------------------
   5. REFRACTION REELLE (optionnelle, progressive)
   Applique un feDisplacementMap au backdrop : le fond se tord derriere le
   verre. Necessite le <svg> de filtres (voir patterns.html, bloc 11).
   Chromium et Safari recents uniquement, d'ou le @supports.
   Cout GPU eleve : reserve aux ecrans vitrine, jamais aux listes.
   ------------------------------------------------------------------------- */
@supports (backdrop-filter: url(#hp-refract)) {
  .glass--refract {
    -webkit-backdrop-filter: url(#hp-refract) blur(var(--g-blur)) saturate(var(--g-sat));
    backdrop-filter: url(#hp-refract) blur(var(--g-blur)) saturate(var(--g-sat));
  }
}

/* -------------------------------------------------------------------------
   6. REFLET MOBILE (« sheen »)
   Une bande de lumiere traverse le verre au survol. Une seule fois, pas de
   boucle : une animation en boucle transforme le verre en gadget.
   ------------------------------------------------------------------------- */
.glass--sheen { overflow: hidden; }
.glass--sheen > .sheen {
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgb(255 255 255 / .1) 48%,
    rgb(var(--rgb-honey) / .16) 52%,
    transparent 62%
  );
  transform: translateX(-70%);
  pointer-events: none;
  transition: transform .9s var(--ease-out);
}
.glass--sheen:hover > .sheen { transform: translateX(70%); }

/* -------------------------------------------------------------------------
   7. FILET DE SECURITE
   Si le navigateur ne sait pas flouter l'arriere-plan, on opacifie le voile :
   du texte sur un fond a moitie transparent et non floute est illisible.
   ------------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass--thin,
  .glass--thick {
    background: color-mix(in srgb, var(--cream) 94%, transparent);
  }
}

/* -------------------------------------------------------------------------
   8. ACCESSIBILITE ET PERFORMANCE
   ------------------------------------------------------------------------- */

/* Le flou est un cout GPU par pixel : on l'allege sur petit ecran. */
@media (max-width: 560px) {
  .glass { --g-blur: 12px; --g-tint: 76%; }
  .glass--thick { --g-blur: 18px; --g-tint: 88%; }
  .glass--refract { backdrop-filter: blur(12px) saturate(150%); }
}

/* Mouvement reduit : le verre reste, le mouvement part. */
@media (prefers-reduced-motion: reduce) {
  .glass { transition: none; }
  .glass--interactive:hover { transform: none; }
  .glass--sheen > .sheen { display: none; }
  .glass::after { transition: none; }
}

/* Contraste eleve : le verre devient une surface opaque bordee. */
@media (prefers-contrast: more) {
  .glass, .glass--thin, .glass--thick {
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line);
    box-shadow: none;
  }
  .glass::before, .glass::after { display: none; }
}

/* Transparence reduite (reglage systeme iOS / macOS). */
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass--thin, .glass--thick {
    background: var(--cream);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}