/**
 * GJV 2026 Animations Stylesheet
 * Scroll-triggered reveals, entrance animations, and transitions
 */

/* ============================================================
   Scroll Reveal System
   ============================================================ */

.reveal {
  opacity: 0;
  animation: revealFade var(--duration-slower) var(--ease-out) forwards;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: revealSlideLeft var(--duration-slower) var(--ease-out) forwards;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  animation: revealSlideRight var(--duration-slower) var(--ease-out) forwards;
}

.reveal-fade {
  opacity: 0;
  animation: revealFade var(--duration-slower) var(--ease-out) forwards;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  animation: revealScale var(--duration-slower) var(--ease-out) forwards;
}

.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  animation: revealUp var(--duration-slower) var(--ease-out) forwards;
}

/* Stagger delays for chained reveals */
.reveal-d1 {
  animation-delay: 0ms;
}

.reveal-d2 {
  animation-delay: 100ms;
}

.reveal-d3 {
  animation-delay: 200ms;
}

.reveal-d4 {
  animation-delay: 300ms;
}

.reveal-d5 {
  animation-delay: 400ms;
}

.reveal-d6 {
  animation-delay: 500ms;
}

/* ============================================================
   Keyframe Animations
   ============================================================ */

@keyframes revealFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes revealSlideRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes revealScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero Entrance Animation */
@keyframes heroReveal {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Staggered hero content */
.gjv-hero-overline {
  animation: heroReveal var(--duration-slower) var(--ease-out) 0ms forwards;
  opacity: 0;
}

.gjv-hero-title {
  animation: heroReveal var(--duration-slower) var(--ease-out) 150ms forwards;
  opacity: 0;
}

.gjv-hero-subtitle {
  animation: heroReveal var(--duration-slower) var(--ease-out) 300ms forwards;
  opacity: 0;
}

.gjv-hero-cta {
  animation: heroReveal var(--duration-slower) var(--ease-out) 450ms forwards;
  opacity: 0;
}

/* Marquee Animation */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes marqueeReverse {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}

.gjv-marquee-content {
  animation: marquee 30s linear infinite;
}

.gjv-marquee-content.reverse {
  animation: marqueeReverse 30s linear infinite;
}

.gjv-partner-strip-content {
  animation: marquee 20s linear infinite;
}

/* Float Animation (for badges, stickers) */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

/* Card Hover Lift */
@keyframes cardLift {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-4px);
  }
}

.gjv-pricing-card,
.gjv-theme-card,
.gjv-audience-card,
.gjv-speaker-card,
.gjv-digital-card {
  transition: transform var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth),
    border-color var(--duration-normal) var(--ease-smooth);
}

/* Button Hover State */
@keyframes buttonHover {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-2px);
  }
}

.gjv-btn--primary,
.gjv-btn--secondary {
  transition: all var(--duration-fast) var(--ease-smooth);
}

.gjv-btn--primary:hover {
  animation: none;
}

/* Accordion Open/Close */
@keyframes accordionOpen {
  from {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }

  to {
    max-height: 1000px;
    opacity: 1;
    overflow: visible;
  }
}

@keyframes accordionClose {
  from {
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
  }

  to {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
  }
}

.accordion-content {
  transition: all var(--duration-normal) var(--ease-smooth);
}

.accordion-content.open {
  animation: accordionOpen var(--duration-normal) var(--ease-smooth) forwards;
}

.accordion-content.closed {
  animation: accordionClose var(--duration-normal) var(--ease-smooth) forwards;
}

/* Counter Animation Placeholder */
@keyframes countUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.counter {
  animation: countUp var(--duration-slow) var(--ease-out) forwards;
}

/* Pulse Animation */
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Shimmer/Loading Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.shimmer-loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Bounce Animation */
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.bounce {
  animation: bounce 1s ease-in-out infinite;
}

/* Fade In/Out Transitions */
.fade-enter {
  opacity: 0;
  animation: fadeEnter var(--duration-normal) var(--ease-smooth) forwards;
}

.fade-exit {
  opacity: 1;
  animation: fadeExit var(--duration-normal) var(--ease-smooth) forwards;
}

@keyframes fadeEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeExit {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Slide Transitions */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-left {
  animation: slideInLeft var(--duration-slow) var(--ease-out) forwards;
}

.slide-in-right {
  animation: slideInRight var(--duration-slow) var(--ease-out) forwards;
}

.slide-in-up {
  animation: slideInUp var(--duration-slow) var(--ease-out) forwards;
}

.slide-in-down {
  animation: slideInDown var(--duration-slow) var(--ease-out) forwards;
}

/* ============================================================
   Scroll-Driven Animations (Optional CSS, enhanced by JS)
   ============================================================ */

/* Parallax effect (enhanced by JS if supported) */
.parallax {
  will-change: transform;
}

/* Transform animations */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 4s linear infinite;
}

/* Gradient animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

/* ============================================================
   Accessibility: Reduced Motion Override
   ============================================================ */

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

  /* Disable SVG animations */
  svg animate {
    dur: 0.01ms;
  }

  /* Ensure hover states still work but without animation */
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-fade,
  .reveal-scale,
  .reveal-up {
    animation: none;
    opacity: 1;
    transform: none;
  }

  /* Also disable gjv-hero animations */
  .gjv-hero-overline,
  .gjv-hero-title,
  .gjv-hero-subtitle,
  .gjv-hero-cta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .float-animation {
    animation: none;
  }

  .gjv-marquee-content,
  .gjv-partner-strip-content {
    animation: none;
  }

  .pulse,
  .bounce,
  .rotate,
  .gradient-animated,
  .shimmer-loading {
    animation: none;
  }
}