/* ============================================
   Sri Ram Ram Govardhan Jewellers
   Animations Stylesheet
   ============================================ */

/* ============================================
   KEYFRAME DEFINITIONS
   ============================================ */

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

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

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

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

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

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

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

@keyframes scaleInBounce {
  0%   { opacity: 0; transform: scale(0.75); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { transform: scale(1); }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 1;   transform: scaleY(1);   }
  50%       { opacity: 0.3; transform: scaleY(0.5); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(0.96); }
}

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

@keyframes goldGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(197,151,58,0.3), 0 0 24px rgba(197,151,58,0.1); }
  50%       { box-shadow: 0 0 24px rgba(197,151,58,0.5), 0 0 48px rgba(197,151,58,0.2); }
}

@keyframes goldGlowText {
  0%, 100% { text-shadow: 0 0 10px rgba(197,151,58,0.4); }
  50%       { text-shadow: 0 0 24px rgba(197,151,58,0.8), 0 0 48px rgba(197,151,58,0.3); }
}

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

@keyframes borderWalk {
  0%   { clip-path: inset(0 100% 100% 0); }
  25%  { clip-path: inset(0 0 100% 0); }
  50%  { clip-path: inset(0 0 0 100%); }
  75%  { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes lineGrow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

@keyframes lineGrowCenter {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

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

@keyframes particleDrift {
  0%   { transform: translateY(0)   translateX(0)  opacity(0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-80px) translateX(20px); opacity: 0; }
}

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

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

@keyframes spinnerArc {
  to { stroke-dashoffset: 0; }
}

@keyframes whatsappBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  30%       { transform: translateY(-10px) scale(1.05); }
  60%       { transform: translateY(-4px) scale(1.02); }
}

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

@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ============================================
   UTILITY ANIMATION CLASSES
   ============================================ */

/* Entrance animations (trigger with JS) */
.anim-fade-in          { animation: fadeIn        0.6s var(--ease-out) both; }
.anim-fade-slide-up    { animation: fadeSlideUp   0.7s var(--ease-out) both; }
.anim-fade-slide-down  { animation: fadeSlideDown 0.7s var(--ease-out) both; }
.anim-fade-slide-left  { animation: fadeSlideLeft 0.7s var(--ease-out) both; }
.anim-fade-slide-right { animation: fadeSlideRight 0.7s var(--ease-out) both; }
.anim-scale-in         { animation: scaleIn       0.6s var(--ease-out) both; }
.anim-scale-bounce     { animation: scaleInBounce 0.7s var(--ease-out) both; }

/* Delay helpers */
.anim-delay-100  { animation-delay: 0.1s; }
.anim-delay-200  { animation-delay: 0.2s; }
.anim-delay-300  { animation-delay: 0.3s; }
.anim-delay-400  { animation-delay: 0.4s; }
.anim-delay-500  { animation-delay: 0.5s; }
.anim-delay-600  { animation-delay: 0.6s; }
.anim-delay-700  { animation-delay: 0.7s; }
.anim-delay-800  { animation-delay: 0.8s; }
.anim-delay-1000 { animation-delay: 1.0s; }

/* Continuous animations */
.anim-float       { animation: float       3s ease-in-out infinite; }
.anim-float-slow  { animation: floatSlow   6s ease-in-out infinite; }
.anim-pulse       { animation: pulse       2.5s ease-in-out infinite; }
.anim-rotate-slow { animation: rotateSlow 20s linear infinite; }
.anim-gold-glow   { animation: goldGlow    2.5s ease-in-out infinite; }
.anim-gold-glow-text { animation: goldGlowText 2.5s ease-in-out infinite; }

/* Shimmer text */
.text-shimmer {
  background: linear-gradient(
    90deg,
    var(--gold-dark) 0%,
    var(--gold)       20%,
    var(--gold-bright) 40%,
    var(--gold)        60%,
    var(--gold-dark)  80%,
    var(--gold)        100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* Animated gold underline on hover */
.hover-gold-line {
  position: relative;
  display: inline-block;
}
.hover-gold-line::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--gold-gradient);
  transition: width 0.45s var(--ease-out);
}
.hover-gold-line:hover::after { width: 100%; }

/* ============================================
   SCROLL REVEAL SYSTEM
   (Enhanced — works alongside IntersectionObserver in animations.js)
   ============================================ */

.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  will-change: opacity, transform;
  transition-property: opacity, transform;
  transition-timing-function: var(--ease-out);
  transition-duration: 0.85s;
}

.reveal       { opacity: 0; transform: translateY(44px); }
.reveal-left  { opacity: 0; transform: translateX(-44px); }
.reveal-right { opacity: 0; transform: translateX(44px); }
.reveal-scale { opacity: 0; transform: scale(0.92); }

.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: none;
}

