/* ============================================================
   GoGiftings V27 — 3D Butterfly + Premium UI (Clean v2)
   Fixes: mobile butterfly visible, gaps removed, buttons centered
   ============================================================ */

/* ── 0. Hide system cursor on desktop only ── */
@media (pointer: fine) {
  *, *::before, *::after { cursor: none !important; }
  a, button, [role="button"], input, select, label, textarea { cursor: none !important; }
}

/* ── 1. Butterfly canvas ── */
#gg-butterfly-canvas {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none; z-index: 99999; overflow: visible;
}

/* ── 2. Sparkle trail ── */
.gg-sparkle {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 99998;
  animation: gg-sparkle-fade 0.7s ease-out forwards;
  transform-origin: center;
}
@keyframes gg-sparkle-fade {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  60%  { opacity: 0.7; transform: scale(0.6) translateY(-8px); }
  100% { opacity: 0; transform: scale(0.2) translateY(-18px); }
}

/* ── 3. Glassmorphism topbar ── */
.topbar {
  background: linear-gradient(90deg, rgba(246,39,128,.92), rgba(90,26,147,.88)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: .02em !important;
}
.topbar a { color: rgba(255,255,255,.92) !important; text-decoration: none !important; transition: color .2s !important; }
.topbar a:hover { color: #fff !important; text-decoration: underline !important; }

/* ── 4. Glass header ── */
.header-main {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(246,39,128,.1) !important;
  box-shadow: 0 4px 24px rgba(107,32,96,.08) !important;
  position: sticky !important; top: 0 !important; z-index: 1000 !important;
}

/* ── 5. Ambient petals (all devices) ── */
.gg-petals-bg {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0; overflow: hidden;
}
.gg-petal {
  position: absolute; border-radius: 50% 0 50% 0;
  opacity: 0; animation: gg-petal-fall linear infinite; will-change: transform, opacity;
}
@keyframes gg-petal-fall {
  0%   { opacity: 0; transform: translateY(-20px) rotate(0deg) scale(0.8); }
  10%  { opacity: 0.55; }
  80%  { opacity: 0.30; }
  100% { opacity: 0; transform: translateY(100vh) rotate(720deg) translateX(55px) scale(1.1); }
}

/* ── 6. 3D product card tilt ── */
.gg-unified-card,
.product-card,
.gg-card,
.event-card {
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.2s ease !important;
}
.gg-tilt-active {
  transform: perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(4px) !important;
  box-shadow: 0 24px 56px rgba(72,32,84,.18) !important;
  border-color: rgba(246,39,128,.4) !important;
}
.gg-unified-card::after, .product-card::after, .event-card::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 60%) !important;
  pointer-events: none !important; opacity: 0 !important;
  transition: opacity .25s !important; z-index: 1 !important;
}
.gg-tilt-active::after { opacity: 1 !important; }

/* ── 7. Hero depth layers ── */
.hero, .hero-section, .hero-copy-image {
  position: relative !important; overflow: hidden !important;
}
.hero::before, .hero-section::before, .hero-copy-image::before {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: radial-gradient(ellipse 80% 60% at 20% 50%, rgba(246,39,128,.08) 0%, transparent 70%),
              radial-gradient(ellipse 60% 80% at 80% 60%, rgba(90,26,147,.07) 0%, transparent 70%) !important;
  pointer-events: none !important; z-index: 0 !important;
}

/* ── 8. CTA button pulse glow ── */
.add-cart-premium-btn,
.buy-now-theme-btn,
.final-premium-cta {
  position: relative !important; overflow: hidden !important;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease !important;
}
.add-cart-premium-btn::before,
.buy-now-theme-btn::before,
.final-premium-cta::before {
  content: '' !important; position: absolute !important; inset: -2px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg,#f62780,#5a1a93,#f62780) !important;
  background-size: 200% 200% !important;
  animation: gg-btn-shimmer 3s linear infinite !important;
  opacity: 0 !important; transition: opacity .3s !important; z-index: -1 !important;
}
.add-cart-premium-btn:hover::before,
.buy-now-theme-btn:hover::before,
.final-premium-cta:hover::before { opacity: 1 !important; }
@keyframes gg-btn-shimmer {
  0%  { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
.add-cart-premium-btn:hover,
.buy-now-theme-btn:hover,
.final-premium-cta:hover {
  transform: translateY(-3px) scale(1.025) !important;
  box-shadow: 0 18px 48px rgba(246,39,128,.38) !important;
}
.add-cart-premium-btn:active, .buy-now-theme-btn:active {
  transform: translateY(0) scale(.98) !important;
}

/* ── 9. Section dividers ── */
.gg-section-divider {
  display: flex !important; align-items: center !important;
  gap: 16px !important; margin: 0 0 32px !important;
}
.gg-section-divider::before, .gg-section-divider::after {
  content: '' !important; flex: 1 !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(246,39,128,.3), transparent) !important;
}
.gg-section-divider span {
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: #e8337c !important; white-space: nowrap !important;
}

/* ── 10. Product image float animation ── */
.main-visual img, .hero-product-img {
  animation: gg-float 4s ease-in-out infinite !important; will-change: transform !important;
}
@keyframes gg-float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}

/* ── 11. Image hover zoom ── */
.gg-unified-card:hover .gg-unified-img,
.product-card:hover img {
  transform: scale(1.07) !important;
  transition: transform .45s cubic-bezier(.25,.46,.45,.94) !important;
}

/* ── 12. Scrollbar ── */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: #fdf4fa !important; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,#f62780,#5a1a93) !important; border-radius: 999px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#d01f6a,#4a1480) !important;
}

/* ── 13. Focus ring ── */
:focus-visible {
  outline: 2px solid #f62780 !important; outline-offset: 3px !important; border-radius: 6px !important;
}

/* ── 14. Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .gg-petal, .gg-sparkle,
  .main-visual img, .hero-product-img,
  .add-cart-premium-btn::before, .buy-now-theme-btn::before {
    animation: none !important;
  }
  .gg-tilt-active { transform: none !important; }
}

/* ── 15. Mobile: disable float & tilt, keep petals ── */
@media (max-width: 600px) {
  .main-visual img, .hero-product-img { animation: none !important; }
  .gg-tilt-active { transform: none !important; }
}