/* ── Animations & Interactions ── */

/* Button hover states */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.15);
  transition: left 0.3s ease;
  z-index: -1;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(182, 96, 40, 0.25);
}

.btn-outline:hover {
  transform: translateY(-2px);
  background: rgba(253, 254, 251, 0.1);
}

/* Deal cards — stagger in on scroll */
.deal-card {
  background: #fff;
  padding: 1.25rem;
  border-radius: 6px;
  border-left: 3px solid var(--orange);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}

.deal-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

.deal-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(39, 43, 40, 0.12);
  border-left-color: #9a4f20;
}

.deal-spread {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.6rem;
  background: rgba(182, 96, 40, 0.08);
  border-radius: 3px;
  margin-left: 0.5rem;
}

/* Stat cards — counter animation */
.stat-item {
  opacity: 0;
  transform: scale(0.95);
}

.stat-item.in-view {
  animation: statScaleIn 0.6s ease-out forwards;
}

@keyframes statScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.stat-number {
  display: block;
  transition: transform 0.3s ease;
}

.stat-item:hover .stat-number {
  transform: scale(1.1);
}

/* Hero fade-in animation */
.hero-inner {
  animation: heroFadeIn 0.8s ease-out forwards;
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-eyebrow {
  animation: heroFadeIn 0.8s ease-out 0.2s forwards;
  opacity: 0;
}

.hero h1 {
  animation: heroFadeIn 0.8s ease-out 0.3s forwards;
  opacity: 0;
}

.hero > .container > .hero-inner > p:first-of-type {
  animation: heroFadeIn 0.8s ease-out 0.4s forwards;
  opacity: 0;
}

.hero-cta {
  animation: heroFadeIn 0.8s ease-out 0.5s forwards;
  opacity: 0;
}

/* Hero scroll-triggered fade (subtle parallax) */
.hero {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Card stagger effect */
.cards-grid > .card {
  opacity: 0;
  animation: cardFadeIn 0.6s ease-out forwards;
}

.cards-grid > .card:nth-child(1) { animation-delay: 0.1s; }
.cards-grid > .card:nth-child(2) { animation-delay: 0.2s; }
.cards-grid > .card:nth-child(3) { animation-delay: 0.3s; }

@keyframes cardFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 32px rgba(39, 43, 40, 0.15);
}

/* Proof stat cards */
.proof-stat-card {
  opacity: 0;
  animation: proofStatFadeIn 0.6s ease-out forwards;
}

.proof-stat-card:nth-child(1) { animation-delay: 0.1s; }
.proof-stat-card:nth-child(2) { animation-delay: 0.2s; }
.proof-stat-card:nth-child(3) { animation-delay: 0.3s; }
.proof-stat-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes proofStatFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Smooth scroll behavior for internal anchors */
html {
  scroll-behavior: smooth;
}

/* Section headers slide in from left */
.section-header {
  opacity: 0;
  animation: slideInLeft 0.8s ease-out forwards;
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Link hover underline animation */
a:not(.btn) {
  position: relative;
  text-decoration: none;
}

a:not(.btn)::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--orange);
  transition: width 0.3s ease;
}

a:not(.btn):hover::after {
  width: 100%;
}