/* ============================================
   ATHANELEO — Animations Stylesheet
   ============================================ */

/* ===== KEYFRAMES ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp2 {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 0.6; transform: translateY(0); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes morph {
  0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 50%; }
  33% { border-radius: 30% 70% 40% 60% / 60% 30% 70% 40%; }
  66% { border-radius: 50% 50% 60% 40% / 40% 60% 30% 70%; }
}
@keyframes scrollLine {
  0% { left: -100%; }
  100% { left: 100%; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.3); }
  50% { box-shadow: 0 4px 30px rgba(37,211,102,0.6); }
}
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ===== HERO ANIMATIONS ===== */
.hero-label {
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.3s;
}
.hero-title {
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.6s;
}
.hero-subtitle {
  opacity: 0;
  animation: fadeUp2 1s ease forwards 0.9s;
}
.hero-btns {
  opacity: 0;
  animation: fadeUp 1s ease forwards 1.2s;
}
.hero-scroll {
  opacity: 0;
  animation: fadeUp 1s ease forwards 1.5s;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ===== MORPHING ORB (Hero) ===== */
.hero-orb {
  animation: morph 8s ease-in-out infinite;
}
.hero-orb::after {
  animation: morph 6s ease-in-out infinite reverse;
}

/* ===== SCROLL LINE ===== */
.scroll-line::after {
  animation: scrollLine 2s ease-in-out infinite;
}

/* ===== WHATSAPP PULSE ===== */
.whatsapp-btn {
  animation: pulse 3s ease-in-out infinite;
}

/* ===== HOVER: Image border ===== */
.story-image-wrap:hover .story-img-border {
  bottom: -14px;
  right: -14px;
}


/* ===== HOVER: Highlight items ===== */
.highlight-item::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 0;
  background: rgba(201,168,76,0.03);
  transition: height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.highlight-item:hover::before { height: 100%; }
.highlight-item:hover .highlight-icon { transform: scale(1.1); }

/* ===== HOVER: Product cards ===== */
.product-card:hover { transform: translateY(-8px); }
.product-card:hover::before { opacity: 1; }
.product-card:hover .product-img { opacity: 0.5; }
.product-card:hover .product-overlay { opacity: 1; }

/* ===== HOVER: Testimonial cards ===== */
.testimonial-card:hover {
  border-color: rgba(201,168,76,0.4);
  transform: translateY(-6px);
}

/* ===== HOVER: Stat items ===== */
.stat-item:hover { background: rgba(201,168,76,0.03); }

/* ===== HOVER: Country tags ===== */
.country-tag:hover { background: var(--gold); color: var(--black); }

/* ===== HOVER: Footer links ===== */
.footer-links a:hover { opacity: 1; color: var(--gold); padding-left: 8px; }
.footer-socials a:hover { opacity: 1; color: var(--gold); }

/* ===== HOVER: Nav items ===== */
.nav-item:hover { opacity: 1; color: var(--gold); }
.nav-item:hover::after { width: 100%; }

/* ===== HOVER: Dropdown ===== */
.dropdown-menu a:hover { opacity: 1; color: var(--gold); padding-left: 32px; }

/* ===== PAGE TRANSITIONS ===== */
body {
  animation: pageFadeIn 0.5s ease forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}