/**
 * CGC Luxury — lightweight animations.
 * All effects use transform/opacity only (GPU-friendly, no layout thrash)
 * and are disabled under prefers-reduced-motion.
 */

/* ============================================================
   1. HOMEPAGE PRELOADER — rotating gold core + product glyphs
   (bangle, ring, chain, earring) orbiting like a loading symbol
   ============================================================ */
.cgc-preloader {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--cgc-alabaster, #faf9f6);
  opacity: 1;
  transition: opacity 0.4s ease;
}

.cgc-preloader--done {
  opacity: 0;
  pointer-events: none;
}

.cgc-preloader__orbit {
  position: relative;
  width: 120px;
  height: 120px;
  animation: cgc-preloader-orbit 1.5s linear infinite;
}

.cgc-preloader__icon {
  position: absolute;
  width: 30px;
  height: 30px;
  color: var(--cgc-gold, #d4b26f);
  display: block;
}

.cgc-preloader__icon svg {
  width: 100%;
  height: 100%;
}

.cgc-preloader__icon--top { top: 0; left: 45px; }
.cgc-preloader__icon--right { top: 45px; right: 0; }
.cgc-preloader__icon--bottom { bottom: 0; left: 45px; }
.cgc-preloader__icon--left { top: 45px; left: 0; }

.cgc-preloader__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border: 2px solid var(--cgc-gold, #d4b26f);
  border-top-color: transparent;
  border-radius: 50%;
  animation: cgc-preloader-core 0.9s linear infinite;
}

.cgc-preloader__label {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 15px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--cgc-obsidian, #1c1c1c);
  opacity: 0.8;
}

@keyframes cgc-preloader-orbit {
  to { transform: rotate(360deg); }
}

@keyframes cgc-preloader-core {
  to { transform: rotate(360deg); }
}

/* ============================================================
   2. SHOP ENTRANCE — cart icon rolls into the centre, then the
   products fall in staggered. Overlay removed after ~0.6s.
   ============================================================ */
.cgc-shop-enter {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cgc-alabaster, #faf9f6);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.cgc-shop-enter--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cgc-shop-enter__stage {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cgc-shop-enter__ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--cgc-gold, #d4b26f); border-top-color: transparent;
  border-radius: 50%;
  animation: cgc-shop-ring 0.9s linear infinite;
}

.cgc-shop-enter__cart {
  width: 46px;
  height: 46px;
  color: var(--cgc-gold, #d4b26f);
  animation: cgc-shop-cart-roll 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cgc-shop-cart-roll {
  from {
    opacity: 0;
    transform: translateY(-46px) rotate(-540deg) scale(0.3);
  }
}

@keyframes cgc-shop-ring {
  to { transform: rotate(360deg); }
}

.cgc-product-fall {
  animation: cgc-fall-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cgc-fall-in {
  from {
    opacity: 0;
    transform: translateY(-30px) rotate(-1.6deg);
  }
}

/* ============================================================
   3. SCROLL REVEAL
   ============================================================ */
.cgc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cgc-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   3. SHOP → CART "fly into cart" animation
   ============================================================ */
.cgc-fly-img {
  position: fixed;
  z-index: 99999;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.5, -0.15, 0.6, 1), opacity 0.55s ease;
}

.cgc-cart-icon.cgc-cart-bump .cgc-cart-count,
.cgc-cart-count.cgc-cart-bump {
  animation: cgc-cart-bump 0.45s ease;
}

@keyframes cgc-cart-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.55); }
  100% { transform: scale(1); }
}

/* ============================================================
   4. CATEGORY HERO — rebuilt from scratch: destination NAME
   prominently (eyebrow + serif title + gold line + count),
   glyph as faint backdrop, entrance-only (no infinite rotation).
   ============================================================ */
