.hero-copy {
  animation: heroBounceIn 1.05s cubic-bezier(0.23, 1.18, 0.35, 1) both;
}

@keyframes heroBounceIn {
  0% {
    opacity: 0;
    transform: translateY(56px) scale(0.88);
  }
  68% {
    opacity: 1;
    transform: translateY(-8px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.hero h1 {
  animation: titlePulse 5.2s ease-in-out infinite;
}

@keyframes titlePulse {
  0%,
  100% {
    letter-spacing: 0.03em;
  }
  50% {
    letter-spacing: 0.05em;
  }
}

#three-canvas {
  animation: jarEnter 1.2s cubic-bezier(0.18, 0.88, 0.3, 1.18) both;
}

@keyframes jarEnter {
  from {
    opacity: 0;
    transform: translateY(90px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.parallax-layer {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  transition: transform 0.4s ease;
}

/* ===== FLAVORS ===== */

.flavor-panel.active .flavor-jar {
  animation: rotateJar3D 7s linear infinite;
}

@keyframes rotateJar3D {
  0% {
    transform: perspective(1400px) rotateY(-14deg);
  }
  50% {
    transform: perspective(1400px) rotateY(14deg);
  }
  100% {
    transform: perspective(1400px) rotateY(-14deg);
  }
}

.flavor-panel.active .line {
  animation: lineReveal 0.75s ease forwards;
}

.flavor-panel.active .line:nth-of-type(2) {
  animation-delay: 0.16s;
}

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

.flavor-panel.active .flavor-notes li {
  opacity: 0;
  transform: translateX(10px);
  animation: noteSlideIn 0.5s ease forwards;
}

.flavor-panel.active .flavor-notes li:nth-child(1) {
  animation-delay: 0.18s;
}

.flavor-panel.active .flavor-notes li:nth-child(2) {
  animation-delay: 0.27s;
}

.flavor-panel.active .flavor-notes li:nth-child(3) {
  animation-delay: 0.36s;
}

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

/* ===== EXPERIENCE / STORY / CTA ===== */

.experience-card:hover {
  transform: translateY(-8px) rotate(-0.8deg);
  box-shadow: 0 20px 30px rgba(15, 6, 4, 0.33);
}

.story-card:hover {
  transform: translateY(-8px) rotate(1deg);
  box-shadow: 0 24px 36px rgba(66, 29, 17, 0.23);
}

.compare-col {
  animation: compareFloat 5s ease-in-out infinite;
}

.compare-col.bad {
  animation-delay: -1.6s;
}

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

.final-cta {
  animation: ctaGlow 6s ease-in-out infinite;
}

@keyframes ctaGlow {
  0%,
  100% {
    box-shadow: 0 24px 44px rgba(18, 7, 5, 0.32);
  }
  50% {
    box-shadow: 0 28px 54px rgba(235, 150, 88, 0.22);
  }
}

/* ===== PRODUCT GRID ===== */

.product-grid-floating-tags span {
  animation: productTagFloat 4.2s ease-in-out infinite;
}

.product-grid-floating-tags span:nth-child(2) {
  animation-delay: -0.8s;
}

.product-grid-floating-tags span:nth-child(3) {
  animation-delay: -1.6s;
}

.product-grid-floating-tags span:nth-child(4) {
  animation-delay: -0.35s;
}

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

.product-card {
  transition:
    transform 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease;
}

.product-card:hover {
  --tilt-z: 18px;
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    translateZ(var(--tilt-z))
    translateY(-10px);
  border-color: rgba(255, 228, 196, 0.36);
  box-shadow: 0 28px 46px rgba(7, 3, 2, 0.38);
}

.product-card:hover .product-card-jar {
  animation: productJarFloat 2.8s ease-in-out infinite;
}

@keyframes productJarFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg) scale(1);
  }
  50% {
    transform: translateY(-10px) rotate(4deg) scale(1.03);
  }
}

.product-card-rings span:nth-child(1) {
  animation: ringSpin 10s linear infinite;
}

.product-card-rings span:nth-child(2) {
  animation: ringSpinReverse 13s linear infinite;
}

.product-card-rings span:nth-child(3) {
  animation: ringPulse 4.5s ease-in-out infinite;
}

@keyframes ringSpin {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1.04);
  }
}

