/* Eden glass: canonical recipe (v1, 2026-10-02)
 * Tuned by Jason in compare/glass-variants.html over four backdrops: a soft orb, a sharp sparkle
 * field, a colourful game frame and a bright white scene. This file is the source of record; apps
 * import it, they do not restate it.
 *
 * Two weights, one material:
 *   .eden-glass          CONTENT  cards, bubbles, panels. Smoked acrylic: low blur, polished edge.
 *   .eden-glass-control  CONTROL  buttons, menus, bars. Denser and darker, lifted by a shadow.
 *
 * The specular edge and the sheen are gradients used as LIGHT, not as fill (pending Jason's DD-14
 * exception ruling).
 */
:root {
  /* content */
  --eden-glass-fill:          rgba(10, 14, 20, .34);
  --eden-glass-filter:        blur(4px) saturate(.98) brightness(.88);
  /* control */
  --eden-glass-control-fill:   rgba(8, 11, 16, .50);
  --eden-glass-control-filter: blur(14px) saturate(.98) brightness(.60);
  --eden-glass-control-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  /* shared */
  --eden-glass-radius:   12px;
  --eden-glass-lip:      inset 0 1px 0 rgba(255, 255, 255, .06);
  --eden-glass-grain:    .07;
  --eden-glass-specular: linear-gradient(140deg, rgba(255,255,255,.42), rgba(255,255,255,.10) 28%, rgba(255,255,255,.03) 55%, rgba(242,232,210,.16) 100%);
  --eden-glass-sheen:    linear-gradient(105deg, transparent 38%, rgba(242,232,210,.07) 50%, transparent 62%);
  --eden-glass-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.eden-glass, .eden-glass-control {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--eden-glass-radius);
  border: 0;
  background: var(--eden-glass-fill);
  -webkit-backdrop-filter: var(--eden-glass-filter); backdrop-filter: var(--eden-glass-filter);
  box-shadow: var(--eden-glass-lip);
}
.eden-glass-control {
  background: var(--eden-glass-control-fill);
  -webkit-backdrop-filter: var(--eden-glass-control-filter); backdrop-filter: var(--eden-glass-control-filter);
  box-shadow: var(--eden-glass-control-shadow), var(--eden-glass-lip);
}

/* grain: the frosted texture, identical on every backdrop */
.eden-glass::before, .eden-glass-control::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background-image: var(--eden-glass-noise); background-size: 160px;
  opacity: var(--eden-glass-grain); mix-blend-mode: overlay;
}
/* specular edge: a 1px gradient hairline that catches light top-left */
.eden-glass::after, .eden-glass-control::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--eden-glass-specular);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* sheen: always on for content glass, hover/active only for controls.
   Markup: <span class="eden-glass-sheen" aria-hidden="true"></span> as the first child. */
.eden-glass-sheen {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--eden-glass-sheen); background-size: 240% 100%;
  animation: eden-glass-sheen 9s linear infinite;
}
.eden-glass-control .eden-glass-sheen { opacity: 0; transition: opacity .25s ease;  animation-play-state: paused; }   /* invisible until hover: no need to sweep */
.eden-glass-control:hover .eden-glass-sheen,
.eden-glass-control[aria-pressed="true"] .eden-glass-sheen,
.eden-glass-control.is-active .eden-glass-sheen { opacity: 1; }
.eden-glass-control:hover .eden-glass-sheen, .eden-glass-control[aria-pressed="true"] .eden-glass-sheen, .eden-glass-control.is-active .eden-glass-sheen { animation-play-state: running; }
/* a pane off screen (js/site.js restOffscreen): its loops pause, and pick up where they were when it comes back */
.anim-rest, .anim-rest *, .anim-rest *::before, .anim-rest *::after { animation-play-state: paused !important; }
@keyframes eden-glass-sheen { 0% { background-position: 110% 0; } 100% { background-position: -130% 0; } }
@media (prefers-reduced-motion: reduce) { .eden-glass-sheen { animation: none; } }

/* no backdrop-filter support (old browsers, some WebViews): fall back to solid ink so text stays legible */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .eden-glass         { background: rgba(10, 14, 20, .86); }
  .eden-glass-control { background: rgba(8, 11, 16, .92); }
}