/* Stagger delays on revealed children */
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }
.reveal-delay-5 { transition-delay: 0.50s; }

/* ============================================
   PAGE TRANSITION OVERLAY
   ============================================ */

.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--charcoal);
  z-index: 9998;
  pointer-events: none;
  transform-origin: bottom;
  transform: scaleY(0);
  transition: transform 0.5s var(--ease-in-out);
}

.page-transition-overlay.enter {
  transform: scaleY(1);
  transform-origin: bottom;
}

.page-transition-overlay.exit {
  transform: scaleY(0);
  transform-origin: top;
}

/* ============================================
   HERO ANIMATIONS
   ============================================ */

.hero-eyebrow  { opacity: 0; animation: fadeSlideUp 0.9s var(--ease-out) 0.3s forwards; }
.hero-title    { opacity: 0; animation: fadeSlideUp 0.9s var(--ease-out) 0.55s forwards; }
.hero-subtitle { opacity: 0; animation: fadeSlideUp 0.9s var(--ease-out) 0.75s forwards; }
.hero-actions  { opacity: 0; animation: fadeSlideUp 0.9s var(--ease-out) 0.95s forwards; }
.hero-stats    { opacity: 0; animation: fadeSlideLeft 0.9s var(--ease-out) 1.15s forwards; }
.hero-scroll   { opacity: 0; animation: fadeIn 0.9s var(--ease-out) 1.5s forwards; }

.hero-scroll-line { animation: scrollPulse 2.2s ease-in-out infinite; }

.whatsapp-float { animation: whatsappBounce 3.5s ease-in-out infinite; }

/* ============================================
   BUTTON MICRO-INTERACTIONS
   ============================================ */

.btn {
  position: relative;
  overflow: hidden;
  transition:
    transform      0.35s var(--ease-out),
    box-shadow     0.35s var(--ease-out),
    background     0.35s var(--ease-out),
    color          0.35s var(--ease-out),
    border-color   0.35s var(--ease-out);
}

/* Ripple on click */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* Gold shine sweep */
.btn-gold::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.6s var(--ease-out);
}
.btn-gold:hover::before { left: 125%; }

/* ============================================
   CARD HOVER ANIMATIONS
   ============================================ */

/* Collection cards — lift + border glow */
.collection-card,
.coll-card,
.seller-card,
.why-card,
.trust-item,
.craft-card,
.testimonial-card {
  transition:
    transform   0.45s var(--ease-out),
    box-shadow  0.45s var(--ease-out),
    border-color 0.45s var(--ease-out),
    background  0.45s var(--ease-out);
}

/* Masonry hover */
.masonry-item {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.masonry-item:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 40px rgba(10,8,6,0.2);
  z-index: 2;
}

/* Instagram grid cells */
.insta-item {
  transition: transform 0.4s var(--ease-out);
  overflow: hidden;
}

/* ============================================
   NAVIGATION ANIMATIONS
   ============================================ */

.header {
  animation: navReveal 0.6s var(--ease-out) both;
}

/* Nav link indicator bounce */
.nav-link::after {
  transition: width 0.4s var(--ease-out), opacity 0.4s;
}

/* Mobile menu links stagger */
.mobile-menu .mobile-nav-link {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), color 0.3s;
}
.mobile-menu.open .mobile-nav-link:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.mobile-menu.open .mobile-nav-link:nth-child(2) { opacity:1; transform:none; transition-delay:0.10s; }
.mobile-menu.open .mobile-nav-link:nth-child(3) { opacity:1; transform:none; transition-delay:0.15s; }
.mobile-menu.open .mobile-nav-link:nth-child(4) { opacity:1; transform:none; transition-delay:0.20s; }
.mobile-menu.open .mobile-nav-link:nth-child(5) { opacity:1; transform:none; transition-delay:0.25s; }