@keyframes ringSpinReverse {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(-360deg) scale(0.96);
  }
}

@keyframes ringPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.55;
  }
}

.product-card:hover .product-card-glow {
  animation: cardGlowPulse 1.6s ease-in-out infinite;
}

@keyframes cardGlowPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.32;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

/* ===== PRODUCT MODAL ===== */

.product-modal.is-open .product-modal-dialog {
  animation: productModalPop 0.45s cubic-bezier(0.2, 0.9, 0.26, 1.08);
}

@keyframes productModalPop {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.94);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.product-modal.is-open .product-modal-main-image {
  animation: modalJarEntrance 0.65s cubic-bezier(0.2, 0.9, 0.26, 1.05);
}

@keyframes modalJarEntrance {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.product-modal-thumb:hover {
  transform: translateY(-4px);
}

/* ===== REVIEWS ===== */

.reviews-stats span {
  animation: reviewStatFloat 4.4s ease-in-out infinite;
}

.reviews-stats span:nth-child(2) {
  animation-delay: -0.8s;
}

.reviews-stats span:nth-child(3) {
  animation-delay: -1.6s;
}

.reviews-stats span:nth-child(4) {
  animation-delay: -0.35s;
}

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

.review-card:hover {
  --tilt-z: 14px;
  box-shadow: 0 24px 42px rgba(8, 3, 2, 0.34);
}

.review-card.is-active {
  animation: reviewSpotlight 3.6s ease-in-out infinite;
}

@keyframes reviewSpotlight {
  0%,
  100% {
    transform: perspective(980px) rotateX(var(--tilt-x))
      rotateY(var(--tilt-y)) translateZ(var(--tilt-z));
  }
  50% {
    transform: perspective(980px) rotateX(var(--tilt-x))
      rotateY(var(--tilt-y)) translateZ(calc(var(--tilt-z) + 8px));
  }
}

.reviews-nav:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 16px 26px rgba(8, 3, 2, 0.28);
}

/* ===== GALLERY ===== */

.gallery-slide.is-active .gallery-slide-media img {
  animation: galleryImageFloat 8s ease-in-out infinite;
}

@keyframes galleryImageFloat {
  0%,
  100% {
    transform: scale(1) translateY(0);
  }
  50% {
    transform: scale(1.04) translateY(-6px);
  }
}

.gallery-slide.is-active .gallery-slide-copy {
  animation: galleryCopyPop 0.65s cubic-bezier(0.2, 0.9, 0.26, 1.08);
}

@keyframes galleryCopyPop {
  0% {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gallery-slide.is-active .gallery-slide-kicker,
.gallery-slide.is-active .gallery-slide-copy h3,
.gallery-slide.is-active .gallery-slide-copy p:last-child {
  animation: galleryTextReveal 0.6s ease both;
}

.gallery-slide.is-active .gallery-slide-copy h3 {
  animation-delay: 0.08s;
}

.gallery-slide.is-active .gallery-slide-copy p:last-child {
  animation-delay: 0.16s;
}

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

.gallery-nav {
  animation: galleryNavFloat 4.4s ease-in-out infinite;
}

.gallery-nav.next {
  animation-delay: -1.4s;
}

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

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== MOBILE CTA / FOOTER PERFORMANCE FIX ===== */
@media (max-width: 760px) {
  .final-cta {
    animation: none !important;
    box-shadow: 0 10px 22px rgba(18, 7, 5, 0.14) !important;
    transform: none !important;
    will-change: auto !important;
    contain: layout paint;
  }

  .final-cta::before,
  .final-cta::after {
    filter: none !important;
    opacity: 0.12 !important;
  }

  footer {
    box-shadow: 0 8px 18px rgba(74, 30, 19, 0.08) !important;
    contain: layout paint;
  }

  .footer-social-link {
    transition: none !important;
    box-shadow: none !important;
  }

  .page-noise {
    display: none !important;
  }
}