/* ============================================================
   Animations CSS — GSAP + CSS Animations
   ============================================================ */

/* ── Loading Screen ──────────────────────────────────────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--clr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 24px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#loader.hidden { opacity: 0; visibility: hidden; }

.loader-logo {
  font-size: 2rem;
  font-weight: 900;
  color: var(--clr-heading);
  animation: loader-fade 1s ease infinite alternate;
}

@keyframes loader-fade {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

.loader-bar {
  width: 200px;
  height: 3px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-gold));
  border-radius: 2px;
  animation: loader-fill 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loader-fill {
  to { width: 100%; }
}

/* ── Typing Effect ───────────────────────────────────────── */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--clr-primary-light);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ── Floating Elements ───────────────────────────────────── */
.float-1 { animation: float1 6s ease-in-out infinite; }
.float-2 { animation: float2 8s ease-in-out infinite; }
.float-3 { animation: float3 7s ease-in-out infinite; }

@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(2deg); }
  66% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-25px) rotate(-3deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-15px) scale(1.02); }
}

/* ── Shimmer Effect ──────────────────────────────────────── */
.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

/* ── Gradient Orbs ───────────────────────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orb-move 12s ease-in-out infinite alternate;
}

.orb-green {
  background: radial-gradient(circle, rgba(22, 163, 74, 0.12) 0%, transparent 70%);
}

.orb-gold {
  background: radial-gradient(circle, rgba(217, 119, 6, 0.08) 0%, transparent 70%);
  animation-delay: -4s;
  animation-duration: 15s;
}

@keyframes orb-move {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -40px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(10px, -20px) scale(1.05); }
}

/* ── Number Counter ──────────────────────────────────────── */
.counter-animated {
  display: inline-block;
}

/* ── Card Tilt ───────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.1s ease;
}

.tilt-card-inner {
  transform: translateZ(20px);
}

/* ── Glow Effect ─────────────────────────────────────────── */
.glow-on-hover {
  position: relative;
  overflow: hidden;
}

.glow-on-hover::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--clr-primary), var(--clr-gold), var(--clr-primary));
  background-size: 200% 200%;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
  animation: gradient-rotate 3s linear infinite;
}

.glow-on-hover:hover::after { opacity: 1; }

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

/* ── Particle Background ─────────────────────────────────── */
#particles-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── Marquee ─────────────────────────────────────────────── */
.marquee-wrap {
  overflow: hidden;
  width: 100%;
  background: var(--clr-surface);
  border-block: 1px solid var(--clr-glass-border);
  padding-block: 16px;
}

.marquee-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: marquee 20s linear infinite;
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--clr-text-muted);
}

.marquee-item .dot {
  width: 4px;
  height: 4px;
  background: var(--clr-gold);
  border-radius: 50%;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Hero Particles ──────────────────────────────────────── */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: particle-float linear infinite;
}

@keyframes particle-float {
  0%   { opacity: 0; transform: translateY(100vh) scale(0); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { opacity: 0; transform: translateY(-100px) scale(1.5); }
}

/* ── Service Card Hover Glow ─────────────────────────────── */
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-gold));
  transform: scaleX(0);
  transition: transform 0.4s ease;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  pointer-events: none;
}

.service-card:hover::after { transform: scaleX(1); }

/* ── Progress Line (Steps) ───────────────────────────────── */
.progress-line {
  height: 2px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-gold));
  width: 0%;
  border-radius: 1px;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-line.animated { width: 100%; }

/* ── Scroll Indicator ────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--clr-text-dim);
  font-size: 0.75rem;
  z-index: 2;
  animation: scroll-bounce 2s ease-in-out infinite;
}

.scroll-indicator .mouse {
  width: 22px;
  height: 36px;
  border: 2px solid var(--clr-text-dim);
  border-radius: 11px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.scroll-indicator .wheel {
  width: 3px;
  height: 8px;
  background: var(--clr-text-dim);
  border-radius: 2px;
  animation: wheel-scroll 2s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@keyframes wheel-scroll {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

/* ── City Card Hover ─────────────────────────────────────── */
.city-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,107,60,0.3) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.city-card:hover::after { opacity: 1; }

.city-card-content { z-index: 2; }

/* ── Text Reveal ─────────────────────────────────────────── */
.text-reveal {
  overflow: hidden;
  display: block;
}

.text-reveal-inner {
  display: block;
  transform: translateY(100%);
  animation: text-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes text-reveal {
  to { transform: translateY(0); }
}

/* ── Scale In ────────────────────────────────────────────── */
.scale-in {
  animation: scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

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

/* ── Ring Pulse ──────────────────────────────────────────── */
.ring-pulse {
  position: relative;
}

.ring-pulse::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(26,107,60,0.4);
  animation: ring-expand 2s ease-out infinite;
}

.ring-pulse::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px solid rgba(26,107,60,0.2);
  animation: ring-expand 2s ease-out 0.5s infinite;
}

@keyframes ring-expand {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ── SEO Page Specific ───────────────────────────────────── */
.keyword-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.keyword-tier-1 {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.keyword-tier-2 {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}

.keyword-tier-3 {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

.keyword-tier-4 {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
}

.keyword-tag:hover { transform: translateY(-2px) scale(1.05); }

.seo-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}

.seo-score {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 8px;
}

.seo-score.excellent { color: #16a34a; }
.seo-score.good { color: #d97706; }
.seo-score.needs-work { color: #ea580c; }