/* Growth layer: ambient background depth, /ev pages, /card pages, projections
   section, footer, terminal-alive animations. Shares tokens with styles.css. */

/* ---------- ambient background depth ----------
   The grid alone reads as flat black on most panels. Layered, slow-drifting
   color glows give the page depth without touching readability.
   body's own background-color must be transparent or it paints OVER the
   ::before glow layer (html keeps the solid base color). */
body { background-color: transparent; }

body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 42% at 88% 2%,  rgba(146, 20, 241, 0.42), transparent 68%),
    radial-gradient(44% 36% at 0% 34%,  rgba(157, 251, 193, 0.17), transparent 68%),
    radial-gradient(56% 46% at 55% 112%, rgba(146, 20, 241, 0.30), transparent 70%),
    radial-gradient(34% 26% at 26% 0%,  rgba(245, 167, 66, 0.14), transparent 68%),
    radial-gradient(30% 26% at 62% 55%, rgba(78, 42, 173, 0.18), transparent 72%);
  animation: br-aurora 48s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes br-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, -1%, 0) scale(1.02); }
}

/* faint vignette keeps edges cinematic and text zones calm */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(130% 100% at 50% 40%, transparent 72%, rgba(0, 0, 0, 0.28) 100%);
}

/* signature brand beam under the nav */
nav.top { position: relative; }
nav.top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(146, 20, 241, 0.55) 30%, rgba(157, 251, 193, 0.45) 70%, transparent);
  pointer-events: none;
}

/* hero feed panel gets a soft brand halo so the money-shot pops */
.feed-panel {
  position: relative;
  box-shadow:
    0 0 0 1px rgba(146, 20, 241, 0.10),
    0 18px 70px rgba(146, 20, 241, 0.10),
    0 4px 30px rgba(0, 0, 0, 0.5);
}

/* ---------- ticker team logos ---------- */
.ticker-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 3px 0 0;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.6));
}
.ticker-logo + .ticker-logo { margin-right: 6px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border); margin-top: 48px; }
.sf-inner {
  max-width: 1180px; margin: 0 auto; padding: 22px 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  color: var(--text-dim); font-size: 12.5px;
}
.sf-inner a { color: var(--text-muted); text-decoration: none; }
.sf-inner a:hover { color: var(--green); }
.sf-boards { border-bottom: 1px solid var(--border); line-height: 1.9; }
.sf-label { font-size: 10px; letter-spacing: .14em; color: var(--text-dim); }

