/* bsf_improvement_loop · module.css
   Typography matches the hero (weight 300 display, uppercase micro-labels).
   Three text sizes, defined once as local vars and reused for all copy:
     --loop-fs-lg  display  (hero title scale 28→48px)  · heading
     --loop-fs-md  text     (hero body scale 15→16px)   · intro, step copy, how-heading
     --loop-fs-sm  label    (12px)                       · all uppercase micro-labels
   The countdown digits/separators use the ORIGINAL bsf_countdown scale verbatim
   (32/48/64px numbers, 28/44px separators) so the timer looks identical to v1.
   Countdown rendered as glass cards to match bsf_countdown. Branding via --bsf-* tokens
   only (no raw hex, no Tailwind). Accents use the brand primary (amber). Fallbacks kept. */

.bsf-loop {
  --loop-fs-lg: clamp(1.75rem, 1rem + 3.2vw, 3rem);
  --loop-fs-md: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --loop-fs-sm: 0.75rem;
  /* Blue field: darker-blue outer (--loop-bg) with a softer blue "dot" glow in the
     centre (--loop-glow), behind the neural net + frost. Module-local blues. */
  --loop-bg: #02040a;
  --loop-glow: rgba(15, 26, 48, 0.9);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--bsf-space-section, 3.5rem);
  padding-inline: 0; /* inner uses .bsf-container → content aligns to the site grid (nav) */
  background: var(--loop-bg);
  color: var(--bsf-color-text, currentColor);
}

/* Background photo (behind the frosted net) — parallax layer. The dark readability
   overlay is baked into the inline background-image in module.html. */
.bsf-loop__photo {
  position: absolute;
  inset: -14% 0; /* taller than the section so scroll-parallax never reveals an edge */
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center top; /* desktop: align to the image's top edge */
  will-change: transform;
}
/* Mobile: shift the crop left so the eye stays in frame on the narrow viewport */
@media (max-width: 767px) {
  .bsf-loop__photo { background-position: left top; }
}

.bsf-loop__inner {
  position: relative;
  z-index: 3;
  text-align: center;
}

/* --- Head (compact) --- */
.bsf-loop__head {
  max-width: 100%; /* heading runs to the container edges (nav width) */
  margin-inline: auto;
  margin-bottom: var(--bsf-space-lg, 1.75rem);
}

.bsf-loop__eyebrow {
  font-family: var(--bsf-font-utility, var(--bsf-font-body, inherit));
  font-size: 14.44px; /* match hero overline ("who I am"): 14.44 → 16 → 18px */
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--bsf-color-primary, currentColor);
  margin: 0 0 var(--bsf-space-xs, 0.75rem);
}
@media (min-width: 768px)  { .bsf-loop__eyebrow { font-size: 16px; } }
@media (min-width: 1024px) { .bsf-loop__eyebrow { font-size: 18px; } }

.bsf-loop__heading {
  font-family: var(--bsf-font-display, inherit);
  font-size: var(--loop-fs-lg);
  line-height: var(--bsf-leading-tight, 1.15);
  font-weight: var(--bsf-weight-light, 300);
  letter-spacing: 0.02em;
  margin: 0 0 var(--bsf-space-sm, 0.75rem);
}

.bsf-loop__intro {
  font-family: var(--bsf-font-body, inherit);
  font-size: var(--loop-fs-md);
  line-height: var(--bsf-leading-relaxed, 1.6);
  color: var(--bsf-color-text-muted, currentColor);
  max-width: var(--bsf-measure-text, 38rem);
  margin: 0 auto;
}

/* --- Iteration counter (proof it's been running) --- */
.bsf-loop__iteration {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bsf-space-2xs, 0.5rem);
  margin-bottom: var(--bsf-space-md, 1rem);
  padding: var(--bsf-space-3xs, 0.4rem) var(--bsf-space-sm, 0.9rem);
  border: 1px solid var(--bsf-color-border, currentColor);
  border-radius: var(--bsf-radius-pill, 999px);
}

.bsf-loop__iteration-label {
  font-family: var(--bsf-font-utility, var(--bsf-font-body, inherit));
  font-size: var(--loop-fs-sm);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsf-color-text-subtle, currentColor);
}

