/* =============================================================
   JIGEENOVA — Animation system
   Keyframes + utilities + scroll reveals + micro-interactions
   ============================================================= */

/* ===== KEYFRAMES ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -16px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(24px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale3d(0.94, 0.94, 1); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes scaleInRotate {
  from { opacity: 0; transform: scale3d(0.85, 0.85, 1) rotate(var(--anim-rotate, 0deg)); }
  to { opacity: 1; transform: scale3d(1, 1, 1) rotate(var(--anim-rotate, 0deg)); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  60% { transform: translateY(-4px); }
}
@keyframes badgeBump {
  0% { transform: scale(1); }
  20% { transform: scale(1.35); }
  60% { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 74, 142, 0.55); }
  50%      { box-shadow: 0 0 0 12px rgba(232, 74, 142, 0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
@keyframes ripple {
  to { transform: scale(2.6); opacity: 0; }
}
@keyframes slideInBottom {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes typeIn {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== UTILITIES ===== */
.anim-fade-in       { animation: fadeIn 0.6s ease both; }
.anim-fade-up       { animation: fadeInUp 0.7s cubic-bezier(.16,.84,.32,1) both; }
.anim-fade-down     { animation: fadeInDown 0.7s cubic-bezier(.16,.84,.32,1) both; }
.anim-fade-left     { animation: fadeInLeft 0.7s cubic-bezier(.16,.84,.32,1) both; }
.anim-fade-right    { animation: fadeInRight 0.7s cubic-bezier(.16,.84,.32,1) both; }
.anim-scale         { animation: scaleIn 0.6s cubic-bezier(.16,.84,.32,1) both; }
.anim-scale-rot     { animation: scaleInRotate 0.7s cubic-bezier(.16,.84,.32,1) both; }
.anim-pulse         { animation: pulse 2.4s ease-in-out infinite; }
.anim-float         { animation: float 6s ease-in-out infinite; }

/* Delays */
.anim-d-1 { animation-delay: 0.08s; }
.anim-d-2 { animation-delay: 0.16s; }
.anim-d-3 { animation-delay: 0.24s; }
.anim-d-4 { animation-delay: 0.32s; }
.anim-d-5 { animation-delay: 0.40s; }
.anim-d-6 { animation-delay: 0.48s; }
.anim-d-7 { animation-delay: 0.56s; }

/* ===== SCROLL REVEAL (replaces old .reveal) ===== */
[data-aos] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(.16,.84,.32,1),
              transform 0.7s cubic-bezier(.16,.84,.32,1);
  transition-delay: var(--aos-delay, 0s);
  will-change: opacity, transform;
}
[data-aos="fade-up"]    { transform: translateY(28px); }
[data-aos="fade-down"]  { transform: translateY(-20px); }
[data-aos="fade-left"]  { transform: translateX(-28px); }
[data-aos="fade-right"] { transform: translateX(28px); }
[data-aos="zoom-in"]    { transform: scale(0.92); }
[data-aos="fade"]       { transform: none; }

[data-aos].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Stagger children — parent has data-aos-stagger */
[data-aos-stagger] > *  { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; transition-timing-function: cubic-bezier(.16,.84,.32,1); }
[data-aos-stagger].is-in > * { opacity: 1; transform: translateY(0); }
[data-aos-stagger].is-in > *:nth-child(1) { transition-delay: 0.00s; }
[data-aos-stagger].is-in > *:nth-child(2) { transition-delay: 0.06s; }
[data-aos-stagger].is-in > *:nth-child(3) { transition-delay: 0.12s; }
[data-aos-stagger].is-in > *:nth-child(4) { transition-delay: 0.18s; }
[data-aos-stagger].is-in > *:nth-child(5) { transition-delay: 0.24s; }
[data-aos-stagger].is-in > *:nth-child(6) { transition-delay: 0.30s; }
[data-aos-stagger].is-in > *:nth-child(7) { transition-delay: 0.36s; }
[data-aos-stagger].is-in > *:nth-child(8) { transition-delay: 0.42s; }
[data-aos-stagger].is-in > *:nth-child(9) { transition-delay: 0.48s; }
[data-aos-stagger].is-in > *:nth-child(n+10) { transition-delay: 0.55s; }

/* ===== MICRO-INTERACTIONS ===== */

/* Buttons: subtle scale + active press */
.btn { transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.25s, background-color 0.18s; }
.btn:active { transform: translateY(1px) scale(0.98); }

/* Ripple on click — JS adds .ripple-wave element */
.btn { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  pointer-events: none;
  animation: ripple 0.7s cubic-bezier(.16,.84,.32,1) forwards;
}
.btn-outline-pink .ripple-wave, .btn-outline-dark .ripple-wave { background: rgba(232, 74, 142, 0.18); }

/* Cart badge bump animation */
.navbar .badge.bg-pink.is-bumping { animation: badgeBump 0.6s cubic-bezier(.16,.84,.32,1); }

/* Page transition on load */
@media (prefers-reduced-motion: no-preference) {
  body { animation: fadeIn 0.4s ease both; }
  main { animation: fadeInUp 0.6s cubic-bezier(.16,.84,.32,1) both; animation-delay: 0.05s; }
}

