/* ══ THE GLASS ═══════════════════════════════════════════════════════════
   Ported from lab/glass-lab on 2026-08-27, Can's light and dark sets from
   the bench's saved slots ("State 3" for light, "d1" for dark) with his two
   rules on top: frost 6px everywhere, and the tint follows the ground, bone
   on paper and ink on ink.

   THREE SURFACES, ONE PRIMITIVE. The header (.site-nav), every button
   (.btn, the brass fill retired 2026-08-27 on Can's call) and the cards
   (.fy-card, the close's two secondary doors, What's next's price plaque).
   Each is three layers:

     ::before, or a .glass-back child   the backdrop: blur and saturate, and
                                        in Chromium the refraction filter
                                        assets/glass.js builds for the pill
                                        and the cards
     ::after                            the tint, the specular rim and the
                                        base hairline, all inset shadows
     .glass-line child                  the double orbit, two brass lights
                                        turning on a ring masked to the
                                        line width. Pills and cards only,
                                        and not the two pills inside the
                                        header: Can's call, the header does
                                        not move.

   The header uses ::before for its backdrop so it blurs with the script
   absent. The cards cannot: .fy-card::before is the pending-proof caption,
   so glass.js appends a .glass-back child to every pill and card instead,
   and without the script those surfaces are tint, rim and line only.

   The close's PRIMARY door is not here. It keeps the light it was given on
   2026-08-23 (one spark, one lap, the pointer ring); see "The light on the
   primary door" in index.html.

   BROWSERS. Chrome and Edge render the refraction. Safari and Firefox do
   not take SVG filters in backdrop-filter, so the pill and the cards there
   are the frosted fallback in the var() below. Same numbers, no lensing.
   ═══════════════════════════════════════════════════════════════════════ */

@property --glass-ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ── The roles, light first, dark under the root flag ─────────────────── */

.site-nav {
  --g-blur: 6px;
  --g-sat: 1.55;
  --g-tint: rgba(231, 231, 231, 0.5);
  --g-rim1: 0.84;
  --g-rim2: 0.58;
  --g-linew: 0.5px;
  --g-edge: rgba(184, 115, 51, 0.7);
  --g-shadow: 0.47;
}

:root[data-theme="dark"] .site-nav {
  --g-tint: rgba(19, 19, 19, 0.5);
  --g-rim1: 0.4;
  --g-rim2: 0.275;
  --g-linew: 1px;
  --g-edge: rgba(19, 19, 19, 0.49);
  --g-shadow: 0.41;
}

.btn {
  --g-blur: 6px;
  --g-sat: 1.5;
  --g-tint: rgba(231, 231, 231, 0.14);
  --g-tint-hover: rgba(231, 231, 231, 0.28);
  --g-rim1: 0.8;
  --g-rim2: 0.55;
  --g-linew: 1px;
  --g-edge: rgba(22, 22, 22, 0.1);
  --g-shadow: 0.55;
}

.fy-card,
.cl-door--secondary,
.nx-money__plaque {
  --g-blur: 6px;
  --g-sat: 1.5;
  --g-tint: rgba(231, 231, 231, 0.16);
  --g-tint-hover: rgba(231, 231, 231, 0.16);
  --g-rim1: 0.8;
  --g-rim2: 0.55;
  --g-linew: 1px;
  --g-edge: rgba(22, 22, 22, 0.1);
  --g-shadow: 0.55;
}

:root[data-theme="dark"] .btn {
  --g-tint: rgba(19, 19, 19, 0.14);
  --g-tint-hover: rgba(19, 19, 19, 0.3);
}

:root[data-theme="dark"] .fy-card,
:root[data-theme="dark"] .cl-door--secondary,
:root[data-theme="dark"] .nx-money__plaque {
  --g-tint: rgba(19, 19, 19, 0.16);
  --g-tint-hover: rgba(19, 19, 19, 0.16);
}

/* ── The primitive ────────────────────────────────────────────────────── */

.site-nav,
.btn,
.fy-card,
.cl-door--secondary,
.nx-money__plaque {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: 0 16px 38px -22px rgba(0, 0, 0, var(--g-shadow));
}

/* The header is fixed and moves on its own translate; only the paint changes. */
.site-nav { position: fixed; }

.site-nav::before,
.glass-back {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: var(--g-filter, blur(var(--g-blur)) saturate(var(--g-sat)));
}

