/* ============ Tessera — liquid glass layer ============
   Loaded after styles.css / app.css. Surfaces get a translucent fill,
   heavy backdrop blur, an inner specular line and a gradient rim drawn
   with a masked ::after. The rim carries a highlight that follows the
   pointer (--px / --py, set in glass.js). */

@property --g { syntax: "<number>"; initial-value: 0; inherits: false; }

:root {
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.02) 42%, rgba(255, 255, 255, 0.04));
  --glass-tint: rgba(10, 17, 40, 0.34);
  /* small surfaces don't blur live (see below), so they carry more tint */
  --glass-tint-solid: rgba(11, 18, 42, 0.66);
  --glass-blur: blur(16px) saturate(160%);
  --glass-edge: linear-gradient(135deg,
      rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.1) 22%,
      rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.05) 70%,
      rgba(255, 205, 130, 0.5) 100%);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 30px rgba(130, 165, 255, 0.07),
    0 24px 60px -26px rgba(0, 0, 0, 0.7);
}

/* ---------- background liquid ---------- */
/* bg.mp4 is a full-frame film, already darkened in tools/grade_bg.py;
   opacity only eases it back as the page scrolls */
.bg-liquid {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  object-fit: cover; z-index: -1; pointer-events: none;
  opacity: var(--liquid-o, 1);
  background: var(--bg);
  transition: opacity 0.4s linear;
}
.app .bg-liquid { --liquid-o: 0.6; }
/* the canvas fades in on its first frame instead of popping */
/* (the horizon fade is done in the shader: a CSS mask on a full-screen
   canvas costs an extra composite every frame) */
canvas.bg-liquid { opacity: 0; transition: opacity 1.2s ease; }
canvas.bg-liquid.is-ready { opacity: var(--liquid-o, 1); }
.atmo::after { opacity: 0.18; }

/* soft scrim under the hero copy so the liquid never fights the text */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(62% 72% at 24% 58%, rgba(6, 10, 22, 0.62), transparent 72%);
}
@media (max-width: 900px) {
  .hero::before { background: radial-gradient(90% 45% at 50% 62%, rgba(6, 10, 22, 0.6), transparent 75%); }
}

/* ---------- glass surfaces ---------- */
/* Live blur is the expensive part: over an animated background every
   blurred surface is re-blurred every frame. Only the few large panels
   get it; the many small ones use a denser tint that reads the same. */
.card, .nav-inner, .lens {
  background: var(--glass-fill), var(--glass-tint);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-color: transparent;
  box-shadow: var(--glass-shadow);
}
.btn-ghost, .ca, .hv-label, .quick a, .arch-node, .k-card,
.chip, .icon-btn, .eco-mosaic span,
.stat, .sw-box, .tok, .seg, .net-card, .net-pill, .surf, .risk div, .tags div,
.pct button, .dev pre, .toast, .empty .ic {
  background: var(--glass-fill), var(--glass-tint-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
  box-shadow: var(--glass-shadow);
}
.card, .nav-inner, .btn-ghost, .quick a, .arch-node, .k-card, .chip, .icon-btn,
.eco-mosaic span, .stat, .sw-box, .tok, .seg, .net-card, .net-pill, .surf,
.risk div, .tags div, .dev pre, .ca {
  position: relative;
}
.swap { position: sticky; }
.hv-label, .toast, .lens { position: absolute; }
.toast { position: fixed; }

/* the rim */
.card::after, .nav-inner::after, .btn-ghost::after, .ca::after, .hv-label::after,
.quick a::after, .arch-node::after, .k-card::after, .chip::after, .icon-btn::after,
.eco-mosaic span::after, .lens::after, .stat::after, .sw-box::after, .tok::after,
.seg::after, .net-card::after, .net-pill::after, .surf::after, .dev pre::after, .toast::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 2;
  background:
    radial-gradient(220px 220px at var(--px, 18%) var(--py, 0%), rgba(255, 255, 255, var(--spot, 0.55)), transparent 70%),
    var(--glass-edge);
  -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 exclude, linear-gradient(#000 0 0);
  transition: opacity 0.3s;
}
.is-lit { --spot: 0.95; }

/* big panels get a soft top sheen so they read as thick glass */
.card { overflow: hidden; }
.card > *:not(.cta-tiles) { position: relative; z-index: 1; }
.card > .flip { z-index: 3; }
.card::before { z-index: 0; }
.card:not(.m-card):not(.cta)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 60% at 20% -10%, rgba(255, 255, 255, 0.09), transparent 60%),
    radial-gradient(60% 40% at 100% 100%, rgba(245, 170, 60, 0.06), transparent 70%);
}
.swap.card { overflow: visible; }

/* market cards: amber glow follows the cursor, faded in via --g */
/* --g is non-inheriting, so it lives on the pseudo-element itself */
.m-card::before {
  opacity: 1; transition: --g 0.45s;
  background: radial-gradient(420px 280px at var(--mx, 50%) var(--my, 0%), rgba(245, 170, 60, calc(var(--g) * 0.22)), transparent 70%);
}
.m-card:hover::before { --g: 1; }
.m-card:hover { border-color: transparent; }

