.scroll-progress { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg,#ff6b35,#f43f5e,#7c3aed); box-shadow: 0 0 16px rgba(244,63,94,.4); transform: scaleX(0); transform-origin: left; pointer-events: none; will-change: transform; }
.cursor-ring { position: fixed; z-index: 999; left: 0; top: 0; width: 28px; height: 28px; border: 1px solid rgba(240,82,63,.52); border-radius: 50%; background: rgba(255,255,255,.04); box-shadow: 0 0 24px rgba(244,63,94,.12); opacity: 0; transform: translate3d(-100px,-100px,0) translate(-50%,-50%); transition: width .35s var(--ease-out), height .35s var(--ease-out), opacity .25s ease, background .35s ease, border-color .35s ease; pointer-events: none; backdrop-filter: blur(1px); }
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-hovering { width: 48px; height: 48px; border-color: rgba(240,82,63,.24); background: rgba(244,63,94,.07); }

.reveal { opacity: 1; transform: none; transition: opacity .9s var(--ease-soft), transform .9s var(--ease-out), filter .9s var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
.reveal.will-reveal { opacity: 0; transform: translateY(34px) scale(.985); filter: blur(8px); }
.reveal.will-reveal.is-visible { opacity: 1; transform: none; filter: none; }