/* ========================================================================== СЛОЙ ДВИЖЕНИЯ. Подключается ПОСЛЕ style.css и снимается одной строкой — база от этого не ломается (приём с сайта Зикина). Только transform и opacity. prefers-reduced-motion гасит всё тяжёлое. ========================================================================== */ /* --- имя по буквам ------------------------------------------------------ */ .hero__name .ch{ display:inline-block; opacity:0; transform:translateY(.36em); filter:blur(6px); animation:chIn .62s var(--ease) forwards; animation-delay:calc(var(--i) * 42ms); } @keyframes chIn{ to{ opacity:1; transform:none; filter:blur(0) } } /* --- появление блоков волной -------------------------------------------- */ /* Прячем ТОЛЬКО когда motion.js реально стартовал и поставил флаг на . Иначе отказ скрипта оставил бы половину страницы невидимой — а это выглядит как пустой сайт, и никто не поймёт, что дело в скрипте. */ .js-motion [data-rise]{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--d,0) * 70ms); } .js-motion [data-rise].is-in{ opacity:1; transform:none } /* --- сетка обложки дышит и следует за курсором --------------------------- */ .hero__grid{ transform:translate3d(calc(var(--mx,.5) * -14px), calc(var(--my,.5) * -14px), 0); transition:transform .5s var(--ease); } /* прожектор за курсором — только на настоящем указателе */ @media (hover:hover) and (pointer:fine){ .hero::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(180px 180px at var(--px,50%) var(--py,30%), color-mix(in oklab, var(--ac) 13%, transparent), transparent 70%); opacity:0; transition:opacity .35s var(--ease); } .hero.is-live::before{ opacity:1 } } /* --- кольцо аватара: контур бежит по кругу ------------------------------- */ @property --ang{ syntax:''; initial-value:0deg; inherits:false } .ava__ring{ background:conic-gradient(from var(--ang), transparent 0deg, color-mix(in oklab, var(--ac) 70%, transparent) 40deg, transparent 120deg, transparent 360deg); -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); border:0; animation:ringSpin 5.5s linear infinite; } @keyframes ringSpin{ to{ --ang:360deg } } /* мягкий пульс свечения под аватаром */ .ava__v{ animation:avaGlow 4.4s ease-in-out infinite } @keyframes avaGlow{ 0%,100%{ box-shadow:0 0 0 1px var(--line), 0 18px 50px -18px color-mix(in oklab, var(--ac) 40%, transparent) } 50% { box-shadow:0 0 0 1px var(--line), 0 22px 62px -18px color-mix(in oklab, var(--ac) 62%, transparent) } } /* --- карточки работ: акцентная нить сверху уезжает при наведении --------- */ @media (hover:hover) and (pointer:fine){ .work__shot::after{ content:''; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg, transparent, var(--ac), transparent); transform:translateX(-100%); transition:transform .8s var(--ease); } .work:hover .work__shot::after{ transform:translateX(100%) } } /* --- уважение к настройке «меньше движения» ------------------------------ */ @media (prefers-reduced-motion:reduce){ .hero__name .ch{ opacity:1; transform:none; filter:none; animation:none } .js-motion [data-rise]{ opacity:1; transform:none; transition:none } .hero__grid{ transform:none; transition:none } .ava__ring{ animation:none; background:none; border:1px solid color-mix(in oklab, var(--ac) 34%, transparent) } .ava__v{ animation:none } .hero.is-live::before{ opacity:0 } .work__shot::after{ display:none } }