/* ===== Фон ===== */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:linear-gradient(rgba(155,135,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(155,135,255,.06) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 50% 25%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 25%,#000 15%,transparent 72%);
  animation:gridMove 18s linear infinite}
@keyframes gridMove{to{background-position:56px 56px}}
.background-glow{position:fixed;animation:drift 14s ease-in-out infinite alternate}
.glow-two{animation-duration:18s;animation-direction:alternate-reverse}
@keyframes drift{to{translate:90px 70px;scale:1.2}}

/* ===== Шапка и прогресс ===== */
.site-header{position:sticky;top:0;transition:background .3s,backdrop-filter .3s,box-shadow .3s}
.site-header.scrolled{background:rgba(11,13,18,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:0 0 16px 16px;box-shadow:0 10px 30px #0005}
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:20;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#9b87ff,#78e3bd)}

/* ===== Вход на странице ===== */
@keyframes riseIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
.js .hero-copy>*{opacity:0;animation:riseIn .8s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i,0)*90ms + 120ms)}
.js .hero-visual{opacity:0;animation:riseIn 1s cubic-bezier(.2,.7,.2,1) .35s forwards}
.js .code-content p{opacity:0;animation:riseIn .45s ease forwards;animation-delay:calc(var(--i,0)*.12s + 1s)}

/* ===== Постоянное движение ===== */
@keyframes floatY{50%{translate:0 -12px}}
@keyframes spin{to{rotate:360deg}}
@keyframes ping{0%{box-shadow:0 0 0 0 #65dcb460}100%{box-shadow:0 0 0 10px #65dcb400}}
@keyframes shift{to{background-position:200% 50%}}
.code-window{animation:floatY 7s ease-in-out infinite}
.floating-card{animation:floatY 5s ease-in-out infinite}
.card-bottom{animation-delay:-2.5s;animation-duration:6s}
.orbit-one{animation:spin 40s linear infinite}
.orbit-two{animation:spin 60s linear infinite reverse}
.pulse{animation:ping 2s ease-out infinite}
.gradient-text{background-size:200% auto;animation:shift 7s linear infinite}
.cursor-line .cursor{box-shadow:0 0 12px #a894ff}

/* ===== Появление при скролле ===== */
.js .reveal{opacity:0;translate:0 34px;transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js .reveal.in{opacity:1;translate:0 0}

/* ===== Карточки: наклон, блик, баннер ===== */
.project-card,.service-card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));position:relative}
.js .project-card.reveal,.js .service-card.reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform .18s ease-out,border-color .25s}
.project-card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.project-card::before,.service-card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(155,135,255,.16),transparent 60%)}
.project-card:hover::before,.service-card:hover::before{opacity:1}
.service-card:hover{border-color:#494064}
.service-icon{transition:transform .3s}.service-card:hover .service-icon{transform:rotate(-8deg) scale(1.1)}
.banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.project-card:hover .banner-img{transform:scale(1.07)}
.project-art.has-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,13,18,.8),transparent 55%)}
.art-label{z-index:2}
.project-link span{display:inline-block;transition:transform .2s}.project-link:hover span{transform:translate(3px,-3px)}
.empty-note{color:var(--muted);text-align:center;font-size:13px}

@media(prefers-reduced-motion:reduce){
  .js .reveal,.js .hero-copy>*,.js .hero-visual,.js .code-content p{opacity:1;translate:none}
}