/* ============================================================
   Sublime LMS — Features pages
   Reuses site.css (.lx-*), platform.css (.dash-frame),
   platform-pages.css (.pp-hero/.pp-steps/.pp-metrics/.pp-pills).
   Adds only small hero accents.
   ============================================================ */

.fp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.fp-reveal.in { opacity: 1; transform: none; }

/* hero card sizing inside .pp-hero-art — single impactful visual, no floats */
.fp-hero-card { width: 100%; max-width: 480px; margin: 0 auto; position: relative; isolation: isolate; }
.fp-hero-card.wide { max-width: 560px; }
.fp-hero-card::before, .fp-cert-wrap::before {
  content: ''; position: absolute; z-index: -1;
  inset: -14% -10% -18% -10%;
  background:
    radial-gradient(60% 55% at 70% 28%, rgba(167,139,250,.30), transparent 70%),
    radial-gradient(52% 50% at 22% 92%, rgba(20,184,166,.16), transparent 72%);
  filter: blur(6px); pointer-events: none;
}
/* lift the hero card visually so it reads as the product, framed */
.fp-hero-card > .lx-card,
.fp-hero-card > .dash-frame,
.fp-cert-wrap > .fp-cert {
  box-shadow: 0 44px 80px -38px rgba(15,23,42,.36), 0 14px 34px -18px rgba(15,23,42,.12) !important;
}

/* attached caption banner under hero card (replaces floating chips) */
.fp-banner {
  margin: 14px auto 0; width: 100%;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 44px -26px rgba(15,23,42,.26);
  padding: 14px 16px;
}
.fp-banner .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.fp-banner .ic i { width: 17px; height: 17px; }
.fp-banner .lbl { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.fp-banner b { display: block; font-family: var(--font-display); font-weight: 650; font-size: 13.5px; color: var(--fg); line-height: 1.3; letter-spacing: -0.005em; margin-top: 2px; }

/* ---- spaced-retrieval calendar dots (quizzes) ---- */
.fp-retrieval { display: flex; gap: 5px; margin-top: 12px; }
.fp-retrieval i { flex: 1; height: 26px; border-radius: 6px; background: var(--color-mist); display: grid; place-items: center; font-family: var(--font-mono); font-size: 9px; color: var(--fg-faint); }
.fp-retrieval i.hit { background: var(--color-violet-100); color: var(--color-violet-700); font-weight: 700; }
.fp-retrieval i.now { background: var(--color-violet-600); color: #fff; font-weight: 700; }

/* ---- certificate seal pulse ---- */
.fp-cert-wrap { position: relative; width: 100%; max-width: 440px; margin: 0 auto; isolation: isolate; }
.fp-cert {
  background: linear-gradient(135deg,#FFFEF8,#FEF9EC);
  border: 1px solid #FDE68A; border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  padding: 32px 28px; text-align: center; position: relative; overflow: hidden;
}
.fp-cert::before { content:''; position:absolute; inset:10px; border:1.5px solid #FCD34D; border-radius:18px; opacity:.5; pointer-events:none; }
.fp-cert-seal {
  width: 60px; height: 60px; border-radius: 999px;
  background: linear-gradient(135deg,#FCD34D,#D97706); color: #fff;
  display: grid; place-items: center; margin: 0 auto 14px; position: relative;
  box-shadow: 0 10px 28px -8px rgba(217,119,6,.5);
}
.fp-cert-seal i { width: 28px; height: 28px; }
.fp-cert-seal::after { content:''; position:absolute; inset:0; border-radius:999px; border:2px solid rgba(217,119,6,.4); animation: fp-pulse 2.6s ease-out infinite; }
@keyframes fp-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
.fp-cert-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--color-amber-600); }
.fp-cert-name { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--fg); letter-spacing: -0.02em; margin: 6px 0 4px; }
.fp-cert-course { font-size: 12px; color: var(--fg-muted); }
.fp-cert-foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #FDE68A; font-size: 11px; font-weight: 600; color: var(--color-emerald-700); }
.fp-cert-foot i { width: 14px; height: 14px; }

/* ---- roster / cohort management ---- */
.fp-roster-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-soft); }
.fp-roster-row:first-of-type { border-top: none; }
.fp-roster-row .av { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; font-family: var(--font-display); flex-shrink: 0; }
.fp-roster-row .nm { flex: 1; min-width: 0; }
.fp-roster-row .nm b { display: block; font-family: var(--font-display); font-weight: 650; font-size: 12.5px; color: var(--fg); }
.fp-roster-row .nm span { display: block; font-size: 10.5px; color: var(--fg-muted); }
.fp-roster-row .st { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.fp-roster-row .st.on { background: var(--color-emerald-50); color: var(--color-emerald-700); }
.fp-roster-row .st.risk { background: var(--color-amber-50); color: var(--color-amber-600); }
.fp-capacity { height: 7px; border-radius: 999px; background: var(--color-mist); overflow: hidden; margin-top: 4px; }
.fp-capacity span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#14B8A6,#0F766E); width: 0; animation: fp-cap 1.6s var(--ease-out) .3s forwards; }
@keyframes fp-cap { to { width: 75%; } }

/* ---- progress tracking rings row ---- */
.fp-prog-rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fp-prog-ring { text-align: center; background: var(--color-mist); border-radius: 14px; padding: 14px 8px; }
.fp-prog-ring .r { position: relative; width: 64px; height: 64px; margin: 0 auto 6px; }
.fp-prog-ring .r svg { width: 64px; height: 64px; }
.fp-prog-ring .r .pf { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 163; stroke-dashoffset: 163; transform: rotate(-90deg); transform-origin: center; animation: fp-ring 1.6s var(--ease-out) forwards; }
@keyframes fp-ring { to { stroke-dashoffset: var(--to, 50); } }
.fp-prog-ring .r b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--fg); }
.fp-prog-ring span { font-size: 10px; font-weight: 600; color: var(--fg-muted); }

