/*
 * ========================================================================
 * ANALYTIC ENDEAVORS - GUIDE REVEAL ANIMATIONS
 * Scroll-triggered reveal animations and cursor effects
 * Copyright (c) 2024-2025 Havens Consulting Inc. All Rights Reserved.
 * ========================================================================
 */

/* ===== REVEAL ANIMATIONS ===== */

/* Reveal from bottom (default) */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* Scale reveal */
.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* ===== STAGGER DELAYS ===== */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

/* ===== CURSOR TRAIL ===== */
.cursor-trail {
  position: fixed;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal-light);
  opacity: 0;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

/* Color variants */
.cursor-trail--purple {
  background: var(--purple-light);
}

.cursor-trail--orange {
  background: var(--orange);
}

/* ===== READ TIME BADGE ===== */
.read-time {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--card-surface);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.read-time svg {
  width: 16px;
  height: 16px;
}

/* ===== HERO LOGO GLOW ===== */
.hero-logo img {
  animation: logoGlow 4s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(0, 153, 153, 0.4))
            drop-shadow(0 0 40px rgba(0, 153, 153, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(0, 153, 153, 0.6))
            drop-shadow(0 0 60px rgba(0, 153, 153, 0.3));
  }
}

/* Purple variant */
.hero-logo--purple img {
  animation: logoGlowPurple 4s ease-in-out infinite;
}

@keyframes logoGlowPurple {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(107, 91, 149, 0.4))
            drop-shadow(0 0 40px rgba(0, 153, 153, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 40px rgba(107, 91, 149, 0.6))
            drop-shadow(0 0 60px rgba(0, 153, 153, 0.3));
  }
}

/* ===== SECTION DIVIDERS ===== */
.guide-section {
  position: relative;
}

.guide-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.guide-section:last-of-type::after {
  display: none;
}

/* ===== TYPEWRITER CURSOR ===== */
.typewriter-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--teal-light);
  font-weight: 300;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter-cursor--purple::after {
  color: var(--purple-light);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-logo img,
  .hero-logo--purple img {
    animation: none;
    filter: none;
  }

  .typewriter-cursor::after {
    animation: none;
    opacity: 1;
  }
}