@keyframes zw-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zw-rise-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes zw-scroll-pulse {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50% { transform: translateY(4px); opacity: 1; }
}

@keyframes zw-underline-slide {
    from { width: 0; }
    to { width: 100%; }
}

.animate-fade-in { animation: zw-fade-in var(--duration-slow) var(--ease-out) both; }
.animate-rise-in { animation: zw-rise-in var(--duration-slow) var(--ease-out) both; }

.scroll-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--text-accent);
}

.scroll-indicator__label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11.17px;
    line-height: 1.06;
    letter-spacing: 1.34px;
    text-transform: uppercase;
}

.scroll-indicator__arrows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
    height: 14px;
}

.scroll-indicator__arrows .icon {
    width: 10.5px;
    height: 6.4px;
    animation: zw-scroll-pulse 1.8s var(--ease-in-out) infinite;
}
.scroll-indicator__arrows .icon:nth-child(2) { animation-delay: 0.2s; }
.scroll-indicator__arrows .icon:nth-child(3) { animation-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}