/* Global Styles */
html {
  scroll-behavior: smooth;
}

/* --- Hero Animations (HomePage.tsx) --- */
@keyframes shoot-arrow {
  0% { transform: translate(100px, -100px); opacity: 0; }
  30% { opacity: 1; }
  80% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 0; }
}
.animate-shoot-arrow {
  animation: shoot-arrow 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes target-ripple {
  from { stroke-width: 1; r: 5; opacity: 1; }
  to { stroke-width: 0; r: 40; opacity: 0; }
}
.animate-target-ripple {
  transform-origin: center;
  animation: target-ripple 1.5s ease-out infinite;
  animation-delay: 2.9s; /* Timed with arrow hit */
}

@keyframes float-tag {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}
.animate-float-tag-1 { animation: float-tag 4s ease-in-out infinite; animation-delay: 0s; }
.animate-float-tag-2 { animation: float-tag 4s ease-in-out infinite; animation-delay: 1s; }
.animate-float-tag-3 { animation: float-tag 4s ease-in-out infinite; animation-delay: 2s; }
.animate-float-tag-4 { animation: float-tag 4s ease-in-out infinite; animation-delay: 3s; }

/* --- General Animations (previously index.html) --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}
.stagger-children > * {
  opacity: 0;
  animation: fadeInUp 0.5s ease-out forwards;
}

/* --- HomePage Service Animations (HomePage.tsx) --- */
/* GeoFencingAnimation (original) */
@keyframes gf-main-cycle { 0%, 100% { opacity: 1; } }
@keyframes gf-pin-drop {
    0% { opacity: 0; transform: translateY(-30px) scale(1.2); }
    10% { opacity: 1; transform: translateY(5px) scale(0.9); }
    15%, 85% { opacity: 1; transform: translateY(0) scale(1); }
    95%, 100% { opacity: 0; }
}
@keyframes gf-radius-expand {
    0% { r: 0; opacity: 0.7; }
    100% { r: 180px; opacity: 0; }
}
@keyframes gf-label-show {
     0% { opacity: 0; }
     50%, 100% { opacity: 1; }
}
 @keyframes gf-label-hide {
     0%, 50% { opacity: 1; }
     100% { opacity: 0; }
}
@keyframes gf-person-color-1 {
    0%, 25% { fill: #9ca3af; } /* gray-400 */
    35%, 85% { fill: #14B8A6; } /* primary-500 */
    95%, 100% { fill: #9ca3af; }
}
.dark @keyframes gf-person-color-1 {
    35%, 85% { fill: #2DD4BF; } /* primary-400 */
}
@keyframes gf-person-color-2 {
    0%, 40% { fill: #9ca3af; }
    50%, 85% { fill: #14B8A6; }
    95%, 100% { fill: #9ca3af; }
}
.dark @keyframes gf-person-color-2 {
    50%, 85% { fill: #2DD4BF; }
}
@keyframes gf-person-color-3 {
    0%, 55% { fill: #9ca3af; }
    65%, 85% { fill: #14B8A6; }
    95%, 100% { fill: #9ca3af; }
}
.dark @keyframes gf-person-color-3 {
    65%, 85% { fill: #2DD4BF; }
}

.gf-container { animation: gf-main-cycle 10s linear infinite; }
.gf-container .pin { animation: gf-pin-drop 10s ease-out infinite; }
.gf-container .radius { animation: gf-radius-expand 2s ease-out infinite; }
.gf-container .label-group { animation: gf-label-hide 2s ease-out infinite; }
.gf-container .label-group text { animation: gf-label-show 0.5s ease-out infinite; }
.gf-container .person-1 { animation: gf-person-color-1 10s linear infinite; }
.gf-container .person-2 { animation: gf-person-color-2 10s linear infinite; }
.gf-container .person-3 { animation: gf-person-color-3 10s linear infinite; }

/* YandexSearchAnimation */
@keyframes typing-search { from { width: 0 } to { width: 100% } }
@keyframes blink-caret-search { from, to { border-color: transparent } 50% { border-color: #F97316; } }
@keyframes ad-fade-in-search { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
.search-input-text-anim {
  overflow: hidden;
  border-right: .15em solid #F97316;
  white-space: nowrap;
  margin: 0;
  letter-spacing: .05em;
  animation: typing-search 2.5s steps(30, end) 1s 1 forwards, blink-caret-search .75s step-end infinite;
  width: 0;
}
.ad-result-anim {
  opacity: 0;
  animation: ad-fade-in-search 0.5s ease-out 4s 1 forwards;
}

/* GeoFencingAnimationV2 */
@keyframes gf2-main-cycle { 0%, 100% { opacity: 1; } }
@keyframes gf2-pin-drop {
    0% { opacity: 0; transform: translateY(-30px) scale(1.2); }
    10% { opacity: 1; transform: translateY(5px) scale(0.9); }
    15%, 85% { opacity: 1; transform: translateY(0) scale(1); }
    95%, 100% { opacity: 0; }
}
@keyframes gf2-radius-expand {
    0% { r: 0; opacity: 0.7; }
    100% { r: 180px; opacity: 0; }
}
@keyframes gf2-label-show {
     0% { opacity: 0; }
     50%, 100% { opacity: 1; }
}
 @keyframes gf2-label-hide {
     0%, 50% { opacity: 1; }
     100% { opacity: 0; }
}
@keyframes gf2-person-color-1 {
    0%, 25% { fill: #9ca3af; } /* gray-400 */
    35%, 85% { fill: #14B8A6; } /* primary-500 */
    95%, 100% { fill: #9ca3af; }
}
.dark @keyframes gf2-person-color-1 {
    35%, 85% { fill: #2DD4BF; } /* primary-400 */
}
@keyframes gf2-person-color-2 {
    0%, 45% { fill: #9ca3af; }
    55%, 85% { fill: #14B8A6; }
    95%, 100% { fill: #9ca3af; }
}
.dark @keyframes gf2-person-color-2 {
    55%, 85% { fill: #2DD4BF; }
}
@keyframes gf2-person-color-3 {
    0%, 65% { fill: #9ca3af; }
    75%, 85% { fill: #14B8A6; }
    95%, 100% { fill: #9ca3af; }
}
.dark @keyframes gf2-person-color-3 {
    75%, 85% { fill: #2DD4BF; }
}

.gf2-container { animation: gf2-main-cycle 15s linear infinite; }
.gf2-container .pin { animation: gf2-pin-drop 15s ease-out infinite; }
.gf2-container .radius { animation: gf2-radius-expand 3s ease-out infinite; }
.gf2-container .label-group { animation: gf2-label-hide 3s ease-out infinite; }
.gf2-container .label-group text { animation: gf2-label-show 0.5s ease-out infinite; }
.gf2-container .person-1 { animation: gf2-person-color-1 15s linear infinite; }
.gf2-container .person-2 { animation: gf2-person-color-2 15s linear infinite; }
.gf2-container .person-3 { animation: gf2-person-color-3 15s linear infinite; }

/* RetargetingHomePageAnimation */
@keyframes rh-main-cycle { 0%, 100% { opacity: 1; } }
@keyframes rh-line-draw { 
    from { stroke-dashoffset: 200; } 
    to { stroke-dashoffset: 0; }
}
@keyframes rh-ad-pop {
    0%, 70% { opacity: 0; transform: scale(0.5); }
    80% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes rh-person-warm {
    0%, 60% { fill: #9ca3af; } /* gray-400 */
    80%, 100% { fill: #14B8A6; } /* primary-500 */
}
.dark @keyframes rh-person-warm {
    80%, 100% { fill: #2DD4BF; } /* primary-400 */
}

.rh-container { animation: rh-main-cycle 8s linear infinite; }
.rh-container .rh-line { stroke-dasharray: 200; animation: rh-line-draw 1s ease-out infinite; }
.rh-container .rh-ad { animation: rh-ad-pop 1s ease-out infinite; }
.rh-container .rh-person { animation: rh-person-warm 1s linear infinite; }

/* --- Contact Page Animations (ContactPage.tsx) --- */
@keyframes steam-rise {
  from {
    opacity: 0.6;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-40px);
  }
}
.steam-path {
  animation: steam-rise 3s infinite linear;
  color: #d1d5db; /* gray-300 */
}
.dark .steam-path {
  color: #4b5563; /* gray-600 */
}

/* --- Telegram Ads Page Animations (TelegramAdsPage.tsx) --- */
@keyframes fly {
  0% { transform: translateY(20vh) translateX(-20vw) rotate(-20deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translateY(-20vh) translateX(20vw) rotate(10deg); opacity: 0; }
}
.animate-fly-1 { animation: fly 15s linear infinite; }
.animate-fly-2 { animation: fly 20s linear infinite; animation-delay: 5s; }
.animate-fly-3 { animation: fly 12s linear infinite; animation-delay: 2s; }
.animate-fly-4 { animation: fly 18s linear infinite; animation-delay: 8s; }
.animate-fly-5 { animation: fly 22s linear infinite; animation-delay: 11s; }

/* --- Yandex Direct Page Animations (YandexDirectPage.tsx) --- */
@keyframes network-pulse {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.7; }
}
.animate-network-pulse { animation: network-pulse 10s ease-in-out infinite; }

@keyframes float-subtle {
   0% { transform: translateY(0px); }
   50% { transform: translateY(-6px); }
   100% { transform: translateY(0px); }
}
.data-source-item:hover .data-source-icon {
    transform: scale(1.1);
    box-shadow: 0 0 25px rgba(13, 148, 136, 0.5); /* primary-600 */
}

/* --- Retargeting & Geo Performance Page Animations --- */
/* Background Line Animation */
.lines-animation {
    transform: skewY(-12deg);
}
.line {
    position: absolute;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to top, transparent, #0D9488, transparent); /* primary */
    animation: animate-lines 20s linear infinite;
}
.line:nth-child(1) { left: 10%; animation-duration: 15s; }
.line:nth-child(2) { left: 25%; animation-duration: 20s; animation-delay: -5s; }
.line:nth-child(3) { left: 50%; animation-duration: 12s; }
.line:nth-child(4) { left: 75%; animation-duration: 18s; animation-delay: -7s; }
.line:nth-child(5) { left: 90%; animation-duration: 14s; }

@keyframes animate-lines {
    0% { transform: translateY(0); height: 0%; }
    100% { transform: translateY(-100vh); height: 100%; }
}

/* Scrolling Content Animation (RetargetingPage.tsx) */
@keyframes endless-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}
.animate-endless-scroll {
  animation: endless-scroll 40s linear infinite;
}

/* Ad Pop-in Animation (RetargetingPage.tsx) */
@keyframes pop-in-ad {
  0%, 15%, 85%, 100% { opacity: 0; transform: scale(0.8) translateY(20px); }
  25%, 75% { opacity: 1; transform: scale(1) translateY(0); }
}
.ad-banner {
  animation: pop-in-ad 12s ease-in-out infinite;
}

/* --- Geo Performance Page Animations --- */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Hero Animation Cycle: 12 seconds */
.animate-drop-in, .animate-ripple, .animate-expand-radius-1, .animate-expand-radius-2, .animate-expand-radius-3, .animate-card-fade-in {
    animation-duration: 12s;
    animation-iteration-count: infinite;
}

@keyframes drop-in {
    0%, 95%, 100% { transform: translateY(-200%) scale(1.5); opacity: 0; }
    5% { transform: translateY(-200%) scale(1.5); opacity: 0; }
    13% { transform: translateY(5%); scale(1); opacity: 1; }
    17%, 90% { transform: translateY(0); opacity: 1; }
}
.animate-drop-in { animation-name: drop-in; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

@keyframes ripple {
    0%, 95%, 100% { opacity: 0; }
    13% { transform: scale(1); opacity: 0.8; }
    20%, 90% { transform: scale(5); opacity: 0; }
}
.animate-ripple { animation-name: ripple; animation-timing-function: ease-out; }

@keyframes expand-radius {
    0% { transform: scale(0.1); opacity: 0; }
    8% { transform: scale(1); opacity: 1; }
    90% { transform: scale(1); opacity: 1; }
    95%, 100% { transform: scale(1.1); opacity: 0; }
}
.animate-expand-radius-1 { animation-name: expand-radius; animation-delay: 1.8s; }
.animate-expand-radius-2 { animation-name: expand-radius; animation-delay: 2.8s; }
.animate-expand-radius-3 { animation-name: expand-radius; animation-delay: 3.8s; }
.animate-expand-radius-1, .animate-expand-radius-2, .animate-expand-radius-3 {
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}
.animate-expand-radius-1 > span, .animate-expand-radius-2 > span, .animate-expand-radius-3 > span {
    animation: inherit;
    animation-name: label-fade;
}

@keyframes label-fade {
     0% { opacity: 0; }
    8%, 90% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

@keyframes card-fade-in {
    0%, 40%, 95%, 100% { opacity: 0; transform: scale(0.8); }
    48% { opacity: 1; transform: scale(1); }
    90% { opacity: 1; transform: scale(1); }
}
.animate-card-fade-in {
    animation-name: card-fade-in;
    animation-timing-function: ease-out;
}

/* Floating Orbits */
@keyframes float-around-1 {
    0% { transform: translate(150px, 0px); }
    25% { transform: translate(0px, 150px); }
    50% { transform: translate(-150px, 0px); }
    75% { transform: translate(0px, -150px); }
    100% { transform: translate(150px, 0px); }
}
@keyframes float-around-2 {
    0% { transform: translate(-120px, -120px); }
    25% { transform: translate(120px, -120px); }
    50% { transform: translate(120px, 120px); }
    75% { transform: translate(-120px, 120px); }
    100% { transform: translate(-120px, -120px); }
}
@keyframes float-around-3 {
    0% { transform: translate(0, 180px); }
    25% { transform: translate(-180px, 0); }
    50% { transform: translate(0, -180px); }
    75% { transform: translate(180px, 0); }
    100% { transform: translate(0, 180px); }
}
@keyframes float-around-4 {
    0% { transform: translate(-200px, 50px); }
    25% { transform: translate(-50px, -200px); }
    50% { transform: translate(200px, -50px); }
    75% { transform: translate(50px, 200px); }
    100% { transform: translate(-200px, 50px); }
}
@keyframes float-around-5 {
    0% { transform: translate(50px, -220px); }
    25% { transform: translate(220px, 50px); }
    50% { transform: translate(-50px, 220px); }
    75% { transform: translate(-220px, -50px); }
    100% { transform: translate(50px, -220px); }
}

/* "How it works" Building Animation (GeoPerformancePage.tsx) */
@keyframes city-zoom {
    0%, 100% { transform: scale(2.5) translate(0, -10%); }
    40%, 80% { transform: scale(1) translate(0, 0); }
}
.animate-city-zoom {
    transform-origin: center;
    animation: city-zoom 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes building-fade {
    0%, 25% { opacity: 0; }
    40%, 100% { opacity: 1; }
}
.animate-building-fade {
    animation: building-fade 8s ease-in-out infinite;
}

@keyframes radius-expand {
    0%, 40% { r: 0; opacity: 0; stroke-width: 3; }
    45% { opacity: 1; }
    80% { r: 100; opacity: 0; stroke-width: 0; }
    100% { opacity: 0; }
}
.animate-radius-expand {
    animation: radius-expand 8s ease-out infinite;
}

/* Responsive adjustments for animations */
@media (max-width: 768px) {
    .animate-expand-radius-3 { width: 320px; height: 320px; }
    @keyframes float-around-1 {
        0% { transform: translate(100px, 0px) scale(0.9); } 25% { transform: translate(0px, 100px) scale(0.9); } 50% { transform: translate(-100px, 0px) scale(0.9); } 75% { transform: translate(0px, -100px) scale(0.9); } 100% { transform: translate(100px, 0px) scale(0.9); }
    }
    @keyframes float-around-2 {
        0% { transform: translate(-80px, -80px) scale(0.9); } 25% { transform: translate(80px, -80px) scale(0.9); } 50% { transform: translate(80px, 80px) scale(0.9); } 75% { transform: translate(-80px, 80px) scale(0.9); } 100% { transform: translate(-80px, -80px) scale(0.9); }
    }
    @keyframes float-around-3 {
        0% { transform: translate(0, 120px) scale(0.9); } 25% { transform: translate(-120px, 0) scale(0.9); } 50% { transform: translate(0, -120px) scale(0.9); } 75% { transform: translate(120px, 0) scale(0.9); } 100% { transform: translate(0, 120px) scale(0.9); }
    }
    @keyframes float-around-4 {
        0% { transform: translate(-130px, 40px) scale(0.9); } 25% { transform: translate(-40px, -130px) scale(0.9); } 50% { transform: translate(130px, -40px) scale(0.9); } 75% { transform: translate(40px, 130px) scale(0.9); } 100% { transform: translate(-130px, 40px) scale(0.9); }
    }
    @keyframes float-around-5 {
        0% { transform: translate(40px, -140px) scale(0.9); } 25% { transform: translate(140px, 40px) scale(0.9); } 50% { transform: translate(-40px, 140px) scale(0.9); } 75% { transform: translate(-140px, -40px) scale(0.9); } 100% { transform: translate(40px, -140px) scale(0.9); }
    }
}