/* ── v8 Enhancement Layer ─────────────────────────────────────
   Loads AFTER v7-styles.css. Hero is untouched.
   Adds typography, card effects, staggers, and polish.
   ──────────────────────────────────────────────────────────── */

/* ── Typography upgrade ─────────────────────────────────── */
:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Hero Fluid Waves & Parallax ────────────────────────── */
#hero-waves {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hero-container {
  position: relative;
  z-index: 2;
  perspective: 1200px;
}

.hero-content {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hero-logo-container {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  transform-style: preserve-3d;
}

#logo-wrapper {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  transform-style: preserve-3d;
}

@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.05); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.03); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.hero-floating-logo {
  filter: drop-shadow(0 28px 52px rgba(35, 38, 34, 0.1)) drop-shadow(0 6px 18px rgba(122, 181, 65, 0.08));
  animation: heartbeat 3.5s ease-in-out infinite;
  will-change: transform;
}

/* ── Scroll progress bar ────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--hx-green), #a8e063);
  box-shadow: 0 0 8px rgba(122, 181, 65, 0.25);
  transition: width 0.08s linear;
}

/* ── Enhanced card effects ──────────────────────────────── */
.product-card {
  backdrop-filter: blur(8px);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.product-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.07), 0 0 0 1px rgba(122, 181, 65, 0.08);
}

.product-card:hover .product-icon {
  transform: scale(1.06) translateY(-3px);
  box-shadow: 0 14px 28px rgba(122, 181, 65, 0.12);
}

/* ── Solution paths glow on hover ───────────────────────── */
.solution-paths article {
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.solution-paths article:hover {
  transform: translateY(-3px);
  border-color: rgba(122, 181, 65, 0.2);
  box-shadow: 0 18px 40px rgba(35, 38, 34, 0.07);
}

/* ── Enhanced tool panels ───────────────────────────────── */
.tool-panel:hover {
  border-color: rgba(122, 181, 65, 0.22);
  box-shadow: 0 28px 60px rgba(35, 38, 34, 0.1), 0 0 0 1px rgba(122, 181, 65, 0.06);
}

/* ── Implementation step hover ──────────────────────────── */
.implementation-step {
  transition: background 0.35s var(--ease);
}

.implementation-step:hover {
  background: rgba(122, 181, 65, 0.03);
}

/* ── Resource items ─────────────────────────────────────── */
.resource-item:hover {
  box-shadow: 0 18px 40px rgba(35, 38, 34, 0.06), 0 0 0 1px rgba(122, 181, 65, 0.1);
}

/* ── Stagger animation for reveal ───────────────────────── */
.reveal-ready .fade-up.stagger-1 { transition-delay: 0.08s; }
.reveal-ready .fade-up.stagger-2 { transition-delay: 0.16s; }
.reveal-ready .fade-up.stagger-3 { transition-delay: 0.24s; }
.reveal-ready .fade-up.stagger-4 { transition-delay: 0.32s; }
.reveal-ready .fade-up.stagger-5 { transition-delay: 0.40s; }
.reveal-ready .fade-up.stagger-6 { transition-delay: 0.48s; }

/* ── About section subtle glow ──────────────────────────── */
.about {
  position: relative;
  overflow: hidden;
}

.about::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 200px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(122, 181, 65, 0.05), transparent 70%);
  filter: blur(60px);
  pointer-events: none;
}

/* ── Footer glow accent ─────────────────────────────────── */
.hx-site-footer {
  position: relative;
  overflow: hidden;
}

.hx-site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30%;
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(122, 181, 65, 0.08), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}