/* ════════════════════════════════════════════════════════════════════
   CLASH INTEL — UI ENHANCEMENT LAYER (enhance.css v2)
   ────────────────────────────────────────────────────────────────────
   Loads AFTER base.css / components.css / sections.css and layers on
   top of them. Written against the real base styles:

     • nav is sticky z-100 with blur       → we only intensify on scroll
     • .feature-card owns ::before         → we never touch its pseudos
     • .support-card runs support-pulse    → no hover box-shadow (it
       would be overridden); tilt + glow span instead
     • ticker inner rows juggle inline transitions → NEVER styled here
     • leaderboard rows re-render every 60s → all effects below are
       CSS-only and loop-safe (no per-row JS, no entrance replay spam)

   Rollback: delete this file + the enhance tags in the HTML files.
   ════════════════════════════════════════════════════════════════════ */

/* ── 1 · Foundation ─────────────────────────────────────────────── */
::selection { background: #dc2626; color: #fff; }
html { scrollbar-width: thin; scrollbar-color: #7f1d1d #050505; }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b91c1c, #5f1515);
  border-radius: 8px;
  border: 2px solid #050505;
}
::-webkit-scrollbar-thumb:hover { background: #ef4444; }

/* keyboard focus (base sets outline:none on the lookup input) */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid rgba(239, 68, 68, .65);
  outline-offset: 3px;
}

/* ── 2 · Scroll progress bar (injected by enhance.js) ───────────── */
.ci-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 200;                       /* above nav (z-100) */
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #7f1d1d, #ef4444);
  box-shadow: 0 0 10px rgba(239, 68, 68, .6);
  pointer-events: none;
}

/* ── 3 · Nav: intensify once scrolled + brand micro-interaction ─── */
nav { transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
nav.ci-scrolled {
  background: rgba(5, 5, 5, .94);
  border-bottom-color: rgba(220, 38, 38, .35);
  box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .9),
              0 1px 12px -6px rgba(220, 38, 38, .35);
}
.nav-brand img { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease; }
.nav-brand:hover img {
  transform: rotate(-6deg) scale(1.1);
  filter: drop-shadow(0 0 10px rgba(239, 68, 68, .6));
}
.nav-links a { position: relative; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: -5px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #ef4444, rgba(239, 68, 68, 0));
  transition: right .28s cubic-bezier(.22, .61, .36, 1);
}
.nav-links a:hover::after,
.nav-links a.ci-active::after { right: 0; }
.nav-links a.ci-active { color: #fff; }

/* ── 4 · Buttons: sweep, ripple, press (base owns hover lift) ───── */
.btn { position: relative; overflow: hidden; }
.ci-sheen {
  position: absolute; top: -10%; bottom: -10%;
  left: -70%; width: 45%;
  transform: skewX(-18deg);
  background: linear-gradient(105deg,
              rgba(255, 255, 255, 0),
              rgba(255, 255, 255, .35),
              rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn-primary:hover .ci-sheen { animation: ci-sheen .85s cubic-bezier(.4, 0, .2, 1); }
@keyframes ci-sheen { from { left: -70%; } to { left: 130%; } }

.ci-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle,
              rgba(255, 160, 160, .5),
              rgba(239, 68, 68, .25) 60%,
              transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: ci-ripple .6s ease-out forwards;
}
@keyframes ci-ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.lookup-btn { position: relative; overflow: hidden; }   /* ripple host too */

/* ── 5 · Hero atmosphere ────────────────────────────────────────── */
/* base .hero already has position/overflow; compact-hero needs both */
.compact-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(70% 130% at 50% 0%, rgba(220, 38, 38, .06), transparent 62%);
}
.hero { isolation: isolate; }
.compact-hero > .container { position: relative; z-index: 2; }

.ci-embers { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ci-radar {
  position: absolute;
  top: -130px; right: -130px;
  width: 430px; height: 430px;
  z-index: 1;
  pointer-events: none;
  border-radius: 50%;
  opacity: .12;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(239, 68, 68, .28) 0 1px, transparent 1px 54px),
    conic-gradient(from 0deg, rgba(239, 68, 68, .55), rgba(239, 68, 68, 0) 26%);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 71%);
  mask: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 71%);
  animation: ci-rotate 9s linear infinite;
}
@keyframes ci-rotate { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .hero-bg { will-change: transform; }            /* JS parallax target */
  .hero h1 em { animation: ci-emflicker 5s ease-in-out infinite; }
}
/* baseline matches base's existing 0 0 30px .5 glow, then flares past it */
@keyframes ci-emflicker {
  0%, 100% { text-shadow: 0 0 30px rgba(239, 68, 68, .5); }
  42% { text-shadow: 0 0 42px rgba(239, 68, 68, .85), 0 0 12px rgba(255, 120, 120, .5); }
  46% { text-shadow: 0 0 22px rgba(239, 68, 68, .35); }
  52% { text-shadow: 0 0 46px rgba(239, 68, 68, .9), 0 0 14px rgba(255, 120, 120, .55); }
}

