/* ══════════════════════════════════════════════════════════════════
   LIQUA · ANIME LAYER
   ADDITIVE. Every existing custom property is left exactly as it was —
   this file only reads them (--ice --violet --cyan --green --amber --mag
   --bg --panel --border --text --muted). Delete this one <link> and the
   site returns to its previous appearance with nothing else touched.

   Design intent: mining trains a mind (v3 · holo night). So the visual language
   is heat, iteration and convergence — sweeps that pass and settle,
   gradients that resolve, sparkle that rewards an event rather than
   decorating idle pixels.

   Everything below animates transform/opacity/filter only, and every
   ambient loop is suspended under prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Derived accents — no existing token is overwritten. */
  --holo: linear-gradient(110deg,
    var(--ice) 0%, var(--violet) 24%, var(--mag) 46%,
    var(--amber) 66%, var(--green) 84%, var(--ice) 100%);
  --holo-soft: linear-gradient(110deg,
    color-mix(in srgb, var(--ice) 55%, transparent),
    color-mix(in srgb, var(--violet) 55%, transparent),
    color-mix(in srgb, var(--mag) 55%, transparent));
  --glow-ice: 0 0 26px color-mix(in srgb, var(--ice) 45%, transparent);
  --glow-violet: 0 0 30px color-mix(in srgb, var(--violet) 50%, transparent);
  --glow-mag: 0 0 30px color-mix(in srgb, var(--mag) 46%, transparent);
  --speed-slow: 16s;
  --speed-mid: 5.5s;
  --speed-fast: 1.1s;
}

/* ── 1 · AURORA FIELD ──────────────────────────────────────────────
   One fixed, GPU-composited backdrop. Two counter-drifting radial
   fields rather than a looping image, so it never tiles or seams. */
.lq-aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  overflow:hidden; contain:strict;
}
.lq-aurora::before,
.lq-aurora::after{
  content:""; position:absolute; inset:-30%;
  background:
    radial-gradient(38% 42% at 22% 28%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 62%),
    radial-gradient(34% 38% at 78% 22%, color-mix(in srgb, var(--ice) 22%, transparent), transparent 60%),
    radial-gradient(44% 40% at 62% 78%, color-mix(in srgb, var(--mag) 18%, transparent), transparent 64%);
  filter: blur(46px) saturate(130%);
  will-change: transform;
  animation: lqDrift var(--speed-slow) ease-in-out infinite alternate;
}
.lq-aurora::after{
  animation-duration: calc(var(--speed-slow) * 1.6);
  animation-direction: alternate-reverse;
  opacity:.6;
}
@keyframes lqDrift{
  from{ transform: translate3d(-2%, -1%, 0) scale(1); }
  to  { transform: translate3d( 2%,  2%, 0) scale(1.08); }
}

/* ── 2 · SCANLINE + GRAIN ──────────────────────────────────────────
   Very low alpha. Reads as CRT/terminal without hurting text contrast. */
.lq-scan{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background: repeating-linear-gradient(
    0deg, transparent 0 2px, rgba(182,156,255,.02) 2px 3px);
  mix-blend-mode: overlay;
}

/* ── 3 · HOLO TEXT ─────────────────────────────────────────────────
   For headlines only. Falls back to solid --text where
   background-clip:text is unsupported. */
.lq-holo{
  background: var(--holo);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: lqHoloPan var(--speed-slow) linear infinite;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--violet) 26%, transparent));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .lq-holo{ color: var(--text); -webkit-text-fill-color: currentColor; }
}
@keyframes lqHoloPan{ to{ background-position: 260% 0; } }

/* ── 4 · GLITTER ───────────────────────────────────────────────────
   Sparkle is an EVENT, not wallpaper: .lq-sparkle--on is added when
   something actually happened (a block landed, a model merged).
   Idle elements keep a single slow sheen instead. */
.lq-sparkle{ position:relative; overflow:hidden; }
.lq-sparkle::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 16%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 72%, #fff, transparent 60%),
    radial-gradient(1.8px 1.8px at 88% 62%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 56% 40%, #fff, transparent 60%);
  opacity:0;
}
.lq-sparkle--on::after{ animation: lqTwinkle 1.5s ease-out 1; }
@keyframes lqTwinkle{
  0%  { opacity:0;   transform: scale(.9); }
  22% { opacity:.95; }
  100%{ opacity:0;   transform: scale(1.14); }
}

