/* ============================================================
   PREMIUM AGENCY — ANIMATIONS
   animations.css  |  ~400 lines
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}

@keyframes float-x {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(-15px); }
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(139,92,246,.4), 0 0 20px rgba(139,92,246,.2);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 24px rgba(139,92,246,.8), 0 0 48px rgba(139,92,246,.4);
    opacity: .8;
  }
}

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

@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes scale-in {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-left {
  0% {
    opacity: 0;
    transform: translateX(60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-right {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes spin-slow {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes orbit {
  0%   { transform: rotate(0deg) translateX(80px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
}

@keyframes morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%       { border-radius: 40% 60% 70% 30% / 30% 60% 40% 70%; }
  50%       { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  75%       { border-radius: 60% 40% 30% 70% / 40% 30% 60% 70%; }
}

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

@keyframes counter-in {
  0%   { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@keyframes text-reveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

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

@keyframes noise-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1%, 1%); }
  50%  { transform: translate(1%, -1%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(0, 0); }
}

@keyframes aurora {
  0%   { filter: hue-rotate(0deg) brightness(1); }
  50%  { filter: hue-rotate(180deg) brightness(1.1); }
  100% { filter: hue-rotate(360deg) brightness(1); }
}

@keyframes bounce-soft {
  0%, 100% { transform: scale(1); }
  40%       { transform: scale(1.04); }
  60%       { transform: scale(.98); }
}

@keyframes progress-line {
  0%   { width: 0%; }
  100% { width: 100%; }
}

@keyframes orb-drift {
  0%   { transform: translateX(0)    translateY(0); }
  25%  { transform: translateX(30px) translateY(-20px); }
  50%  { transform: translateX(60px) translateY(10px); }
  75%  { transform: translateX(20px) translateY(30px); }
  100% { transform: translateX(0)    translateY(0); }
}

@keyframes line-draw {
  0%   { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}

@keyframes nav-bar-in {
  0%   { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: .6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes dot-blink {
  0%, 80%, 100% { transform: scale(0); opacity: 0; }
  40%            { transform: scale(1); opacity: 1; }
}

/* ── Animation Utility Classes ────────────────────────────── */

.anim-float {
  animation: float 6s ease-in-out infinite;
}

.anim-float-x {
  animation: float-x 7s ease-in-out infinite;
}

.anim-spin-slow {
  animation: spin-slow 20s linear infinite;
}

.anim-glow {
  animation: glow-pulse 3s ease-in-out infinite;
}

.anim-morph {
  animation: morph 8s ease-in-out infinite;
}

.anim-aurora {
  animation: aurora 12s ease-in-out infinite;
}

.anim-bounce {
  animation: bounce-soft 2s ease-in-out infinite;
}

.anim-orbit {
  animation: orbit 8s linear infinite;
}

/* Shimmer on hover */
.anim-shimmer {
  position: relative;
  overflow: hidden;
}

.anim-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.08) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .3s ease;
}

.anim-shimmer:hover::after {
  opacity: 1;
  animation: shimmer 1.2s ease forwards;
}

/* ── Scroll Reveal Classes ────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(.85);
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children — JS adds .visible; delay is via nth-child */
.stagger-children .reveal:nth-child(1)  { transition-delay: 0ms; }
.stagger-children .reveal:nth-child(2)  { transition-delay: 100ms; }
.stagger-children .reveal:nth-child(3)  { transition-delay: 200ms; }
.stagger-children .reveal:nth-child(4)  { transition-delay: 300ms; }
.stagger-children .reveal:nth-child(5)  { transition-delay: 400ms; }
.stagger-children .reveal:nth-child(6)  { transition-delay: 500ms; }
.stagger-children .reveal:nth-child(7)  { transition-delay: 600ms; }
.stagger-children .reveal:nth-child(8)  { transition-delay: 700ms; }
.stagger-children .reveal:nth-child(9)  { transition-delay: 800ms; }
.stagger-children .reveal:nth-child(10) { transition-delay: 900ms; }
.stagger-children .reveal:nth-child(n+11) { transition-delay: 1000ms; }

/* ── Text Animation Classes ───────────────────────────────── */

.text-gradient {
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-warm {
  background: linear-gradient(135deg, var(--amber), var(--rose));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-shift {
  background: linear-gradient(135deg, var(--violet), var(--cyan), var(--indigo), var(--violet));
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 6s ease infinite;
}

/* Split text — each word/char is wrapped in a span by JS */
.text-split {
  overflow: hidden;
  display: inline-block;
}

.text-split span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .6s cubic-bezier(.22,1,.36,1),
              opacity .6s cubic-bezier(.22,1,.36,1);
}

.text-split.visible span {
  transform: translateY(0);
  opacity: 1;
}

.text-split.visible span:nth-child(1)  { transition-delay: 0ms; }
.text-split.visible span:nth-child(2)  { transition-delay: 60ms; }
.text-split.visible span:nth-child(3)  { transition-delay: 120ms; }
.text-split.visible span:nth-child(4)  { transition-delay: 180ms; }
.text-split.visible span:nth-child(5)  { transition-delay: 240ms; }
.text-split.visible span:nth-child(6)  { transition-delay: 300ms; }
.text-split.visible span:nth-child(7)  { transition-delay: 360ms; }
.text-split.visible span:nth-child(8)  { transition-delay: 420ms; }
.text-split.visible span:nth-child(n+9) { transition-delay: 480ms; }

/* Typed cursor */
.typed-cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--violet-light);
  border-radius: 2px;
  vertical-align: middle;
  margin-left: 2px;
  animation: blink .7s step-end infinite;
}

