/**
 * Picture It 4U Premium — animations.css
 * Gold shimmer, hero particle, loading, and micro-interaction effects.
 */

/* =============================================
   GOLD SHIMMER — on card hover
   ============================================= */
.booth-card::before,
.package-card--popular::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,169,81,0.08) 50%,
    transparent 100%
  );
  transition: left 0.65s ease;
  pointer-events: none;
  z-index: 0;
}

.booth-card:hover::before,
.package-card--popular:hover::before {
  left: 150%;
}

/* =============================================
   GRADIENT BORDER — featured cards
   ============================================= */
.booth-card--featured {
  position: relative;
}

.booth-card--featured::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--border-radius-lg) + 1px);
  background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold-dark));
  z-index: -1;
}

/* =============================================
   PULSE — on CTA buttons
   ============================================= */
@keyframes pulse-gold {
  0%, 100% { box-shadow: 0 4px 24px rgba(200,169,81,0.28); }
  50%       { box-shadow: 0 4px 40px rgba(200,169,81,0.55); }
}

.btn--primary {
  animation: pulse-gold 3s ease-in-out infinite;
}

.btn--primary:hover,
.btn--primary:focus {
  animation: none;
}

/* =============================================
   FLOATING BADGE ANIMATION
   ============================================= */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

.badge--gold {
  animation: float 4s ease-in-out infinite;
}

/* =============================================
   HERO BACKGROUND PARALLAX HINT
   ============================================= */
.hero-bg {
  will-change: transform;
}

/* =============================================
   LOADING SKELETON (for lazy image areas)
   ============================================= */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-200) 25%,
    var(--color-gray-100) 50%,
    var(--color-gray-200) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
}

/* =============================================
   TESTIMONIAL CARD — star pop
   ============================================= */
.testimonial-card:hover .testimonial-stars {
  animation: star-pop 0.4s ease;
}

@keyframes star-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* =============================================
   EVENT CARD — background zoom
   ============================================= */
.event-card {
  transition: transform var(--transition-base);
}

.event-card:hover {
  transform: scale(1.02);
}

/* =============================================
   ADDON CARD — icon bounce
   ============================================= */
.addon-card:hover .addon-icon {
  animation: icon-bounce 0.5s ease;
}

@keyframes icon-bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-8px); }
  60%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* =============================================
   SCROLL PROGRESS BAR
   ============================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light));
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}

/* =============================================
   FORM SUCCESS / ERROR STATES
   ============================================= */
.form-status {
  padding: 1rem 1.25rem;
  border-radius: var(--border-radius);
  font-weight: 500;
  margin-bottom: 1.5rem;
  display: none;
}

.form-status:not(:empty) {
  display: block;
}

.form-status--success {
  background: rgba(105,219,124,0.12);
  border: 1px solid rgba(105,219,124,0.35);
  color: #1a7a32;
}

.form-status--error {
  background: rgba(255,107,107,0.12);
  border: 1px solid rgba(255,107,107,0.35);
  color: #c0392b;
}

/* =============================================
   GOLD GLOW TEXT ON HEADINGS (hover)
   ============================================= */
.booth-card-title:hover,
.package-title:hover {
  color: var(--color-gold-dark);
  transition: color var(--transition-fast);
}

/* =============================================
   REDUCE MOTION — disable all animations
   ============================================= */
@media (prefers-reduced-motion: reduce) {
  .badge--gold,
  .btn--primary,
  .booth-card::before,
  .booth-card--featured::after {
    animation: none !important;
    transition: none !important;
  }
}