/* ============================================================
   VOO VCARD — MICRO-ANIMATIONS SYSTEM v1.0
   A shared animation library for all 33 templates.
   Usage: add data-animate="fade-up" (or slide-left, scale, etc.)
          to ANY element. It will animate when scrolled into view.
   ============================================================ */

/* ---------- Base (hidden until observed) ---------- */
[data-animate] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

/* ---------- Entrance animations ---------- */
[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-down"] {
  transform: translateY(-40px);
}

[data-animate="fade-left"] {
  transform: translateX(50px);
}

[data-animate="fade-right"] {
  transform: translateX(-50px);
}

[data-animate="scale"] {
  transform: scale(0.85);
}

[data-animate="scale-up"] {
  transform: scale(0.7) translateY(30px);
}

[data-animate="flip"] {
  transform: perspective(800px) rotateY(25deg);
}

[data-animate="zoom-in"] {
  transform: scale(0.5);
}

[data-animate="blur-in"] {
  filter: blur(12px);
  transform: scale(0.96);
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}

[data-animate="blur-in"].is-visible {
  filter: blur(0);
}

[data-animate="rotate-in"] {
  transform: rotate(-8deg) scale(0.9);
}

/* ---------- Stagger children ---------- */
[data-animate-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-animate-stagger].is-visible > *:nth-child(1)  { transition-delay: 0.05s; }
[data-animate-stagger].is-visible > *:nth-child(2)  { transition-delay: 0.10s; }
[data-animate-stagger].is-visible > *:nth-child(3)  { transition-delay: 0.15s; }
[data-animate-stagger].is-visible > *:nth-child(4)  { transition-delay: 0.20s; }
[data-animate-stagger].is-visible > *:nth-child(5)  { transition-delay: 0.25s; }
[data-animate-stagger].is-visible > *:nth-child(6)  { transition-delay: 0.30s; }
[data-animate-stagger].is-visible > *:nth-child(7)  { transition-delay: 0.35s; }
[data-animate-stagger].is-visible > *:nth-child(8)  { transition-delay: 0.40s; }
[data-animate-stagger].is-visible > *:nth-child(9)  { transition-delay: 0.45s; }
[data-animate-stagger].is-visible > *:nth-child(10) { transition-delay: 0.50s; }

[data-animate-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* ---------- Delay modifiers ---------- */
[data-animate-delay="100"] { transition-delay: 0.1s !important; }
[data-animate-delay="200"] { transition-delay: 0.2s !important; }
[data-animate-delay="300"] { transition-delay: 0.3s !important; }
[data-animate-delay="400"] { transition-delay: 0.4s !important; }
[data-animate-delay="500"] { transition-delay: 0.5s !important; }
[data-animate-delay="600"] { transition-delay: 0.6s !important; }
[data-animate-delay="700"] { transition-delay: 0.7s !important; }
[data-animate-delay="800"] { transition-delay: 0.8s !important; }

/* ---------- Duration modifiers ---------- */
[data-animate-duration="fast"]   { transition-duration: 0.4s !important; }
[data-animate-duration="slow"]   { transition-duration: 1.2s !important; }
[data-animate-duration="slower"] { transition-duration: 1.8s !important; }

/* ============================================================
   HOVER EFFECTS
   Usage: add class "hover-lift", "hover-glow", etc.
   ============================================================ */

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0, 0.12);
}

.hover-glow {
  transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 24px rgba(99, 102, 241, 0.35);
}

.hover-pulse {
  transition: transform 0.25s ease;
}
.hover-pulse:hover {
  animation: voo-pulse 0.6s ease;
}

.hover-tilt {
  transition: transform 0.35s ease;
  transform-style: preserve-3d;
  perspective: 600px;
}
.hover-tilt:hover {
  transform: perspective(600px) rotateX(4deg) rotateY(-4deg);
}

.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s ease;
}
.hover-shine:hover::after {
  left: 120%;
}

/* ---------- Typing cursor ---------- */
.typing-cursor::after {
  content: '|';
  animation: voo-blink 0.8s step-end infinite;
  margin-inline-start: 2px;
  color: inherit;
}

/* ---------- Counter animation shimmer ---------- */
.counter-animated {
  display: inline-block;
  min-width: 1.5em;
}

/* ---------- Skeleton loader ---------- */
.voo-skeleton {
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: voo-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
}

/* ---------- Floating animation (for profile pics) ---------- */
.voo-float {
  animation: voo-float 4s ease-in-out infinite;
}

/* ---------- Animated gradient border ---------- */
.voo-gradient-border {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.voo-gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    #6366f1, #8b5cf6, #ec4899, #06b6d4, #10b981, #6366f1
  );
  animation: voo-border-spin 4s linear infinite;
  z-index: -1;
}
.voo-gradient-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}

/* ---------- Glow text ---------- */
.voo-glow-text {
  text-shadow: 0 0 10px rgba(99, 102, 241, 0.5),
               0 0 30px rgba(99, 102, 241, 0.3),
               0 0 60px rgba(99, 102, 241, 0.15);
}

/* ---------- Parallax profile (subtle) ---------- */
.voo-parallax-img {
  transition: transform 0.15s ease-out;
  will-change: transform;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes voo-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

@keyframes voo-blink {
  50% { opacity: 0; }
}

@keyframes voo-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes voo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes voo-border-spin {
  0%   { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}

/* Fallback for browsers that don't support @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .voo-gradient-border::before {
    background: linear-gradient(135deg, #6366f1, #ec4899, #06b6d4);
  }
}

@property --border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ============================================================
   SECTION REVEAL — adds a nice section-level entrance
   ============================================================ */
.voo-section-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.voo-section-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   REDUCED MOTION — respect user preferences
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate-stagger] > *,
  .voo-section-reveal,
  .voo-float,
  .hover-lift,
  .hover-pulse,
  .hover-tilt,
  .hover-scale {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}