.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.no-js .reveal { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
        .reveal { opacity: 1; transform: none; transition: none; animation: scrollReveal linear both; animation-timeline: view(); animation-range: entry 10% cover 34%; }
        @keyframes scrollReveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
        .section-title { animation: titleDrift linear both; animation-timeline: view(); animation-range: entry 20% cover 55%; }
        @keyframes titleDrift { from { transform: translateY(40px); } to { transform: translateY(0); } }
        .about-media img, .bento-media { animation: mediaDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
        @keyframes mediaDrift { from { transform: translateY(-2%) scale(1.03); } to { transform: translateY(2%) scale(1.03); } }
    }
}

.catalog-row { opacity: 0; transform: translateY(16px); animation: rowIn .7s var(--ease) forwards; }
.catalog-row:nth-child(1) { animation-delay: .02s; }
.catalog-row:nth-child(2) { animation-delay: .07s; }
.catalog-row:nth-child(3) { animation-delay: .12s; }
.catalog-row:nth-child(4) { animation-delay: .17s; }
.catalog-row:nth-child(5) { animation-delay: .22s; }
.catalog-row:nth-child(6) { animation-delay: .27s; }
@keyframes rowIn { to { opacity: 1; transform: translateY(0); } }

.bento-card { opacity: 0; transform: translateY(20px); animation: bentoIn .7s var(--ease) forwards; }
.bento-card:nth-child(1) { animation-delay: .05s; }
.bento-card:nth-child(2) { animation-delay: .1s; }
.bento-card:nth-child(3) { animation-delay: .15s; }
.bento-card:nth-child(4) { animation-delay: .2s; }
.bento-card:nth-child(5) { animation-delay: .25s; }
.bento-card:nth-child(6) { animation-delay: .3s; }
@keyframes bentoIn { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
    .hero-slide { transition: opacity .3s ease; transform: none; }
    .hero-title .word { opacity: 1; transform: none; }
    .reveal, .catalog-row, .bento-card { opacity: 1; transform: none; }
    .ticker-track, .mini-ticker-track { animation: none; }
}