/* ============================================================
   DG COSMETIC — animations.css
   Smooth transitions & scroll-triggered animations
   ============================================================ */

/* ── AOS-style reveal classes ── */
[data-aos] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

[data-aos="fade-right"]          { transform: translateX(-32px); }
[data-aos="fade-right"].aos-animate { transform: translateX(0); }
[data-aos="fade-left"]           { transform: translateX(32px); }
[data-aos="fade-left"].aos-animate  { transform: translateX(0); }
[data-aos="fade-up"]             { transform: translateY(32px); }
[data-aos="fade-up"].aos-animate    { transform: translateY(0); }
[data-aos="zoom-in"]             { transform: scale(0.92); }
[data-aos="zoom-in"].aos-animate    { transform: scale(1); }

/* ── Delay utilities ── */
[data-aos-delay="50"]  { transition-delay: 50ms; }
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="250"] { transition-delay: 250ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos-delay="500"] { transition-delay: 500ms; }

/* ── Keyframe animations ── */

/* Float (product images, hero) */
@keyframes dg-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
.dg-float { animation: dg-float 5s ease-in-out infinite; }

/* Pulse glow */
@keyframes dg-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,167,184,0); }
  50%       { box-shadow: 0 0 0 12px rgba(242,167,184,0.2); }
}
.dg-pulse { animation: dg-pulse-glow 2.5s ease infinite; }

/* Shimmer skeleton */
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--color-off-white) 50%, var(--border-light) 75%);
  background-size: 1000px 100%;
  animation: shimmer 1.5s linear infinite;
  border-radius: var(--radius-sm);
}

/* Spin */
@keyframes dg-spin {
  to { transform: rotate(360deg); }
}
.dg-spin-anim { animation: dg-spin 1s linear infinite; }

/* Bounce */
@keyframes dg-bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8,0,1,1); }
  50%       { transform: translateY(-6px); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}
.dg-bounce { animation: dg-bounce 1s infinite; }

/* ── Hero text animation ── */
.hero-text .hero-label {
  animation: fadeSlideUp 0.8s 0.2s both;
}
.hero-text .hero-heading {
  animation: fadeSlideUp 0.8s 0.4s both;
}
.hero-text .hero-subtext {
  animation: fadeSlideUp 0.8s 0.6s both;
}
.hero-text .hero-ctas {
  animation: fadeSlideUp 0.8s 0.8s both;
}
.hero-text .hero-stats {
  animation: fadeSlideUp 0.8s 1s both;
}

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

/* Swiper slide transition */
.swiper-slide:not(.swiper-slide-active) .hero-text * { animation: none !important; opacity: 0 !important; }
.swiper-slide.swiper-slide-active .hero-text * { animation-play-state: running !important; }

/* ── Hover micro-interactions ── */
.dg-lift {
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.dg-lift:hover { transform: translateY(-4px); }

.dg-scale {
  transition: transform 0.25s ease;
}
.dg-scale:hover { transform: scale(1.04); }

/* ── Gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--color-rose-deep) 0%, var(--color-mauve) 50%, var(--color-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Line draw underline ── */
.line-draw {
  position: relative;
  display: inline-block;
}

.line-draw::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-rose), var(--color-gold));
  border-radius: 1px;
  transition: width 0.4s cubic-bezier(0.4,0,0.2,1);
}

.line-draw:hover::after { width: 100%; }

/* ── Button shimmer ── */
.btn-dg::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.15) 50%, rgba(255,255,255,0) 100%);
  transform: rotateZ(60deg) translate(-5em, 7.5em);
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
}

.btn-dg:hover::after {
  opacity: 1;
  transform: rotateZ(60deg) translate(1em, -9em);
}

/* ── Animated counter ── */
.counter-number {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-mauve);
}

/* ── Card hover reveal effect ── */
.dg-product-card .product-info {
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
}

.dg-product-card:hover .product-info {
  transform: translateY(-2px);
}

/* ── Top bar ticker ── */
#top-bar-ticker {
  display: inline-block;
  animation: ticker-fade 0.4s ease;
}

@keyframes ticker-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Overlay backdrop animation ── */
.dg-overlay {
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* ── Mini cart slide ── */
.dg-mini-cart {
  transition: right 0.4s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.4s ease;
}

/* ── Search bar ── */
.dg-search-bar {
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1),
              padding 0.3s ease,
              border-top-color 0.3s ease;
}

/* ── Category card image zoom ── */
.category-card-image img {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ── Blog card image zoom ── */
.blog-card-img {
  transition: transform 0.6s cubic-bezier(0.4,0,0.2,1);
}

/* ── Toast ── */
@keyframes toast-in {
  from { transform: translateX(100%) scale(0.9); opacity: 0; }
  to   { transform: translateX(0) scale(1);     opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0) scale(1);     opacity: 1; }
  to   { transform: translateX(100%) scale(0.9); opacity: 0; }
}

.dg-toast { animation: toast-in 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both; }
.dg-toast.removing { animation: toast-out 0.3s ease both; }

/* ── Wishlist heart pop ── */
@keyframes heart-pop {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.4); }
  50%  { transform: scale(0.9); }
  75%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.dg-wishlist-btn.pop { animation: heart-pop 0.4s cubic-bezier(0.36,0.07,0.19,0.97); }

/* ── Add to cart btn loading ── */
.dg-add-to-cart.loading {
  pointer-events: none;
  opacity: 0.8;
}

.dg-add-to-cart.loading span {
  display: none;
}

.dg-add-to-cart.loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: white;
  border-radius: 50%;
  animation: dg-spin 0.7s linear infinite;
  margin-right: 0.5rem;
}

/* ── Number ticker ── */
@keyframes flip-in {
  from { transform: rotateX(-90deg); opacity: 0; }
  to   { transform: rotateX(0deg);   opacity: 1; }
}

.cd-num.flip { animation: flip-in 0.3s ease both; }

/* ── Section reveal on scroll ── */
.dg-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.dg-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Floating label form ── */
.floating-label-group {
  position: relative;
  margin-bottom: 1.25rem;
}

.floating-label-group input,
.floating-label-group textarea {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.floating-label-group label {
  position: absolute;
  top: 0.75rem;
  left: 1.25rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  pointer-events: none;
  transition: all 0.25s ease;
  transform-origin: left top;
}

.floating-label-group input:focus ~ label,
.floating-label-group input:not(:placeholder-shown) ~ label,
.floating-label-group textarea:focus ~ label,
.floating-label-group textarea:not(:placeholder-shown) ~ label {
  transform: scale(0.75) translateY(-10px);
  color: var(--color-rose-deep);
}

/* ── Preloader animation ── */
@keyframes preloader-logo-in {
  from { opacity: 0; transform: scale(0.8) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.dg-preloader-logo { animation: preloader-logo-in 0.6s ease both; }

/* ── Progress bar (page load) ── */
#dg-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-rose), var(--color-gold));
  z-index: 99998;
  transition: width 0.3s ease;
  border-radius: 0 2px 2px 0;
}