/**
 * -----------------------------------------
 * SAYR WATCHES
 * Animations & Keyframes Stylesheet
 *
 * Responsibility:
 * Centralized layout keyframe animations (shimmers, fade ins, toast entry/exit, spin indicators).
 *
 * Dependencies:
 * None
 *
 * Ownership Boundary:
 * Shared Core (Styling Animations Layer)
 * -----------------------------------------
 */

/* ─── HARDWARE ACCELERATION & UX PERFORMANCE OPTIMIZATIONS ─── */
html {
  -webkit-tap-highlight-color: transparent;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.product-card {
  contain: layout style;
  touch-action: pan-y;
}

/* Coarse-grained section containment: off-thread skips for heavy page landmarks */
#why-sayr,
#testimonials,
#reviewTestimonials,
#for-her,
#sayr-select-banner {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}


.modal-box,
.cart-modal {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ─── SCROLL REVEAL ─────────────────────────────────────── */
@keyframes revealUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.reveal-ready { animation:revealUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }

/* ─── ANNOUNCEMENT BAR SHIMMER ───────────────────────────── */
@keyframes annShimmer { 0%,100%{opacity:0} 50%{opacity:1} }

/* ─── HERO FADE IN ───────────────────────────────────────── */
@keyframes fadeIn { to { opacity: 1; } }

/* ─── HERO SCROLL DROP ───────────────────────────────────── */
@keyframes scrollDrop { 0% { transform: translateY(0); } 100% { transform: translateY(96px); } }

/* ─── MARQUEE ────────────────────────────────────────────── */
@keyframes marqueeScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ─── CART BADGE BOUNCE ──────────────────────────────────── */
@keyframes bounce { 0%,100%{transform:scale(1)} 45%{transform:scale(1.35)} }

/* ─── STOCK PULSE ────────────────────────────────────────── */
@keyframes pulseStock { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ─── PRICE PULSE ────────────────────────────────────────── */
@keyframes pricePulse { 0%{color:var(--gold)} 40%{color:var(--gold-light);text-shadow:0 0 12px rgba(198,167,94,0.6)} 100%{color:var(--gold)} }
.price-pulse { animation:pricePulse 0.5s ease; }

/* ─── PRICE GLOW ─────────────────────────────────────────── */
.price-glow { animation: priceGlow 3.5s ease-in-out infinite; }
@keyframes priceGlow { 0%,100%{text-shadow:0 0 6px rgba(198,167,94,0.3)} 50%{text-shadow:0 0 16px rgba(198,167,94,0.6)} }

/* ─── SPIN ───────────────────────────────────────────────── */
@keyframes spin { to{transform:rotate(360deg)} }

/* ─── TOAST ──────────────────────────────────────────────── */
@keyframes toastIn  { from{opacity:0;transform:translateX(320px)} to{opacity:1;transform:none} }
@keyframes toastOut { from{opacity:1;transform:none} to{opacity:0;transform:translateY(16px)} }

/* ─── CHECKOUT MODAL BACKDROP ────────────────────────────── */
@keyframes backdropIn { from{opacity:0;} to{opacity:1;} }
#paymentModal, #addressModal { animation: backdropIn 0.3s ease; }

/* ─── BLOG MODAL SKELETON SHIMMER ────────────────────────────── */
@keyframes blogShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── REVIEW / SHARE TOAST (bottom-center) ───────────────── */
@keyframes revToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);    }
}

/* ─── MODAL IN ───────────────────────────────────────────── */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ─── ACCORDION OPEN ─────────────────────────────────────── */
@keyframes accOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}