.cgc-cat-hero {
  position: relative;
  padding: 56px 24px 44px;
  text-align: center;
  background: linear-gradient(180deg, #FAF9F6 0%, #FDFCF9 100%);
  border-bottom: 1px solid var(--cgc-border, #E8E6E0);
  overflow: hidden;
}

.cgc-cat-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.cgc-cat-hero__eyebrow {
  font-family: var(--font-sans, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cgc-gold, #D4B26F);
  margin: 0 0 10px;
  opacity: 0;
  transform: translateY(8px);
  animation: cgc-cat-in 620ms cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: 80ms;
}

.cgc-cat-hero__title {
  margin: 0;
  font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cgc-obsidian, #1C1C1C);
  opacity: 0;
  transform: translateY(14px);
  animation: cgc-cat-in 720ms cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: 140ms;
}

.cgc-cat-hero__line {
  width: 64px;
  height: 1px;
  background: var(--cgc-gold, #D4B26F);
  margin: 16px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  animation: cgc-cat-line 520ms cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: 380ms;
}

.cgc-cat-hero__count {
  margin: 14px 0 0;
  font-family: var(--font-sans, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a9a9a;
  opacity: 0;
  transform: translateY(6px);
  animation: cgc-cat-in 520ms ease forwards;
  animation-delay: 480ms;
}

.cgc-cat-hero__glyph-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  transform: scale(0.96);
  animation: cgc-cat-glyph 800ms cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: 200ms;
}

.cgc-cat-hero__glyph {
  width: min(380px, 72vw);
  height: auto;
  color: var(--cgc-gold, #D4B26F);
  opacity: 0.09;
}

/* Per-category subtle size tweaks + respective product loopy animation (+1s as requested) */
.cgc-cat-hero--bangles .cgc-cat-hero__glyph { width: min(340px, 68vw); animation: cgc-bangle-loop 15s linear infinite; }
.cgc-cat-hero--rings .cgc-cat-hero__glyph { width: min(360px, 70vw); animation: cgc-ring-loop 13s linear infinite; }
.cgc-cat-hero--earrings .cgc-cat-hero__glyph { width: min(420px, 78vw); animation: cgc-earrings-swing 3.6s ease-in-out infinite alternate; transform-origin: 50% 8%; }
.cgc-cat-hero--necklace .cgc-cat-hero__glyph { width: min(360px, 70vw); animation: cgc-necklace-sway 4.2s ease-in-out infinite alternate; transform-origin: 50% 28%; }
.cgc-cat-hero--chains .cgc-cat-hero__glyph { width: min(400px, 74vw); animation: cgc-chains-glide 2.8s linear infinite; }

@keyframes cgc-cat-in { to { opacity: 1; transform: none; } }
@keyframes cgc-cat-line { to { transform: scaleX(1); } }
@keyframes cgc-cat-glyph { to { opacity: 1; transform: scale(1); } }
@keyframes cgc-bangle-loop { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cgc-ring-loop { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes cgc-earrings-swing { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes cgc-necklace-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes cgc-chains-glide { from { transform: translateX(-8px); } to { transform: translateX(8px); } }

/* ============================================================
   5. CONTACT PAGE — pulsing icons + row reveal
   ============================================================ */
.cgc-contact-row__icon {
  position: relative;
}

.cgc-contact-row__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--cgc-gold, #d4b26f);
  animation: cgc-pulse 2.2s ease-out infinite;
}

.cgc-contact-row:nth-child(2) .cgc-contact-row__icon::after {
  animation-delay: 0.25s;
}

.cgc-contact-row:nth-child(3) .cgc-contact-row__icon::after {
  animation-delay: 0.5s;
}

@keyframes cgc-pulse {
  0% { transform: scale(0.7); opacity: 0.9; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ============================================================
   6. CART SLIDE-IN + POLICY PAGE SEAL
   ============================================================ */
.cgc-slide-in {
  animation: cgc-slide-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cgc-slide-in {
  from {
    opacity: 0;
    transform: translateX(34px);
  }
}

.cgc-page-policy .wp-block-post-title {
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  animation: cgc-policy-stamp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cgc-page-policy .wp-block-post-title::before {
  content: '';
  position: absolute;
  inset: -0.55em -0.8em;
  border: 2px solid var(--cgc-gold, #d4b26f); border-top-color: transparent;
  border-radius: 10px;
  animation: cgc-policy-ring 1s ease-out both;
}

@keyframes cgc-policy-stamp {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

@keyframes cgc-policy-ring {
  from {
    opacity: 0;
    transform: rotate(-70deg) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* ============================================================
   7. CART / CHECKOUT — staggered entrances + shimmer buttons
   ============================================================ */
.cgc-fade-up {
  animation: cgc-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes cgc-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.cgc-btn-shimmer {
  position: relative;
  overflow: hidden;
}

.cgc-btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-350%) skewX(-20deg);
  animation: cgc-shimmer 2.6s ease-in-out infinite;
}

@keyframes cgc-shimmer {
  0%, 55% { transform: translateX(-350%) skewX(-20deg); }
  100% { transform: translateX(450%) skewX(-20deg); }
}

/* Empty cart — gentle bounce of the icon */
.cart-empty {
  animation: cgc-empty-bounce 1.6s ease-in-out infinite;
}

@keyframes cgc-empty-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ============================================================
   8. REDUCED MOTION — everything off
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cgc-preloader,
  .cgc-preloader__orbit,
  .cgc-preloader__core,
  .cgc-shop-enter,
  .cgc-shop-enter__ring,
  .cgc-shop-enter__cart,
  .cgc-product-fall,
  .cgc-reveal,
  .cgc-fly-img,
  .cgc-cart-icon.cgc-cart-bump .cgc-cart-count,
  .cgc-cart-count.cgc-cart-bump,
  .cgc-cat-hero__eyebrow,
  .cgc-cat-hero__title,
  .cgc-cat-hero__line,
  .cgc-cat-hero__count,
  .cgc-cat-hero__glyph,
  .cgc-cat-hero__glyph-wrap,
  .cgc-glyph-spark,
  .cgc-contact-row__icon::after,
  .cgc-fade-up,
  .cgc-slide-in,
  .cgc-page-policy .wp-block-post-title,
  .cgc-page-policy .wp-block-post-title::before,
  .cgc-btn-shimmer::after,
  .cart-empty {
    animation: none !important;
    transition: none !important;
  }

  .cgc-shop-enter {
    display: none;
  }

  .cgc-reveal {
    opacity: 1;
    transform: none;
  }

  .cgc-cat-hero__eyebrow,
  .cgc-cat-hero__title,
  .cgc-cat-hero__count {
    opacity: 1;
    transform: none;
  }
  .cgc-cat-hero__line {
    transform: scaleX(1);
  }
  .cgc-cat-hero__glyph-wrap {
    opacity: 1;
    transform: scale(1);
  }
  .cgc-cat-hero__glyph {
    opacity: 0.09;
    transform: none;
  }

  .cgc-fly-img {
    display: none;
  }
}