/* ============================================================
   Animations, scroll reveals, backgrounds — added on top of
   marketing.css. The brand stays disciplined; the page comes alive.
   ============================================================ */

/* ---------- Reveal-on-scroll — transform only, always visible ----------
   The element is always fully opaque so screenshots/print/no-JS render
   correctly. The reveal is a subtle 12px lift into place when scrolled in.
*/
.reveal {
  transform: translateY(16px);
  transition: transform 0.7s var(--ease-out);
  will-change: transform;
}
.reveal.in { transform: translateY(0); }

.reveal-stagger > * {
  transform: translateY(12px);
  opacity: 0.55;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
}
.reveal-stagger.in > * { transform: translateY(0); opacity: 1; }
.reveal-stagger.in > *:nth-child(1) { transition-delay: 0.00s; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: 0.06s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: 0.12s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: 0.18s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: 0.24s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: 0.30s; }
.reveal-stagger.in > *:nth-child(7) { transition-delay: 0.36s; }
.reveal-stagger.in > *:nth-child(8) { transition-delay: 0.42s; }

/* ---------- Hero background: drifting dot grid + radial wash ---------- */
.mk-hero {
  background:
    radial-gradient(60% 80% at 12% 18%, rgba(124,196,250,0.20) 0%, transparent 60%),
    radial-gradient(50% 60% at 95% 70%, rgba(86,96,240,0.10) 0%, transparent 60%),
    #FBF9F4;
  position: relative;
}
.mk-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11,27,61,0.10) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: 0 0;
  mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 40%, transparent 90%);
  animation: dotDrift 26s linear infinite;
  z-index: 0;
  pointer-events: none;
}
.mk-hero > .mk-container { position: relative; z-index: 1; }
@keyframes dotDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 88px 44px; }
}

/* ---------- Section dot grid wash (lighter) ---------- */
.mk-section.dotted::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11,27,61,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}
.mk-section > .mk-container { position: relative; z-index: 1; }

/* ---------- Sticky notes: idle drift ---------- */
.mk-sticky { animation: stickyFloat 6s ease-in-out infinite; }
.mk-sticky:nth-child(2) { animation-delay: -3s; animation-duration: 7s; }
@keyframes stickyFloat {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-1.5deg) translateY(-6px); }
}

/* ---------- Marker arrow: draw on entry ---------- */
.mk-arrow path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawArrow 1.4s var(--ease-out) 0.6s forwards;
}
.mk-arrow path:nth-child(2) { animation-delay: 1.6s; animation-duration: 0.5s; }
@keyframes drawArrow {
  to { stroke-dashoffset: 0; }
}

/* ---------- Pulsing eyebrow dot ---------- */
.mk-eyebrow .dot {
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34,197,94,0.18); }
  50%      { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}

/* ---------- Hero CTA "magnetic" hover ---------- */
.mk-btn-primary { position: relative; overflow: hidden; }
.mk-btn-primary::after {
  content: ""; position: absolute; inset: 0; background:
    radial-gradient(60% 80% at var(--mx, 50%) var(--my, 50%), rgba(124,196,250,0.35) 0%, transparent 65%);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.mk-btn-primary:hover::after { opacity: 1; }

/* ---------- Marker underline: draw on reveal OR on hero load ---------- */
.mk-marker-underline::after {
  transform-origin: left center;
  transform: rotate(-1.2deg) scaleX(0);
  animation: drawMarker 1s var(--ease-out) 0.6s forwards;
}
.reveal.in .mk-marker-underline::after { transform: rotate(-1.2deg) scaleX(1); }
@keyframes drawMarker {
  to { transform: rotate(-1.2deg) scaleX(1); }
}

/* ---------- Gradient shimmer ---------- */
.mk-grad-shimmer {
  background: linear-gradient(110deg, #7CC4FA 0%, #3490F0 35%, #5660F0 60%, #3490F0 75%, #7CC4FA 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShimmer 8s ease-in-out infinite;
}
@keyframes gradShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- Bento cards: cursor-tilt vibe (CSS only) ---------- */
.mk-bento .card {
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.mk-bento .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 50px -24px rgba(11,27,61,0.22);
  border-color: rgba(52,144,240,0.35);
}

/* ---------- Pricing featured card: subtle pulse glow ---------- */
.mk-price.featured {
  box-shadow: 0 0 0 1px #0B1B3D, 0 30px 60px -20px rgba(11,27,61,0.45);
  animation: priceGlow 5s ease-in-out infinite;
}
@keyframes priceGlow {
  0%, 100% { box-shadow: 0 0 0 1px #0B1B3D, 0 30px 60px -20px rgba(11,27,61,0.45), 0 0 0 0 rgba(124,196,250,0); }
  50%      { box-shadow: 0 0 0 1px #0B1B3D, 0 30px 60px -20px rgba(11,27,61,0.45), 0 0 80px -10px rgba(124,196,250,0.35); }
}

/* ---------- Testimonial navy: animated mesh ---------- */
.mk-section.navy { position: relative; overflow: hidden; }
.mk-section.navy::before {
  content: ""; position: absolute; inset: -10%;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(124,196,250,0.18) 0%, transparent 60%),
    radial-gradient(40% 50% at 80% 70%, rgba(86,96,240,0.16) 0%, transparent 60%),
    radial-gradient(30% 40% at 50% 100%, rgba(52,144,240,0.12) 0%, transparent 60%);
  animation: meshDrift 20s ease-in-out infinite;
  pointer-events: none;
}
@keyframes meshDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(2%,-2%) scale(1.05); }
}

/* ---------- Live demo (in hero, inside <ProductPreview/>) ---------- */
.demo-row { transition: background 0.3s var(--ease-out); }
.demo-row.flash { animation: rowFlash 1.2s ease-out; }
@keyframes rowFlash {
  0%   { background: rgba(124,196,250,0.25); }
  100% { background: transparent; }
}

.demo-score-pill { transition: background 0.5s, color 0.5s, box-shadow 0.5s; }
.demo-score-pill.scoring {
  box-shadow: 0 0 0 0 rgba(124,196,250,0.5);
  animation: scoringPulse 1s ease-out infinite;
}
@keyframes scoringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,196,250,0.55); }
  100% { box-shadow: 0 0 0 8px rgba(124,196,250, 0); }
}

