/* ============================================================
   motion-polish.css
   ------------------------------------------------------------
   UI polish layer for IVFConversion / TRACE.
   Loaded last so it overrides / extends existing button styles.
   Each block is one approved pick from the Motion Lab.
   ============================================================ */

/* ============================================================
   #01 — VAPOR HOVER (sitewide on primary CTAs)
   Driven by motion-polish.js — dots are dynamically spawned as
   .mp-vapor-dot child elements on mouseenter and removed after
   their animation completes. JS-driven instead of CSS :hover
   pseudo-elements because Chrome silently mutes "infinite"
   keyframe animations when prefers-reduced-motion is set.
   ============================================================ */
.trace-signin-submit,
.cc-btn-solid,
.act-button--primary,
.ab-submit,
.cc-upgrade-btn,
.report-download-button {
  /* JS will set position:relative if needed */
}
.mp-vapor-dot {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 4px;
  background: #1D9E75;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%, 0) scale(0.6);
  animation: mp-vapor-rise 1.4s ease-out forwards;
}
@keyframes mp-vapor-rise {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -26px) scale(1); }
}

/* ============================================================
   #02 — CONFETTI BURST (click feedback)
   Wired via motion-polish.js: 9 dots fly outward on click.
   ============================================================ */
.mp-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #1D9E75;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9;
  animation: mp-confetti-fly 700ms cubic-bezier(.2,.8,.4,1) forwards;
}
@keyframes mp-confetti-fly {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); opacity: 0; }
}

/* ============================================================
   #03 — LIQUID FILL (loading state on action buttons)
   Apply via [data-mp-state="loading"] on a button.
   The motion-polish.js helper sets/clears this attribute.
   ============================================================ */
.cc-btn-solid,
.cc-btn-outline,
.trace-signin-submit,
.act-button--primary,
.ab-submit,
.cc-upgrade-btn,
.report-download-button {
  overflow: hidden; /* contain the liquid bar */
}
[data-mp-state="loading"] {
  pointer-events: none;
  position: relative;
}
[data-mp-state="loading"]::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: rgba(29, 158, 117, 0.18);
  animation: mp-liquid-fill 1.4s ease forwards;
  pointer-events: none;
  z-index: 0;
}
@keyframes mp-liquid-fill {
  to { width: 100%; }
}

/* ============================================================
   #04 — HEARTBEAT (quiet authority pulse)
   Targets ONLY actual confidence/integrity badges. Excluded
   .cc-status-dot--green because there are 13+ of these in the
   sidebar report list (one per saved report) — pulsing all of
   them simultaneously is visually noisy.
   The !important on animation is required because the site's
   own .anim class sets a fade-in animation on .exec-confidence-chip
   (anim-d2) that would otherwise win the cascade.
   ============================================================ */
.mp-heartbeat,
.exec-confidence-chip,
.method-confidence,
.atap-integrity,
.atb-integrity,
.ab-confid,
.atb-validated-tag {
  animation: mp-heartbeat 2.4s ease-in-out infinite !important;
}
@keyframes mp-heartbeat {
  0%, 100% { box-shadow: 0 0 0 0 rgba(29, 158, 117, 0); }
  50%      { box-shadow: 0 0 0 9px rgba(29, 158, 117, 0.22); }
}

/* ============================================================
   Kill any leftover legacy transition mechanisms that compete
   with the Whisper fade in motion-polish.js:
     1. The hybrid funnel/glow overlay (pageTransition.js gutted,
        but still defensively hidden in case anything else injects it)
     2. The .screen-enter / .screen-enter-active classes that the
        router still applies to every new page — those animate
        opacity/transform and double up with Whisper.
   ============================================================ */
.ivfc-transition {
  display: none !important;
}
.screen-enter,
.screen-enter-active {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  transition: none !important;
}

/* ============================================================
   #06 — PAGE TRANSITIONS
   Green liquid-morph removed (too dramatic for clinical context).
   Awaiting user pick on a restrained replacement.
   ============================================================ */

/* ============================================================
   #07 — THE SCAN (signin → dashboard)
   Full-screen overlay. Motion-polish.js shows/hides on demand.
   ============================================================ */
