/* ═══════════════════════════════════════════════════════════
   ACQUA X DO BRASIL — animations.css
═══════════════════════════════════════════════════════════ */

/* ── HERO PARTICLES ── */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particle-float linear infinite;
  opacity: 0;
}
@keyframes particle-float {
  0%   { transform: translateY(100vh) translateX(0) scale(0); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .3; }
  100% { transform: translateY(-100px) translateX(var(--drift, 40px)) scale(1.2); opacity: 0; }
}

/* ── COUNTER ANIMATION ── */
.count-num { display: inline-block; }

/* ── FADE UP VARIANTS ── */
[data-aos-delay="0"]   { transition-delay: 0ms; }
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }
[data-aos-delay="400"] { transition-delay: 400ms; }
[data-aos-delay="500"] { transition-delay: 500ms; }

/* ── SKELETON LOADING ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s infinite;
  border-radius: 4px;
}
@keyframes skeleton-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── RIPPLE EFFECT ── */
.ripple-parent { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* ── NUMBER FLIP ── */
@keyframes flip-in {
  from { transform: rotateX(-90deg); opacity: 0; }
  to   { transform: rotateX(0deg);   opacity: 1; }
}

/* ── SLIDE IN ── */
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── GLOW ── */
@keyframes glow {
  0%, 100% { box-shadow: 0 0 20px rgba(0,85,165,.3); }
  50%       { box-shadow: 0 0 40px rgba(0,85,165,.6), 0 0 80px rgba(0,168,191,.3); }
}
.glow { animation: glow 3s ease-in-out infinite; }

/* ── SPIN ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* ── TYPING CURSOR ── */
.typing::after {
  content: '|';
  animation: blink-cursor .7s infinite;
  color: #7ecfff;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── SCROLL INDICATOR ── */
.scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,.5);
  font-size: .75rem;
  animation: fadeInUp 1s ease 2s both;
}
.scroll-mouse {
  width: 24px; height: 38px;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-wheel {
  width: 3px; height: 6px;
  background: rgba(255,255,255,.5);
  border-radius: 2px;
  animation: scroll-wheel 1.5s ease infinite;
}
@keyframes scroll-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* ── PROGRESS BAR ANIMATED ── */
.progress-anim {
  height: 4px;
  background: var(--c-blue-100);
  border-radius: 2px;
  overflow: hidden;
}
.progress-anim-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-blue-600), var(--c-teal-500));
  border-radius: 2px;
  width: 0;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}

/* ── TOAST NOTIFICATION ── */
.toast {
  position: fixed;
  bottom: 100px;
  right: 28px;
  z-index: 10000;
  background: var(--c-gray-900);
  color: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
  max-width: 320px;
}
.toast.show { transform: translateX(0); }
.toast.success { background: linear-gradient(135deg, var(--c-green-600), var(--c-green-500)); }
.toast.error   { background: linear-gradient(135deg, var(--c-red-600), var(--c-red-500)); }

/* ── HOVER SCALE ── */
.hover-scale {
  transition: transform var(--t-base);
}
.hover-scale:hover { transform: scale(1.04); }

/* ── GRADIENT TEXT ANIMATION ── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── CARD SHINE ── */
.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.15) 50%, transparent);
  transform: skewX(-15deg);
  transition: left .6s ease;
}
.card-shine:hover::after { left: 125%; }

/* ── WAVE DIVIDER ── */
.wave-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
}
.wave-divider svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
}

/* ── NOTIFICATION BADGE ── */
.notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--c-red-500);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  position: absolute;
  top: -6px; right: -6px;
  animation: pulse-badge .8s ease-in-out infinite alternate;
}
@keyframes pulse-badge {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}