/* ============================================
   GOLD LINE ANIMATE-IN
   ============================================ */

.gold-line {
  transform-origin: center;
  animation: lineGrowCenter 0.8s var(--ease-out) both;
}

.gold-line-left {
  transform-origin: left;
  animation: lineGrow 0.8s var(--ease-out) both;
}

/* ============================================
   FORM FOCUS ANIMATIONS
   ============================================ */

.form-input, .form-select, .form-textarea {
  transition:
    border-color 0.3s,
    box-shadow   0.3s,
    background   0.3s,
    transform    0.2s;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  transform: translateY(-1px);
}

/* ============================================
   MARQUEE PAUSE ON HOVER
   ============================================ */

.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

/* ============================================
   LOADING SPINNER (for async states)
   ============================================ */

.spinner {
  width: 32px;
  height: 32px;
}

.spinner-circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: spinnerArc 1.2s ease-in-out infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
}

/* ============================================
   FLOATING DECORATIVE ELEMENTS
   ============================================ */

.deco-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.06;
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
  animation: floatSlow 8s ease-in-out infinite;
}

.deco-orb-1 { width: 400px; height: 400px; top: -100px; right: -100px; animation-delay: 0s; }
.deco-orb-2 { width: 300px; height: 300px; bottom: -80px; left: -60px;  animation-delay: 3s; }
.deco-orb-3 { width: 200px; height: 200px; top: 40%;    left: 10%;      animation-delay: 1.5s; opacity: 0.04; }

/* ============================================
   STAGGERED GRID CHILDREN
   (Applied by animations.js on .stagger-parent)
   ============================================ */

.stagger-parent > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.stagger-parent.staggered > *:nth-child(1)  { opacity:1; transform:none; transition-delay:0.05s; }
.stagger-parent.staggered > *:nth-child(2)  { opacity:1; transform:none; transition-delay:0.10s; }
.stagger-parent.staggered > *:nth-child(3)  { opacity:1; transform:none; transition-delay:0.15s; }
.stagger-parent.staggered > *:nth-child(4)  { opacity:1; transform:none; transition-delay:0.20s; }
.stagger-parent.staggered > *:nth-child(5)  { opacity:1; transform:none; transition-delay:0.25s; }
.stagger-parent.staggered > *:nth-child(6)  { opacity:1; transform:none; transition-delay:0.30s; }
.stagger-parent.staggered > *:nth-child(7)  { opacity:1; transform:none; transition-delay:0.35s; }
.stagger-parent.staggered > *:nth-child(8)  { opacity:1; transform:none; transition-delay:0.40s; }
.stagger-parent.staggered > *:nth-child(9)  { opacity:1; transform:none; transition-delay:0.45s; }
.stagger-parent.staggered > *:nth-child(10) { opacity:1; transform:none; transition-delay:0.50s; }
.stagger-parent.staggered > *:nth-child(n+11){ opacity:1; transform:none; transition-delay:0.55s; }

/* ============================================
   HERO BG GRADIENT ANIMATION
   ============================================ */

.hero-animated-bg {
  background: linear-gradient(
    -45deg,
    #0F0C08, #1A1510, #251A0F, #1C1208, #100D07
  );
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

/* ============================================
   SECTION DIVIDER ORNAMENT
   ============================================ */

.section-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 48px 0;
}

.section-divider-line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--gold-gradient);
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-out);
}

.section-divider.revealed .section-divider-line { transform: scaleX(1); }

.section-divider-gem {
  font-family: var(--font-cinzel);
  font-size: 18px;
  color: var(--gold);
  opacity: 0.6;
  animation: pulse 3s ease-in-out infinite;
}

/* ============================================
   TOOLTIP
   ============================================ */

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--charcoal);
  color: var(--ivory);
  font-family: var(--font-cinzel);
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 6px 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  border: 1px solid rgba(197,151,58,0.2);
}

[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   REDUCE MOTION (ACCESSIBILITY)
   ============================================ */

@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;
  }

  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}