.mp-scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #F2F0EB;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  overflow: hidden;
}
.mp-scan-overlay.is-on {
  opacity: 1;
  pointer-events: auto;
}
.mp-scan-overlay .mp-scan-line {
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(to bottom, transparent, #1D9E75 30%, #1D9E75 70%, transparent);
  box-shadow: 0 0 32px rgba(29, 158, 117, 0.45), 0 0 8px #1D9E75;
  transform: translateX(-3px);
}
.mp-scan-overlay.is-on .mp-scan-line {
  animation: mp-scan-sweep 1.4s ease-in-out forwards;
}
@keyframes mp-scan-sweep {
  0%   { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(100vw); opacity: .3; }
}
.mp-scan-overlay .mp-scan-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, #1D9E75 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0;
}
.mp-scan-overlay.is-on .mp-scan-grid {
  animation: mp-grid-fade 1.6s ease-in-out forwards;
}
@keyframes mp-grid-fade {
  0%   { opacity: 0; }
  50%  { opacity: 0.55; }
  100% { opacity: 0; }
}
.mp-scan-overlay .mp-scan-msg {
  position: relative;
  z-index: 5;
  text-align: center;
  font-family: 'EB Garamond', Georgia, serif;
  color: #0D2340;
  font-size: 28px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease 1100ms, transform 400ms cubic-bezier(.34,1.56,.64,1) 1100ms;
}
.mp-scan-overlay.is-on .mp-scan-msg {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   #08 — PATIENT FLOW (homepage → signin)
   Full-screen overlay with dots flowing left → right.
   ============================================================ */
.mp-flow-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #F2F0EB;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  overflow: hidden;
}
.mp-flow-overlay.is-on {
  opacity: 1;
  pointer-events: auto;
}
.mp-flow-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1D9E75;
  top: var(--ty);
  left: -10px;
  animation: mp-flow-right 1.4s ease-in-out forwards;
  animation-delay: var(--d);
}
@keyframes mp-flow-right {
  0%   { left: -10px; opacity: 0; transform: scale(.6); }
  20%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 1; }
  100% { left: 105vw; opacity: 0; transform: scale(.4); }
}

/* ============================================================
   #09 — DOCUMENT MODE (report panel switching)
   Apply classes via motion-polish.js when report content changes.
   ============================================================ */
