/* Small CSS-only feature demos (no images) for /Features, /Docs and the landing page.
   Each demo loops on its own timer; base styles are the finished state so reduced motion still reads well. */
@property --fd-p { syntax: "<percentage>"; inherits: false; initial-value: 72%; }

.ft-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 24px;
  align-items: start;
  margin: 4px 0 16px;
}
.ft-split > div > :last-child { margin-bottom: 0; }
@media (max-width: 1040px) {
  .ft-split { grid-template-columns: 1fr; gap: 14px; }
}

.fd {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin: 0;
  justify-self: center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  background: linear-gradient(160deg, #eff6ff 0%, #f0fdf4 100%);
  font-size: 11px;
  line-height: 1.35;
  color: #0f172a;
  overflow: hidden;
}
.fd-card { position: relative; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
.fd-cap { display: block; margin-top: 10px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); text-align: center; text-wrap: balance; }
.fd-row { display: flex; align-items: center; gap: 6px; }
.fd-between { justify-content: space-between; }
.fd-wrap { flex-wrap: wrap; }
.fd p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; }
.fd .fd-label { margin: 9px 0 5px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #64748b; }
.fd .fd-label:first-child { margin-top: 0; }
.fd-sk { display: block; height: 6px; margin: 5px 0; border-radius: 3px; background: #e2e8f0; }
.fd-sk.w80 { width: 80%; } .fd-sk.w60 { width: 60%; } .fd-sk.w40 { width: 40%; }
.fd-chip {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}
.fd-chip.is-sel { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; }
.fd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  padding: 7px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #16a34a);
}
.fd-btn.is-ghost { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
.fd-swap { display: inline-grid; }
.fd-swap > * { grid-area: 1 / 1; }
.fd-muted { color: #64748b; }

/* Sign-in demo inside a figure */
.fd-login { display: flex; justify-content: center; padding: 18px 14px; }

/* DPP streak */
.fd-streak { color: #ea580c; font-weight: 700; }
.fd-days { display: flex; gap: 5px; margin-top: 9px; }
.fd-day {
  flex: 1;
  height: 36px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: #dcfce7;
  color: #16a34a;
}
.fd-day small { font-size: 8px; font-weight: 600; color: #64748b; }
.fd-day i { font-size: 12px; }
.fd-day.is-today { animation: fd-today 6s infinite; }
.fd-day.is-today i { animation: fd-today-i 6s infinite; }
.fd-dpp .fd-s-a { opacity: 0; animation: fd-a6 6s infinite; }
.fd-dpp .fd-s-b { animation: fd-b6 6s infinite; }
.fd-dpp .fd-btn { animation: fd-press-40 6s infinite; }
@keyframes fd-today {
  0%, 48% { background: #fff; color: #94a3b8; box-shadow: inset 0 0 0 2px #60a5fa; transform: none; }
  54% { transform: scale(1.18); }
  60%, 94% { background: #dcfce7; color: #16a34a; box-shadow: none; transform: none; }
  100% { background: #fff; color: #94a3b8; box-shadow: inset 0 0 0 2px #60a5fa; }
}
@keyframes fd-today-i { 0%, 50% { opacity: 0; } 56%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fd-a6 { 0%, 52% { opacity: 1; } 56%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fd-b6 { 0%, 52% { opacity: 0; } 56%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fd-press-40 { 0%, 38% { transform: none; } 42% { transform: scale(0.93); } 46%, 100% { transform: none; } }

/* Mock test setup */
.fd-mock .fd-chip.is-a { animation: fd-chip 8s infinite; }
.fd-mock .fd-chip.is-b { animation: fd-chip 8s infinite 0.6s; }
.fd-mock .fd-chip.is-c { animation: fd-chip 8s infinite 1.6s; }
.fd-track { position: relative; flex: 1; height: 6px; border-radius: 3px; background: #e2e8f0; }
.fd-fill {
  position: absolute;
  inset: 0 50% 0 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #60a5fa, #4ade80);
  animation: fd-fill 8s infinite;
}
.fd-fill::after {
  content: "";
  position: absolute;
  right: -6px; top: -3px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #4ade80;
}
.fd-mock .fd-btn { animation: fd-press-65 8s infinite; }
.fd-tag { margin-left: auto; padding: 2px 7px; border-radius: 999px; font-size: 9px; font-weight: 700; color: #15803d; background: #dcfce7; }
@keyframes fd-chip {
  0%, 8% { background: #fff; border-color: #cbd5e1; color: #475569; }
  12%, 92% { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; }
  96%, 100% { background: #fff; border-color: #cbd5e1; color: #475569; }
}
@keyframes fd-fill { 0%, 22% { right: 100%; } 42%, 92% { right: 50%; } 100% { right: 100%; } }
@keyframes fd-press-65 { 0%, 62% { transform: none; } 66% { transform: scale(0.93); } 70%, 100% { transform: none; } }

/* Exam-style test screen */
.fd-test { display: grid; grid-template-columns: 1fr 78px; gap: 8px; }
.fd-timer { padding: 2px 6px; border-radius: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9px; font-weight: 600; color: #1d4ed8; background: #eff6ff; }
.fd-opt {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  padding: 4px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 9.5px;
}
.fd-radio { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #94a3b8; flex-shrink: 0; }
.fd-opt.is-pick { animation: fd-opt 8s infinite; }
.fd-opt.is-pick .fd-radio { animation: fd-radio 8s infinite; }
.fd-test-btns { display: flex; gap: 4px; margin-top: 7px; }
.fd-test-btns span { flex: 1; padding: 4px 2px; border-radius: 5px; font-size: 8px; font-weight: 700; text-align: center; }
.fd-test-btns .is-save { color: #fff; background: #16a34a; animation: fd-press-40 8s infinite; }
.fd-test-btns .is-rev { color: #6d28d9; border: 1px solid #c4b5fd; }
.fd-pal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; align-content: start; }
.fd-pal span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 3px;
  font-size: 7.5px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
}
.fd-pal .p-a { color: #fff; background: #16a34a; }
.fd-pal .p-n { color: #fff; background: #dc2626; }
.fd-pal .p-r { color: #fff; background: #7c3aed; border-radius: 50%; }
.fd-pal .p-ar { position: relative; color: #fff; background: #7c3aed; border-radius: 50%; }
.fd-pal .p-ar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 5px; height: 5px; border-radius: 50%; background: #4ade80; }
.fd-pal .p-cur { color: #fff; background: #16a34a; animation: fd-cell-cur 8s infinite; }
.fd-pal .p-next { animation: fd-cell-next 8s infinite; }
@keyframes fd-opt {
  0%, 18% { background: #fff; border-color: #e2e8f0; }
  22%, 60% { background: #f0fdf4; border-color: #4ade80; }
  64%, 100% { background: #fff; border-color: #e2e8f0; }
}
@keyframes fd-radio {
  0%, 18% { background: transparent; border-color: #94a3b8; }
  22%, 60% { background: #16a34a; border-color: #16a34a; }
  64%, 100% { background: transparent; border-color: #94a3b8; }
}
@keyframes fd-cell-cur {
  0%, 42% { color: #475569; background: #fff; box-shadow: inset 0 0 0 1.5px #2563eb; }
  46%, 94% { color: #fff; background: #16a34a; box-shadow: none; }
  100% { color: #475569; background: #fff; box-shadow: inset 0 0 0 1.5px #2563eb; }
}
@keyframes fd-cell-next { 0%, 44% { box-shadow: none; } 48%, 94% { box-shadow: inset 0 0 0 1.5px #2563eb; } 100% { box-shadow: none; } }

/* Results */
.fd-res { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.fd-ring {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(#16a34a var(--fd-p), #e2e8f0 0);
  animation: fd-ring 7s infinite;
}
.fd-ring b {
  width: 58px; height: 58px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 800;
  background: #fff;
}
.fd-meter { display: grid; grid-template-columns: 44px 1fr 16px; align-items: center; gap: 6px; margin: 4px 0; font-size: 9.5px; }
.fd-meter b { text-align: right; }
.fd-bar { height: 6px; border-radius: 3px; background: #f1f5f9; overflow: hidden; }
.fd-bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--c, #16a34a); transform-origin: left; animation: fd-grow 7s infinite; }
.fd-meter:nth-child(2) .fd-bar i { animation-delay: 0.2s; }
.fd-meter:nth-child(3) .fd-bar i { animation-delay: 0.4s; }
@keyframes fd-ring { 0% { --fd-p: 0%; } 35%, 92% { --fd-p: 72%; } 100% { --fd-p: 0%; } }
@keyframes fd-grow { 0%, 10% { transform: scaleX(0); } 40%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* Bookmarks */
.fd-bm-icon { position: absolute; top: 9px; right: 10px; display: grid; font-size: 15px; color: #f59e0b; }
.fd-bm-icon > i { grid-area: 1 / 1; }
.fd-bm-icon .is-off { opacity: 0; animation: fd-bm-off 6s infinite; }
.fd-bm-icon .is-on { animation: fd-bm-on 6s infinite; }
.fd-bm .fd-s-a { opacity: 0; animation: fd-a45 6s infinite; }
.fd-bm .fd-s-b { animation: fd-b45 6s infinite; }
.fd-bm-list { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 7px 9px; border-radius: 10px; background: #fff; font-weight: 700; }
.fd-bm-list i { color: #f59e0b; }
.fd-count { margin-left: auto; padding: 1px 7px; border-radius: 999px; font-size: 9.5px; color: #92400e; background: #fef3c7; }
@keyframes fd-bm-off { 0%, 28% { opacity: 1; } 32%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fd-bm-on {
  0%, 28% { opacity: 0; transform: scale(0.4); }
  34% { opacity: 1; transform: scale(1.4); }
  40%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
@keyframes fd-a45 { 0%, 45% { opacity: 1; } 49%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fd-b45 { 0%, 45% { opacity: 0; } 49%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* My Sets */
.fd-sets .fd-btn { animation: fd-press-12 9s infinite; }
.fd-sets-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.fd-tile { display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 10px; background: #fff; font-size: 9.5px; font-weight: 700; }
.fd-tile i { font-size: 14px; color: #2563eb; }
.fd-tile .fd-count { color: #1d4ed8; background: #dbeafe; }
.fd-sets .fd-s-a { opacity: 0; animation: fd-a34 9s infinite; }
.fd-sets .fd-s-b { animation: fd-b34 9s infinite; }
.fd-share { color: #075E54; animation: fd-share 9s infinite; }
.fd-share i { color: #25D366; }
.fd-fly {
  position: absolute;
  left: 50%; top: 92px;
  width: 26px; height: 18px;
  margin-left: -13px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35), inset 0 0 0 1.5px #60a5fa;
  opacity: 0;
  animation: fd-fly 9s infinite;
}
@keyframes fd-press-12 { 0%, 10% { transform: none; } 13% { transform: scale(0.93); } 16%, 100% { transform: none; } }
@keyframes fd-fly {
  0%, 15% { opacity: 0; transform: none; }
  17% { opacity: 1; transform: none; }
  31% { opacity: 1; transform: translate(-62px, 44px) scale(0.5); }
  33%, 100% { opacity: 0; transform: translate(-62px, 44px) scale(0.5); }
}
@keyframes fd-a34 { 0%, 32% { opacity: 1; } 36%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fd-b34 { 0%, 32% { opacity: 0; } 36%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fd-share {
  0%, 50% { box-shadow: none; transform: none; }
  54% { transform: scale(1.06); box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.35); }
  60%, 92% { box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.5); transform: none; }
  100% { box-shadow: none; }
}

/* Segmented switch shared by Notes and Current Affairs */
.fd-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 2px; border-radius: 999px; background: #f1f5f9; }
.fd-seg span { position: relative; z-index: 1; padding: 4px 0; font-size: 9.5px; font-weight: 700; text-align: center; color: #475569; }
.fd-seg::before {
  content: "";
  position: absolute;
  top: 2px; bottom: 2px; left: 2px;
  width: calc((100% - 4px) / 3);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.15);
  animation: fd-seg var(--fd-t, 7.5s) infinite;
}
.fd-stack { display: grid; margin-top: 10px; }
.fd-stack > * { grid-area: 1 / 1; }
.fd-stack > :nth-child(1) { animation: fd-ph1 var(--fd-t, 7.5s) infinite; }
.fd-stack > :nth-child(2) { opacity: 0; animation: fd-ph2 var(--fd-t, 7.5s) infinite; }
.fd-stack > :nth-child(3) { opacity: 0; animation: fd-ph3 var(--fd-t, 7.5s) infinite; }
@keyframes fd-seg {
  0%, 30% { transform: translateX(0); }
  33%, 63% { transform: translateX(100%); }
  66%, 97% { transform: translateX(200%); }
  100% { transform: translateX(0); }
}
@keyframes fd-ph1 { 0%, 30% { opacity: 1; } 33%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fd-ph2 { 0%, 30% { opacity: 0; } 33%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes fd-ph3 { 0%, 63% { opacity: 0; } 66%, 97% { opacity: 1; } 100% { opacity: 0; } }

/* Notes */
.fd .fd-note-fact { padding: 8px 9px; border-left: 3px solid #16a34a; border-radius: 6px; background: #f0fdf4; font-size: 11px; font-weight: 600; }
.fd-note-fact small { display: block; margin-bottom: 3px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #15803d; }

/* Current Affairs */
.fd-ca { --fd-t: 9s; }
.fd-ca-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 8.5px; font-weight: 700; color: #b91c1c; background: #fee2e2; }
.fd-ca-li { display: flex; align-items: center; gap: 6px; }
.fd-ca-li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #2563eb; flex-shrink: 0; }
.fd-ca-li .fd-sk { flex: 1; }
.fd-ca .fd-opt.is-right { animation: fd-quiz 9s infinite; }
@keyframes fd-quiz {
  0%, 82% { background: #fff; border-color: #e2e8f0; }
  86%, 97% { background: #f0fdf4; border-color: #4ade80; }
  100% { background: #fff; border-color: #e2e8f0; }
}

/* Static GK */
.fd-gk-no { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; font-size: 8.5px; font-weight: 700; color: #1d4ed8; background: #dbeafe; }
.fd-gk-text { flex: 1; }
.fd-gk-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fd-tag { padding: 1px 6px; border-radius: 4px; font-size: 8.5px; font-weight: 700; color: #475569; background: #f1f5f9; white-space: nowrap; }
.fd-tag.is-imp { color: #b45309; background: #fef3c7; }
.fd-tag.is-src { color: #1d4ed8; background: #eff6ff; }
.fd-gk-prac { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding: 4px 7px; border-radius: 6px; font-size: 9.5px; font-weight: 700; color: #1d4ed8; background: #eff6ff; animation: fd-press-12 8s infinite; }
.fd-gk-prac i { transform: rotate(180deg); animation: fd-chev 8s infinite; }
.fd-gk-q { max-height: 120px; overflow: hidden; animation: fd-gk-open 8s infinite; }
.fd-gk .fd-opt i { margin-left: auto; color: #16a34a; animation: fd-gk-ok 8s infinite; }
.fd-gk .fd-opt.is-right { background: #f0fdf4; border-color: #4ade80; animation: fd-gk-right 8s infinite; }
.fd-gk .fd-opt.is-right .fd-radio { background: #16a34a; border-color: #16a34a; animation: fd-gk-radio 8s infinite; }
@keyframes fd-chev { 0%, 13% { transform: none; } 18%, 94% { transform: rotate(180deg); } 100% { transform: none; } }
@keyframes fd-gk-open { 0%, 13% { max-height: 0; opacity: 0; } 24%, 94% { max-height: 120px; opacity: 1; } 100% { max-height: 0; opacity: 0; } }
@keyframes fd-gk-right {
  0%, 44% { background: #fff; border-color: #e2e8f0; }
  50%, 94% { background: #f0fdf4; border-color: #4ade80; }
  100% { background: #fff; border-color: #e2e8f0; }
}
@keyframes fd-gk-radio {
  0%, 44% { background: transparent; border-color: #94a3b8; }
  50%, 94% { background: #16a34a; border-color: #16a34a; }
  100% { background: transparent; border-color: #94a3b8; }
}
@keyframes fd-gk-ok { 0%, 50% { opacity: 0; transform: scale(0.5); } 56% { opacity: 1; transform: scale(1.2); } 60%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Library */
.fd-books { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fd-book { padding: 7px; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }
.fd-cover { display: grid; place-items: center; height: 40px; border-radius: 6px; color: #fff; font-size: 16px; background: linear-gradient(135deg, #2563eb, #22d3ee); }
.fd-cover.is-green { background: linear-gradient(135deg, #16a34a, #84cc16); }
.fd-cover.is-violet { background: linear-gradient(135deg, #7c3aed, #ec4899); }
.fd-add { display: block; margin-top: 6px; padding: 3px; border-radius: 6px; font-size: 9px; font-weight: 700; text-align: center; color: #1d4ed8; background: #eff6ff; }
.fd-add.is-tap { display: grid; animation: fd-press-18 8s infinite; }
.fd-add.is-tap > * { grid-area: 1 / 1; }
.fd-add .is-before { opacity: 0; animation: fd-a24 8s infinite; }
.fd-add .is-after { color: #15803d; animation: fd-b24 8s infinite; }
.fd-shelf { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px; border-radius: 10px; background: #fff; }
.fd-shelf b { margin-right: auto; font-size: 9.5px; }
.fd-shelf .fd-cover { width: 26px; height: 34px; font-size: 11px; }
.fd-shelf .is-new { animation: fd-shelf-in 8s infinite; }
@keyframes fd-press-18 { 0%, 16% { transform: none; } 19% { transform: scale(0.9); } 22%, 100% { transform: none; } }
@keyframes fd-a24 { 0%, 23% { opacity: 1; } 26%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fd-b24 { 0%, 23% { opacity: 0; } 26%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fd-shelf-in {
  0%, 28% { opacity: 0; transform: translateY(-14px) scale(0.6); }
  36% { opacity: 1; transform: scale(1.12); }
  42%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

/* Report a mistake */
.fd-flag { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 9.5px; font-weight: 700; color: #b91c1c; animation: fd-press-12 8s infinite; }
.fd-menu {
  margin-top: 8px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
  animation: fd-menu 8s infinite;
}
.fd-menu span { display: block; padding: 3px 6px; border-radius: 5px; font-size: 9.5px; }
.fd-menu .is-pick { animation: fd-menu-pick 8s infinite; }
.fd-verified { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 700; color: #15803d; background: #dcfce7; animation: fd-verified 8s infinite; }
@keyframes fd-menu { 0%, 14% { opacity: 0; transform: translateY(-6px); } 18%, 48% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes fd-menu-pick { 0%, 30% { background: transparent; } 34%, 48% { background: #fee2e2; color: #b91c1c; font-weight: 700; } 52%, 100% { background: transparent; } }
@keyframes fd-verified { 0%, 58% { opacity: 0; transform: scale(0.6); } 64% { opacity: 1; transform: scale(1.1); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* Landing page: bring the existing mock-ups to life */
.lp-mock-opt.is-picked { animation: lp-pick 8s infinite; }
.lp-mock-actions .lp-chip-green { animation: fd-press-40 8s infinite; }
.lp-pal.is-current { animation: lp-cur 8s infinite; }
.lp-cal-day.is-today { animation: lp-today 2.4s ease-in-out infinite; }
.lp-bar i { transform-origin: left; animation: fd-grow 7s infinite; }
.lp-bar:nth-of-type(4) i { animation-delay: 0.2s; }
.lp-bar:nth-of-type(5) i { animation-delay: 0.4s; }
@keyframes lp-pick {
  0%, 16% { border-color: var(--border-color); background: transparent; color: var(--text-secondary); }
  20%, 60% { border-color: rgba(34, 197, 94, 0.6); background: rgba(34, 197, 94, 0.1); color: var(--text-primary); }
  64%, 100% { border-color: var(--border-color); background: transparent; color: var(--text-secondary); }
}
@keyframes lp-cur {
  0%, 42% { background: transparent; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
  46%, 94% { background: #15803d; border-color: #15803d; color: #fff; box-shadow: none; }
  100% { background: transparent; border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
}
@keyframes lp-today { 0%, 100% { box-shadow: 0 0 0 2px var(--accent-glow); } 50% { box-shadow: 0 0 0 6px var(--accent-glow); } }

@media (prefers-reduced-motion: reduce) {
  .lp-mock-opt.is-picked, .lp-mock-actions .lp-chip-green, .lp-pal.is-current, .lp-cal-day.is-today, .lp-bar i { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fd *, .fd *::before, .fd *::after { animation: none !important; }
  .fd-stack > :nth-child(2), .fd-stack > :nth-child(3) { display: none; }
}