/* Оформление моушн-слоя. Работает вместе с motion.js.
   Скрытые начальные состояния действуют только при классе .m-js на html,
   поэтому без JS и при «уменьшить движение» страница остаётся обычной. */

/* ---------- живое поле и зерно ---------- */
#field{
  --m-field-blur:4.8px;
  position:fixed;inset:-48px;width:calc(100% + 96px);height:calc(100% + 96px);z-index:-2;
  display:block;filter:blur(var(--m-field-blur));transform:translateZ(0);pointer-events:none;
}
@media(max-width:520px){#field{inset:-36px;width:calc(100% + 72px);height:calc(100% + 72px)}}
#grain{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* WebGL не поднялся — поле просто не показываем, страница живёт как раньше */
.no-gl #field, .no-gl #grain{display:none}

/* ---------- построчная развёртка заголовков ---------- */
.mline{display:block; overflow:hidden}
.mline > span{display:block}
.m-js .mline > span{transform:translateY(105%); opacity:0}
.m-js.m-ready-host .mline > span, .m-js body.m-ready .mline > span{
  animation:m-lineup 1s cubic-bezier(.16,1,.3,1) forwards;
}
.m-js body.m-ready .mline:nth-child(2) > span{animation-delay:.08s}
.m-js body.m-ready .mline:nth-child(3) > span{animation-delay:.16s}
.m-js body.m-ready .mline:nth-child(4) > span{animation-delay:.24s}
@keyframes m-lineup{to{transform:translateY(0); opacity:1}}

/* ---------- обратимые секции-сцены ---------- */
.m-js .m-scene-item{
  --m-scene-p:0;
  opacity:var(--m-scene-p);
  transform:translate3d(0,calc((1 - var(--m-scene-p))*44px),0)
            scale(calc(.985 + var(--m-scene-p)*.015));
  filter:blur(calc((1 - var(--m-scene-p))*12px));
  transform-origin:50% 20%;
}
.m-js .m-scene-item.m-scene-active{will-change:opacity,transform,filter}
.m-js .hero.m-scene .m-scene-item{
  transform:translate3d(0,calc((1 - var(--m-scene-p))*28px),0)
            scale(calc(.992 + var(--m-scene-p)*.008));
  filter:blur(calc((1 - var(--m-scene-p))*8px));
}
@media(prefers-reduced-motion:reduce){
  .m-scene-item{opacity:1!important;transform:none!important;filter:none!important;will-change:auto!important}
}

/* ---------- наклон карточек и пятно света под курсором ---------- */
.m-tilt{transform-style:preserve-3d; will-change:transform}
.m-tilt::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; transition:opacity .35s;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),
             color-mix(in srgb, var(--accent, #FF7F4D) 22%, transparent), transparent 72%);
}
@media (hover:hover){ .m-tilt:hover::after{opacity:1} }

/* ---------- уважение к системной настройке ---------- */
@media (prefers-reduced-motion:reduce){
  .mline > span{transform:none !important; opacity:1 !important; animation:none !important}
  .m-tilt{transition:none !important}
}

/* ---------- ползунок размытия фона ---------- */
.m-bg{
  position:fixed; right:clamp(12px,2vw,22px); bottom:clamp(12px,2vw,22px); z-index:60;
  display:flex; align-items:center; gap:9px; padding:8px 14px 8px 12px; border-radius:100px;
  font:500 11px/1 "YS Text", system-ui, sans-serif; letter-spacing:.05em; color:var(--m-ink,#F3F4F8);
  background:var(--m-panel, rgba(255,255,255,.08)); border:1px solid var(--m-line, rgba(255,255,255,.15));
  -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  transition:opacity .3s, transform .3s, border-color .3s;
  opacity:.62;
}
.m-bg:hover, .m-bg:focus-within{opacity:1; transform:translateY(-2px); border-color:var(--m-accent,#FF7F4D)}
.m-bg-ico{display:flex; color:var(--m-accent,#FF7F4D); opacity:.9}
.m-bg-lab{cursor:pointer; user-select:none; opacity:.85}
.m-bg-val{min-width:3.1em; text-align:right; opacity:.6; font-variant-numeric:tabular-nums}

.m-bg-range{
  -webkit-appearance:none; appearance:none; width:clamp(64px,9vw,104px); height:16px;
  background:transparent; cursor:pointer; margin:0;
}
.m-bg-range::-webkit-slider-runnable-track{
  height:3px; border-radius:3px;
  background:linear-gradient(90deg, var(--m-accent,#FF7F4D) var(--fill,100%), var(--m-track, rgba(255,255,255,.22)) var(--fill,100%));
}
.m-bg-range::-moz-range-track{height:3px; border-radius:3px; background:var(--m-track, rgba(255,255,255,.22))}
.m-bg-range::-moz-range-progress{height:3px; border-radius:3px; background:var(--m-accent,#FF7F4D)}
.m-bg-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:12px; height:12px; margin-top:-4.5px;
  border-radius:50%; background:var(--m-ink,#F3F4F8); border:2px solid var(--m-accent,#FF7F4D);
  box-shadow:0 2px 8px rgba(0,0,0,.35); transition:transform .2s;
}
.m-bg-range::-moz-range-thumb{
  width:12px; height:12px; border-radius:50%; background:var(--m-ink,#F3F4F8);
  border:2px solid var(--m-accent,#FF7F4D); box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.m-bg-range:hover::-webkit-slider-thumb{transform:scale(1.15)}
.m-bg-range:focus-visible{outline:2px solid var(--m-accent,#FF7F4D); outline-offset:6px; border-radius:100px}

@media print{ .m-bg{display:none} }
@media (max-width:520px){
  .m-bg{padding:7px 11px 7px 10px; gap:7px}
  .m-bg-val{display:none}
}

/* ---------- переход между портфолио ---------- */
.hero-nav{display:inline-flex;align-items:center;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.portfolio-switch{
  min-height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 15px;
  border-radius:100px;text-decoration:none;font:700 11px/1 "YS Text",sans-serif;
  letter-spacing:.08em;transition:transform .25s,border-color .25s,box-shadow .25s;
}
.portfolio-switch.to-design{
  color:#191919;background:#FAF9F6;border:1px solid #E30613;
  box-shadow:0 8px 24px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.55);
}
.portfolio-switch.to-tech{
  color:#F3F4F8;background:rgba(11,11,18,.92);border:1px solid #FF7F4D;
  box-shadow:0 8px 24px rgba(11,11,18,.2),inset 0 1px 0 rgba(255,255,255,.16);
}
.portfolio-switch:hover{transform:translateY(-2px)}
.portfolio-switch:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:520px){.hero-nav{gap:7px}.portfolio-switch{min-height:36px;padding:0 12px}}