/* Slow sheen sweep for idle surfaces. */
.lq-sheen{ position:relative; overflow:hidden; }
.lq-sheen::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(105deg,
    transparent 34%,
    color-mix(in srgb, #fff 11%, transparent) 48%,
    transparent 62%);
  transform: translateX(-130%);
  animation: lqSheen 7s ease-in-out infinite;
}
@keyframes lqSheen{ 0%,72%{ transform:translateX(-130%);} 100%{ transform:translateX(130%);} }

/* ── 5 · CARDS ─────────────────────────────────────────────────────
   Keeps the existing --panel/--border tokens; adds a holo hairline
   that only resolves on hover, so the page is calm until you engage. */
.lq-card{
  position:relative;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border:1px solid var(--border);
  border-radius:14px;
  transition: transform .22s cubic-bezier(.2,.9,.25,1), border-color .22s, box-shadow .22s;
  isolation:isolate;
}
.lq-card::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; z-index:-1;
  background: var(--holo); opacity:0; transition: opacity .24s;
}
.lq-card:hover{ transform: translateY(-3px); border-color: transparent; box-shadow: var(--glow-violet); }
.lq-card:hover::before{ opacity:.55; }

/* ── 6 · RARITY (Mind NFTs) ─────────────────────────────────────────
   Rarity is a data attribute so markup never hardcodes a colour. */
[data-rarity]{ --r: var(--muted); }
[data-rarity="common"]   { --r: var(--muted); }  /* v3 rarity hues follow the holo tokens */
[data-rarity="tempered"] { --r: var(--green); }
[data-rarity="lucid"]    { --r: var(--ice); }
[data-rarity="resonant"] { --r: var(--violet); }
[data-rarity="singular"] { --r: var(--amber); }
.lq-rarity-dot{
  width:.55rem; height:.55rem; border-radius:50%;
  background: var(--r); box-shadow: 0 0 12px var(--r);
  display:inline-block; vertical-align:middle;
}
[data-rarity="singular"] .lq-card,
.lq-card[data-rarity="singular"]{ border-color: color-mix(in srgb, var(--amber) 50%, transparent); }

/* ── 7 · TRAINING HEAT BAR ─────────────────────────────────────────
   Used wherever training throughput is shown. --lq-load is set from JS
   with a real measured value; the bar is inert if nothing sets it. */
.lq-heat{
  height:6px; border-radius:99px; overflow:hidden;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}
.lq-heat > i{
  display:block; height:100%; width: calc(var(--lq-load, 0) * 1%);
  background: linear-gradient(90deg, var(--ice), var(--violet) 46%, var(--mag) 72%, var(--amber));
  box-shadow: var(--glow-violet);
  transition: width .6s cubic-bezier(.2,.9,.25,1);
}

/* ── 8 · CONVERGENCE RING ──────────────────────────────────────────
   The visual metaphor for "each block is a better instance": a ring
   that tightens as loss falls. --lq-conv is 0–100 from real block data. */
.lq-ring{ width:var(--lq-ring-size,120px); aspect-ratio:1; position:relative; }
.lq-ring svg{ width:100%; height:100%; transform: rotate(-90deg); }
.lq-ring .trk{ fill:none; stroke: var(--border); stroke-width:6; }
.lq-ring .arc{
  fill:none; stroke-width:6; stroke-linecap:round; stroke: url(#lqGrad);
  stroke-dasharray: var(--lq-circ, 314);
  stroke-dashoffset: calc(var(--lq-circ, 314) - (var(--lq-conv, 0) / 100) * var(--lq-circ, 314));
  transition: stroke-dashoffset .8s cubic-bezier(.2,.9,.25,1);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--violet) 55%, transparent));
}

/* ── 9 · TIER LADDER (time-locked rewards) ─────────────────────────── */
.lq-tier{
  display:grid; grid-template-columns:auto 1fr auto; gap:.85rem; align-items:center;
  padding:.8rem 1rem; border-radius:12px;
  border:1px solid var(--border);
  background: color-mix(in srgb, var(--panel2, var(--panel)) 80%, transparent);
  transition: border-color .2s, transform .2s, background .2s;
}
.lq-tier:hover{ transform: translateX(3px); border-color: color-mix(in srgb, var(--ice) 45%, transparent); }
.lq-tier[data-active="true"]{
  border-color: color-mix(in srgb, var(--amber) 60%, transparent);
  background: color-mix(in srgb, var(--amber) 8%, transparent);
}
.lq-tier__mult{ font-variant-numeric: tabular-nums; color: var(--amber); font-weight:700; }

