/* =============================================================
   PeekABaby.ca  —  Animations
   Keyframes, scroll-reveal, micro-interactions
   ============================================================= */

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}
.reveal[data-d="6"]{transition-delay:.48s}

.reveal-l{opacity:0;transform:translateX(-46px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal-l.in{opacity:1;transform:none}
.reveal-r{opacity:0;transform:translateX(46px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.reveal-r.in{opacity:1;transform:none}
.reveal-s{opacity:0;transform:scale(.9);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal-s.in{opacity:1;transform:none}

/* ---- keyframes ---- */
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes floatX{0%,100%{transform:translateX(0)}50%{transform:translateX(12px)}}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(28px,-22px) scale(1.08)}
  66%{transform:translate(-22px,18px) scale(.94)}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinR{to{transform:rotate(-360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.14);opacity:.82}}
@keyframes beat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.16)}
  28%{transform:scale(1)}
  42%{transform:scale(1.12)}
  56%{transform:scale(1)}
}
@keyframes ripple{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
@keyframes sweep{0%{transform:translateY(-100%)}100%{transform:translateY(220%)}}
@keyframes ecg{to{stroke-dashoffset:0}}
@keyframes shimmer{0%{background-position:-460px 0}100%{background-position:460px 0}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes wave{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
@keyframes rise{0%{transform:translateY(0);opacity:0}10%{opacity:.5}100%{transform:translateY(-180px);opacity:0}}

/* ---- hero word reveal ---- */
.word{display:inline-block;opacity:0;transform:translateY(40px);
  animation:fadeUp .85s var(--ease) forwards}
.word:nth-child(1){animation-delay:.12s}
.word:nth-child(2){animation-delay:.24s}
.word:nth-child(3){animation-delay:.36s}
.word:nth-child(4){animation-delay:.48s}
.word:nth-child(5){animation-delay:.60s}
.word:nth-child(6){animation-delay:.72s}
.word:nth-child(7){animation-delay:.84s}

.fade-seq{opacity:0;animation:fadeUp .85s var(--ease) forwards}
.d-1{animation-delay:.5s}.d-2{animation-delay:.7s}.d-3{animation-delay:.9s}
.d-4{animation-delay:1.1s}.d-5{animation-delay:1.3s}

/* ---- decorative motion utilities ---- */
.float{animation:floatY 6s ease-in-out infinite}
.float-slow{animation:floatY 9s ease-in-out infinite}
.spin-slow{animation:spin 26s linear infinite}
.spin-rev{animation:spinR 34s linear infinite}
.beat{animation:beat 2.4s ease-in-out infinite}

/* ---- scan card sweep ---- */
.scan-sweep{
  position:absolute;left:0;right:0;height:46%;
  background:linear-gradient(transparent,rgba(226,145,140,.5),transparent);
  animation:sweep 3.4s ease-in-out infinite;
}

/* ---- counter shimmer placeholder ---- */
.shimmer{
  background:linear-gradient(90deg,var(--cream) 25%,var(--blush) 50%,var(--cream) 75%);
  background-size:920px 100%;animation:shimmer 1.6s linear infinite;
}

/* ---- marquee ---- */
.mq{overflow:hidden;white-space:nowrap}
.mq-track{display:inline-flex;animation:marquee 32s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}

/* ---- equalizer (heartbeat bar) ---- */
.eq{display:flex;align-items:flex-end;gap:4px;height:34px}
.eq i{width:5px;background:var(--rose-deep);border-radius:3px;animation:wave 1s ease-in-out infinite}
.eq i:nth-child(1){animation-delay:0s}
.eq i:nth-child(2){animation-delay:.15s}
.eq i:nth-child(3){animation-delay:.3s}
.eq i:nth-child(4){animation-delay:.45s}
.eq i:nth-child(5){animation-delay:.6s}
.eq i:nth-child(6){animation-delay:.3s}
.eq i:nth-child(7){animation-delay:.15s}

/* ---- hover lift cards already in style.css; add tilt on images ---- */
.hov-zoom{overflow:hidden}
.hov-zoom img,.hov-zoom .zoomable{transition:transform .6s var(--ease)}
.hov-zoom:hover img,.hov-zoom:hover .zoomable{transform:scale(1.07)}

/* ---- count badge tick ---- */
.tick{display:inline-block;animation:scaleIn .5s var(--ease)}

/* ---- reduced motion ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal,.reveal-l,.reveal-r,.reveal-s{opacity:1!important;transform:none!important}
  .word,.fade-seq{opacity:1!important;transform:none!important}
}