/* =================================================================
   motifs.css — Flat geometric motifs (no 3D, no orbits, no glint).
   The SVG does the work; CSS just frames and positions it.
   ================================================================= */

/* Subtle animation primitives (still used: rise-soft for timeline) */
@keyframes rise-soft {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
@keyframes spine-pulse {
  0%   { transform: translateY(-30%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* =================================================================
   TIMELINE BADGES (no motif SVG — use shell + lucide glyph from pages.css)
   ================================================================= */

/* =================================================================
   THUMBNAIL MOTIFS
   .bm-thumb / .cc-thumb get a [data-thumb-motif] that renders a flat SVG
   ================================================================= */
.thumb-motif {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.thumb-motif svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Hide the legacy KPI .mock grid everywhere; thumb-motif takes over */
.big-mod .bm-thumb .mock { display: none !important; }

/* Subtle bottom vignette keeps play button / state chips readable */
.thumb-motif::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.55) 100%);
  pointer-events: none;
}
[data-theme="light"] .thumb-motif::after {
  background: linear-gradient(180deg, rgba(8,8,10,0) 40%, rgba(8,8,10,0.45) 100%);
}

/* Hover: gentle zoom on motif */
.big-mod:hover .thumb-motif svg,
.continue-card:hover .thumb-motif svg,
.next-up-big:hover .thumb-motif svg,
.rail-next-link:hover .thumb-motif svg {
  transform: scale(1.025);
}

/* Keep play button on top of motif */
.big-mod .bm-thumb .play,
.big-mod .bm-thumb .duration,
.big-mod .bm-thumb .bm-state { z-index: 2; }

/* next-up-big motif z-index */
.next-up-big .nu-thumb .play,
.next-up-big .nu-thumb .nu-duration,
.next-up-big .nu-thumb .nu-overlay { z-index: 2; }

/* rail-next motif z-index */
.rail-next .nx-thumb .play,
.rail-next .nx-thumb .nx-overlay { z-index: 2; }

/* =================================================================
   QUICK MODULE CARD — small flat motif chip
   ================================================================= */
.qm-card .qm-icon {
  background: transparent !important;
  padding: 0;
  overflow: hidden;
  position: relative;
  border: 0 !important;
}
.qm-card .qm-icon .motif-mini {
  width: 40px;
  height: 40px;
  display: block;
}
.qm-card.locked .qm-icon .motif-mini { filter: grayscale(0.8) brightness(0.7); }

/* =================================================================
   TYPOGRAPHY REFINEMENTS
   ================================================================= */
h1, h2, h3, h4, .hero, .display, .h1, .h2, .h3 {
  font-family: "Roobert", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11", "ss02";
}

.journey-band h1 {
  font-size: clamp(44px, 6.4vw, 72px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 4px 0 20px;
}
.journey-band h1 .serif {
  font-family: "Roobert", sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--white);
  font-size: 1.02em;
}
.journey-band .eyebrow,
.modules-page .eyebrow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 8px;
}

.t-body .t-title {
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.t-body .t-kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.t-body .t-sub { font-size: 14px; line-height: 1.55; color: var(--light); margin: 0; }

.j-stat {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 18px 20px !important;
  position: relative;
  overflow: hidden;
}
.journey-stats .j-stat .big {
  font-family: "Roobert", sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.journey-stats .j-stat .big .of {
  font-family: "Roobert", sans-serif;
  font-style: normal;
  font-size: 16px;
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0;
  font-weight: 500;
}
.journey-stats .j-stat .lbl {
  font-size: 10.5px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  line-height: 1.4;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

.modules-page h1 {
  font-size: clamp(44px, 6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-bottom: 12px;
}
.modules-page h1 .serif {
  font-family: "Roobert", sans-serif;
  font-weight: 400;
}
.bm-title {
  font-size: 26px !important;
  letter-spacing: -0.025em !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
}
.bm-prop { font-size: 15px !important; line-height: 1.55 !important; }
.bm-kicker {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
}

.timeline-section h2 {
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -0.025em;
  font-weight: 500;
}
.timeline-section h2 .serif {
  font-family: "Roobert", sans-serif;
  font-weight: 400;
}
.quick-modules .qm-head h3 {
  font-size: 22px;
  letter-spacing: -0.02em;
  font-weight: 500;
}
.quick-modules .qm-head h3 .serif {
  font-family: "Roobert", sans-serif;
  font-weight: 400;
}

.continue-card .cc-body h3 {
  font-size: 17px !important;
  letter-spacing: -0.015em !important;
  font-weight: 600 !important;
}
.continue-card .cc-body .cc-kicker {
  font-family: "JetBrains Mono", monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.08em !important;
}