/* Compact claim animations — primary section only, keeps 2-col card grids intact */

/* Desktop: claim sits to the RIGHT of the intro copy (fills the horizontal gap) */
@media (min-width:993px){
  .s-why-2col:has(> .s-why-pts):has(.s-claim) > div:first-child{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(280px,400px);
    column-gap:2.5rem;
    row-gap:.55rem;
    align-items:start;
    max-width:none!important;
  }
  .s-why-2col:has(> .s-why-pts):has(.s-claim) > div:first-child > :not(.s-claim){
    grid-column:1;
  }
  .s-why-2col:has(> .s-why-pts):has(.s-claim) > div:first-child > .s-claim{
    grid-column:2;
    grid-row:1 / span 8;
    margin-top:0;
    align-self:center;
    max-width:none;
    width:100%;
  }
}

.s-claim{
  margin-top:1.35rem;
  max-width:420px;
  padding:1rem 1.1rem;
  border-radius:12px;
  border:1px solid rgba(200,168,75,.18);
  background:linear-gradient(145deg,rgba(30,42,66,.95),rgba(15,24,44,.9));
  pointer-events:none;
  user-select:none;
  position:relative;
  overflow:hidden;
}
.s-claim::after{
  content:"";
  position:absolute;
  inset:auto -25% -60% -25%;
  height:75%;
  background:radial-gradient(ellipse at center,rgba(200,168,75,.1),transparent 70%);
  pointer-events:none;
  animation:sClaimGlow 3.2s ease-in-out infinite;
}
.s-claim-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.85rem;
  position:relative;
  z-index:1;
}
.s-claim-eyebrow{
  font-family:Outfit,sans-serif;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted,#6b7f99);
}
.s-claim-live{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.26rem .6rem;
  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:.58rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  animation:sClaimPulse 2.4s ease-in-out infinite;
}
.s-claim-live::before{
  content:"";
  width:.38rem;
  height:.38rem;
  border-radius:50%;
  background:var(--cro,#34d399);
  box-shadow:0 0 0 0 rgba(52,211,153,.45);
  animation:sClaimDot 1.8s ease-out infinite;
}

/* On-page bars */
.s-claim-bars{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  position:relative;
  z-index:1;
}
.s-claim-bar{
  display:grid;
  grid-template-columns:7.2rem 1fr auto;
  align-items:center;
  gap:.55rem;
}
.s-claim-bar-l{
  font-family:Outfit,sans-serif;
  font-size:.68rem;
  color:var(--silver,#9aadc4);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.s-claim-bar-track{
  height:.42rem;
  border-radius:999px;
  background:rgba(154,173,196,.14);
  overflow:hidden;
}
.s-claim-bar-fill{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--gold,#c8a84b),var(--gold-l,#e2c97a));
  animation:sClaimBarFill 1.4s cubic-bezier(.22,1,.36,1) forwards;
}
.s-claim-bar:nth-child(1) .s-claim-bar-fill{animation-delay:.15s}
.s-claim-bar:nth-child(2) .s-claim-bar-fill{animation-delay:.35s}
.s-claim-bar:nth-child(3) .s-claim-bar-fill{animation-delay:.55s}
.s-claim-bar-v{
  font-family:Outfit,sans-serif;
  font-size:.62rem;
  font-weight:600;
  color:var(--gold-l,#e2c97a);
  min-width:2.6rem;
  text-align:right;
}

/* Off-page / PPC hero */
.s-claim-hero{
  display:flex;
  align-items:center;
  gap:1rem;
  position:relative;
  z-index:1;
}
.s-claim-big{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  min-width:6.5rem;
}
.s-claim-big-n{
  font-family:Cormorant,serif;
  font-size:2.2rem;
  font-weight:700;
  line-height:1;
  color:var(--gold-l,#e2c97a);
  animation:sClaimPop .7s cubic-bezier(.22,1,.36,1) both;
}
.s-claim-big-u{
  font-family:Outfit,sans-serif;
  font-size:.62rem;
  color:var(--silver,#9aadc4);
  letter-spacing:.02em;
}
.s-claim-side{
  display:flex;
  flex-direction:column;
  gap:.4rem;
  min-width:0;
  flex:1;
}
.s-claim-chip{
  display:flex;
  align-items:baseline;
  gap:.45rem;
  padding:.4rem .55rem;
  border-radius:8px;
  border:1px solid rgba(154,173,196,.12);
  background:rgba(24,35,56,.72);
  opacity:0;
  transform:translateX(8px);
  animation:sClaimSlide .55s cubic-bezier(.22,1,.36,1) forwards;
}
.s-claim-chip:nth-child(1){animation-delay:.25s}
.s-claim-chip:nth-child(2){animation-delay:.4s}
.s-claim-chip:nth-child(3){animation-delay:.55s}
.s-claim-chip strong{
  font-family:Outfit,sans-serif;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold-l,#e2c97a);
}
.s-claim-chip span{
  font-family:Outfit,sans-serif;
  font-size:.62rem;
  color:var(--silver,#9aadc4);
}

/* Content tiles */
.s-claim-tiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem;
  position:relative;
  z-index:1;
}
.s-claim-tile{
  padding:.65rem .7rem;
  border-radius:8px;
  border:1px solid rgba(154,173,196,.12);
  background:rgba(24,35,56,.72);
  opacity:0;
  transform:translateY(8px);
  animation:sClaimSlide .55s cubic-bezier(.22,1,.36,1) forwards;
}
.s-claim-tile:nth-child(1){animation-delay:.15s}
.s-claim-tile:nth-child(2){animation-delay:.25s}
.s-claim-tile:nth-child(3){animation-delay:.35s}
.s-claim-tile:nth-child(4){animation-delay:.45s}
.s-claim-tile strong{
  display:block;
  font-family:Cormorant,serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--gold-l,#e2c97a);
  line-height:1.1;
  margin-bottom:.15rem;
}
.s-claim-tile span{
  font-family:Outfit,sans-serif;
  font-size:.62rem;
  color:var(--silver,#9aadc4);
  line-height:1.35;
}

/* Ranking climb */
.s-claim-climb{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:.45rem .65rem;
  position:relative;
  z-index:1;
}
.s-claim-climb-from{
  font-family:Cormorant,serif;
  font-size:1.5rem;
  font-weight:700;
  color:var(--muted,#6b7f99);
  animation:sClaimFadeOut 2.8s ease-in-out infinite;
}
.s-claim-climb-arrow{
  color:var(--gold,#c8a84b);
  font-size:1rem;
  animation:sClaimPulse 1.6s ease-in-out infinite;
}
.s-claim-climb-to{
  font-family:Cormorant,serif;
  font-size:2.1rem;
  font-weight:700;
  color:var(--gold-l,#e2c97a);
  animation:sClaimPop .7s cubic-bezier(.22,1,.36,1) .2s both;
}
.s-claim-climb-note{
  flex-basis:100%;
  font-family:Outfit,sans-serif;
  font-size:.65rem;
  color:var(--silver,#9aadc4);
}

/* Off-page link counter via CSS content animation */
.s-claim--offpage .s-claim-big-n--links{
  animation:sClaimCount 3.2s steps(12,end) infinite;
}
.s-claim--offpage .s-claim-big-n--links::after{
  content:"";
}

@keyframes sClaimBarFill{
  from{width:0}
  to{width:var(--w,100%)}
}
@keyframes sClaimPop{
  from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:none}
}
@keyframes sClaimSlide{
  to{opacity:1;transform:none}
}
@keyframes sClaimPulse{
  0%,100%{opacity:.75}
  50%{opacity:1}
}
@keyframes sClaimDot{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.45)}
  70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}
@keyframes sClaimGlow{
  0%,100%{opacity:.5}
  50%{opacity:1}
}
@keyframes sClaimFadeOut{
  0%,40%{opacity:.9}
  70%,100%{opacity:.35}
}
@keyframes sClaimCount{
  0%{opacity:.55}
  8%{opacity:1}
  /* number swaps via stepped content on a dedicated element */
}

/* Simulated rising link count */
.s-claim--offpage .s-claim-big-n--links{
  font-variant-numeric:tabular-nums;
}
.s-claim--offpage .s-claim-big-n--links::before{
  content:"8";
  animation:sClaimLinkNum 3.6s steps(1,end) infinite;
}
.s-claim--offpage .s-claim-big-n--links{
  font-size:0;
}
.s-claim--offpage .s-claim-big-n--links::before{
  font-size:2.2rem;
  font-family:Cormorant,serif;
  font-weight:700;
  color:var(--gold-l,#e2c97a);
}
@keyframes sClaimLinkNum{
  0%,12%{content:"4"}
  12.01%,25%{content:"6"}
  25.01%,40%{content:"8"}
  40.01%,58%{content:"10"}
  58.01%,78%{content:"12"}
  78.01%,100%{content:"12+"}
}

@media (max-width:992px){
  .s-claim{max-width:100%;margin-top:1.25rem}
  .s-why-2col:has(.s-claim) > div:first-child{
    display:flex;
    flex-direction:column;
  }
}

@media (prefers-reduced-motion:reduce){
  .s-claim::after,
  .s-claim-live,
  .s-claim-live::before,
  .s-claim-bar-fill,
  .s-claim-big-n,
  .s-claim-chip,
  .s-claim-tile,
  .s-claim-climb-from,
  .s-claim-climb-arrow,
  .s-claim-climb-to,
  .s-claim--offpage .s-claim-big-n--links::before{animation:none!important}
  .s-claim-bar-fill{width:var(--w,100%)}
  .s-claim-chip,.s-claim-tile,.s-claim-big-n,.s-claim-climb-to{opacity:1;transform:none}
  .s-claim--offpage .s-claim-big-n--links::before{content:"12+";font-size:2.2rem}
}
