/* ============================================================
   CERVAKU.COM — Animations & Utility CSS
   ============================================================ */

/* Pulse animation for CTA elements */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.5); }
  50%       { box-shadow: 0 0 0 12px rgba(201,168,76,.0); }
}
.btn-pulse { animation: pulse-gold 2.5s infinite; }

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

/* Shimmer loader */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}

/* Stagger delays for fade-in */
.fade-in:nth-child(1) { transition-delay: .1s; }
.fade-in:nth-child(2) { transition-delay: .2s; }
.fade-in:nth-child(3) { transition-delay: .3s; }
.fade-in:nth-child(4) { transition-delay: .4s; }
.fade-in:nth-child(5) { transition-delay: .5s; }
.fade-in:nth-child(6) { transition-delay: .6s; }

/* Tag / Label utilities */
.tag {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: 50px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tag-gold { background: rgba(201,168,76,.15); color: var(--gold-dark); }
.tag-navy { background: var(--navy); color: var(--gold); }
.tag-green { background: rgba(34,197,94,.1); color: #16a34a; }

/* Divider */
.divider-gold {
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  border-radius: 2px;
  margin: 1rem 0 1.5rem;
}
.divider-gold.center { margin: 1rem auto 1.5rem; }

/* Number counter animation */
.counter-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
}

/* Tooltip */
.tooltip-wrap { position: relative; cursor: pointer; }
.tooltip-wrap .tooltip {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: var(--white);
  font-size: .75rem;
  padding: .35rem .75rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
}
.tooltip-wrap:hover .tooltip { opacity: 1; }

/* Success message */
.success-msg {
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  color: #15803d;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.error-msg {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radius);
  padding: 1rem 1.5rem;
  color: #b91c1c;
  font-size: .9rem;
}

/* Sticky sidebar */
.sticky-top { position: sticky; top: 100px; }

/* Price highlight */
.price-highlight {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover accent */
.card-accent { border-top: 3px solid var(--gold); }

/* Back to top */
#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 46px;
  height: 46px;
  background: var(--gold);
  color: var(--navy);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(201,168,76,.4);
  opacity: 0;
  transform: translateY(20px);
  transition: var(--transition);
  z-index: 900;
  cursor: pointer;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); }
#back-to-top:hover { background: var(--gold-light); transform: translateY(-3px); }