/* ============================================================
   MACHVORA motion layer — 2026-10-21
   "De-template" texture pass. Vanilla CSS, no dependencies.
   Inspiration: Anime.js (hero stagger), Motion.dev (scroll
   entrances / easing), Kokonut UI (button & card micro-
   interactions), Bklit UI (spec number motion), React Bits
   (ambient hero background drift).
   Rules: content is visible without JS; every animation is
   disabled under prefers-reduced-motion.
   ============================================================ */

:root {
  --mv-ease: cubic-bezier(.22, 1, .36, 1); /* Motion-style easeOutExpo curve */
  --mv-accent: #ef6d23; /* matches existing .button brand orange */
}

/* ---------- 1. Hero entrance + ambient background ---------- */
.home-hero { position: relative; overflow: hidden; }
.home-hero::before {
  content: ""; position: absolute; inset: -12%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(640px 320px at 12% 18%, rgba(239, 109, 35, .07), transparent 62%),
    radial-gradient(820px 420px at 88% 85%, rgba(23, 32, 41, .055), transparent 62%);
  animation: mv-drift 24s ease-in-out infinite alternate;
}
.home-hero > * { position: relative; z-index: 1; }
@keyframes mv-drift {
  from { transform: translate3d(-1.6%, -1%, 0); }
  to   { transform: translate3d(1.6%, 1.2%, 0); }
}
.hero-copy > * { animation: mv-rise .9s var(--mv-ease) both; }
.hero-copy > *:nth-child(2) { animation-delay: .09s; }
.hero-copy > *:nth-child(3) { animation-delay: .18s; }
.hero-copy > *:nth-child(4) { animation-delay: .27s; }
.hero-machine { animation: mv-rise 1.05s var(--mv-ease) .22s both; }
@keyframes mv-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 2. Scroll reveal (JS adds .mv-pre, observer swaps to .mv-in) ---------- */
.mv-pre { opacity: 0; transform: translateY(16px); }
.mv-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--mv-ease), transform .8s var(--mv-ease);
}

/* ---------- 3. Card & button micro-interactions (Kokonut-style) ---------- */
.product-card, .p0-item {
  transition: transform .45s var(--mv-ease), box-shadow .45s var(--mv-ease);
}
.product-card:hover, .p0-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -18px rgba(10, 15, 25, .30);
}
.product-card .product-visual img, .p0-item img {
  transition: transform .8s var(--mv-ease);
}
.product-card:hover .product-visual img, .p0-item:hover img {
  transform: scale(1.045);
}
.button {
  position: relative; overflow: hidden;
  transition: transform .3s var(--mv-ease), box-shadow .3s var(--mv-ease),
              background-color .3s ease, color .3s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(239, 109, 35, .55); }
.button::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg); transition: left .6s var(--mv-ease); pointer-events: none;
}
.button:hover::after { left: 135%; }
.text-link { transition: color .25s ease; }
.text-link:hover { color: var(--mv-accent); }

/* ---------- 4. Spec hairline that grows in on reveal (Bklit-style) ---------- */
.card-specs dd::after, .spec-list dd::after {
  content: ""; display: block; height: 2px; margin-top: 4px;
  background: var(--mv-accent); opacity: .35;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1s var(--mv-ease) .15s;
}
.mv-in .card-specs dd::after, .mv-in .spec-list dd::after { transform: scaleX(1); }

/* ---------- Reduced motion: everything off, content untouched ---------- */
@media (prefers-reduced-motion: reduce) {
  .home-hero::before, .hero-copy > *, .hero-machine { animation: none !important; }
  .mv-pre { opacity: 1 !important; transform: none !important; }
  .mv-in, .product-card, .p0-item, .button, .text-link,
  .product-card .product-visual img, .p0-item img,
  .card-specs dd::after, .spec-list dd::after { transition: none !important; }
  .card-specs dd::after, .spec-list dd::after { transform: scaleX(1); }
  .button::after { display: none; }
}