/* Monogramme en verre liquide (voir glass.js). Variables à régler par direction :
   --ag-tint, --ag-blur, --ag-sat, --ag-bright, --ag-shadow */
.ag { position: relative; width: 100%; aspect-ratio: 1000 / 802; perspective: 1400px; }
.ag-shard, .ag-in { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.ag-body, .ag-spec { position: absolute; inset: 0; }
.ag-spec {
  -webkit-mask: var(--ag-mask) center / 100% 100% no-repeat;
          mask: var(--ag-mask) center / 100% 100% no-repeat;
}
.ag-body {
  background: var(--ag-tint, linear-gradient(155deg, rgb(255 255 255 / .26), rgb(255 255 255 / .05) 55%, rgb(255 255 255 / .14)));
  -webkit-backdrop-filter: blur(var(--ag-blur, 14px)) saturate(var(--ag-sat, 1.8)) brightness(var(--ag-bright, 1.1));
          backdrop-filter: blur(var(--ag-blur, 14px)) saturate(var(--ag-sat, 1.8)) brightness(var(--ag-bright, 1.1));
}
.ag-spec { background-size: 100% 100%; background-repeat: no-repeat; }
.ag-shadow { position: absolute; inset: 0; filter: blur(28px); transform: translateY(7%) scale(.94); opacity: .9; pointer-events: none; }
.ag-shadow::before {
  content: ""; position: absolute; inset: 0; background: var(--ag-shadow, rgb(0 0 0 / .45));
  -webkit-mask: var(--ag-mask) center / 100% 100% no-repeat;
          mask: var(--ag-mask) center / 100% 100% no-repeat;
}
.ag:not(.is-ready) { visibility: hidden; }
@keyframes agIn { from { opacity: 0; } }

@media (prefers-reduced-transparency: reduce) {
  .ag-body { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--ag-solid, rgb(200 204 210)); }
}