/* Week One recap — a distinct treatment from the standard product page (product.css):
   stat-forward, built around three big numbers instead of feature copy. Still layers on top
   of ../dlmm.css (container/button/section/hero primitives) so nav, footer, and typography
   scale stay identical to the rest of the site — only the hero and the sections below it get
   their own voice. */

/* theme.css's universal `* { background-color: black }` gives every element its own opaque
   backdrop — invisible only when it happens to exactly match whatever's behind it. The moment
   a container's own background differs even slightly (the stat tiles' #050505 vs. pure #000,
   a card's hover tint), its text children's inherited opaque black shows up as a visible
   rectangle around the text. This surfaced twice already (the pool cards on hover, now the
   stat tiles) — rather than patch each new instance as it's found, reset broadly for every
   text-bearing container on this page up front. Placed first in the file (before the
   individual component rules below) so anything that DOES want a real background of its own
   — .pool-tag-new, .stat-tile itself, etc. — wins via normal source-order cascade at equal
   specificity, without needing !important. */
.stat-tile *,
.tl-item *,
.also-card *,
.pool-card * {
  background-color: transparent;
}

/* ── ambience ──────────────────────────────────────────────────────────── */

/* Same soft green bloom as the root landing page (home.css's .bloom). Unlike .grid-veil below,
   this uses the `background:` SHORTHAND — which resets background-color on its own, since an
   unspecified sub-property in a shorthand resets to its initial value rather than staying
   whatever theme.css's universal selector set it to — so it doesn't need the same explicit
   `background-color: transparent` fix .grid-veil needed. */
.bloom {
  position: fixed;
  top: -10%;
  left: 50%;
  width: min(1100px, 130vw);
  height: 720px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(27, 158, 62, 0.16), transparent 62%);
  filter: blur(8px);
  pointer-events: none;
  z-index: 5;
}

/* Same barely-there grid as the root landing page (home.css's .grid-veil) — this page's own
   dlmm.css doesn't have it, so it's ported here rather than added to dlmm.css itself, which
   would put it on every product-line page, not just this one-off recap.
   theme.css (which dlmm.css's pages load, unlike home.css's root page) sets a universal
   `* { background-color: black }`, making every element fully opaque by default — including
   this one, once it's placed above the content (z-index) instead of behind it. Without the
   explicit `background-color: transparent` override below, that inherited opaque black paints
   as a solid layer beneath the (correctly faint) grid lines, darkening the whole page like a
   veil instead of just adding a texture — confirmed by actually rendering the page and
   looking, not by reasoning about the CSS in the abstract. */
.grid-veil {
  position: fixed;
  inset: 0;
  background-color: transparent;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  pointer-events: none;
  z-index: 5;
}

/* ── hero ──────────────────────────────────────────────────────────────── */

.week-hero {
  padding-top: 64px;
  padding-bottom: 8px;
}

/* The stat row already reads as a visual break from the hero on its own — the section's
   default top border (dlmm.css) directly beneath it doubled up on that, so it's dropped just
   for the section right after the hero. */
.no-top-border {
  border-top: none;
}

.week-hero h1 {
  max-width: 720px;
}

.week-hero h1 .accent {
  background: linear-gradient(120deg, #4fe37c, #1B9E3E 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── stat row ──────────────────────────────────────────────────────────── */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 44px;
}

.stat-tile {
  background: #050505;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

.stat-num {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Same bid/ask colors used everywhere else on the site (blue/violet, e.g. the hero
   distribution diagram) — an animated sheen across the two so the volume figure reads as
   "alive," not static. background-size wider than 100% + a shifting position is what makes
   the gradient itself appear to travel, not just fade. */
.stat-tile:nth-child(1) .stat-num {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #3b82f6);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: stat-gradient-shift 8s ease-in-out infinite;
}

@keyframes stat-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-tile:nth-child(1) .stat-num {
    animation: none;
  }
}

.stat-tile:nth-child(2) .stat-num {
  background: linear-gradient(120deg, #4fe37c, #1B9E3E 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-label {
  font-size: 13.5px;
  color: #999;
  line-height: 1.4;
}

.stat-tag {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1B9E3E;
  border: 1px solid #1B9E3E;
  border-radius: 999px;
  padding: 3px 9px;
}

@media (max-width: 720px) {
  .stat-row {
    grid-template-columns: 1fr;
  }
}

/* ── timeline ──────────────────────────────────────────────────────────── */

.timeline {
  display: flex;
  flex-direction: column;
}

.tl-item {
  position: relative;
  padding: 0 0 30px 30px;
  border-left: 2px solid #1a1a1a;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #050505;
  border: 2px solid #333;
}

.tl-item.tl-live::before {
  border-color: #1B9E3E;
  background: #1B9E3E;
  box-shadow: 0 0 0 4px rgba(27, 158, 62, 0.16);
}

.tl-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1B9E3E;
  margin-bottom: 4px;
}

.tl-item h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.tl-item p {
  font-size: 14.5px;
  color: #999;
  line-height: 1.55;
  max-width: 520px;
}

/* ── live pools ────────────────────────────────────────────────────────── */

.pool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.pool-card {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  padding: 22px;
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.pool-card:hover {
  border-color: #1B9E3E;
  background: rgba(27, 158, 62, 0.05);
}

.pool-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 10px;
}

.pool-icons {
  display: flex;
}

/* Border color is static (matches .pool-card's own resting border, #1e1e1e), not an attempt
   to match the card's own background — that background shifts on :hover (adds a green tint),
   and a hardcoded backdrop color here doesn't shift with it, leaving a visible mismatched
   patch around each icon once hovered. A neutral separator ring avoids that entirely instead
   of chasing an exact color match. */
.pool-icons img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #1e1e1e;
  display: block;
}

.pool-icons img + img {
  margin-left: -10px;
}

.pool-pair {
  font-size: 18px;
  font-weight: 700;
}

.pool-tag {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.pool-tag-live {
  color: #1B9E3E;
  border: 1px solid #1B9E3E;
}

.pool-tag-new {
  color: #050505;
  background: #1B9E3E;
}

.pool-card p {
  font-size: 14px;
  color: #999;
  line-height: 1.5;
}

.pool-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 500;
  color: #1B9E3E;
}

@media (max-width: 720px) {
  .pool-grid {
    grid-template-columns: 1fr;
  }
}

/* ── also this week (extra highlights) ────────────────────────────────── */

.also-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.also-card {
  border: 1px solid #1e1e1e;
  border-radius: 10px;
  padding: 20px;
}

.also-card-icon {
  font-size: 20px;
  margin-bottom: 10px;
}

.also-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.also-card p {
  font-size: 13.5px;
  color: #999;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .also-grid {
    grid-template-columns: 1fr;
  }
}