/* streak strip */
.fp-streak { display: flex; gap: 5px; margin-top: 14px; }
.fp-streak i { flex: 1; height: 30px; border-radius: 7px; background: var(--color-mist); display: grid; place-items: center; }
.fp-streak i.on { background: linear-gradient(180deg,#A78BFA,#6D28D9); }
.fp-streak i.on::after { content:''; width:7px; height:7px; border-radius:999px; background:#fff; }

/* responsive */
@media (max-width: 680px) {
  .fp-hero-card, .fp-cert-wrap { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-float, .fp-cert-seal::after, .fp-capacity span, .fp-prog-ring .r .pf, .fp-streak i { animation: none !important; }
  .fp-capacity span { width: 75% !important; }
  .fp-hero-card, .fp-cert-wrap, .fp-hero-card::before, .fp-cert-wrap::before,
  .fp-hero-card::after, .fp-cert-wrap::after,
  .fp-hero-card > .lx-card, .fp-hero-card > .dash-frame, .fp-cert-wrap > .fp-cert { animation: none !important; }
}

/* ============================================================
   Hero visual — polished animated upgrade
   ============================================================ */
.fp-hero-card, .fp-cert-wrap { isolation: isolate; }
/* drifting aura (was a static glow) */
.fp-hero-card::before, .fp-cert-wrap::before {
  animation: fp-aura 14s ease-in-out infinite;
}
@keyframes fp-aura {
  0%,100% { transform: translate(0,0) scale(1); opacity: .9; }
  33%     { transform: translate(3%,-2%) scale(1.07); opacity: 1; }
  66%     { transform: translate(-2%,2%) scale(.96); opacity: .82; }
}
/* slow orbiting conic sheen ring behind the card */
.fp-hero-card::after, .fp-cert-wrap::after {
  content: ''; position: absolute; z-index: -1;
  width: 128%; aspect-ratio: 1/1; left: -14%; top: 50%;
  transform: translateY(-50%);
  background: conic-gradient(from 0deg, transparent 0deg, rgba(167,139,250,.16) 50deg, transparent 130deg, transparent 230deg, rgba(45,212,191,.13) 290deg, transparent 350deg);
  -webkit-mask: radial-gradient(closest-side, transparent 64%, #000 66%, #000 82%, transparent 84%);
  mask: radial-gradient(closest-side, transparent 64%, #000 66%, #000 82%, transparent 84%);
  animation: fp-orbit 26s linear infinite;
  pointer-events: none;
}
@keyframes fp-orbit { to { transform: translateY(-50%) rotate(360deg); } }
/* gentle entrance + idle float for the framed product card */
.fp-hero-card > .lx-card,
.fp-hero-card > .dash-frame,
.fp-cert-wrap > .fp-cert {
  animation: fp-rise .8s var(--ease-out) both, fp-bob 6.5s ease-in-out 1s infinite;
}
@keyframes fp-rise { from { transform: translateY(18px) scale(.98); } to { transform: none; } }
@keyframes fp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }