/* Homepage polish layer — loaded only by Flux Marketing Site.html */
/* (nav underline sweep moved to site.css so all pages share it) */

/* ---------- Buttons: press feedback ---------- */
.btn { transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease; }
.btn:active { transform: translateY(1px); }

/* ---------- Hero browser: settle-in glow after intro ---------- */
.hero .browser { transition: box-shadow 1.2s ease; }
.hero .browser.lit { box-shadow: 0 30px 90px rgba(0,169,232,.12); }

/* ---------- Browser URL typing caret ---------- */
.browser-url.typing::after {
  content: ""; display: inline-block; width: 7px; height: 11px;
  background: var(--pf-cyan); margin-left: 2px; vertical-align: -1px;
  animation: caret-blink .9s steps(2, jump-none) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* ---------- Metric sparklines (drawn on scroll) ---------- */
.metric-spark { display: block; width: 100%; max-width: 150px; height: 26px; margin: -2px 0 12px; overflow: visible; }
.metric-spark polyline {
  fill: none; stroke: var(--pf-cyan); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; opacity: .85;
}
.metric-spark circle { fill: var(--pf-cyan); opacity: 0; transition: opacity .4s ease; }
.metric-spark.drawn circle { opacity: 1; }

/* ---------- Card micro-hovers ---------- */
.p-card, .role, .step {
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .4s ease;
}
.p-card:hover, .role:hover {
  transform: translateY(-4px);
  border-color: var(--pf-cyan-border);
  box-shadow: 0 14px 40px rgba(0,0,0,.14);
}
.step:hover { transform: translateY(-4px); border-color: var(--pf-cyan-border); }
.p-card .icon, .role .icon { transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease; }
.p-card:hover .icon, .role:hover .icon { transform: scale(1.1) rotate(-3deg); }
.role:hover .icon { background: var(--pf-cyan); color: #ffffff; }

/* ---------- Feature screenshots: slow zoom + accent border ---------- */
.feature-shot { transition: border-color .35s ease, box-shadow .5s ease; }
.feature-shot img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.feature-shot:hover { border-color: var(--pf-cyan-border); box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.feature-shot:hover img { transform: scale(1.025); }
.feature-copy .overline { transition: border-color .25s ease; }

/* ---------- Cyan band CTA: magnetic ---------- */
.band .btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), background .15s ease; will-change: transform; }

/* ---------- Waitlist: error shake tint + success state ---------- */
.waitlist-form input.invalid { border-color: var(--pf-red); box-shadow: 0 0 0 3px var(--pf-red-dim); }
.waitlist-form.done input { opacity: .5; pointer-events: none; }
.waitlist-form.done .btn {
  background: var(--pf-green-dim); color: var(--pf-green);
  border-color: rgba(63,185,80,.35); pointer-events: none;
}
.waitlist-form.done .btn svg { animation: check-pop .45s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes check-pop { from { transform: scale(0); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .p-card, .role, .step, .feature-shot img { transition: none; }
  .browser-url.typing::after { animation: none; }
}

/* ---------- Section handoff ---------- */
/* Deck mode (feature rows): sticky needs overflow visible on the section;
   rows need opaque backgrounds + a top edge shadow as they cover each other */
body[data-handoff="deck"] #features { overflow: visible; }
body[data-handoff="deck"] .feature-row { background: var(--pf-bg-base); }
body[data-handoff="deck"] .feature-row + .feature-row { box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.4); }
.handoff-veil {
  position: absolute; inset: 0; z-index: 60;
  background: #0d1117; opacity: 0; pointer-events: none;
}

/* ---------- Trust bar marquee ---------- */
@keyframes trust-scroll {
  to { transform: translateX(-100%); }
}
.trust-track:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .trust-track { animation: none; }
}