/* ============================================
   ART BY REMYA — Animations
   GSAP helper classes + CSS keyframes
   ============================================ */

/* ---------- Opening Animation ---------- */
.opening--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- GSAP Reveal Classes ---------- */
/* Applied by GSAP ScrollTrigger — initial states */

.gs-reveal {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.gs-reveal-up {
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  will-change: transform, opacity;
}

.gs-reveal-down {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50px);
  will-change: transform, opacity;
}

.gs-reveal-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50px);
  will-change: transform, opacity;
}

.gs-reveal-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(50px);
  will-change: transform, opacity;
}

.gs-reveal-scale {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
  will-change: transform, opacity;
}

/* ---------- SVG Mandala Draw ---------- */
.mandala-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.mandala-draw--animated {
  animation: draw-mandala 2s ease-in-out forwards;
}

@keyframes draw-mandala {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- Gold Shimmer ---------- */
.gold-shimmer {
  background: linear-gradient(
    110deg,
    var(--color-secondary) 0%,
    var(--color-gold-light) 20%,
    var(--color-secondary) 40%,
    var(--color-secondary) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}

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

/* ---------- Floating Particles ---------- */
.particle--1 { left: 10%; animation-duration: 15s; animation-delay: 0s; }
.particle--2 { left: 25%; animation-duration: 18s; animation-delay: 2s; }
.particle--3 { left: 45%; animation-duration: 12s; animation-delay: 4s; }
.particle--4 { left: 60%; animation-duration: 20s; animation-delay: 1s; }
.particle--5 { left: 75%; animation-duration: 16s; animation-delay: 3s; }
.particle--6 { left: 90%; animation-duration: 14s; animation-delay: 5s; }

.particle svg {
  width: 40px;
  height: 40px;
}

/* ---------- Parallax Helper ---------- */
.parallax-bg {
  will-change: transform;
}

/* ---------- Fade transitions between pages ---------- */
.page-transition {
  animation: page-fade-in 0.5s ease-out;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Image reveal ---------- */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  transform-origin: left;
  transition: transform 0.8s var(--ease-out);
}

.img-reveal--revealed::after {
  transform: scaleX(0);
  transform-origin: right;
}

/* ---------- Text Split Animation Helper ---------- */
.split-text .word {
  display: inline-block;
  overflow: hidden;
}

.split-text .word-inner {
  display: inline-block;
  transform: translateY(100%);
}

/* ---------- Counter Animation ---------- */
.counter-animate {
  display: inline-block;
  min-width: 2ch;
}

/* ---------- Card stagger animation ---------- */
.stagger-item {
  opacity: 0;
  transform: translateY(30px);
}

/* ---------- Smooth Accordion ---------- */
.accordion-content {
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}

/* ---------- Carousel Slide ---------- */
.carousel-fade {
  transition: opacity 0.5s ease-in-out;
}

/* ---------- Hover scale (for cards) ---------- */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

/* ---------- Loading skeleton ---------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-border) 25%,
    rgba(200, 161, 101, 0.15) 50%,
    var(--color-border) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

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

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .gs-reveal,
  .gs-reveal-up,
  .gs-reveal-down,
  .gs-reveal-left,
  .gs-reveal-right,
  .gs-reveal-scale,
  .stagger-item {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .particle {
    display: none;
  }
}