/* ============================================================
   LearnLytx, Motion FX layer
   Sick animations: scroll progress, mouse spotlight, magnetic
   buttons, tilt cards, marquee, grain, kinetic underlines,
   animated mesh, conic glow rings, scrolling text, kinetic
   gradients, blob morph, draw-on SVG, sparkles, etc.
   ============================================================ */

/* --- Scroll progress bar (top of viewport) --- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  z-index:200; pointer-events:none;
  background:linear-gradient(90deg,
    hsl(var(--brand-pink)) 0%,
    hsl(var(--brand-coral)) 25%,
    hsl(var(--brand-orange)) 50%,
    hsl(var(--brand-teal)) 75%,
    hsl(var(--brand-blue)) 100%);
  background-size:200% 100%;
  transform-origin:left center;
  transform:scaleX(var(--sp,0));
  animation: hueShift 6s linear infinite;
  box-shadow:0 0 14px hsl(var(--brand-pink)/0.6), 0 0 30px hsl(var(--brand-blue)/0.3);
}
@keyframes hueShift{ to{ background-position: 200% 0; } }

/* --- Cursor spotlight that follows the mouse globally --- */
.cursor-spot{
  position:fixed; top:0; left:0; width:480px; height:480px; z-index:1; pointer-events:none;
  transform:translate3d(calc(var(--mx,50vw) - 240px), calc(var(--my,50vh) - 240px), 0);
  background: radial-gradient(circle, hsl(var(--brand-pink)/0.18), hsl(var(--brand-blue)/0.10) 40%, transparent 70%);
  mix-blend-mode:screen; opacity:0; transition:opacity .4s ease;
  filter:blur(40px);
}
.cursor-spot.on{ opacity:1; }
[data-theme="light"] .cursor-spot{ mix-blend-mode:multiply; opacity:0; }
[data-theme="light"] .cursor-spot.on{ opacity:.55; }

/* --- Magnetic CTA, slight pull toward mouse --- */
.magnetic{ transition: transform .25s cubic-bezier(.2,1.2,.4,1); will-change:transform; }
.magnetic .arr{ transition: transform .25s cubic-bezier(.2,1.2,.4,1); }

/* --- Hero, animated mesh gradient backdrop --- */
.hero{ position:relative; }
.hero::before{
  content:""; position:absolute; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(40% 50% at 20% 30%, hsl(var(--brand-pink)/0.25), transparent 60%),
    radial-gradient(35% 45% at 80% 20%, hsl(var(--brand-blue)/0.22), transparent 60%),
    radial-gradient(45% 55% at 70% 80%, hsl(var(--brand-teal)/0.20), transparent 60%),
    radial-gradient(40% 40% at 30% 75%, hsl(var(--brand-orange)/0.20), transparent 60%);
  filter: blur(40px) saturate(120%);
  animation: meshFloat 18s ease-in-out infinite alternate;
}
@keyframes meshFloat{
  0%   { transform: translate3d(0,0,0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(2%, -2%, 0) scale(1.05) rotate(2deg); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02) rotate(-2deg); }
}

/* Hero spotlight responding to mouse */
.hero__spot{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(280px circle at var(--hx,50%) var(--hy,40%),
    hsl(var(--brand-pink)/0.28), transparent 65%);
  mix-blend-mode:screen; transition: background .15s linear;
}
[data-theme="light"] .hero__spot{ mix-blend-mode:multiply; opacity:.55; }

/* Hero title, kinetic letter rise + shimmer */
.kinetic-text{ display:inline-block; }
.kinetic-text .word{ display:inline-block; white-space:nowrap; margin-right:.25em; }
.kinetic-text .ch{
  display:inline-block; transform:translateY(80%); opacity:0;
  animation: charRise .9s cubic-bezier(.22,1.2,.4,1) forwards;
}
@keyframes charRise{ to{ transform:translateY(0); opacity:1; } }

/* Gradient sweeps across the kinetic gradient phrase */
.kinetic-grad{
  background: linear-gradient(110deg,
    hsl(var(--brand-pink)) 0%,
    hsl(var(--brand-orange)) 25%,
    hsl(var(--brand-purple)) 50%,
    hsl(var(--brand-blue)) 75%,
    hsl(var(--brand-teal)) 100%);
  background-size: 250% 250%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: gradPan 7s ease-in-out infinite;
}
@keyframes gradPan{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}

/* --- Hero scroll cue --- */
.scroll-cue{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:hsl(var(--text-3)); z-index:3;
}
.scroll-cue__line{
  width:1px; height:40px;
  background:linear-gradient(180deg, transparent, hsl(var(--text-2)) 50%, transparent);
  background-size:1px 200%;
  animation: cueShift 1.8s linear infinite;
}
@keyframes cueShift{ from{ background-position:0 -100%; } to{ background-position:0 100%; } }

