/* pn-motion.css — Sophisticated motion system for PrescriberNow.
 * Layers on top of pn-microanim.css. CSS-only entry animations + public-page polish.
 * Brand palette: Navy #001B72, Blue #2A7DE2, Sky #8BC6E8.
 * All durations 150-300ms, easeOutCubic. Honors prefers-reduced-motion. */

html { scroll-behavior: smooth; }

/* CSS variables (fallbacks in case host page doesn't define) */
:root {
  --pn-mo-navy: #001B72;
  --pn-mo-blue: #2A7DE2;
  --pn-mo-sky: #8BC6E8;
}

/* ---- KEYFRAMES ---- */
@keyframes pn-mo-body-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes pn-mo-hero-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pn-mo-card-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pn-mo-leave     { to   { opacity: 0; transform: translateY(6px); } }
@keyframes pn-mo-page-in   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pn-mo-hero-text { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pn-mo-btn-pulse { 0%,100% { box-shadow: 0 4px 14px rgba(42,125,226,.28); } 50% { box-shadow: 0 4px 22px rgba(42,125,226,.55); } }
@keyframes pn-mo-plane     { 0% { transform: translateX(0) translateY(0); opacity: 1; } 60% { transform: translateX(14px) translateY(-3px); opacity: 1; } 100% { transform: translateX(28px) translateY(-6px); opacity: 0; } }
@keyframes pn-mo-dot-trail { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes pn-mo-fade-up   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pn-mo-confetti  { 0% { transform: translate3d(0,-10vh,0) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(var(--pn-cx,0),110vh,0) rotate(var(--pn-cr,720deg)); opacity: 0; } }

/* ---- PAGE ENTRY ---- */
/* Body fades 0->1 over 300ms. */
body {
  animation: pn-mo-body-in 0.30s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* Hero / top-of-page content slides up. We target the welcome card &
   the first section-title/topbar to give that "rises into place" feel. */
.welcome-card,
main > .section-title:first-of-type,
main > h2.section-title:first-of-type,
main > .page.is-active > .welcome-card,
main > .page.is-active > .section-title:first-of-type,
main > .page.is-active > h2.section-title:first-of-type {
  animation: pn-mo-hero-rise 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 0.05s;
}

/* ---- CARD CASCADE (50ms stagger, up to 10) ---- */
.card,
.kpi-card,
.rx-card,
.order-card {
  animation: pn-mo-card-rise 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* Scope the stagger to siblings inside common grids/containers so that
   nth-child(N) is meaningful relative to its row, not the whole document. */
.kpi-grid > .kpi-card:nth-child(1),
.card-grid > .card:nth-child(1),
.page.is-active > .card:nth-child(1) { animation-delay: 0ms; }
.kpi-grid > .kpi-card:nth-child(2),
.card-grid > .card:nth-child(2),
.page.is-active > .card:nth-child(2) { animation-delay: 50ms; }
.kpi-grid > .kpi-card:nth-child(3),
.card-grid > .card:nth-child(3),
.page.is-active > .card:nth-child(3) { animation-delay: 100ms; }
.kpi-grid > .kpi-card:nth-child(4),
.card-grid > .card:nth-child(4),
.page.is-active > .card:nth-child(4) { animation-delay: 150ms; }
.kpi-grid > .kpi-card:nth-child(5),
.card-grid > .card:nth-child(5),
.page.is-active > .card:nth-child(5) { animation-delay: 200ms; }
.kpi-grid > .kpi-card:nth-child(6),
.card-grid > .card:nth-child(6),
.page.is-active > .card:nth-child(6) { animation-delay: 250ms; }
.kpi-grid > .kpi-card:nth-child(7),
.page.is-active > .card:nth-child(7) { animation-delay: 300ms; }
.kpi-grid > .kpi-card:nth-child(8),
.page.is-active > .card:nth-child(8) { animation-delay: 350ms; }
.page.is-active > .card:nth-child(9)  { animation-delay: 400ms; }
.page.is-active > .card:nth-child(10) { animation-delay: 450ms; }

/* Rx / order cards (lists) cascade too, but capped so long lists don't lag. */
.rx-card:nth-child(1), .order-card:nth-child(1) { animation-delay: 0ms; }
.rx-card:nth-child(2), .order-card:nth-child(2) { animation-delay: 50ms; }
.rx-card:nth-child(3), .order-card:nth-child(3) { animation-delay: 100ms; }
.rx-card:nth-child(4), .order-card:nth-child(4) { animation-delay: 150ms; }
.rx-card:nth-child(5), .order-card:nth-child(5) { animation-delay: 200ms; }
.rx-card:nth-child(n+6), .order-card:nth-child(n+6) { animation-delay: 240ms; }

/* ---- SCROLL REVEAL ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.30s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.30s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- HOVER LIFT ---- */
.card,
.btn,
.tile {
  transition:
    transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.card:hover,
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 27, 114, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(42, 125, 226, 0.18);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* ---- PAGE LEAVE ---- */
/* JS adds body.is-leaving before navigation. 150ms fade + slight downward drift. */
body.is-leaving {
  animation: pn-mo-leave 0.15s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}

/* ---- TAB / PANEL SWITCH ---- */
/* When a .page receives .is-active, fade+slide-up over 200ms.
   The sliding tab underline already exists in admin styles. */
.page.is-active {
  animation: pn-mo-page-in 0.20s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ---- NUMBER TICK-UP (CSS-only helper class) ---- */
/* JS adds .pn-ticking while counting; removes when done. Purely visual hook. */
.pn-ticking { font-variant-numeric: tabular-nums; }
.kpi-card .value { font-variant-numeric: tabular-nums; }

/* ============================================================
 * PUBLIC-PAGE POLISH (delight pass)
 * ============================================================ */

/* ---- HERO STAGGER (homepage / public landing) ---- */
.hero h1,
.hero .lede,
.hero-cta,
.hero-trust {
  animation: pn-mo-hero-text 0.40s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.hero .eyebrow { animation: pn-mo-hero-text 0.40s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: 0ms; }
.hero h1        { animation-delay: 60ms; }
.hero .lede     { animation-delay: 160ms; }
.hero-cta       { animation-delay: 260ms; }
.hero-trust     { animation-delay: 360ms; animation-duration: 0.5s; }
.hero-image     { animation: pn-mo-fade-up 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; animation-delay: 200ms; }

/* ---- PRIMARY BUTTON HOVER REFINEMENT ---- */
/* Subtle scale + soft navy/blue glow. Applies to .btn-primary on public pages. */
.btn-primary {
  transition:
    transform 0.16s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.20s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.16s ease-out;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 8px 22px rgba(42, 125, 226, 0.32), 0 0 0 4px rgba(42, 125, 226, 0.10);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.08s;
}

/* Loading-state pulse: button is disabled and contains a spinner. */
.btn-primary:disabled:has(.spinner),
.btn-primary.is-loading {
  animation: pn-mo-btn-pulse 1.4s ease-in-out infinite;
  opacity: 1 !important;
}

/* ---- FORM FIELD FOCUS POLISH ---- */
/* 200ms smooth ease as border + glow appear. Only adds the transition; specific
   pages may override the focus color, but the transition will carry through. */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
  transition:
    border-color 0.20s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.20s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.20s ease-out;
}

/* ---- FORM VALIDATION FEEDBACK ---- */
/* Apply .pn-invalid to shake gently; .pn-valid for green checkmark pop. */
.pn-invalid {
  animation: pn-shake 0.4s ease-in-out both;
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12) !important;
}
.pn-valid-wrap { position: relative; }
.pn-valid-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border-radius: 50%;
  background: #10B981 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'><path d='M7.5 13.5L4 10l-1.5 1.5L7.5 16.5 17.5 6.5 16 5z'/></svg>") center/12px 12px no-repeat;
  animation: pn-pop-in 0.22s ease-out both;
  pointer-events: none;
}

/* ---- SERVICE TILE / CARD LIFT (public) ---- */
.svc-card,
.feature,
.cond-card,
.service-tile {
  transition:
    transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.20s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.18s ease-out;
}
.svc-card:hover,
.feature:hover,
.service-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(0, 27, 114, 0.18), 0 4px 10px rgba(15, 23, 42, 0.06);
}
.cond-card:hover {
  transform: translateY(-3px);
}

/* ---- FAQ <details> SMOOTH EXPAND ---- */
/* Animate hover color and fade in the answer body. Don't force marker rotation
   here — host pages may use text markers (+/−). */
details summary {
  transition: color 0.18s ease-out;
}
details summary:hover {
  color: var(--pn-blue, #2A7DE2);
}
details[open] > *:not(summary) {
  animation: pn-mo-fade-up 0.28s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* ---- FOOTER FADE-IN ON SCROLL ---- */
/* Subtle, safe-by-default: footer animates only via @supports scroll-timeline
   OR when JS adds .is-revealed. Visible by default if neither fires. */
@supports (animation-timeline: view()) {
  footer, .pn-footer {
    animation: pn-mo-fade-up 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}
/* IO-based path: only hide if .pn-foot-reveal is opt-in, then reveal via .is-revealed */
footer.pn-foot-reveal,
.pn-footer.pn-foot-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
footer.pn-foot-reveal.is-revealed,
.pn-footer.pn-foot-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- MAGIC-LINK PLANE / LOADING DOTS ---- */
.pn-plane {
  display: inline-block;
  animation: pn-mo-plane 0.9s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
.pn-dot-trail {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  vertical-align: middle;
}
.pn-dot-trail span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  animation: pn-mo-dot-trail 0.9s ease-in-out infinite;
}
.pn-dot-trail span:nth-child(2) { animation-delay: 0.15s; }
.pn-dot-trail span:nth-child(3) { animation-delay: 0.30s; }

/* ---- MULTI-STEP PROGRESS BAR ---- */
.pn-step-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--pn-muted, #64748B);
  font-weight: 600;
  letter-spacing: .3px;
}
.pn-step-progress .pn-step-track {
  flex: 1;
  height: 4px;
  background: #E2E8F0;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.pn-step-progress .pn-step-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--pn-mo-blue, #2A7DE2), var(--pn-mo-navy, #001B72));
  width: var(--pn-step-pct, 33%);
  transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  border-radius: 99px;
}

/* ---- CONDITION LINK HOVER PREVIEW ---- */
/* Optional: any element with .pn-preview-host containing .pn-preview will
   smoothly reveal the preview on hover with an 80ms delay. */
.pn-preview-host { position: relative; }
.pn-preview {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  background: #fff;
  border: 1px solid var(--pn-line, #E2E8F0);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--pn-ink, #0F172A);
  line-height: 1.4;
  box-shadow: 0 12px 28px -8px rgba(0, 27, 114, 0.18);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.20s ease-out 0.08s, transform 0.20s ease-out 0.08s;
  z-index: 20;
  max-width: 260px;
  white-space: normal;
}
.pn-preview-host:hover .pn-preview,
.pn-preview-host:focus-within .pn-preview {
  opacity: 1;
  transform: translateY(0);
}

/* ---- CONFETTI (success page) ---- */
.pn-confetti-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1000;
}
.pn-confetti-piece {
  position: absolute;
  top: -10vh;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: pn-mo-confetti 2.4s cubic-bezier(0.36, 0.45, 0.7, 1) forwards;
}
.pn-confetti-piece.c1 { background: var(--pn-mo-navy, #001B72); }
.pn-confetti-piece.c2 { background: var(--pn-mo-blue, #2A7DE2); }
.pn-confetti-piece.c3 { background: var(--pn-mo-sky, #8BC6E8); }
.pn-confetti-piece.c4 { background: #fff; border: 1px solid var(--pn-mo-blue, #2A7DE2); }

/* ---- NAV LINK UNDERLINE GLIDE ---- */
.nav-links a {
  position: relative;
}
.nav-links a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--pn-mo-blue, #2A7DE2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.nav-links a:hover::before { transform: scaleX(1); }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  body,
  .welcome-card,
  main > .section-title:first-of-type,
  main > h2.section-title:first-of-type,
  .card, .kpi-card, .rx-card, .order-card,
  .page.is-active,
  body.is-leaving {
    animation: none !important;
  }

  /* Reveals still happen, but instantly — no slide, no fade. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .card, .btn, .tile {
    transition: none !important;
  }
  .card:hover, .btn:hover, .tile:hover {
    transform: none !important;
    box-shadow: inherit !important;
  }

  /* Public-polish overrides */
  .hero h1, .hero .lede, .hero-cta, .hero-trust, .hero .eyebrow, .hero-image,
  .btn-primary, .btn-primary:hover:not(:disabled), .btn-primary:active:not(:disabled),
  .btn-primary:disabled:has(.spinner), .btn-primary.is-loading,
  .svc-card, .feature, .cond-card, .service-tile,
  .svc-card:hover, .feature:hover, .service-tile:hover, .cond-card:hover,
  details[open] > *:not(summary),
  .pn-plane, .pn-dot-trail span, .pn-confetti-piece,
  footer, .pn-footer {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .pn-invalid { animation: none !important; }
  .pn-step-progress .pn-step-fill { transition: none !important; }
  .nav-links a::before { transition: none !important; }
  .pn-preview { transition: none !important; }
  footer, .pn-footer { opacity: 1 !important; }
}