/* ═══════════════════════════════════════════════════════════════
   BOOM'S BARBERSHOP — animations.css
   Motion System: Keyframes · Scroll Reveal · Transitions
   Version: 1.0.0
═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   @KEYFRAMES — ENTRANCE ANIMATIONS
───────────────────────────────────────── */

/* Fade Up — primary scroll reveal */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Down */
@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Left (slide in from right) */
@keyframes fade-left {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade Right (slide in from left) */
@keyframes fade-right {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale Up */
@keyframes scale-up {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fade In (opacity only) */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─────────────────────────────────────────
   @KEYFRAMES — CONTINUOUS ANIMATIONS
───────────────────────────────────────── */

/* WhatsApp Button Pulse Ring */
@keyframes pulse-wa {
  0% {
    box-shadow:
      0 0 0 0   rgba(37, 211, 102, 0.55),
      var(--shadow-btn-green);
  }
  70% {
    box-shadow:
      0 0 0 14px rgba(37, 211, 102, 0),
      var(--shadow-btn-green);
  }
  100% {
    box-shadow:
      0 0 0 0   rgba(37, 211, 102, 0),
      var(--shadow-btn-green);
  }
}

/* Gold Shimmer — for text and borders */
@keyframes shimmer-gold {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Scroll Bounce Indicator */
@keyframes scroll-bounce {
  0%, 100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.5;
  }
}

/* Skeleton Loading Shimmer */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* Navbar slide down on load */
@keyframes nav-slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Hamburger Line Transform */
@keyframes line-top-open {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(7px) rotate(0); }
  100% { transform: translateY(7px) rotate(45deg); }
}

@keyframes line-bottom-open {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-7px) rotate(0); }
  100% { transform: translateY(-7px) rotate(-45deg); }
}

/* Float effect — subtle bobbing */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Gold glow pulse — for featured cards */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(201, 168, 76, 0.15),
      0 0 0 1px var(--color-accent-border);
  }
  50% {
    box-shadow:
      0 0 40px rgba(201, 168, 76, 0.30),
      0 0 0 1px var(--color-accent-border-strong);
  }
}

/* Rotate — for loading spinner */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────
   SCROLL REVEAL SYSTEM
   Controlled by animations.js
   (Intersection Observer)
───────────────────────────────────────── */

/* Base hidden state — applied via HTML class */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  var(--transition-spring),
    transform var(--transition-spring);
  will-change: opacity, transform;
}

/* Variant: slide from left */
.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity  var(--transition-spring),
    transform var(--transition-spring);
}

/* Variant: slide from right */
.reveal--right {
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity  var(--transition-spring),
    transform var(--transition-spring);
}

/* Variant: scale up */
.reveal--scale {
  opacity: 0;
  transform: scale(0.90);
  transition:
    opacity  var(--transition-spring),
    transform var(--transition-spring);
}

/* Variant: fade only */
.reveal--fade {
  opacity: 0;
  transform: none;
  transition: opacity var(--transition-slow);
}

/* Visible state — added by JS */
.reveal.visible,
.reveal--left.visible,
.reveal--right.visible,
.reveal--scale.visible,
.reveal--fade.visible {
  opacity: 1;
  transform: none;
}

/* ─────────────────────────────────────────
   STAGGER SYSTEM
   Apply .stagger to parent, children get
   incremental transition-delay
───────────────────────────────────────── */
.stagger > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger > *:nth-child(2)  { transition-delay: 0.10s; }
.stagger > *:nth-child(3)  { transition-delay: 0.15s; }
.stagger > *:nth-child(4)  { transition-delay: 0.20s; }
.stagger > *:nth-child(5)  { transition-delay: 0.25s; }
.stagger > *:nth-child(6)  { transition-delay: 0.30s; }
.stagger > *:nth-child(7)  { transition-delay: 0.35s; }
.stagger > *:nth-child(8)  { transition-delay: 0.40s; }
.stagger > *:nth-child(9)  { transition-delay: 0.45s; }
.stagger > *:nth-child(10) { transition-delay: 0.50s; }
.stagger > *:nth-child(11) { transition-delay: 0.55s; }
.stagger > *:nth-child(12) { transition-delay: 0.60s; }

