/* ==========================================================================
   ANIMATIONS
   CSS keyframes and transition utilities
   ========================================================================== */

/* -------------------------------------------------------------------------
   UTILITY CLASSES FOR JS ANIMATIONS
   ------------------------------------------------------------------------- */

/* Initial hidden state for scroll reveals */
.will-animate {
  opacity: 0;
  transform: translateY(32px);
}

.will-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--duration-slower) var(--ease-elegant),
    transform var(--duration-slower) var(--ease-elegant);
}

/* -------------------------------------------------------------------------
   HOVER TRANSITIONS
   ------------------------------------------------------------------------- */

/* Button shine effect */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  transition: left var(--duration-slow) var(--ease-out);
}

.btn:hover::before {
  left: 100%;
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.12) 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.04) 100%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.btn:hover::after {
  opacity: 1;
}

/* Card hover lift - smoother */
.glass-card {
  transition:
    transform var(--duration-slow) var(--ease-elegant),
    box-shadow var(--duration-slow) var(--ease-elegant),
    background var(--duration-slow) var(--ease-elegant),
    border-color var(--duration-slow) var(--ease-elegant);
}

/* -------------------------------------------------------------------------
   LOADING ANIMATION
   ------------------------------------------------------------------------- */

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.loading {
  background: linear-gradient(
    90deg,
    var(--color-gray-200) 25%,
    var(--color-gray-100) 50%,
    var(--color-gray-200) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* -------------------------------------------------------------------------
   FADE IN VARIANTS
   ------------------------------------------------------------------------- */

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

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* -------------------------------------------------------------------------
   SCALE ANIMATIONS
   ------------------------------------------------------------------------- */

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* -------------------------------------------------------------------------
   ACCORDION ANIMATION
   ------------------------------------------------------------------------- */

.accordion__content {
  animation: accordionOpen var(--duration-slow) var(--ease-elegant);
}

@keyframes accordionOpen {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------------------------------------
   MENU OVERLAY ANIMATION
   ------------------------------------------------------------------------- */

.menu-overlay {
  transition:
    opacity var(--duration-slow) var(--ease-luxury),
    visibility var(--duration-slow) var(--ease-luxury);
}

.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* -------------------------------------------------------------------------
   PAGE PRELOADER
   ------------------------------------------------------------------------- */

.preloader__bar {
  width: 48px;
  height: 2px;
  background: rgba(10, 34, 64, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.preloader__bar::after {
  content: '';
  display: block;
  width: 50%;
  height: 100%;
  background: #0a2240;
  border-radius: 2px;
  animation: preloaderSlide 0.8s ease-in-out infinite alternate;
}

@keyframes preloaderSlide {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* -------------------------------------------------------------------------
   TEXT SPLIT ANIMATIONS
   ------------------------------------------------------------------------- */

.split-text {
  display: flex;
  flex-wrap: wrap;
  overflow: visible;
}

/* Preserve block display for title lines */
.section__title-line.split-text,
.hero__title-line.split-text,
.cta-premium__title-line.split-text {
  display: flex;
  justify-content: center;
}

.split-text .word {
  display: inline-flex;
  overflow: visible;
}

.split-text .char {
  display: inline-block;
  transform-origin: center bottom;
  /* Note: will-change removed - added dynamically via JS only during animation */
}

.split-text .space {
  display: inline-block;
  width: 0.3em;
}

/* -------------------------------------------------------------------------
   BLUR-IN ANIMATION
   Note: Using scale instead of filter:blur for Chrome performance
   ------------------------------------------------------------------------- */

.blur-in {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition:
    opacity var(--duration-slow) var(--ease-elegant),
    transform var(--duration-slow) var(--ease-elegant);
}

.blur-in.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Blur-in keyframe for GSAP-independent use */
@keyframes blurIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* -------------------------------------------------------------------------
   COUNTER ANIMATION STYLES
   ------------------------------------------------------------------------- */

.cta-premium__stat-number,
.bento-card__number {
  font-variant-numeric: tabular-nums;
  will-change: contents;
}

/* -------------------------------------------------------------------------
   PARALLAX DEPTH LAYERS
   Note: Removed will-change to reduce compositing layer count in Chrome
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   STAGGERED ICON REVEAL
   Note: Removed will-change - only add during animation via JS
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   CSS SCROLL-DRIVEN ANIMATIONS (Chrome 115+)
   Enhance native scrolling with pure CSS scroll-linked effects
   These complement GSAP animations without conflicting
   ------------------------------------------------------------------------- */

/* Header solidify on scroll - pure CSS, works great with native scroll */
@supports (animation-timeline: scroll()) {
  .header {
    animation: headerSolid linear both;
    animation-timeline: scroll();
    animation-range: 0 120px;
  }

  @keyframes headerSolid {
    from {
      background: rgba(255, 255, 255, 0);
      box-shadow: none;
    }
    to {
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
  }

  /* Subtle hero parallax on scroll */
  .hero__gradient-mesh {
    animation: meshParallax linear both;
    animation-timeline: scroll();
    animation-range: 0 600px;
  }

  @keyframes meshParallax {
    from {
      transform: translateY(0) scale(1);
    }
    to {
      transform: translateY(100px) scale(1.1);
    }
  }

  /* Scroll indicator fill animation */
  .hero__scroll-line {
    position: relative;
    overflow: hidden;
  }

  .hero__scroll-line::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-primary);
    transform-origin: top;
    animation: scrollLineFill linear both;
    animation-timeline: scroll();
    animation-range: 0 200px;
  }

  @keyframes scrollLineFill {
    from {
      transform: scaleY(0);
      opacity: 0;
    }
    to {
      transform: scaleY(1);
      opacity: 1;
    }
  }
}

/* -------------------------------------------------------------------------
   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;
    animation-timeline: none !important;
  }

  .will-animate {
    opacity: 1;
    transform: none;
  }
}