/**
 * Veiled Clone — animations.css
 * Full animation & hover effects system
 */

/* ============================================================
   RESPECT REDUCED MOTION
   ============================================================ */
@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;
  }
}

/* ============================================================
   PAGE LOAD FADE IN
   ============================================================ */
body {
  animation: page-fade-in 0.5s ease forwards;
}
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATIONS
   (JS adds .is-visible when element enters viewport)
   ============================================================ */

/* Base state — hidden */
.fade-in-up,
.fade-in-left,
.fade-in-right,
.scale-in,
.fade-in {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in-up    { transform: translateY(48px); }
.fade-in-left  { transform: translateX(-48px); }
.fade-in-right { transform: translateX(48px); }
.scale-in      { transform: scale(0.88); }
.fade-in       { transform: none; }

/* Visible state — shown */
.fade-in-up.is-visible,
.fade-in-left.is-visible,
.fade-in-right.is-visible,
.scale-in.is-visible,
.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children delays */
.stagger-children > *:nth-child(1)  { transition-delay: calc(var(--stagger-delay, 0.1s) * 1); }
.stagger-children > *:nth-child(2)  { transition-delay: calc(var(--stagger-delay, 0.1s) * 2); }
.stagger-children > *:nth-child(3)  { transition-delay: calc(var(--stagger-delay, 0.1s) * 3); }
.stagger-children > *:nth-child(4)  { transition-delay: calc(var(--stagger-delay, 0.1s) * 4); }
.stagger-children > *:nth-child(5)  { transition-delay: calc(var(--stagger-delay, 0.1s) * 5); }
.stagger-children > *:nth-child(6)  { transition-delay: calc(var(--stagger-delay, 0.1s) * 6); }
.stagger-children > *:nth-child(7)  { transition-delay: calc(var(--stagger-delay, 0.1s) * 7); }
.stagger-children > *:nth-child(8)  { transition-delay: calc(var(--stagger-delay, 0.1s) * 8); }

/* ============================================================
   HOVER EFFECTS
   ============================================================ */

/* Lift card upward with shadow */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.12);
}

/* Gentle scale grow */
.hover-grow {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-grow:hover { transform: scale(1.025); }

/* Animated underline */
.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-underline:hover::after { transform: scaleX(1); }

/* Image zoom inside container */
.hover-zoom { overflow: hidden; }
.hover-zoom img {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hover-zoom:hover img { transform: scale(1.07); }

/* Reveal content overlay from bottom */
.hover-reveal {
  position: relative;
  overflow: hidden;
}
.hover-reveal .reveal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-reveal:hover .reveal-content { transform: translateY(0); }

/* 3D Tilt — applied via JS */
.hover-tilt {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.1s ease;
}

/* Dark overlay on hover */
.hover-overlay {
  position: relative;
}
.hover-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.35s ease;
  pointer-events: none;
}
.hover-overlay:hover::after { background: rgba(0, 0, 0, 0.2); }

/* ============================================================
   BUTTON ANIMATIONS
   ============================================================ */

/* Shine sweep */
.btn-shine {
  position: relative;
  overflow: hidden;
}
.btn-shine::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -80%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-15deg);
  transition: left 0s;
}
.btn-shine:hover::before {
  left: 130%;
  transition: left 0.6s ease;
}

/* Ripple on click */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: ripple-anim 0.6s linear;
  pointer-events: none;
}
@keyframes ripple-anim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ============================================================
   SKELETON LOADING SHIMMER
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    #e8e4e0 25%,
    #f0ece8 37%,
    #e8e4e0 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 2px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
  border-radius: 4px;
}
.skeleton-text:last-child { width: 65%; }

.skeleton-image {
  width: 100%;
  aspect-ratio: 3/4;
}

@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   PRODUCT CARD ANIMATIONS
   ============================================================ */
.product-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* removed duplicate — defined in style.css */

