/* ============================================================
   GR8MD design kit · motion.css
   Reveal, stagger and glow animations. Optional — components
   degrade gracefully without this file.
   Pair with kit.js (adds .in to .rv elements on scroll).
   ============================================================ */

/* ---- Scroll reveal ---- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.rv.in{opacity:1;transform:none;}

/* ---- Staggered arrivals — cards land one by one ---- */
@keyframes calRise{from{opacity:0;transform:translateY(16px);}}
.bento.in .cell{animation:calRise .6s cubic-bezier(.2,.75,.25,1) backwards;}
.bento.in .cell:nth-child(1){animation-delay:.05s;}.bento.in .cell:nth-child(2){animation-delay:.12s;}
.bento.in .cell:nth-child(3){animation-delay:.19s;}.bento.in .cell:nth-child(4){animation-delay:.26s;}
.bento.in .cell:nth-child(5){animation-delay:.33s;}.bento.in .cell:nth-child(6){animation-delay:.4s;}
.fgrid.in .fcard{animation:calRise .55s cubic-bezier(.2,.75,.25,1) backwards;}
.fgrid.in .fcard:nth-child(1){animation-delay:.04s;}.fgrid.in .fcard:nth-child(2){animation-delay:.08s;}
.fgrid.in .fcard:nth-child(3){animation-delay:.12s;}.fgrid.in .fcard:nth-child(4){animation-delay:.16s;}
.fgrid.in .fcard:nth-child(5){animation-delay:.2s;}.fgrid.in .fcard:nth-child(6){animation-delay:.24s;}
.fgrid.in .fcard:nth-child(7){animation-delay:.28s;}.fgrid.in .fcard:nth-child(8){animation-delay:.32s;}
.fgrid.in .fcard:nth-child(9){animation-delay:.36s;}.fgrid.in .fcard:nth-child(10){animation-delay:.4s;}
.routines.in .rcard{animation:calRise .55s cubic-bezier(.2,.75,.25,1) backwards;}
.routines.in .rcard:nth-child(1){animation-delay:.06s;}.routines.in .rcard:nth-child(2){animation-delay:.16s;}
.routines.in .rcard:nth-child(3){animation-delay:.26s;}
.cal.in .cal-day{animation:calRise .55s cubic-bezier(.2,.75,.25,1) backwards;}
.cal.in .cal-day:nth-child(1){animation-delay:.04s;}.cal.in .cal-day:nth-child(2){animation-delay:.1s;}
.cal.in .cal-day:nth-child(3){animation-delay:.16s;}.cal.in .cal-day:nth-child(4){animation-delay:.22s;}
.cal.in .cal-day:nth-child(5){animation-delay:.28s;}.cal.in .cal-day:nth-child(6){animation-delay:.34s;}
.cal.in .cal-day:nth-child(7){animation-delay:.4s;}
.pricing.in .ptier{animation:calRise .6s cubic-bezier(.2,.75,.25,1) backwards;}
.pricing.in .ptier:nth-child(1){animation-delay:.05s;}.pricing.in .ptier:nth-child(2){animation-delay:.15s;}
.pricing.in .ptier:nth-child(3){animation-delay:.25s;}
.pricing.in .pfeat li{animation:calRise .5s cubic-bezier(.2,.75,.25,1) backwards;}
.pricing.in .pfeat li:nth-child(1){animation-delay:.3s;}.pricing.in .pfeat li:nth-child(2){animation-delay:.36s;}
.pricing.in .pfeat li:nth-child(3){animation-delay:.42s;}.pricing.in .pfeat li:nth-child(4){animation-delay:.48s;}
.pricing.in .pfeat li:nth-child(5){animation-delay:.54s;}.pricing.in .pfeat li:nth-child(6){animation-delay:.6s;}
.pricing.in .pfeat li:nth-child(7){animation-delay:.66s;}
.pricing.in .pf-ic{animation:tickPop .45s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:inherit;}
@keyframes tickPop{from{transform:scale(0);opacity:0;}}

/* ---- Hero entrance ---- */
@media (prefers-reduced-motion:no-preference){
  .hero > *{animation:rise .7s ease backwards;}
  .hero > :nth-child(2){animation-delay:.08s;}.hero > :nth-child(3){animation-delay:.16s;}
  .hero > :nth-child(4){animation-delay:.24s;}.hero > :nth-child(5){animation-delay:.32s;}
  @keyframes rise{from{opacity:0;transform:translateY(14px);}}
}

/* ---- Glow emphasis (key titles / words only) ---- */
.gw{animation:gwText 2.8s ease-in-out infinite;}
@keyframes gwText{0%,100%{text-shadow:0 0 0 transparent;}50%{text-shadow:0 0 16px color-mix(in srgb,var(--accent) 75%,transparent);}}
.glow{animation:gwFilter 3.4s ease-in-out infinite;}
@keyframes gwFilter{0%,100%{filter:drop-shadow(0 0 1px color-mix(in srgb,var(--accent) 20%,transparent));}
  50%{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 45%,transparent));}}
@keyframes heroShimmer{0%{background-position:0% center;}50%{background-position:100% center;}100%{background-position:0% center;}}
.hero h1.glow{animation:heroShimmer 7.5s ease-in-out infinite, gwFilter 3.4s ease-in-out infinite;}

/* ---- Button glows ---- */
.btn-glow{animation:btnGlow 2.6s ease-in-out infinite;}
.btn-glow:hover{animation-play-state:paused;}
@keyframes btnGlow{0%,100%{box-shadow:0 0 0 0 transparent;}50%{box-shadow:0 0 26px 2px color-mix(in srgb,var(--accent) 48%,transparent);}}
@keyframes navGlow{0%,100%{box-shadow:0 0 9px 0 color-mix(in srgb,var(--accent) 26%,transparent);}50%{box-shadow:0 0 22px 2px color-mix(in srgb,var(--accent) 48%,transparent);}}

/* ---- Theme toggle pop ---- */
@keyframes themePop{from{transform:rotate(-100deg) scale(.5);opacity:0;}}
.icon-btn.flip svg{animation:themePop .5s cubic-bezier(.3,.9,.35,1.2);}
#themeToggle.flip svg{animation:none;}

/* ---- Depth dial draw-on-reveal (SVG with #dialPath/.dial-alt/.dial-lab/#dialPulse) ---- */
#dialPath{stroke-dasharray:720;stroke-dashoffset:720;}
.in #dialPath{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s ease .2s;}
.dial-alt{stroke-dasharray:720;stroke-dashoffset:720;opacity:0;}
.in .dial-alt{opacity:1;stroke-dashoffset:0;transition:opacity .35s ease .2s,stroke-dashoffset 1.6s ease .2s;}
.dial-lab{opacity:0;transition:opacity .7s ease 2.8s;}
.in .dial-lab{opacity:1;}
#dialPulse{fill:var(--accent);animation:dialPulse 2.4s ease-in-out infinite;}
@keyframes dialPulse{0%,100%{r:4.5;opacity:1;}50%{r:7;opacity:.5;}}

/* ---- Journey dots — pulse travels the milestone track ---- */
@keyframes jdot{
  0%,14%{background:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 75%,transparent);transform:scale(1.5);}
  23%,100%{background:var(--dot-idle);box-shadow:none;transform:scale(1);}}

/* ---- Overlay marquee scroll ---- */
@keyframes ovScroll{to{transform:translateX(-50%);}}

/* ---- Pricing amount swap ---- */
.pprice .amt.swap{animation:pSwap .3s ease;}
@keyframes pSwap{from{opacity:0;transform:translateY(7px);}}

/* ---- Reduced motion: soften smooth-scroll ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}