/* ==========================================================
   ABUZAR STORE — ANIMATION & LOGO LAYER
   Loads after style.css. Only adds; nothing here removes
   existing rules.
   ========================================================== */

/* ----------------------------------------------------------
   1. LOGO MARKS
   ---------------------------------------------------------- */

/* --- Loader --- */
.loader-mark {
  width: clamp(84px, 22vw, 120px);
  height: auto;
  border-radius: 50%;
  margin-bottom: 1.4rem;
  animation: markIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both,
             markBreathe 3.2s ease-in-out 0.9s infinite;
  filter: drop-shadow(0 0 26px rgba(0, 245, 255, 0.45));
}
body.white-gold .loader-mark { filter: drop-shadow(0 0 26px rgba(212, 175, 55, 0.45)); }

/* --- Navbar --- */
.nav-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 0.6rem;
}
.nav-logo-mark {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.35s ease;
  filter: drop-shadow(0 0 10px rgba(0, 245, 255, 0.35));
}
.nav-logo:hover .nav-logo-mark {
  transform: rotate(-12deg) scale(1.12);
  filter: drop-shadow(0 0 18px rgba(0, 245, 255, 0.7));
}
body.white-gold .nav-logo-mark { filter: drop-shadow(0 0 10px rgba(166, 124, 24, 0.35)); }
body.white-gold .nav-logo:hover .nav-logo-mark { filter: drop-shadow(0 0 18px rgba(166, 124, 24, 0.6)); }

/* --- Hero: the signature element --- */
.hero-logo {
  display: block;
  width: clamp(130px, 34vw, 200px);
  height: auto;
  margin: 0 auto 1.4rem;
  border-radius: 50%;
  position: relative;
  z-index: 2;
  animation: heroLogoIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both,
             heroLogoFloat 6s ease-in-out 1.35s infinite;
  filter: drop-shadow(0 0 34px rgba(0, 245, 255, 0.4))
          drop-shadow(0 14px 40px rgba(0, 0, 0, 0.55));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-logo:hover { transform: scale(1.06); }
body.white-gold .hero-logo {
  filter: drop-shadow(0 0 34px rgba(212, 175, 55, 0.45))
          drop-shadow(0 14px 40px rgba(166, 124, 24, 0.2));
}

/* --- Footer --- */
.footer-mark {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  margin: 0 auto 0.85rem;
  opacity: 0.92;
  transition: transform 0.5s ease, opacity 0.3s ease;
  filter: drop-shadow(0 0 16px rgba(0, 245, 255, 0.25));
}
.footer-mark:hover { transform: rotate(360deg); opacity: 1; }
body.white-gold .footer-mark { filter: drop-shadow(0 0 16px rgba(166, 124, 24, 0.3)); }

/* ----------------------------------------------------------
   2. PAGE-LOAD SEQUENCE
   Hero elements arrive in order instead of all at once.
   ---------------------------------------------------------- */
.hero-badge   { animation: riseIn 0.7s ease 0.55s both; }
.hero-title   { animation: riseIn 0.7s ease 0.70s both; }
.hero-sub     { animation: riseIn 0.7s ease 0.85s both; }
.typing-wrap  { animation: riseIn 0.7s ease 0.95s both; }
.hero-features{ animation: riseIn 0.7s ease 1.05s both; }
.hero-btns    { animation: riseIn 0.7s ease 1.15s both; }

/* ----------------------------------------------------------
   3. SECTION TITLES — light sweeps across on reveal
   ---------------------------------------------------------- */
.section-title {
  position: relative;
  overflow: hidden;
}
.section-title::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.reveal.visible .section-title::after,
.section-title.visible::after {
  animation: sweep 1.5s ease 0.2s;
}

/* ----------------------------------------------------------
   4. PRODUCT CARDS — staggered reveal + tighter hover
   ---------------------------------------------------------- */
.prod-card {
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.42s ease,
              border-color 0.42s ease;
}
.prod-card .prod-icon {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.prod-card:hover .prod-icon { transform: scale(1.09) translateY(-4px); }

.prod-card .prod-price {
  transition: transform 0.35s ease, letter-spacing 0.35s ease;
}
.prod-card:hover .prod-price { transform: translateX(3px); letter-spacing: 0.5px; }

/* Buy button fills from the left on hover */
.btn-buy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-buy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.05));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.btn-buy:hover::after { transform: scaleX(1); }

/* ----------------------------------------------------------
   5. CATEGORY TABS
   ---------------------------------------------------------- */
