/* FX-EFFECTS */
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px}

/* staggered reveal (uses translate/scale so hover transforms keep working) */
.fx{opacity:0;translate:0 38px;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1),transform .3s,border-color .4s,box-shadow .4s,background .4s}
.fx.from-l{translate:-48px 0}
.fx.from-r{translate:48px 0}
.fx.zoom{translate:0 20px;scale:.88}
.fx.fx-in{opacity:1;translate:0 0;scale:1}

/* image wipe */
.wipe{clip-path:inset(0 0 100% 0 round 26px);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1),transform .15s}
.wipe.on{clip-path:inset(0 0 0 0 round 26px)}

/* heading underline */
section h2::after{content:"";display:block;height:3px;width:0;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--glow),transparent);transition:width 1.3s .35s cubic-bezier(.2,.7,.2,1)}
section.in h2::after{width:140px}

/* nav */
nav{transition:transform .45s cubic-bezier(.2,.7,.2,1),background .4s,box-shadow .4s}
nav.hide{transform:translateY(-110%)}
nav.scrolled{box-shadow:0 8px 30px rgba(0,0,0,.25)}

/* card spotlight */
.card,.pack,.bento div{position:relative;overflow:hidden}
.card::before,.pack::before,.bento div::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%);opacity:0;transition:opacity .4s;pointer-events:none}
.card:hover::before,.pack:hover::before,.bento div:hover::before{opacity:1}

/* gallery shine */
.grid figure::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .9s;pointer-events:none}
.grid figure:hover::after{left:130%}

/* button shine */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s;pointer-events:none}
.btn:hover::after{left:140%}

/* particles */
.fxcv{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6}

/* side dots */
.sidedots{position:fixed;inset-inline-end:14px;top:50%;translate:0 -50%;z-index:40;display:grid;gap:12px}
.sidedots a{position:relative;width:14px;height:14px;display:grid;place-items:center}
.sidedots i{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5;transition:.3s}
.sidedots a.on i{background:var(--glow);opacity:1;scale:1.7;box-shadow:0 0 12px var(--glow)}
.sidedots a::after{content:attr(data-t);position:absolute;inset-inline-end:24px;top:50%;translate:0 -50%;padding:3px 10px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:.3s}
.sidedots a:hover::after{opacity:1}

/* back to top */
.totop{position:fixed;inset-inline-start:20px;bottom:20px;z-index:60;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(12px);color:var(--text);font-size:1.2rem;cursor:pointer;opacity:0;visibility:hidden;translate:0 20px;transition:.4s}
.totop.on{opacity:1;visibility:visible;translate:0 0}
.totop:hover{background:var(--accent);color:#fff}

/* scroll hint */
.hero{position:relative}
.scrollhint{position:absolute;left:50%;bottom:24px;translate:-50% 0;width:24px;height:38px;border:2px solid var(--line);border-radius:14px;transition:opacity .4s;opacity:.8;pointer-events:none}
.scrollhint::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--glow);animation:wheel 1.6s infinite}
.scrollhint.off{opacity:0}
@keyframes wheel{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(14px)}}

@media(max-width:1100px){.sidedots{display:none}}
@media(max-width:860px){.totop{bottom:78px}.scrollhint{display:none}.fxcv{display:none}}