/* ==========================================================
   WAYNIA LANDING — ANIMATIONS v3.0 (Liquid Glass)
   Dark theme, glass shine, 3D depth, performance-optimized
   ========================================================== */

/* ===== LIQUID GLASS SHINE ===== */
@keyframes liquid-shine {
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes liquid-glow {
  0%,100%{opacity:.6;filter:blur(40px)}
  50%{opacity:1;filter:blur(60px)}
}
@keyframes glass-refract {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ===== FLOATING ICONS ===== */
@keyframes drift-1 {
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(12px,-20px) rotate(5deg)}
  66%{transform:translate(-8px,-32px) rotate(-3deg)}
}
@keyframes drift-2 {
  0%,100%{transform:translate(0,0) rotate(0deg)}
  50%{transform:translate(-16px,-28px) rotate(-6deg)}
}
@keyframes drift-3 {
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(14px,-22px) rotate(4deg)}
}

.float-icon--1{animation:drift-1 9s ease-in-out infinite}
.float-icon--2{animation:drift-2 7s ease-in-out infinite .4s}
.float-icon--3{animation:drift-1 10s ease-in-out infinite .8s}
.float-icon--4{animation:drift-3 6.5s ease-in-out infinite 1.2s}
.float-icon--5{animation:drift-2 8s ease-in-out infinite 1.6s}
.float-icon--6{animation:drift-3 7.5s ease-in-out infinite 2s}

/* ===== PULSE DOT ===== */
@keyframes pulse {
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.8);opacity:0}
}
.pulse-dot::after {
  animation:pulse 2s ease-in-out infinite;
}

/* ===== SCROLL REVEAL (blur entrance) ===== */
.reveal {
  opacity:0;
  transform:translateY(28px);
  transition:
    opacity .6s cubic-bezier(.25,.46,.45,.94),
    transform .6s cubic-bezier(.25,.46,.45,.94),
    filter .6s cubic-bezier(.25,.46,.45,.94);
  filter:blur(4px);
}
.reveal.visible {
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}

/* Stagger delays */
.reveal[data-delay="80"]{transition-delay:80ms}
.reveal[data-delay="100"]{transition-delay:.1s}
.reveal[data-delay="150"]{transition-delay:.15s}
.reveal[data-delay="160"]{transition-delay:.16s}
.reveal[data-delay="200"]{transition-delay:.2s}
.reveal[data-delay="240"]{transition-delay:.24s}
.reveal[data-delay="300"]{transition-delay:.3s}
.reveal[data-delay="320"]{transition-delay:.32s}
.reveal[data-delay="400"]{transition-delay:.4s}

/* Hero special entrance */
.reveal-hero {
  opacity:0;
  transform:translateY(24px);
  filter:blur(4px);
  transition:all .7s cubic-bezier(.25,.46,.45,.94);
}
.reveal-hero.visible {
  opacity:1;
  transform:translateY(0);
  filter:blur(0);
}
.reveal-hero:nth-child(2){transition-delay:.12s}
.reveal-hero:nth-child(3){transition-delay:.24s}
.reveal-hero:nth-child(4){transition-delay:.36s}
.reveal-hero:nth-child(5){transition-delay:.48s}

/* ===== SHIMMER (dark theme) ===== */
@keyframes shimmer {
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.shimmer-line{animation:shimmer 1.5s ease-in-out infinite}

/* ===== TYPING DOTS ===== */
@keyframes dot-bounce {
  0%,80%,100%{transform:scale(.5);opacity:.3}
  40%{transform:scale(1);opacity:1}
}
.typing-dots span:nth-child(1){animation:dot-bounce 1.4s ease-in-out infinite}
.typing-dots span:nth-child(2){animation:dot-bounce 1.4s ease-in-out infinite .16s}
.typing-dots span:nth-child(3){animation:dot-bounce 1.4s ease-in-out infinite .32s}

/* ===== 3D TILT ===== */
.tilt {
  transform-style:preserve-3d;
  transition:transform .3s ease;
  will-change:transform;
}

/* ===== STEP NUMBER PULSE (purple glow) ===== */
@keyframes num-pulse {
  0%,100%{box-shadow:0 8px 24px rgba(99,102,241,0.3),0 0 0 0 rgba(99,102,241,0.2)}
  50%{box-shadow:0 8px 24px rgba(99,102,241,0.3),0 0 0 12px rgba(99,102,241,0)}
}
.step__num{animation:num-pulse 3s ease-in-out infinite}

/* ===== BUTTON SHIMMER ON HOVER ===== */
.btn--primary::after {
  content:'';
  position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  transition:left .5s ease;
}
.btn--primary:hover::after{left:100%}

/* ===== COUNTER ENTRANCE ===== */
@keyframes slide-fade-up {
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ===== BADGE SHINE (glass sweep) ===== */
.badge-item:hover .badge-item__glow {
  transition:transform .8s ease;
}

/* ===== DAY CARD STAGGER ===== */
.demo__day-card:nth-child(1){transition-delay:0s}
.demo__day-card:nth-child(2){transition-delay:.12s}
.demo__day-card:nth-child(3){transition-delay:.24s}

/* ===== STORE BADGE HOVER SHIMMER ===== */
.store-badge {
  position:relative;overflow:hidden;
}
.store-badge::after {
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);
  transition:left .5s ease;
}
.store-badge:hover::after{left:100%}

/* ===== PROGRESS BAR ===== */
.prog__fill{transition:width 1.5s cubic-bezier(.25,.46,.45,.94) .3s}

/* ===== STEPS CONNECTOR ===== */
.steps__line-fill{transition:width 1.5s cubic-bezier(.25,.46,.45,.94)}

/* ===== NAV TRANSITIONS ===== */
.nav{transition:all .35s ease,transform .35s ease}

/* ===== ORB AMBIENT DRIFT ===== */
@keyframes orb-drift {
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(20px,15px)}
}
.hero__orb--1{animation:orb-drift 12s ease-in-out infinite}
.hero__orb--2{animation:orb-drift 15s ease-in-out infinite 3s}
.hero__orb--3{animation:orb-drift 10s ease-in-out infinite 6s}

