/* ═══════════════════════════════════════════════════════════════════════
   Ink Stories Tattoos — Keyframe Animations
   ═══════════════════════════════════════════════════════════════════════ */

/* ── float — SVG art bobs up and down ──────────────────────────────── */
@keyframes float {
  from { transform: translateY(-8px); }
  to   { transform: translateY(8px); }
}

.ips-float {
  animation: float 4s ease-in-out infinite alternate;
}

/* ── shimmer — gold gradient sweeps left→right ──────────────────────── */
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.ips-shimmer {
  background: linear-gradient(
    90deg,
    var(--ink-gold-dark)  0%,
    var(--ink-gold)       30%,
    var(--ink-gold-light) 50%,
    var(--ink-gold)       70%,
    var(--ink-gold-dark)  100%
  );
  background-size: 300% 100%;
  animation: shimmer 3s linear infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── ink-drip — element scales in from top ──────────────────────────── */
@keyframes ink-drip {
  from {
    transform: scaleY(0);
    transform-origin: top center;
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    transform-origin: top center;
    opacity: 1;
  }
}

.ips-ink-drip {
  transform-origin: top center;
  transform: scaleY(0);
}

.ips-ink-drip.is-visible {
  animation: ink-drip 1.2s var(--ease-out-expo) forwards;
  animation-delay: var(--delay, 0s);
}

/* ── rotate-slow — continuous full rotation ─────────────────────────── */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ips-svg-mandala {
  animation: rotate-slow 60s linear infinite;
  transform-origin: center;
}

/* ── particle-rise — gold particles float up and fade ──────────────── */
@keyframes particle-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-100vh) scale(0.4);
    opacity: 0;
  }
}

/* ── count-up — fade in when counter activates ──────────────────────── */
@keyframes count-up {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── slide-in-left ──────────────────────────────────────────────────── */
@keyframes slide-in-left {
  from {
    transform: translateX(-60px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── slide-in-right ─────────────────────────────────────────────────── */
@keyframes slide-in-right {
  from {
    transform: translateX(60px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* ── pulse-gold — glowing box shadow pulse ──────────────────────────── */
@keyframes pulse-gold {
  0%   { box-shadow: 0 0 0    0   rgba(201,169,110,0.0); }
  50%  { box-shadow: 0 0 24px 8px rgba(201,169,110,0.3); }
  100% { box-shadow: 0 0 0    0   rgba(201,169,110,0.0); }
}

.ips-pulse-gold {
  animation: pulse-gold 2s ease-in-out infinite;
}

/* ── border-draw — SVG path stroke dash offset ──────────────────────── */
@keyframes border-draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

.ips-border-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.ips-border-draw.is-visible {
  animation: border-draw 1.8s var(--ease-out-expo) forwards;
}

/* ── scroll dot bounce in hero ──────────────────────────────────────── */
@keyframes scroll-dot {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(18px); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 1; }
}

.ips-scroll-dot {
  animation: scroll-dot 2s ease-in-out infinite;
}

/* ── chevron bounce ─────────────────────────────────────────────────── */
@keyframes chevron-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

.ips-chevron {
  animation: chevron-bounce 1.5s ease-in-out infinite;
}

/* ── koi orbit — pair rotates together ──────────────────────────────── */
@keyframes koi-orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ips-koi-orbit {
  transform-origin: 110px 110px;
  animation: koi-orbit 20s linear infinite;
}

/* ── skull floating with slight rotation ────────────────────────────── */
.ips-svg-skull {
  animation: skull-float 5s ease-in-out infinite alternate;
}

@keyframes skull-float {
  0%   { transform: translateY(-10px) rotate(-3deg); }
  100% { transform: translateY(10px)  rotate(3deg); }
}