/* ============================================================
   Slowfeed — "where your hours go"
   Scroll-pinned, scroll-scrubbed. Calm, matter-of-fact.
   Theme-adaptive (light + dark).
   ============================================================ */

.lifedots { position: relative; }

/* ---- the pin: locks the stage while you scroll through the story ---- */
.ld-pin { position: relative; }
.ld-stage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: clamp(64px, 12vh, 120px);
  position: relative;
}

/* Autoplay: the story plays on its own when it scrolls into view, so the
   stage is just a normal full-viewport section (no scroll-pin). */
.ld-scrollhint { display: none !important; }

.ld-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ld-eyebrow { margin-bottom: var(--space-3); }

.ld-title {
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin-bottom: clamp(36px, 6vh, 64px);
}

/* ---- dots ---- */
.ld {
  --dot: 24px;
  --dotgap: 15px;
  --rowgap: 22px;
  --dots-w: calc(8 * var(--dot) + 7 * var(--dotgap));
  display: flex;
  flex-direction: column;
  gap: var(--rowgap);
}
/* fine density: double the dots (half-hour blocks) */
.ld[data-dots="fine"] {
  --dot: 17px;
  --dotgap: 10px;
  --rowgap: 17px;
  --dots-w: calc(16 * var(--dot) + 15 * var(--dotgap));
}

/* category colors (arctic system) */
:root[data-theme="light"] .ld {
  --dot-line: #C4D4DF;
  --dot-work: #8FBEDD;     /* light blue */
  --dot-else: #BFDAEC;     /* palest blue */
  --dot-free: #2F7FB4;     /* deep arctic blue, your free time */
  --dot-lost: #93A6B2;     /* default: frost, the scroll's share */
}
:root[data-theme="dark"] .ld {
  --dot-line: #33414A;
  --dot-work: #6FA0C0;     /* light blue */
  --dot-else: #4E748C;     /* mid blue */
  --dot-free: #A7CCEC;     /* brightest arctic pop */
  --dot-lost: #61727D;
}