/* ─────────────────────────────────────────
   HERO ENTRANCE — Homepage only
   Staggered sequence on page load
───────────────────────────────────────── */
.hero-animate .hero__badge {
  animation: fade-down 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.hero-animate .hero__title {
  animation: fade-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.hero-animate .hero__subtitle {
  animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.40s both;
}

.hero-animate .hero__cta-group {
  animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.hero-animate .hero__trust-badges {
  animation: fade-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.70s both;
}

.hero-animate .hero__scroll-indicator {
  animation: fade-in 0.5s ease 1.1s both;
}

/* ─────────────────────────────────────────
   SKELETON LOADING
   Placeholder shimmer while images load
───────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-elevated) 25%,
    rgba(201, 168, 76, 0.06) 50%,
    var(--color-bg-elevated) 75%
  );
  background-size: 400px 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────
   HOVER MICRO-INTERACTIONS
───────────────────────────────────────── */

/* Lift effect — cards */
.hover-lift {
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-5px);
}

/* Scale effect — small elements */
.hover-scale {
  transition: transform var(--transition-fast);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* Gold glow effect */
.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: var(--shadow-gold-sm);
}

/* Underline slide effect — nav links */
.hover-underline {
  position: relative;
}

.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--transition-base);
}

.hover-underline:hover::after,
.hover-underline.active::after {
  width: 100%;
}

/* ─────────────────────────────────────────
   SCROLL INDICATOR
───────────────────────────────────────── */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  animation: scroll-bounce 2s ease-in-out infinite;
}

.scroll-indicator__line {
  width: 1px;
  height: 40px;
  background: linear-gradient(
    to bottom,
    var(--color-accent),
    transparent
  );
}

.scroll-indicator__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

/* ─────────────────────────────────────────
   GALLERY IMAGE HOVER OVERLAY
───────────────────────────────────────── */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 8, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0;
  transition: opacity var(--transition-base);
  border-radius: inherit;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-item:hover img {
  transform: scale(1.05);
}

.gallery-item img {
  transition: transform var(--transition-slow);
}

/* ─────────────────────────────────────────
   COUNTER NUMBER — Count-up animation
───────────────────────────────────────── */
.count-up {
  display: inline-block;
  transition: none;
}

/* Visual flash when count completes */
@keyframes count-flash {
  0%   { color: var(--color-gold-light); }
  100% { color: var(--color-accent); }
}

.count-up.counting-done {
  animation: count-flash 0.4s ease;
}

/* ─────────────────────────────────────────
   FLOATING WA BUTTON ANIMATION
───────────────────────────────────────── */
.wa-float {
  animation: pulse-wa 2.8s ease-out infinite;
}

.wa-float:hover {
  animation: none;
  transform: scale(1.10);
  box-shadow:
    0 0 0 3px rgba(37, 211, 102, 0.3),
    var(--shadow-lg);
}

/* ─────────────────────────────────────────
   LIGHTBOX ANIMATION
───────────────────────────────────────── */
.lightbox {
  animation: fade-in 0.25s ease both;
}

.lightbox__image-wrap {
  animation: scale-up 0.30s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─────────────────────────────────────────
   MOBILE MENU ANIMATION
───────────────────────────────────────── */
.nav-mobile-menu {
  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}

.nav-mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

/* ─────────────────────────────────────────
   ACCORDION ANIMATION
───────────────────────────────────────── */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-item.is-open .accordion-body {
  max-height: 600px;
}

/* ─────────────────────────────────────────
   TOOLTIP ANIMATION
───────────────────────────────────────── */
.tooltip {
  opacity: 0;
  transform: translateX(8px);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
  pointer-events: none;
}

.tooltip.visible,
.has-tooltip:hover .tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* ─────────────────────────────────────────
   PAGE TRANSITION
   Fade in on page load
───────────────────────────────────────── */
body {
  animation: fade-in 0.4s ease both;
}

/* ─────────────────────────────────────────
   REDUCE MOTION
   Respect user preference
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale,
  .reveal--fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .wa-float {
    animation: none;
  }
}