.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
} .stagger-children .animate-on-scroll:nth-child(1) { transition-delay: 0s; }
.stagger-children .animate-on-scroll:nth-child(2) { transition-delay: 0.1s; }
.stagger-children .animate-on-scroll:nth-child(3) { transition-delay: 0.2s; }
.stagger-children .animate-on-scroll:nth-child(4) { transition-delay: 0.3s; } .animate-fade {
opacity: 0;
transition: opacity 0.8s ease;
}
.animate-fade.is-visible {
opacity: 1;
} .animate-slide-left {
opacity: 0;
transform: translateX(-30px);
transition: opacity 0.7s ease, transform 0.7s ease;
}
.animate-slide-left.is-visible {
opacity: 1;
transform: translateX(0);
} .animate-scale {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-scale.is-visible {
opacity: 1;
transform: scale(1);
} .hero__title .word {
display: inline-block;
overflow: hidden;
}
.hero__title .word-inner {
display: inline-block;
transform: translateY(110%);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero__title.is-revealed .word-inner {
transform: translateY(0);
}
.hero__title .word:nth-child(1) .word-inner { transition-delay: 0.1s; }
.hero__title .word:nth-child(2) .word-inner { transition-delay: 0.15s; }
.hero__title .word:nth-child(3) .word-inner { transition-delay: 0.2s; }
.hero__title .word:nth-child(4) .word-inner { transition-delay: 0.25s; }
.hero__title .word:nth-child(5) .word-inner { transition-delay: 0.3s; }
.hero__title .word:nth-child(6) .word-inner { transition-delay: 0.35s; }
.hero__title .word:nth-child(7) .word-inner { transition-delay: 0.4s; }
.hero__title .word:nth-child(8) .word-inner { transition-delay: 0.45s; } .count-up {
font-variant-numeric: tabular-nums;
} .section-divider {
display: flex;
justify-content: center;
padding: var(--space-lg) 0;
}
.section-divider__cube {
width: 12px;
height: 12px;
border: 1.5px solid var(--color-primary);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-divider__cube.is-visible {
transform: rotate(135deg);
}