/* Refined motion for the Partow Detailing experience */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mark-in {
  from { opacity: 0; transform: translateX(28px) scale(.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes soft-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(44,167,92,.15); }
  50% { box-shadow: 0 0 0 8px rgba(44,167,92,.04); }
}

.site-header {
  animation: fade-up .65s cubic-bezier(.22,1,.36,1) both;
}

.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .intro,
.hero-actions,
.proof-row {
  animation: fade-up .75s cubic-bezier(.22,1,.36,1) both;
}

.hero-copy h1 { animation-delay: 90ms; }
.hero-copy .intro { animation-delay: 170ms; }
.hero-actions { animation-delay: 240ms; }
.proof-row { animation-delay: 310ms; }
.hero-mark { animation: mark-in .9s 140ms cubic-bezier(.22,1,.36,1) both; }
.availability span { animation: soft-pulse 2.1s ease-in-out infinite; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.22,1,.36,1),
              transform .65s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.package-card {
  overflow: hidden;
}

.package-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(242,207,118,.08) 50%, transparent 75%);
  transform: translateX(-110%);
  transition: transform .7s ease;
  pointer-events: none;
}

.package-card:hover::after { transform: translateX(110%); }
.package-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.3); }

.button,
.nav-cta,
.social {
  transition: transform .22s ease, filter .22s ease, color .22s ease;
}

.button:hover,
.nav-cta:hover,
.social:hover { transform: translateY(-2px); }
.social:hover { color: #fff; }
.social svg { transition: transform .28s cubic-bezier(.22,1,.36,1); }
.social:hover svg { transform: rotate(-7deg) scale(1.1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
}