/* ============================================================
   THE SCOTCH TALES — animations.css
   Page-load reveals, hero animations, micro-interactions
   ============================================================ */

/* ─── Hero Entrance ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes pulse-amber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,137,42,0); }
  50%       { box-shadow: 0 0 0 8px rgba(200,137,42,0.1); }
}

/* ─── Hero Staggered Entrance ────────────────────────────────── */
.hero__eyebrow  { animation: fadeInUp 0.7s ease 0.2s both; }
.hero__title    { animation: fadeInUp 0.8s ease 0.45s both; }
.hero__subtitle { animation: fadeInUp 0.8s ease 0.65s both; }
.hero__actions  { animation: fadeInUp 0.8s ease 0.85s both; }
.hero__scroll   { animation: fadeIn 1s ease 1.4s both; }

/* ─── Page Hero Entrance ─────────────────────────────────────── */
.page-hero__eyebrow { animation: fadeIn 0.5s ease 0.1s both; }
.page-hero__title   { animation: fadeInUp 0.7s ease 0.2s both; }
.page-hero__sub     { animation: fadeInUp 0.7s ease 0.35s both; }

/* ─── Nav Logo on Load ───────────────────────────────────────── */
.nav__logo    { animation: fadeIn 0.6s ease 0.1s both; }
.nav__links   { animation: fadeIn 0.6s ease 0.3s both; }

/* ─── Amber accent line on cards ─────────────────────────────── */
.service-card:hover::before {
  animation: lineGrow 0.35s ease forwards;
}

/* ─── Feature card icon subtle float ────────────────────────── */
@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
.feature-card:hover .feature-card__icon {
  animation: floatIcon 1.5s ease-in-out infinite;
  display: inline-block;
}

/* ─── Review card score pulse ────────────────────────────────── */
.review-card:hover .review-card__score {
  animation: pulse-amber 1.5s ease-in-out infinite;
  border-radius: 50%;
}

/* ─── Grain texture subtle movement ─────────────────────────── */
@keyframes grainShift {
  0%, 100% { transform: translate(0, 0); }
  10%       { transform: translate(-2%, -3%); }
  20%       { transform: translate(3%, 2%); }
  30%       { transform: translate(-1%, 3%); }
  40%       { transform: translate(2%, -2%); }
  50%       { transform: translate(-3%, 1%); }
  60%       { transform: translate(1%, -3%); }
  70%       { transform: translate(-2%, 2%); }
  80%       { transform: translate(3%, -1%); }
  90%       { transform: translate(-1%, 2%); }
}
.hero__grain {
  animation: grainShift 8s steps(1) infinite;
}

/* ─── Mobile menu slide-in ───────────────────────────────────── */
@keyframes menuFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nav__mobile.open {
  animation: menuFadeIn 0.2s ease forwards;
}
.nav__mobile-link {
  animation: fadeInUp 0.4s ease both;
}
.nav__mobile-link:nth-child(1) { animation-delay: 0.05s; }
.nav__mobile-link:nth-child(2) { animation-delay: 0.10s; }
.nav__mobile-link:nth-child(3) { animation-delay: 0.15s; }
.nav__mobile-link:nth-child(4) { animation-delay: 0.20s; }
.nav__mobile-link:nth-child(5) { animation-delay: 0.25s; }
.nav__mobile-link:nth-child(6) { animation-delay: 0.30s; }

/* ─── Step number entrance ───────────────────────────────────── */
@keyframes countUp {
  from { opacity: 0.1; transform: scale(0.8); }
  to   { opacity: 0.35; transform: scale(1); }
}
.step.visible .step__num {
  animation: countUp 0.5s ease forwards;
}

/* ─── FAQ answer reveal ──────────────────────────────────────── */
.faq__item.open .faq__answer-inner {
  animation: fadeIn 0.2s ease;
}

/* ─── CTA banner elements ────────────────────────────────────── */
.cta-banner__title  { animation: fadeInUp 0.7s ease both; }
.cta-banner__sub    { animation: fadeInUp 0.7s ease 0.1s both; }

/* ─── Reduced motion preference ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}