/* =============================================
   J's Grooming Lounge — Animations
   jsg-animations.css
   ============================================= */

/* ---- Entrance Animations ---- */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideRight {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroSlideLeft {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* ---- Hero Animations ---- */
.hero-animate-1 { animation: heroSlideRight .9s ease both; animation-delay: .2s; }
.hero-animate-2 { animation: heroFadeIn .9s ease both; animation-delay: .4s; }
.hero-animate-3 { animation: heroFadeIn .9s ease both; animation-delay: .6s; }
.hero-animate-4 { animation: heroFadeIn .9s ease both; animation-delay: .8s; }

/* ---- Floating Paw Prints ---- */
.paw-1 { animation: floatPaw1 7s ease-in-out infinite; animation-delay: 0s; }
.paw-2 { animation: floatPaw2 9s ease-in-out infinite; animation-delay: 1.5s; }
.paw-3 { animation: floatPaw1 8s ease-in-out infinite; animation-delay: 3s; }
.paw-4 { animation: floatPaw2 6s ease-in-out infinite; animation-delay: .5s; }

@keyframes floatPaw1 {
  0%,100% { transform: translateY(0) rotate(-8deg) scale(1); }
  33%     { transform: translateY(-22px) rotate(5deg) scale(1.1); }
  66%     { transform: translateY(-10px) rotate(-12deg) scale(.95); }
}
@keyframes floatPaw2 {
  0%,100% { transform: translateY(0) rotate(12deg); }
  50%     { transform: translateY(-28px) rotate(-5deg); }
}

/* ---- Scroll Reveal ---- */
.reveal { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.reveal.from-bottom { transform: translateY(40px); }
.reveal.from-left   { transform: translateX(-40px); }
.reveal.from-right  { transform: translateX(40px); }
.reveal.scale-in    { transform: scale(.92); }
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: .1s !important; }
.reveal-delay-2 { transition-delay: .2s !important; }
.reveal-delay-3 { transition-delay: .3s !important; }
.reveal-delay-4 { transition-delay: .4s !important; }
.reveal-delay-5 { transition-delay: .5s !important; }
.reveal-delay-6 { transition-delay: .6s !important; }

/* ---- Pulsing Accent ---- */
.pulse-accent {
  animation: pulseAccent 2.5s ease-in-out infinite;
}
@keyframes pulseAccent {
  0%,100% { box-shadow: 0 0 0 0 rgba(244,162,97,.4); }
  50%     { box-shadow: 0 0 0 12px rgba(244,162,97,0); }
}

/* ---- Shimmer (loading skeleton) ---- */
.shimmer {
  background: linear-gradient(90deg, rgba(216,195,165,.2) 25%, rgba(216,195,165,.4) 50%, rgba(216,195,165,.2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Counter Animation ---- */
.counter-num { transition: color .3s ease; }
.counter-animated { color: var(--accent); }

/* ---- Tab Fade ---- */
.tab-pane { animation: tabFade .35s ease; }
@keyframes tabFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Carousel Slide ---- */
@keyframes slideFromRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes slideFromLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ---- Spinner ---- */
.jsg-spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(46,91,79,.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Micro interactions ---- */
.hover-scale { transition: transform .2s ease; }
.hover-scale:hover { transform: scale(1.04); }
.hover-glow:hover {
  box-shadow: 0 0 0 3px rgba(244,162,97,.3), var(--shadow-md);
}

/* ---- Page Transition Overlay ---- */
.page-transition {
  position: fixed; inset: 0;
  background: var(--primary);
  z-index: 99999;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s cubic-bezier(.77,0,.18,1);
  pointer-events: none;
}
.page-transition.entering {
  transform: scaleY(1);
  transform-origin: bottom;
}
.page-transition.leaving {
  transform: scaleY(0);
  transform-origin: top;
}

/* ---- Star Rating Hover ---- */
.star-rating-interactive span {
  cursor: pointer;
  font-size: 1.5rem;
  color: rgba(216,195,165,.6);
  transition: color .15s ease;
}
.star-rating-interactive:hover span,
.star-rating-interactive span.active { color: var(--accent); }

/* ---- Typewriter ---- */
.typewriter { border-right: 2px solid var(--accent); white-space: nowrap; overflow: hidden; display: inline-block; }
.typewriter-done { border-right: none; }

/* ---- Notification Toast ---- */
.jsg-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--primary);
  color: var(--white);
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 9999;
  font-size: .92rem;
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(.77,0,.18,1);
  max-width: 320px;
}
.jsg-toast.show { transform: translateX(0); }
.jsg-toast.success { background: var(--primary); border-left: 4px solid var(--accent); }
.jsg-toast.error { background: #c0392b; border-left: 4px solid #e74c3c; }