/* ============================================================
   premium-scroll.css — premium scroll choreography
   Stripe-style top progress bar, section divider draw-in, distinct
   per-section reveal styles, restored card-stack 3D on visual
   showpieces, scroll-linked parallax, refined card hovers.
   ============================================================ */

/* 1. Top scroll-progress bar — fixed, 2px gold, fills L→R with scroll */
.mt-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--c-gold, #C8960C), var(--c-gold-3, #F0B429));
  box-shadow: 0 0 14px rgba(240, 180, 41, .5);
  z-index: 10001;
  pointer-events: none;
  transition: width 90ms linear;
}
@media (prefers-reduced-motion: reduce) { .mt-progress-bar { display: none; } }

/* 2. Section divider draw-in — thin gold hairline above each section that
   draws left→right as the section enters view. Premium and silent. */
section[data-stage] {
  --mt-divider-progress: 0;
}
section[data-stage]::before {
  /* keep stage lighting (already defined elsewhere); add divider via outline */
}
.mt-section-divider {
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  width: 100%;
  pointer-events: none;
  z-index: 5;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(240, 180, 41, .55) 50%,
    transparent 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.mt-section-divider.is-in { transform: scaleX(1); }
#hero .mt-section-divider, #problem .mt-section-divider { display: none; }

/* 3. Section reveal choreography — distinct entry per section type.
   These OVERRIDE the flat stagger fade-up imposed by the premium-pass cut.
   Note: Community keeps the clean stagger (the user explicitly wanted that). */

/* Markets — restore 3D card-stack rotateX entrance */
.markets-grid[data-motion="stagger"],
.markets-grid {
  perspective: 1400px;
}
.markets-grid > .mkt-card {
  opacity: 0;
  transform: translate3d(0, 50px, -100px) rotateX(18deg) scale(.94);
  transform-origin: 50% 100%;
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.0s cubic-bezier(.16,1,.3,1);
  filter: none !important;
  will-change: opacity, transform;
}
.markets-grid > .mkt-card.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
}

/* Service suites — same 3D card-stack but slightly different angle */
.services-grid > .service-suite {
  opacity: 0;
  transform: translate3d(0, 40px, -80px) rotateY(-3deg) scale(.96);
  transform-origin: 50% 50%;
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.0s cubic-bezier(.16,1,.3,1);
  filter: none !important;
  will-change: opacity, transform;
}
.services-grid > .service-suite.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateY(0) scale(1);
}

/* Guides — slide-and-tilt entrance from below */
.guides-grid > .guide-card {
  opacity: 0;
  transform: translate3d(0, 60px, 0) rotateX(8deg);
  transform-origin: 50% 100%;
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform 1.0s cubic-bezier(.16,1,.3,1);
  filter: none !important;
  will-change: opacity, transform;
}
.guides-grid > .guide-card.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0);
}

/* Pricing — cards lift in with stagger and gentle scale */
.plans-grid > .plan-card {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(.97);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.plans-grid > .plan-card.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
/* Featured plan card stays at its elevated -12px position when in */
.plans-grid > .plan-card.featured.is-in {
  transform: translate3d(0, -12px, 0) scale(1);
}

/* Built On strip — labels slide in from below with hairline glow flash */
.built-on-strip > .built-on-frame {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.built-on-strip > .built-on-frame.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* 4. Refined card hover — restore visual delight without 3D tilt jank.
   Subtle scale + gold inner glow + lift. Gives the page tactile feel. */
.mkt-card,
.service-suite,
.guide-card,
.plan-card:not(.featured),
.seg-suite-card {
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    border-color .42s,
    box-shadow .42s;
}
.mkt-card:hover,
.service-suite:hover,
.guide-card:hover,
.plan-card:not(.featured):hover,
.seg-suite-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(240, 180, 41, .42) !important;
  box-shadow:
    0 28px 60px -28px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(240, 180, 41, .18),
    inset 0 1px 0 rgba(240, 180, 41, .12) !important;
}
.plan-card.featured:hover {
  transform: translateY(-18px) !important;
  border-color: rgba(240, 180, 41, .65) !important;
}

/* 5. Scroll-linked subtle parallax on key elements (data-mt-parallax)
   driven by JS RAF. Just adds a will-change hint. */
[data-mt-parallax] { will-change: transform; }

/* 6. Headline reveal upgrade: instead of pure flat fade-up, add a subtle
   scale-up so the H2 has presence on entry. Still legible the whole time. */
[data-motion="split-words"] {
  transform-origin: 50% 100%;
}
[data-motion="split-words"]:not(.is-in) {
  transform: translate3d(0, 22px, 0) scale(.985);
}
[data-motion="split-words"].is-in {
  transform: translate3d(0, 0, 0) scale(1);
}

/* 7. Hero globe reveals + gold halo intensifies on first scroll */
.hero-globe-stage {
  transition: filter .8s cubic-bezier(.2, .8, .2, 1);
}

/* 8. Section transition: subtle linear-gradient bands at section edges
   give a 'pause' between sections. Keeps the rhythm. */
section[data-stage="warm"] + section[data-stage="cool"]::before,
section[data-stage="cool"] + section[data-stage="warm"]::before,
section[data-stage="cool"] + section[data-stage="neutral"]::before {
  /* leave to existing stage system */
}

@media (prefers-reduced-motion: reduce) {
  .markets-grid > .mkt-card,
  .services-grid > .service-suite,
  .guides-grid > .guide-card,
  .plans-grid > .plan-card,
  .built-on-strip > .built-on-frame {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .mkt-card:hover, .service-suite:hover, .guide-card:hover,
  .plan-card:hover, .seg-suite-card:hover { transform: none !important; }
}