/* ============================================
   CERONAA PET CARE - ANIMATIONS STYLESHEET
   Smooth, professional animations and transitions
   ============================================ */

/* KEYFRAME ANIMATIONS */
@keyframes ceronaaFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ceronaaFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ceronaaFadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ceronaaFadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ceronaaFadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ceronaaSlideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes ceronaaZoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ceronaaRotateIn {
  from {
    opacity: 0;
    transform: rotate(-10deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

@keyframes ceronaaFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes ceronaaGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(139, 157, 131, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(139, 157, 131, 0.6);
  }
}

@keyframes ceronaaShimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@keyframes ceronaaCountUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ceronaaWave {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes ceronaaHeartbeat {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.05);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.05);
  }
}

@keyframes ceronaaProgressBar {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ANIMATION UTILITY CLASSES */
.ceronaa-animate-fade-in {
  animation: ceronaaFadeIn 0.6s ease-out;
}

.ceronaa-animate-fade-in-up {
  animation: ceronaaFadeInUp 0.8s ease-out;
}

.ceronaa-animate-fade-in-down {
  animation: ceronaaFadeInDown 0.8s ease-out;
}

.ceronaa-animate-fade-in-left {
  animation: ceronaaFadeInLeft 0.8s ease-out;
}

.ceronaa-animate-fade-in-right {
  animation: ceronaaFadeInRight 0.8s ease-out;
}

.ceronaa-animate-zoom-in {
  animation: ceronaaZoomIn 0.6s ease-out;
}

.ceronaa-animate-rotate-in {
  animation: ceronaaRotateIn 0.7s ease-out;
}

.ceronaa-animate-float {
  animation: ceronaaFloat 3s ease-in-out infinite;
}

.ceronaa-animate-glow {
  animation: ceronaaGlow 2s ease-in-out infinite;
}

.ceronaa-animate-heartbeat {
  animation: ceronaaHeartbeat 1.5s ease-in-out infinite;
}

/* STAGGERED ANIMATIONS */
.ceronaa-stagger-1 {
  animation-delay: 0.1s;
}

.ceronaa-stagger-2 {
  animation-delay: 0.2s;
}

.ceronaa-stagger-3 {
  animation-delay: 0.3s;
}

.ceronaa-stagger-4 {
  animation-delay: 0.4s;
}

.ceronaa-stagger-5 {
  animation-delay: 0.5s;
}

.ceronaa-stagger-6 {
  animation-delay: 0.6s;
}

/* HOVER EFFECTS */
.ceronaa-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ceronaa-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(58, 63, 71, 0.2);
}

.ceronaa-hover-scale {
  transition: transform 0.3s ease;
}

.ceronaa-hover-scale:hover {
  transform: scale(1.05);
}

.ceronaa-hover-rotate {
  transition: transform 0.3s ease;
}

.ceronaa-hover-rotate:hover {
  transform: rotate(5deg);
}

.ceronaa-hover-shine {
  position: relative;
  overflow: hidden;
}

.ceronaa-hover-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.ceronaa-hover-shine:hover::before {
  left: 100%;
}

/* LOADING ANIMATIONS */
.ceronaa-loading-spinner {
  border: 4px solid rgba(139, 157, 131, 0.2);
  border-top-color: #8B9D83;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: ceronaa-spin 0.8s linear infinite;
}

@keyframes ceronaa-spin {
  to {
    transform: rotate(360deg);
  }
}

.ceronaa-loading-dots {
  display: inline-flex;
  gap: 8px;
}

.ceronaa-loading-dot {
  width: 8px;
  height: 8px;
  background: #8B9D83;
  border-radius: 50%;
  animation: ceronaa-bounce 1.4s infinite ease-in-out both;
}

