/* ==========================================================
   ANIMATION FIX -- No Layout Shift on Scroll
   Problem: translateY animations cause page jump during scroll
   Fix:     Pure opacity fade + subtle scale (GPU-only, no layout)
========================================================== */

/* -- 1. Kill floatY layout shift ---------------------------
   OLD: translateY(0 -> -14px) = causes section height recalc
   NEW: subtle glowPulse = opacity only, zero layout impact   */
.hero-visual{
  animation: heroPulse 5s ease-in-out infinite;
  position: relative;
  will-change: opacity, filter;
}
@keyframes heroPulse{
  0%,100%{ filter: drop-shadow(0 0 20px rgba(124,58,237,.3)) }
  50%    { filter: drop-shadow(0 0 40px rgba(124,58,237,.55)) }
}

/* Float pills -- replace Y movement with opacity pulse */
.float-pill.fp1{ animation: pillPulse 4.5s ease-in-out infinite }
.float-pill.fp2{ animation: pillPulse 4.5s 1.8s ease-in-out infinite }
@keyframes pillPulse{
  0%,100%{ opacity:1;  box-shadow:0 8px 24px rgba(124,58,237,.3) }
  50%    { opacity:.85; box-shadow:0 8px 32px rgba(124,58,237,.55) }
}

/* -- 2. Hero entry animations -- opacity+scale only ---------
   OLD: translateY(20px) = vertical shift during load
   NEW: scale(.97->1)     = subtle zoom in, zero layout impact */
@keyframes fadeUp{
  from{ opacity:0; transform:scale(.97) }
  to  { opacity:1; transform:scale(1)   }
}
@keyframes fadeDown{
  from{ opacity:0; transform:scale(.97) }
  to  { opacity:1; transform:scale(1)   }
}

/* Hero badge, title, desc, checklist, cta -- lock position */
.hero-badge,
.hero-title,
.hero-desc,
.hero-checklist,
.hero-cta{
  will-change: opacity;
  transform: none !important; /* prevents any residual translateY */
}
/* Re-apply entry animation without translateY */
.hero-badge  { animation: fadeDown .6s ease both }
.hero-title  { animation: fadeUp   .6s .08s ease both }
.hero-desc   { animation: fadeUp   .6s .16s ease both }
.hero-checklist{ animation: fadeUp .6s .24s ease both }
.hero-cta    { animation: fadeUp   .6s .32s ease both }

/* -- 3. Scroll reveal -- opacity+scale, no translateY -------
   OLD: translateY(32px -> 0) = 32px jump per element on scroll
   NEW: scale(.98->1) + opacity = smooth, no positional shift  */
.reveal{
  opacity: 0;
  transform: scale(.98);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
  /* prevent the 'invisible' state from affecting scroll height */
  backface-visibility: hidden;
}
.reveal.visible{
  opacity: 1;
  transform: scale(1);
}

/* Left/right reveals -- keep horizontal hint but tiny (6px) */
.reveal-left{
  opacity: 0;
  transform: translateX(-8px) scale(.99);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.reveal-left.visible{
  opacity: 1;
  transform: translateX(0) scale(1);
}
.reveal-right{
  opacity: 0;
  transform: translateX(8px) scale(.99);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.reveal-right.visible{
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* -- 4. Hero orbs -- GPU composited, no layout touch -------
   Already use transform:translate() -- just add will-change  */
.hero-orb-1{ will-change: transform; contain: layout paint }
.hero-orb-2{ will-change: transform; contain: layout paint }
.hero-orb-3{ will-change: transform; contain: layout paint }

/* -- 5. Hero section -- contain layout so orb movement
        never bleeds into page scroll height calc ---------  */
.home-hero{
  contain: layout;
  overflow: hidden;
}

/* -- 6. Dash card visual -- GPU layer, no paint thrash -----  */
.dash-card{
  will-change: auto;
  contain: layout paint;
}

/* -- 7. Marquee tracks -- GPU only -------------------------  */
.integ-track-left,
.integ-track-right{
  will-change: transform;
  contain: layout;
}