.bsf-loop__iteration-value {
  font-family: var(--bsf-font-display, var(--bsf-font-utility, inherit));
  font-size: var(--loop-fs-md);
  font-weight: 300;
  color: var(--bsf-color-primary, currentColor);
  line-height: 1;
}
.bsf-loop__iteration-value::before { content: "#"; opacity: 0.6; }

/* --- Countdown --- */
.bsf-loop__countdown {
  margin-bottom: var(--bsf-space-lg, 1.75rem);
}

.bsf-loop__countdown-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--bsf-font-utility, var(--bsf-font-body, inherit));
  font-size: var(--loop-fs-sm);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsf-color-text-subtle, currentColor);
  margin: 0 0 var(--bsf-space-sm, 0.9rem);
}
/* pulsing "live" dot */
.bsf-loop__countdown-label::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--bsf-color-primary, currentColor);
  flex: 0 0 auto;
}

.bsf-loop__clock {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

/* glass unit cards + numbers — 1:1 with the original bsf_countdown */
.bsf-loop__unit {
  flex: 1 1 0;
  min-width: 0;
  max-width: 8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 0.5rem;
  background: var(--bsf-color-surface-glass, rgba(255, 255, 255, 0.05));
  backdrop-filter: var(--bsf-blur, blur(20px));
  -webkit-backdrop-filter: var(--bsf-blur, blur(20px));
  border: 1px solid var(--bsf-color-border, currentColor);
  border-radius: var(--bsf-radius-card, 0.75rem);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bsf-loop__unit { background: var(--bsf-color-surface, rgba(10, 10, 10, 0.9)); }
}

.bsf-loop__num {
  font-weight: 300;
  font-size: 32px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--bsf-color-text, currentColor);
}
@media (min-width: 768px)  { .bsf-loop__num { font-size: 48px; } }
@media (min-width: 1024px) { .bsf-loop__num { font-size: 64px; } }

.bsf-loop__unit-label {
  font-family: var(--bsf-font-utility, var(--bsf-font-body, inherit));
  font-size: var(--loop-fs-sm);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bsf-color-text-subtle, currentColor);
}

.bsf-loop__sep {
  display: flex;
  align-items: center;
  font-weight: 300;
  font-size: 28px;
  color: var(--bsf-color-primary, currentColor);
  opacity: 0.5;
}
@media (min-width: 768px) { .bsf-loop__sep { font-size: 44px; } }

/* --- How it works --- */
.bsf-loop__how {
  max-width: var(--bsf-measure, 42rem);
  margin-inline: auto;
  margin-bottom: var(--bsf-space-lg, 1.75rem);
  text-align: left;
}

.bsf-loop__how-heading {
  font-family: var(--bsf-font-display, inherit);
  font-size: var(--loop-fs-md);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: 0.02em;
  margin: 0 0 var(--bsf-space-2xs, 0.4rem);
  text-align: center;
}

.bsf-loop__how-intro {
  font-family: var(--bsf-font-body, inherit);
  font-size: var(--loop-fs-md);
  line-height: 1.6;
  color: var(--bsf-color-text-muted, currentColor);
  margin: 0 0 var(--bsf-space-md, 1.1rem);
  text-align: center;
}

/* --- Workflow ---
   The method chips are the step nav (tablist). Below, a stage cycles one panel at a time:
   fade in → type → fade out → next. Default (no-JS / reduced-motion): panels stack as a
   readable static list; JS adds .is-live to enable the single-panel cycle. */
.bsf-loop__workflow { margin: 0 0 var(--bsf-space-md, 1.1rem); }

/* stepper (chips) */
.bsf-loop__wf {
  list-style: none;
  margin: 0 0 var(--bsf-space-md, 1.25rem);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0;
}
.bsf-loop__wf-item { display: flex; align-items: center; }
.bsf-loop__wf-item:not(:last-child)::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  margin: 0 0.4rem;
  background: var(--bsf-color-border, currentColor);
  transition: background-color 0.3s ease;
}
.bsf-loop__wf-item.is-done:not(:last-child)::after { background: var(--bsf-color-primary, currentColor); }