/* ---- "scroll's share" color options (arctic, calm, no red; pick via Tweaks) ---- */
:root[data-theme="light"] .ld[data-lost="frost"]  { --dot-lost: #8FA3AF; }  /* drained frost grey */
:root[data-theme="dark"]  .ld[data-lost="frost"]  { --dot-lost: #5E6F7A; }
:root[data-theme="light"] .ld[data-lost="slate"]  { --dot-lost: #6E818E; }  /* deep cool slate */
:root[data-theme="dark"]  .ld[data-lost="slate"]  { --dot-lost: #47565F; }
:root[data-theme="light"] .ld[data-lost="steel"]  { --dot-lost: #7C97AC; }  /* muted steel blue */
:root[data-theme="dark"]  .ld[data-lost="steel"]  { --dot-lost: #506679; }
:root[data-theme="light"] .ld[data-lost="haze"]   { --dot-lost: #AAB7BF; }  /* pale neutral haze */
:root[data-theme="dark"]  .ld[data-lost="haze"]   { --dot-lost: #69757D; }
:root[data-theme="light"] .ld[data-lost="deep"]   { --dot-lost: #56707F; }  /* deepest arctic */
:root[data-theme="dark"]  .ld[data-lost="deep"]   { --dot-lost: #3D4F5A; }
:root[data-theme="light"] .ld[data-lost="ember"]  { --dot-lost: #C76461; }  /* calm muted red, tuned to the blue */
:root[data-theme="dark"]  .ld[data-lost="ember"]  { --dot-lost: #B05A56; }

.ld-row {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 32px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.ld-dots {
  display: flex;
  flex-wrap: wrap;
  gap: var(--dotgap);
  width: var(--dots-w);
  flex: none;
  justify-content: flex-end;
}
.ld-label {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.4vw, 1.0625rem);
  color: var(--ink-2);
  letter-spacing: 0.01em;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
.ld-label.is-in { opacity: 1; transform: none; }

.ld-dot {
  width: var(--dot);
  height: var(--dot);
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--dot-line);
  transform: scale(0.55);
  opacity: 0;
  transition: background 420ms var(--ease), box-shadow 420ms var(--ease),
              transform 420ms var(--ease), opacity 420ms var(--ease);
}
.ld-dot.is-in { transform: scale(1); opacity: 1; }
.ld-row[data-cat="work"] .ld-dot.is-filled { background: var(--dot-work); box-shadow: inset 0 0 0 1.5px transparent; }
.ld-row[data-cat="else"] .ld-dot.is-filled { background: var(--dot-else); box-shadow: inset 0 0 0 1.5px transparent; }
.ld-row[data-cat="free"] .ld-dot.is-filled { background: var(--dot-free); box-shadow: inset 0 0 0 1.5px transparent; }

/* the scroll's share — a clearly different color sweeps over the free dots.
   Uses a real child element (not ::after) so it renders reliably everywhere. */
.ld-wash {
  position: absolute;
  inset: 0;
  background: var(--dot-lost);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 760ms var(--ease);
}
.ld-dot.is-lost .ld-wash { transform: scaleX(1); }
/* the half dot — only its left half fills (~2.5 of 3 free hours) */
.ld-dot--half .ld-wash { right: 50%; }

/* focus: when telling the free-time story, dim the rest so it's obvious */
.ld[data-focus="free"] .ld-row[data-cat="work"],
.ld[data-focus="free"] .ld-row[data-cat="else"] {
  opacity: 0.32;
}
.ld[data-focus="free"] .ld-row[data-cat="free"] {
  transform: scale(1.06);
}

/* ---- narration ---- */
.ld-caption {
  position: relative;
  margin-top: clamp(40px, 6vh, 68px);
  width: min(40ch, 90vw);
  min-height: 6.6em;
}
.ld-capgroup {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
  pointer-events: none;
}
.ld-cap-line {
  margin: 0 auto;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
.ld-cap-line.is-active { opacity: 1; transform: none; }
.ld-cap-line[data-line="b"] { color: var(--ink-2); }
.ld-cap-line strong { font-weight: 500; color: var(--ink); font-style: italic; }

/* ---- progress + scroll hint ---- */
.ld-progress {
  position: absolute;
  left: 50%;
  bottom: clamp(26px, 5vh, 50px);
  transform: translateX(-50%);
  width: clamp(150px, 24vw, 260px);
  height: 30px;
}
.ld-progress__track {
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 2px;
  background: var(--divider);
  border-radius: 2px;
}
.ld-progress__fill {
  position: absolute;
  left: 0; bottom: 3px;
  height: 2px;
  width: 0;
  background: var(--ink-3);
  opacity: 0.55;
  border-radius: 2px;
  transition: width 140ms linear;
}
.ld-progress__walker {
  position: absolute;
  left: 0; bottom: 3px;
  color: var(--accent);
  transition: transform 140ms linear;
  will-change: transform;
}
.ld-progress__walker svg {
  display: block;
  width: 21px;
  height: auto;
  fill: currentColor;
  position: absolute;
  left: -10.5px;
  bottom: -1px;
}

/* draggable scrubber: grab the penguin (or the bar) to scrub the story */
.ld-progress { cursor: pointer; touch-action: none; }
.ld-progress__walker { cursor: grab; }
.ld-progress__walker::before {
  content: "";
  position: absolute;
  left: -22px;
  bottom: -9px;
  width: 44px;
  height: 46px;
  border-radius: 50%;
}
.ld-progress.is-grabbing,
.ld-progress.is-grabbing .ld-progress__walker { cursor: grabbing; }
.ld-progress.is-grabbing .ld-progress__fill,
.ld-progress.is-grabbing .ld-progress__walker { transition: none; }
.ld-progress.is-grabbing .ld-progress__walker svg,
.ld-progress.is-grabbing .peng-foot { animation-play-state: paused; }

/* the penguin walks — it waddles side to side while the feet step, subtly */
@media (prefers-reduced-motion: no-preference) {
  .ld-progress__walker svg {
    transform-box: fill-box;
    transform-origin: 50% 96%;
    animation: pengWaddle 0.82s ease-in-out infinite;
  }
  .peng-foot {
    transform-box: fill-box;
    transform-origin: 50% 8%;
    animation: pengStep 0.82s ease-in-out infinite;
  }
  .peng-foot--r { animation-delay: -0.41s; }
}
@keyframes pengStep {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-2.3px) rotate(-9deg); }
}
@keyframes pengWaddle {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  25%      { transform: rotate(0deg) translateY(-1.2px); }
  50%      { transform: rotate(7deg) translateY(0); }
  75%      { transform: rotate(0deg) translateY(-1.2px); }
}
.ld-scrollhint {
  position: absolute;
  left: 50%;
  bottom: clamp(48px, 8vh, 84px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: opacity 420ms var(--ease);
}
.ld-scrollhint svg { width: 16px; height: 16px; animation: ldNudge 2.4s var(--ease) infinite; }
@keyframes ldNudge {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* mobile: stack label under its dots, smaller dots */
@media (max-width: 600px) {
  .ld[data-dots="fine"] { --dot: 13px; --dotgap: 7px; --dots-w: calc(16 * var(--dot) + 15 * var(--dotgap)); }
  .ld { --dot: 19px; --dotgap: 12px; }
  .ld-row { flex-direction: column; align-items: center; gap: 9px; }
  .ld-dots { width: auto; max-width: 100%; justify-content: center; }
  .ld-label { text-align: center; white-space: normal; }
  .ld[data-focus="free"] .ld-row[data-cat="free"] { transform: none; }
}

/* reduced motion: no pin, no scrub — show the final state, calm and static */
@media (prefers-reduced-motion: reduce) {
  .ld-row, .ld-dot, .ld-wash, .ld-label, .ld-cap, .ld-progress__fill { transition: none !important; }
  .ld-scrollhint { display: none; }
  .ld-progress { display: none; }
}