/* ============================================================
   SHOPVAULT — ANIMATIONS & MICRO-INTERACTIONS
   ============================================================ */

/* ─── Page Transition ────────────────────────────────────────── */
.page-overlay {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Scroll-triggered Fade In ───────────────────────────────── */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.fade-in-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-children.visible > *:nth-child(1)  { transition-delay: 0.05s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(2)  { transition-delay: 0.10s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(3)  { transition-delay: 0.15s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(4)  { transition-delay: 0.20s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(5)  { transition-delay: 0.25s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(6)  { transition-delay: 0.30s; opacity: 1; transform: none; }
.stagger-children.visible > *:nth-child(n+7){ transition-delay: 0.35s; opacity: 1; transform: none; }

/* ─── Hero Banner Animations ─────────────────────────────────── */
@keyframes heroSlideIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes heroPop {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.hero-title   { animation: heroSlideIn 0.7s 0.1s both ease; }
.hero-sub     { animation: heroSlideIn 0.7s 0.25s both ease; }
.hero-actions { animation: heroSlideIn 0.7s 0.4s both ease; }
.hero-image   { animation: heroPop 0.8s 0.2s both ease; }

/* ─── Countdown Timer Animation ──────────────────────────────── */
@keyframes countflip {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}
.timer-num.flipping {
  animation: countflip 0.4s ease;
}

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

/* ─── Floating Label Input ───────────────────────────────────── */
.float-label-group {
  position: relative; margin-bottom: 20px;
}
.float-label-group input,
.float-label-group select,
.float-label-group textarea {
  width: 100%;
  padding: 20px 16px 8px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary); font-size: 14px;
  outline: none;
  transition: border-color 0.25s ease;
}
.float-label-group input:focus,
.float-label-group select:focus,
.float-label-group textarea:focus { border-color: var(--accent); }

.float-label-group label {
  position: absolute; left: 16px; top: 14px;
  color: var(--text-faint); font-size: 14px;
  transition: all 0.2s ease; pointer-events: none;
}
.float-label-group input:focus ~ label,
.float-label-group input:not(:placeholder-shown) ~ label,
.float-label-group select:focus ~ label,
.float-label-group textarea:focus ~ label,
.float-label-group textarea:not(:placeholder-shown) ~ label {
  top: 6px; font-size: 11px; color: var(--accent); font-weight: 600;
}

/* ─── Cart Bounce ────────────────────────────────────────────── */
@keyframes cartBounce {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.35); }
}
.cart-bounce { animation: cartBounce 0.35s ease; }

/* ─── Heartbeat (Wishlist) ───────────────────────────────────── */
@keyframes heartbeat {
  0%,100% { transform: scale(1); }
  25%      { transform: scale(1.3); }
  50%      { transform: scale(1.15); }
  75%      { transform: scale(1.25); }
}
.heart-pop { animation: heartbeat 0.5s ease; }

/* ─── Shimmer Product Cards (Loading) ────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
}

/* ─── Sticky Header Shrink ───────────────────────────────────── */
.main-header {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}

/* ─── Category Card Hover ────────────────────────────────────── */
.cat-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.cat-card:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 40px rgba(229,9,20,0.2);
}

/* ─── Image Zoom On Hover ────────────────────────────────────── */
.img-zoom-wrap { overflow: hidden; }
.img-zoom-wrap img {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom-wrap:hover img { transform: scale(1.08); }

/* ─── Pulse Dot (live indicator) ────────────────────────────── */
.pulse-dot {
  width: 8px; height: 8px;
  background: var(--accent); border-radius: 50%;
  animation: pulseDot 1.5s ease infinite;
  display: inline-block;
}
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229,9,20,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(229,9,20,0); }
}

/* ─── Scroll indicator ───────────────────────────────────────── */
@keyframes scrollArrow {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%       { transform: translateY(6px); opacity: 1; }
}
.scroll-arrow { animation: scrollArrow 1.5s ease infinite; }

/* ─── Number Count-up Animation marker ──────────────────────── */
.count-up { display: inline-block; }

/* ─── Grid card entrance ─────────────────────────────────────── */
.card-grid-item {
  animation: cardEntrance 0.5s ease both;
}
@keyframes cardEntrance {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ─── Progress bar animation ─────────────────────────────────── */
.progress-bar-fill {
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── Notification Bell shake ────────────────────────────────── */
@keyframes bellShake {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-8deg); }
  20%, 40%, 60%, 80%      { transform: rotate(8deg); }
}
.bell-shake { animation: bellShake 0.6s ease; }

/* ─── Tooltip ────────────────────────────────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: rgba(30,30,30,0.95); color: #fff;
  padding: 5px 10px; border-radius: 6px;
  font-size: 12px; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 100;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ─── FAB — Back to Top (hp-fab) ──────────────────────────────── */
.hp-fab {
  position: fixed; right: 20px; bottom: 90px; z-index: 800;
  display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 768px) { .hp-fab { bottom: 24px; } }

.hp-fab-btn {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.hp-fab-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.12); }
.hp-fab-btn.hidden { opacity: 0; pointer-events: none; transform: translateY(12px); }

/* ─── Premium Pulse Ring (CTA emphasis) ───────────────────────── */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(229,9,20,0.6); }
  70% { box-shadow: 0 0 0 14px rgba(229,9,20,0); }
  100% { box-shadow: 0 0 0 0 rgba(229,9,20,0); }
}
.pulse-ring { animation: pulseRing 2.2s ease infinite; }

/* ─── Float On Hover (subtle elevation) ───────────────────────── */
.hover-float { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; }
.hover-float:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.25); }

/* ─── Smooth Slide-Up Reveal ──────────────────────────────────── */
@keyframes slideUpReveal {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal-up { animation: slideUpReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ─── Glow border pulse (premium cards) ───────────────────────── */
@keyframes glowBorder {
  0%, 100% { border-color: rgba(229,9,20,0.15); }
  50% { border-color: rgba(229,9,20,0.4); }
}
.glow-border-pulse { animation: glowBorder 3s ease infinite; }