/* reko.studio — glass tiers A/B, knockout hover, iridescence, grain + scrim
   Load order: tokens.css -> base.css -> glass.css */
/* ---------- fixed overlay layers (z-ledger §4.6) ---------- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:var(--noise) 0 0 repeat; background-size:128px 128px;
  opacity:.035; mix-blend-mode:overlay;
}
.scrim{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse 76% 58% at 50% 44%, rgba(5,7,12,.58), rgba(5,7,12,0) 68%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(2,3,6,0) 42%, rgba(2,3,6,.72) 100%);
}

/* ============================================================
 * GLASS  (spec §5 · GLASS.md Tier B — everyone gets this)
 * ========================================================== */
.glass{
  position:relative;
  isolation:isolate;
  border-radius:var(--glass-radius);
  background:
    linear-gradient(158deg, rgba(255,255,255,.075), rgba(255,255,255,.026) 46%, rgba(255,255,255,.052)),
    var(--glass-bg);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
          backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(255,255,255,.035),
    inset 0 0 12px -4px rgba(190,225,255,.14),
    inset 0 0 44px rgba(120,190,255,.045);
}
/* specular top highlight (§5.3) */
.glass::before{
  content:""; position:absolute; top:1px; left:12%; right:12%; height:1px;
  background:linear-gradient(90deg, transparent,
    rgba(255,255,255,.50) 20%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.48) 80%, transparent);
  opacity:.62; border-radius:1px; pointer-events:none; z-index:3;
}
/* 1px gradient hairline, light from upper-left at 148° (§5.2).
   Multi-hue stops fake chromatic dispersion at the rim. STATIC — the stops are
   fixed; nothing here cycles, rotates or animates. */
.glass::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(148deg,
    var(--hairline-hi) 0%,
    rgba(255,255,255,.10) 34%,
    var(--hairline-lo) 58%,
    rgba(255,255,255,.22) 100%);
  -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; z-index:3;
}
/* in-card noise — kills 8-bit banding through the blur (GLASS.md Tier B) */
.noise{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:var(--noise) 0 0 repeat; background-size:128px 128px;
  opacity:.032; mix-blend-mode:overlay;
  /* negative z-index keeps it above the card background (and the filtered
     backdrop) but below content, WITHOUT forcing a z-index:1 stacking context
     onto every sibling — which would isolate the knockout blend below. */
  z-index:-1;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{ background:linear-gradient(158deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), rgba(9,13,21,.88); }
}
@media (prefers-reduced-transparency:reduce){
  .glass{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:rgba(9,13,21,.92);
  }
}
/* ---- knockout white-light hover ------------------------------------------
   .knock carries BOTH the white surface and the text, so the pair blends as a
   single unit: screen(white, backdrop) = white, screen(black, backdrop) =
   backdrop. The letters therefore become holes onto the card's filtered
   backdrop — dark glass plus the live fluid behind it.
   mix-blend-mode is ALWAYS on: at rest the surface is transparent and the text
   is light, and screen(light, near-black) is a visual no-op (+0.4%), so there
   is no blend-mode switch to flash on tap. Only colours transition. */
.knock{
  position:relative;
  display:grid; grid-template-columns:minmax(0,max-content);
  column-gap:var(--grid-gap); row-gap:2px; align-items:baseline;
  justify-self:start;
  padding:7px 10px; margin:-7px -10px;
  border-radius:var(--r-icon);
  background-color:transparent;
  mix-blend-mode:screen;
  transition:background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.knock > .lead{ grid-column:1; grid-row:1; color:var(--text-primary); font-weight:590;
                position:relative; z-index:1; }
.knock > .sub { grid-column:1; color:var(--text-secondary); font-weight:400;
                position:relative; z-index:1; }
@media (min-width:768px){
  .knock{ grid-template-columns:var(--grid-lead) minmax(0,1fr); }
  .knock > .sub{ grid-column:2; grid-row:1; }
}
/* iridescent shimmer, composited onto the white plate before it blends out */
.knock::before{
  content:""; position:absolute; z-index:0; top:0; bottom:0; left:-13%; width:126%;
  border-radius:inherit;
  background:linear-gradient(105deg,
    transparent 18%,
    rgba(168,120,255,.10) 34%,
    rgba(110,220,255,.13) 47%,
    rgba(230,120,255,.09) 60%,
    transparent 78%);
  opacity:0; pointer-events:none;
  transition:opacity 300ms var(--ease-out);
}
.rows a:hover .knock, .rows a:focus-visible .knock, .rows a:active .knock,
.rows .copy-btn:hover .knock, .rows .copy-btn:focus-visible .knock,
.rows .copy-btn:active .knock{
  background-image:linear-gradient(140deg,#F4F7FB,#FFFFFF 60%);
  background-color:#FFFFFF;
  transition-duration:200ms;
}
.rows a:hover .knock > .lead, .rows a:focus-visible .knock > .lead,
.rows a:active .knock > .lead,
.rows .copy-btn:hover .knock > .lead, .rows .copy-btn:focus-visible .knock > .lead,
.rows .copy-btn:active .knock > .lead{ color:#000; }
.rows a:hover .knock > .sub, .rows a:focus-visible .knock > .sub,
.rows .copy-btn:hover .knock > .sub, .rows .copy-btn:focus-visible .knock > .sub{ color:#242A34; }
.rows a:hover .knock::before, .rows a:focus-visible .knock::before,
.rows .copy-btn:hover .knock::before, .rows .copy-btn:focus-visible .knock::before{
  opacity:1; animation:iri-sweep 1.9s var(--ease-soft) infinite alternate;
}
.rows a:active .knock, .rows .copy-btn:active .knock{ animation:knock-pulse 190ms var(--ease-out); }

/* the knockout inverts the at-rest text rule too */
.rows .copy-btn:hover .vtext,.rows .copy-btn:focus-visible .vtext{
  background-image:linear-gradient(#000,#000);
}

/* Tier-A only: a hovered row nudges its card's backdrop saturate. CSS var
   switch — the filter graph itself never animates. */
.glass-tier-a .card-slim:has(.rows a:hover, .rows a:focus-visible,
                             .rows .copy-btn:hover, .rows .copy-btn:focus-visible){
  --ta-sat:1.58; --ta-bright:1.12;
}


/* ---------- knockout keyframes ---------- */
/* Short drift, not a wide sweep: the highlight stays within/just beyond the
   white plate. Same duration, easing and alternate behaviour. */
@keyframes iri-sweep{ from{ transform:translateX(-8%); } to{ transform:translateX(8%); } }
/* Applied to .knock itself, never to an ancestor: a filter on an ancestor
   creates an isolated group and would break the knockout mid-tap. */
@keyframes knock-pulse{
  0%  { filter:none; }
  40% { filter:brightness(1.10) saturate(1.20); }
  100%{ filter:none; }
}
@media (prefers-reduced-motion:reduce){
  .rows a:hover .knock::before,.rows a:focus-visible .knock::before,
  .rows .copy-btn:hover .knock::before,.rows .copy-btn:focus-visible .knock::before{
    animation:none; opacity:.5;
  }
  .rows a:active .knock,.rows .copy-btn:active .knock{ animation:none; }
}

@media print{
  .grain,.scrim{ display:none; }
  .glass{
    background:#fff; color:#000; box-shadow:none; border:1px solid #ccc;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .glass::before,.glass::after,.knock::before,.noise{ display:none; }
  .knock{ mix-blend-mode:normal; }
}