/* =====================================================================
   Socivio — scroll experience (scrollbar, progress, reveal, parallax)
   ===================================================================== */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* gradient scrollbar (Chrome / Edge / Safari) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { border: 3px solid var(--bg); border-radius: 12px; background: linear-gradient(180deg, #22d3ee, #6366f1 50%, #d946ef); background-clip: padding-box; min-height: 60px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #06b6d4, #4f46e5 50%, #c026d3); background-clip: padding-box; }
@supports (-moz-appearance: none) { html { scrollbar-width: thin; scrollbar-color: #6366f1 var(--bg); } }

/* reading-progress bar along the very top */
.scroll-progress { position: fixed; z-index: 1200; left: 0; top: 0; width: 100%; height: 4px; transform: scaleX(var(--sp, 0)); transform-origin: left; pointer-events: none;
    background: linear-gradient(90deg, #22d3ee, #6366f1, #d946ef, #f59e0b); box-shadow: 0 0 14px rgba(99, 102, 241, .7); }
.scroll-progress::after { content: ''; position: absolute; right: -6px; top: -3px; width: 12px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 4px rgba(217, 70, 239, .8); }

/* floating back-to-top with progress ring */
.scroll-top { position: fixed; z-index: 1150; right: 26px; bottom: 26px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--acc1);
    background: var(--card); box-shadow: 0 14px 34px rgba(79, 70, 229, .3), 0 2px 8px rgba(15, 23, 42, .12); opacity: 0; visibility: hidden; transform: translateY(20px) scale(.85); transition: opacity .3s, transform .3s cubic-bezier(.2, .8, .2, 1.3), visibility .3s, box-shadow .2s; }
.scroll-top.show { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 20px 42px rgba(79, 70, 229, .45); }
.scroll-top svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-top .ring-bg { fill: none; stroke: var(--border); stroke-width: 3; }
.scroll-top .ring-fg { fill: none; stroke: url(#stGrad); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--sp, 0))); }
.scroll-top i { position: relative; font-size: 1.25rem; transition: transform .25s; } .scroll-top:hover i { transform: translateY(-3px); }

/* reveal variants + stagger (classes are removed again after the animation, so hover effects stay snappy) */
.reveal { will-change: opacity, transform; }
.reveal.from-left { transform: translateX(-46px); } .reveal.from-right { transform: translateX(46px); } .reveal.zoom { transform: scale(.92); } .reveal.from-down { transform: translateY(-24px); }
.reveal.in, .reveal.from-left.in, .reveal.from-right.in, .reveal.zoom.in, .reveal.from-down.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .06s; } .reveal.d2 { transition-delay: .13s; } .reveal.d3 { transition-delay: .2s; } .reveal.d4 { transition-delay: .27s; } .reveal.d5 { transition-delay: .34s; } .reveal.d6 { transition-delay: .41s; }
.reveal.slow { transition-duration: .9s; }

/* light parallax in the hero (variable --sy is set while scrolling) */
.l-hero .hero-visual { transform: translate3d(0, calc(var(--sy, 0) * -.07px), 0); will-change: transform; }
.l-hero .col-lg-6:first-child { opacity: max(.2, calc(1 - var(--sy, 0) / 850)); transform: translate3d(0, calc(var(--sy, 0) * .1px), 0); }
.page-hero .page-art, .page-hero .chat-card { translate: 0 calc(var(--sy, 0) * -.05px); }
.l-hero .blob { translate: 0 calc(var(--sy, 0) * .12px); }

/* header gets a soft shadow line once the page is scrolled */
.l-nav.scrolled { box-shadow: 0 10px 40px rgba(15, 23, 42, .1); }

@media (max-width: 767px) {
    .scroll-top { right: 16px; bottom: 16px; width: 50px; height: 50px; }
    .reveal.from-left, .reveal.from-right { transform: translateY(30px); }
    .l-hero .col-lg-6:first-child { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .reveal.from-left, .reveal.from-right, .reveal.zoom, .reveal.from-down { opacity: 1; transform: none; transition: none; }
    .l-hero .hero-visual, .l-hero .col-lg-6:first-child, .page-hero .page-art, .page-hero .chat-card, .l-hero .blob { transform: none; translate: none; opacity: 1; }
    .scroll-progress::after { display: none; }
}