/**
 * UEG Events Theme v2 — animations.css
 * Hybrid A+B motion design system
 * All animations respect prefers-reduced-motion
 */

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --ueg-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ueg-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ueg-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --ueg-duration-fast:   200ms;
  --ueg-duration-base:   400ms;
  --ueg-duration-slow:   700ms;
  --ueg-duration-ticker: 32s;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

/* Ticker / marquee scroll */
@keyframes ueg-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Fade + slide up (reveal on scroll) */
@keyframes ueg-reveal-up {
  from {
    opacity:   0;
    transform: translateY(28px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

/* Fade in only */
@keyframes ueg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Pulse glow (CTA emphasis) */
@keyframes ueg-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.5); }
  50%       { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
}

/* Bounce scroll indicator */
@keyframes ueg-bounce {
  0%, 100% { transform: translateY(0);    opacity: 1; }
  50%       { transform: translateY(8px); opacity: 0.6; }
}

/* Shimmer loading skeleton */
@keyframes ueg-shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

/* Spin (loading spinner) */
@keyframes ueg-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Scale in (modal/card pop) */
@keyframes ueg-scale-in {
  from {
    opacity:   0;
    transform: scale(0.92);
  }
  to {
    opacity:   1;
    transform: scale(1);
  }
}

/* Hamburger top line → X */
@keyframes ueg-ham-top-open {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(8px) rotate(0); }
  100% { transform: translateY(8px) rotate(45deg); }
}
@keyframes ueg-ham-top-close {
  0%   { transform: translateY(8px) rotate(45deg); }
  50%  { transform: translateY(8px) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
@keyframes ueg-ham-bot-open {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-8px) rotate(0); }
  100% { transform: translateY(-8px) rotate(-45deg); }
}
@keyframes ueg-ham-bot-close {
  0%   { transform: translateY(-8px) rotate(-45deg); }
  50%  { transform: translateY(-8px) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}

/* ============================================================
   TICKER (social proof strip)
   ============================================================ */
.ticker-track {
  animation: ueg-ticker-scroll var(--ueg-duration-ticker) linear infinite;
  will-change: transform;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.will-reveal {
  opacity:   0;
  transform: translateY(28px);
  transition:
    opacity   var(--ueg-duration-slow) var(--ueg-ease-out-expo) var(--reveal-delay, 0ms),
    transform var(--ueg-duration-slow) var(--ueg-ease-out-expo) var(--reveal-delay, 0ms);
}

.is-revealed {
  opacity:   1;
  transform: translateY(0);
}

/* ============================================================
   HERO ENTRANCE
   ============================================================ */
.js-loaded .ueg-hero__content {
  animation: ueg-reveal-up var(--ueg-duration-slow) var(--ueg-ease-out-expo) 200ms both;
}
.js-loaded .ueg-hero__headline { animation-delay: 250ms; }
.js-loaded .ueg-hero__sub      { animation-delay: 350ms; }
.js-loaded .ueg-hero__actions  { animation-delay: 450ms; }
.js-loaded .ueg-hero__countdown { animation-delay: 550ms; }

/* ============================================================
   HERO SCROLL INDICATOR
   ============================================================ */
.hero-scroll-indicator span {
  display:          block;
  width:            24px;
  height:           24px;
  border-right:     2px solid rgba(255,255,255,0.7);
  border-bottom:    2px solid rgba(255,255,255,0.7);
  transform:        rotate(45deg);
  animation:        ueg-bounce 1.6s var(--ueg-ease-in-out) infinite;
  cursor:           pointer;
}

/* ============================================================
   CTA PULSE (fire attention)
   ============================================================ */
.ueg-btn-primary.pulse,
.nav-cta.pulse {
  animation: ueg-pulse-glow 2s ease-in-out infinite;
}

/* Auto-pulse hero CTA after 3s */
.js-loaded .ueg-hero__cta-primary {
  animation: ueg-pulse-glow 2.4s ease-in-out 3s infinite;
}

/* ============================================================
   HAMBURGER ANIMATION
   ============================================================ */
.mobile-menu-toggle .toggle-line {
  transition: transform var(--ueg-duration-base) var(--ueg-ease-out-expo),
              opacity   var(--ueg-duration-fast);
}

.mobile-menu-toggle.is-active .toggle-line:nth-child(1) {
  animation: ueg-ham-top-open var(--ueg-duration-base) var(--ueg-ease-out-expo) forwards;
}
.mobile-menu-toggle.is-active .toggle-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mobile-menu-toggle.is-active .toggle-line:nth-child(3) {
  animation: ueg-ham-bot-open var(--ueg-duration-base) var(--ueg-ease-out-expo) forwards;
}

.mobile-menu-toggle:not(.is-active) .toggle-line:nth-child(1) {
  animation: ueg-ham-top-close var(--ueg-duration-base) var(--ueg-ease-out-expo) forwards;
}
.mobile-menu-toggle:not(.is-active) .toggle-line:nth-child(3) {
  animation: ueg-ham-bot-close var(--ueg-duration-base) var(--ueg-ease-out-expo) forwards;
}

/* ============================================================
   CARD HOVER LIFT
   ============================================================ */
.event-card,
.community-card,
.pillar-card,
.package-card,
.btt-video-card {
  transition:
    transform  var(--ueg-duration-base) var(--ueg-ease-out-expo),
    box-shadow var(--ueg-duration-base) var(--ueg-ease-out-expo);
}

.event-card:hover,
.pillar-card:hover,
.package-card:hover {
  transform:  translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

.community-card:hover {
  transform:  translateY(-4px) scale(1.01);
  box-shadow: 0 16px 32px rgba(13, 148, 136, 0.2);
}

.btt-video-card:hover {
  transform:  scale(1.04);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

/* ============================================================
   SHIMMER SKELETON (placeholder cards)
   ============================================================ */
.event-card__img--placeholder,
.btt-video-card--placeholder {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 800px 100%;
  animation: ueg-shimmer 1.8s linear infinite;
}

/* ============================================================
   MOBILE NAV SLIDE-IN
   ============================================================ */
.site-nav {
  transition: transform var(--ueg-duration-base) var(--ueg-ease-out-expo),
              opacity   var(--ueg-duration-fast);
}

@media (max-width: 1024px) {
  .site-nav:not(.is-open) {
    transform: translateX(100%);
    opacity:   0;
    pointer-events: none;
  }
  .site-nav.is-open {
    transform: translateX(0);
    opacity:   1;
    pointer-events: all;
    animation: ueg-fade-in var(--ueg-duration-base) var(--ueg-ease-out-expo);
  }
}

/* ============================================================
   STATS COUNTER — flash on animate
   ============================================================ */
.stat-num {
  transition: color var(--ueg-duration-fast);
}

/* ============================================================
   FORM FOCUS RING ANIMATION
   ============================================================ */
.ueg-capture-form input:focus,
.footer-capture-form input:focus {
  animation: ueg-scale-in var(--ueg-duration-fast) var(--ueg-ease-out-back);
}

/* ============================================================
   REDUCED MOTION — respect user preference
   ============================================================ */
@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;
  }

  .will-reveal {
    opacity:   1;
    transform: none;
    transition: none;
  }

  .ticker-track {
    animation: none;
  }

  .ueg-btn-primary.pulse,
  .nav-cta.pulse,
  .js-loaded .ueg-hero__cta-primary {
    animation: none;
  }
}