/* ==========================================================================
   ListenPay — Hero animation
   Emulates the ListenPay Admin landing view (setup wizard / access screen):
   ink + teal/gold ambient glow, glowing panel edge, heartbeat "pulse" eyebrow,
   rising display headline, and the gold stepper with filling rail + haloed
   active dot, plus the console's KPI and bar-chart motion.
   Load after style.css and motion.css. Pair with assets/js/hero-motion.js.
   ========================================================================== */

/* ---------- ambient glow (admin body background, animated) ---------- */
.hero__glow {
  position: absolute;
  inset: -10%;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}
.hero__glow::before,
.hero__glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  will-change: transform, opacity;
}
/* teal glow from the top (admin: 900x520 at 50% -170px) */
.hero__glow::before {
  width: 900px; height: 520px;
  left: calc(50% - 450px); top: -120px;
  background: radial-gradient(closest-side, rgba(42, 94, 128, .55), rgba(70, 183, 193, .12) 55%, transparent);
  animation: hgDriftA 16s ease-in-out infinite alternate, lpFade 2s ease both;
}
/* gold glow from the left (admin: 620x460 at 6% 35%) */
.hero__glow::after {
  width: 720px; height: 520px;
  left: -6%; top: 30%;
  background: radial-gradient(closest-side, rgba(201, 146, 42, .30), rgba(201, 146, 42, .06) 60%, transparent);
  animation: hgDriftB 19s ease-in-out infinite alternate, lpFade 2.4s ease both;
}
@keyframes hgDriftA {
  0%   { transform: translate3d(-6%, 0, 0) scale(1);    opacity: .85; }
  100% { transform: translate3d(8%, 6%, 0) scale(1.12); opacity: 1; }
}
@keyframes hgDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1);       opacity: .8; }
  100% { transform: translate3d(10%, -8%, 0) scale(1.15); opacity: 1; }
}

/* photo settles in (slow zoom-out) */
.hero__texture { animation: lpFade 1.2s ease both, hgSettle 2.6s cubic-bezier(.23, 1, .32, 1) both; }
@keyframes hgSettle { from { transform: scale(1.08); } }

.hero__inner { z-index: 3; }

/* ---------- eyebrow heartbeat mark (admin .pulse, drawn live) ---------- */
.hero .eyebrow { display: flex; align-items: center; gap: .6rem; }
.hg-pulse { width: 34px; height: 14px; flex: none; overflow: visible; }
.hg-pulse path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: hgBeat 2.4s cubic-bezier(.23, 1, .32, 1) .6s infinite;
}
@keyframes hgBeat {
  0%   { stroke-dashoffset: 60; opacity: 1; }
  55%  { stroke-dashoffset: 0;  opacity: 1; }
  85%  { stroke-dashoffset: 0;  opacity: 0; }
  100% { stroke-dashoffset: 60; opacity: 0; }
}

/* ---------- headline: gold shimmer pass on the emphasis ---------- */
.hero .display em {
  background: linear-gradient(100deg, var(--brass) 0%, var(--brass) 40%, #f4dc9a 50%, var(--brass) 60%, var(--brass) 100%);
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hgShimmer 7s cubic-bezier(.23, 1, .32, 1) 1.1s infinite;
}
@keyframes hgShimmer {
  0%       { background-position: 100% 0; }
  22%, 100% { background-position: 0% 0; }
}

/* ---------- console panel (admin .panel.glow) ---------- */
.hero__console {
  display: flex;
  justify-content: flex-end;
  perspective: 1200px;
  margin-top: -140px;
}
.hc {
  --hc-ry: 0deg; --hc-rx: 0deg;
  position: relative;
  overflow: hidden;
  width: min(420px, 100%);
  padding: 1.5rem 1.5rem 1.4rem;
  border: 1px solid rgba(220, 229, 236, .16);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(20, 28, 38, .86), rgba(10, 15, 23, .82));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
  color: #eef2f6;
  font-family: var(--font-body);
  transform: rotateY(var(--hc-ry)) rotateX(var(--hc-rx));
  transition: transform .5s cubic-bezier(.23, 1, .32, 1);
  animation: hgPanelIn 1s cubic-bezier(.23, 1, .32, 1) .35s backwards;
}
@keyframes hgPanelIn { from { opacity: 0; transform: translateY(26px) scale(.97); } }
/* glowing top edge that draws in, then a light sweeps along it */
.hc::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d8a13b 17%, #f0c35e 51%, #3ea6a5 84%, transparent);
  transform-origin: left center;
  animation: hgEdge 1.2s cubic-bezier(.23, 1, .32, 1) .8s both;
}
.hc::after {
  content: "";
  position: absolute; top: 0; left: -30%; width: 30%; height: 2px;
  background: linear-gradient(90deg, transparent, #fff6dc, transparent);
  opacity: .9;
  animation: hgSweep 4.8s ease-in-out 2.2s infinite;
}
@keyframes hgEdge { from { transform: scaleX(0); } }
@keyframes hgSweep { 0% { left: -30%; } 45%, 100% { left: 110%; } }

.hc__head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: 1.4rem; }
.hc__eyebrow {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  color: #d8a13b; font: 600 10px/1 'Oswald', sans-serif; letter-spacing: .17em; text-transform: uppercase;
}
.hc__live {
  display: inline-flex; align-items: center; gap: .45rem;
  color: #99a8b6; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
}
/* admin .status-dot, breathing */
.hc__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #4bbf91;
  box-shadow: 0 0 0 4px rgba(75, 191, 145, .09);
  animation: hgDot 2s ease-in-out infinite;
}
@keyframes hgDot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(75, 191, 145, .14); }
  50%      { box-shadow: 0 0 0 7px rgba(75, 191, 145, 0); }
}

