/* ht_reveal.css — drop-in scroll animations */
/* Usage:
1) Include this file in your :
2) Include ht_reveal.js before :
3) Add classes to any element you want animated:
- .reveal-up → slides up into place
- .reveal-pop → pops (scales) into place
Optional:
- .reveal-repeat → re-animate each time it re-enters the viewport
- Inline CSS variables for fine-tuning per-element:
style="--reveal-delay:200ms; --reveal-translate:36px; --reveal-ease:cubic-bezier(.2,.7,.2,1)"
*/
:root{
--reveal-ease: cubic-bezier(.2,.7,.2,1);
--reveal-translate: 24px; /* default slide distance for .reveal-up */
}
/* Initial hidden states */
.reveal-up,
.reveal-pop{
opacity: 0;
will-change: transform, opacity;
transition:
transform 600ms var(--reveal-ease),
opacity 600ms var(--reveal-ease);
transition-delay: var(--reveal-delay, 0ms);
}
/* Slide up */
.reveal-up{
transform: translateY(var(--reveal-translate));
}
.reveal-up.is-visible{
transform: translateY(0);
opacity: 1;
}
/* Pop (scale) */
.reveal-pop{
transform: scale(.94);
}
.reveal-pop.is-visible{
transform: scale(1);
opacity: 1;
}
/* Handy delay utilities (override with inline --reveal-delay if desired) */
.delay-0 { --reveal-delay: 0ms; }
.delay-50 { --reveal-delay: 50ms; }
.delay-100 { --reveal-delay: 100ms; }
.delay-150 { --reveal-delay: 150ms; }
.delay-200 { --reveal-delay: 200ms; }
.delay-300 { --reveal-delay: 300ms; }
.delay-400 { --reveal-delay: 400ms; }
.delay-500 { --reveal-delay: 500ms; }
/* Stagger helper for simple lists (first 8 children) */
.stagger-children > *:nth-child(1) { --reveal-delay: 0ms; }
.stagger-children > *:nth-child(2) { --reveal-delay: 80ms; }
.stagger-children > *:nth-child(3) { --reveal-delay: 160ms; }
.stagger-children > *:nth-child(4) { --reveal-delay: 240ms; }
.stagger-children > *:nth-child(5) { --reveal-delay: 320ms; }
.stagger-children > *:nth-child(6) { --reveal-delay: 400ms; }
.stagger-children > *:nth-child(7) { --reveal-delay: 480ms; }
.stagger-children > *:nth-child(8) { --reveal-delay: 560ms; }
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
.reveal-up,
.reveal-pop{
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}