/* Hero text staggered on load */
.hero .pill            { animation: fadeInDown 0.7s cubic-bezier(.16,.84,.32,1) both; }
.hero h1               { animation: fadeInUp 0.75s cubic-bezier(.16,.84,.32,1) both; animation-delay: 0.10s; }
.hero .hero-sub        { animation: fadeInUp 0.75s cubic-bezier(.16,.84,.32,1) both; animation-delay: 0.18s; }
.hero .btn             { animation: fadeInUp 0.75s cubic-bezier(.16,.84,.32,1) both; animation-delay: 0.26s; }
.hero .hero-mini-stats { animation: fadeInUp 0.75s cubic-bezier(.16,.84,.32,1) both; animation-delay: 0.34s; }
.hero-card.left        { animation: scaleInRotate 0.9s cubic-bezier(.16,.84,.32,1) both; animation-delay: 0.4s; --anim-rotate: -12deg; }
.hero-card.main        { animation: scaleInRotate 0.9s cubic-bezier(.16,.84,.32,1) both; animation-delay: 0.5s; --anim-rotate: -3deg; }
.hero-card.right       { animation: scaleInRotate 0.9s cubic-bezier(.16,.84,.32,1) both; animation-delay: 0.6s; --anim-rotate: 8deg; }
.hero-floating-pill.p1 { animation: fadeInRight 0.7s cubic-bezier(.16,.84,.32,1) 0.8s both, float 5s ease-in-out 1.6s infinite; }
.hero-floating-pill.p2 { animation: fadeInLeft 0.7s cubic-bezier(.16,.84,.32,1) 0.9s both, float 6s ease-in-out 1.7s infinite; }

/* Pulse on the topbar marquee dot or similar */
.dot, .pill .dot { animation: pulse 2.4s ease-in-out infinite; }

/* Section heading underline animation */
.section-heading h2 em { display: inline-block; position: relative; }
.section-heading h2 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--pink, #e84a8e);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.16,.84,.32,1);
  transition-delay: 0.2s;
}
[data-aos].is-in .section-heading h2 em::after,
.section-heading.is-in h2 em::after { transform: scaleX(1); }

/* Category tiles — image kenburn on hover */
.category-tile img {
  transition: transform 0.9s cubic-bezier(.16,.84,.32,1);
}
.category-tile:hover img { transform: scale(1.08); }
.category-tile .arrow { transition: transform var(--t, 0.35s), background-color var(--t, 0.35s); }
.category-tile:hover .arrow { transform: rotate(-45deg) scale(1.1); }

/* Feature cards hover */
.feature-card { transition: transform 0.35s cubic-bezier(.16,.84,.32,1), box-shadow 0.35s; }
.feature-card:hover { transform: translateY(-4px); }
.feature-card:hover .feature-icon { transform: scale(1.08) rotate(-3deg); transition: transform 0.4s cubic-bezier(.16,.84,.32,1); }

/* Testimonial card subtle hover lift */
.testimonial-card { transition: transform 0.35s cubic-bezier(.16,.84,.32,1), box-shadow 0.35s; }
.testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(40, 20, 35, 0.1); }

/* Footer social icons */
.footer .social a { transition: transform 0.3s cubic-bezier(.16,.84,.32,1), background-color 0.3s, border-color 0.3s; }
.footer .social a:hover { transform: translateY(-3px) scale(1.08); }

/* Brand strip subtle slide */
.brand-strip .brand-item { transition: transform 0.4s, color 0.3s, opacity 0.3s; }
.brand-strip .brand-item:hover { transform: translateY(-2px); }

/* Newsletter input focus glow */
.input-group-newsletter:focus-within {
  box-shadow: 0 0 0 4px rgba(232, 74, 142, 0.14);
  transition: box-shadow 0.3s;
}

/* Promo banner glow blobs slow drift */
.promo-banner::before { animation: float 8s ease-in-out infinite; }
.promo-banner::after  { animation: float 10s ease-in-out infinite reverse; }

/* Navbar active link */
.navbar .nav-link.active::after { transform: translateX(-50%) scaleX(1); }
.btn-icon { transition: transform 0.25s cubic-bezier(.16,.84,.32,1), background-color 0.25s, color 0.25s, border-color 0.25s; }
.btn-icon:hover { transform: translateY(-2px) scale(1.06); }
.btn-icon:active { transform: translateY(0) scale(0.95); }

/* Smooth product image zoom (already exists in site.css, keep) */

/* Form inputs animated border */
.form-control, .form-select {
  transition: border-color 0.25s, box-shadow 0.3s, background-color 0.25s, transform 0.18s;
}
.form-control:focus, .form-select:focus { transform: translateY(-1px); }

/* Alerts slide in */
.alert {
  animation: slideInBottom 0.4s cubic-bezier(.16,.84,.32,1) both;
}

/* Loading shimmer skeleton */
.skeleton {
  background: linear-gradient(90deg, #f0e3e9 0%, #fff1f7 50%, #f0e3e9 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 8px;
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -3px;
}

/* "Add to cart" button success pulse */
.added-to-cart {
  animation: glowPulse 0.9s cubic-bezier(.16,.84,.32,1);
}

/* Smooth dropdown */
.dropdown-menu {
  transform-origin: top right;
  transition: opacity 0.18s, transform 0.18s;
}
.dropdown-menu.show {
  animation: scaleIn 0.18s cubic-bezier(.16,.84,.32,1);
}

/* Modal entrance (Bootstrap modals use their own classes; supplement) */
.modal.fade .modal-dialog { transition: transform 0.35s cubic-bezier(.16,.84,.32,1), opacity 0.3s; }

/* Wiggle on cart icon when item added (extra) */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
}
.cart-icon-wiggle { animation: wiggle 0.7s cubic-bezier(.16,.84,.32,1); }

/* Page exit fade — applied by JS just before navigation */
body.is-leaving { animation: fadeIn 0.25s reverse forwards; }

/* Tabs: active indicator transition (override Bootstrap default) */
.nav-tabs .nav-link { transition: background-color 0.25s, color 0.25s, transform 0.18s; }
.nav-tabs .nav-link:hover { transform: translateY(-1px); }

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}