.site-nav::after,
.btn::after,
.fy-card::after,
.cl-door--secondary::after,
.nx-money__plaque::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--g-tint);
  box-shadow:
    inset 1.5px 1.5px 0 -1px rgba(255, 255, 255, var(--g-rim1)),
    inset 0 0 3px 1px rgba(255, 255, 255, var(--g-rim2)),
    inset 0 0 0 var(--g-linew) var(--g-edge);
  transition: background-color 450ms var(--ease);
}

/* What the surface holds sits above the tint. The header's children are
   its brand, nav and actions; the card's are the quote and the attribution. */
.site-nav > *,
.btn > *,
.fy-card > *,
.cl-door--secondary > *,
.nx-money__plaque > * {
  position: relative;
  z-index: 2;
}

/* The price plaque in What's next, Can's note of 2026-08-27: the same card
   glass as the proof cards, so every container on the page is one object.
   Its own rule carries the section's specificity, so this one matches it. */
.nx-section .nx-money__plaque {
  border: 1px solid transparent;
  background: transparent;
}

/* ── The pill ─────────────────────────────────────────────────────────── */

/* EVERY button, Can's call of 2026-08-27: the brass fill goes, the ghost's
   hairline and wash go, the glass carries all of it. The label is page ink
   in both themes, so it reads on the bone tint and on the ink one. */
.btn,
.btn:hover {
  background: transparent;
  border-color: transparent;
  color: var(--ink);
}

/* The pop, Can's note of 2026-08-27: up two, out three and a half percent,
   and the shadow drops deeper and darker. The refraction pulses with it
   (glass.js). Scale rides its own transition so the page's own translate
   and shadow ones stay as they are. */
.btn {
  transition:
    translate 450ms var(--ease),
    scale 450ms var(--ease),
    box-shadow 450ms var(--ease),
    background-color 450ms var(--ease);
}

.btn:hover {
  box-shadow: 0 26px 52px -20px rgba(0, 0, 0, calc(var(--g-shadow) * 1.7));
  translate: 0 -2px;
  scale: 1.035;
}

.btn:hover::after { background: var(--g-tint-hover); }

/* The header stays still (Can), with one exception he asked for: its Let's
   Begin carries the double orbit like the page's. Consultation does not.
   Neither casts a shadow at rest inside a bar that has its own; on hover
   they pop like every other pill. */
.site-nav .btn { box-shadow: none; }
.site-nav__custom > .glass-line { display: none; }

html[data-reduced-motion="true"] .btn:hover { translate: none; scale: none; }
@media (prefers-reduced-motion: reduce) { .btn:hover { translate: none; scale: none; } }

/* ── The cards ────────────────────────────────────────────────────────── */

/* The pending flag's dashed hairline has nothing to dash now: the caption
   above the quote still marks the placeholder. */
.fy-section[data-proof="pending"] .fy-card { border-style: solid; }

/* ── The double orbit ─────────────────────────────────────────────────── */

/* A ring the width of the line, masked out of the centre, carrying two
   brass lights opposite each other. One turn every six seconds, linear, so
   the eye cannot find a beat in it. */
.glass-line {
  position: absolute;
  inset: -1px;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  padding: var(--g-linew);
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* The two travelling lights. Copper since 2026-08-31, in step with
     --brass; written out rather than var()'d because a conic gradient needs
     the alpha stops and colour-mix in a keyframed gradient is not worth the
     compatibility. If --brass moves again, move these six with it. */
  background: conic-gradient(
    from var(--glass-ang),
    rgba(184, 115, 51, 0) 0deg,
    rgba(184, 115, 51, 0.9) 45deg,
    rgba(184, 115, 51, 0) 90deg,
    rgba(184, 115, 51, 0) 180deg,
    rgba(184, 115, 51, 0.9) 225deg,
    rgba(184, 115, 51, 0) 270deg
  );
  animation: glass-turn 6s linear infinite;
}

@keyframes glass-turn { to { --glass-ang: 360deg; } }

/* No motion for a reader who asked for none: the two lights park where they
   start, top and bottom, and the refraction does not pulse (glass.js). */
html[data-reduced-motion="true"] .glass-line { animation: none; }
@media (prefers-reduced-motion: reduce) { .glass-line { animation: none; } }