/* ============================================
   Vylentro — Animations
   vy- prefix on all custom classes
   ============================================ */

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

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

@keyframes vy-slideLeft {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes vy-slideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes vy-pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(122,158,142,0.4); }
  70% { transform: scale(1); box-shadow: 0 0 0 12px rgba(122,158,142,0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(122,158,142,0); }
}

@keyframes vy-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

@keyframes vy-blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(20px, -15px) scale(1.04); }
  66% { transform: translate(-10px, 10px) scale(0.97); }
}

@keyframes vy-count-up {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============ SCROLL ANIMATIONS ============ */
.vy-animate {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}

.vy-animate.vy-animate-from-left {
  transform: translateX(-25px);
}

.vy-animate.vy-animate-from-right {
  transform: translateX(25px);
}

.vy-animate.vy-animate-scale {
  transform: scale(0.92);
}

.vy-animate.vy-visible {
  opacity: 1;
  transform: none;
}

/* Staggered delays */
.vy-stagger-1 { transition-delay: 0.08s; }
.vy-stagger-2 { transition-delay: 0.16s; }
.vy-stagger-3 { transition-delay: 0.24s; }
.vy-stagger-4 { transition-delay: 0.32s; }

/* ============ HERO ANIMATIONS ============ */
.vy-hero-text .vy-hero-badge {
  animation: vy-slideDown 0.6s ease 0.1s both;
}

@keyframes vy-slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.vy-hero-text h1 {
  animation: vy-slideUp 0.7s ease 0.25s both;
}

.vy-hero-description {
  animation: vy-slideUp 0.7s ease 0.4s both;
}

.vy-hero-actions {
  animation: vy-slideUp 0.7s ease 0.55s both;
}

.vy-hero-trust {
  animation: vy-fadeIn 0.8s ease 0.7s both;
}

.vy-hero-visual {
  animation: vy-slideLeft 0.8s ease 0.3s both;
}

.vy-hero-image-float {
  animation: vy-float 4s ease-in-out infinite;
}

.vy-hero-float-1 { animation-delay: 0s; }
.vy-hero-float-2 { animation-delay: 2s; }

.vy-hero-stat-card {
  animation: vy-scaleIn 0.6s ease 0.8s both, vy-float 5s ease-in-out 1.5s infinite;
}

/* ============ SHAPE ANIMATIONS ============ */
.vy-shape-blob-1 {
  animation: vy-blob-drift 12s ease-in-out infinite;
}

.vy-shape-blob-2 {
  animation: vy-blob-drift 15s ease-in-out 3s infinite;
}

.vy-shape-blob-3 {
  animation: vy-blob-drift 18s ease-in-out 6s infinite;
}

/* ============ HOVER MICRO-INTERACTIONS ============ */
.vy-service-card {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s ease;
}

.vy-service-card:hover .vy-service-icon-wrap {
  transform: scale(1.08) rotate(3deg);
  transition: transform 0.3s ease;
}

.vy-btn-primary {
  position: relative;
  overflow: hidden;
}

.vy-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 0.5s ease;
}

.vy-btn-primary:hover::before { left: 100%; }

/* ============ TEAM CARD HOVER ============ */
.vy-team-card .vy-team-photo {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.vy-team-card:hover .vy-team-photo {
  transform: scale(1.05);
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

/* ============ NAV LINK HOVER ============ */
.vy-nav-links a {
  position: relative;
  overflow: hidden;
}

/* ============ STAT CARD COUNTER ============ */
.vy-stat-number {
  display: inline-block;
}

/* ============ PAGE TRANSITIONS ============ */
.vy-page-enter {
  animation: vy-fadeIn 0.4s ease both;
}

/* ============ QUOTE FADE ============ */
.vy-quote-item {
  animation-duration: 0.5s;
}

/* ============ LOADING SHIMMER ============ */
.vy-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 400px 100%;
  animation: vy-shimmer 1.5s infinite;
  border-radius: 6px;
}

/* ============ PULSE BADGE ============ */
.vy-pulse-badge {
  animation: vy-pulse-ring 2s ease infinite;
}

/* ============ PROGRESS BAR ============ */
.vy-progress-bar {
  height: 4px;
  background: var(--vy-border);
  border-radius: 2px;
  overflow: hidden;
}

.vy-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--vy-sage), var(--vy-blue));
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.vy-progress-fill.vy-animated { transform: scaleX(1); }

/* ============ SMOOTH IMAGE LOAD ============ */
img {
  transition: opacity 0.3s ease;
}

img[loading="lazy"] { opacity: 0; }
img.vy-loaded { opacity: 1; }

/* ============ TOOLTIP ============ */
.vy-tooltip-wrap { position: relative; display: inline-block; }

.vy-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--vy-text-dark);
  color: white;
  font-family: var(--vy-font-ui);
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.vy-tooltip-wrap:hover .vy-tooltip { opacity: 1; }

/* ============ SKIP LINK ============ */
.vy-skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--vy-sage-dark);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--vy-radius);
  z-index: 9999;
  font-family: var(--vy-font-ui);
  font-weight: 600;
}

.vy-skip-link:focus { top: 1rem; }

/* ============ ACCESSIBILITY ============ */
:focus-visible {
  outline: 2px solid var(--vy-sage);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .vy-animate {
    opacity: 1;
    transform: none;
  }
}