/* ============================================
   KORVYNEX - Animations Stylesheet
   ============================================ */

/* ---- Keyframes ---- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}
@keyframes shimmer {
  0%   { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}
@keyframes rotateIn {
  from { transform: rotate(-10deg) scale(0.8); opacity: 0; }
  to   { transform: rotate(0) scale(1); opacity: 1; }
}
@keyframes drawLine {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes counterUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) scale(1.02); }
  50%       { transform: translateY(-8px) scale(1.02); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ripple {
  0% { transform: scale(0.9); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-8px); }
  60%       { transform: translateY(-4px); }
}
@keyframes borderGrow {
  from { border-color: transparent; }
  to   { border-color: var(--color-forest); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Hero Animations ---- */
.hero-animate-1 { animation: fadeSlideLeft 0.8s ease 0.1s both; }
.hero-animate-2 { animation: fadeSlideLeft 0.8s ease 0.3s both; }
.hero-animate-3 { animation: fadeSlideLeft 0.8s ease 0.5s both; }
.hero-animate-4 { animation: fadeSlideLeft 0.8s ease 0.7s both; }
.hero-animate-5 { animation: fadeSlideLeft 0.8s ease 0.9s both; }

.hero-img-animate { animation: fadeSlideRight 1s ease 0.4s both; }

/* ---- Scroll Animations ---- */
.anim-fade-up     { opacity: 0; transform: translateY(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.anim-fade-left   { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.anim-fade-right  { opacity: 0; transform: translateX(40px); transition: opacity 0.7s ease, transform 0.7s ease; }
.anim-scale       { opacity: 0; transform: scale(0.9); transition: opacity 0.6s ease, transform 0.6s ease; }
.anim-fade        { opacity: 0; transition: opacity 0.8s ease; }

.anim-delay-1 { transition-delay: 0.1s !important; }
.anim-delay-2 { transition-delay: 0.2s !important; }
.anim-delay-3 { transition-delay: 0.3s !important; }
.anim-delay-4 { transition-delay: 0.4s !important; }
.anim-delay-5 { transition-delay: 0.5s !important; }
.anim-delay-6 { transition-delay: 0.6s !important; }

.anim-fade-up.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-scale.is-visible,
.anim-fade.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Float Effect ---- */
.float-element { animation: float 4s ease-in-out infinite; }

/* ---- Hover Effects ---- */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(44,95,46,0.15); }

.hover-glow:hover { box-shadow: 0 0 20px rgba(201,168,76,0.35); }

/* ---- Icon Animation ---- */
.icon-bounce:hover i { animation: iconBounce 0.5s ease; }

/* ---- Gradient CTA ---- */
.gradient-cta {
  background: linear-gradient(135deg, var(--color-forest-dark), #1e5c21, #2c5f2e);
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
}

/* ---- Underline Animate ---- */
.animate-underline { position: relative; }
.animate-underline::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 2px;
  background: var(--color-gold);
  transition: width 0.4s ease;
}
.animate-underline:hover::after { width: 100%; }

/* ---- Shimmer Skeleton ---- */
.shimmer {
  background: linear-gradient(to right, #f0ede8 8%, #e8e4dc 18%, #f0ede8 33%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* ---- Ripple button ---- */
.btn-ripple {
  position: relative;
  overflow: hidden;
}
.btn-ripple::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  width: 100%; padding-bottom: 100%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255,255,255,0.25);
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.btn-ripple:active::after {
  transform: translate(-50%, -50%) scale(2);
  opacity: 1;
  transition: none;
}

/* ---- Counter reveal ---- */
.counter-item { animation: counterUp 0.7s ease both; }

/* ---- Page transition ---- */
.page-fade-in { animation: fadeSlideUp 0.5s ease both; }

/* ---- Organic blob decoration ---- */
.blob-decoration {
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  opacity: 0.06;
  background: var(--color-forest);
  pointer-events: none;
  animation: float 8s ease-in-out infinite;
}

/* ---- Progress bar ---- */
.skill-bar { background: var(--color-border); border-radius: 50px; overflow: hidden; height: 8px; }
.skill-bar-fill {
  height: 100%;
  background: linear-gradient(to right, var(--color-forest), var(--color-forest-light));
  border-radius: 50px;
  width: 0;
  transition: width 1.2s ease;
}

/* ---- Testimonial Carousel ---- */
.testimonial-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonial-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-forest);
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}
.testimonial-dot.active {
  background: var(--color-forest);
  transform: scale(1.2);
}
.testimonial-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: #fff;
  color: var(--color-forest);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
.testimonial-nav-btn:hover {
  background: var(--color-forest);
  border-color: var(--color-forest);
  color: #fff;
}

/* ---- Green dots bg pattern ---- */
.dots-pattern {
  background-image: radial-gradient(circle, rgba(44,95,46,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ---- Golden accent line ---- */
.gold-line {
  width: 60px;
  height: 3px;
  background: var(--color-gold);
  border-radius: 2px;
  margin-bottom: 1.5rem;
}
.gold-line.centered { margin: 0 auto 1.5rem; }

/* ---- Service filter animation ---- */
.service-panel {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.service-panel.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  position: absolute;
}

/* ---- Nav scroll progress ---- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--color-gold);
  z-index: 9998;
  transition: width 0.1s linear;
}