/* ============================================================
   UnicornHunt Marketing — Motion Layer
   Adds reveal animations, hover lifts, and counters using the
   existing palette tokens defined in styles.css. Opt-in via
   data-* attributes so it can be applied page-by-page.
   ============================================================ */

/* ---------- Reveal on scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger children — set delay via inline --stagger or default ramp */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 400ms; }
[data-reveal-stagger].is-visible > *:nth-child(7) { transition-delay: 480ms; }
[data-reveal-stagger].is-visible > *:nth-child(8) { transition-delay: 560ms; }

/* ---------- Hero canvas backdrop ---------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  /* fade canvas to bg at edges so it doesn't clip harshly */
  mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 55%, transparent 100%);
}
.hero .container { position: relative; z-index: 1; }

/* Soft glow under hero headline */
.hero h1 {
  position: relative;
}
.hero .accent {
  background: linear-gradient(90deg,
    var(--primary) 0%,
    var(--accent-cyan) 50%,
    var(--primary) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-shimmer 8s ease-in-out infinite;
}
@keyframes hero-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- Stat counters ---------- */
.stat .num,
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Hover lift for feature cards ---------- */
.feature {
  transition:
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 320ms ease,
    box-shadow 320ms ease,
    background-color 320ms ease;
  will-change: transform;
}
.feature:hover {
  transform: translate3d(0, -4px, 0);
  border-color: hsl(226 100% 65% / 0.45);
  box-shadow:
    0 12px 32px -12px hsl(230 80% 4% / 0.6),
    0 0 0 1px hsl(226 100% 65% / 0.35),
    0 0 28px -8px hsl(226 100% 65% / 0.25);
}
.feature--cyan:hover    { border-color: hsl(190 95% 60% / 0.5); box-shadow: 0 12px 32px -12px hsl(230 80% 4% / 0.6), 0 0 0 1px hsl(190 95% 60% / 0.4), 0 0 28px -8px hsl(190 95% 60% / 0.28); }
.feature--violet:hover  { border-color: hsl(252 80% 70% / 0.5); box-shadow: 0 12px 32px -12px hsl(230 80% 4% / 0.6), 0 0 0 1px hsl(252 80% 70% / 0.4), 0 0 28px -8px hsl(252 80% 70% / 0.28); }
.feature--emerald:hover { border-color: hsl(153 80% 55% / 0.5); box-shadow: 0 12px 32px -12px hsl(230 80% 4% / 0.6), 0 0 0 1px hsl(153 80% 55% / 0.4), 0 0 28px -8px hsl(153 80% 55% / 0.28); }
.feature--amber:hover   { border-color: hsl(42 100% 60% / 0.5); box-shadow: 0 12px 32px -12px hsl(230 80% 4% / 0.6), 0 0 0 1px hsl(42 100% 60% / 0.4), 0 0 28px -8px hsl(42 100% 60% / 0.28); }
.feature--pink:hover    { border-color: hsl(320 75% 70% / 0.5); box-shadow: 0 12px 32px -12px hsl(230 80% 4% / 0.6), 0 0 0 1px hsl(320 75% 70% / 0.4), 0 0 28px -8px hsl(320 75% 70% / 0.28); }

.feature .icon {
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), color 320ms ease;
}
.feature:hover .icon {
  transform: scale(1.08) translateY(-2px);
}

/* Subtle underline-draw on "Learn more →" */
.feature .more {
  position: relative;
  display: inline-block;
}
.feature .more::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.0;
  transform: scaleX(0.0);
  transform-origin: left center;
  transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 360ms ease;
}
.feature:hover .more::after {
  transform: scaleX(1);
  opacity: 0.7;
}

/* ---------- Testimonials ---------- */
.testimonial {
  transition:
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 320ms ease,
    box-shadow 320ms ease;
}
.testimonial:hover {
  transform: translate3d(0, -3px, 0);
  border-color: hsl(226 100% 65% / 0.35);
  box-shadow:
    0 16px 36px -16px hsl(230 80% 4% / 0.7),
    0 0 0 1px hsl(226 100% 65% / 0.25);
}

/* ---------- CTA banner glow ---------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 20% 30%, hsl(226 100% 65% / 0.22), transparent 45%),
    radial-gradient(circle at 80% 70%, hsl(190 95% 60% / 0.18), transparent 50%),
    radial-gradient(circle at 50% 100%, hsl(252 80% 70% / 0.16), transparent 55%);
  z-index: -1;
  animation: cta-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cta-drift {
  0%   { transform: translate3d(0, 0, 0)   scale(1); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.04); }
}

/* ---------- Nav link underline-draw (site header) ---------- */
.site-nav a {
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: var(--primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.site-nav a:hover::after,
.site-nav a.is-active::after {
  transform: scaleX(1);
}

/* ---------- Primary button shimmer on hover ---------- */
.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -120%;
  width: 60%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    hsl(0 0% 100% / 0.18) 50%,
    transparent 100%);
  transform: skewX(-18deg);
  transition: left 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.btn-primary:hover::before {
  left: 130%;
}

/* ---------- Stat row entrance lift ---------- */
.stat-row [data-count-target] {
  transition: color 300ms ease;
}

/* ============================================================
   Section-level motion (added round 2)
   ============================================================ */

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg,
    var(--primary) 0%,
    var(--accent-cyan) 50%,
    var(--primary) 100%);
  z-index: 9999;
  transition: width 80ms linear;
  pointer-events: none;
  box-shadow: 0 0 12px hsl(226 100% 65% / 0.6);
}