/* ── 10 · CHIPS + BADGES ──────────────────────────────────────────── */
.lq-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.22rem .6rem; border-radius:99px;
  font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid color-mix(in srgb, var(--ice) 32%, transparent);
  background: color-mix(in srgb, var(--ice) 9%, transparent);
  color: var(--ice); white-space:nowrap;
}
.lq-chip--live{ border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 10%, transparent); color: var(--green); }
.lq-chip--spec{ border-color: color-mix(in srgb, var(--amber) 38%, transparent);
  background: color-mix(in srgb, var(--amber) 9%, transparent); color: var(--amber); }
.lq-chip--live::before{
  content:""; width:.4rem; height:.4rem; border-radius:50%;
  background: currentColor; box-shadow:0 0 8px currentColor;
  animation: lqPulse 2s ease-in-out infinite;
}
@keyframes lqPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ── 11 · SECTION SEAM ─────────────────────────────────────────────
   A hairline that resolves from the holo gradient — the "convergence"
   motif repeated structurally rather than as another animation. */
.lq-seam{
  height:1px; border:0; margin:3.5rem 0;
  background: var(--holo); background-size:200% 100%;
  opacity:.34; animation: lqHoloPan 22s linear infinite;
}

/* ── 12 · REVEAL ON SCROLL ─────────────────────────────────────────
   JS adds .is-in; if JS never runs the content is visible by default,
   so the page can never end up blank. */
.lq-reveal{ opacity:1; transform:none; }
html.js .lq-reveal{
  opacity:0; transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.9,.25,1);
  /* "JS adds .is-in" is only true while the observer is delivering. In a tab
     that was opened in the background the callback can never arrive, and the
     script above has no net under it — measured, the section heads and cards
     stayed at computed opacity 0 for the life of the page. The delay below is
     spent on the document timeline, which advances only while the tab draws,
     so the worst case is now "the reveal did not play", not "the section is
     gone". */
  animation: lqRevealFailsafe 1ms linear 10s forwards;
}
/* a deck card carries an opacity of its own, and a filled animation would
   outrank it — see the same exclusion in liqua-v3.css */
[data-deck].deck-on > .deck-i.lq-reveal{ animation:none; }
@keyframes lqRevealFailsafe{ to{ opacity:1; transform:none; } }
html.js .lq-reveal.is-in{ opacity:1; transform:none; }

/* ── 13 · DIVA + ECHO FIGURES ──────────────────────────────────────
   ECHO trails DIVA's state 6× slower — the lag IS the brand, so it is
   expressed in the timing function, not just written in the copy. */
.lq-diva{ position:relative; filter: drop-shadow(0 6px 26px color-mix(in srgb, var(--violet) 34%, transparent)); }
.lq-diva__halo{
  position:absolute; inset:-14%; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--violet) 26%, transparent), transparent 66%);
  animation: lqBreathe 5.5s ease-in-out infinite;
}
.lq-echo{
  filter: drop-shadow(0 4px 18px color-mix(in srgb, var(--cyan) 34%, transparent));
  animation: lqBreathe 33s ease-in-out infinite;   /* 6× DIVA's period, on purpose */
}
@keyframes lqBreathe{ 0%,100%{ transform:scale(1); opacity:.86 } 50%{ transform:scale(1.06); opacity:1 } }

/* ── 14 · FOCUS + A11Y ─────────────────────────────────────────────
   Glitter must never cost keyboard usability. */
.lq-card:focus-visible, .lq-chip:focus-visible, .lq-tier:focus-visible, a:focus-visible, button:focus-visible{
  outline:2px solid var(--ice); outline-offset:3px; border-radius:8px;
}
@media (prefers-reduced-motion: reduce){
  .lq-aurora::before, .lq-aurora::after, .lq-holo, .lq-seam,
  .lq-sheen::before, .lq-sparkle--on::after, .lq-diva__halo, .lq-echo,
  .lq-chip--live::before{
    animation: none !important;
  }
  html.js .lq-reveal{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
  .lq-card:hover{ transform:none; }
}

/* ── 15 · MOBILE ───────────────────────────────────────────────────
   The aurora is the only expensive layer; it is dropped on small
   screens where it costs battery and shows least. */
@media (max-width: 720px){
  .lq-aurora{ display:none; }
  .lq-scan{ opacity:.5; }
  .lq-card:hover{ transform:none; }
}

/* ── 16 · COMPONENTS FOR THE NEW SECTIONS ──────────────────────────
   Layout only; all colour comes from the existing tokens. */
.lq-steps{ list-style:none; padding:0; margin:1.6rem 0 0;
  display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); counter-reset:s; }
