/* ============================================================================
   Playful "everything's alive" motion layer — kid-facing site only (NOT admin).
   Ambient idle motion (float/bob/wiggle), bouncy entrances, hover + click
   feedback, sparkle cursor trail and confetti. Driven by js/playful.js, which
   distributes staggered idle animation so nothing moves in robotic unison.
   ALL of it is gated behind (prefers-reduced-motion: no-preference); with
   reduced motion the site goes calm and still.
   ============================================================================ */

/* ---------------------------- Keyframes ---------------------------- */
@keyframes pch-float   { 0%,100% { transform: translateY(0); }            50% { transform: translateY(-9px); } }
@keyframes pch-bob     { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes pch-wiggle  { 0%,100% { transform: rotate(-4deg); }            50% { transform: rotate(4deg); } }
@keyframes pch-sway    { 0%,100% { transform: rotate(-2.5deg); }          50% { transform: rotate(2.5deg); } }
@keyframes pch-breathe { 0%,100% { transform: scale(1); }                 50% { transform: scale(1.06); } }
@keyframes pch-swing   { 0%,100% { transform: translateY(0) rotate(0); }  25% { transform: translateY(-4px) rotate(3deg); } 75% { transform: translateY(-4px) rotate(-3deg); } }

@keyframes pch-pop      { 0% { transform: scale(1); } 40% { transform: scale(1.16) rotate(-3deg); } 70% { transform: scale(.95); } 100% { transform: scale(1); } }
@keyframes pch-pop-in   { 0% { opacity: 0; transform: translateY(26px) scale(.82) rotate(-2deg); } 100% { opacity: 1; transform: none; } }
@keyframes pch-name-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes pch-celebrate { 0% { transform: scale(1) rotate(0); } 25% { transform: scale(1.06) rotate(-4deg); } 50% { transform: scale(1.06) rotate(4deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes pch-jelly    { 0%,100% { transform: scale(1,1); } 30% { transform: scale(1.12,.88); } 50% { transform: scale(.9,1.1); } 70% { transform: scale(1.04,.96); } }
@keyframes pch-cta-pulse { 0%,100% { box-shadow: 0 8px 24px rgba(52,106,197,.25); } 50% { box-shadow: 0 12px 34px rgba(52,106,197,.5); } }

@keyframes pch-sparkle-fly  { 0% { transform: translate(0,0) scale(.3) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(180deg); opacity: 0; } }
@keyframes pch-confetti-fall { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }
@keyframes pch-trail-fade   { 0% { transform: scale(1) rotate(0); opacity: .9; } 100% { transform: scale(.2) rotate(90deg); opacity: 0; } }

/* One-shot classes toggled by JS */
.pch-pop { animation: pch-pop .45s cubic-bezier(.3,1.4,.5,1); }
.pch-name-pop { animation: pch-name-bounce .3s ease; }
.pch-celebrate { animation: pch-celebrate .6s ease; }

/* ---------------------- Bouncy entrance (reveal) ---------------------- */
/* Overrides the plain reveal from site.css with a springy overshoot. */
.reveal { opacity: 0; transform: translateY(30px) scale(.9) rotate(-1deg);
  transition: opacity .6s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* --------------------------- Idle motion --------------------------- */
/* JS adds .pch-alive + an inline animation with a randomised delay/duration so
   the whole page gently breathes without moving in lockstep. */
@media (prefers-reduced-motion: no-preference) {
  .pch-alive { will-change: transform; }

  /* Broad ambient life applied even without JS, as a floor. */
  .sticker__icon { animation: pch-bob 3.2s ease-in-out infinite; }
  .hero__particle { animation: pch-float 4s ease-in-out infinite; }
  .hero__particle:nth-child(2n) { animation-duration: 5.2s; animation-delay: .6s; }
  .hero__particle:nth-child(3n) { animation-duration: 4.6s; animation-delay: 1.1s; }
  .brand__mark { animation: pch-swing 4s ease-in-out infinite; }
  .social-btn { animation: pch-wiggle 3s ease-in-out infinite; }
  .social-btn:nth-child(2n) { animation-delay: .5s; }
  .eyebrow { display: inline-block; animation: pch-sway 4.5s ease-in-out infinite; }
  .theme-tile img { animation: pch-bob 3.4s ease-in-out infinite; }

  /* CTAs invite a tap */
  .btn-primary { animation: pch-cta-pulse 2.4s ease-in-out infinite; }
  #pch-add-to-cart:not(:disabled) { animation: pch-cta-pulse 1.8s ease-in-out infinite; }
}

/* ------------------------- Hover / press feedback ------------------------- */
/* Tactile squish on anything tappable */
.btn:active, .gender-pill:active, .pch-theme-tile:active,
.nav__link:active, .pay-method:active, .social-btn:active { transform: scale(.94); }

.nav__link { transition: transform .15s ease, color .15s ease; }
.nav__link:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: no-preference) {
  .btn:hover { animation: pch-jelly .5s ease; }
  .pch-theme-tile:hover, .gender-pill:hover { animation: pch-wiggle .45s ease; }
  .sticker:not(.tilt):hover { animation: pch-swing .6s ease; }
  .social-btn:hover { animation: pch-pop .5s cubic-bezier(.3,1.4,.5,1); }
  .sticker__icon:hover { animation: pch-jelly .5s ease; }
}

/* Selected theme tile: bouncy checkmark badge */
.pch-theme-tile { position: relative; }
.pch-theme-tile.selected::after {
  content: "✓";
  position: absolute; top: -7px; inset-inline-end: -7px;
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff; border: 2px solid #fff;
  border-radius: var(--radius-pill); font-size: .8rem; font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.18); animation: pch-pop .45s cubic-bezier(.3,1.4,.5,1);
}
.shop-form[data-gender="Girl"] .pch-theme-tile.selected::after { background: var(--pink-deep); }

/* ------------------------- Particles (created by JS) ------------------------- */
.pch-fx { position: fixed; pointer-events: none; z-index: 9998; }
.pch-sparkle {
  position: absolute; width: 12px; height: 12px; background: var(--sun, #FFD34E);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: pch-sparkle-fly .7s ease-out forwards;
}
.pch-confetti { position: absolute; width: 9px; height: 14px; border-radius: 2px;
  animation: pch-confetti-fall var(--dur, 1s) ease-out forwards; }
.pch-trail {
  position: fixed; width: 10px; height: 10px; pointer-events: none; z-index: 9997;
  background: var(--sun, #FFD34E);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: pch-trail-fade .6s ease-out forwards;
}

/* Reduced motion: strip every looping animation (one-shot particles are also skipped in JS). */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .sticker__icon, .hero__particle, .brand__mark, .social-btn, .eyebrow,
  .theme-tile img, .btn-primary, #pch-add-to-cart { animation: none !important; }
}