/* ============================================
   Awwwards Enhancements
   1. Text Split Animations
   2. Custom Cursor
   3. Preloader
   4. Magnetic Buttons
   5. Varied Reveal Animations
   6. Card 3D Tilt
   7. Image Reveal Animations
   8. Link Underline Animations
   ============================================ */

/* ---- 1. TEXT SPLIT ANIMATIONS ---- */

.split-text {
  display: block;
}

h1.split-text {
  display: block;
}

.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
  padding-top: 0.15em;
  margin-top: -0.15em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
  padding-right: 0.05em;
  margin-right: -0.05em;
}

/* Preserve section-title layout & ::after underline */
.section-title.split-text {
  display: block;
  text-align: center;
  position: relative;
  padding-bottom: 0;
  margin-bottom: var(--spacing-sm);
  overflow: visible;
}

/* Preserve hero-title layout */
.hero-title.split-text {
  display: block;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-lg);
  color: var(--color-white);
  font-size: var(--fs-5xl);
}

.hero-title.split-text .split-word {
  line-height: 1.25;
}

/* Preserve page-header title layout */
.page-header-title.split-text,
.page-header h1.split-text {
  display: block;
  text-align: center;
}

.split-char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.split-char.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* Whitespace between words */
.split-space {
  display: inline-block;
  width: 0.3em;
}

/* Hero title gets a mask-reveal style */
.hero-title .split-word {
  overflow: hidden;
}

/* Section titles get a word-by-word reveal */
.section-title .split-word {
  overflow: hidden;
}

/* ---- 2. CUSTOM CURSOR ---- */

/* Hide default cursor on desktop */
@media (hover: hover) and (pointer: fine) {
  html.custom-cursor,
  html.custom-cursor * {
    cursor: none !important;
  }
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--color-highlight);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease,
              opacity 0.3s ease;
  mix-blend-mode: difference;
  opacity: 0;
  will-change: transform;
}

.cursor-dot--visible {
  opacity: 1;
}

.cursor-dot--hover {
  width: 40px;
  height: 40px;
  background: rgba(192, 215, 139, 0.15);
  mix-blend-mode: normal;
}

.cursor-dot--click {
  width: 4px;
  height: 4px;
}

.cursor-circle {
  position: fixed;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(192, 215, 139, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              opacity 0.4s ease;
  opacity: 0;
  will-change: transform;
}

.cursor-circle--visible {
  opacity: 1;
}

.cursor-circle--hover {
  width: 72px;
  height: 72px;
  border-color: rgba(192, 215, 139, 0.6);
}

.cursor-circle--click {
  width: 36px;
  height: 36px;
}

/* ---- 3. PRELOADER ---- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--color-primary-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.6s;
}

.preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__mark {
  width: 64px;
  height: 64px;
  animation: preloaderPulse 1.6s ease-in-out infinite;
}

.preloader__mark svg {
  width: 100%;
  height: 100%;
}

.preloader__bar-track {
  width: 120px;
  height: 2px;
  background: rgba(192, 215, 139, 0.1);
  border-radius: 2px;
  margin-top: 32px;
  overflow: hidden;
}

.preloader__bar {
  height: 100%;
  width: 0%;
  background: var(--color-highlight);
  border-radius: 2px;
  transition: width 0.3s ease;
}

@keyframes preloaderPulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Prevent scroll while loading */
html.is-loading {
  overflow: hidden;
}

/* ---- 4. MAGNETIC BUTTONS ---- */

/* Ripple effect */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: btnRipple 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes btnRipple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ---- 5. VARIED REVEAL ANIMATIONS ---- */

/* Clip-path reveal from bottom */
.reveal--clip {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform: none;
}

.reveal--clip.reveal--visible {
  clip-path: inset(0 0 0 0);
}

/* Scale reveal */
.reveal--scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

/* Slide from left */
.reveal--left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--left.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.reveal--right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--right.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Rotate in */
.reveal--rotate {
  opacity: 0;
  transform: translateY(30px) rotate(3deg);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal--rotate.reveal--visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}

/* ---- 6. CARD 3D TILT ---- */

.tilt-card {
  position: relative;
  z-index: 1;
  transform: perspective(600px);
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out,
              box-shadow 0.3s ease;
  will-change: transform;
}

.tilt-card:hover {
  z-index: 5;
  box-shadow: 0 20px 60px rgba(0, 42, 58, 0.2);
}

/* Override per-card hover translate; tilt is driven by JS inline transform,
   but hover CSS wins specificity over `.tilt-card` — so pin base transform
   here to avoid a brief `translateY(-4px)` flash before mousemove fires. */
.market-stat-card.tilt-card:hover,
.theme-card.tilt-card:hover,
.event-info-item.tilt-card:hover,
.sponsorship-stat-card.tilt-card:hover,
.audience-stat-card.tilt-card:hover {
  transform: perspective(600px);
}

/* Prevent shine from affecting flex layout */
.tilt-card > .tilt-card__shine {
  flex-shrink: 0;
}

.tilt-card__shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  z-index: 1;
}

.tilt-card:hover .tilt-card__shine {
  opacity: 1;
}

/* ---- 7. IMAGE/VIDEO REVEAL ANIMATIONS ---- */

.media-reveal {
  position: relative;
  overflow: hidden;
}

.media-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary-dark);
  transform-origin: left;
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 2;
}

.media-reveal.reveal--visible::after {
  transform: scaleX(0);
  transform-origin: right;
}

/* Scale the media inside while revealing */
.media-reveal > * {
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.15);
}

.media-reveal.reveal--visible > * {
  transform: scale(1);
}

/* ---- 8. LINK UNDERLINE ANIMATIONS ---- */

/* Footer links — animated underline */
.footer-nav a {
  position: relative;
  display: inline-block;
}

.footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-highlight);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Inline text links */
a.link-hover {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--color-highlight), var(--color-highlight));
  background-size: 0% 1px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

a.link-hover:hover {
  background-size: 100% 1px;
}

/* ---- SCROLL PROGRESS BAR ---- */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--gradient-gold);
  z-index: 10002;
  transition: none;
  will-change: width;
}

/* ---- REDUCED MOTION ---- */

@media (prefers-reduced-motion: reduce) {
  .split-char {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .cursor-dot,
  .cursor-circle,
  .preloader,
  .scroll-progress {
    display: none !important;
  }

  html.custom-cursor,
  html.custom-cursor * {
    cursor: auto !important;
  }

  .reveal--clip,
  .reveal--scale,
  .reveal--left,
  .reveal--right,
  .reveal--rotate {
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }

  .media-reveal::after {
    display: none !important;
  }

  .media-reveal > * {
    transform: none !important;
  }

  .tilt-card {
    transform: none !important;
  }
}

/* ---- RESPONSIVE ---- */

@media (max-width: 768px) {
  .cursor-dot,
  .cursor-circle {
    display: none !important;
  }

  html.custom-cursor,
  html.custom-cursor * {
    cursor: auto !important;
  }

  .hero-title.split-text {
    font-size: var(--fs-3xl);
  }

  .section-title.split-text {
    margin-bottom: var(--spacing-xl);
  }
}

@media (max-width: 480px) {
  .hero-title.split-text {
    font-size: var(--fs-2xl);
  }

  .section-title.split-text {
    font-size: var(--fs-xl);
  }
}