/* hover / state backgrounds from styles.css would flatten the glass */
.quick a:hover { background: var(--glass-fill), rgba(30, 44, 90, 0.4); }
.btn-ghost:hover { background: linear-gradient(180deg, rgba(255, 214, 140, 0.16), rgba(245, 181, 68, 0.04)), var(--glass-tint-solid); }
.nav.is-scrolled .nav-inner { background: var(--glass-fill), rgba(8, 13, 30, 0.55); }
.arch-node.core { background: linear-gradient(135deg, rgba(245, 181, 68, 0.24), rgba(242, 134, 46, 0.06)), var(--glass-fill), var(--glass-tint-solid); }
.arch-node.base { background: repeating-linear-gradient(135deg, rgba(111, 155, 255, 0.07) 0 10px, transparent 10px 20px), var(--glass-fill), var(--glass-tint-solid); }
.overview {
  background:
    radial-gradient(420px circle at calc(100% - 130px) 90px, rgba(245, 160, 50, 0.2), transparent 65%),
    var(--glass-fill), var(--glass-tint);
}
.overview::after { width: auto; height: auto; }

/* cta keeps its warm glow under the glass */
.cta { background: var(--glass-fill), rgba(14, 22, 52, 0.35); }
.cta::before {
  inset: 0;
  background: radial-gradient(600px 300px at 50% 0%, rgba(245, 160, 50, 0.28), transparent 70%);
}

/* chips and toggles */
.chip.is-active, .seg button.is-active {
  background: linear-gradient(180deg, rgba(255, 214, 140, 0.28), rgba(245, 181, 68, 0.1));
  color: #ffd690;
  box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.4), 0 6px 18px -8px rgba(245, 160, 50, 0.6);
}
.seg button { position: relative; z-index: 3; }
.nav-links a:hover, .nav-links a.is-active {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ---------- liquid primary button ---------- */
.btn-primary {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, #ffe0a0 0%, #f7bb4f 45%, #ea9434 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -3px 8px rgba(160, 70, 0, 0.35),
    0 0 0 1px rgba(255, 210, 120, 0.55),
    0 12px 32px -8px rgba(245, 160, 50, 0.65);
}
.btn-primary::before {
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 2px; height: 46%;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}
.btn-primary::after {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg); transition: left 0.7s var(--ease);
}
.btn-primary:hover::after { left: 120%; }

/* ---------- hero lens ---------- */
.lens {
  inset: 9%; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.16), transparent 38%),
    radial-gradient(circle at 70% 85%, rgba(245, 170, 60, 0.12), transparent 45%),
    rgba(10, 17, 40, 0.18);
  -webkit-backdrop-filter: blur(6px) saturate(180%) brightness(1.1);
  backdrop-filter: blur(6px) saturate(180%) brightness(1.1);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.3),
    inset 0 -10px 40px rgba(111, 155, 255, 0.12),
    inset 0 0 80px rgba(255, 255, 255, 0.04),
    0 40px 100px -30px rgba(0, 0, 0, 0.8);
  /* the wobble is a transform, not border-radius: a radius keyframe
     repaints the lens every frame, a transform only recomposites it */
  animation: lens 12s ease-in-out infinite;
}
@keyframes lens {
  0%, 100% { transform: scale(1, 1) rotate(0deg); }
  33% { transform: scale(1.018, 0.985) rotate(4deg); }
  66% { transform: scale(0.986, 1.016) rotate(-3deg); }
}
.hero-visual canvas { z-index: 1; }
.hv-label { z-index: 3; }

/* ---------- ecosystem tiles as glass ---------- */
.eco-mosaic span { border-radius: 16px; }
.eco-mosaic span.on {
  background: linear-gradient(160deg, rgba(255, 220, 150, 0.95), rgba(242, 134, 46, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -4px 10px rgba(150, 60, 0, 0.3), 0 14px 40px -10px rgba(245, 150, 50, 0.7);
}
.eco-mosaic span.half {
  background: linear-gradient(160deg, rgba(245, 181, 68, 0.3), rgba(245, 181, 68, 0.06)), var(--glass-tint-solid);
}
.k-card:hover { --spot: 0.9; }
/* the five small product cards in the app sit in one row: tint, no live blur */
.prod.card {
  background: var(--glass-fill), var(--glass-tint-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- app chrome ---------- */
.side {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(7, 11, 26, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08);
  border-right-color: transparent;
}
.topbar {
  background: rgba(6, 10, 24, 0.5);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
  border-bottom-color: transparent;
}
@media (max-width: 1080px) { .swap { position: relative; } }
.sw-box { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), rgba(4, 8, 20, 0.45); }
.flip button {
  border: 0; background: var(--glass-fill), rgba(20, 30, 64, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 4px rgba(10, 16, 36, 0.8);
}
.side-nav a.is-active {
  background: linear-gradient(90deg, rgba(245, 181, 68, 0.2), rgba(245, 181, 68, 0.04));
  box-shadow: inset 2px 0 0 var(--amber), inset 0 1px 0 rgba(255, 230, 180, 0.15);
}

/* ---------- scrollbars: thin, dark, amber on hover ---------- */
:root { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: rgba(140, 160, 220, 0.25) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(140, 160, 220, 0.25); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(245, 181, 68, 0.6); background-clip: padding-box; }

/* the sidebar only shows its bar while hovered */
.side { scrollbar-color: transparent transparent; }
.side:hover { scrollbar-color: rgba(140, 160, 220, 0.25) transparent; }
.side::-webkit-scrollbar-thumb { background: transparent; }
.side:hover::-webkit-scrollbar-thumb { background: rgba(140, 160, 220, 0.25); background-clip: padding-box; }

/* a little tighter, so it fits a laptop screen without scrolling at all */
.side { gap: 16px; padding-top: 18px; padding-bottom: 16px; }
.side-nav a { padding: 8px 12px; }
.side-nav small { padding-top: 12px; }
.net-card { padding: 14px; }

@media (prefers-reduced-motion: reduce) {
  .lens { animation: none; }
}
/* without backdrop-filter the glass would be see-through: fall back to solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass-tint: rgba(12, 19, 42, 0.92); }
}