/* ---------- projections section ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.proj-card {
  background: var(--panel, #0b0e15); border: 1px solid var(--border); border-radius: 12px;
  padding: 22px 20px; position: relative; overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.proj-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(146, 20, 241, 0.10);
}
.proj-league { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .14em; color: var(--green); }
.proj-card.soon .proj-league { color: var(--text-dim); }
.proj-name { font-size: 19px; font-weight: 600; margin: 8px 0 6px; }
.proj-desc { color: var(--text-muted); font-size: 13px; line-height: 1.55; min-height: 60px; }
.proj-status {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .1em;
  color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px;
}
.proj-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.proj-card.soon .proj-status .dot { background: #d9a94a; box-shadow: 0 0 8px #d9a94a; }
.proj-sample {
  margin-top: 16px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  font-family: "JetBrains Mono", monospace; font-size: 11px;
}
.proj-sample-head {
  display: flex; justify-content: space-between; padding: 7px 12px;
  background: #0e121a; color: var(--text-dim); letter-spacing: .08em; font-size: 9.5px;
}
.proj-row { display: flex; justify-content: space-between; padding: 7px 12px; border-top: 1px solid var(--border); color: var(--text-muted); }
.proj-row b { color: var(--text); font-weight: 500; }
.proj-row .pos { color: var(--green); }
.proj-cta-row { display: flex; gap: 10px; margin-top: 26px; justify-content: center; }

/* ---------- /ev pages ---------- */
.ev-page .section-title { font-size: 38px; }
.ev-date { color: var(--text-dim); font-weight: 400; font-size: 22px; }
.ev-free { margin-bottom: 0; }
.ev-locked { position: relative; border-radius: 12px; overflow: hidden; margin-top: -4px; }
.ev-locked-rows { filter: blur(7px) saturate(.7); opacity: .55; pointer-events: none; user-select: none; }
.ev-gate { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(180deg, rgba(6,8,13,.25), rgba(6,8,13,.88)); }
.ev-gate-card {
  text-align: center; max-width: 420px; padding: 26px 26px;
  background: rgba(10, 13, 20, .92); border: 1px solid var(--border-strong); border-radius: 14px;
  backdrop-filter: blur(4px);
}
.ev-gate-title { font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.ev-gate-card p { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.ev-gate-alt { display: block; margin-top: 12px; color: var(--text-dim); font-size: 12px; text-decoration: none; }
.ev-gate-alt:hover { color: var(--green); }
.ev-other { margin-top: 22px; color: var(--text-dim); font-size: 12px; }
.ev-other a { color: var(--text-muted); text-decoration: none; }
.ev-other a:hover { color: var(--green); }

/* ---------- /card pages ---------- */
.cardp-title { font-size: 34px; }
.cardp-best { color: var(--green); }
.cardp-panel { padding: 22px; }
.cardp-tiles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cardp-tile {
  width: 86px; height: 86px; border: 1px solid var(--border); border-radius: 8px; background: #0e121a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.cardp-tile img { max-width: 44px; max-height: 26px; object-fit: contain; }
.cardp-tile.best { border-color: rgba(157, 251, 193, .55); box-shadow: 0 0 14px rgba(157, 251, 193, .12); }
.cardp-tile.best .cardp-odds { color: var(--green); }
.cardp-odds { font-size: 13px; }
.cardp-cta { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }

/* ---------- terminal-alive animations ---------- */
@keyframes br-flash-up { 0% { background: rgba(157, 251, 193, .18); } 100% { background: transparent; } }
@keyframes br-flash-dn { 0% { background: rgba(255, 122, 122, .14); } 100% { background: transparent; } }
.flash-up { animation: br-flash-up 1.1s ease-out; border-radius: 4px; }
.flash-dn { animation: br-flash-dn 1.1s ease-out; border-radius: 4px; }
@keyframes br-pulse-row { 0% { box-shadow: inset 3px 0 0 var(--green); } 100% { box-shadow: inset 0 0 0 transparent; } }
.row-fresh { animation: br-pulse-row 1.6s ease-out; }
.type-caret::after { content: "▌"; color: var(--green); animation: br-blink 1s steps(1) infinite; }
@keyframes br-blink { 50% { opacity: 0; } }

/* ---------- flare pack: motion ---------- */
.ticker {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- flare pack: glow accents ---------- */
@keyframes br-chip-breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(146, 20, 241, 0); }
  50% { box-shadow: 0 0 16px rgba(146, 20, 241, 0.45); }
}
#feed-rows .feed-row-v2:first-child .ev-chip { animation: br-chip-breathe 3.2s ease-in-out infinite; }

.live-dot { position: relative; }
.live-dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--green);
  animation: br-ping 2.4s ease-out infinite;
}
@keyframes br-ping {
  0% { transform: scale(1); opacity: .7; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

.btn-gold, a.btn.btn-gold { transition: transform .12s ease, box-shadow .15s ease, background .15s ease; }
.btn-gold:hover, a.btn.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 4px 22px rgba(245, 167, 66, 0.4); }

/* ---------- flare pack: draw-in details ---------- */
.stat svg.sparkline polyline,
.stat svg.sparkline path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: br-draw 1.1s ease-out .35s forwards;
}
@keyframes br-draw { to { stroke-dashoffset: 0; } }

.section-head .section-title { position: relative; padding-bottom: 14px; }
.section-head .section-title::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--green), rgba(146, 20, 241, 0.9));
  transition: width .7s ease .15s;
}
.section-head.reveal.in .section-title::after { width: 64px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .proj-grid { grid-template-columns: 1fr; }
  .ev-page .section-title { font-size: 28px; }
  .ev-date { font-size: 16px; }
  .cardp-title { font-size: 26px; }
}
@media (max-width: 560px) {
  .proj-cta-row, .cardp-cta { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .flash-up, .flash-dn, .row-fresh { animation: none; }
  .type-caret::after { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .live-dot::after, #feed-rows .feed-row-v2:first-child .ev-chip { animation: none; }
  .stat svg.sparkline polyline, .stat svg.sparkline path { animation: none; stroke-dashoffset: 0; }
  .section-head .section-title::after { transition: none; }
}