/* ── 6 · Live ticker chip: breathing border (inner rows untouched) ─ */
.ticker-chip.is-visible { animation: ci-chipbreathe 4.5s ease-in-out infinite; }
@keyframes ci-chipbreathe {
  0%, 100% { box-shadow: 0 0 24px rgba(220, 38, 38, .08); border-color: rgba(220, 38, 38, .3); }
  50%      { box-shadow: 0 0 34px rgba(220, 38, 38, .2);  border-color: rgba(220, 38, 38, .5); }
}

/* ── 7 · Stats bar micro-glow ───────────────────────────────────── */
.stat-num { transition: text-shadow .3s ease; }
.stats-grid > div:hover .stat-num { text-shadow: 0 0 24px rgba(239, 68, 68, .35); }

/* ── 8 · Leaderboard (all CSS-only: survives 60s re-renders) ────── */
/* one-time entrance when the bot's data first arrives (.is-visible) */
.leaderboard-section.is-visible .leaderboard-header {
  animation: ci-rise .7s cubic-bezier(.22, .61, .36, 1) both;
}
.leaderboard-section.is-visible .leaderboard-list {
  animation: ci-rise .7s cubic-bezier(.22, .61, .36, 1) .12s both;
}
@keyframes ci-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* rank #01 badge gets a slow shine sweep */
.lb-rank-gold { position: relative; overflow: hidden; }
.lb-rank-gold::after {
  content: "";
  position: absolute;
  top: -40%; bottom: -40%;
  left: -60%; width: 38%;
  transform: skewX(-20deg);
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: ci-shine 3.2s ease-in-out infinite;
}
@keyframes ci-shine { 0% { left: -60%; } 55% { left: 130%; } 100% { left: 130%; } }

