/* ==========================================================================
   Harding Events Venue — Animations
   ========================================================================== */

/* Scroll-reveal variants, activated via IntersectionObserver in main.js
   which adds `.in-view` to elements bearing these data-anim attributes. */

[data-anim] { opacity: 0; will-change: transform, opacity; }

[data-anim="fade-up"] { transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
[data-anim="fade-up"].in-view { opacity: 1; transform: translateY(0); }

[data-anim="fade-in"] { transition: opacity 1s ease; }
[data-anim="fade-in"].in-view { opacity: 1; }

[data-anim="slide-left"] { transform: translateX(60px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
[data-anim="slide-left"].in-view { opacity: 1; transform: translateX(0); }

[data-anim="slide-right"] { transform: translateX(-60px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
[data-anim="slide-right"].in-view { opacity: 1; transform: translateX(0); }

[data-anim="zoom-in"] { transform: scale(0.88); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
[data-anim="zoom-in"].in-view { opacity: 1; transform: scale(1); }

/* Stagger children helper: set --d (seconds) inline per item */
[data-anim].in-view { transition-delay: var(--d, 0s); }

/* Floating effect for decorative elements */
.floating { animation: floatY 6s ease-in-out infinite; }
.floating-slow { animation: floatY 9s ease-in-out infinite; }

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

/* Gentle rotate float, used for badges */
.floating-badge { animation: floatBadge 5s ease-in-out infinite; }
@keyframes floatBadge {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1.5deg); }
}

/* Hero carousel entrance choreography — content overlay slides/fades up into
   place on load, and is retriggered by carousel.js on every slide change via
   the .hero-text-anim class (removed + reflowed + re-added). Elements start
   hidden by default so they never flash unstyled before the class is added. */
.hero-carousel-content .eyebrow,
.hero-carousel-content h1,
.hero-carousel-content p.lead,
.hero-carousel-content .hero-actions {
  opacity: 0;
}

.hero-text-anim .eyebrow { animation: fadeUp 2s cubic-bezier(0.16,1,0.3,1) 0.3s both; }
.hero-text-anim h1 { animation: fadeUp 2s cubic-bezier(0.16,1,0.3,1) 1.1s both; }
.hero-text-anim p.lead { animation: fadeUp 2s cubic-bezier(0.16,1,0.3,1) 1.9s both; }
.hero-text-anim .hero-actions { animation: fadeUp 2s cubic-bezier(0.16,1,0.3,1) 2.7s both; }

/* Small decorative line beside the eyebrow, drawing in just ahead of the
   text cascade so the eye has somewhere to land before each line lands.
   Flex (not absolute-position + padding) keeps the whole group centered
   as one unit regardless of the line's animated width. */
.hero-carousel-content .eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; }

.hero-carousel-content .eyebrow::before {
  content: '';
  width: 0;
  height: 1px;
  background: rgba(255,255,255,0.85);
  flex-shrink: 0;
}

.hero-text-anim .eyebrow::before { animation: lineDraw 1.4s cubic-bezier(0.16,1,0.3,1) 0.1s both; }

@keyframes lineDraw {
  from { width: 0; }
  to { width: 32px; }
}

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

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

/* Parallax background (cta banners / page headers) */
.cta-banner, .page-header { background-attachment: fixed; }

@media (max-width: 900px) {
  /* background-attachment: fixed is unreliable / causes jank on mobile browsers */
  .cta-banner, .page-header { background-attachment: scroll; }
}

/* Card icon subtle pulse on hover already handled via transform in style.css */

/* Loading spinner fade */
.page-loader { animation: none; }

/* Nav underline / link transitions handled in style.css; add link fade for mobile menu */
.mobile-menu a {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.mobile-menu.open a { opacity: 1; transform: translateY(0); }
.mobile-menu.open a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open a:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.open a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open a:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.open a:nth-child(5) { transition-delay: 0.25s; }
.mobile-menu.open a:nth-child(6) { transition-delay: 0.3s; }
.mobile-menu.open a:nth-child(7) { transition-delay: 0.35s; }
.mobile-menu.open a:nth-child(8) { transition-delay: 0.4s; }

/* Counter number pop */
@keyframes numPop {
  from { transform: scale(0.9); opacity: 0.5; }
  to { transform: scale(1); opacity: 1; }
}
.counter-item .num.counted { animation: numPop 0.4s ease; }