/* ============================================================
   AquaAdSpot — Animations & Dynamic Effects
   ============================================================ */

/* ---------- Scroll Reveal (AOS-like) ---------- */
[data-aos] {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
[data-aos="fade-up"]    { transform: translateY(40px); }
[data-aos="fade-down"]  { transform: translateY(-40px); }
[data-aos="fade-left"]  { transform: translateX(40px); }
[data-aos="fade-right"] { transform: translateX(-40px); }
[data-aos="zoom-in"]    { transform: scale(.85); }
[data-aos].aos-animate  { opacity: 1; transform: translate(0) scale(1); }

/* Delays */
[data-aos-delay="100"] { transition-delay: .1s; }
[data-aos-delay="200"] { transition-delay: .2s; }
[data-aos-delay="300"] { transition-delay: .3s; }
[data-aos-delay="400"] { transition-delay: .4s; }
[data-aos-delay="500"] { transition-delay: .5s; }
[data-aos-delay="600"] { transition-delay: .6s; }

/* ---------- Dynamic Custom Cursor ---------- */
.dynamicCursor {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  width: 14px;
  height: 14px;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: width .25s ease, height .25s ease, background .25s ease;
  mix-blend-mode: difference;
}
.dynamicCursor.expanded {
  width: 48px;
  height: 48px;
  background: rgba(0,0,0,.35);
}
@media (hover: none) { .dynamicCursor { display: none; } }

/* ---------- Bubble Canvas ---------- */
#ltx-bubbles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Hero Entrance ---------- */
@keyframes heroSlideIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-content .hero-tag     { animation: heroSlideIn .7s ease .2s both; }
.hero-content h1            { animation: heroSlideIn .7s ease .4s both; }
.hero-content p             { animation: heroSlideIn .7s ease .6s both; }
.hero-content .hero-buttons { animation: heroSlideIn .7s ease .8s both; }
.hero-content .hero-stats   { animation: heroSlideIn .7s ease 1s both; }

/* ---------- Hover: Clarity Arrow Animation ---------- */
.clarity-hover-animation {
  position: absolute;
  bottom: -180px; right: -180px;
  transition: all .5s ease-in-out;
  pointer-events: none;
}
.clarity-hover-animation .--innerbox {
  width: 120px; height: 120px;
  background: var(--accent);
  transform: rotate(45deg);
}
.clarity-hover-animation .--innerarrow {
  font-size: 20px; width: 30px;
  position: absolute; bottom: 80px; color: #fff; left: -100px;
  transition: all .5s ease-in-out;
  transition-delay: .4s;
}
.clarity-inner:hover .clarity-hover-animation { bottom: -80px; right: -80px; }
.clarity-inner:hover .clarity-hover-animation .--innerarrow { left: 20px; }

/* ---------- Pulse Glow (WhatsApp / CTA) ---------- */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); }
  50%       { box-shadow: 0 0 0 16px rgba(37,211,102,0); }
}
.fixed-whatsapp a { animation: pulseGlow 2.5s ease infinite; }

/* ---------- Count Up Numbers ---------- */
.count-num { display: inline-block; }

/* ---------- Typed Text Effect ---------- */
.tt-animation-word i {
  font-style: normal;
  display: inline-block;
  animation: letterBounce 2s steps(5, end) alternate infinite;
}
.tt-animation-word i:nth-child(1) { animation-delay: 0s; }
.tt-animation-word i:nth-child(2) { animation-delay: .1s; }
.tt-animation-word i:nth-child(3) { animation-delay: .15s; }
.tt-animation-word i:nth-child(4) { animation-delay: .2s; }
@keyframes letterBounce {
  0%   { transform: translateY(-12px); color: #e86b32; }
  10%  { transform: translateY(0);     color: #005395; }
  100% { transform: translateY(0);     color: #005395; }
}

/* ---------- Floating Animation ---------- */
@keyframes floating {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
.float-anim { animation: floating 4s ease-in-out infinite; }

/* ---------- Image Zoom on Scroll ---------- */
.clip-video {
  clip-path: inset(0% 5% round 30px);
  transition: clip-path 10ms linear;
}

/* ---------- Page Transition ---------- */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 9998;
  transition: transform .4s cubic-bezier(.77,0,.175,1);
}
.page-transition.active { transform: scaleX(1); }

/* ---------- Shimmer Skeleton (Blog Placeholder) ---------- */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 4px;
}

/* ---------- Scroll Progress Bar ---------- */
.scroll-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 9999;
  width: 0%;
  transition: width .1s linear;
}