.cat-tab {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.cat-tab:hover { transform: translateY(-3px); }
.cat-tab:active { transform: translateY(0) scale(0.96); }

/* ----------------------------------------------------------
   6. BUTTONS — subtle press feedback everywhere
   ---------------------------------------------------------- */
.btn-primary:active,
.btn-secondary:active,
.btn-wa:active,
.btn-tg:active,
.btn-join:active,
.btn-add-cart:active,
.cart-checkout:active { transform: scale(0.96); }

/* ----------------------------------------------------------
   7. FLOATING CONTROLS
   ---------------------------------------------------------- */
.cart-float { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.cart-float:hover { transform: scale(1.1) rotate(-6deg); }
.cart-count { animation: countPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

.theme-float { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.theme-float:hover { transform: rotate(45deg) scale(1.1); }

#scroll-top { transition: transform 0.35s ease, opacity 0.35s ease; }
#scroll-top:hover { transform: translateY(-5px); }

/* ----------------------------------------------------------
   8. LINKS — underline grows from the left
   ---------------------------------------------------------- */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--neon), var(--neon2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after { transform: scaleX(1); }
body.white-gold .nav-links a::after { background: linear-gradient(90deg, #a67c18, #d4af37); }

/* Social icons */
.social-icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.social-icon:hover { transform: translateY(-6px) scale(1.12); }

/* ----------------------------------------------------------
   9. KEYFRAMES
   ---------------------------------------------------------- */
@keyframes markIn {
  from { opacity: 0; transform: scale(0.6) rotate(-25deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes markBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(28px) scale(0.82); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sweep {
  from { transform: translateX(-120%); }
  to   { transform: translateX(120%); }
}
@keyframes countPop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

/* ----------------------------------------------------------
   10. ACCESSIBILITY
   Anyone who has asked their device to reduce motion gets a
   still page. Nothing else changes.
   ---------------------------------------------------------- */
@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;
  }
}

/* Keyboard focus stays visible */
a:focus-visible,
button:focus-visible,
.cat-tab:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: 6px;
}
body.white-gold a:focus-visible,
body.white-gold button:focus-visible { outline-color: #a67c18; }

/* ----------------------------------------------------------
   12. SCROLL REVEAL — "lift and focus"
   Items rise, un-blur and settle out of a slight tilt as they
   enter the viewport. Cards in a grid follow one after another.
   ---------------------------------------------------------- */

.products-grid { perspective: 1400px; }

/* Filtered-out cards leave the grid entirely.
   Needs !important — .prod-card carries display:flex!important. */
.prod-card.is-hidden { display: none !important; }

/* Product cards drop in from above and settle */
.prod-card.reveal {
  contain: none;
  opacity: 0;
  transform: translateY(-58px) scale(0.93) rotateX(-14deg);
  transform-origin: 50% -30%;
  filter: blur(9px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.34, 1.28, 0.5, 1),
              filter 0.6s ease;
  transition-delay: calc(var(--reveal-i, 0) * 75ms);
}
.prod-card.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
  filter: blur(0);
}

/* Everything else: a quieter rise, no tilt */
.reveal:not(.prod-card) {
  opacity: 0;
  transform: translateY(38px);
  filter: blur(5px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s ease;
}
.reveal:not(.prod-card).visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Side entries keep their direction but gain the same easing */
.reveal-left, .reveal-right {
  filter: blur(5px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s ease;
}
.reveal-left { transform: translateX(-56px) rotate(-1.5deg); }
.reveal-right { transform: translateX(56px) rotate(1.5deg); }
.reveal-left.visible, .reveal-right.visible {
  transform: translateX(0) rotate(0deg);
  filter: blur(0);
}

/* Terms cards and stat boxes stagger like the product grid */
.terms-card.reveal, .stat-box.reveal {
  transition-delay: calc(var(--reveal-i, 0) * 90ms);
}

/* Once settled, hand control back so hover feels immediate */
.prod-card.reveal.visible,
.reveal.visible:not(.prod-card) { will-change: auto; }

@media (prefers-reduced-motion: reduce) {
  .prod-card.reveal,
  .reveal:not(.prod-card),
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}
/* ----------------------------------------------------------
   13. MOBILE TUNING
   ---------------------------------------------------------- */
@media (max-width: 640px) {
  .nav-logo-mark { width: 28px; height: 28px; }
  .footer-mark   { width: 60px; height: 60px; }
  .hero-logo     { margin-bottom: 1rem; }
}