/* ── SCROLL ANIMATIONS ────────────────────────────────────────── Drop this file in and link it in after style.css: ─────────────────────────────────────────────────────────────── */ /* ── Base hidden states ── */ .reveal { opacity: 0; transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.from-up { transform: translateY(36px); } .reveal.from-left { transform: translateX(-50px); } .reveal.from-right { transform: translateX(50px); } .reveal.scale-in { transform: scale(0.92); } /* ── Visible state (added by JS) ── */ .reveal.visible { opacity: 1; transform: none; } /* ── Stagger delays for child items ── */ .reveal-stagger > *:nth-child(1) { transition-delay: 0s; } .reveal-stagger > *:nth-child(2) { transition-delay: 0.1s; } .reveal-stagger > *:nth-child(3) { transition-delay: 0.2s; } .reveal-stagger > *:nth-child(4) { transition-delay: 0.3s; } .reveal-stagger > *:nth-child(5) { transition-delay: 0.4s; } .reveal-stagger > *:nth-child(6) { transition-delay: 0.5s; } .reveal-stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal-stagger.visible > * { opacity: 1; transform: none; } /* ── Tokenomics bar fill animation ── */ .tok-bar-fill { width: 0 !important; transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); } .tok-bar-fill.bar-animate { width: var(--bar-target) !important; } /* ── Divider draw animation ── */ .divider { width: 0 !important; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important; /* override the transform centering during animation */ left: 50%; transform: translateX(-50%); } .divider.bar-animate { width: 60px !important; }