/* ===================================================
   Super Saber — animations.css
   Keyframes, Parallax e Efeitos Avançados
   =================================================== */

/* ===================================================
   KEYFRAMES GLOBAIS
   =================================================== */
@keyframes ss-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ss-slide-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ss-slide-right {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ss-scale-in {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ss-pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(124,58,237,0.30); }
  50%       { box-shadow: 0 0 40px rgba(124,58,237,0.60); }
}

@keyframes ss-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes ss-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

@keyframes ss-count-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ss-border-trace {
  0%   { clip-path: inset(0 100% 100% 0); }
  25%  { clip-path: inset(0 0 100% 0); }
  50%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ===================================================
   HERO — PARTICLES (JS controlled, CSS here)
   =================================================== */
.ss-hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ss-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  animation: ss-particle-float linear infinite;
  will-change: transform;
}

@keyframes ss-particle-float {
  0%   { transform: translateY(0)   rotate(0deg);   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* ===================================================
   TEXTO COM GRADIENTE ANIMADO
   =================================================== */
.ss-gradient-text-animated {
  background: linear-gradient(90deg, #EC4899, #7C3AED, #3B82F6, #06B6D4, #EC4899);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ss-gradient-shift 6s linear infinite;
}

/* ===================================================
   NÚMERO COM CONTADOR
   =================================================== */
.ss-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.ss-counter.counting {
  animation: ss-count-up 0.5s ease forwards;
}

/* ===================================================
   CARD HOVER — MOUSE PARALLAX
   =================================================== */
.ss-mouse-parallax {
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform 0.1s ease;
}
.ss-mouse-parallax-inner {
  transform: translateZ(20px);
}

/* ===================================================
   STICKY SCROLL SECTIONS
   =================================================== */
.ss-sticky-section {
  position: sticky;
  top: 80px;
  transition: opacity 0.4s ease;
}

/* ===================================================
   FRASE GRANDE SURGINDO NO SCROLL
   =================================================== */
.ss-big-text-reveal {
  overflow: hidden;
  display: block;
}
.ss-big-text-reveal .ss-text-line {
  display: block;
  transform: translateY(110%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ss-big-text-reveal.is-visible .ss-text-line {
  transform: translateY(0);
}
.ss-big-text-reveal .ss-text-line:nth-child(2) {
  transition-delay: 0.1s;
}
.ss-big-text-reveal .ss-text-line:nth-child(3) {
  transition-delay: 0.2s;
}

/* ===================================================
   HIGHLIGHT — TEXTO SUBLINHADO ANIMADO
   =================================================== */
.ss-highlight {
  position: relative;
  display: inline;
}
.ss-highlight::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ss-gradient-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 2px;
}
.ss-highlight.is-visible::after {
  transform: scaleX(1);
}

/* ===================================================
   SEÇÃO ALTERNANTE DE FUNDO (scroll)
   =================================================== */
.ss-section[data-bg-transition] {
  transition: background-color 0.8s ease;
}

/* ===================================================
   LOADING SKELETON
   =================================================== */
.ss-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: ss-shimmer 1.5s infinite;
  border-radius: 8px;
}
.ss-skeleton-text { height: 16px; margin-bottom: 8px; }
.ss-skeleton-heading { height: 32px; margin-bottom: 16px; }
.ss-skeleton-thumb { aspect-ratio: 16/9; }

/* ===================================================
   SCROLL INDICATOR DE PROGRESSO
   =================================================== */
#ss-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--ss-gradient-brand);
  z-index: 9999;
  transition: width 0.1s linear;
}

/* ===================================================
   TRANSIÇÃO DE ENTRADA DE PÁGINA
   =================================================== */
.ss-page-transition {
  animation: ss-slide-up 0.6s ease forwards;
}

/* ===================================================
   HOVER LIFT — genérico
   =================================================== */
.ss-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ss-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--ss-shadow-lg);
}

/* ===================================================
   GLOW BUTTON
   =================================================== */
.ss-btn-glow {
  animation: ss-pulse-glow 3s ease-in-out infinite;
}

/* ===================================================
   ÍCONE COM ROTAÇÃO
   =================================================== */
.ss-icon-spin {
  display: inline-block;
  animation: ss-spin-slow 8s linear infinite;
}

/* ===================================================
   TYPEWRITER CURSOR
   =================================================== */
.ss-typewriter::after {
  content: '|';
  animation: ss-blink 1s step-end infinite;
  color: var(--ss-purple-light);
}
@keyframes ss-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ===================================================
   REVEAL COM DELAY CUSTOMIZADO
   =================================================== */
.ss-reveal[data-delay="0"]   { transition-delay: 0ms; }
.ss-reveal[data-delay="100"] { transition-delay: 100ms; }
.ss-reveal[data-delay="200"] { transition-delay: 200ms; }
.ss-reveal[data-delay="300"] { transition-delay: 300ms; }
.ss-reveal[data-delay="400"] { transition-delay: 400ms; }
.ss-reveal[data-delay="500"] { transition-delay: 500ms; }
.ss-reveal[data-delay="600"] { transition-delay: 600ms; }
.ss-reveal[data-delay="700"] { transition-delay: 700ms; }
.ss-reveal[data-delay="800"] { transition-delay: 800ms; }

.ss-reveal-left[data-delay="100"] { transition-delay: 100ms; }
.ss-reveal-left[data-delay="200"] { transition-delay: 200ms; }
.ss-reveal-right[data-delay="100"]{ transition-delay: 100ms; }
.ss-reveal-right[data-delay="200"]{ transition-delay: 200ms; }

/* ===================================================
   CURSOR CUSTOMIZADO (opcional, JS controlado)
   =================================================== */
.ss-cursor {
  width: 12px; height: 12px;
  background: var(--ss-purple);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 10000;
  transition: transform 0.1s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}
.ss-cursor-ring {
  width: 40px; height: 40px;
  border: 2px solid rgba(124,58,237,0.5);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease;
  transform: translate(-50%, -50%);
}
.ss-cursor.is-hovering {
  width: 20px; height: 20px;
  background: var(--ss-pink);
}
.ss-cursor-ring.is-hovering {
  width: 60px; height: 60px;
  border-color: rgba(236,72,153,0.4);
}

/* ===================================================
   PREFERS REDUCED MOTION — RESET COMPLETO
   =================================================== */
@media (prefers-reduced-motion: reduce) {
  .ss-hero-logo-img { animation: none !important; }
  .ss-float-badge { animation: none !important; }
  .ss-hero-scroll-line { animation: none !important; }
  .ss-particle { animation: none !important; display: none; }
  .ss-gradient-text-animated { animation: none !important; }
  .ss-cursor, .ss-cursor-ring { display: none !important; }
  #ss-progress-bar { transition: none !important; }
  .ss-big-text-reveal .ss-text-line { transform: none !important; opacity: 1 !important; }
  .ss-highlight::after { transform: scaleX(1) !important; }
  .ss-parallax-bg { transform: none !important; }
}