/* ════════════════════════════════════════════════════════
   PetCare — All @keyframes + particle / parallax / cursor
   effect styles.
   ════════════════════════════════════════════════════════ */

/* ── SCROLL PROGRESS BAR ── */
#scrollProgress {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 0%; height: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, var(--orange-d), var(--orange), var(--orange-ll));
  transition: width .1s;
}

/* ── GLOW ORB (cursor follower) ── */
#glowOrb {
  position: fixed; z-index: 0;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,140,66,.07) 0%, transparent 70%);
  transform: translate(-50%,-50%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity .4s;
}
[data-theme="dark"] #glowOrb {
  background: radial-gradient(circle, rgba(255,140,66,.13) 0%, transparent 70%);
}

/* ── PAW TRAIL ── */
.paw-trail {
  position: fixed; z-index: 9999;
  font-size: 15px;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  will-change: opacity, transform;
}

/* ── 3D TILT / PARALLAX (hero device) ── */
.hero-device {
  transition: transform .15s ease-out;
  will-change: transform;
}

/* ── TYPEWRITER CURSOR ── */
.tw-cursor {
  display: inline-block;
  width: 3px; height: .85em;
  margin-left: 3px;
  border-radius: 2px;
  background: var(--orange-l);
  vertical-align: middle;
  animation: twBlink 1.1s ease-in-out infinite;
}
@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}

/* ── HERO FLOATING PARTICLES ── */
.hero-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: pFloat linear infinite;
}
@keyframes pFloat {
  0%   { transform: translateY(0) translateX(0); opacity: .5; }
  50%  { opacity: .9; }
  100% { transform: translateY(-110vh) translateX(30px); opacity: 0; }
}

/* ── SUN PULSE (day-mode hero sun) ── */
@keyframes sunPulse {
  0%, 100% {
    box-shadow:
      0 0 60px 25px rgba(255,220,0,.55),
      0 0 120px 60px rgba(255,170,0,.25),
      0 0 200px 90px rgba(255,130,0,.12);
  }
  50% {
    box-shadow:
      0 0 70px 30px rgba(255,220,0,.65),
      0 0 140px 70px rgba(255,170,0,.32),
      0 0 220px 100px rgba(255,130,0,.16);
  }
}

/* ── CTA BUTTON RIPPLE RINGS ── */
.cta-ring {
  position: fixed; z-index: 9996;
  width: 12px; height: 12px;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(1);
  opacity: .9;
  pointer-events: none;
}
[data-theme="light"] .cta-ring {
  border: 2.5px solid #E06A1A;
  background: rgba(224,106,26,.08);
  box-shadow: 0 0 10px rgba(224,106,26,.35);
}
[data-theme="dark"] .cta-ring {
  border: 2.5px solid #FF8C42;
  background: rgba(255,140,66,.08);
  box-shadow: 0 0 10px rgba(255,140,66,.4);
}
@keyframes ctaRingExpand {
  to { transform: translate(-50%,-50%) scale(24); opacity: 0; }
}

/* ── CTA PAW BURST ── */
.cta-paw-burst {
  position: fixed; z-index: 9997;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  will-change: transform, opacity;
}

/* ── BUTTON BOUNCE ── */
@keyframes btnBounce {
  0%   { transform: scale(1); }
  28%  { transform: scale(.91); }
  62%  { transform: scale(1.08); }
  85%  { transform: scale(.98); }
  100% { transform: scale(1); }
}
/* !important required: must override the inline magnetic-button transform */
.btn-bounce { animation: btnBounce .45s cubic-bezier(.22,1,.36,1) forwards !important; }