/* ==========================================================================
   KeepIt — home page motion & polish (index.html only)
   Transform/opacity only. Everything is skipped for reduced-motion visitors.
   ========================================================================== */
@property --ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---------- Scroll progress ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; pointer-events: none; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #6366f1, #a5b4fc 60%, #f59e0b); }

/* ---------- Hero entrance (plays once on load) ---------- */
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
.hero-section .badge-hero, .hero-section .hero-subtitle, .hero-section .hero-cta-group,
.hero-section .hero-offer, .hero-section .trust-strip, .hero-section .space-demo { animation: heroIn .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-section .badge-hero { animation-delay: .05s; }
.hero-section .hero-title { animation: heroIn .9s cubic-bezier(.2,.7,.2,1) .15s both, titleShift 9s ease-in-out 1s infinite alternate; }
.hero-section .hero-subtitle { animation-delay: .3s; }
.hero-section .hero-cta-group { animation-delay: .42s; }
.hero-section .hero-offer { animation: heroIn .8s cubic-bezier(.2,.7,.2,1) .54s both, offerGlow 3.2s ease-in-out 1.5s infinite; }
.hero-section .trust-strip { animation-delay: .64s; }
.hero-section .space-demo { animation-delay: .78s; }

/* ---------- Hero space demo ---------- */
.space-demo { max-width: 660px; margin: 38px auto 0; text-align: left; }
.sd-card { position: relative; background: linear-gradient(180deg, rgba(30,41,59,.88), rgba(15,23,42,.92)); border: 1px solid var(--border-color, #334155); border-radius: 16px; padding: 14px 14px 12px; box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 50px rgba(99,102,241,.14); }
.sd-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sd-dots { display: flex; gap: 6px; margin-right: 6px; }
.sd-dots i { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; display: block; }
.sd-dots i:nth-child(2) { background: #f59e0b; } .sd-dots i:nth-child(3) { background: #10b981; }
.sd-pill { --c: #6366f1; position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-secondary, #94a3b8); background: rgba(15,23,42,.7); border: 1px solid var(--border-color, #334155); transition: color .3s, background-color .3s, border-color .3s, box-shadow .3s, transform .2s; }
.sd-pill b { width: 8px; height: 8px; border-radius: 50%; background: var(--c); display: block; }
.sd-pill.on { color: #fff; background: color-mix(in srgb, var(--c) 26%, #0f172a); border-color: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); }
.sd-pill.press { transform: scale(.93); }
.sd-pill.press::after { content: ""; position: absolute; inset: -2px; border-radius: 999px; border: 2px solid var(--c); animation: sdRipple .6s ease-out forwards; }
@keyframes sdRipple { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.5); } }
.sd-stage { display: grid; min-height: 46px; }
.sd-tabs { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; pointer-events: none; }
.sd-tab { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px 10px 6px 6px; font-size: 12.5px; color: var(--text-primary, #f8fafc); background: rgba(51,65,85,.55); border: 1px solid rgba(100,116,139,.35); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .25s ease, transform .25s ease, background-color .5s; }
.sd-tabs.on .sd-tab { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1), background-color .5s; transition-delay: calc(var(--j) * 80ms + 120ms); }
.sd-tab s { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; background: var(--f, #6366f1); display: block; }
.sd-tabs.on .sd-tab.sleep { opacity: .5; transition-delay: 0s; background: rgba(30,41,59,.5); }
.sd-tab.sleep::after { content: "💤"; margin-left: auto; font-size: 11px; animation: zz 2.4s ease-in-out infinite; }
@keyframes zz { 50% { transform: translateY(-2px); opacity: .6; } }
.sd-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(100,116,139,.3); font-size: 12px; color: var(--text-secondary, #94a3b8); }
.sd-live { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.6); animation: livePulse 2s infinite; }
@keyframes livePulse { 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.sd-cursor { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; opacity: 0; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); transition: transform .8s cubic-bezier(.65,0,.25,1), opacity .3s ease; }
.sd-cursor.show { opacity: 1; }
.sd-note { margin-top: 14px; font-size: 12.5px; color: var(--text-muted, #64748b); text-align: center; }
.sd-note strong { color: var(--text-secondary, #94a3b8); font-weight: 600; }

/* ---------- Section headings ---------- */
.section-heading h2::after { content: ""; display: block; width: 52px; height: 3px; margin: 14px auto 0; border-radius: 3px; background: linear-gradient(90deg, #6366f1, #f59e0b); transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.7,.2,1) .25s; }
.section-heading.in h2::after, html:not(.js-motion) .section-heading h2::after { transform: scaleX(1); }

/* ---------- Cards: cursor spotlight (pointer devices only) ---------- */
@media (hover: hover) {
  .feature-card:hover, .step-card:hover, .pricing-card:hover {
    background-image: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(129,140,248,.16), transparent 65%);
  }
  .screenshots-grid .doc-img { transition: transform .25s ease-out, box-shadow .25s ease; will-change: transform; }
}
.step-card .step-num { animation: none; }
.steps-grid.in-view .step-card .step-num { animation: numPop .6s cubic-bezier(.34,1.56,.64,1) both; }
.steps-grid.in-view .step-card:nth-child(2) .step-num { animation-delay: .15s; }
.steps-grid.in-view .step-card:nth-child(3) .step-num { animation-delay: .3s; }
@keyframes numPop { from { transform: scale(0); } to { transform: scale(1); } }

/* ---------- Pricing: moving border on the popular plan ---------- */
.pricing-card.popular::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ang), #6366f1, #f59e0b, #a5b4fc, #6366f1);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: borderSpin 7s linear infinite;
}
@keyframes borderSpin { to { --ang: 360deg; } }
.popular-tag { animation: tagBob 3s ease-in-out infinite; }
@keyframes tagBob { 50% { transform: translateY(-2px); } }

/* ---------- Offer counter ---------- */
.oc-bar span { position: relative; overflow: hidden; }
.oc-bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45), transparent 70%); transform: translateX(-100%); animation: barShine 3.2s ease-in-out 1s infinite; }
@keyframes barShine { to { transform: translateX(100%); } }

/* ---------- Closing banner ---------- */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: -40%; z-index: 0; pointer-events: none; background: conic-gradient(from 0deg at 50% 50%, rgba(99,102,241,.0), rgba(99,102,241,.22), rgba(245,158,11,.14), rgba(99,102,241,.0)); animation: ctaSpin 18s linear infinite; }
.cta-band > * { position: relative; z-index: 1; }
@keyframes ctaSpin { to { transform: rotate(360deg); } }
.cta-band .btn-cta-primary { animation: ctaPulse 2.8s ease-in-out infinite; }
@keyframes ctaPulse { 0%,100% { box-shadow: 0 4px 20px rgba(99,102,241,.4); } 50% { box-shadow: 0 6px 34px rgba(99,102,241,.7); } }

/* ---------- Sticky mobile call-to-action ---------- */
.m-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; background: rgba(15,23,42,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(99,102,241,.5); box-shadow: 0 14px 34px rgba(0,0,0,.55); transform: translateY(140%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.m-cta.show { transform: none; }
.m-cta p { flex: 1; font-size: 13px; line-height: 1.35; color: var(--text-secondary, #94a3b8); margin: 0; }
.m-cta p strong { display: block; color: #fbbf24; font-size: 13.5px; }
.m-cta a { flex-shrink: 0; padding: 11px 16px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none !important; white-space: nowrap; }
@media (max-width: 720px) { .m-cta { display: flex; } body.has-mcta { padding-bottom: 76px; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .sd-cursor { display: none; }
  .pricing-card.popular::before { animation: none; }
  .hero-section > *, .hero-section .hero-title { filter: none !important; }
}

/* ---------- Offer text spacing ---------- */
.pricing-offer { margin: 14px 0 20px; }
.pricing-offer [data-promo-left] { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #fde68a; }
.hero-offer .offer-left-inline { margin-left: 2px; padding-left: 10px; border-left: 1px solid rgba(245,158,11,.4); }