/* trophies light up on row hover; #01's stay softly lit */
.lb-trophies { transition: color .2s ease, text-shadow .2s ease; }
.lb-row:hover .lb-trophies { color: #fca5a5; text-shadow: 0 0 14px rgba(239, 68, 68, .45); }
.lb-row.is-top .lb-trophies { text-shadow: 0 0 16px rgba(239, 68, 68, .35); }

/* layer a ring-flash on top of the existing update flash
   (re-declares base's lb-flash so both animations run together) */
.lb-row.is-updated { animation: lb-flash 900ms ease-out, ci-lbring 900ms ease-out; }
.lb-row.is-updated.is-top { animation: lb-flash-top 900ms ease-out, ci-lbring 900ms ease-out; }
@keyframes ci-lbring {
  0%   { box-shadow: 0 0 0 1px rgba(239, 68, 68, .65), 0 0 22px rgba(239, 68, 68, .35); }
  100% { box-shadow: 0 0 0 1px rgba(239, 68, 68, 0),   0 0 0 rgba(239, 68, 68, 0); }
}

/* ── 9 · Lookup: caret + staggered pick-list entrance ───────────── */
.lookup-input { caret-color: #ef4444; }
.lookup-pick-row {
  animation: ci-rise .34s cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: .32s;
}
.lookup-pick-row:nth-child(1)  { animation-delay: .03s; }
.lookup-pick-row:nth-child(2)  { animation-delay: .06s; }
.lookup-pick-row:nth-child(3)  { animation-delay: .09s; }
.lookup-pick-row:nth-child(4)  { animation-delay: .12s; }
.lookup-pick-row:nth-child(5)  { animation-delay: .15s; }
.lookup-pick-row:nth-child(6)  { animation-delay: .18s; }
.lookup-pick-row:nth-child(7)  { animation-delay: .21s; }
.lookup-pick-row:nth-child(8)  { animation-delay: .24s; }
.lookup-pick-row:nth-child(9)  { animation-delay: .27s; }
.lookup-pick-row:nth-child(10) { animation-delay: .30s; }

/* ── 10 · Cards: glow span + tilt (feature/cmd/support only) ────── */
/* .feature-card keeps its own ::before bar and hover lift from base;
   .step has no card chrome, so it gets a step-num treatment instead */
.cmd, .support-card { position: relative; }
.cmd { transition: transform .35s cubic-bezier(.22, .61, .36, 1),
                   background .2s ease, border-left-color .2s ease,
                   box-shadow .35s ease; }
.cmd:hover { box-shadow: 0 18px 40px -26px rgba(220, 38, 38, .55); }
.cmd code { transition: text-shadow .25s ease; }
.cmd:hover code { text-shadow: 0 0 14px rgba(239, 68, 68, .45); }

.feature-card:hover .feature-num {
  background: rgba(220, 38, 38, .18);
  box-shadow: 0 0 16px -4px rgba(239, 68, 68, .5);
  color: #ef4444;
}
.feature-num { transition: background .25s ease, box-shadow .25s ease, color .25s ease; }

.ci-glow {
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(240px circle at var(--ci-mx, 50%) var(--ci-my, 50%),
              rgba(239, 68, 68, .13), transparent 65%);
}
.feature-card:hover .ci-glow, .cmd:hover .ci-glow, .support-card:hover .ci-glow { opacity: 1; }

/* steps: the numbered circle ignites on hover */
.step-num { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1),
                        box-shadow .3s ease, background .3s ease, color .3s ease; }
.step:hover .step-num {
  transform: scale(1.08) translateY(-2px);
  background: rgba(220, 38, 38, .14);
  color: #fff;
  box-shadow: 0 0 26px -4px rgba(239, 68, 68, .6),
              inset 0 0 14px rgba(239, 68, 68, .18);
}

/* ── 11 · Section headers: underline draws in on reveal ─────────── */
.section-header h2::after {
  content: "";
  display: block;
  width: 0; height: 2px;
  margin: .9rem auto 0;
  background: linear-gradient(90deg, transparent, #ef4444, transparent);
  box-shadow: 0 0 12px rgba(239, 68, 68, .6);
  transition: width .6s cubic-bezier(.22, .61, .36, 1) .25s;
}
.section-header.ci-in h2::after { width: 64px; }

/* ── 12 · Scroll reveal (classes added only by enhance.js) ──────── */
.ci-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
              transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--ci-d, 0ms);
  will-change: opacity, transform;
}
.ci-rv.ci-in { opacity: 1; transform: none; }

/* ── 13 · Cursor glow + back-to-top (injected by enhance.js) ────── */
.ci-cursor {
  position: fixed; left: 0; top: 0;
  width: 560px; height: 560px;
  margin: -280px 0 0 -280px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;                    /* under .container (z-2), ambient only */
  mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(220, 38, 38, .09), rgba(220, 38, 38, 0) 62%);
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
}
.ci-top {
  position: fixed;
  right: 1.15rem; bottom: 1.15rem;
  z-index: 120;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(10, 10, 11, .82);
  border: 1px solid rgba(220, 38, 38, .4);
  color: #ef4444;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s,
              box-shadow .3s ease, background .3s ease, border-color .3s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ci-top.ci-show { opacity: 1; visibility: visible; transform: none; }
.ci-top:hover {
  background: rgba(220, 38, 38, .16);
  border-color: #ef4444;
  box-shadow: 0 0 22px -6px rgba(239, 68, 68, .65);
}
.ci-top svg { width: 18px; height: 18px; display: block; }

/* ── 14 · Legal pages ───────────────────────────────────────────── */
.data-row > div:last-child { transition: background .25s ease; }
.data-row:hover > div:last-child { background: rgba(220, 38, 38, .04); }

/* ── 15 · Tilt tracking state (keep last: kills transform lag) ──── */
.ci-tilt { transition: background .2s ease, border-color .2s ease, box-shadow .35s ease !important; }

/* ── 16 · Reduced motion & small screens ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ci-radar, .ci-cursor, .ci-embers, .ci-sheen, .ci-ripple { display: none; }
  .ci-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1 em { animation: none; }
  .ticker-chip.is-visible { animation: none; }
  .lb-rank-gold::after { animation: none; display: none; }
  .lb-row.is-updated, .lb-row.is-updated.is-top { animation: none; }
  .lookup-pick-row { animation: none; }
  .leaderboard-section.is-visible .leaderboard-header,
  .leaderboard-section.is-visible .leaderboard-list { animation: none; }
  .section-header h2::after { width: 64px; transition: none; }
  .step:hover .step-num, .nav-brand:hover img { transform: none; }
}
@media (max-width: 860px) {
  .ci-radar, .ci-cursor { display: none; }
}