/* ============================================================
   Magnet Mindset — Animations
   Supports: GSAP ScrollTrigger, cursor glow, particle canvas,
   hero line-reveal, gold logo shimmer, page entry.
   ============================================================ */


/* ══════════════════════════════════════════════════════════
   1. PAGE ENTRY
   Prevents flash of unstyled / invisible content
══════════════════════════════════════════════════════════ */

body {
  animation: mm-page-entry 0.5s ease forwards;
}

@keyframes mm-page-entry {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ══════════════════════════════════════════════════════════
   2. HERO SECTION — parallax + particle canvas setup
══════════════════════════════════════════════════════════ */

/* Clip the parallax + particle canvas inside the hero bounds */
#hero {
  position: relative;
  overflow: hidden;
}

/* Particle canvas sits between .hero-bg and .container */
#hero-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Hero content above the particles */
#hero .container {
  position: relative;
  z-index: 2;
}

/* hero-bg image needs willChange for GPU promotion */
.hero-bg img {
  will-change: transform;
}


/* ══════════════════════════════════════════════════════════
   3. HERO TEXT LINE-REVEAL WRAPPERS
   JS splits the h1 into .h-line / .h-line-inner pairs.
   Each .h-line clips the overflow so the inner span can
   slide up from below without being visible before trigger.
══════════════════════════════════════════════════════════ */

.h-line {
  display: block;
  overflow: hidden;
  /* Preserve the headline's natural line-height */
  line-height: inherit;
}

.h-line-inner {
  display: block;
}


/* ══════════════════════════════════════════════════════════
   4. GOLD SHIMMER — site logo wordmark
══════════════════════════════════════════════════════════ */

@keyframes mm-gold-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.site-logo .h-product {
  background: linear-gradient(
    90deg,
    var(--color-gold-dark)  20%,
    #f0d060                 50%,
    var(--color-gold-dark)  80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: mm-gold-shimmer 6s linear infinite;
}


/* ══════════════════════════════════════════════════════════
   5. CUSTOM CURSOR GLOW — desktop only, injected by JS
══════════════════════════════════════════════════════════ */

#cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(212, 175, 55, 0.20) 0%,
    rgba(212, 175, 55, 0.07) 50%,
    transparent 70%
  );
  pointer-events: none;
  z-index: var(--z-modal);
  will-change: transform;
  transition:
    width  0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease;
}

#cursor-glow.is-hover {
  width: 88px;
  height: 88px;
  background: radial-gradient(
    circle at center,
    rgba(212, 175, 55, 0.26) 0%,
    rgba(212, 175, 55, 0.10) 50%,
    transparent 70%
  );
}


/* ══════════════════════════════════════════════════════════
   6. SECTION Z-INDEX — ensure sections slide over hero
   Sections after hero need a solid background + stacking
   context so they paint over the sticky-feeling hero.
══════════════════════════════════════════════════════════ */

#social-proof,
#pillars,
#featured-insights,
#ebook-cta,
#about-teaser {
  position: relative;
  z-index: 2;
}


/* ══════════════════════════════════════════════════════════
   7. ANIMATED LOGO SEAL — hero placement
══════════════════════════════════════════════════════════ */

.hero-logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

#mm-logo-animated {
  width: 210px;
  height: 210px;
  display: block;
  /* Opacity controlled by JS — no CSS override here */
}

/* CSS ring rotation — applies to header, footer, and hero rings.
   transform-box: fill-box makes rotation centre on the element's
   own bounding box, which works correctly for all viewBox sizes. */
@keyframes mm-ring-spin {
  to { transform: rotate(360deg); }
}

.mm-spin-rings {
  transform-box: view-box;     /* use SVG viewport — reliable for stroke-only elements */
  transform-origin: 50% 50%;  /* centre of the viewBox in all three logo sizes */
  animation: mm-ring-spin 28s linear infinite;
}

/* Mobile: smaller seal */
@media (max-width: 768px) {
  #mm-logo-animated {
    width: 150px;
    height: 150px;
  }
}


/* ══════════════════════════════════════════════════════════
   8. REDUCED MOTION OVERRIDES
   Respects prefers-reduced-motion at both animation and
   transition level. GSAP bails out in JS too.
══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  /* Kill page entry */
  body {
    animation: none;
  }

  /* Kill logo shimmer, restore plain gold text */
  .site-logo .h-product {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--color-gold);
    color: var(--color-gold);
  }

  /* Hide cursor glow */
  #cursor-glow {
    display: none !important;
  }

  /* Hide particle canvas */
  #hero-particles {
    display: none !important;
  }

  /* Stop all ring rotations; needles stay fixed */
  .mm-spin-rings {
    animation: none !important;
    transform: none !important;
  }

  /* Snap transitions */
  .hero-bg img,
  .h-line-inner,
  .proof-item,
  .pillar-card,
  .post-card,
  .ebook-cover,
  .ebook-copy > * {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}