.cta-section__orb--1{animation:orb-drift 14s ease-in-out infinite}
.cta-section__orb--2{animation:orb-drift 11s ease-in-out infinite 4s}

/* ===== PHONE MOCKUP ANIMATIONS ===== */

/* Notification float */
@keyframes notif-float-1 {
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(6px,-10px)}
}
@keyframes notif-float-2 {
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-8px,8px)}
}
.phone-notif--1{animation:notif-float-1 5s ease-in-out infinite}
.phone-notif--2{animation:notif-float-2 6s ease-in-out infinite .5s}

/* SVG route line draw */
@keyframes route-draw {
  to{stroke-dashoffset:0}
}
.ps__route-line{stroke-dashoffset:200;animation:route-draw 2s ease-out 1s forwards}
.ps__route-draw{stroke-dashoffset:300;animation:route-draw 2.5s ease-out .5s forwards}

/* Map pin pulse ring */
@keyframes pin-pulse {
  0%{r:12;opacity:.4}
  100%{r:22;opacity:0}
}
.ps__ping{animation:pin-pulse 2.5s ease-out infinite}
.ps__svg-pin:nth-child(7) .ps__ping{animation-delay:.3s}
.ps__svg-pin:nth-child(8) .ps__ping{animation-delay:.6s}

/* Discover card slide-in */
@keyframes disc-slide-1 {
  0%{opacity:0;transform:translateX(-12px)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes disc-slide-2 {
  0%{opacity:0;transform:translateX(12px)}
  100%{opacity:1;transform:translateX(0)}
}
.ps__discover-card--1{opacity:0;animation:disc-slide-1 .5s ease-out 1.5s forwards}
.ps__discover-card--2{opacity:0;animation:disc-slide-2 .5s ease-out 2s forwards}

/* Chat typing dots bounce */
@keyframes chat-dot-bounce {
  0%,80%,100%{transform:scale(.6);opacity:.25}
  40%{transform:scale(1);opacity:.8}
}
.ps__chat-typing span:nth-child(1){animation:chat-dot-bounce 1.4s ease-in-out infinite}
.ps__chat-typing span:nth-child(2){animation:chat-dot-bounce 1.4s ease-in-out infinite .16s}
.ps__chat-typing span:nth-child(3){animation:chat-dot-bounce 1.4s ease-in-out infinite .32s}

/* Online dot pulse */
@keyframes online-pulse {
  0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  50%{box-shadow:0 0 0 4px rgba(34,197,94,0)}
}
.ps__online-dot{animation:online-pulse 2s ease-in-out infinite}

/* ===== TYPING CURSOR (demo section) ===== */
@keyframes typing-cursor {
  0%,100%{opacity:1}
  50%{opacity:0}
}
.typing-cursor{
  display:inline-block;width:2px;height:14px;
  background:var(--clr-accent);
  animation:typing-cursor .8s ease infinite;
  margin-left:4px;vertical-align:middle;
}
.demo__activity-reveal{
  opacity:0;transform:translateX(-8px);
  transition:all .3s ease;
}
.demo__activity-reveal.typed{
  opacity:1;transform:translateX(0);
}

/* CTA Logo float */
@keyframes logo-float {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.cta-section__app-logo{animation:logo-float 4s ease-in-out infinite}



/* ===== LG-CARD HOVER GLOW ===== */
@keyframes card-border-glow {
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* Feature card entrance with glass effect */
.feat{transition:all .35s cubic-bezier(0.4,0,0.2,1)}
.feat:hover{
  box-shadow:0 12px 40px rgba(0,0,0,0.35),inset 0 1px 0 rgba(255,255,255,0.2),0 0 30px rgba(99,102,241,0.08);
}

/* ===== REDUCED MOTION ===== */
@media(prefers-reduced-motion:reduce){
  .float-icon,
  .phone-notif--1,.phone-notif--2,
  .ps__route-line,.ps__route-draw,
  .ps__ping,.ps__online-dot,
  .ps__discover-card--1,.ps__discover-card--2,
  .ps__chat-typing span,
  .cta-section__app-logo,
  .step__num,
  .shimmer-line,
  .typing-dots span,
  .typing-cursor,
  .hero__orb,
  .cta-section__orb,
  .pulse-dot::after {
    animation:none!important;
  }
  .phone-mockup{transform:none!important}
  .ps__route-line,.ps__route-draw{stroke-dashoffset:0!important}
  .ps__discover-card--1,.ps__discover-card--2{opacity:1!important;transform:none!important}
  .demo__marker-pulse{animation:none!important;display:none}
  .demo__activity-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .reveal,.reveal-hero {
    opacity:1!important;transform:none!important;
    filter:none!important;transition:none!important;
  }
  .demo__day-card{opacity:1!important;transform:none!important;transition:none!important}
  .tilt{transform:none!important;transition:none!important}
  .prog__fill,.steps__line-fill{transition:none!important}
  .lg-card,.feat,.price-card,.rev-card,.badge-item{transition:none!important}
}