/* ==========================================
   АНИМАЦИЯ ПОЯВЛЕНИЯ ПРИ ПРОКРУТКЕ
   ========================================== */
.reveal-on-scroll,
.bento-card,
.exploded-pin,
.post-card {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1),
                transform 1.4s cubic-bezier(0.25, 1, 0.5, 1),
                border-color var(--transition-base);
    will-change: opacity, transform;
}

@media (max-width: 860px) {
    .reveal-on-scroll,
    .bento-card,
    .exploded-pin,
    .spec-card,
    .preorder-card,
    .review-card,
    .post-card {
        transform: translateY(16px);
        transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

.reveal-on-scroll.is-revealed,
.bento-card.is-revealed,
.exploded-pin.is-revealed,
.post-card.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.bento-grid .bento-card:nth-child(2) { transition-delay: 0.15s; }
.bento-grid .bento-card:nth-child(3) { transition-delay: 0.3s; }

.exploded-pin.pin-1 { transition-delay: 0.1s; }
.exploded-pin.pin-2 { transition-delay: 0.22s; }
.exploded-pin.pin-3 { transition-delay: 0.34s; }
.exploded-pin.pin-4 { transition-delay: 0.46s; }
.exploded-pin.pin-5 { transition-delay: 0.58s; }

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll,
    .bento-card,
    .exploded-pin,
    .post-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}