/* ============================================================
   BOHO BODY SCULPTING SPA — animations.css
   All keyframes and animation utility classes
   ============================================================ */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes scaleInUp {
  from { opacity: 0; transform: scale(0.9) translateY(24px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-16px) rotate(3deg); }
  66%       { transform: translateY(-8px) rotate(-2deg); }
}
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-22px) scale(1.04); }
}
@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(-2%, -1%); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(10px); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(200,132,122,0.3); }
  50%       { box-shadow: 0 4px 44px rgba(200,132,122,0.75); }
}
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(201,169,110,0.25); }
  50%       { box-shadow: 0 0 44px rgba(201,169,110,0.65); }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-8deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes staggerReveal {
  from { opacity: 0; transform: translateY(30px); clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; transform: translateY(0);  clip-path: inset(0 0 0% 0); }
}
@keyframes lineGrow {
  from { width: 0; }
  to   { width: 60px; }
}
@keyframes checkDraw {
  from { stroke-dashoffset: 50; }
  to   { stroke-dashoffset: 0; }
}
@keyframes ripple {
  0%   { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}
@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Animate-on-Scroll Base State ───────────────────────────── */
/* Elements with [data-animate] start hidden; JS adds .animated */
[data-animate] {
  opacity: 0;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-property: opacity, transform;
}
[data-animate="fadeUp"]    { transform: translateY(40px); }
[data-animate="fadeDown"]  { transform: translateY(-30px); }
[data-animate="fadeLeft"]  { transform: translateX(50px); }
[data-animate="fadeRight"] { transform: translateX(-50px); }
[data-animate="scaleIn"]   { transform: scale(0.85); }
[data-animate="scaleInUp"] { transform: scale(0.9) translateY(24px); }
[data-animate="rotateIn"]  { transform: rotate(-8deg) scale(0.9); }

[data-animate].animated {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }

/* ── Utility Animation Classes ──────────────────────────────── */
.anim-float      { animation: floatSlow 7s ease-in-out infinite; }
.anim-float-slow { animation: floatSlow 10s ease-in-out infinite; }
.anim-glow-pulse { animation: glowPulse 3s ease-in-out infinite; }
.anim-gold-pulse { animation: goldPulse 3s ease-in-out infinite; }
.anim-spin       { animation: spin 8s linear infinite; }
.anim-bounce     { animation: bounce 2.2s ease-in-out infinite; }

/* ── Loading Skeleton Shimmer ───────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(200,132,122,0.08) 25%,
    rgba(200,132,122,0.18) 50%,
    rgba(200,132,122,0.08) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 6px;
}

/* ── Hover Lift ─────────────────────────────────────────────── */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.25,0.8,0.25,1),
              box-shadow 0.35s cubic-bezier(0.25,0.8,0.25,1);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 50px rgba(30,26,24,0.2);
}

/* ── Btn Ripple Effect ──────────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
  opacity: 0;
}
.btn:active::before {
  width: 300px; height: 300px; opacity: 0;
}

/* ── Page Transition ─────────────────────────────────────────── */
.page-enter {
  animation: fadeIn 0.5s ease forwards;
}

/* ── Number Counter Glow ─────────────────────────────────────── */
.stat-number.counting {
  animation: goldPulse 1s ease infinite;
}

/* ── Scroll Indicator Arrow ──────────────────────────────────── */
.scroll-arrow {
  animation: bounce 2.2s ease-in-out infinite;
}

/* ── Hero Floating Petal Decor ───────────────────────────────── */
.hero-petal {
  position: absolute;
  border-radius: 50% 0 50% 0;
  opacity: 0.15;
  pointer-events: none;
}
.hero-petal-1 {
  width: 200px; height: 200px;
  background: var(--primary);
  top: 15%; left: 8%;
  animation: float 9s ease-in-out infinite;
}
.hero-petal-2 {
  width: 130px; height: 130px;
  background: var(--gold);
  top: 65%; right: 10%;
  animation: float 11s ease-in-out infinite 2s;
}
.hero-petal-3 {
  width: 90px; height: 90px;
  background: var(--primary-light);
  bottom: 20%; left: 20%;
  animation: float 8s ease-in-out infinite 1s;
}

/* ── Section Wave Divider Colors ─────────────────────────────── */
.wave-cream { fill: var(--cream); }
.wave-white { fill: var(--white); }
.wave-dark  { fill: var(--dark); }
.wave-cream-dark { fill: var(--cream-dark); }

/* ── Image Reveal on Scroll ──────────────────────────────────── */
.img-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s cubic-bezier(0.77,0,0.175,1);
}
.img-reveal.animated {
  clip-path: inset(0 0% 0 0);
}

/* ── Tag Pill ────────────────────────────────────────────────── */
.tag-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: var(--r-xl);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(200,132,122,0.12);
  color: var(--primary-dark);
  border: 1px solid rgba(200,132,122,0.25);
}