/* ============================================================
   homepage-v3.css  —  homepage-specific polish + micro-motion
   Loads after homepage-v2.css and site-motion.css.
   Additive; reuses the site-motion primitives. No hover-lift
   (brand rule) — cards respond with border/shadow + arrow motion.
   ============================================================ */

:root {
  --sm-accent: #B8443A;              /* align motion accent to homepage palette */
}

/* ---------- Hero: soft drifting background blobs ---------- */
.hero-bg { position: relative; overflow: hidden; }
.hero-bg > .hero { position: relative; z-index: 1; }
.hero-blob-a {
  width: 460px; height: 460px;
  top: -140px; right: -80px;
  background: radial-gradient(circle at 30% 30%, rgba(212, 149, 106, .40), rgba(212, 149, 106, 0) 70%);
  animation-duration: 20s;
}
.hero-blob-b {
  width: 380px; height: 380px;
  bottom: -160px; left: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(107, 143, 94, .30), rgba(107, 143, 94, 0) 70%);
  animation-duration: 24s;
  animation-direction: reverse;
}

/* Hero image: gentle continuous float on top of the scroll zoom. */
.hero-image-wrapper { animation: hp-hero-float 9s ease-in-out infinite; }
@keyframes hp-hero-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Primary buttons: shine sweep on hover ---------- */
.btn-primary, .nav-links li:last-child a {
  position: relative;
  overflow: hidden;
}
.btn-primary::after, .nav-links li:last-child a::after {
  content: '';
  position: absolute;
  top: 0; left: -130%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn-primary:hover::after, .nav-links li:last-child a:hover::after {
  animation: hp-shine .8s cubic-bezier(.22, .61, .36, 1);
}
@keyframes hp-shine { to { left: 135%; } }
.nav-links li:last-child a { transition: background .2s, transform .2s; }
.nav-links li:last-child a:hover { transform: translateY(-1px); }

/* ---------- Problem cards: icon warms + pops on hover ---------- */
.problem-card { transition: background .25s ease; }
.problem-card .problem-icon {
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1), background .25s ease;
}
.problem-card:hover { background: #FDFBF9; }
.problem-card:hover .problem-icon {
  transform: scale(1.12) rotate(-6deg);
  background: var(--warm-soft, #F5E8DC);
}

/* ---------- Benefit cards: soft accent border on hover ---------- */
.benefit-card {
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.benefit-card:hover {
  border-color: rgba(184, 68, 58, .28);
  box-shadow: 0 10px 30px rgba(184, 68, 58, .07);
}

/* ---------- Platform cards: no lift; border + shadow + arrow slide ---------- */
.platform-card {
  transition: box-shadow .25s var(--sm-ease), border-color .25s var(--sm-ease);
}
.platform-card:hover {
  transform: none;                       /* override v2 translateY lift (brand: no lift) */
  border-color: rgba(184, 68, 58, .30);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .07);
}
.platform-card .card-number {
  transition: transform .28s cubic-bezier(.34, 1.56, .64, 1);
  transform-origin: left center;
}
.platform-card:hover .card-number { transform: scale(1.08); }
.platform-card a {
  display: inline-flex;
  align-items: center;
  transition: transform .22s cubic-bezier(.22, .61, .36, 1), color .2s ease;
}
.platform-card:hover a { transform: translateX(4px); }

/* ---------- Comparison table: row highlight on hover ---------- */
.comparison-table tbody tr {
  transition: background .18s ease;
}
.comparison-table tbody tr:hover {
  background: var(--surface-warm, #F5F1EB);
}

/* ---------- Change items: number/label tick on reveal ---------- */
.change-time { transition: transform .25s ease; }
.change-item:hover .change-time { transform: translateY(-2px); }

/* ---------- FAQ: smoother open marker ---------- */
.faq-list .faq-item .faq-question { transition: color .2s ease; }
.faq-list .faq-item:hover .faq-question { color: var(--accent, #B8443A); }

/* ---------- Secondary buttons ---------- */
.btn-secondary { transition: border-color .2s ease, color .2s ease, transform .18s ease; }
.btn-secondary:hover { transform: translateY(-1px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-blob-a, .hero-blob-b, .hero-image-wrapper { animation: none !important; }
  .btn-primary:hover::after, .nav-links li:last-child a:hover::after { animation: none; }
  .problem-card:hover .problem-icon,
  .platform-card:hover .card-number,
  .platform-card:hover a,
  .nav-links li:last-child a:hover,
  .btn-secondary:hover,
  .change-item:hover .change-time { transform: none; }
}