/* ============================================================
   PY Stat Cards  -  youthful, futuristic redesign
   Applies to: .pyh-hero-stat (dark hero statbar) and .pyh-counter
   (impact counters). Loaded after py-theme.css so it wins the cascade.
   ============================================================ */

@property --pyh-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ---------- Icon badge (shared) ---------- */
.pyh-stat-badge{
  position:relative;
  z-index:2;
  display:flex;
  align-items:var(--pyh-badge-align,center);
  justify-content:var(--pyh-badge-justify,center);
  width:var(--pyh-badge-size,54px);
  height:var(--pyh-badge-size,54px);
  margin:0 auto 16px;
  border-radius:var(--pyh-badge-radius,16px);
  background:var(--pyh-badge-bg,linear-gradient(135deg,#0071BC,#18A9A1));
  opacity:var(--pyh-badge-opacity,1);
  box-shadow:var(--pyh-badge-shadow,0 12px 28px rgba(0,113,188,.32));
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease;
  flex-shrink:0;
}
.pyh-stat-badge .pyh-hero-stat-icon,
.pyh-stat-badge .pyh-counter-icon{
  --pyh-icon-fill:#fff;
  --pyh-icon-size:26px;
  margin:0 !important;
  flex-shrink:0;
}

/* ---------- Hero statbar cards ---------- */
.pyh-hero-stat{
  position:relative;
  isolation:isolate;
  overflow:visible;
  border-radius:20px;
  padding:26px 22px 24px;
  text-align:center;
  border-top:none;
  background:var(--pyh-card-bg,linear-gradient(165deg,rgba(255,255,255,.14),rgba(255,255,255,.05)));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 18px 40px rgba(10,20,40,.18);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,background .4s ease;
}
.pyh-hero-stat:hover{
  transform:translateY(-6px);
  background:linear-gradient(165deg,rgba(255,255,255,.2),rgba(255,255,255,.08));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 26px 54px rgba(10,20,40,.28);
}
.pyh-hero-stat:hover .pyh-stat-badge{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 16px 34px rgba(0,113,188,.45);
}
.pyh-hero-stat strong,
.pyh-hero-stat span,
.pyh-hero-stat small{position:relative;z-index:2}

/* ---------- Impact counter cards ---------- */
.pyh-counter{
  position:relative;
  isolation:isolate;
  overflow:visible;
  text-align:center;
  padding:32px 18px 28px;
  border-radius:22px;
  border:1px solid rgba(0,113,188,.14);
  background:var(--pyh-card-bg,linear-gradient(180deg,#fff,#F7FBFD));
  box-shadow:0 10px 26px rgba(15,23,42,.05);
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .4s ease;
}
.pyh-counter::before{content:none}
.pyh-counter:hover{
  transform:translateY(-7px);
  box-shadow:0 26px 54px rgba(0,113,188,.18);
  border-color:rgba(0,113,188,.06);
}
.pyh-counter:hover .pyh-stat-badge{
  transform:scale(1.08) rotate(-4deg);
  box-shadow:0 16px 34px rgba(0,113,188,.4);
}
.pyh-counter-num,.pyh-counter-label,.pyh-counter-note{position:relative;z-index:2}

/* ---------- Aurora border glow (hover-only, animated) ---------- */
.pyh-hero-stat::after,
.pyh-counter::after{
  content:"";
  position:absolute;
  inset:-1.5px;
  z-index:3;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--pyh-angle,0deg),
    transparent 0%,
    rgba(0,113,188,.95) 12%,
    rgba(245,183,0,.95) 30%,
    rgba(24,169,161,.95) 48%,
    transparent 66%,
    transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  transition:opacity .5s ease;
  pointer-events:none;
}
.pyh-hero-stat:hover::after,
.pyh-counter:hover::after{
  opacity:1;
  animation:pyhAuroraSpin 3.4s linear infinite;
}

@keyframes pyhAuroraSpin{
  to{ --pyh-angle:360deg; }
}

@media (prefers-reduced-motion: reduce){
  .pyh-hero-stat,.pyh-counter,.pyh-stat-badge{transition:none}
  .pyh-hero-stat:hover,.pyh-counter:hover{transform:none}
  .pyh-hero-stat:hover .pyh-stat-badge,.pyh-counter:hover .pyh-stat-badge{transform:none}
  .pyh-hero-stat:hover::after,.pyh-counter:hover::after{animation:none;opacity:.9}
}

@media (max-width:760px){
  .pyh-stat-badge{width:46px;height:46px;border-radius:14px;margin-bottom:12px}
  .pyh-stat-badge .pyh-hero-stat-icon,.pyh-stat-badge .pyh-counter-icon{--pyh-icon-size:22px}
  .pyh-counter{padding:26px 14px 22px}
  .pyh-hero-stat{padding:22px 16px 20px}
}