/* ============================================================
   YUG INTERNATIONAL JEWELLERY — ANIMATIONS CSS
   GPU-accelerated keyframes & transitions
   ============================================================ */

/* ---- Keyframes ---- */

@keyframes diamondSpin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%       { transform: rotate(180deg) scale(1.1); }
}

@keyframes shapeFloat {
  0%, 100% { transform: rotate(45deg) translateY(0px); }
  50%       { transform: rotate(45deg) translateY(-18px); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(10px); opacity: 0.4; }
}

@keyframes goldShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes countUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(212,175,55,0.2); }
  50%       { box-shadow: 0 0 30px rgba(212,175,55,0.5); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(212,175,55,0.2); }
  50%       { border-color: rgba(212,175,55,0.6); }
}

@keyframes productStagger {
  from { opacity: 0; transform: translateY(25px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes goldLineDraw {
  from { width: 0; opacity: 0; }
  to   { width: 60px; opacity: 1; }
}

@keyframes goldPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- Utility animation classes ---- */

.animate-fade-in-up {
  animation: fadeInUp 0.7s ease forwards;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.animate-scale-in {
  animation: scaleIn 0.5s ease forwards;
}

.animate-slide-left {
  animation: slideInLeft 0.7s ease forwards;
}

.animate-slide-right {
  animation: slideInRight 0.7s ease forwards;
}

/* ---- Nav after-load animation ---- */
#mainNav {
  animation: navSlideDown 0.4s ease 0.05s both;
}

/* ---- Hero content stagger (post intro) ---- */
.hero-content.reveal .hero-eyebrow {
  animation: fadeInUp 0.6s ease 0.1s both;
}
.hero-content.reveal .hero-title {
  animation: fadeInUp 0.7s ease 0.25s both;
}
.hero-content.reveal .hero-subtitle {
  animation: fadeInUp 0.6s ease 0.4s both;
}
.hero-content.reveal .hero-tagline {
  animation: fadeInUp 0.6s ease 0.5s both;
}
.hero-content.reveal .hero-actions {
  animation: fadeInUp 0.6s ease 0.65s both;
}
.hero-content.reveal .hero-badges {
  animation: fadeInUp 0.6s ease 0.8s both;
}

/* ---- Hero shapes — pulse glow ---- */
.shape-1 { animation: shapeFloat 8s ease-in-out infinite, glowPulse 5s ease-in-out infinite; }
.shape-2 { animation: shapeFloat 12s ease-in-out infinite 2s; }
.shape-3 { animation: shapeFloat 10s ease-in-out infinite 1s; }

/* ---- Gold shimmer text effect (applied to hero title accent) ---- */
.hero-title-accent {
  background: linear-gradient(
    90deg,
    var(--gold-dark) 0%,
    var(--gold-accent) 40%,
    var(--gold-primary) 60%,
    var(--gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 4s linear infinite 2s;
}

/* ---- Section eyebrow gold line animation ---- */
.section-eyebrow::before {
  animation: goldLineDraw 0.8s ease forwards;
}

/* ---- Product card stagger (applied via JS) ---- */
.product-card.stagger-animate {
  animation: productStagger 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  opacity: 0;
}

/* ---- Capability card hover border animate ---- */
.capability-card:hover {
  animation: borderGlow 2s ease infinite;
}

/* ---- Button gold glow pulse on hover ---- */
.btn-gold:hover {
  animation: glowPulse 1.5s ease infinite;
}

/* ---- Back-to-top pulse ---- */
.back-to-top.visible {
  animation: goldPulse 3s ease-in-out infinite 2s;
}

/* ---- Scroll indicator bounce ---- */
.scroll-dot {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* ---- Loading skeleton for product images ---- */
.product-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(212,175,55,0.04) 0%,
    rgba(212,175,55,0.10) 50%,
    rgba(212,175,55,0.04) 100%
  );
  background-size: 200% 100%;
  animation: goldShimmer 1.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.product-card-img img.loaded + .product-card-img::before,
.product-card-img.loaded::before { display: none; }

/* AOS customizations */
[data-aos="fade-up"] {
  transform: translateY(30px);
}
[data-aos="fade-left"] {
  transform: translateX(40px);
}
[data-aos="fade-right"] {
  transform: translateX(-40px);
}
[data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Modal entrance ---- */
.product-modal.open .modal-container {
  animation: scaleIn 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ---- Event cards hover slide ---- */
.event-card {
  transition: transform 0.3s ease, background 0.3s ease, border-left-color 0.3s ease;
}

/* ---- Collection tab active indicator ---- */
.collection-tab.active {
  position: relative;
}
.collection-tab.active::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: var(--gold-primary);
  border-radius: 50%;
}

/* ---- Gold top border line animate on section reveal ---- */
.section-collection .collection-title::before {
  display: none;
}

/* ---- Stats number pop ---- */
.stat-number.counting {
  animation: scaleIn 0.3s ease;
}

/* ---- Parallax transition smoothing ---- */
.hero-parallax-bg {
  transition: transform 0.08s linear;
  will-change: transform;
}

/* ---- Focus visible for accessibility ---- */
:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 3px;
}
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 3px;
  border-radius: 2px;
}