/**
 * Dagkos - Animation Styles
 * GSAP ScrollTrigger helper classes
 */

/* ========================================
   Animation Initial States
   ======================================== */

/* Fade animations */
[data-gsap="fade-in"] {
  opacity: 0;
}

/* Reveal animations */
[data-gsap="reveal-up"] {
  opacity: 0;
  transform: translateY(60px);
}

[data-gsap="reveal-down"] {
  opacity: 0;
  transform: translateY(-60px);
}

[data-gsap="reveal-left"] {
  opacity: 0;
  transform: translateX(60px);
}

[data-gsap="reveal-right"] {
  opacity: 0;
  transform: translateX(-60px);
}

/* Scale animations */
[data-gsap="scale-in"] {
  opacity: 0;
  transform: scale(0.8);
}

[data-gsap="scale-up"] {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
}

/* Stagger containers */
[data-gsap="stagger-up"] > * {
  opacity: 0;
  transform: translateY(40px);
}

[data-gsap="stagger-fade"] > * {
  opacity: 0;
}

/* ========================================
   Timeline Animation States
   ======================================== */
.timeline__item {
  opacity: 0;
}

.timeline__item:nth-child(odd) {
  transform: translateX(-50px);
}

.timeline__item:nth-child(even) {
  transform: translateX(50px);
}

.timeline__dot {
  transform: scale(0);
}

.timeline::before {
  transform-origin: top;
  transform: scaleY(0);
}

/* Animated state classes (added by GSAP) */
.timeline.is-animated::before {
  transform: scaleY(1);
  transition: transform 1s ease-out;
}

.timeline__item.is-animated {
  opacity: 1;
  transform: translateX(0);
  transition: all 0.6s ease-out;
}

.timeline__dot.is-animated {
  transform: scale(1);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   Gallery Animations
   ======================================== */
.gallery__item {
  opacity: 0;
  transform: scale(0.9);
}

.gallery__item.is-visible {
  opacity: 1;
  transform: scale(1);
  transition: all 0.5s ease-out;
}

/* ========================================
   Hero Animations
   ======================================== */
.hero__logo {
  opacity: 0;
  transform: scale(0.8);
}

.hero__title {
  opacity: 0;
  transform: translateY(30px);
}

.hero__tagline {
  opacity: 0;
  transform: translateY(20px);
}

.hero__established {
  opacity: 0;
}

.hero__cta {
  opacity: 0;
  transform: translateY(20px);
}

/* Animated hero */
.hero.is-animated .hero__logo {
  opacity: 1;
  transform: scale(1);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero.is-animated .hero__title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease-out 0.3s;
}

.hero.is-animated .hero__tagline {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease-out 0.5s;
}

.hero.is-animated .hero__established {
  opacity: 1;
  transition: opacity 0.6s ease-out 0.7s;
}

.hero.is-animated .hero__cta {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease-out 0.9s;
}

/* ========================================
   Card Stagger Animations
   ======================================== */
.card {
  opacity: 0;
  transform: translateY(30px);
}

.card.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease-out;
}

/* ========================================
   Section Header Animations
   ======================================== */
.section-header__title {
  opacity: 0;
  transform: translateY(20px);
}

.section-header__subtitle {
  opacity: 0;
}

.section-header__line {
  transform: scaleX(0);
}

.section-header.is-animated .section-header__title {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease-out;
}

.section-header.is-animated .section-header__subtitle {
  opacity: 1;
  transition: opacity 0.6s ease-out 0.2s;
}

.section-header.is-animated .section-header__line {
  transform: scaleX(1);
  transition: transform 0.6s ease-out 0.4s;
}

/* ========================================
   Text Reveal Animation
   ======================================== */
.text-reveal {
  overflow: hidden;
}

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

.text-reveal.is-animated .text-reveal__inner {
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ========================================
   Gold Shimmer Effect
   ======================================== */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-gold-dark) 0%,
    var(--color-gold) 25%,
    var(--color-gold-light) 50%,
    var(--color-gold) 75%,
    var(--color-gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

/* ========================================
   Loading States
   ======================================== */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.is-loading {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-gold-dark);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ========================================
   Reduced Motion
   ======================================== */
@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;
  }

  /* Reset all GSAP animations */
  [data-gsap],
  [data-gsap] > * {
    opacity: 1 !important;
    transform: none !important;
  }

  .timeline__item,
  .timeline__dot,
  .timeline::before,
  .gallery__item,
  .card,
  .hero__logo,
  .hero__title,
  .hero__tagline,
  .hero__established,
  .hero__cta,
  .section-header__title,
  .section-header__subtitle,
  .section-header__line,
  .text-reveal__inner {
    opacity: 1 !important;
    transform: none !important;
  }
}