/* Enhanced animations inspired by XHOXA site — noticeable motion */

/* Stronger scroll reveals */
.reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.96);
    transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }

/* Floating orbit chips around hero */
.orbit-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255,255,255,0.95);
    border: 1px solid rgba(24, 168, 107, 0.25);
    border-radius: 999px;
    box-shadow: 0 12px 30px rgba(19, 33, 61, 0.1);
    font-size: 13px;
    font-weight: 700;
    color: #13213d;
    white-space: nowrap;
    z-index: 5;
    animation: chipFloat 4s ease-in-out infinite;
}
.orbit-chip i { color: #18a86b; font-size: 16px; }
.chip-1 { top: 20px; left: 10px; animation-delay: 0s; }
.chip-2 { top: 20px; right: 10px; animation-delay: -1s; }
.chip-3 { bottom: 30px; left: 10px; animation-delay: -2s; }
.chip-4 { bottom: 30px; right: 10px; animation-delay: -1.5s; }

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

/* Marquee / index strip */
.index-strip {
    background: #13213d;
    color: white;
    padding: 0;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.index-track {
    display: flex;
    gap: 0;
    animation: marquee 28s linear infinite;
    width: max-content;
}
.index-track:hover { animation-play-state: paused; }
.index-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 32px;
    color: rgba(255,255,255,0.6);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    border-right: 1px solid rgba(255,255,255,0.08);
}
.index-item span { color: #91f2be; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Card hover lifts */
.feature-card,
.livestock-card,
.how-step,
.faq-item {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
}
.feature-card:hover,
.livestock-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 60px rgba(19, 33, 61, 0.1);
}
.how-step:hover .how-step-icon {
    transform: translateY(-8px) rotate(8deg) scale(1.08);
}

/* Magnetic-style button feel (enhanced) */
.btn-lazagro,
.btn-outline-lazagro,
.cta-primary,
.cta-secondary {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.3s ease,
                background 0.25s;
}
.btn-lazagro:hover,
.cta-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(50, 104, 245, 0.28);
}

/* Hero visual extra motion */
.hero-visual {
    position: relative;
}
.phone-mockup {
    animation: phoneFloat 5.5s ease-in-out infinite;
}
@keyframes phoneFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-16px) rotate(-1deg); }
}

/* Soft energy lines in hero */
.hero::before,
.hero::after {
    animation: orbitSpin 50s linear infinite;
}

/* Make FAQ answers clearly visible when open */
.faq-item.open .faq-answer {
    grid-template-rows: 1fr !important;
}
.faq-answer {
    transition: grid-template-rows 0.35s ease;
}
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #18a86b, #3268f5);
    z-index: 2000;
    width: 0%;
    transition: width 0.1s linear;
}

/* Make FAQ answers clearly visible when open */
.faq-item.open .faq-answer {
    grid-template-rows: 1fr !important;
}
.faq-answer {
    transition: grid-template-rows 0.35s ease;
}


/* Desktop reveal reliability */
@media (min-width: 992px) {
  .reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
  .reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Logo image in brand */
.brand img {
  width: 43px;
  height: 43px;
  border-radius: 14px;
  object-fit: cover;
  display: block;
}


/* Desktop: ensure reveal transition is visible */
@media (min-width: 992px) {
  .reveal {
    opacity: 0 !important;
    transform: translateY(40px) scale(0.97) !important;
    transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1) !important;
  }
  .reveal.visible {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
  }
}