/* ============================================
   animations.css — Keyframes & motion effects
   ============================================ */

/* ---------- Pulse Ring (WhatsApp) ---------- */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* ---------- Pulse Dot (Availability) ---------- */
@keyframes pulseDot {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}

/* ---------- Fade In Up (Scroll Reveal) ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ---------- Slide Down (Mobile Menu) ---------- */
@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Float (decorative) ---------- */
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(3deg);
  }
}

/* ---------- About — Floating Code ---------- */
@keyframes fiFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* ---------- Counter Prep ---------- */
.count-up {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}

/* ---------- Availability Badge ---------- */
.availability-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  display: inline-block;
  animation: pulseDot 2s ease-in-out infinite;
}

/* Shared keyframes */
@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ---------- Text Wipe Reveal ---------- */

/* Initial hidden states */
.reveal-wipe-lr {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
}

.reveal-wipe-tb {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transform: none;
}

/* Active: trigger animation */
.reveal-wipe-lr.wipe-active {
  animation: wipeInLR 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-wipe-tb.wipe-active {
  animation: wipeInTB 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes wipeInLR {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

@keyframes wipeInTB {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0% 0);
  }
}

.hero-photo {
  opacity: 0;
}

/* ---------- Hero Photo — Clip Reveal ---------- */
.hero.hero-loaded .hero-photo {
  animation: heroPhotoReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1.7s;
}

@keyframes heroPhotoReveal {
  from {
    opacity: 0;
    transform: translateX(-45%) translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateX(-45%) translateY(0);
  }
}

/* ---------- Particles Section ---------- */
.particles-section {
  position: relative;
  overflow: hidden;
}

.particle-canvas-local {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: block;
}

/* ---------- Theme Slide Transition ---------- */
#theme-slide {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  transform: translateX(100%);
  will-change: transform;
}

#theme-slide.slide-through {
  animation: themeSlideThroughonce 0.85s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes themeSlideThroughonce {
  0% {
    transform: translateX(100%);
  }
  45% {
    transform: translateX(0%);
  }
  55% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}