/* ============================================================
   GANEDEN IT — CSS Animations
   Color Palette:
     accent  = #53bab3
     dark    = #1f2c36
     alt     = #222b35
     slate   = #365a6e
     cyan    = #4b8590
   ============================================================ */

/* ----------------------------------------
   CSS Custom Properties for animation tuning
   ---------------------------------------- */
:root {
  --anim-duration-fast: 0.3s;
  --anim-duration-med: 0.6s;
  --anim-duration-slow: 1.2s;
  --anim-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   1. GRADIENT GLOW BORDER ON CARDS
   ============================================================ */
@keyframes borderGlow {
  0% {
    border-color: #365a6e;
    box-shadow: 0 0 8px rgba(54, 90, 110, 0.3),
                inset 0 0 8px rgba(54, 90, 110, 0.05);
  }
  50% {
    border-color: #53bab3;
    box-shadow: 0 0 16px rgba(83, 186, 179, 0.4),
                inset 0 0 12px rgba(83, 186, 179, 0.08);
  }
  100% {
    border-color: #365a6e;
    box-shadow: 0 0 8px rgba(54, 90, 110, 0.3),
                inset 0 0 8px rgba(54, 90, 110, 0.05);
  }
}

.card {
  animation: borderGlow 4s ease-in-out infinite;
  will-change: border-color, box-shadow;
}

/* ============================================================
   2. FLOATING PARTICLES — Hero pseudo-element
   ============================================================ */
@keyframes float {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    transform: translateY(-180px) translateX(40px) scale(1.2);
    opacity: 0.5;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translateY(-360px) translateX(-20px) scale(0.8);
    opacity: 0;
  }
}

@keyframes floatAlt {
  0% {
    transform: translateY(0) translateX(0) scale(0.8);
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  50% {
    transform: translateY(-220px) translateX(-50px) scale(1.1);
    opacity: 0.4;
  }
  85% {
    opacity: 0.15;
  }
  100% {
    transform: translateY(-400px) translateX(30px) scale(0.6);
    opacity: 0;
  }
}

.hero-section-wrapper {
  position: relative;
}

.hero-section-wrapper::before,
.hero-section-wrapper::after {
  content: '';
  position: absolute;
  bottom: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, #53bab3 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}

.hero-section-wrapper::before {
  left: 15%;
  width: 6px;
  height: 6px;
  animation: float 8s ease-in-out infinite;
}

.hero-section-wrapper::after {
  right: 20%;
  width: 4px;
  height: 4px;
  animation: floatAlt 10s ease-in-out infinite 2s;
}

/* ============================================================
   3. TEAL PULSE ON CTA BUTTONS
   ============================================================ */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(83, 186, 179, 0.5);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(83, 186, 179, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(83, 186, 179, 0);
  }
}

.button {
  animation: pulse 2.5s ease-in-out infinite;
  will-change: box-shadow;
}

.button:hover {
  animation: none;
  box-shadow: 0 0 20px rgba(83, 186, 179, 0.35);
}

.button.outline,
.button.outline-white,
.button.white {
  animation: none;
}

.button.outline:hover {
  animation: pulse 2.5s ease-in-out infinite;
}

/* ============================================================
   4. TEXT SHIMMER ON .title-caps
   ============================================================ */
@keyframes textShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.title-caps {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 40%,
    #53bab3 50%,
    #ffffff 60%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 6s linear infinite;
  will-change: background-position;
}

/* Ensure accent-colored sections keep readable shimmer */
.section.accent-color .title-caps {
  background: linear-gradient(
    90deg,
    #1f2c36 0%,
    #1f2c36 40%,
    #ffffff 50%,
    #1f2c36 60%,
    #1f2c36 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   5. SCROLL REVEAL CLASSES (initial states)
   Animated by IntersectionObserver in animations.js
   ============================================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--anim-duration-med) var(--anim-ease),
              transform var(--anim-duration-med) var(--anim-ease);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--anim-duration-med) var(--anim-ease),
              transform var(--anim-duration-med) var(--anim-ease);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--anim-duration-med) var(--anim-ease),
              transform var(--anim-duration-med) var(--anim-ease);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--anim-duration-med) var(--anim-ease),
              transform var(--anim-duration-med) var(--anim-ease);
  will-change: opacity, transform;
}

.reveal-up.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ============================================================
   6. TYPED TEXT CURSOR
   ============================================================ */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typed-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background-color: #53bab3;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.8s step-end infinite;
}

.typed-cursor.done {
  animation: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ============================================================
   7. SMART NAVBAR STATES
   ============================================================ */
.navbar {
  transition: background-color 0.35s ease,
              transform 0.35s ease,
              box-shadow 0.35s ease;
}

.navbar.navbar--solid {
  background-color: rgba(31, 44, 54, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

.navbar.navbar--hidden {
  transform: translateY(-100%);
}

/* ============================================================
   8. MOUSE FOLLOWER LIGHT (dark sections)
   ============================================================ */
.section {
  --mouse-x: 50%;
  --mouse-y: 50%;
}

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    400px circle at var(--mouse-x) var(--mouse-y),
    rgba(83, 186, 179, 0.04) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.section.mouse-active::before {
  opacity: 1;
}

/* Don't apply on accent-colored or footer sections */
.section.accent-color::before,
.section.footer::before {
  display: none;
}

/* ============================================================
   9. TESTIMONIAL AUTO-SCROLL PAUSE INDICATOR
   ============================================================ */
.testimonial-container {
  position: relative;
}

.testimonial-container.paused .testimonial {
  border-color: #53bab3;
}

/* ============================================================
   10. PREFERS-REDUCED-MOTION — Disable all animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .card {
    animation: none !important;
    border-color: #365a6e;
    box-shadow: none;
  }

  .button {
    animation: none !important;
  }

  .title-caps {
    background: none !important;
    -webkit-text-fill-color: unset !important;
    color: #ffffff;
  }

  .hero-section-wrapper::before,
  .hero-section-wrapper::after {
    display: none !important;
  }

  .section::before {
    display: none !important;
  }

  .typed-cursor {
    animation: none !important;
    display: none !important;
  }

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

  .navbar {
    transition: none !important;
  }
}

/* ============================================================
   11. MOBILE — Disable particles & mouse follower
   ============================================================ */
@media (max-width: 767px) {
  .hero-section-wrapper::before,
  .hero-section-wrapper::after {
    display: none;
  }

  .section::before {
    display: none;
  }

  /* Simplify shimmer on mobile for perf */
  .title-caps {
    animation-duration: 10s;
  }

  /* Reduce pulse on mobile */
  .button {
    animation: none;
  }
}