/**
 * PowerGym Academia - Animações, Parallax & News Ticker
 * Efeitos modernos de scroll, parallax e texto animado
 */

/* ============================================
   NEWS TICKER - Texto animado estilo breaking news
   ============================================ */
.news-ticker-wrapper {
 overflow: hidden;
 position: relative;
 z-index: 2;
 margin-top: 1.5rem;
 margin-bottom: 1.5rem;
}

.news-ticker {
 display: flex;
 align-items: center;
 gap: 2rem;
 animation: ticker-slide 25s linear infinite;
 width: max-content;
}

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

.ticker-item {
 display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 white-space: nowrap;
 font-size: 0.95rem;
 color: var(--text-secondary);
 font-weight: 500;
 padding: 0.4rem 1.2rem;
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 50px;
 transition: var(--transition);
}

.ticker-item:hover {
 background: rgba(255, 255, 255, 0.08);
 border-color: rgba(255, 255, 255, 0.15);
 transform: scale(1.02);
}

.ticker-item .ticker-icon {
 color: var(--primary-color);
 font-size: 0.8rem;
}

.ticker-item .ticker-highlight {
 color: var(--text-white);
 font-weight: 700;
}

.ticker-separator {
 width: 6px;
 height: 6px;
 background: var(--primary-color);
 border-radius: 50%;
 flex-shrink: 0;
 opacity: 0.5;
}

@keyframes ticker-slide {
 0% {
  transform: translateX(0);
 }
 100% {
  transform: translateX(-50%);
 }
}

/* Ticker label badge */
.ticker-label {
 display: inline-flex;
 align-items: center;
 gap: 0.4rem;
 background: var(--gradient-primary);
 color: var(--text-white);
 padding: 0.4rem 1rem;
 border-radius: 50px;
 font-size: 0.75rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 white-space: nowrap;
 margin-right: 1rem;
 box-shadow: var(--shadow-red);
}

.ticker-label .pulse-dot {
 width: 8px;
 height: 8px;
 background: #fff;
 border-radius: 50%;
 animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
 0%, 100% { opacity: 1; transform: scale(1); }
 50% { opacity: 0.5; transform: scale(0.7); }
}

/* ============================================
   PARALLAX SECTIONS
   ============================================ */
.parallax-section {
 position: relative;
 overflow: hidden;
}

.parallax-bg {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 will-change: transform;
 transition: transform 0.1s linear;
 pointer-events: none;
}

.parallax-bg-layer-1 {
 background:
  radial-gradient(circle at 30% 30%, rgba(229, 9, 20, 0.08) 0%, transparent 40%),
  radial-gradient(circle at 70% 70%, rgba(244, 6, 18, 0.05) 0%, transparent 40%);
}

.parallax-bg-layer-2 {
 background:
  radial-gradient(circle at 60% 20%, rgba(131, 16, 16, 0.06) 0%, transparent 45%),
  radial-gradient(circle at 20% 80%, rgba(229, 9, 20, 0.04) 0%, transparent 45%);
}

/* Parallax floating shapes */
.parallax-shapes {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 pointer-events: none;
 overflow: hidden;
}

.parallax-shape {
 position: absolute;
 border-radius: 50%;
 background: var(--gradient-primary);
 opacity: 0.04;
 will-change: transform;
}

.parallax-shape-1 {
 width: 300px;
 height: 300px;
 top: 10%;
 right: -5%;
}

.parallax-shape-2 {
 width: 200px;
 height: 200px;
 bottom: 15%;
 left: -3%;
}

.parallax-shape-3 {
 width: 150px;
 height: 150px;
 top: 50%;
 right: 20%;
 opacity: 0.03;
}

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

/* Base state - hidden */
.scroll-reveal {
 opacity: 0;
 transform: translateY(40px);
 transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
             transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
 opacity: 1;
 transform: translateY(0);
}

/* Variants */
.scroll-reveal-left {
 opacity: 0;
 transform: translateX(-60px);
 transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
             transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.scroll-reveal-right {
 opacity: 0;
 transform: translateX(60px);
 transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
             transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.scroll-reveal-scale {
 opacity: 0;
 transform: scale(0.85);
 transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
             transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Stagger delay classes */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ============================================
   HERO PARALLAX ENHANCEMENT
   ============================================ */
.hero-parallax-content {
 will-change: transform;
 transition: transform 0.15s ease-out;
}

/* ============================================
   SECTION DIVIDER - Parallax wave
   ============================================ */
.section-divider {
 position: relative;
 height: 80px;
 overflow: hidden;
}

.section-divider svg {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 80px;
}

.section-divider-wave {
 fill: var(--bg-primary);
 opacity: 0.5;
}

/* ============================================
   ENHANCED SERVICE CARDS - Scroll animation
   ============================================ */
.service-card-animated {
 opacity: 0;
 transform: translateY(30px) scale(0.95);
 transition: opacity 0.6s ease,
             transform 0.6s ease,
             box-shadow 0.3s ease,
             border-color 0.3s ease;
}

.service-card-animated.revealed {
 opacity: 1;
 transform: translateY(0) scale(1);
}

/* ============================================
   COUNTER ANIMATION - Numbers count up
   ============================================ */
.counter-animate {
 display: inline-block;
}

/* ============================================
   GLOW PULSE on stat cards
   ============================================ */
.stat-card-glow {
 position: relative;
}

.stat-card-glow::after {
 content: '';
 position: absolute;
 top: -2px;
 left: -2px;
 right: -2px;
 bottom: -2px;
 background: var(--gradient-primary);
 border-radius: calc(var(--border-radius-lg) + 2px);
 opacity: 0;
 z-index: -1;
 transition: opacity 0.5s ease;
 filter: blur(8px);
}

.stat-card-glow.revealed::after {
 animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
 0%, 100% { opacity: 0; }
 50% { opacity: 0.15; }
}

/* ============================================
   CTA ENHANCED PARALLAX
   ============================================ */
.cta-parallax-inner {
 will-change: transform;
 position: relative;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
 .news-ticker-wrapper {
  margin-top: 1rem;
  margin-bottom: 1rem;
 }

 .ticker-item {
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
 }

 .ticker-label {
  font-size: 0.65rem;
  padding: 0.3rem 0.75rem;
 }

 .parallax-shape-1 {
  width: 150px;
  height: 150px;
 }

 .parallax-shape-2 {
  width: 100px;
  height: 100px;
 }

 .parallax-shape-3 {
  width: 80px;
  height: 80px;
 }

 .scroll-reveal,
 .scroll-reveal-left,
 .scroll-reveal-right,
 .scroll-reveal-scale {
  transform: translateY(20px);
 }

 .scroll-reveal-left {
  transform: translateX(-20px);
 }

 .scroll-reveal-right {
  transform: translateX(20px);
 }

 .section-divider {
  height: 40px;
 }

 .section-divider svg {
  height: 40px;
 }
}

@media (max-width: 480px) {
 .news-ticker {
  gap: 1rem;
 }

 .ticker-item {
  font-size: 0.8rem;
  padding: 0.35rem 0.8rem;
 }

 .ticker-separator {
  display: none;
 }
}