/* ============================================================
   FREE MIND CONSULTANCY — animations.css
   All keyframes and transition classes
   Wrapped in prefers-reduced-motion as required
   ============================================================ */

/* ── Touch / Click Ripple Effect ─────────────────────────── */
@keyframes rippleExpand {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.7;
    transform: translate(-50%, -50%);
  }
  100% {
    width: 120px;
    height: 120px;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}

@keyframes rippleExpand2 {
  0% {
    width: 0px;
    height: 0px;
    opacity: 0.35;
    transform: translate(-50%, -50%);
  }
  100% {
    width: 200px;
    height: 200px;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}

@keyframes dotBurst {
  0% {
    width: 6px;
    height: 6px;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  60% {
    width: 14px;
    height: 14px;
    opacity: 0.6;
    transform: translate(-50%, -50%);
  }
  100% {
    width: 20px;
    height: 20px;
    opacity: 0;
    transform: translate(-50%, -50%);
  }
}

.touch-ripple {
  position: fixed;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 99999;
  animation: rippleExpand 600ms cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

.touch-ripple-2 {
  border-color: rgba(255, 255, 255, 0.2);
  animation: rippleExpand2 800ms cubic-bezier(0.2, 0.6, 0.4, 1) 80ms forwards;
}

.touch-ripple-dot {
  position: fixed;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 99999;
  animation: dotBurst 400ms cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}

/* ── Ticker Scroll (always runs, no motion preference gate needed — subtle) ── */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ticker-track {
  animation: tickerScroll 40s linear infinite;
}

.ticker-bar:hover .ticker-track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: no-preference) {

  /* ── Podcast Wave Bars ────────────────────────────────────── */
  @keyframes podcastWave {
    0%, 100% { height: 4px;  opacity: 0.3; }
    50%       { height: 28px; opacity: 1; }
  }

  .podcast-wave span:nth-child(1)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.0s; }
  .podcast-wave span:nth-child(2)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.1s; }
  .podcast-wave span:nth-child(3)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.2s; }
  .podcast-wave span:nth-child(4)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.3s; }
  .podcast-wave span:nth-child(5)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.4s; }
  .podcast-wave span:nth-child(6)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.3s; }
  .podcast-wave span:nth-child(7)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.2s; }
  .podcast-wave span:nth-child(8)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.1s; }
  .podcast-wave span:nth-child(9)  { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.0s; }
  .podcast-wave span:nth-child(10) { animation: podcastWave 1.1s ease-in-out infinite; animation-delay: 0.15s; }

  /* ── Witty Tagline Lines ──────────────────────────────────── */
  @keyframes witLine {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .wit-line-1 {
    opacity: 0;
    animation: witLine 600ms ease forwards;
    animation-delay: 1.6s;
  }

  .wit-line-2 {
    opacity: 0;
    animation: witLine 600ms ease forwards;
    animation-delay: 2.0s;
  }

  .wit-line-3 {
    opacity: 0;
    animation: witLine 700ms ease forwards;
    animation-delay: 2.5s;
  }

  /* ── Page Loader ──────────────────────────────────────────── */
  @keyframes loaderFadeIn {
    0%   { opacity: 0; transform: translateY(8px); }
    40%  { opacity: 1; transform: translateY(0); }
    70%  { opacity: 1; }
    100% { opacity: 0; }
  }

  @keyframes loaderOverlayOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
  }

  .loader-text-animate {
    animation: loaderFadeIn 1.2s ease forwards;
  }

  .loader-overlay-out {
    animation: loaderOverlayOut 0.3s ease forwards;
  }

  /* ── Cursor blink ─────────────────────────────────────────── */
  @keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
  }

  .hero-cursor {
    animation: cursorBlink 0.8s step-end infinite;
  }

  /* ── Bounce arrow ─────────────────────────────────────────── */
  @keyframes bounceDown {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(6px); }
  }

  .scroll-arrow {
    animation: bounceDown 1.4s ease-in-out infinite;
  }

  /* ── Scroll Reveal: fade-up ───────────────────────────────── */
  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .fade-up {
    opacity: 0;
    transform: translateY(30px);
  }

  .fade-up.revealed {
    animation: fadeUp 600ms ease forwards;
  }

  /* ── Scroll Reveal: fade-in ───────────────────────────────── */
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .fade-in {
    opacity: 0;
  }

  .fade-in.revealed {
    animation: fadeIn 500ms ease forwards;
  }

  /* ── Scroll Reveal: slide-left ────────────────────────────── */
  @keyframes slideLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .slide-left {
    opacity: 0;
    transform: translateX(-30px);
  }

  .slide-left.revealed {
    animation: slideLeft 600ms ease forwards;
  }

  /* ── Scroll Reveal: slide-right ───────────────────────────── */
  @keyframes slideRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .slide-right {
    opacity: 0;
    transform: translateX(30px);
  }

  .slide-right.revealed {
    animation: slideRight 600ms ease forwards;
  }

  /* ── Stagger Delays ───────────────────────────────────────── */
  .delay-100  { animation-delay: 100ms !important; }
  .delay-200  { animation-delay: 200ms !important; }
  .delay-300  { animation-delay: 300ms !important; }
  .delay-400  { animation-delay: 400ms !important; }
  .delay-500  { animation-delay: 500ms !important; }
  .delay-600  { animation-delay: 600ms !important; }
  .delay-700  { animation-delay: 700ms !important; }
  .delay-800  { animation-delay: 800ms !important; }

  /* ── Tab Panel Fade ───────────────────────────────────────── */
  @keyframes tabFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .tab-panel.active {
    animation: tabFadeIn 200ms ease forwards;
  }

  /* ── Card Hover ───────────────────────────────────────────── */
  .service-card,
  .audience-card,
  .achievement-card {
    transition:
      transform 250ms ease,
      box-shadow 250ms ease;
  }

} /* end prefers-reduced-motion */

/* ── Mobile: faster wit-line reveal, no long wait ────────── */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .wit-line-1 { animation-delay: 1.0s; }
  .wit-line-2 { animation-delay: 1.3s; }
  .wit-line-3 { animation-delay: 1.6s; }
}

/* ── Non-animated fallback for reduced-motion users ──────── */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-in,
  .slide-left,
  .slide-right {
    opacity: 1;
    transform: none;
  }

  .hero-cursor {
    animation: none;
    opacity: 1;
  }

  .scroll-arrow {
    animation: none;
  }

  .tab-panel.active {
    animation: none;
    opacity: 1;
  }
}