/* artem4ik493 — unified visual layer (replaces old effects.css) */
:root{--fx-blue:#68a7ff;--fx-violet:#a47cff;--fx-e:cubic-bezier(.22,1,.36,1)}
body{-webkit-tap-highlight-color:transparent}
::selection{background:#68a7ff55;color:#fff}
:focus-visible{outline:2px solid var(--fx-blue);outline-offset:3px;border-radius:8px}
a,button{touch-action:manipulation}
h1,h2{text-wrap:balance}p{text-wrap:pretty}

/* progress + cursor glow + particle background */
.fx-progress{position:fixed;z-index:10000;top:0;left:0;width:100%;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--fx-blue),var(--fx-violet));box-shadow:0 0 14px #68a7ffb3;pointer-events:none}
.fx-cursor{position:fixed;z-index:1;left:0;top:0;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#68a7ff17,transparent 67%);pointer-events:none;opacity:0;transition:opacity .35s;will-change:transform}
.fx-grid{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.55}
/* aurora: transform only (no animated filters / no repainting noise) */
body::before{transform:scale(1.05);animation:fxAurora 18s ease-in-out infinite alternate;will-change:transform}
@keyframes fxAurora{to{transform:translate3d(2%,2%,0) scale(1.1)}}

/* reveal: uses `translate`, so it never fights tilt's `transform` */
.reveal{opacity:0;translate:0 26px;transition:opacity .8s var(--fx-e) var(--d,0ms),translate .8s var(--fx-e) var(--d,0ms),transform .3s var(--fx-e),border-color .3s,box-shadow .3s,background .3s}
.reveal.show{opacity:1;translate:0 0}
@media(scripting:none){.reveal{opacity:1;translate:none}}

/* hover: 3D tilt + spotlight (desktop only, classes added by JS) */
.fx-tilt.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))}
.fx-tilt.fx-tilt:hover{--lift:-5px}
.fx-spot{position:relative;isolation:isolate}
.fx-spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--px,50%) var(--py,50%),#68a7ff26,transparent 60%)}
.fx-spot:hover::before{opacity:1}
.icon{transition:box-shadow .3s,translate .3s var(--fx-e)}
.card:hover .icon{translate:0 -3px;box-shadow:0 0 26px #68a7ff38}
.project-link{transition:translate .25s var(--fx-e)}.project-link:hover{translate:4px 0}

/* ripple */
.btn,.nav-cta,.packet-btn{position:relative;overflow:hidden}
.fx-ripple{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffffff73;transform:translate(-50%,-50%);pointer-events:none;animation:fxRipple .65s ease-out forwards}
@keyframes fxRipple{to{width:240px;height:240px;opacity:0}}

/* nav: scrolled state, scroll-spy, animated mobile menu */
nav,header{transition:background .3s,box-shadow .3s,border-color .3s}
nav.scrolled,header.scrolled{background:#07090df2;border-color:#68a7ff33;box-shadow:0 14px 50px #0009}
.nav-links a.active:not(.nav-cta){color:#fff;background:#ffffff0d;box-shadow:inset 0 -2px 0 var(--fx-blue)}
@media(max-width:900px){
  .nav-links{display:flex;position:absolute;left:10px;right:10px;top:70px;flex-direction:column;align-items:stretch;padding:8px;border:1px solid var(--line);border-radius:14px;background:#080a0ef7;opacity:0;visibility:hidden;translate:0 -10px;transition:opacity .3s,translate .3s var(--fx-e),visibility 0s .3s}
  .nav.open .nav-links{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
  .nav-links a{padding:13px}
  .menu-btn{line-height:1;transition:rotate .3s var(--fx-e)}
  .nav.open .menu-btn{rotate:90deg}
  nav,header{top:calc(env(safe-area-inset-top,0px) + 10px)}
  footer{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 34px)}
}
@media(max-width:620px){.nav-links{top:64px;left:0;right:0}}

/* hero: orchestrated entrance of the profile card + living gradient text */
.gradient{background-size:220% 100%;animation:fxShift 10s ease-in-out infinite alternate}
@keyframes fxShift{to{background-position:100% 0}}
@keyframes fxIn{from{opacity:0;translate:-10px 0}}
.show .code>div{animation:fxIn .5s var(--fx-e) both;animation-delay:calc(.45s + var(--i,0)*.13s)}
.code>div:nth-child(2){--i:1}.code>div:nth-child(3){--i:2}.code>div:nth-child(4){--i:3}.code>div:nth-child(5){--i:4}
.profile-card .code>div:last-child::after{content:"";display:inline-block;width:7px;height:14px;margin-left:5px;vertical-align:-2px;background:var(--fx-blue);animation:fxCaret 1s steps(2) infinite}
@keyframes fxCaret{50%{opacity:0}}
.eyebrow::before{animation:fxPulse 2s ease-in-out infinite}
@keyframes fxPulse{50%{opacity:.35}}
/* bars fill when the card scrolls into view (not on page load) */
.bar i{animation-play-state:paused}.show .bar i{animation-play-state:running}

/* performance */
.map-paused *{animation-play-state:paused!important}
.map-packet{filter:none!important;stroke:#68a7ff59;stroke-width:5px;paint-order:stroke}
#about,#stack,#projects,#activity,#services,#toolkit{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* tools: click-to-copy */
.out{cursor:copy}
.fx-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:10001;translate:-50% 20px;padding:10px 14px;border:1px solid #57d68b55;border-radius:10px;background:#0b1410f2;color:#9ff0c0;font:600 11px 'JetBrains Mono',monospace;opacity:0;pointer-events:none;transition:opacity .35s,translate .35s var(--fx-e)}
.fx-toast.on{opacity:1;translate:-50% 0}

/* error pages */
.grid .code{background-size:220% 100%;animation:fxShift 9s ease-in-out infinite alternate}
.panel .body .row{animation:fxIn .6s var(--fx-e) both}
.panel .body .row:nth-child(2){animation-delay:.08s}.panel .body .row:nth-child(3){animation-delay:.16s}.panel .body .row:nth-child(4){animation-delay:.24s}

/* touch + small screens */
@media(hover:none),(pointer:coarse){.fx-cursor,.fx-grid{display:none!important}.btn:active,.card:active,.control-card:active,.server-row:active{scale:.985}}
@media(max-width:760px){body::before{animation:none}}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;translate:none;transition:none}
  .fx-cursor,.fx-grid,.fx-ripple{display:none!important}
  body::before,.gradient,.grid .code,.eyebrow::before,.profile-card .code>div:last-child::after{animation:none!important}
  .show .code>div,.panel .body .row{animation:none!important}
  .fx-tilt.fx-tilt{transform:none!important}
}