/* Ink & Paper reveal animations */

html { overflow-x: clip; }

[data-animate] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
[data-animate].animated {
    opacity: 1;
    transform: translateY(0);
}
[data-animate="fade-in"] { transform: none; }
[data-animate="slide-up"] { transform: translateY(30px); }
[data-animate="slide-down"] { transform: translateY(-30px); }
[data-animate="slide-right"] { transform: translateX(-30px); }
[data-animate="slide-left"] { transform: translateX(30px); }

[data-animate="slide-right"].animated,
[data-animate="slide-left"].animated { transform: translateX(0); }

[data-delay="100"] { transition-delay: 0.06s; }
[data-delay="200"] { transition-delay: 0.12s; }
[data-delay="300"] { transition-delay: 0.18s; }
[data-delay="400"] { transition-delay: 0.24s; }
[data-delay="500"] { transition-delay: 0.30s; }
[data-delay="600"] { transition-delay: 0.36s; }
[data-delay="700"] { transition-delay: 0.42s; }
[data-delay="800"] { transition-delay: 0.48s; }

.stagger-animation {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.stagger-animation.animated { opacity: 1; transform: translateY(0); }
.stagger-animation:nth-child(1) { transition-delay: 0s; }
.stagger-animation:nth-child(2) { transition-delay: 0.06s; }
.stagger-animation:nth-child(3) { transition-delay: 0.12s; }
.stagger-animation:nth-child(4) { transition-delay: 0.18s; }
.stagger-animation:nth-child(5) { transition-delay: 0.24s; }
.stagger-animation:nth-child(6) { transition-delay: 0.30s; }
.stagger-animation:nth-child(7) { transition-delay: 0.36s; }
.stagger-animation:nth-child(8) { transition-delay: 0.42s; }
.stagger-animation:nth-child(9) { transition-delay: 0.48s; }
.stagger-animation:nth-child(10) { transition-delay: 0.54s; }
.stagger-animation:nth-child(11) { transition-delay: 0.60s; }
.stagger-animation:nth-child(12) { transition-delay: 0.66s; }

@keyframes fade-below {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

.hover-lift { transition: transform var(--t-med), box-shadow var(--t-med); }
.hover-lift:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(27, 30, 35, 0.1); }

.counter-animation { font-variant-numeric: tabular-nums; }

@media (max-width: 1024px) {
    [data-animate="slide-left"],
    [data-animate="slide-right"] { transform: translateY(26px); }
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] { opacity: 1 !important; transform: none !important; }
    .stagger-animation { opacity: 1 !important; transform: none !important; }
}