/* ---------- Interactive coach card (replaces simple "kill" card) ---------- */
.coach-demo {
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #0B1B3D 0%, #061030 100%);
  border-radius: 16px;
  padding: 22px;
  position: relative; overflow: hidden;
  color: #fff;
}
.coach-demo::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(239,68,68,0.18) 0%, transparent 60%),
    radial-gradient(50% 60% at 20% 80%, rgba(86,96,240,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.coach-demo > * { position: relative; }
.coach-demo .roi { font: 800 44px/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; transition: color 0.5s; }
.coach-demo .roi.killed { color: #FCA5A5; text-decoration: line-through; text-decoration-thickness: 3px; }
.coach-demo .roi.scaled { color: #86EFAC; }
.coach-demo .meta { font: 500 12px/1 var(--font-sans); color: #94A3B8; text-transform: uppercase; letter-spacing: 0.08em; }
.coach-demo .actions { display: flex; gap: 8px; margin-top: auto; }
.coach-demo .act {
  flex: 1; padding: 10px 12px; border-radius: 10px;
  font: 700 12px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid; cursor: pointer; transition: all 0.18s var(--ease-out);
}
.coach-demo .act.scale { background: var(--good-600); color: #fff; border-color: var(--good-600); }
.coach-demo .act.scale:hover { background: var(--good-700); transform: translateY(-2px); }
.coach-demo .act.kill { background: transparent; color: #FCA5A5; border-color: rgba(252,165,165,0.4); }
.coach-demo .act.kill:hover { background: var(--bad-700); color: #fff; border-color: var(--bad-700); transform: translateY(-2px); }
.coach-demo .verdict {
  font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.12em;
  padding: 8px 12px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  transition: all 0.3s var(--ease-out);
}
.coach-demo .verdict.scaled { background: rgba(34,197,94,0.18); color: #86EFAC; }
.coach-demo .verdict.killed { background: rgba(239,68,68,0.18); color: #FCA5A5; }
.coach-demo .verdict.neutral { background: rgba(124,196,250,0.15); color: #93C5FD; }

/* ---------- Count-up number: gentle glow as it ticks ---------- */
.count-up { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- Comparison strikethrough animation ---------- */
.mk-compare .before li { transition: opacity 0.3s; }
.reveal.in .mk-compare .before li { opacity: 0.55; }
.mk-compare .before:hover li { opacity: 1; }

/* ---------- Reduced motion: respect it ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ---------- Billing toggle ---------- */
.mk-billing {
  display: inline-flex; background: #fff; border: 1px solid rgba(11,27,61,0.1);
  border-radius: 9999px; padding: 4px; gap: 4px;
}
.mk-billing-btn {
  padding: 10px 18px; border-radius: 9999px;
  font: 600 13px/1 var(--font-sans); color: #4B5563;
  background: transparent; border: 0; cursor: pointer;
  transition: all 0.18s var(--ease-out);
  display: inline-flex; align-items: center; gap: 8px;
}
.mk-billing-btn:hover { color: #0B1B3D; }
.mk-billing-btn.on { background: #0B1B3D; color: #fff; }
.mk-billing-btn .save {
  background: #FACC15; color: #422006;
  padding: 3px 7px; border-radius: 999px;
  font: 700 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.08em;
}
.mk-billing-btn.on .save { background: #FDE047; }

/* ---------- Anatomy carousel ---------- */
.mk-anatomy { display: grid; grid-template-columns: 320px 1fr; gap: 36px; align-items: stretch; }
.mk-anatomy-tabs { display: flex; flex-direction: column; gap: 8px; }
.mk-anatomy-tab {
  text-align: left; padding: 18px 20px; border-radius: 14px;
  background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: all 0.2s var(--ease-out);
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-sans);
}
.mk-anatomy-tab:hover { background: rgba(11,27,61,0.04); }
.mk-anatomy-tab.on { background: #fff; border-color: rgba(11,27,61,0.1); box-shadow: 0 12px 30px -16px rgba(11,27,61,0.18); }
.mk-anatomy-tab .num { font: 800 12px/1 var(--font-sans); color: #93C5FD; letter-spacing: 0.18em; text-transform: uppercase; }
.mk-anatomy-tab.on .num { color: #3490F0; }
.mk-anatomy-tab .title { font: 700 18px/1.2 var(--font-sans); letter-spacing: -0.015em; color: #0B1B3D; }
.mk-anatomy-tab .desc  { font: 500 13px/1.5 var(--font-sans); color: #6B7280; }
.mk-anatomy-stage {
  background: linear-gradient(180deg, #111827 0%, #0B1B3D 100%);
  border-radius: 20px; padding: 36px;
  position: relative; overflow: hidden;
  min-height: 380px;
  display: flex; flex-direction: column; gap: 18px;
  color: #fff;
}
.mk-anatomy-stage::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(124,196,250,0.18) 0%, transparent 60%),
    radial-gradient(60% 60% at 0% 100%, rgba(86,96,240,0.14) 0%, transparent 60%);
  pointer-events: none;
}
.mk-anatomy-stage > * { position: relative; }
.mk-anatomy-stage .head { font: 700 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: 0.18em; color: #93C5FD; }
.mk-anatomy-stage .big { font: 800 64px/1 var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: #fff; }
.mk-anatomy-stage .big .unit { font-size: 28px; color: #93C5FD; margin-left: 6px; letter-spacing: -0.02em; }
.mk-anatomy-stage .deck { font: 500 16px/1.5 var(--font-sans); color: #CBD5E1; max-width: 36ch; }
.mk-anatomy-stage .deck b { color: #fff; }

/* ---------- Scroll progress bar ---------- */
.mk-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 100;
  background: transparent;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
/* Hide while the live demo holds the fullscreen lock — a stray colored
   hairline over the immersive navy stage reads as a glitch. */
body.ld-locked .mk-scroll-progress { opacity: 0; }
.mk-scroll-progress > div {
  height: 100%;
  background: linear-gradient(90deg, #7CC4FA, #3490F0, #5660F0);
  width: 0;
  transition: width 0.06s linear;
  border-radius: 0 3px 3px 0;
}

/* ---------- Bento cursor-tilt (JS-driven, CSS-described) ---------- */
.mk-bento .card { transition: transform 0.18s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color 0.3s var(--ease-out); transform-style: preserve-3d; }
.mk-bento .card.tilting { transition: transform 0.06s linear, box-shadow 0.3s var(--ease-out); }

/* ---------- Bento card 3D tilt on cursor ---------- */
.mk-bento .card { perspective: 1000px; transform-style: preserve-3d; }

/* ---------- Hero CTA "magnetic" hover (extended) ---------- */
.mk-btn { will-change: transform; }