/* ---------- Sticky shrink header ---------- */
#site-header {
  transition: backdrop-filter 240ms ease, background-color 240ms ease, border-color 240ms ease, padding 240ms ease;
}
#site-header.is-scrolled {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background-color: hsl(230 65% 8% / 0.78);
  border-bottom: 1px solid hsl(230 30% 22% / 0.7);
}

/* ---------- Icon stroke-draw on reveal ---------- */
.feature .icon svg {
  overflow: visible;
}
.feature .icon svg path,
.feature .icon svg polyline,
.feature .icon svg polygon,
.feature .icon svg line,
.feature .icon svg circle,
.feature .icon svg rect {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1);
  fill: none;
}
[data-reveal-stagger].is-visible .feature .icon svg path,
[data-reveal-stagger].is-visible .feature .icon svg polyline,
[data-reveal-stagger].is-visible .feature .icon svg polygon,
[data-reveal-stagger].is-visible .feature .icon svg line,
[data-reveal-stagger].is-visible .feature .icon svg circle,
[data-reveal-stagger].is-visible .feature .icon svg rect {
  stroke-dashoffset: 0;
}
[data-reveal-stagger].is-visible .feature:nth-child(1) .icon svg * { transition-delay: 200ms; }
[data-reveal-stagger].is-visible .feature:nth-child(2) .icon svg * { transition-delay: 280ms; }
[data-reveal-stagger].is-visible .feature:nth-child(3) .icon svg * { transition-delay: 360ms; }
[data-reveal-stagger].is-visible .feature:nth-child(4) .icon svg * { transition-delay: 440ms; }
[data-reveal-stagger].is-visible .feature:nth-child(5) .icon svg * { transition-delay: 520ms; }
[data-reveal-stagger].is-visible .feature:nth-child(6) .icon svg * { transition-delay: 600ms; }

/* ---------- Section 2: subtle scrolling grid backdrop ---------- */
.section.has-grid-bg {
  position: relative;
  isolation: isolate;
}
.section.has-grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(hsl(226 100% 65% / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, hsl(226 100% 65% / 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 50%, #000 30%, transparent 90%);
  animation: grid-drift 60s linear infinite;
  pointer-events: none;
}
@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 64px 64px, 64px 64px; }
}

/* ---------- Icon container pulse for capability cards ---------- */
.feature .icon {
  position: relative;
}
.feature--cyan .icon::after,
.feature--pink .icon::after,
.feature--amber .icon::after,
.feature--emerald .icon::after,
.feature--violet .icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
}
.feature:hover .icon::after {
  animation: signal-pulse 1.6s ease-out infinite;
}
@keyframes signal-pulse {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(0.6); }
  70%  { opacity: 0;    transform: translate(-50%, -50%) scale(3.6); }
  100% { opacity: 0;    transform: translate(-50%, -50%) scale(3.6); }
}

/* ---------- Testimonials: tilt-in + decorative quote ---------- */
[data-reveal-stagger].testimonial-grid > .testimonial {
  opacity: 0;
  transform: translate3d(0, 16px, 0) rotate(-1.2deg);
  transition:
    opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal-stagger].testimonial-grid.is-visible > .testimonial {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(0deg);
}
.testimonial {
  position: relative;
  isolation: isolate;
}
.testimonial::before {
  content: "\201C"; /* curly quote */
  position: absolute;
  top: -12px; left: 14px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 96px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.12;
  pointer-events: none;
  z-index: -1;
  font-weight: 700;
}
.testimonial .avatar {
  position: relative;
}
.testimonial .avatar::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid hsl(226 100% 65% / 0.4);
  animation: avatar-pulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes avatar-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.45; }
  50%      { transform: scale(1.12); opacity: 0;    }
}

/* ---------- Star rating left-to-right fill ---------- */
.testimonial .stars {
  display: inline-flex;
  gap: 2px;
  letter-spacing: 0;
}
.testimonial .stars [data-star] {
  opacity: 0;
  transform: scale(0.6);
  color: var(--accent-amber);
  transition: opacity 280ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-reveal-stagger].testimonial-grid.is-visible .testimonial [data-star] {
  opacity: 1;
  transform: scale(1);
}
[data-reveal-stagger].testimonial-grid.is-visible .testimonial [data-star="1"] { transition-delay: 220ms; }
[data-reveal-stagger].testimonial-grid.is-visible .testimonial [data-star="2"] { transition-delay: 280ms; }
[data-reveal-stagger].testimonial-grid.is-visible .testimonial [data-star="3"] { transition-delay: 340ms; }
[data-reveal-stagger].testimonial-grid.is-visible .testimonial [data-star="4"] { transition-delay: 400ms; }
[data-reveal-stagger].testimonial-grid.is-visible .testimonial [data-star="5"] { transition-delay: 460ms; }

/* ---------- Footer reveal ---------- */
#site-footer {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 600ms ease, transform 600ms ease;
}
#site-footer.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ---------- Respect prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero .accent { animation: none; background: var(--primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .cta-banner::before { animation: none; }
  .btn-primary::before { display: none; }
  .feature:hover, .testimonial:hover { transform: none; }
  .hero-canvas { display: none; }
  .feature .icon svg * { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; transition: none !important; }
  .section.has-grid-bg::before { animation: none; }
  .testimonial .avatar::after { animation: none; opacity: 0; }
  .testimonial .stars [data-star] { opacity: 1; transform: none; }
  [data-reveal-stagger].testimonial-grid > .testimonial { opacity: 1; transform: none; }
  #site-footer { opacity: 1; transform: none; }
  .scroll-progress { display: none; }
}