/* ---------- stepper (admin lp-stepper) ---------- */
.hc__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.hc__rail {
  position: absolute; left: 22px; right: 22px; top: 21px; height: 2px;
  background: rgba(220, 229, 236, .12); border-radius: 2px;
}
.hc__fill {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #d8a13b, #f0c35e);
  border-radius: 2px;
  transition: width .42s cubic-bezier(.23, 1, .32, 1);
}
.hc__step { display: grid; justify-items: center; gap: .55rem; text-align: center; }
.hc__step:nth-child(2) { justify-items: start; text-align: left; }
.hc__step:last-child { justify-items: end;   text-align: right; }
.hc__node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(220, 229, 236, .2);
  background: #10151e; color: #9aaaba;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .3s ease;
}
.hc__node svg { width: 18px; height: 18px; }
.hc__num { font: 600 9px/1 'Oswald', sans-serif; letter-spacing: .17em; text-transform: uppercase; color: #71808d; transition: color .2s ease; }
.hc__label { font-weight: 800; font-size: 13px; letter-spacing: -.01em; color: #b8c4cc; transition: color .2s ease; }

.hc__step.is-active .hc__node {
  background: linear-gradient(135deg, #e6b550, #c58c27);
  border-color: transparent; color: #080a0f;
  transform: scale(1.06);
  box-shadow: 0 0 0 6px rgba(216, 161, 59, .12);
  animation: hgHalo 1.6s ease-out infinite;
}
.hc__step.is-active .hc__num { color: #d8a13b; }
.hc__step.is-active .hc__label { color: #eef2f6; }
.hc__step.is-done .hc__node { background: rgba(75, 191, 145, .12); border-color: rgba(75, 191, 145, .5); color: #8bddba; }
.hc__step.is-done .hc__label { color: #eef2f6; }
@keyframes hgHalo {
  0%   { box-shadow: 0 0 0 0 rgba(216, 161, 59, .35), 0 0 0 6px rgba(216, 161, 59, .12); }
  100% { box-shadow: 0 0 0 14px rgba(216, 161, 59, 0), 0 0 0 6px rgba(216, 161, 59, .12); }
}

/* ---------- KPI + chart (admin overview) ---------- */
.hc__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: .8rem; }
.hc__kpi, .hc__chart {
  border: 1px solid rgba(220, 229, 236, .12);
  border-radius: 14px;
  background: rgba(16, 21, 30, .72);
  padding: .9rem;
}
.hc__k-label { color: #9aaaba; font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.hc__k-val { margin: .45rem 0 .6rem; font: 600 30px/1 'Oswald', sans-serif; letter-spacing: -.02em; color: #f5f7f9; font-variant-numeric: tabular-nums; }
.hc__k-val small { font: 600 12px 'Montserrat', sans-serif; color: #9aaaba; margin-left: 3px; }
.hc__bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.hc__bar > i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #d8a13b, #f0c35e);
  transition: width .5s cubic-bezier(.23, 1, .32, 1);
}
.hc__k-foot { margin-top: .55rem; color: #71808d; font-size: 10px; }
.hc__k-foot b { color: #8bddba; font-weight: 800; }
.hc__bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 62px; margin-top: .55rem;
}
.hc__bars i {
  flex: 1; height: 8%;
  border-radius: 3px 3px 1px 1px;
  background: #d8a13b;
  opacity: .85;
  transition: height .6s cubic-bezier(.23, 1, .32, 1), background .12s ease, opacity .2s ease;
}
.hc__bars i.on { background: #f0c35e; opacity: 1; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero__console { justify-content: flex-start; margin-top: 2.5rem; order: 0; }
  .hc { transform: none !important; }
}
@media (max-width: 420px) {
  .hc { padding: 1.2rem 1.1rem 1.1rem; }
  .hc__grid { grid-template-columns: 1fr; }
  .hc__label { font-size: 12px; }
}

/* ---------- reduced motion: static end state ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__glow::before, .hero__glow::after,
  .hg-pulse path, .hero .display em, .hc::after, .hc__dot,
  .hc__step.is-active .hc__node { animation: none !important; }
  .hg-pulse path { stroke-dashoffset: 0; }
  .hc::after { display: none; }
}