/* ============================================================
   PowerGroup NYC — Animations
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

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

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

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

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

@keyframes lightning-flash {
  0%, 100% { opacity: 0; }
  5%, 15%  { opacity: 1; }
  10%      { opacity: 0.3; }
  20%      { opacity: 0; }
}

@keyframes draw-line {
  from { stroke-dashoffset: 500; }
  to   { stroke-dashoffset: 0; }
}

@keyframes counter-glow {
  from { text-shadow: none; }
  to   { text-shadow: 0 0 20px rgba(201,168,76,0.6); }
}

@keyframes slide-in-bottom {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes border-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(201,168,76,0.2); }
  50%       { box-shadow: 0 0 40px rgba(201,168,76,0.5); }
}

/* ── Hero Entrance Animations ──────────────────────────────── */
.hero__badge    { animation: fadeInUp .6s ease .1s both; }
.hero__title    { animation: fadeInUp .7s ease .25s both; }
.hero__description { animation: fadeInUp .7s ease .4s both; }
.hero__actions  { animation: fadeInUp .7s ease .55s both; }
.hero__scroll   { animation: fadeInUp .6s ease .75s both; }

/* ── Float animation for service icons ─────────────────────── */
.service-card__icon { animation: float-y 4s ease-in-out infinite; }
.service-card:nth-child(2) .service-card__icon { animation-delay: .5s; }
.service-card:nth-child(3) .service-card__icon { animation-delay: 1s; }
.service-card:nth-child(4) .service-card__icon { animation-delay: .25s; }
.service-card:nth-child(5) .service-card__icon { animation-delay: .75s; }
.service-card:nth-child(6) .service-card__icon { animation-delay: 1.25s; }
.service-card:hover .service-card__icon { animation-play-state: paused; }

/* ── Shimmer text effect ────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--gold-dark) 0%,
    var(--gold-light) 40%,
    var(--gold) 60%,
    var(--gold-dark) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s linear infinite;
}

/* ── Stat counter glow ─────────────────────────────────────── */
.stats-bar__num.counted {
  animation: counter-glow .6s ease forwards;
}

/* ── AOS overrides ─────────────────────────────────────────── */
[data-aos="fade-up-gold"] {
  opacity: 0;
  transform: translateY(40px);
  transition-property: opacity, transform;
}
[data-aos="fade-up-gold"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* ── Button spark effect ────────────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary .spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  pointer-events: none;
  transform: scale(0);
  animation: spark-burst .5s ease forwards;
}
@keyframes spark-burst {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(20); opacity: 0; }
}

/* ── Hover lift ─────────────────────────────────────────────── */
.hover-lift { transition: var(--ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

/* ── Glow pulse for CTA ────────────────────────────────────── */
.glow-pulse { animation: glow-pulse 2.5s ease-in-out infinite; }

/* ── Line animation ─────────────────────────────────────────── */
.animated-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: draw-line 1.5s ease forwards;
}

/* ── Page transition ────────────────────────────────────────── */
.page-enter { animation: fadeInUp .5s ease both; }

/* ── Scroll progress bar ────────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  z-index: 9999;
  width: 0%;
  transition: width .1s linear;
}

/* ── Lightning bolt decoration ─────────────────────────────── */
.lightning-deco {
  position: absolute;
  pointer-events: none;
  animation: lightning-flash 8s infinite;
}

/* ── Rotating ring ─────────────────────────────────────────── */
.ring-rotate {
  animation: spin-slow 20s linear infinite;
}

/* ── Tag pulse ─────────────────────────────────────────────── */
.tag-live {
  animation: glow-pulse 2s ease-in-out infinite;
}

/* ── Stagger children ───────────────────────────────────────── */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 100ms; }
.stagger > *:nth-child(3) { animation-delay: 200ms; }
.stagger > *:nth-child(4) { animation-delay: 300ms; }
.stagger > *:nth-child(5) { animation-delay: 400ms; }
.stagger > *:nth-child(6) { animation-delay: 500ms; }

/* ── Typewriter cursor ─────────────────────────────────────── */
.typewriter::after {
  content: '|';
  animation: pulse-dot .8s step-end infinite;
  color: var(--gold);
}

/* ── Noise texture overlay ─────────────────────────────────── */
.noise-overlay {
  position: absolute;
  inset: 0;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── Service card number decoration ────────────────────────── */
.service-card::after {
  content: attr(data-num);
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-h);
  font-size: 3.5rem;
  font-weight: 700;
  color: rgba(201,168,76,0.06);
  line-height: 1;
  pointer-events: none;
  transition: var(--ease);
}
.service-card:hover::after { color: rgba(201,168,76,0.1); }