.lq-steps li{ padding:1.05rem 1.1rem; }
.lq-step__n{ font-variant-numeric:tabular-nums; font-size:.72rem; letter-spacing:.14em;
  color:var(--violet); display:block; margin-bottom:.45rem; }
.lq-steps h3,.lq-steps h4{ margin:0 0 .4rem; font-size:.98rem; color:var(--text); }
/* The step titles were h4 under an h2, which skipped a level. They are h3 now.
   liqua-v3.css sizes bare h3/h4 with an !important `font` shorthand, so pin the
   step titles to the h4 step of that scale — the size they have always had. */
.lq-steps h3{ font:600 var(--t-md)/1.3 var(--v3-display)!important; letter-spacing:-.008em!important; }
.lq-steps p{ margin:0; font-size:.86rem; line-height:1.6; color:var(--muted); }

.lq-note{ padding:1.1rem 1.25rem; margin-top:1.4rem; }
.lq-note strong{ display:block; margin-bottom:.45rem; color:var(--ice); }
.lq-note p{ margin:0; font-size:.9rem; line-height:1.7; color:var(--muted); }

.lq-honest{ margin-top:1.2rem; padding:.9rem 1.1rem; border-radius:10px;
  border:1px dashed color-mix(in srgb, var(--amber) 40%, transparent);
  background: color-mix(in srgb, var(--amber) 6%, transparent);
  font-size:.84rem; line-height:1.7; color:var(--muted); }
.lq-honest code{ color:var(--amber); }

.lq-shardgrid{ margin-top:1.4rem; }
.lq-shardgrid > .lq-card{ padding:1rem 1.1rem; }
.lq-shard__head{ display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem; }
.lq-shard__head strong{ color:var(--r); }
.lq-shard__share{ margin-left:auto; font-size:.74rem; color:var(--dimc); font-variant-numeric:tabular-nums; }
.lq-shardgrid p{ margin:0 0 .6rem; font-size:.85rem; line-height:1.6; color:var(--muted); }
.lq-shard__delta{ font-size:.72rem; letter-spacing:.05em; color:var(--dimc); font-variant-numeric:tabular-nums; }

.lq-calc{ display:grid; gap:1.1rem; grid-template-columns:minmax(260px,1fr) minmax(280px,1.1fr); margin-top:1.5rem; }
@media (max-width:860px){ .lq-calc{ grid-template-columns:1fr; } }
.lq-calc__ladder{ display:grid; gap:.55rem; align-content:start; }
.lq-tier__note{ font-size:.75rem; color:var(--muted); margin-top:.15rem; }
.lq-calc__panel{ padding:1.15rem 1.25rem; }
.lq-calc__slider{ display:block; font-size:.82rem; color:var(--muted); margin-bottom:1rem; }
.lq-calc__slider b{ color:var(--ice); font-variant-numeric:tabular-nums; }
.lq-calc__slider input{ width:100%; margin-top:.5rem; accent-color:var(--violet); }
.lq-calc__grid{ display:grid; gap:.55rem; margin:0; }
.lq-calc__grid > div{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding-bottom:.45rem; border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent); }
.lq-calc__grid dt{ font-size:.82rem; color:var(--muted); }
.lq-calc__grid dd{ margin:0; font-variant-numeric:tabular-nums; color:var(--text); font-weight:600; }
.lq-calc__grid dd em{ font-style:normal; font-size:.7rem; color:var(--dimc); margin-left:.2rem; }
.lq-calc__grid dd.hi{ color:var(--ice); }
.lq-calc__grid dd.up{ color:var(--green); }
.lq-calc__grid dd.dn{ color:var(--mag); }
.lq-calc__foot{ margin:.9rem 0 0; font-size:.82rem; line-height:1.65; color:var(--muted); }

/* ── 17 · DIVA + ECHO DUO ──────────────────────────────────────── */
.lq-duo{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:1.5rem; }
.lq-duo__fig{ padding:1.4rem 1.2rem; text-align:center; }
.lq-duo__fig h3{ margin:.8rem 0 .2rem; font-size:1.15rem; letter-spacing:.1em; }
.lq-duo__role{ margin:0 0 .7rem; font-size:.78rem; color:var(--dimc); }
.lq-duo__line{ margin:0 0 .9rem; font-style:italic; color:var(--text); font-size:.92rem; line-height:1.6; }
.lq-duo__stats{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.lq-duo__stats span{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.2rem .55rem; border-radius:99px; border:1px solid var(--border); color:var(--muted); }
.lq-duo__fig .lq-diva,.lq-duo__fig .lq-echo{ display:inline-block; position:relative; }