/* =========================================================================
   MeshMerchant — PREMIUM polish layer (additive)
   Loaded AFTER styles.css / components.css / animations.css so it refines
   the existing system without rewriting it. Brand stays indigo→violet
   (--brand-blue → --brand-purple). Light theme. Transform/opacity only.

   Pairs with js/premium.js (Lenis smooth scroll, reveal-on-scroll, count-up,
   hero parallax, magnetic CTAs). Everything degrades gracefully:
   - No JS  → .reveal content is fully visible (see :where below).
   - prefers-reduced-motion → all premium motion is neutralised.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SCROLL PROGRESS BAR (refine the existing .scroll-progress)
   The bar markup + JS already exist; here we make it a richer, thinner,
   premium gradient with a soft glow.
   ------------------------------------------------------------------------- */
.scroll-progress {
  height: 3px;
  background: linear-gradient(90deg, #129ed9 0%, #6e8cf0 45%, #a474eb 100%);
  box-shadow: 0 0 12px rgba(124, 92, 235, 0.45);
  will-change: transform;
}

/* -------------------------------------------------------------------------
   2. REVEAL-ON-SCROLL  (NEW system — distinct from the site's existing
   .animate-on-scroll which main.js owns). premium.js adds .is-visible.
   No-JS / reduced-motion fallback: ships fully revealed so content is
   NEVER stuck hidden.
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger children of a [data-reveal-group] for a refined cascade. */
[data-reveal-group] > .reveal { transition-delay: 0ms; }
[data-reveal-group].is-visible > .reveal:nth-child(1) { transition-delay: 40ms; }
[data-reveal-group].is-visible > .reveal:nth-child(2) { transition-delay: 110ms; }
[data-reveal-group].is-visible > .reveal:nth-child(3) { transition-delay: 180ms; }
[data-reveal-group].is-visible > .reveal:nth-child(4) { transition-delay: 250ms; }
[data-reveal-group].is-visible > .reveal:nth-child(5) { transition-delay: 320ms; }
[data-reveal-group].is-visible > .reveal:nth-child(6) { transition-delay: 390ms; }

/* Fully-composed fallback: if JS never marks the page premium-ready, OR the
   user prefers reduced motion, reveal elements are simply shown. */
html:not(.premium-ready) .reveal,
html.premium-ready.premium-static .reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Premium refinement of the SITE'S EXISTING reveal system (.animate-on-scroll,
   owned by main.js). It only animates `opacity` (the .fade-in-* keyframes own
   the transform), so we just refine the easing + duration for a smoother,
   more premium fade-in. We deliberately do NOT add a transform here — that
   would fight the existing keyframe animation. */
.animate-on-scroll {
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}

/* -------------------------------------------------------------------------
   3. HERO — gradient-mesh glow + subtle grain + tighter display type
   The hero <section> already has position:relative; overflow:hidden, so the
   ::before / ::after layers stay clipped inside it.
   ------------------------------------------------------------------------- */
.hero-section { isolation: isolate; }

/* soft aurora/mesh blobs behind the hero content */
.hero-section::before {
  content: "";
  position: absolute;
  inset: -10% -5% auto -5%;
  height: 130%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 50% at 16% 18%, rgba(18, 158, 217, 0.22) 0%, transparent 62%),
    radial-gradient(42% 52% at 88% 22%, rgba(164, 116, 235, 0.22) 0%, transparent 64%),
    radial-gradient(46% 60% at 64% 96%, rgba(82, 209, 160, 0.12) 0%, transparent 66%);
  filter: blur(8px);
  animation: heroMeshDrift 24s ease-in-out infinite;
}

/* very subtle film grain for a premium, non-flat surface */
.hero-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* keep all hero content above the decorative layers */
.hero-section > .container,
.hero-section > .octopus-mascot { position: relative; z-index: 1; }

@keyframes heroMeshDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -14px, 0) scale(1.04); }
}

/* Tighten the hero headline + richer gradient accent */
.hero-section h1 {
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.hero-section .text-gradient {
  background: linear-gradient(108deg, #0f86ba 0%, #129ed9 34%, #7c5ce0 72%, #a474eb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Dashboard mockup: deeper, softer premium shadow + crisper border + lift */
.hero-section .animate-on-scroll.fade-in-right > div:first-child {
  box-shadow:
    0 2px 4px rgba(16, 20, 38, 0.04),
    0 18px 40px rgba(16, 20, 38, 0.10),
    0 40px 90px rgba(40, 30, 90, 0.12) !important;
  border-color: rgba(16, 20, 38, 0.06) !important;
}

/* -------------------------------------------------------------------------
   4. PARALLAX scaffolding (premium.js sets the CSS vars; transform-only)
   ------------------------------------------------------------------------- */
.parallax { will-change: transform; }

/* promote the floating cards' layer so their existing CSS float keyframe
   composites smoothly alongside the hero mesh drift */
.hero-section .float-animation { will-change: transform; }

/* -------------------------------------------------------------------------
   5. BUTTONS — premium gradient primary + refined secondary
   ------------------------------------------------------------------------- */
.btn-primary {
  position: relative;
  background: linear-gradient(120deg, #0f86ba 0%, #129ed9 38%, #a474eb 100%);
  background-size: 140% 140%;
  background-position: 0% 50%;
  box-shadow:
    0 8px 22px rgba(18, 158, 217, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    background-position 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-primary:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow:
    0 16px 38px rgba(124, 92, 235, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    color var(--transition-base);
}
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(18, 158, 217, 0.55);
  box-shadow: var(--shadow-md), 0 8px 22px rgba(18, 158, 217, 0.10);
}

/* magnetic CTAs get promoted for smooth transform tracking */
.magnetic { will-change: transform; }

/* -------------------------------------------------------------------------
   6. CARDS & SECTIONS — deeper soft shadow, refined hover
   ------------------------------------------------------------------------- */
.card {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}
.card:hover {
  box-shadow:
    0 2px 4px rgba(16, 20, 38, 0.04),
    0 14px 30px rgba(16, 20, 38, 0.09),
    0 28px 60px rgba(40, 30, 90, 0.10);
}

.feature-card,
.testimonial-card,
.stat-card,
.pricing-card {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}
.feature-card:hover,
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 14px 30px rgba(16, 20, 38, 0.09),
    0 28px 60px rgba(40, 30, 90, 0.10);
}

/* logo pills get a touch more premium on hover */
.logo-pill {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base);
}
.logo-pill:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------------------
   7. TYPOGRAPHY — tighten tracking on display headings
   ------------------------------------------------------------------------- */
.section-title,
h2.section-title { letter-spacing: -0.028em; }
.stat-value { letter-spacing: -0.03em; }

/* -------------------------------------------------------------------------
   8. REDUCED MOTION — neutralise every premium motion (fully composed)
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-section::before { animation: none !important; }
  .btn-primary:hover,
  .btn-secondary:hover,
  .feature-card:hover,
  .testimonial-card:hover,
  .logo-pill:hover { transform: none !important; }
  .parallax,
  .hero-section .float-animation,
  .magnetic { transform: none !important; }
}