/* ============================================================
   Sets · direction.css — "Krachtlandschap"

   De eigen data als sfeer. Achter de kop van Vandaag ligt de e1RM-lijn als
   een gloeiend reliëf: niet om af te lezen, maar om te voelen dat het
   omhoog gaat. Het getal erop staat in mono, groot, met de eenheid en het
   percentage op dezelfde basislijn. Titels van schermen blijven serif;
   labels fluisteren in mono-kapitalen.

   Kleuren komen uit de tokens in styles/polish.css — daar zit de lichte
   modus al in. Hier geen hex.

   Laadt als laatste stylesheet en wint op volgorde, niet op specificiteit.
   ============================================================ */

:root {
  --d-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --d-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --d-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --d-figure: clamp(56px, 16.5vw, 72px);
  --d-land-height: 240px;
}

/* ── Microlabels ─────────────────────────────────────────────── */

.app-page-eyebrow,
.home-hero-eyebrow,
.home-hero-label,
.home-strength-kicker,
.week-recap-kicker,
.celebrate-eyebrow,
.celebrate-stat-label,
.home-ring-label,
.momentum-kicker {
  font-family: var(--d-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ── Paginakoppen ────────────────────────────────────────────── */

.app-page-header h1 {
  font-family: var(--d-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.015em;
}

/* ── De held: geen kaart, een kop op een landschap ───────────── */

.home-hero-card {
  position: relative;
  /* Het landschap mag tot de schermrand; de host heeft 20px zijmarge. */
  margin: 0 -20px;
  padding: 16px 20px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.home-hero-card::before {
  display: none;
}

/* Met een landschap erachter schuift de inhoud naar beneden, zodat de lijn
   boven het getal ruimte krijgt. */
.home-hero-card.is-strength {
  min-height: calc(var(--d-land-height) + 96px);
}

.home-hero-land {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: var(--d-land-height);
  display: block;
  pointer-events: none;
}

.home-hero-land-stop-top { stop-color: var(--sets-accent); stop-opacity: 0.26; }
.home-hero-land-stop-bottom { stop-color: var(--sets-accent); stop-opacity: 0; }
.home-hero-land-line { stroke: var(--sets-accent); stroke-width: 2.5; }
.home-hero-land-glow { fill: var(--sets-accent); opacity: 0.28; filter: blur(10px); }
.home-hero-land-dot { fill: var(--sets-accent); }

/* In lichte modus is helder lime te schel als vlak; iets rustiger. */
html:not(.dark) .home-hero-land-stop-top { stop-opacity: 0.18; }
html:not(.dark) .home-hero-land-glow { opacity: 0.18; }

.home-hero-card > :not(.home-hero-land) {
  position: relative;
}

.home-hero-eyebrow {
  margin-bottom: 8px;
  color: var(--sets-accent-text);
}

.home-hero-figure {
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.home-hero-value {
  font-family: var(--d-mono);
  font-weight: 500;
  font-size: var(--d-figure);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--sets-text);
}

.home-hero-unit {
  font-family: var(--d-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sets-text-3);
}

.home-hero-badge {
  font-family: var(--d-mono);
  font-size: 14px;
  font-weight: 700;
  margin-left: 2px;
  color: var(--sets-accent-text);
}

.home-hero-card.is-pr .home-hero-value,
.home-hero-card.is-pr .home-hero-badge {
  color: var(--sets-gold-text);
}

.home-hero-label {
  margin: 8px 0 0;
  color: var(--sets-text-3);
}

.home-hero-title {
  margin-top: 14px;
  font-family: var(--d-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.12;
  color: var(--sets-text-2);
  text-wrap: balance;
  max-width: 20ch;
}

.home-hero-body {
  margin-top: 6px;
  font-family: var(--d-sans);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--sets-text-2);
  max-width: 36ch;
}

.home-hero-meta {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--sets-border);
}

.home-hero-meta-number {
  font-family: var(--d-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ── Het getal op de andere schermen: mono, groot ─────────────── */

.nutrition-kcal-total strong,
.home-strength-number,
.week-recap-figure,
.social-streak-value,
.social-challenge-value {
  font-family: var(--d-mono);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
}

.nutrition-kcal-total strong { font-size: clamp(52px, 15vw, 66px); }
.home-strength-number { font-size: 44px; }
.social-streak-value, .social-challenge-value { font-size: 28px; }

.home-ring-figure {
  font-family: var(--d-mono);
  font-weight: 500;
  letter-spacing: -0.02em;
}

#rest-timer-display {
  font-family: var(--d-mono);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.celebrate-title {
  font-size: 32px;
  line-height: 1.08;
}

/* ── Samen: met wie, en reacties ─────────────────────────────── */

.social-with { margin-top: -2px; }

.social-comment-send {
  background: var(--sets-surface-3);
  color: var(--sets-text);
  border: 1px solid var(--sets-border);
  transition: background-color 160ms var(--sets-ease-out, ease-out);
}
.social-comment-send:disabled { opacity: 0.5; }

.social-tag-row { transition: background-color 140ms var(--sets-ease-out, ease-out); }
.social-tag-row:active { background: var(--sets-surface-2); }
.social-tag-check {
  width: 22px; height: 22px; border-radius: 999px;
  border: 1.5px solid var(--sets-border-strong);
  display: inline-block;
  transition: background-color 140ms var(--sets-ease-out, ease-out), border-color 140ms var(--sets-ease-out, ease-out);
}
.social-tag-row[aria-pressed="true"] .social-tag-check {
  background: var(--sets-accent-fill);
  border-color: var(--sets-accent-fill);
}
.social-tag-sheet { animation: d-sheet-in 280ms var(--sets-ease-spring, cubic-bezier(0.22, 1, 0.36, 1)) both; }

/* ============================================================
   BEWEGING
   Bij een nieuwe held: de lijn tekent zichzelf van links naar rechts, het
   lichtpunt verschijnt aan het eind, het getal telt op, de zin en de knop
   volgen. js/home-hero.js zet .is-entering alleen bij een wissel van held.
   ============================================================ */

.home-hero-card.is-entering .home-hero-land-line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: d-draw 1100ms var(--sets-ease-out, ease-out) forwards;
}
.home-hero-card.is-entering .home-hero-land-fill {
  animation: d-fade 900ms 300ms var(--sets-ease-out, ease-out) both;
}
.home-hero-card.is-entering .home-hero-land-dot,
.home-hero-card.is-entering .home-hero-land-glow {
  animation: d-pop 420ms 900ms var(--sets-ease-spring, cubic-bezier(0.22, 1, 0.36, 1)) both;
  transform-box: fill-box;
  transform-origin: center;
}
.home-hero-card.is-entering .home-hero-eyebrow { animation: d-rise 420ms 120ms var(--sets-ease-out, ease-out) both; }
.home-hero-card.is-entering .home-hero-figure { animation: d-rise 520ms 200ms var(--sets-ease-out, ease-out) both; }
.home-hero-card.is-entering .home-hero-label,
.home-hero-card.is-entering .home-hero-title,
.home-hero-card.is-entering .home-hero-body { animation: d-rise 480ms 320ms var(--sets-ease-out, ease-out) both; }
.home-hero-card.is-entering .home-hero-meta,
.home-hero-card.is-entering .home-hero-action { animation: d-rise 480ms 420ms var(--sets-ease-out, ease-out) both; }

.home-hero-value[data-countup] { font-variant-numeric: tabular-nums; }

@keyframes d-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes d-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes d-draw { to { stroke-dashoffset: 0; } }
@keyframes d-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes d-sheet-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .home-hero-card.is-entering *, .social-tag-sheet { animation: none !important; }
  .home-hero-card.is-entering .home-hero-land-line { stroke-dashoffset: 0; }
}
html.m-reduce .home-hero-card.is-entering *, html.m-reduce .social-tag-sheet { animation: none !important; }
html.m-reduce .home-hero-card.is-entering .home-hero-land-line { stroke-dashoffset: 0; }
html.m-lite .home-hero-card.is-entering * { animation-delay: 0ms !important; animation-duration: 240ms !important; }