.ceronaa-loading-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.ceronaa-loading-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes ceronaa-bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* SCROLL-TRIGGERED ANIMATIONS */
.ceronaa-scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.ceronaa-scroll-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.ceronaa-scroll-reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.ceronaa-scroll-reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.ceronaa-scroll-reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.ceronaa-scroll-reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.ceronaa-scroll-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.ceronaa-scroll-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* PARALLAX EFFECT */
.ceronaa-parallax {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* TEXT ANIMATIONS */
.ceronaa-text-gradient-animated {
  background: linear-gradient(90deg, #8B9D83, #A8B89F, #8B9D83);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ceronaaGradientShift 3s ease infinite;
}

@keyframes ceronaaGradientShift {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

.ceronaa-text-shimmer {
  background: linear-gradient(90deg, #3A3F47 30%, #8B9D83 50%, #3A3F47 70%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ceronaaShimmer 3s linear infinite;
}

/* BUTTON RIPPLE EFFECT */
.ceronaa-btn-ripple {
  position: relative;
  overflow: hidden;
}

.ceronaa-btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ceronaa-btn-ripple:active::after {
  width: 300px;
  height: 300px;
}

/* PROGRESS BAR ANIMATION */
.ceronaa-progress-bar {
  height: 4px;
  background: rgba(139, 157, 131, 0.2);
  border-radius: 2px;
  overflow: hidden;
}

.ceronaa-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8B9D83, #A8B89F);
  animation: ceronaaProgressBar 2s ease-out;
}

/* MODAL ANIMATIONS */
.ceronaa-modal-fade-in {
  animation: ceronaaFadeIn 0.3s ease;
}

.ceronaa-modal-slide-up {
  animation: ceronaaSlideUp 0.4s ease;
}

/* CARD REVEAL ANIMATIONS */
.ceronaa-card-reveal-bottom {
  position: relative;
  overflow: hidden;
}

.ceronaa-card-reveal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(58, 63, 71, 0.95), transparent);
  padding: 1.5rem;
  transform: translateY(100%);
  transition: transform 0.4s ease;
}

.ceronaa-card-reveal-bottom:hover .ceronaa-card-reveal-content {
  transform: translateY(0);
}

/* COUNTER ANIMATION */
.ceronaa-counter {
  animation: ceronaaCountUp 1s ease-out;
}

/* IMAGE ZOOM ON HOVER */
.ceronaa-image-zoom-wrapper {
  overflow: hidden;
  border-radius: 16px;
}

.ceronaa-image-zoom {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ceronaa-image-zoom-wrapper:hover .ceronaa-image-zoom {
  transform: scale(1.1);
}

/* SKELETON LOADING */
.ceronaa-skeleton {
  background: linear-gradient(90deg, #E5DFD0 25%, #F5EFE0 50%, #E5DFD0 75%);
  background-size: 200% 100%;
  animation: ceronaaShimmer 1.5s infinite;
  border-radius: 8px;
}

.ceronaa-skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.ceronaa-skeleton-title {
  height: 32px;
  margin-bottom: 16px;
}

.ceronaa-skeleton-image {
  height: 200px;
}

/* NOTIFICATION SLIDE IN */
.ceronaa-notification-slide-in {
  animation: ceronaaFadeInRight 0.5s ease;
}

/* PULSE EFFECT */
.ceronaa-pulse {
  animation: ceronaa-pulse 2s infinite;
}

@keyframes ceronaa-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}

/* WOBBLE EFFECT */
.ceronaa-wobble {
  animation: ceronaa-wobble 1s ease;
}

@keyframes ceronaa-wobble {
  0%, 100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-10px) rotate(-5deg);
  }
  30% {
    transform: translateX(10px) rotate(3deg);
  }
  45% {
    transform: translateX(-10px) rotate(-3deg);
  }
  60% {
    transform: translateX(10px) rotate(2deg);
  }
  75% {
    transform: translateX(-5px) rotate(-1deg);
  }
}

/* EXPAND COLLAPSE ANIMATIONS */
.ceronaa-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.ceronaa-expand.active {
  max-height: 1000px;
}

/* SMOOTH SCROLL INDICATOR */
.ceronaa-scroll-indicator {
  animation: ceronaa-scroll-bounce 2s infinite;
}

@keyframes ceronaa-scroll-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(10px);
  }
  60% {
    transform: translateY(5px);
  }
}

/* REDUCE MOTION FOR ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .ceronaa-animate-float,
  .ceronaa-animate-glow,
  .ceronaa-animate-heartbeat,
  .ceronaa-pulse,
  .ceronaa-loading-spinner,
  .ceronaa-loading-dot {
    animation: none;
  }
}