/* ===================================================
   VORLICA — Animations
   vr-animations.css
   =================================================== */

/* ─── KEYFRAMES ──────────────────────────────────── */
@keyframes vr-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes vr-fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vr-fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vr-fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes vr-fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes vr-scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes vr-slideInUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

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

@keyframes vr-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}

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

@keyframes vr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes vr-countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes vr-heroEntrance {
  0%   { opacity: 0; transform: translateY(60px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes vr-badgePop {
  0%   { opacity: 0; transform: scale(0.6) translateY(20px); }
  70%  { transform: scale(1.05) translateY(-3px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes vr-dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,111,160, 0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(59,111,160, 0); }
}

/* ─── SCROLL-TRIGGERED CLASSES ───────────────────── */
.vr-animate {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.vr-animate.vr-anim-up    { transform: translateY(40px); }
.vr-animate.vr-anim-left  { transform: translateX(-40px); }
.vr-animate.vr-anim-right { transform: translateX(40px); }
.vr-animate.vr-anim-scale { transform: scale(0.88); }
.vr-animate.vr-anim-fade  { transform: none; }

.vr-animate.vr-animated {
  opacity: 1;
  transform: none !important;
}

/* Delay utilities */
.vr-delay-1 { transition-delay: 0.1s; }
.vr-delay-2 { transition-delay: 0.2s; }
.vr-delay-3 { transition-delay: 0.3s; }
.vr-delay-4 { transition-delay: 0.4s; }
.vr-delay-5 { transition-delay: 0.5s; }
.vr-delay-6 { transition-delay: 0.6s; }

/* ─── HERO ENTRANCE ─────────────────────────────── */
.vr-hero-tag-anim {
  animation: vr-fadeInDown 0.7s ease 0.2s both;
}
.vr-hero-h1-anim {
  animation: vr-heroEntrance 0.8s ease 0.4s both;
}
.vr-hero-desc-anim {
  animation: vr-heroEntrance 0.8s ease 0.6s both;
}
.vr-hero-btns-anim {
  animation: vr-heroEntrance 0.8s ease 0.75s both;
}
.vr-hero-img-anim {
  animation: vr-fadeInRight 0.9s ease 0.5s both;
}
.vr-hero-badge-anim {
  animation: vr-badgePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both;
}

/* ─── FLOAT ANIMATION ────────────────────────────── */
.vr-float { animation: vr-float 5s ease-in-out infinite; }
.vr-float-slow { animation: vr-float 7s ease-in-out infinite; }

/* ─── STAT COUNTER ANIMATION ─────────────────────── */
.vr-stat-animated {
  animation: vr-countUp 0.5s ease both;
}

/* ─── DOTS PULSE ─────────────────────────────────── */
.vr-timeline-dot.active {
  animation: vr-dotPulse 2s ease-in-out infinite;
}

/* ─── LOADING SHIMMER ────────────────────────────── */
.vr-shimmer {
  background: linear-gradient(
    90deg,
    var(--vr-cream) 0%,
    var(--vr-sand) 50%,
    var(--vr-cream) 100%
  );
  background-size: 200% auto;
  animation: vr-shimmer 1.5s linear infinite;
}

/* ─── HOVER LIFT ─────────────────────────────────── */
.vr-hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vr-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 50px rgba(26, 45, 74, 0.14);
}

/* ─── LINK UNDERLINE ANIMATION ───────────────────── */
.vr-anim-link {
  position: relative;
  display: inline-block;
}
.vr-anim-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}
.vr-anim-link:hover::after { width: 100%; }

/* ─── SECTION DIVIDER WAVES ──────────────────────── */
.vr-wave-divider {
  overflow: hidden;
  line-height: 0;
  margin-bottom: -1px;
}
.vr-wave-divider svg { display: block; }

/* ─── PAGE TRANSITION ────────────────────────────── */
.vr-page-enter {
  animation: vr-fadeIn 0.4s ease both;
}

/* ─── REDUCE MOTION ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .vr-animate,
  .vr-float,
  .vr-float-slow,
  *[class*="vr-anim"],
  *[style*="animation"] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}