.mp-doc-out {
  animation: mp-doc-out 320ms cubic-bezier(.16, 1, .3, 1) forwards;
}
.mp-doc-in {
  animation: mp-doc-in 380ms cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes mp-doc-out {
  to { opacity: 0; transform: translateY(-6px) scale(.985); }
}
@keyframes mp-doc-in {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   #11 — PARTICLE DISSOLVE (report tab change)
   The active underline dissolves into particles, reforms.
   Particles spawned by motion-polish.js.
   ============================================================ */
.mp-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #1D9E75;
  pointer-events: none;
  bottom: 0;
  transition: transform 320ms ease, opacity 320ms ease;
  z-index: 5;
}

/* ============================================================
   #12 — FIRST READING (typewriter on first dashboard visit)
   Cursor effect on the typing element.
   ============================================================ */
.mp-typewriter {
  border-right: 2px solid #1D9E75;
  animation: mp-cursor-blink 800ms infinite;
}
@keyframes mp-cursor-blink {
  50% { border-color: transparent; }
}
.mp-typewriter.mp-done {
  animation: none;
  border-right-color: transparent;
}

/* ============================================================
   DESIGN CONSISTENCY POLISH
   ------------------------------------------------------------
   Unifies header look across ALL pages and gives nav links a
   visible green active state.
   ============================================================ */

/* --- Header layout: PIXEL-LOCKED to /trace gold standard ------ */
/* /trace uses .trace-nav with padding: 0 32px, height 56px, and the
   inner nav container (.trace-nav-links) sets a 20px gap between links.
   The site has SEVEN distinct header DOM variants:
     1. .trace-nav          — /, /trace, /act
     2. .ab-topbar          — /research
     3. .pricing-topbar     — /pricing
     4. .trace-signin-topbar — /signin, /signup
     5. .cc-topbar          — /dashboard (signed-in)
     6. .pig-topbar         — post-signin paywall gate
     7. .trace-workspace-bar — workspace surface
   All 7 are forced into the same pixel layout so headers read
   identically every time the user crosses between them.
   Specificity bumps via "header.x" / ".page--signin-redesign .x" needed
   to win against the per-page CSS that originally diverged. */
.trace-nav,
.ab-topbar,
.pricing-topbar,
.trace-signin-topbar,
.cc-topbar,
.pig-topbar,
.trace-workspace-bar,
header.ab-topbar,
header.pricing-topbar,
header.trace-signin-topbar,
header.cc-topbar,
header.pig-topbar,
.page--signin-redesign .trace-signin-topbar {
  background: rgba(250, 249, 247, 0.96) !important;  /* cream sitewide */
  border-bottom: 1px solid rgba(13, 35, 64, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 0 32px !important;          /* matches .trace-nav exactly */
  height: 56px !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Inner nav link containers — uniform 20px gap between links so
   TRACE / RESEARCH / PRICING / SIGN IN sit at identical x-positions
   across pages. The signin-topbar / cc-topbar lay their links out as
   direct children of the bar itself; the parent rule above plus an
   explicit gap below forces them to match /trace's inter-link spacing. */
.trace-nav-links,
.pricing-topbar-nav,
.ab-topbar-nav,
.cc-topbar-right,
.pig-topbar-right,
.trace-signin-topbar,
.trace-workspace-bar {
  gap: 20px !important;
}
.trace-nav-links,
.pricing-topbar-nav,
.ab-topbar-nav,
.cc-topbar-right,
.pig-topbar-right {
  display: flex !important;
  align-items: center !important;
}

/* --- Dashboard / paywall / workspace nav links — match /trace ------ */
/* The signed-in surfaces (.cc-topbar, .pig-topbar, .trace-workspace-bar)
   each ship their own link styles. They already use 11px / 700 / uppercase
   matching /trace, but we re-state to defend against future regressions. */
.cc-topbar-link,
.cc-topbar-signout,
.pig-topbar-link,
.pig-topbar-signout,
.trace-workspace-bar a,
.trace-workspace-bar button:not(.cc-btn-solid):not(.cc-btn-outline) {
  color: rgba(13, 35, 64, 0.45) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  transition: color 200ms ease !important;
}
.cc-topbar-link:hover,
.cc-topbar-link:active,
.cc-topbar-signout:hover,
.cc-topbar-signout:active,
.pig-topbar-link:hover,
.pig-topbar-link:active,
.pig-topbar-signout:hover,
.pig-topbar-signout:active,
.trace-workspace-bar a:hover,
.trace-workspace-bar a:active {
  color: #1D9E75 !important;
}

/* Brand SVG width — locked to 140px (the /trace measurement) on every
   dashboard / workspace / paywall surface so the logo sits at the same
   x-position as on the public pages. */
.cc-topbar-brand .trace-signin-brand-svg,
.cc-topbar-brand svg,
.pig-topbar-brand .trace-signin-brand-svg,
.pig-topbar-brand svg,
.trace-workspace-brand svg,
.trace-workspace-bar .trace-signin-brand-svg {
  width: 140px !important;
  height: auto !important;
}

/* --- Logo SVG fix: white -> navy ---------------------------- */
/* The pricing/about-page logo SVGs were designed for navy bg with
   white "IVF" text + white solid block. After the bg flip to cream
   they were invisible. Re-tint white → navy. */
.pricing-topbar-logo svg rect[fill="#FFFFFF"],
.pricing-topbar-logo svg text[fill="#FFFFFF"],
.ab-topbar-logo svg rect[fill="#FFFFFF"],
.ab-topbar-logo svg text[fill="#FFFFFF"] {
  fill: #0D2340 !important;
}

/* --- Topbar link colors (rest = grey, identical to .trace-nav) -- */
/* The signin-topbar nav links are unclassed plain <a> elements, so we
   target them via parent: .trace-signin-topbar a:not(.trace-signin-brand).
   This matches TRACE / Research / Pricing / Sign In on /signin and
   /signup. */
.ab-topbar-link,
.pricing-topbar-link,
.trace-signin-topbar a:not(.trace-signin-brand) {
  color: rgba(13, 35, 64, 0.45) !important;
  transition: color 200ms ease !important;
}

/* The .trace-mark / .act-mark spans are a sitewide brand-marker class
   that auto-greens the words "TRACE" / "ACT" in body copy. When that
   markup leaks into a nav link (e.g. <a><strong class="trace-mark">
   TRACE</strong></a> on the pricing/signin topbar) the link looks
   like it's the active page even when it isn't. Strip the green and
   bold from these marks INSIDE nav links so the link's own colour
   wins and the link reads grey at rest, green on hover. */
.trace-nav-link .trace-mark,
.trace-nav-link .act-mark,
.ab-topbar-link .trace-mark,
.ab-topbar-link .act-mark,
.pricing-topbar-link .trace-mark,
.pricing-topbar-link .act-mark,
.trace-signin-topbar a .trace-mark,
.trace-signin-topbar a .act-mark {
  color: inherit !important;
  font-weight: inherit !important;
  background: none !important;
}

/* --- Nav active behavior: GREY by default, GREEN on hover/click -- */
/* Per user pref: links remain grey even on the current page. They turn
   green only on hover or while the user is actively pressing them. */
.trace-nav-link:hover,
.ab-topbar-link:hover,
.pricing-topbar-link:hover,
.trace-signin-topbar a:not(.trace-signin-brand):hover,
.trace-nav-link:active,
.ab-topbar-link:active,
.pricing-topbar-link:active,
.trace-signin-topbar a:not(.trace-signin-brand):active {
  color: #1D9E75 !important;
}
/* Explicitly do NOT light up the current page's link in green —
   keep parity with /trace where TRACE stays grey while you're on it.
   /signin uses aria-current="page" instead of a class, AND fades the
   active link to 0.2 opacity. Override that fade so SIGN IN reads at
   the same grey as the other links. */
.trace-nav-link.is-current,
.trace-nav-link.is-active,
.ab-topbar-link.is-current,
.ab-topbar-link.is-active,
.pricing-topbar-link.is-current,
.pricing-topbar-link.is-active,
.trace-signin-topbar a:not(.trace-signin-brand)[aria-current="page"],
.trace-signin-topbar a:not(.trace-signin-brand).is-current,
.trace-signin-topbar a:not(.trace-signin-brand).is-active {
  color: rgba(13, 35, 64, 0.45) !important;
  font-weight: 700 !important;  /* keep weight cue without the colour */
}

/* --- Mobile: tighter header sizing ------------------------- */
/* Every header variant (.trace-nav, .ab-topbar, .pricing-topbar,
   .trace-signin-topbar, .cc-topbar, .pig-topbar, .trace-workspace-bar)
   shares the same mobile sizing so the user's eye doesn't catch a
   height change when crossing surfaces on a phone. */
@media (max-width: 640px) {
  .ab-topbar,
  .pricing-topbar,
  .trace-nav,
  .trace-signin-topbar,
  .cc-topbar,
  .pig-topbar,
  .trace-workspace-bar,
  .site-header {
    padding: 10px 16px !important;
    height: 48px !important;
    min-height: 48px !important;
  }
  .trace-nav-link,
  .ab-topbar-link,
  .pricing-topbar-link,
  .trace-signin-topbar a:not(.trace-signin-brand),
  .cc-topbar-link,
  .cc-topbar-signout,
  .pig-topbar-link,
  .pig-topbar-signout,
  .trace-workspace-bar a {
    font-size: 10px !important;
    letter-spacing: 0.03em !important;
  }
  .trace-nav-links,
  .cc-topbar-right,
  .pig-topbar-right {
    gap: 12px !important;
  }
  /* Logo scales down a touch on mobile */
  .trace-nav-brand svg,
  .ab-topbar-logo svg,
  .pricing-topbar-logo svg,
  .trace-signin-brand svg,
  .trace-signin-brand-svg,
  .cc-topbar-brand svg,
  .pig-topbar-brand svg,
  .trace-workspace-brand svg {
    width: 110px !important;
    height: auto !important;
  }
}
@media (max-width: 420px) {
  /* Very narrow: drop link padding/gaps further */
  .trace-nav-links,
  .cc-topbar-right,
  .pig-topbar-right {
    gap: 8px !important;
  }
  .trace-nav-link,
  .ab-topbar-link,
  .pricing-topbar-link,
  .trace-signin-topbar a:not(.trace-signin-brand),
  .cc-topbar-link,
  .cc-topbar-signout,
  .pig-topbar-link,
  .pig-topbar-signout,
  .trace-workspace-bar a {
    font-size: 9px !important;
  }
  .trace-nav-brand svg,
  .ab-topbar-logo svg,
  .pricing-topbar-logo svg,
  .trace-signin-brand svg,
  .trace-signin-brand-svg,
  .cc-topbar-brand svg,
  .pig-topbar-brand svg,
  .trace-workspace-brand svg {
    width: 92px !important;
  }
}