/* --- Marquee strip --- */
.marquee{
  position:relative; padding:28px 0; overflow:hidden;
  border-top:1px solid hsl(var(--border));
  border-bottom:1px solid hsl(var(--border));
  background:hsl(var(--surface-2));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track{
  display:flex; gap:56px; width:max-content;
  animation: marqueeMove 40s linear infinite;
  align-items:center;
}
.marquee:hover .marquee__track{ animation-play-state: paused; }
@keyframes marqueeMove{ to{ transform: translateX(-50%); } }
.marquee__item{
  display:inline-flex; align-items:center; gap:14px;
  font-family:"Sora",sans-serif; font-weight:700; font-size:24px; letter-spacing:-0.01em;
  color:hsl(var(--text-2)); white-space:nowrap;
}
.marquee__item .dot{
  width:8px; height:8px; border-radius:999px;
  background: linear-gradient(135deg, hsl(var(--brand-pink)), hsl(var(--brand-blue)));
}
.marquee__item.accent{
  background:linear-gradient(110deg, hsl(var(--brand-pink)), hsl(var(--brand-orange)));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --- Tilt cards (set by JS via CSS vars) --- */
.tilt{
  transform: perspective(900px)
             rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))
             translateZ(0);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.tilt::before{
  /* glare */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3; border-radius:inherit;
  background: radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),
    hsl(var(--text)/0.10), transparent 60%);
  opacity:0; transition: opacity .25s ease;
}
.tilt.lit::before{ opacity:1; }
[data-theme="dark"] .tilt::before{
  background: radial-gradient(280px circle at var(--gx,50%) var(--gy,50%),
    hsl(36 100% 95% / 0.10), transparent 60%);
}

/* --- Conic spinning ring on flagship logo --- */
.flagship__logo-wrap{
  position:relative; display:inline-grid; place-items:center; padding:6px;
}
.flagship__logo-wrap::before{
  content:""; position:absolute; inset:0; border-radius:24px;
  background: conic-gradient(from 0deg,
    hsl(var(--brand-pink)),
    hsl(var(--brand-orange)),
    hsl(var(--brand-gold)),
    hsl(var(--brand-teal)),
    hsl(var(--brand-blue)),
    hsl(var(--brand-purple)),
    hsl(var(--brand-pink)));
  filter: blur(8px); opacity:.85;
  animation: ringSpin 6s linear infinite;
}
.flagship__logo-wrap::after{
  content:""; position:absolute; inset:4px; border-radius:20px;
  background: hsl(var(--surface));
}
.flagship__logo-wrap > img{ position:relative; z-index:1; }
@keyframes ringSpin{ to{ transform: rotate(360deg); } }