.bsf-loop__wf-chip {
  font-family: var(--bsf-font-utility, var(--bsf-font-body, inherit));
  font-size: var(--loop-fs-sm);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--bsf-space-3xs, 0.4rem) var(--bsf-space-xs, 0.85rem);
  border: 1px solid var(--bsf-color-border, currentColor);
  border-radius: var(--bsf-radius-pill, 999px);
  background: transparent;
  color: var(--bsf-color-text-subtle, currentColor);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}
.bsf-loop__wf-item.is-done .bsf-loop__wf-chip {
  border-color: var(--bsf-color-primary, currentColor);
  color: var(--bsf-color-primary, currentColor);
}
.bsf-loop__wf-item.is-active .bsf-loop__wf-chip {
  border-color: var(--bsf-color-primary, currentColor);
  background: var(--bsf-color-primary, currentColor);
  color: var(--bsf-color-on-primary, var(--bsf-color-bg, currentColor));
}

/* stage + panels (default: readable stacked list) */
.bsf-loop__stage { max-width: 34rem; margin-inline: auto; }
.bsf-loop__panel { margin-bottom: var(--bsf-space-sm, 0.85rem); }
.bsf-loop__panel:last-child { margin-bottom: 0; }

.bsf-loop__panel-index {
  display: block;
  font-family: var(--bsf-font-utility, var(--bsf-font-display, inherit));
  font-size: var(--loop-fs-sm);
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--bsf-color-primary, currentColor);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--bsf-space-2xs, 0.5rem);
}
.bsf-loop__panel-title {
  font-family: var(--bsf-font-display, var(--bsf-font-body, inherit));
  font-size: var(--loop-fs-md);
  font-weight: 400;
  line-height: 1.4;
  color: var(--bsf-color-text, currentColor);
  margin: 0 0 var(--bsf-space-3xs, 0.35rem);
  min-height: 1.4em; /* reserve height while typing */
}
.bsf-loop__panel-text {
  font-family: var(--bsf-font-body, inherit);
  font-size: var(--loop-fs-md);
  line-height: 1.6;
  color: var(--bsf-color-text-muted, currentColor);
  margin: 0;
}

/* live cycle (JS + motion): panels overlap in one grid cell, only the active one shows */
.bsf-loop__workflow.is-live .bsf-loop__stage { display: grid; }
.bsf-loop__workflow.is-live .bsf-loop__panel {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
}
.bsf-loop__workflow.is-live .bsf-loop__panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.bsf-loop__how-close {
  font-family: var(--bsf-font-body, inherit);
  font-size: var(--loop-fs-md);
  line-height: 1.6;
  font-weight: 400;
  color: var(--bsf-color-text, currentColor);
  margin: 0;
  text-align: center;
}

/* --- Footnote --- */
.bsf-loop__footnote {
  font-family: var(--bsf-font-body, inherit);
  font-size: var(--loop-fs-sm);
  line-height: var(--bsf-leading-relaxed, 1.6);
  color: var(--bsf-color-text-subtle, currentColor);
  max-width: var(--bsf-measure-text, 38rem);
  margin-inline: auto;
  margin-block: 0;
}

/* --- Motion (respects reduced-motion) --- */
@media (prefers-reduced-motion: no-preference) {
  .bsf-loop__sep { animation: bsf-loop-blink 1s steps(1, end) infinite; }
  .bsf-loop__countdown-label::before { animation: bsf-loop-pulse 1.6s ease-in-out infinite; }
}

@keyframes bsf-loop-blink {
  0%, 50%   { opacity: 0.6; }
  51%, 100% { opacity: 0.18; }
}
@keyframes bsf-loop-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

@media (max-width: 30rem) {
  .bsf-loop__clock { gap: 0.25rem; }
  .bsf-loop__unit { padding: 0.875rem 0.25rem; border-radius: var(--bsf-radius-md, 0.5rem); }
  .bsf-loop__sep { font-size: 20px; }
  .bsf-loop__wf { gap: 0.4rem; }
  .bsf-loop__wf-item:not(:last-child)::after { display: none; }
}