/* ==========================================================================
   ATLAS — NOW SECTION
   The "live dashboard" section directly below the Hero. Built entirely
   from the shared tokens in tokens.css so it stays visually consistent
   with the Hero's status card without duplicating its component.
   ========================================================================== */

.now {
  padding: var(--space-7) var(--space-5);
  position: relative;
  border-top: 1px solid var(--color-border);
}

.now__container {
  max-width: var(--content-max-width);
  margin: 0 auto;
}

/* ---- Header ---- */
.now__header {
  max-width: 640px;
  margin-bottom: var(--space-5);
}

.now__heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 2.5vw + 1rem, 2.75rem);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.now__live-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

.now__description {
  font-size: 1.0625rem;
  color: var(--color-text-dim);
  max-width: 52ch;
}

/* ---- Card grid ---- */
.now-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}

.now-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
  transition: border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.now-card:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.now-card__icon {
  font-size: 1.5rem;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.now-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.now-card__value {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.5;
}

/* ==========================================================================
   Scroll-triggered reveal — distinct from the Hero's load-triggered
   `.reveal`, since this section should animate in as the visitor scrolls
   to it, not on page load.
   ========================================================================== */

.now-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.now-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gentle stagger across header → cards */
.now-reveal[data-now-reveal='1'] { transition-delay: 0ms; }
.now-reveal[data-now-reveal='2'] { transition-delay: 60ms; }
.now-reveal[data-now-reveal='3'] { transition-delay: 110ms; }
.now-reveal[data-now-reveal='4'] { transition-delay: 160ms; }
.now-reveal[data-now-reveal='5'] { transition-delay: 210ms; }
.now-reveal[data-now-reveal='6'] { transition-delay: 260ms; }
.now-reveal[data-now-reveal='7'] { transition-delay: 310ms; }

@media (prefers-reduced-motion: reduce) {
  .now-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 720px) {
  .now {
    padding: var(--space-6) var(--space-4);
  }

  .now-grid {
    grid-template-columns: 1fr;
  }
}