/* ═══════════════════════════════════════════════
   ANIMATIONS.CSS — Motion, Polish & Mobile
   Cadenita De Carmen
═══════════════════════════════════════════════ */

/* ── Respect user motion preferences ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════
   PAGE TRANSITIONS
══════════════════════════════════════════════ */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--black);
  transform: translateY(100%);
  pointer-events: none;
}
.page-transition-overlay.entering {
  animation: pageSlideIn .45s cubic-bezier(.77,0,.18,1) forwards;
}
.page-transition-overlay.leaving {
  animation: pageSlideOut .45s cubic-bezier(.77,0,.18,1) forwards;
}
@keyframes pageSlideIn  { from { transform: translateY(0) }  to { transform: translateY(-100%) } }
@keyframes pageSlideOut { from { transform: translateY(100%) } to { transform: translateY(0) } }

/* ══════════════════════════════════════════════
   HERO PARALLAX
══════════════════════════════════════════════ */
.hero-bg { will-change: transform; }

/* ══════════════════════════════════════════════
   STAGGERED REVEAL — richer than the basic one
══════════════════════════════════════════════ */
.reveal-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}
.reveal-up.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0; transform: translateX(-32px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0; transform: translateX(32px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.25,.46,.45,.94);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0; transform: scale(.94);
  transition: opacity .7s ease, transform .7s cubic-bezier(.25,.46,.45,.94);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
[data-delay="1"] { transition-delay: .08s  !important; }
[data-delay="2"] { transition-delay: .16s  !important; }
[data-delay="3"] { transition-delay: .24s  !important; }
[data-delay="4"] { transition-delay: .32s  !important; }
[data-delay="5"] { transition-delay: .40s  !important; }
[data-delay="6"] { transition-delay: .48s  !important; }

/* ══════════════════════════════════════════════
   COUNT-UP STATS
══════════════════════════════════════════════ */
.stat-number {
  will-change: contents;
  transition: color .3s ease;
}
.stat-number.counting { color: var(--gold-bright); }

/* ══════════════════════════════════════════════
   BUTTON RIPPLE
══════════════════════════════════════════════ */
.btn-gold, .btn-ghost, .btn-checkout, .btn-next,
.product-add-btn, .btn-add-cart {
  position: relative; overflow: hidden;
}
.ripple {
  position: absolute; border-radius: 50%;
  transform: scale(0); animation: rippleAnim .55s linear;
  background: rgba(255,255,255,.18); pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ══════════════════════════════════════════════
   GOLD SHIMMER on product cards
══════════════════════════════════════════════ */
.product-card::after {
  content: '';
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201,168,76,.06),
    transparent
  );
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}
.product-card:hover::after {
  animation: cardShimmer .7s ease forwards;
}
@keyframes cardShimmer {
  0%   { left: -75%; }
  100% { left: 125%; }
}

/* ══════════════════════════════════════════════
   GOLD GLOW on inputs when focused
══════════════════════════════════════════════ */
.form-control:focus,
.shop-search:focus,
.newsletter-input:focus,
.coupon-input:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}

/* ══════════════════════════════════════════════
   FLOATING LABEL animation
══════════════════════════════════════════════ */
.form-group { position: relative; }
.form-label {
  transition: color .25s ease;
}
.form-control:focus ~ .form-label,
.form-control:not(:placeholder-shown) ~ .form-label {
  color: var(--gold);
}

/* ══════════════════════════════════════════════
   CART DRAWER — item add animation
══════════════════════════════════════════════ */
.cart-item {
  animation: slideInItem .35s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes slideInItem {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════
   NAV LINK underline animate on load
══════════════════════════════════════════════ */
.navbar-nav .nav-link {
  animation: navFadeIn .6s ease both;
}
.navbar-nav .nav-item:nth-child(1) .nav-link { animation-delay: .1s; }
.navbar-nav .nav-item:nth-child(2) .nav-link { animation-delay: .18s; }
.navbar-nav .nav-item:nth-child(3) .nav-link { animation-delay: .26s; }
.navbar-nav .nav-item:nth-child(4) .nav-link { animation-delay: .34s; }
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════
   GOLD BORDER PULSE on logo ring
══════════════════════════════════════════════ */
.logo-circle-outer {
  animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow: 0 0 30px rgba(201,168,76,.15), inset 0 0 20px rgba(201,168,76,.04); }
  50%      { box-shadow: 0 0 55px rgba(201,168,76,.28), inset 0 0 30px rgba(201,168,76,.08); }
}

/* ══════════════════════════════════════════════
   SKELETON LOADING PULSE
══════════════════════════════════════════════ */
.skeleton-pulse {
  animation: skeletonPulse 1.8s ease-in-out infinite;
}
@keyframes skeletonPulse {
  0%,100% { opacity: .6; }
  50%      { opacity: 1; }
}

/* ══════════════════════════════════════════════
   TOAST NOTIFICATION
══════════════════════════════════════════════ */
.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem;
  z-index: 5000; display: flex; flex-direction: column; gap: .6rem;
  pointer-events: none;
}
.toast {
  background: var(--black-3);
  border: 1px solid rgba(201,168,76,.3);
  color: var(--white); padding: .9rem 1.4rem;
  font-family: var(--font-b); font-size: .7rem;
  letter-spacing: .08em; min-width: 240px;
  display: flex; align-items: center; gap: .7rem;
  animation: toastIn .4s cubic-bezier(.25,.46,.45,.94) both;
  pointer-events: all; box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.toast.hiding { animation: toastOut .35s ease forwards; }
.toast i { color: var(--gold); font-size: 1rem; flex-shrink: 0; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(30px); } }

