/* ====== PRICE LINE ANIMATION ====== */
.price-line {
  --t-fade: .3s;
  --t-strike: .2s;
  --delay-strike: .4s;
  --delay-to: .6s;
  --delay-new: .8s;
  --stagger-offset: 0s;

  align-items: center;
  gap: 0.35rem;
  position: relative;
}

/* Stagger delays for sequential animations */
.price-line:nth-child(1) {
  --stagger-offset: 0s;
}

.price-line:nth-child(2) {
  --stagger-offset: 1.1s;
}

.price-line:nth-child(3) {
  --stagger-offset: 2.2s;
}

/* Start hidden until .is-visible arrives (from IntersectionObserver) */
.price-line .lead,
.price-line .old,
.price-line .to,
.price-line .new {
  opacity: 0;
}

/* Group "Studios from $345,900" fades first */
.price-line.is-visible .lead,
.price-line.is-visible .old {
  animation: priceLinesFadeIn var(--t-fade) ease forwards;
}

.price-line.is-visible .lead {
  animation-delay: calc(0s + var(--stagger-offset));
}

.price-line.is-visible .old {
  animation-delay: calc(0.15s + var(--stagger-offset));
}

/* Animated strikethrough over old price */
.price-line .old-wrap {
  position: relative;
  display: inline-block;
}

.price-line .strike {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.12em;
  transform: scaleX(0);
  transform-origin: left center;
  background: #CE1616;
  border-radius: 2px;
}

.price-line.is-visible .strike {
  animation: priceLinesStrikeDraw var(--t-strike) ease forwards calc(var(--delay-strike) + var(--stagger-offset));
}

/* "to" fades after the strike starts */
.price-line.is-visible .to {
  animation: priceLinesFadeIn var(--t-fade) ease forwards calc(var(--delay-to) + var(--stagger-offset));
}

/* New price fades last */
.price-line.is-visible .new {
  animation: priceLinesRiseIn var(--t-fade) ease forwards calc(var(--delay-new) + var(--stagger-offset));
}

/* Keyframes */
@keyframes priceLinesFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes priceLinesRiseIn {
  from {
    opacity: 0;
    transform: translateY(0.35em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes priceLinesStrikeDraw {
  to {
    transform: scaleX(1);
  }
}

/* CTA button appears after all price animations complete */
.price-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: priceLinesRiseIn 0.5s ease forwards;
  animation-delay: 3.3s; /* After all 3 price lines complete (2.2s + 1.1s) */
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .price-line .lead,
  .price-line .old,
  .price-line .to,
  .price-line .new {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .price-line .strike {
    transform: scaleX(1);
  }
  .price-cta {
    opacity: 1;
    transform: none;
  }
}