/* ============================================================
   KIDS — Motion & Effects Library
   motion.css

   Distilled from three references:
     - The Push (thepush.com.au)   → marquee stripes, color-block reveals,
                                       snap underlines, diagonal slashes
     - Everswap (everswap.com)      → rotating diamonds, tracking-in type,
                                       soft pulse glow, slow rotation
     - Maxima Therapy               → sticker wobble, squash/stretch press,
                                       confetti pops, hover-tilt
   ============================================================ */

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* — Push: horizontal marquee for sticker/text bands — */
@keyframes fp-marquee-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fp-marquee-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* — Push: color-block reveal (clip-path wipe) — */
@keyframes fp-wipe-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes fp-wipe-up {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* — Push: snap underline draws in — */
@keyframes fp-underline-kf {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* — Everswap: slow infinite rotation for decorative diamonds — */
@keyframes fp-rotate-slow {
  to { transform: rotate(360deg); }
}
@keyframes fp-rotate-diamond {
  0%   { transform: rotate(40deg); }
  50%  { transform: rotate(50deg); }
  100% { transform: rotate(40deg); }
}

/* — Everswap: tracking-in letterspacing (elegant entrance) — */
@keyframes fp-tracking-in {
  0%   { letter-spacing: 0.4em; opacity: 0; }
  60%  { opacity: 1; }
  100% { letter-spacing: -0.01em; opacity: 1; }
}

/* — Everswap: soft pulse glow (focus/online indicator) — */
@keyframes fp-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 12px transparent; opacity: 0.7; }
}

/* — Maxima/KIDS: sticker wobble on hover, idle bob, peel — */
@keyframes fp-wobble {
  0%, 100% { transform: rotate(var(--rot, -4deg)) scale(1); }
  25%      { transform: rotate(calc(var(--rot, -4deg) + 6deg)) scale(1.03); }
  75%      { transform: rotate(calc(var(--rot, -4deg) - 6deg)) scale(1.03); }
}
@keyframes fp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes fp-peel {
  0%   { transform: rotate(-4deg) translateY(0) scale(1); }
  50%  { transform: rotate(-12deg) translateY(-6px) scale(1.08); }
  100% { transform: rotate(-4deg) translateY(0) scale(1); }
}

/* — Maxima/KIDS: squash & stretch (press feedback) — */
@keyframes fp-squash {
  0%   { transform: scaleY(1) scaleX(1); }
  40%  { transform: scaleY(0.85) scaleX(1.1); }
  70%  { transform: scaleY(1.05) scaleX(0.95); }
  100% { transform: scaleY(1) scaleX(1); }
}

/* — Maxima/KIDS: confetti pop (celebration) — */
@keyframes fp-pop {
  0%   { transform: scale(0) rotate(0deg); opacity: 0; }
  40%  { transform: scale(1.3) rotate(180deg); opacity: 1; }
  100% { transform: scale(1) rotate(360deg); opacity: 1; }
}

/* — Scroll reveal: fade-up with tilt — */
@keyframes fp-reveal {
  from { opacity: 0; transform: translateY(40px) rotate(-2deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* — Push: horizontal slice/slash entrance — */
@keyframes fp-slice-in {
  0%   { transform: translateX(-110%) skewX(-12deg); }
  100% { transform: translateX(0) skewX(0); }
}

/* — Hero blob drift (slow, infinite) — */
@keyframes fp-drift {
  0%, 100% { transform: translate(0, 0); }
  33%      { transform: translate(20px, -16px); }
  66%      { transform: translate(-12px, 24px); }
}

/* ============================================================
   HELPER CLASSES — drop these on any element
   ============================================================ */

/* — Marquee bands (Push) — */
.fp-marquee { display: flex; gap: 32px; width: max-content; animation: fp-marquee-left 28s linear infinite; }
.fp-marquee--reverse { animation-name: fp-marquee-right; }
.fp-marquee--slow    { animation-duration: 60s; }
.fp-marquee--fast    { animation-duration: 14s; }
.fp-marquee-wrap     { overflow: hidden; }

/* — Underline-on-hover (Push snap underline) — */
.fp-underline {
  position: relative;
  text-decoration: none;
  border-bottom: 0;
}
.fp-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 4px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(.2,.8,.2,1);
}
.fp-underline:hover::after { transform: scaleX(1); }

/* — Diamond / rotated geometric tile (Everswap) — */
.fp-diamond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: var(--fp-lime);
  transform: rotate(45deg);
  border-radius: 12px;
  animation: fp-rotate-diamond 8s ease-in-out infinite;
}
.fp-diamond > * { transform: rotate(-45deg); }

/* — Rotating decoration (Everswap) — */
.fp-rotate-slow { animation: fp-rotate-slow 24s linear infinite; }

/* — Tracking-in entry for display text (Everswap) — */
.fp-tracking-in { animation: fp-tracking-in 800ms cubic-bezier(.2,.8,.2,1) both; }

/* — Pulse glow (status dots, focus emphasis) — */
.fp-pulse-glow { animation: fp-pulse-glow 1.8s ease-in-out infinite; }

/* — Wobble sticker on hover — */
.fp-wobble:hover { animation: fp-wobble 600ms cubic-bezier(.34,1.56,.64,1); }
.fp-peel:hover   { animation: fp-peel 700ms cubic-bezier(.34,1.56,.64,1); }
.fp-bob-loop     { animation: fp-bob 2s ease-in-out infinite; }

/* — Squash on press (combine with :active) — */
.fp-squash:active { animation: fp-squash 350ms cubic-bezier(.34,1.56,.64,1); }

/* — Scroll-reveal — apply .fp-reveal then JS adds .is-in — */
.fp-reveal { opacity: 0; transform: translateY(40px) rotate(-2deg); }
.fp-reveal.is-in {
  animation: fp-reveal 700ms cubic-bezier(.34,1.56,.64,1) forwards;
}
.fp-reveal.is-in.delay-1 { animation-delay: 80ms;  }
.fp-reveal.is-in.delay-2 { animation-delay: 160ms; }
.fp-reveal.is-in.delay-3 { animation-delay: 240ms; }
.fp-reveal.is-in.delay-4 { animation-delay: 320ms; }

/* — Drifting decorative blob — */
.fp-drift { animation: fp-drift 14s ease-in-out infinite; }
.fp-drift--slow { animation-duration: 24s; }

/* — Push slash entrance — */
.fp-slice-in { animation: fp-slice-in 600ms cubic-bezier(.2,.8,.2,1) both; }

/* — Diagonal accent stripe (Push category bars) — */
.fp-stripe-diag {
  position: relative;
  overflow: hidden;
}
.fp-stripe-diag::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background: repeating-linear-gradient(
    -22deg,
    var(--stripe-c, var(--fp-orange)) 0 28px,
    transparent 28px 56px
  );
  pointer-events: none;
  opacity: 0.18;
}

/* — Mouse-tilt card (JS-driven; CSS provides perspective) — */
.fp-tilt {
  transform-style: preserve-3d;
  transition: transform 250ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* — Confetti dot — for celebratory bursts — */
.fp-confetti {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  pointer-events: none;
  animation: fp-pop 700ms cubic-bezier(.34,1.56,.64,1) both;
}

/* ============================================================
   REDUCED MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fp-marquee,
  .fp-rotate-slow,
  .fp-diamond,
  .fp-bob-loop,
  .fp-pulse-glow,
  .fp-drift { animation: none !important; }
  .fp-reveal { opacity: 1; transform: none; }
}