/* --- Process: animated SVG line connector --- */
.process{ position:relative; }
.process__line{
  position:absolute; top:60px; left:0; right:0; height:60px; pointer-events:none; z-index:0;
}
.process__grid > .process__card{ position:relative; z-index:2; }
.process__line path{
  fill:none; stroke:url(#processGrad); stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray: 2000; stroke-dashoffset: 2000;
  filter: drop-shadow(0 0 8px hsl(var(--brand-pink)/0.5));
}
.process__line.go path{ animation: drawLine 2.4s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes drawLine{ to{ stroke-dashoffset: 0; } }
@media(max-width:980px){ .process__line{ display:none; } }

/* travelling pulse along the path */
.process__pulse{
  fill:hsl(var(--brand-pink));
  filter: drop-shadow(0 0 8px hsl(var(--brand-pink)));
  opacity:0;
}
.process__line.go .process__pulse{ opacity:1; animation: pulseTravel 4s linear 2s infinite; }
@keyframes pulseTravel{
  0%{ offset-distance: 0%; }
  100%{ offset-distance: 100%; }
}

/* --- Outcomes: ring counter --- */
.outcomes__stat{ position:relative; }
.outcomes__ring{
  position:absolute; top:14px; right:14px; width:36px; height:36px;
  transform: rotate(-90deg);
}
.outcomes__ring circle{ fill:none; stroke-width:3; }
.outcomes__ring .bg{ stroke:hsl(var(--border)); }
.outcomes__ring .fg{
  stroke:hsl(var(--brand-pink));
  stroke-linecap:round;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1);
}
.outcomes__stat[data-fill="1"] .outcomes__ring .fg{ stroke-dashoffset: 0; }
.outcomes__stat[data-color="blue"] .outcomes__ring .fg{ stroke:hsl(var(--brand-blue)); }
.outcomes__stat[data-color="teal"] .outcomes__ring .fg{ stroke:hsl(var(--brand-teal)); }
.outcomes__stat[data-color="gold"] .outcomes__ring .fg{ stroke:hsl(var(--brand-orange)); }

/* --- Section divider waves --- */
.wave-divider{
  display:block; width:100%; height:60px;
  background:hsl(var(--bg));
}
.wave-divider svg{ width:100%; height:100%; display:block; }
.wave-divider path{
  fill:hsl(var(--surface-2));
  animation: waveSlide 12s ease-in-out infinite alternate;
  transform-origin:center;
}
@keyframes waveSlide{
  from{ transform: translateX(-2%) scaleY(1); }
  to  { transform: translateX(2%)  scaleY(1.1); }
}

/* --- Floating particles in hero --- */
.particles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.particle{
  position:absolute; width:6px; height:6px; border-radius:999px;
  background: hsl(var(--brand-pink));
  opacity:.7; filter: blur(.5px);
  animation: floaty linear infinite;
}
.particle:nth-child(3n){ background: hsl(var(--brand-blue)); }
.particle:nth-child(3n+1){ background: hsl(var(--brand-teal)); width:4px; height:4px; }
.particle:nth-child(5n){ background: hsl(var(--brand-orange)); width:8px; height:8px; }
.particle:nth-child(7n){ background: hsl(var(--brand-purple)); }
@keyframes floaty{
  0%   { transform: translate3d(0,0,0) scale(1); opacity:0; }
  10%  { opacity:.8; }
  90%  { opacity:.7; }
  100% { transform: translate3d(var(--dx,30px), -120vh, 0) scale(.6); opacity:0; }
}

/* --- Grain overlay (tasteful) --- */
.grain{
  position:fixed; inset:0; z-index:150; pointer-events:none;
  opacity:.06; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* --- Card glow that follows cursor --- */
.feature-card, .process__card, .outcomes__stat, .card-grad, .feat{
  --gx: 50%; --gy: 50%;
  position:relative;
}
.feature-card::before, .process__card::before, .outcomes__stat::before, .feat::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background: radial-gradient(180px circle at var(--gx) var(--gy),
    hsl(var(--brand-pink)/0.10), transparent 60%);
  opacity:0; transition: opacity .25s ease;
}
.feature-card:hover::before, .process__card:hover::before, .outcomes__stat:hover::before, .feat:hover::before{ opacity:1; }
.feature-card > *, .process__card > *, .outcomes__stat > *, .feat > *{ position:relative; z-index:1; }

/* --- Kinetic underline on links/CTA tags --- */
.section__title{ position:relative; }

/* --- Final CTA: animated conic glow --- */
.final-cta{ position:relative; overflow:hidden; }
.final-cta::before{
  content:""; position:absolute; inset:-50% -10%; z-index:0; pointer-events:none;
  background: conic-gradient(from 0deg at 50% 60%,
    hsl(var(--brand-pink)/0.16),
    hsl(var(--brand-orange)/0.16),
    hsl(var(--brand-gold)/0.16),
    hsl(var(--brand-teal)/0.16),
    hsl(var(--brand-blue)/0.16),
    hsl(var(--brand-purple)/0.16),
    hsl(var(--brand-pink)/0.16));
  filter: blur(60px);
  animation: ringSpin 30s linear infinite;
}
.final-cta__inner{ position:relative; z-index:2; }

/* (tag-pill shimmer removed for credibility) */

/* --- Nav: hide on scroll-down, show on scroll-up --- */
.ll-nav{ transition: transform .35s cubic-bezier(.2,.8,.2,1), background .25s, box-shadow .25s, border-color .25s; }
.ll-nav.hidden{ transform: translateY(-110%); }

/* --- Hero CTA, magnetic + ripple on click --- */
.ll-btn{ position:relative; overflow:hidden; }
.ll-btn .ripple{
  position:absolute; border-radius:999px; background:hsl(var(--text)/0.25);
  transform: scale(0); pointer-events:none;
  animation: rippleOut .6s ease-out forwards;
}
@keyframes rippleOut{
  to{ transform: scale(4); opacity:0; }
}

/* (CTA pulse rings removed for credibility) */

/* --- Number counter, kinetic underline bar --- */
.outcomes__stat .outcomes__v, .flagship__stat-v{ position:relative; display:inline-block; }
.outcomes__stat .outcomes__v::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:0; height:3px;
  border-radius:3px;
  background: currentColor; opacity:.4;
  transform: translateX(-50%);
  transition: width 1s ease .2s;
}
.outcomes__stat[data-fill="1"] .outcomes__v::after{ width: 60%; }

/* --- Section enter, masked reveal --- */
.mask-reveal{ position:relative; overflow:hidden; }
.mask-reveal > *{
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s cubic-bezier(.7,0,.2,1);
}
.mask-reveal.in > *{ clip-path: inset(0 0 0 0); }

/* --- Sparkle particles inside CTAs --- */
.spark{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#fff; pointer-events:none;
  animation: sparkUp .8s ease-out forwards;
}
@keyframes sparkUp{
  to{ transform: translate3d(var(--sx,0), var(--sy,-30px), 0) scale(0); opacity:0; }
}

/* --- Hover lift refinement --- */
.feature-card{ transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, background .3s; }
.feature-card:hover{ transform: translateY(-6px) scale(1.01); }

/* --- Reduced-motion respect --- */
@media (prefers-reduced-motion: reduce){
  .scroll-progress, .cursor-spot, .hero::before, .hero__spot, .marquee__track,
  .flagship__logo-wrap::before, .process__line.go path, .process__line.go .process__pulse,
  .final-cta::before, .tag-pill::after, .ll-btn--hero::before, .ll-btn--hero::after,
  .scroll-cue__line, .grain, .particle, .kinetic-grad{
    animation:none !important; transition:none !important;
  }
}