/* ==========================================================================
   ListenPay — Motion layer
   Ported from the ListenPay Admin UI (ListenPay-admin-ui/src/styles.css and
   its components): the same easing curve, rise/fade/pop entrances, button
   press, gold focus ring, glowing panel hairline, stepper rail fill and
   active-dot halo, and progress-bar growth.
   Load after style.css (and inner.css). Pair with assets/js/motion.js.
   ========================================================================== */

:root {
  --ease: cubic-bezier(.23, 1, .32, 1);     /* admin --ease */
  --teal: #46b7c1;                           /* admin accent used in the glow line */
  --glow-line: linear-gradient(90deg, transparent, var(--brass) 17%, var(--brass-soft) 51%, #3ea6a5 84%, transparent);
}

/* ---------- keyframes (admin: lpFade, lpSlide, pop, rise) ---------- */
@keyframes lpFade { from { opacity: 0; } }
@keyframes lpRise { from { opacity: 0; transform: translateY(14px); } }
@keyframes lpDrop { from { opacity: 0; transform: translateY(-10px); } }
@keyframes lpSlide { from { opacity: 0; transform: translateX(40px); } }
@keyframes lpPop { from { opacity: 0; transform: scale(.97); } }
@keyframes lpHalo {
  0%   { box-shadow: 0 0 0 6px var(--bg), 0 0 0 6px rgba(201, 162, 75, .45); }
  100% { box-shadow: 0 0 0 6px var(--bg), 0 0 0 18px rgba(201, 162, 75, 0); }
}
@keyframes lpNode {
  0%   { transform: scale(.85); border-color: var(--border); }
  55%  { transform: scale(1.08); border-color: var(--brass); }
  100% { transform: scale(1); border-color: var(--brass-deep); }
}

/* ---------- page entrance ---------- */
.nav { animation: lpDrop .6s var(--ease) both; }

.hero__copy > *,
.ip-hero__inner > *,
.mr-hero__inner > * {
  animation: lpRise .8s var(--ease) both;
}
.hero__copy > :nth-child(2), .ip-hero__inner > :nth-child(2), .mr-hero__inner > :nth-child(2) { animation-delay: .09s; }
.hero__copy > :nth-child(3), .ip-hero__inner > :nth-child(3), .mr-hero__inner > :nth-child(3) { animation-delay: .18s; }
.hero__copy > :nth-child(4), .ip-hero__inner > :nth-child(4), .mr-hero__inner > :nth-child(4) { animation-delay: .27s; }
.hero__copy > :nth-child(5), .ip-hero__inner > :nth-child(5), .mr-hero__inner > :nth-child(5) { animation-delay: .36s; }
.hero__texture { animation: lpFade 1.2s ease both; }

/* ---------- scroll reveal: admin easing + sibling stagger ---------- */
/* Longhands only, so existing transition-delay rules (e.g. .chain__item --i) still apply. */
.reveal {
  transform: translateY(18px) scale(.985);
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: var(--ease);
}
.reveal.lp-stagger { transition-delay: calc(var(--lp-i, 0) * 80ms); }
.reveal--in { transform: none; }

/* ---------- buttons (admin .btn press + primary glow) ---------- */
.btn {
  transition: transform .16s var(--ease), box-shadow .16s ease, background .16s ease,
    border-color .16s ease, color .16s ease, filter .16s ease;
}
.btn--brass {
  box-shadow: 0 10px 24px -8px rgba(201, 162, 75, .32);
}
.btn--brass:hover,
.btn--brass:focus-visible {
  filter: brightness(1.07);
  box-shadow: 0 14px 30px -8px rgba(201, 162, 75, .5);
}
.btn:active,
.nav__cta:active,
.ip-related a:active { transform: scale(.97); }
.btn:focus-visible,
.nav__links a:focus-visible,
.ip-related a:focus-visible,
.footer__cols a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(201, 162, 75, .22);
  border-radius: 100px;
}

/* nav CTA + related pills: admin .btn.gold hover */
.nav__cta,
.ip-related a {
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s var(--ease);
}
.nav__cta:hover,
.ip-related a:hover { background: rgba(201, 162, 75, .1); }

/* ---------- form fields: admin focus ring ---------- */
.ip-form input,
.ip-form select,
.ip-form textarea {
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ip-form input:focus,
.ip-form select:focus,
.ip-form textarea:focus {
  border-color: rgba(201, 162, 75, .8);
  box-shadow: 0 0 0 4px rgba(201, 162, 75, .1);
}
.ip-form__note.lp-rise { animation: lpRise .2s var(--ease); }

/* ---------- glowing panel hairline (admin .panel.glow) ---------- */
.lp-glow { position: relative; overflow: hidden; }
.lp-glow::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--glow-line);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: .9;
  transition: transform 1s var(--ease) .15s, opacity .25s ease;
  pointer-events: none;
}
.lp-glow.is-lit::before { transform: scaleX(1); }
.lp-glow:hover::before { opacity: 1; }
.ip-card,
.kpi {
  transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.ip-card:hover,
.kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .28);
}

/* ---------- value chain as admin stepper ---------- */
/* rail fill (admin .stepper .fill, width 420ms --ease) */
.chain.lp-stepper .chain__line {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s var(--ease) .1s;
}
.chain.lp-stepper.is-active .chain__line { transform: scaleX(1); }

/* active dot: scale + halo (admin li.active .dot) */
.chain__node {
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s var(--ease), box-shadow .2s ease;
}
.chain.lp-stepper.is-active .chain__node {
  border-color: var(--brass-deep);
  animation: lpNode .7s var(--ease) backwards, lpHalo 1.1s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 260ms + 150ms);
}
.chain__item:hover .chain__node {
  background: linear-gradient(135deg, var(--brass-soft), var(--brass) 60%, var(--brass-deep));
  border-color: transparent;
  color: #181307;
  transform: scale(1.06);
  box-shadow: 0 0 0 6px var(--bg), 0 0 0 12px rgba(201, 162, 75, .12);
}

/* ---------- inner-page step rows: rule draws in ---------- */
.ip-step { position: relative; }
.ip-step.reveal { border-top-color: transparent; }
.ip-step.reveal::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--brass), var(--brass-deep));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ease) .1s;
}
.ip-step.reveal--in::before { transform: scaleX(1); }

/* ---------- progress / breakdown bar grows (admin .bar > i width 500ms) ---------- */
.breakdown.reveal .bar {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease) .25s;
}
.breakdown.reveal--in .bar { clip-path: inset(0 0 0 0); }

/* ---------- scroll progress hairline (stepper rail + glow line) ---------- */
.lp-progress {
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 2px;
  z-index: 101;
  background: var(--glow-line);
  transform: scaleX(var(--lp-p, 0));
  transform-origin: left center;
  pointer-events: none;
  transition: transform .12s linear;
}

/* ---------- mobile menu: admin drawer slide + staggered links ---------- */
@media (max-width: 680px) {
  .nav__links { transition: opacity .26s var(--ease), transform .26s var(--ease); }
  .nav__links.is-open > * { animation: lpRise .4s var(--ease) both; }
  .nav__links.is-open > :nth-child(2) { animation-delay: .04s; }
  .nav__links.is-open > :nth-child(3) { animation-delay: .08s; }
  .nav__links.is-open > :nth-child(4) { animation-delay: .12s; }
  .nav__toggle span { transition: transform .26s var(--ease), opacity .2s ease; }
  .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ---------- reduced motion (admin + site rule) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .lp-progress { display: none; }
}