/* Stagger for product grid entrance */
.products-grid .product-card,
.hp-product-grid .hp-pcard {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.products-grid.is-visible .product-card:nth-child(1),
.hp-product-grid.is-visible .hp-pcard:nth-child(1)  { transition-delay: 0.05s; }
.products-grid.is-visible .product-card:nth-child(2),
.hp-product-grid.is-visible .hp-pcard:nth-child(2)  { transition-delay: 0.10s; }
.products-grid.is-visible .product-card:nth-child(3),
.hp-product-grid.is-visible .hp-pcard:nth-child(3)  { transition-delay: 0.15s; }
.products-grid.is-visible .product-card:nth-child(4),
.hp-product-grid.is-visible .hp-pcard:nth-child(4)  { transition-delay: 0.20s; }
.products-grid.is-visible .product-card:nth-child(5),
.hp-product-grid.is-visible .hp-pcard:nth-child(5)  { transition-delay: 0.25s; }
.products-grid.is-visible .product-card:nth-child(6),
.hp-product-grid.is-visible .hp-pcard:nth-child(6)  { transition-delay: 0.30s; }
.products-grid.is-visible .product-card:nth-child(7),
.hp-product-grid.is-visible .hp-pcard:nth-child(7)  { transition-delay: 0.35s; }
.products-grid.is-visible .product-card:nth-child(8),
.hp-product-grid.is-visible .hp-pcard:nth-child(8)  { transition-delay: 0.40s; }

.products-grid.is-visible .product-card,
.hp-product-grid.is-visible .hp-pcard {
  opacity: 1;
  transform: translateY(0);
}

/* Wishlist heart button */
.product-card-wishlist {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.product-card:hover .product-card-wishlist {
  opacity: 1;
  transform: scale(1);
}
.product-card-wishlist:hover svg { fill: #c0392b; stroke: #c0392b; }
.product-card-wishlist svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-text);
  fill: none;
  transition: fill 0.2s, stroke 0.2s;
}
.product-card-wishlist.is-wishlisted svg { fill: #c0392b; stroke: #c0392b; }

/* Color swatches */
.product-card-swatches {
  display: flex;
  gap: 5px;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.swatch {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}
.swatch:hover { transform: scale(1.3); border-color: rgba(0,0,0,0.6); }
.swatch.is-active { border: 2px solid var(--color-text); transform: scale(1.1); }

/* Quick add button refined */
.product-card-quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  transform: translateY(100%);
  transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .product-card-quick-add { transform: translateY(0); }

/* ============================================================
   CATEGORY TILE ANIMATIONS
   ============================================================ */
.category-tile {
  transition: transform 0.35s ease;
}
.category-tile:hover { transform: scale(1.01); }
.category-tile-name {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.category-tile:hover .category-tile-name { transform: translateY(-4px); }

/* ============================================================
   HERO PARALLAX PLACEHOLDER
   (JS handles dynamic transform)
   ============================================================ */
.hero-section .hero-bg-image {
  will-change: transform;
}

/* ============================================================
   SECTION HEADING ANIMATION
   ============================================================ */
.section-title {
  overflow: hidden;
}
.section-title span.word {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.6s ease;
}
.section-title.is-visible span.word { transform: translateY(0); opacity: 1; }

/* ============================================================
   MARQUEE HOVER PAUSE
   ============================================================ */
.marquee-section:hover .marquee-inner {
  animation-play-state: paused;
}

/* ============================================================
   FOOTER LINK HOVER
   ============================================================ */
.footer-links a {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.2s ease, color 0.2s;
}
.footer-links a::before {
  content: '→';
  position: absolute;
  left: -1rem;
  opacity: 0;
  transition: opacity 0.2s, left 0.2s;
}
.footer-links a:hover {
  padding-left: 1rem;
  color: #fff;
  opacity: 1;
}
.footer-links a:hover::before { opacity: 1; left: 0; }

/* ============================================================
   COUNTER ANIMATION (JS-driven)
   ============================================================ */
.stat-number {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat-number.counting { color: rgba(255,255,255,0.6); }

/* ============================================================
   IMAGE LAZY LOAD FADE
   ============================================================ */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.5s ease;
}
img[loading="lazy"].is-loaded { opacity: 1; }