/**
 * Animal-themed motion: single sparse paw texture + light hero accents.
 * GPU-first (transform/opacity), respects prefers-reduced-motion.
 */

/* ─── Scroll variables (set by cinematic-effects.js ticker) ─── */
:root {
  --pet-scroll-y: 0px;
  --pet-scroll-n: 0;
}

/* One fixed layer — low contrast, wide spacing (no stacked planes = no moiré) */
#pet-scroll-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.pet-paw-plane {
  position: absolute;
  inset: -10% -8%;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23b8962e'%3E%3Cellipse cx='38' cy='78' rx='22' ry='26'/%3E%3Ccircle cx='28' cy='42' r='11'/%3E%3Ccircle cx='50' cy='38' r='11'/%3E%3Ccircle cx='70' cy='46' r='10'/%3E%3Ccircle cx='78' cy='64' r='9'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 280px 280px;
  background-repeat: repeat;
  background-position: 0 0;
  transform: translate3d(0, calc(var(--pet-scroll-y, 0px) * -0.022), 0);
  will-change: transform;
}

/* ─── Hero: a few faint floats (no edge strips / no section overlays) ─── */
.pet-hero-floats {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.pet-hero-float {
  position: absolute;
  width: clamp(32px, 4vw, 48px);
  height: clamp(32px, 4vw, 48px);
  opacity: 0.14;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%23ffffff' opacity='0.88'%3E%3Cellipse cx='38' cy='78' rx='22' ry='26'/%3E%3Ccircle cx='28' cy='42' r='11'/%3E%3Ccircle cx='50' cy='38' r='11'/%3E%3Ccircle cx='70' cy='46' r='10'/%3E%3Ccircle cx='78' cy='64' r='9'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 1px 8px rgba(212, 175, 55, 0.18));
  animation: pet-hero-drift 18s ease-in-out infinite;
  will-change: transform;
}

.pet-hero-float--cat {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2' opacity='0.85'%3E%3Cellipse cx='32' cy='65' rx='18' ry='22'/%3E%3Ccircle cx='24' cy='36' r='9'/%3E%3Ccircle cx='42' cy='32' r='9'/%3E%3Ccircle cx='58' cy='38' r='8'/%3E%3Ccircle cx='64' cy='52' r='7'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.12;
}

.pet-hero-float:nth-child(1) {
  left: 10%;
  top: 24%;
  animation-duration: 19s;
}

.pet-hero-float:nth-child(2) {
  right: 14%;
  top: 36%;
  animation-delay: -5s;
  animation-duration: 16s;
}

.pet-hero-float:nth-child(3) {
  left: 22%;
  bottom: 26%;
  animation-delay: -8s;
  animation-duration: 20s;
  opacity: 0.11;
}

@keyframes pet-hero-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-8deg) scale(1);
  }
  50% {
    transform: translate3d(8px, -12px, 0) rotate(6deg) scale(1.03);
  }
}

/* ─── Icons & badges ─── */
@media (prefers-reduced-motion: no-preference) {
  .feature-card .feature-icon,
  .gallery-item .gallery-icon,
  .service-badge {
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .feature-card.pet-motion-inview .feature-icon {
    animation: pet-icon-pop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .gallery-item.pet-motion-inview .gallery-icon {
    animation: pet-gallery-bounce 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  }

  .service-card.pet-motion-inview .service-badge {
    animation: pet-badge-wiggle 0.75s cubic-bezier(0.34, 1.65, 0.64, 1) both;
  }
}

@keyframes pet-icon-pop {
  0% {
    transform: scale(0.65) rotate(-18deg);
    opacity: 0.5;
  }
  70% {
    transform: scale(1.12) rotate(6deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes pet-gallery-bounce {
  0% {
    transform: translate3d(0, 22px, 0) scale(0.75);
    opacity: 0;
  }
  65% {
    transform: translate3d(0, -8px, 0) scale(1.08);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes pet-badge-wiggle {
  0% {
    transform: scale(0.88) rotate(-4deg);
    opacity: 0.85;
  }
  40% {
    transform: scale(1.05) rotate(3deg);
  }
  70% {
    transform: scale(0.98) rotate(-2deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .pet-brand-theme section:not(.hero).pet-section-active::before {
    opacity: 1;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(212, 175, 55, 0.18),
      rgba(212, 175, 55, 0.12),
      rgba(212, 175, 55, 0.18),
      transparent
    );
    transition: opacity 0.6s ease, background 0.6s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pet-scroll-atmosphere,
  .pet-hero-floats {
    display: none !important;
  }

  .pet-motion-inview {
    animation: none !important;
  }
}