/* ================================================
   Aaray PACKAGING — ANIMATIONS
   animations.css — keyframes, scroll transitions, float, hover effects
   ================================================ */

/* ---- Float Animations ---- */
@keyframes float-a {
  0%,
  100% {
    transform: translateY(0px) rotate(-2deg);
  }
  50% {
    transform: translateY(-18px) rotate(-2deg);
  }
}

@keyframes float-b {
  0%,
  100% {
    transform: translateY(-8px) rotate(3deg);
  }
  50% {
    transform: translateY(10px) rotate(3deg);
  }
}

@keyframes float-c {
  0%,
  100% {
    transform: translateY(4px) rotate(-1deg);
  }
  50% {
    transform: translateY(-14px) rotate(-1deg);
  }
}

.float-a {
  animation: float-a 5.5s ease-in-out infinite;
}

.float-b {
  animation: float-b 7s ease-in-out infinite;
}

.float-c {
  animation: float-c 6.2s ease-in-out infinite;
}

/* ---- Blob pulse ---- */
@keyframes blob-pulse {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  33% {
    transform: scale(1.08) rotate(5deg);
  }
  66% {
    transform: scale(0.95) rotate(-3deg);
  }
}

.blob-animate {
  animation: blob-pulse 8s ease-in-out infinite;
}

/* ---- Fade in up ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Fade in ---- */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Scale in ---- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- Scroll-triggered reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal--delay-1 {
  transition-delay: 0.1s;
}
.reveal--delay-2 {
  transition-delay: 0.2s;
}
.reveal--delay-3 {
  transition-delay: 0.3s;
}
.reveal--delay-4 {
  transition-delay: 0.4s;
}
.reveal--delay-5 {
  transition-delay: 0.5s;
}
.reveal--delay-6 {
  transition-delay: 0.6s;
}

/* ---- Hero entrance ---- */
.hero-animate {
  animation: fadeInUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.hero-animate--delay-1 {
  animation-delay: 0.1s;
}
.hero-animate--delay-2 {
  animation-delay: 0.25s;
}
.hero-animate--delay-3 {
  animation-delay: 0.4s;
}
.hero-animate--delay-4 {
  animation-delay: 0.55s;
}
.hero-animate--delay-5 {
  animation-delay: 0.7s;
}

/* ---- Stat counter ---- */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-counter {
  display: inline-block;
  color: beige;
}

/* ---- Shimmer (loading placeholder) ---- */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(15, 18, 57, 0.05) 25%,
    rgba(15, 18, 57, 0.1) 50%,
    rgba(15, 18, 57, 0.05) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ---- Scroll canvas section pin indicator ---- */
@keyframes scrollIndicator {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.5;
  }
}

.scroll-indicator {
  animation: scrollIndicator 1.8s ease-in-out infinite;
}

/* ---- WhatsApp bounce ---- */
@keyframes waBounce {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.wa-float {
  animation: waBounce 2.5s ease-in-out infinite;
}

/* ---- Star rating fill ---- */
@keyframes starFill {
  from {
    color: rgba(201, 168, 76, 0.2);
  }
  to {
    color: var(--color-gold);
  }
}

/* ---- Page transition ---- */
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main {
  animation: pageEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ---- Product card image hover ---- */
.product-card:hover .product-card__image {
  transform: scale(1.04);
  transition: transform var(--transition-slow);
}

/* ---- Gold underline link ---- */
.link-gold {
  color: var(--color-gold);
  font-weight: 600;
  position: relative;
}

.link-gold::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-gold);
  transition: width var(--transition);
}

.link-gold:hover::after {
  width: 100%;
}

/* ---- Glow effect on dark cards ---- */
.card-dark:hover {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(201, 168, 76, 0.15);
}

/* ---- Typing cursor ---- */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.cursor-blink::after {
  content: "|";
  animation: blink 1s step-end infinite;
  color: var(--color-gold);
}