/* Text reveal clip animation */
.text-reveal {
  animation: text-reveal .8s cubic-bezier(.22,1,.36,1) forwards;
  clip-path: inset(0 100% 0 0);
}

/* ── Parallax ─────────────────────────────────────────────── */

[data-depth],
[data-depth-x] {
  will-change: transform;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

/* ── Card Animations ──────────────────────────────────────── */

.card-glass {
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              border-color .3s ease,
              box-shadow .4s ease;
}

.card-glass:hover {
  transform: translateY(-4px) scale(1.005);
}

/* Glow border card with rotating conic gradient */
.glow-border-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: 1px;
  overflow: hidden;
  background: var(--border);
}

.glow-border-card::before {
  content: '';
  position: absolute;
  inset: -100%;
  width: 300%;
  height: 300%;
  background: conic-gradient(
    from var(--rotation, 0deg),
    transparent 0deg,
    var(--violet) 60deg,
    var(--cyan) 120deg,
    var(--indigo) 180deg,
    transparent 240deg
  );
  animation: spin-slow 4s linear infinite;
  opacity: 0;
  transition: opacity .4s ease;
}

.glow-border-card:hover::before {
  opacity: 1;
}

.glow-border-card-inner {
  background: var(--bg-2);
  border-radius: calc(var(--r-xl) - 1px);
  padding: var(--sp-6);
  position: relative;
  z-index: 1;
}

/* Hover lift utility */
.hover-lift {
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Hero-specific animations ─────────────────────────────── */

.hero-bg-orb {
  animation: orb-drift 12s ease-in-out infinite;
}

.hero-bg-orb.orb-1 {
  animation-duration: 14s;
  animation-delay: 0s;
}

.hero-bg-orb.orb-2 {
  animation-duration: 10s;
  animation-delay: -3s;
  animation-direction: reverse;
}

.hero-bg-orb.orb-3 {
  animation-duration: 16s;
  animation-delay: -7s;
}

.hero-badge {
  animation: fade-up .6s ease both;
  animation-delay: 0s;
}

.hero-title {
  animation: fade-up .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .2s;
}

.hero-subtitle {
  animation: fade-up .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .4s;
}

.hero-actions {
  animation: fade-up .7s cubic-bezier(.22,1,.36,1) both;
  animation-delay: .6s;
}

.hero-scroll-hint {
  animation: fade-in 1s ease both;
  animation-delay: 1s;
}

/* ── Loading Animation ────────────────────────────────────── */

.loader-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(139,92,246,.2);
  border-top-color: var(--violet);
  animation: spin-slow 1s linear infinite;
  position: relative;
}

.loader-ring::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,.2);
  border-bottom-color: var(--indigo);
  animation: spin-slow .7s linear infinite reverse;
}

.loader-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--violet);
  animation: glow-pulse 1.2s ease-in-out infinite;
  position: absolute;
}

#loader {
  transition: opacity .6s ease, visibility .6s ease;
}

#loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Ticker duplicate keyframe variant ────────────────────── */

.ticker-track-reverse {
  animation: ticker 40s linear infinite reverse;
}

/* ── Ripple effect for buttons ────────────────────────────── */

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: ripple .6s linear;
  pointer-events: none;
}

/* ── SVG line draw ────────────────────────────────────────── */

.svg-line-draw {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1s cubic-bezier(.22,1,.36,1);
}

.svg-line-draw.visible {
  stroke-dashoffset: 0;
}

/* ── Orb background blobs ─────────────────────────────────── */

.bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
  opacity: .08;
  will-change: transform;
}

.bg-orb-violet {
  background: var(--violet);
  animation: orb-drift 18s ease-in-out infinite;
}

.bg-orb-cyan {
  background: var(--cyan);
  animation: orb-drift 22s ease-in-out infinite reverse;
}

.bg-orb-indigo {
  background: var(--indigo);
  animation: orb-drift 14s ease-in-out infinite;
  animation-delay: -5s;
}

/* ── Navbar entry ─────────────────────────────────────────── */

.navbar {
  animation: nav-bar-in .6s ease both;
}

/* ── Dot loading animation (3 dots) ───────────────────────── */

.dot-loader {
  display: flex;
  gap: 6px;
  align-items: center;
}

.dot-loader span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-blink 1.4s ease-in-out infinite both;
}

.dot-loader span:nth-child(1) { animation-delay: 0s; }
.dot-loader span:nth-child(2) { animation-delay: .16s; }
.dot-loader span:nth-child(3) { animation-delay: .32s; }

/* ── Animated gradient backgrounds ───────────────────────── */

.bg-gradient-animated {
  background: linear-gradient(
    135deg,
    var(--bg-2),
    rgba(139,92,246,.08),
    var(--bg-2),
    rgba(99,102,241,.08)
  );
  background-size: 300% 300%;
  animation: gradient-shift 10s ease infinite;
}

/* ── Scroll progress bar (top of page) ───────────────────── */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--grad-primary);
  z-index: calc(var(--z-nav) + 1);
  width: 0%;
  transition: width .1s linear;
}