/* ══════════════════════════════════════════════
   MOBILE NAV OVERHAUL
══════════════════════════════════════════════ */
@media (max-width: 991px) {

  /* Full-screen mobile menu */
  #navMenu {
    position: fixed; inset: 0; top: 0;
    background: rgba(8,8,8,.98);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(201,168,76,.12);
    padding: 5rem 2rem 3rem;
    z-index: 999;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.77,0,.18,1);
    visibility: hidden;
  }
  #navMenu.show {
    transform: translateX(0);
    visibility: visible;
  }

  /* Override Bootstrap collapse */
  #navMenu.collapsing {
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.77,0,.18,1);
    height: 100% !important;
  }

  .navbar-nav {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem !important;
  }
  .navbar-nav .nav-link {
    font-size: 1.4rem !important;
    letter-spacing: .3em !important;
    padding: .5rem 0 !important;
    color: var(--white) !important;
  }
  .navbar-nav .nav-link:hover { color: var(--gold) !important; }

  /* Nav icons row on mobile */
  #navMenu .nav-icons {
    justify-content: center;
    gap: 2rem;
    border-top: 1px solid rgba(201,168,76,.12);
    padding-top: 2rem;
  }
  #navMenu .nav-icons a { margin-left: 0 !important; font-size: 1.3rem; }

  /* Lang switcher centered on mobile */
  #navMenu .lang-switcher { margin-left: 0 !important; }
  #navMenu .lang-dropdown {
    left: 50%; transform: translateX(-50%) translateY(-6px);
    right: auto;
  }
  #navMenu .lang-dropdown.open {
    transform: translateX(-50%) translateY(0);
  }

  /* Hamburger becomes X when open */
  .navbar-toggler { position: relative; z-index: 1001; }
  .navbar-toggler[aria-expanded="true"] .bi-list::before { content: '\F659'; }
}

/* ══════════════════════════════════════════════
   MOBILE SPACING & LAYOUT FIXES
══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Hero */
  .hero-title  { font-size: clamp(2.2rem, 8vw, 3.5rem) !important; }
  .hero-subtitle { font-size: .75rem; letter-spacing: .1em; }
  .hero-cta-group { flex-direction: column; align-items: center; }
  .hero-cta-group .btn-gold,
  .hero-cta-group .btn-ghost { width: 100%; max-width: 260px; text-align: center; justify-content: center; }
  .hero-scroll { display: none; }

  /* Logo */
  .hero-logo-ring { width: 150px; height: 150px; }
  .logo-monogram  { font-size: 2.4rem; }

  /* Sections */
  section { padding: 4rem 0; }

  /* Shop header search full width */
  .shop-search-wrap { max-width: 100%; }
  .shop-header .d-flex { flex-direction: column; gap: 1.2rem; }

  /* Cart drawer full width */
  .cart-drawer { width: 100vw; }

  /* Checkout steps — labels hidden, circles only */
  .step-label { font-size: .5rem; letter-spacing: .1em; }
  .step-connector { width: 24px; }

  /* Product page info panel top padding */
  .product-info-panel { padding-left: 0 !important; padding-top: 1.5rem; }

  /* Action row stacked */
  .action-row { flex-direction: column; }
  .btn-wishlist { width: 100% !important; }

  /* Trust badges wrap tighter */
  .trust-badges { gap: .6rem; }
  .trust-item   { font-size: .58rem; }
}

@media (max-width: 480px) {

  /* Extra small screens */
  .hero-logo-ring { width: 130px; height: 130px; }
  .logo-monogram  { font-size: 2rem; }
  .hero-eyebrow   { font-size: .55rem; letter-spacing: .3em; }
  .btn-gold, .btn-ghost { padding: .85rem 1.8rem; font-size: .6rem; }

  /* Cart table on tiny screens — stack product info */
  .cart-table th:nth-child(2),
  .cart-table td:nth-child(2),
  .cart-table th:nth-child(3),
  .cart-table td:nth-child(3) { display: none; }

  /* Checkout panel tighter */
  .checkout-panel { padding: 1.2rem; }
  .order-summary  { padding: 1.2rem; }

  /* Marquee slower on small screens */
  .marquee-track { animation-duration: 40s; }
}

/* ══════════════════════════════════════════════
   TOUCH DEVICE ENHANCEMENTS
══════════════════════════════════════════════ */
@media (hover: none) {
  /* Always show product actions on touch (no hover) */
  .product-actions,
  .products-grid .product-actions { transform: translateX(0) !important; }

  /* Remove hover-only transforms */
  .product-card:hover { transform: none !important; }
  .cat-card img { filter: brightness(.65) !important; }
}

/* ══════════════════════════════════════════════
   SAFE AREA — notch phones (iPhone X+)
══════════════════════════════════════════════ */
.cart-drawer-footer { padding-bottom: max(1.4rem, env(safe-area-inset-bottom)); }
footer             { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }