/* ============================================
   Enhanced Inner Animations (Icon + Text)
   ============================================ */

/* Common styles for containers with icon+text animation */
.animate-inner .icon,
.animate-inner i,
.hero-badge .icon,
.hero-info-item .icon,
.about-feature .icon {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.animate-inner span,
.animate-inner p,
.animate-inner h4,
.hero-badge span:not(.icon),
.hero-info-item span:not(.icon),
.about-feature .about-feature-text {
    opacity: 0;
    transform: translateX(15px);
    transition: all 0.5s ease-out;
}

/* Trigger states when parent is visible */
.hero-badge.visible .icon,
.hero-info-item.visible .icon,
.about-feature.visible .icon {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.2s;
}

.hero-badge.visible span:not(.icon),
.hero-info-item.visible span:not(.icon),
.about-feature.visible .about-feature-text {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.4s;
}

/* Specific delay adjustments for hero items to stagger them */
.hero-info-item:nth-child(2).visible .icon {
    transition-delay: 0.3s;
}

.hero-info-item:nth-child(2).visible span {
    transition-delay: 0.5s;
}

/* Ensure the containers themselves are visible but let children handle the motion */
/* Note: The fade-in class on parent handles the overall opacity 0->1 */