/* Founder-story scenes (web/blog/tracking-my-girlfriends-cycle): four in-article figures drawn from the real app UI.
   Every figure is complete at rest (its first state is visible on load) and
   reduced motion shows one representative state with no movement. */
.fs-figure {
  --fs-men: #c46b6b; --fs-fol: #5ba882; --fs-ovu: #e8b562; --fs-lut: #8979ac; --fs-pms: #4cc9d8;
  --fs-card: #15131f; --fs-card-2: #1d1a2b; --fs-line: rgba(255,255,255,.09);
  --fs-ink: #f5f5f7; --fs-soft: #b4b4bb; --fs-mute: #86868b;
  margin: 28px 0 32px; display: flex; flex-direction: column; gap: 12px;
}
.fs-figure figcaption { font-size: 14px; line-height: 1.5; color: var(--fs-mute); }
.fs-stage {
  border: 1px solid var(--fs-line); border-radius: 22px;
  background: radial-gradient(120% 90% at 20% 0%, #1a1630 0%, #0b0a16 60%);
  padding: 22px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; align-items: center;
}

/* ---- Widgets: lock screen + home widget, five states cycling ---- */
.fs-states { position: relative; }
.fs-state { animation: fs-five 15s infinite both; opacity: 0; }
.fs-state:nth-child(1) { animation-delay: 0s; }
.fs-state:nth-child(2) { animation-delay: -12s; }
.fs-state:nth-child(3) { animation-delay: -9s; }
.fs-state:nth-child(4) { animation-delay: -6s; }
.fs-state:nth-child(5) { animation-delay: -3s; }
.fs-states > .fs-state + .fs-state { position: absolute; inset: 0; }
@keyframes fs-five {
  0% { opacity: 1; transform: none; }
  17% { opacity: 1; transform: none; }
  20% { opacity: 0; transform: translateY(-4px); }
  97% { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}
.fs-lock {
  width: 220px; aspect-ratio: 9 / 13; border-radius: 30px; padding: 22px 16px;
  background: linear-gradient(170deg, #2a2346 0%, #120f22 70%);
  border: 1px solid var(--fs-line); display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.fs-lock-inline { font: 600 12px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Rounded", system-ui, sans-serif; color: rgba(255,255,255,.85); min-height: 15px; }
.fs-lock-time { font: 600 56px/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif; color: rgba(255,255,255,.92); letter-spacing: -1px; }
.fs-lock-row { display: flex; gap: 10px; margin-top: 4px; }
.fs-acc {
  width: 52px; height: 52px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.14) 0);
  display: grid; place-items: center; position: relative;
}
.fs-acc::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #18142c; }
.fs-acc span { position: relative; font: 700 16px/1 -apple-system, system-ui, sans-serif; color: #fff; }
.fs-acc small { position: relative; display: block; font-size: 8px; font-weight: 600; color: rgba(255,255,255,.7); text-align: center; margin-top: 1px; }
.fs-acc-text { display: flex; flex-direction: column; justify-content: center; font: 600 11px/1.3 -apple-system, system-ui, sans-serif; color: rgba(255,255,255,.85); }
.fs-acc-text b { font-size: 13px; color: #fff; }

.fs-widget {
  width: 170px; height: 170px; border-radius: 26px; padding: 14px;
  background: #1c1a26; border: 1px solid var(--fs-line);
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.fs-widget-top { display: flex; justify-content: space-between; align-items: flex-start; }
.fs-badge { font: 600 11px/1 -apple-system, "SF Pro Rounded", system-ui, sans-serif; color: #0b0a12; background: var(--c); border-radius: 999px; padding: 4px 8px; }
.fs-orb {
  width: 38px; height: 38px; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
  display: grid; place-items: center; position: relative;
}
.fs-orb::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #1c1a26; }
.fs-orb svg { position: relative; width: 16px; height: 16px; fill: var(--c); }
.fs-tip { margin-top: auto; font: 700 18px/1.15 -apple-system, "SF Pro Rounded", system-ui, sans-serif; color: var(--fs-ink); }
.fs-day { font: 600 12px/1.3 -apple-system, "SF Pro Rounded", system-ui, sans-serif; color: var(--fs-mute); }

/* ---- Cycle cheat sheet: 28-day ribbon with a moving "today" marker ---- */
.fs-cycle { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.fs-ribbon { position: relative; display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; padding-top: 18px; }
.fs-ribbon i { height: 14px; border-radius: 4px; background: var(--c); opacity: .85; }
.fs-marker {
  position: absolute; top: 0; left: 0; width: calc(100% / 28); display: flex; justify-content: center;
  animation: fs-walk 16s linear infinite both;
}
.fs-marker::before { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--fs-ink); }
@keyframes fs-walk { from { transform: translateX(calc(1 * 100%)); } to { transform: translateX(calc(27 * 100%)); } }
.fs-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fs-act { border: 1px solid var(--fs-line); border-radius: 14px; padding: 12px; background: var(--fs-card); min-width: 0; animation: fs-lit 16s linear infinite both; }
.fs-act h4 { margin: 0 0 6px; font: 600 13px/1.2 -apple-system, system-ui, sans-serif; color: var(--c); letter-spacing: .02em; }
.fs-act p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fs-soft); }
/* The marker walks day 2 to day 28 over 16 s: period days 2-5 are 0-13%,
   follicular and ovulation days 6-15 are 15-52%, PMS days 26-28 are 90-100%. */
.fs-act[data-at="period"] { animation-name: fs-lit-period; }
.fs-act[data-at="good"] { animation-name: fs-lit-good; }
.fs-act[data-at="pms"] { animation-name: fs-lit-pms; }
@keyframes fs-lit-period { 0%,13% { border-color: var(--c); background: var(--fs-card-2); } 15%,100% { border-color: var(--fs-line); background: var(--fs-card); } }
@keyframes fs-lit-good { 0%,14% { border-color: var(--fs-line); background: var(--fs-card); } 16%,52% { border-color: var(--c); background: var(--fs-card-2); } 54%,100% { border-color: var(--fs-line); background: var(--fs-card); } }
@keyframes fs-lit-pms { 0%,89% { border-color: var(--fs-line); background: var(--fs-card); } 91%,100% { border-color: var(--c); background: var(--fs-card-2); } }

/* ---- Rating: five hearts filling to "Good" ---- */
.fs-rate { width: min(320px, 100%); border-radius: 22px; padding: 20px; background: var(--fs-card); border: 1px solid var(--fs-line); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fs-rate h4 { margin: 0; font: 600 17px/1.2 -apple-system, system-ui, sans-serif; color: var(--fs-ink); }
.fs-hearts { display: flex; gap: 10px; }
.fs-hearts svg { width: 36px; height: 36px; fill: rgba(255,255,255,.12); animation: fs-heart 6s infinite both; }
.fs-hearts svg:nth-child(1) { animation-delay: .4s; }
.fs-hearts svg:nth-child(2) { animation-delay: .8s; }
.fs-hearts svg:nth-child(3) { animation-delay: 1.2s; }
.fs-hearts svg:nth-child(4) { animation-delay: 1.6s; }
.fs-hearts svg:nth-child(5) { animation-name: none; }
@keyframes fs-heart {
  0% { fill: rgba(255,255,255,.12); transform: scale(1); }
  4% { fill: #ff6b81; transform: scale(1.18); }
  9%, 82% { fill: #ff6b81; transform: scale(1); }
  88%, 100% { fill: rgba(255,255,255,.12); transform: scale(1); }
}
.fs-labels { position: relative; height: 20px; width: 100%; text-align: center; font-size: 14px; color: var(--fs-soft); }
/* One 6 s cycle, no delays: each label owns the slice after its heart fills. */
.fs-labels span { position: absolute; inset: 0; opacity: 0; animation: 6s infinite both; }
.fs-labels span:nth-child(1) { animation-name: fs-l1; }
.fs-labels span:nth-child(2) { animation-name: fs-l2; }
.fs-labels span:nth-child(3) { animation-name: fs-l3; }
.fs-labels span:nth-child(4) { animation-name: fs-l4; }
@keyframes fs-l1 { 0%, 6% { opacity: 0; } 7%, 13% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes fs-l2 { 0%, 13% { opacity: 0; } 14%, 19% { opacity: 1; } 20%, 100% { opacity: 0; } }
@keyframes fs-l3 { 0%, 19% { opacity: 0; } 20%, 26% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes fs-l4 { 0%, 26% { opacity: 0; } 27%, 82% { opacity: 1; } 87%, 100% { opacity: 0; } }
.fs-saved { font: 600 13px/1 -apple-system, system-ui, sans-serif; color: #0b0a12; background: #5ba882; border-radius: 999px; padding: 7px 12px; animation: fs-saved 6s infinite both; }
@keyframes fs-saved { 0%, 40% { opacity: 0; transform: translateY(6px); } 46%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; } }

/* ---- Chart: average rating per phase, his line over the couples' fills ---- */
.fs-chart { width: min(420px, 100%); border-radius: 22px; padding: 18px 18px 12px; background: var(--fs-card); border: 1px solid var(--fs-line); }
.fs-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.fs-chart-head h4 { margin: 0; font: 600 15px/1.2 -apple-system, system-ui, sans-serif; color: var(--fs-ink); }
.fs-chart-head span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fs-mute); }
.fs-plot { position: relative; height: 150px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; }
.fs-col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.fs-col::before { content: ""; position: absolute; inset: 0 22%; border-radius: 10px; background: rgba(255,255,255,.05); }
.fs-fill { position: relative; width: 56%; height: calc(var(--avg) / 5 * 100%); border-radius: 10px; background: color-mix(in srgb, var(--c) 45%, transparent); transform-origin: bottom; animation: fs-grow .9s cubic-bezier(.2,.8,.2,1) both; }
.fs-col:nth-child(2) .fs-fill { animation-delay: .12s; }
.fs-col:nth-child(3) .fs-fill { animation-delay: .24s; }
.fs-col:nth-child(4) .fs-fill { animation-delay: .36s; }
@keyframes fs-grow { from { transform: scaleY(.15); } to { transform: none; } }
.fs-dot { position: absolute; left: 50%; bottom: calc(var(--me) / 5 * 100%); width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; background: #f5f5f7; box-shadow: 0 0 0 3px #15131f; animation: fs-pop .5s .6s cubic-bezier(.2,.8,.2,1) both; }
.fs-col:nth-child(2) .fs-dot { animation-delay: .72s; }
.fs-col:nth-child(3) .fs-dot { animation-delay: .84s; }
.fs-col:nth-child(4) .fs-dot { animation-delay: .96s; }
@keyframes fs-pop { from { transform: scale(.4); } to { transform: none; } }
.fs-axis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 8px; text-align: center; font: 600 12px/1.2 -apple-system, system-ui, sans-serif; color: var(--fs-soft); }
.fs-legend { display: flex; gap: 16px; justify-content: center; margin-top: 10px; font-size: 12px; color: var(--fs-mute); }
.fs-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }

@media (max-width: 560px) {
  .fs-acts { grid-template-columns: 1fr; }
  .fs-stage { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .fs-state, .fs-marker, .fs-act, .fs-hearts svg, .fs-labels span, .fs-saved, .fs-fill, .fs-dot { animation: none !important; }
  .fs-states > .fs-state { display: none; }
  .fs-states > .fs-state[data-rest] { display: flex; position: static; opacity: 1; }
  .fs-marker { transform: translateX(calc(19 * 100%)); }
  .fs-hearts svg:nth-child(-n+4) { fill: #ff6b81; }
  .fs-labels span { opacity: 0; }
  .fs-labels span:nth-child(4) { opacity: 1; }
  .fs-saved { opacity: 1; }
}