/* Animated metrics panels for short left columns beside tall .s-why-pts stacks */
@property --metrics-p{
  syntax:"<number>";
  inherits:false;
  initial-value:0;
}

.s-why-2col:has(.s-col-metrics){align-items:stretch}
.s-why-2col:has(.s-col-metrics) > div:first-child{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.s-col-metrics{
  margin-top:auto;
  padding-top:1.75rem;
  max-width:360px;
  pointer-events:none;
  user-select:none;
}
.s-col-metrics-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.9rem;
}
.s-col-metrics-eyebrow{
  font-family:Outfit,sans-serif;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted,#6b7f99);
}
.s-col-metrics-live{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .65rem;
  border-radius:999px;
  border:1px solid var(--gold-bdr,rgba(200,168,75,.2));
  background:var(--gold-pale,rgba(200,168,75,.09));
  color:var(--gold-l,#e2c97a);
  font-family:Outfit,sans-serif;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  animation:sMetricsPulse 2.6s ease-in-out infinite;
}
.s-col-metrics-live::before{
  content:"";
  width:.4rem;
  height:.4rem;
  border-radius:50%;
  background:var(--cro,#34d399);
  box-shadow:0 0 0 0 rgba(52,211,153,.45);
  animation:sMetricsDot 1.8s ease-out infinite;
}

.s-col-metrics-score{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1rem;
  padding:1rem 1.05rem;
  border-radius:12px;
  border:1px solid rgba(200,168,75,.16);
  background:linear-gradient(145deg,rgba(30,42,66,.95),rgba(15,24,44,.9));
  position:relative;
  overflow:hidden;
}
.s-col-metrics-score::after{
  content:"";
  position:absolute;
  inset:auto -30% -55% -30%;
  height:80%;
  background:radial-gradient(ellipse at center,rgba(200,168,75,.12),transparent 70%);
  pointer-events:none;
  animation:sMetricsGlow 3.2s ease-in-out infinite;
}

.s-col-metrics-ring{
  position:relative;
  width:5.4rem;
  height:5.4rem;
  flex:0 0 auto;
  z-index:1;
}
.s-col-metrics-ring-fill{
  position:absolute;
  inset:0;
  border-radius:50%;
  --metrics-p:0;
  background:
    radial-gradient(closest-side,var(--deep,#0f182c) 76%,transparent 77%),
    conic-gradient(from -90deg,var(--gold,#c8a84b) calc(var(--metrics-p) * 1%),rgba(154,173,196,.16) 0);
  animation:sMetricsRing 2.4s cubic-bezier(.22,1,.36,1) forwards;
  box-shadow:0 0 0 0 rgba(200,168,75,.0);
}
.s-col-metrics-score-val{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  z-index:1;
}
.s-col-metrics-num{
  font-family:Cormorant,serif;
  font-weight:700;
  font-size:1.85rem;
  line-height:1;
  color:var(--gold-l,#e2c97a);
  animation:sMetricsPop .7s cubic-bezier(.22,1,.36,1) .35s both;
}
.s-col-metrics-unit{
  margin-top:.15rem;
  font-family:Outfit,sans-serif;
  font-size:.55rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--silver,#9aadc4);
}
.s-col-metrics-score-copy{
  display:flex;
  flex-direction:column;
  gap:.28rem;
  min-width:0;
  z-index:1;
}
.s-col-metrics-score-copy strong{
  font-family:Outfit,sans-serif;
  font-size:.82rem;
  font-weight:600;
  color:var(--white,#edf0f7);
}
.s-col-metrics-score-copy span{
  font-family:Outfit,sans-serif;
  font-size:.68rem;
  line-height:1.45;
  color:var(--silver,#9aadc4);
}

.s-col-metrics-vitals{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
  margin-bottom:1rem;
}
.s-col-metrics-vital{
  padding:.7rem .55rem;
  border-radius:10px;
  border:1px solid rgba(154,173,196,.12);
  background:rgba(24,35,56,.75);
  text-align:center;
  opacity:0;
  transform:translateY(10px);
  animation:sMetricsIn .7s cubic-bezier(.22,1,.36,1) forwards;
}
.s-col-metrics-vital:nth-child(1){animation-delay:.45s}
.s-col-metrics-vital:nth-child(2){animation-delay:.57s}
.s-col-metrics-vital:nth-child(3){animation-delay:.69s}
.s-col-metrics-vital-k{
  display:block;
  font-family:Outfit,sans-serif;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted,#6b7f99);
  margin-bottom:.3rem;
}
.s-col-metrics-vital-v{
  display:block;
  font-family:Outfit,sans-serif;
  font-size:.78rem;
  font-weight:600;
  color:var(--cro,#34d399);
}

.s-col-metrics-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-bottom:1rem;
}
.s-col-metrics-badge{
  display:inline-flex;
  align-items:center;
  padding:.35rem .65rem;
  border-radius:999px;
  border:1px solid rgba(200,168,75,.18);
  background:rgba(200,168,75,.07);
  color:var(--gold-l,#e2c97a);
  font-family:Outfit,sans-serif;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(8px);
  animation:sMetricsIn .65s cubic-bezier(.22,1,.36,1) forwards;
}
.s-col-metrics-badge:nth-child(1){animation-delay:.7s}
.s-col-metrics-badge:nth-child(2){animation-delay:.8s}
.s-col-metrics-badge:nth-child(3){animation-delay:.9s}
.s-col-metrics-badge:nth-child(4){animation-delay:1s}

.s-col-metrics-platforms{margin-top:.15rem}
.s-col-metrics-plat-lbl{
  display:block;
  margin-bottom:.55rem;
  font-family:Outfit,sans-serif;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted,#6b7f99);
}
.s-col-metrics-plats{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.s-col-metrics-plats span{
  display:inline-flex;
  padding:.42rem .7rem;
  border-radius:8px;
  border:1px solid rgba(154,173,196,.14);
  background:rgba(24,35,56,.8);
  color:var(--white,#edf0f7);
  font-family:Outfit,sans-serif;
  font-size:.68rem;
  font-weight:500;
  opacity:0;
  transform:translateY(8px);
  animation:sMetricsIn .65s cubic-bezier(.22,1,.36,1) forwards;
}
.s-col-metrics-plats span:nth-child(1){animation-delay:.95s}
.s-col-metrics-plats span:nth-child(2){animation-delay:1.05s}
.s-col-metrics-plats span:nth-child(3){animation-delay:1.15s}
.s-col-metrics-plats span:nth-child(4){animation-delay:1.25s}

.s-col-metrics-statgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.55rem;
  margin-bottom:1rem;
}
.s-col-metrics-stat{
  padding:.85rem .75rem;
  border-radius:10px;
  border:1px solid rgba(154,173,196,.12);
  background:linear-gradient(145deg,rgba(30,42,66,.92),rgba(24,35,56,.88));
  opacity:0;
  transform:translateY(10px);
  animation:sMetricsIn .7s cubic-bezier(.22,1,.36,1) forwards,sMetricsBreath 3.4s ease-in-out 1.4s infinite;
}
.s-col-metrics-stat:nth-child(1){animation-delay:.35s,1.4s}
.s-col-metrics-stat:nth-child(2){animation-delay:.45s,1.55s}
.s-col-metrics-stat:nth-child(3){animation-delay:.55s,1.7s}
.s-col-metrics-stat:nth-child(4){animation-delay:.65s,1.85s}
.s-col-metrics-stat strong{
  display:block;
  font-family:Cormorant,serif;
  font-size:1.35rem;
  font-weight:700;
  color:var(--gold-l,#e2c97a);
  line-height:1.1;
  margin-bottom:.25rem;
}
.s-col-metrics-stat span{
  font-family:Outfit,sans-serif;
  font-size:.65rem;
  color:var(--silver,#9aadc4);
  line-height:1.35;
}

@keyframes sMetricsRing{
  to{--metrics-p:98}
}
@keyframes sMetricsPop{
  from{opacity:0;transform:scale(.82)}
  to{opacity:1;transform:none}
}
@keyframes sMetricsIn{
  to{opacity:1;transform:none}
}
@keyframes sMetricsPulse{
  0%,100%{opacity:.8}
  50%{opacity:1}
}
@keyframes sMetricsDot{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.45)}
  70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
@keyframes sMetricsGlow{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
@keyframes sMetricsBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(200,168,75,0)}
  50%{box-shadow:0 0 18px rgba(200,168,75,.08)}
}

@media (max-width:992px){
  .s-col-metrics{margin-top:1.5rem;max-width:100%;padding-top:1.25rem}
}

@media (prefers-reduced-motion:reduce){
  .s-col-metrics-live,
  .s-col-metrics-live::before,
  .s-col-metrics-ring-fill,
  .s-col-metrics-num,
  .s-col-metrics-vital,
  .s-col-metrics-badge,
  .s-col-metrics-plats span,
  .s-col-metrics-stat,
  .s-col-metrics-score::after{animation:none!important;opacity:1;transform:none}
  .s-col-metrics-ring-fill{--metrics-p:98}
}