*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --f-brand:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",monospace;
  --r-s:8px;--r-m:16px;--r-l:28px;--r-full:9999px;
  --gutter:max(1rem,calc(50vw - 460px - 12rem));
  /* MD3 motion tokens */
  --e-standard:cubic-bezier(.2,0,0,1);
  --e-emphasized:cubic-bezier(.05,.7,.1,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --e-accel:cubic-bezier(.3,0,.8,.15);
  --mo:200ms var(--e-standard);
  --mo-l:450ms var(--e-emphasized);
  /* MD3 Expressive spring */
  --spring-l:linear(0,.004,.016 3.6%,.064 7.3%,.229 14.7%,.376 20.3%,.538 26.3%,.658 31.2%,.762 36.7%,.849 42.7%,.911 49.1%,.956 55.7%,.984 62.4%,1 72.5%,1);
  /* M3 Expressive: spring fast spatial (damping .9 / stiffness 1400), аппроксимация linear() */
  --spring-b:linear(0,.009,.035 2.1%,.141 4.4%,.723 10.8%,1.016 14.3%,1.185 17.9%,1.251 21.8%,1.237 30.2%,1.063 43.2%,1.005 57.2%,1);
}

[data-theme="light"]{
  --p:#0b57d0;--op:#fff;
  --pc:#d3e4ff;--opc:#001c3a;
  --sc:#c3e7ff;--osc:#001e2f;
  --tc:#eaddff;--otc:#22005d;
  --sf:#f8faff;--osf:#191c22;--osv:#43474f;
  --ol:#737780;--olv:#c3c7d1;
  --cl:#fff;--cll:#eff3fb;--ch:#e0e8f5;
  color-scheme:light;
}
[data-theme="dark"]{
  --p:#a8c8ff;--op:#062e60;
  --pc:#004590;--opc:#d8e4ff;
  --sc:#124c73;--osc:#c5e7ff;
  --tc:#4a3d6b;--otc:#e6ddff;
  --sf:#0f1218;--osf:#e1e3ec;--osv:#c0c6d4;
  --ol:#8a909b;--olv:#414852;
  --cl:#0b0e13;--cll:#171a21;--ch:#232730;
  color-scheme:dark;
}

html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--sf);color:var(--osf);font-family:var(--f-brand);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .35s var(--e-standard),color .35s var(--e-standard)}
::selection{background:var(--p);color:var(--op)}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.material-symbols-rounded{font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24;vertical-align:-.18em}
a,button{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:where(a,button):focus-visible{outline:3px solid color-mix(in srgb,var(--p) 55%,transparent);outline-offset:3px}

.wrap{position:relative;z-index:1;width:min(100% - 2.5rem,920px);margin-inline:auto}

/* плавный переход темы */
.topbar,.profile,.facts,.facts__row,.skill-group,.timeline__card,.contact-card,.footer,.chip,.snk,.speed-item,.tswitch,.ham,.btn,.ov nav a{transition:background-color .35s var(--e-standard),border-color .35s var(--e-standard),color .35s var(--e-standard)}
.tswitch{position:relative;display:inline-flex;flex-shrink:0}
.tswitch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.tswitch__track{width:52px;height:32px;border-radius:var(--r-full);background:var(--cll);border:2px solid var(--ol);position:relative;transition:background .3s var(--e-standard),border-color .3s var(--e-standard)}
.tswitch__handle{position:absolute;top:50%;left:4px;width:24px;height:24px;border-radius:50%;background:var(--ol);transform:translateY(-50%);display:grid;place-items:center;transition:left .35s var(--spring-l),width .35s var(--spring-l),height .35s var(--spring-l),background .3s var(--e-standard),box-shadow .3s var(--e-standard)}
.tswitch__handle .material-symbols-rounded{font-size:16px;color:var(--cll);font-variation-settings:"FILL" 1,"wght" 700,"GRAD" 0,"opsz" 20;animation:iconIn .35s var(--e-spring)}
.tswitch:hover .tswitch__track{background:color-mix(in srgb,var(--p) 10%,var(--cll))}
.tswitch:hover .tswitch__handle{box-shadow:0 0 0 8px color-mix(in srgb,var(--p) 12%,transparent)}
.tswitch input:focus-visible+.tswitch__track{outline:3px solid color-mix(in srgb,var(--p) 55%,transparent);outline-offset:3px;border-radius:var(--r-full)}
.tswitch:active .tswitch__handle{width:28px;height:28px;left:2px}
.tswitch input:checked+.tswitch__track{background:var(--p);border-color:var(--p)}
.tswitch input:checked+.tswitch__track .tswitch__handle{left:20px;width:24px;height:24px;background:var(--op)}
.tswitch:active input:checked+.tswitch__track .tswitch__handle{left:18px;width:28px;height:28px}
.tswitch input:checked+.tswitch__track .tswitch__handle .material-symbols-rounded{color:var(--p)}

/* ===== progress bar ===== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;pointer-events:none}
.progress i{display:block;height:100%;width:0;border-radius:0 99px 99px 0;background:linear-gradient(90deg,var(--p),var(--pc),var(--p));background-size:220% 100%;box-shadow:0 0 12px color-mix(in srgb,var(--p) 60%,transparent);animation:progShine 2.4s linear infinite}
@keyframes progShine{from{background-position:0% 0}to{background-position:220% 0}}

/* ===== cursor spotlight ===== */
.spotlight{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(340px circle at var(--sx,-400px) var(--sy,-400px),color-mix(in srgb,var(--p) 8%,transparent),transparent 70%);transition:opacity .4s}
@media(hover:none),(max-width:640px){.spotlight{display:none}}

/* ===== topbar ===== */
.topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem clamp(1rem,4vw,2rem);background:color-mix(in srgb,var(--sf) 82%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--olv)}
.topbar__brand{display:flex;align-items:center;gap:.6rem;font-weight:800}
.topbar__logo{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--p);color:var(--op);font-size:.8rem;font-weight:800;overflow:hidden;transition:transform 200ms var(--e-spring),border-radius 200ms var(--e-spring)}
.topbar__logo img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.topbar__brand:hover .topbar__logo{transform:rotate(-10deg) scale(1.1);border-radius:50%}
.topbar__name{font-family:var(--f-mono);font-size:.85rem;letter-spacing:-.02em}
.topbar__nav{display:flex;gap:1.5rem}
.topbar__nav a{position:relative;font-size:.9rem;font-weight:600;color:var(--osv);transition:color var(--mo);padding:.2rem 0}
.topbar__nav a::after{content:"";position:absolute;left:50%;bottom:-2px;width:100%;height:2.5px;border-radius:2px;background:var(--p);transform:translateX(-50%) scaleX(0);transform-origin:center;transition:transform 200ms var(--e-spring)}
.topbar__nav a:hover,.topbar__nav a.active{color:var(--p)}
.topbar__nav a:hover::after,.topbar__nav a.active::after{transform:translateX(-50%) scaleX(1)}
@keyframes iconIn{from{transform:rotate(-90deg) scale(.4);opacity:0}to{transform:none;opacity:1}}

/* ===== hero ===== */
.hero{position:relative;z-index:1;padding:clamp(2.5rem,7vw,5rem) 0 1.5rem}
.hero__blob{position:absolute;top:-8rem;left:50%;width:min(700px,110vw);aspect-ratio:2/1;transform:translateX(-50%);background:radial-gradient(closest-side,color-mix(in srgb,var(--pc) 55%,transparent),transparent 72%);pointer-events:none;animation:blobFloat 9s ease-in-out infinite alternate}
@keyframes blobFloat{from{opacity:.7;transform:translateX(-52%) scale(1)}to{opacity:1;transform:translateX(-48%) scale(1.06)}}

/* декоративные MD3-формы */
.hero__shape{position:absolute;pointer-events:none;color:var(--p);opacity:.5;z-index:0}
.hero__shape svg{width:100%;height:100%;display:block}
.hero__shape--b{bottom:2%;left:-1%;width:clamp(56px,8vw,90px);aspect-ratio:1;opacity:.3}
.shape-spin{transform-origin:50% 50%;animation:shapeSpin 24s linear infinite;fill:currentColor}
.shape-spin--rev{animation-direction:reverse;animation-duration:30s;fill:var(--sc)}
@keyframes shapeSpin{to{transform:rotate(360deg)}}

/* gooey-морф фигур (MD3 Expressive) */
.m3morph{position:absolute;top:4%;right:3%;width:clamp(80px,12vw,130px);aspect-ratio:1;color:var(--p);opacity:.55;pointer-events:none;z-index:0;filter:drop-shadow(0 10px 26px color-mix(in srgb,var(--p) 30%,transparent));animation:morphColor 9s ease-in-out infinite}
.m3morph svg{width:100%;height:100%;overflow:visible;display:block}
.m3morph__spin{transform-origin:50% 50%;animation:m3spin 12s linear infinite}
@keyframes m3spin{to{transform:rotate(360deg)}}
.m3morph__s{fill:currentColor;opacity:0;transform-box:fill-box;transform-origin:center;animation:m3shape 6s var(--e-emphasized) infinite}
.m3morph__s2{animation-delay:2s}
.m3morph__s3{animation-delay:4s}
@keyframes m3shape{
  0%{opacity:0;transform:scale(.25) rotate(-50deg)}
  7%{opacity:1}
  18%{opacity:1;transform:scale(1) rotate(0deg)}
  30%{opacity:1;transform:scale(1)}
  40%{opacity:0;transform:scale(.25) rotate(50deg)}
  100%{opacity:0;transform:scale(.25) rotate(50deg)}
}

/* арт-галерея в полях страницы (7 артов) */
body{position:relative}
.hero__art{position:absolute;aspect-ratio:1;border-radius:24px;overflow:hidden;z-index:50;box-shadow:0 14px 36px color-mix(in srgb,var(--p) 24%,transparent),0 2px 8px color-mix(in srgb,#000 18%,transparent);animation:artFloat 6.5s var(--e-emphasized) infinite alternate;animation-delay:var(--d,0s);pointer-events:none}
.hero__art img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes artFloat{from{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-10px) rotate(1.5deg)}}
@media(max-width:1024px){.hero__art{display:none}}
@media(min-width:641px) and (max-width:1100px){.skill-groups{grid-template-columns:repeat(2,1fr)}}
@media(min-width:641px) and (max-width:820px){.contact-grid{grid-template-columns:repeat(2,1fr)}}

/* волнистый разделитель */
.sep{position:relative;width:100%;height:44px;color:var(--p);opacity:.85;pointer-events:none;overflow:hidden}
.sep svg{position:absolute;left:50%;top:0;width:100vw;height:100%;transform:translateX(-50%);display:block}
.sep__line{stroke:color-mix(in srgb,var(--p) 16%,transparent);stroke-width:3;stroke-linecap:round}
.sep__wave{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-dasharray:22 78;animation:sepMove 2.6s linear infinite}
@keyframes sepMove{to{stroke-dashoffset:-100}}

/* profile card + tilt */
.profile{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;padding:clamp(1.5rem,4vw,2.5rem);background:var(--cl);border:1px solid var(--olv);border-radius:var(--r-l);box-shadow:0 12px 40px color-mix(in srgb,var(--p) 8%,transparent);transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:box-shadow var(--mo);will-change:transform}
.profile::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(500px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--p) 7%,transparent),transparent 60%);opacity:0;transition:opacity var(--mo);pointer-events:none}
.profile:hover::before{opacity:1}
.profile:hover{box-shadow:0 22px 60px color-mix(in srgb,var(--p) 14%,transparent)}

/* входная анимация hero */
.profile__side,.profile__body>*{opacity:0;transform:translateY(24px);animation:heroIn .7s var(--e-emphasized) forwards}
.profile__side{animation-delay:.05s}
.profile__body>*:nth-child(1){animation-delay:.15s}
.profile__body>*:nth-child(2){animation-delay:.25s}
.profile__body>*:nth-child(3){animation-delay:.35s}
.profile__body>*:nth-child(4){animation-delay:.45s}
.profile__body>*:nth-child(5){animation-delay:.55s}
@keyframes heroIn{to{opacity:1;transform:none}}

.profile__side{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.avatar{position:relative;width:clamp(96px,16vw,140px);aspect-ratio:1;border-radius:var(--r-l);display:grid;place-items:center;background:linear-gradient(145deg,var(--pc),var(--sc));color:var(--opc);font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;box-shadow:0 8px 24px color-mix(in srgb,var(--p) 22%,transparent);transition:border-radius .7s var(--spring-l),transform .7s var(--spring-l)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;transition:transform .5s var(--spring-l),border-radius .6s var(--e-spring)}
.avatar:hover img{transform:scale(1.06)}
.avatar:hover{border-radius:38% 62% 55% 45%/48% 42% 58% 52%;transform:rotate(-3deg) scale(1.04)}
/* вращающееся кольцо: анимируем угол градиента, а не поворот элемента */
@property --ring-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.avatar::before{content:"";position:absolute;inset:-6px;border-radius:inherit;padding:3.5px;z-index:1;pointer-events:none;background:conic-gradient(from var(--ring-a),transparent 0deg,var(--p) 80deg,var(--pc) 150deg,transparent 220deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ringAngle 4.5s linear infinite}
@keyframes ringAngle{to{--ring-a:360deg}}
@supports not ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .avatar::before{display:none}
}
.avatar__status{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:#34c759;border:3px solid var(--cl);animation:pulse 2.4s ease-in-out infinite;z-index:2}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,#34c759 45%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.profile__chips{display:flex;flex-direction:column;gap:.4rem}

.profile__hello{font-family:var(--f-mono);font-size:.9rem;color:var(--osv)}
.profile__name{font-size:clamp(2rem,6vw,3.4rem);font-weight:800;line-height:1.05;letter-spacing:-.03em;color:var(--p);position:relative;display:inline-block;transition:transform .4s var(--spring-l),color .4s var(--mo);cursor:default}
.profile__role{margin-top:.4rem;font-size:clamp(1rem,2.4vw,1.25rem);font-weight:800;color:var(--p);min-height:1.5em}
.caret{display:inline-block;width:.55em;height:1.1em;margin-left:3px;border-radius:2px;background:var(--p);vertical-align:-.15em;animation:caretBlink 1.1s steps(1) infinite}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.profile__lead{margin-top:.9rem;max-width:52ch;color:var(--osv);font-weight:500;overflow-wrap:break-word}
.profile__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}

/* ===== buttons ===== */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.4rem;border-radius:var(--r-full);font-weight:700;font-size:.9rem;transition:transform .35s var(--spring-l),box-shadow var(--mo),background var(--mo),border-radius .45s var(--spring-l)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.95);border-radius:12px}
.btn .material-symbols-rounded{font-size:1.1rem;transition:transform 200ms var(--e-spring)}
.btn:hover .material-symbols-rounded{transform:translateX(3px) rotate(-6deg)}
.btn--filled{background:var(--p);color:var(--op);box-shadow:0 2px 10px color-mix(in srgb,var(--p) 35%,transparent)}
.btn--filled:hover{box-shadow:0 6px 22px color-mix(in srgb,var(--p) 50%,transparent)}
.btn--tonal{background:var(--sc);color:var(--osc)}


.marquee{overflow:hidden;padding:1.2rem 0;user-select:none;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;width:max-content;font-family:var(--f-mono);font-size:.95rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--osv);animation:marquee 26s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ===== sections ===== */
.sec{position:relative;z-index:1;padding:clamp(2.5rem,6vw,4.5rem) 0;scroll-margin-top:5rem}
.sec__head{margin-bottom:1.6rem}
.sec__label{display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--p);padding:.35rem .8rem;border-radius:var(--r-full);background:color-mix(in srgb,var(--pc) 40%,transparent);margin-bottom:.7rem;transition:transform 200ms var(--e-spring)}
.sec__head:hover .sec__label{transform:translateX(4px)}
.sec__title{font-size:clamp(1.6rem,4.5vw,2.4rem);font-weight:800;letter-spacing:-.02em}

/* ===== facts ===== */
.facts{background:var(--cl);border:1px solid var(--olv);border-radius:var(--r-l);overflow:hidden}
.facts__row{position:relative;display:grid;grid-template-columns:150px 1fr;gap:1rem;padding:.9rem 1.4rem;border-bottom:1px solid var(--olv);transition:background var(--mo)}
.facts__row:last-child{border-bottom:none}
.facts__row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--p);transform:scaleY(0);transition:transform 200ms var(--e-spring)}
.facts__row:hover{background:var(--cll)}
.facts__row:hover::before{transform:scaleY(1)}
.facts__row:hover .facts__val{transform:translateX(4px)}
.facts__key{font-family:var(--f-mono);font-size:.82rem;font-weight:700;color:var(--osv);text-transform:lowercase}
.facts__val{font-weight:600;word-break:break-word;display:inline-flex;align-items:center;gap:.5rem;transition:transform 200ms var(--e-spring)}
.facts__val--ok{color:var(--p)}
.dot-ok{flex:none;width:9px;height:9px;border-radius:50%;background:#34c759;animation:pulse 2.4s ease-in-out infinite}

/* stagger-вход детей при появлении секции */
.reveal:not(.vis) .facts__row,
.reveal:not(.vis) .ticks li,
.reveal:not(.vis) .chip--soft,
.reveal:not(.vis) .skill-group,
.reveal:not(.vis) .timeline__item,
.reveal:not(.vis) .contact-card{opacity:0;transform:translateY(22px)}
.reveal.vis .facts__row,
.reveal.vis .ticks li,
.reveal.vis .chip--soft,
.reveal.vis .skill-group,
.reveal.vis .timeline__item,
.reveal.vis .contact-card{transition:opacity .55s var(--e-emphasized),transform .55s var(--e-emphasized)}
.reveal.vis .facts__row:nth-child(1),.reveal.vis .ticks li:nth-child(1){transition-delay:.05s}
.reveal.vis .facts__row:nth-child(2),.reveal.vis .ticks li:nth-child(2){transition-delay:.12s}
.reveal.vis .facts__row:nth-child(3),.reveal.vis .ticks li:nth-child(3){transition-delay:.19s}
.reveal.vis .facts__row:nth-child(4){transition-delay:.26s}
.reveal.vis .facts__row:nth-child(5){transition-delay:.33s}
.reveal.vis .facts__row:nth-child(6){transition-delay:.4s}
.reveal.vis .skill-group:nth-child(1),.reveal.vis .contact-card:nth-child(1),.reveal.vis .timeline__item:nth-of-type(1){transition-delay:.05s}
.reveal.vis .skill-group:nth-child(2),.reveal.vis .contact-card:nth-child(2),.reveal.vis .timeline__item:nth-of-type(2){transition-delay:.14s}
.reveal.vis .skill-group:nth-child(3),.reveal.vis .contact-card:nth-child(3),.reveal.vis .timeline__item:nth-of-type(3){transition-delay:.23s}
.reveal.vis .skill-group:nth-child(4),.reveal.vis .contact-card:nth-child(4),.reveal.vis .timeline__item:nth-of-type(4){transition-delay:.32s}
.reveal.vis .chip--soft:nth-child(1){transition-delay:.1s}
.reveal.vis .chip--soft:nth-child(2){transition-delay:.16s}
.reveal.vis .chip--soft:nth-child(3){transition-delay:.22s}
.reveal.vis .chip--soft:nth-child(4){transition-delay:.28s}

.ticks{display:grid;gap:.4rem;margin-top:1.4rem;padding:0;list-style:none}
.ticks li{display:grid;grid-template-columns:1.35rem 1fr;align-items:center;column-gap:.7rem;color:var(--osv);font-weight:600;font-size:.95rem}
.ticks li::before{content:"";grid-column:1;grid-row:1;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--p);transition:transform 200ms var(--e-spring),box-shadow var(--mo)}
.ticks li::after{content:"check";font-family:"Material Symbols Rounded";font-variation-settings:"FILL" 1,"wght" 700,"GRAD" 0,"opsz" 20;grid-column:1;grid-row:1;justify-self:center;align-self:center;color:var(--op);font-size:.82rem;line-height:0;transition:transform 200ms var(--e-spring)}
.ticks li:hover::before{box-shadow:0 0 0 5px color-mix(in srgb,var(--p) 18%,transparent)}
.ticks li:hover::before,.ticks li:hover::after{transform:scale(1.18) rotate(8deg)}
.ticks li:hover{color:var(--osf)}

/* ===== skills ===== */
.skill-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.skill-group{background:var(--cl);border:1px solid var(--olv);border-radius:var(--r-l);padding:1.3rem 1.4rem;transition:transform 200ms var(--e-standard),border-color var(--mo),box-shadow var(--mo)}
.skill-group:hover{transform:translateY(-5px);border-color:var(--p);box-shadow:0 12px 32px color-mix(in srgb,var(--p) 12%,transparent)}
.skill-group__title{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:800;text-transform:lowercase;margin-bottom:.9rem}
.skill-group__title .material-symbols-rounded{color:var(--p);font-size:1.15rem;transition:transform 200ms var(--e-spring)}
.skill-group:hover .skill-group__title .material-symbols-rounded{transform:scale(1.2) rotate(-8deg)}
.skill-group__chips{display:flex;flex-wrap:wrap;gap:.45rem}

.chip{display:inline-flex;align-items:center;min-height:1.9rem;padding:.15rem .8rem;border-radius:6px;border:1px solid var(--olv);font-family:var(--f-mono);font-size:.8rem;font-weight:700;color:var(--osv);transition:background var(--mo),border-color var(--mo),color var(--mo),transform .35s var(--spring-b)}
.chip:hover{transform:translateY(-3px) scale(1.07) rotate(-1.5deg)}
.chip--soft{border-color:transparent;background:color-mix(in srgb,var(--sc) 70%,transparent);color:var(--osc);border-radius:6px}
.chip--soft:hover{background:var(--sc);border-color:var(--p)}

/* ===== timeline ===== */
.timeline{position:relative;display:grid;gap:1rem;padding-left:2.4rem}
.timeline::before{content:"";position:absolute;left:.95rem;top:.5rem;bottom:.5rem;width:2px;border-radius:2px;background:var(--olv)}
.timeline__progress{position:absolute;left:.95rem;top:.5rem;bottom:.5rem;width:2px;border-radius:2px;background:linear-gradient(var(--p),var(--pc));transform:scaleY(var(--tl,0));transform-origin:top;box-shadow:0 0 10px color-mix(in srgb,var(--p) 55%,transparent)}
.timeline__item{position:relative;display:flex}
.timeline__dot{position:absolute;left:-2.4rem;top:1.1rem;width:1.9rem;height:1.9rem;border-radius:50%;display:grid;place-items:center;background:var(--cl);border:2px solid var(--p);color:var(--p);font-family:var(--f-mono);font-size:.8rem;font-weight:700;transition:background 200ms var(--e-spring),color var(--mo),transform 200ms var(--e-spring),box-shadow var(--mo)}
.timeline__item:hover .timeline__dot{background:var(--p);color:var(--op);transform:scale(1.15);box-shadow:0 0 0 6px color-mix(in srgb,var(--p) 18%,transparent)}
.timeline__card{flex:1;background:var(--cl);border:1px solid var(--olv);border-radius:var(--r-l);padding:1.2rem 1.4rem;transition:transform 200ms var(--e-standard),border-color var(--mo),box-shadow var(--mo)}
.timeline__card:hover{transform:translateX(8px);border-color:var(--p);box-shadow:0 10px 30px color-mix(in srgb,var(--p) 12%,transparent)}
.timeline__top{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.timeline__top h3{font-family:var(--f-mono);font-size:1.05rem;font-weight:700;transition:color var(--mo)}
.timeline__card:hover .timeline__top h3{color:var(--p)}
.timeline__card p{margin-top:.5rem;color:var(--osv);font-size:.95rem;font-weight:500}
.timeline__link{display:inline-flex;align-items:center;gap:.3rem;margin-top:.8rem;font-weight:700;font-size:.88rem;color:var(--p);transition:gap 200ms var(--e-spring)}
.timeline__link:hover{gap:.55rem}
.timeline__link .material-symbols-rounded{font-size:1rem;transition:transform 200ms var(--e-spring)}
.timeline__link:hover .material-symbols-rounded{transform:rotate(-45deg)}

.badge{display:inline-flex;align-items:center;padding:.3rem .75rem;border-radius:var(--r-full);background:var(--sc);color:var(--osc);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.badge--hot{background:var(--tc);color:var(--otc);animation:hotPulse 2.6s ease-in-out infinite}
@keyframes hotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

/* ===== contacts ===== */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.contact-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;text-align:left;padding:1.3rem 1.4rem;background:var(--cl);border:1px solid var(--olv);border-radius:var(--r-l);transition:transform 200ms var(--e-standard),border-color var(--mo),box-shadow var(--mo)}
.contact-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--p) 10%,transparent),transparent 60%);opacity:0;transition:opacity var(--mo);pointer-events:none}
.contact-card:hover::after{opacity:1}
.contact-card:hover{transform:translateY(-5px);border-color:var(--p);box-shadow:0 12px 32px color-mix(in srgb,var(--p) 12%,transparent)}
.contact-card .material-symbols-rounded{font-size:1.5rem;color:var(--p);margin-bottom:.3rem;transition:transform 200ms var(--e-spring)}
.contact-card:hover .material-symbols-rounded{transform:translateY(-3px) rotate(-8deg) scale(1.12)}
.contact-card strong{font-weight:800;font-size:.98rem;overflow-wrap:break-word}
.contact-card__sub{font-size:.82rem;color:var(--osv);font-weight:600}
.contact-card--main{background:var(--p);border-color:var(--p);color:var(--op)}
.contact-card--main::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--op) 14%,transparent),transparent 60%)}
.contact-card--main .material-symbols-rounded,.contact-card--main .contact-card__sub{color:color-mix(in srgb,var(--op) 85%,transparent)}
.contact-card--main:hover{box-shadow:0 14px 36px color-mix(in srgb,var(--p) 35%,transparent)}

/* ===== footer / fab / snackbar ===== */
.footer{position:relative;z-index:1;padding:3rem 1rem 5.5rem;text-align:center;color:var(--osv);font-weight:700}
@media(max-width:640px){.footer{padding:2rem 1rem 6.5rem}}
.footer__sub{margin-top:.4rem;font-size:.85rem;opacity:.55}

/* ===== topbar compact при скролле ===== */
.topbar{transition:padding .3s var(--e-standard),background-color .35s var(--e-standard),border-color .35s var(--e-standard),color .35s var(--e-standard),box-shadow .3s var(--e-standard)}
.topbar.scrolled{padding-block:.45rem;box-shadow:0 6px 24px color-mix(in srgb,var(--osf) 8%,transparent)}

/* ===== hamburger (моб.) ===== */
.ham{display:none;width:42px;height:42px;border-radius:var(--r-full);background:var(--cll);border:1px solid var(--olv);flex-direction:column;align-items:center;justify-content:center;gap:5px;position:relative;overflow:hidden;transition:background var(--mo),transform 200ms var(--e-spring)}
.ham:hover{background:var(--ch);transform:scale(1.08)}
.ham span{width:18px;height:2px;border-radius:2px;background:var(--osf);transition:transform .45s var(--spring-l),opacity .15s}
.ham[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scale(.4)}
.ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== overlay-меню ===== */
.ov{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:90px 20px 40px;background:color-mix(in srgb,var(--sf) 90%,transparent);backdrop-filter:blur(32px) saturate(1.5);-webkit-backdrop-filter:blur(32px) saturate(1.5);opacity:0;pointer-events:none;transform:scale(.96);transition:opacity .35s var(--e-standard),transform .55s var(--spring-l)}
.ov.open{opacity:1;pointer-events:auto;transform:none}
.ov nav{display:grid;gap:12px;width:min(400px,100%)}
.ov nav a{min-height:60px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--r-l);background:var(--cl);border:1px solid var(--olv);font-weight:800;font-size:1.05rem;position:relative;overflow:hidden;transition:transform .4s var(--spring-l),background var(--mo),color var(--mo)}
.ov.open nav a{animation:ovIn .55s var(--spring-l) backwards}
.ov.open nav a:nth-child(1){animation-delay:.05s}
.ov.open nav a:nth-child(2){animation-delay:.11s}
.ov.open nav a:nth-child(3){animation-delay:.17s}
.ov.open nav a:nth-child(4){animation-delay:.23s}
@keyframes ovIn{from{opacity:0;transform:translateY(20px) scale(.94)}}
.ov nav a:hover{background:var(--pc);color:var(--opc);transform:scale(1.03)}

/* ===== speed dial FAB ===== */
.speed{position:fixed;right:1.4rem;bottom:1.4rem;z-index:130;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.speed-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.speed-item{min-height:44px;display:inline-flex;align-items:center;gap:9px;padding:0 16px;border-radius:var(--r-full);background:var(--ch);color:var(--osf);font-weight:800;font-size:.85rem;box-shadow:0 4px 14px rgba(0,0,0,.14);border:1px solid var(--olv);opacity:0;transform:translateY(16px) scale(.85);transition:opacity .25s var(--e-standard),transform .5s var(--spring-l),background var(--mo),color var(--mo)}
.speed-item .material-symbols-rounded{font-size:1.1rem}
.speed.open .speed-actions{pointer-events:auto}
.speed.open .speed-item{opacity:1;transform:none}
.speed.open .speed-item:nth-child(1){transition-delay:20ms}
.speed.open .speed-item:nth-child(2){transition-delay:55ms}
.speed.open .speed-item:nth-child(3){transition-delay:90ms}
.speed.open .speed-item:nth-child(4){transition-delay:125ms}
.speed.open .speed-item:nth-child(5){transition-delay:160ms}
.speed-item:hover{background:var(--pc);color:var(--opc)}
.speed-item:active{transform:scale(.94)}
.speed-trigger{width:56px;height:56px;border-radius:var(--r-full);display:grid;place-items:center;background:var(--p);color:var(--op);box-shadow:0 8px 26px color-mix(in srgb,var(--p) 38%,transparent);position:relative;overflow:hidden;transition:transform .45s var(--spring-l),border-radius .45s var(--spring-l)}
.speed-trigger:hover{transform:translateY(-3px) scale(1.06);border-radius:38%}
.speed-trigger:active{transform:scale(.9);border-radius:16px}
.speed-trigger .material-symbols-rounded{position:absolute;font-size:26px;transition:opacity .2s var(--e-standard),transform .45s var(--spring-l)}
.speed-trigger .close{opacity:0;transform:rotate(-90deg) scale(.6)}
.speed.open .speed-trigger .menu{opacity:0;transform:rotate(90deg) scale(.6)}
.speed.open .speed-trigger .close{opacity:1;transform:none}

.snk{position:fixed;bottom:1.6rem;left:50%;z-index:200;display:flex;align-items:center;gap:.6rem;padding:.85rem 1.2rem;border-radius:var(--r-s);background:var(--osf);color:var(--sf);font-weight:700;font-size:.88rem;box-shadow:0 6px 20px rgba(0,0,0,.28);transform:translateX(-50%) translateY(16px) scale(.92);opacity:0;pointer-events:none;transition:transform .5s var(--spring-l),opacity var(--mo)}
.snk.on{transform:translateX(-50%) translateY(0) scale(1);opacity:1}
.snk .material-symbols-rounded{color:var(--p);font-size:1.15rem;font-variation-settings:"FILL" 1,"wght" 600,"GRAD" 0,"opsz" 20}

/* ===== reveal ===== */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .65s var(--e-emphasized),transform .65s var(--e-emphasized)}
.reveal.vis{opacity:1;transform:none}
/* карточка профиля: сохраняем 3D-tilt поверх reveal-трансформа */
.profile.reveal.vis{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}

/* ===== параллакс hero при скролле ===== */
@supports(animation-timeline:view()){
  .hero__blob{animation:blobPar linear both;animation-timeline:scroll();animation-range:0% 60%}
  @keyframes blobPar{from{transform:translateX(-50%) translateY(0) scale(1);opacity:.7}to{transform:translateX(-50%) translateY(-70px) scale(1.12);opacity:1}}
  .m3morph{animation:morphPar linear both,morphColor 9s ease-in-out infinite;animation-timeline:scroll(),auto;animation-range:0% 55%,normal}
  @keyframes morphPar{to{transform:translateY(-46px) rotate(30deg)}}
  .profile{animation:cardUp linear both;animation-timeline:scroll();animation-range:0% 45%}
  @keyframes cardUp{to{transform:perspective(1100px) translateY(-22px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}}
}

/* ===== mobile ===== */
@media(max-width:640px){
  .wrap{width:calc(100% - 1.5rem)}
  .topbar__nav{display:none}
  .ham{display:flex}
  .profile{grid-template-columns:1fr;justify-items:start;gap:1.4rem}
  .profile__side{flex-direction:row;align-items:center}
  .profile__chips{flex-direction:row;flex-wrap:wrap}
  .achip{width:auto}
  .contact-grid{grid-template-columns:1fr}
  .skill-groups{grid-template-columns:1fr;gap:.65rem}
  .skill-group{padding:1rem 1.1rem}
  .chip--soft{overflow-wrap:break-word;max-width:100%}
  .facts__row{grid-template-columns:1fr;gap:.15rem;padding:.8rem 1.1rem}
  .timeline{padding-left:2rem}
  .timeline::before,.timeline__progress{left:.75rem}
  .timeline__dot{left:-2rem;width:1.6rem;height:1.6rem;font-size:.72rem}
  .hero__shape--b{display:none}
  .m3morph{width:64px;top:2%;right:5%;opacity:.4}
  .sep{height:34px}
  .speed{right:1rem;bottom:1rem}
  .speed-trigger{width:52px;height:52px}
  .contact-card:hover,.timeline__card:hover,.skill-group:hover,.speed-trigger:hover{transform:none}
  .badge-block{padding:2rem 0 1.5rem}
  @supports(animation-timeline:view()){
    .hero__blob,.m3morph,.profile{animation:none}
  }
    .music-player{padding:.9rem;gap:.6rem}
    .music-player__row{gap:.7rem}
  .music-player__artwork{width:48px;height:48px;border-radius:12px}
  .music-player__note{font-size:24px}
  .profile__actions{gap:.5rem}
  .profile__actions .btn{padding:0 1.1rem;font-size:.82rem;min-height:42px}
  body{padding-bottom:env(safe-area-inset-bottom,0)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal,.reveal .facts__row,.reveal .ticks li,.reveal .chip--soft,.reveal .skill-group,.reveal .timeline__item,.reveal .contact-card{opacity:1!important;transform:none!important}
}
@media(hover:none){
  .profile:hover::before,.contact-card:hover::after{opacity:0}
  .contact-card:hover,.timeline__card:hover,.skill-group:hover,.chip:hover{transform:none;box-shadow:none}
}

/* ===== фон: анимированные MD3-фигуры ===== */
.bg-shapes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--py:0px}
.bgs{position:absolute;left:var(--x);top:var(--y);width:var(--s);color:var(--c,var(--pc));opacity:0;transform:translate(calc(var(--px,0px)*var(--k,0)*-.55),calc(var(--py,0px)*var(--k,0)));animation:bgsIn 1.6s var(--e-emphasized) forwards,bgsColor 14s ease-in-out infinite}
.bgs::after{content:"";position:absolute;inset:-2.2rem;background:radial-gradient(closest-side,color-mix(in srgb,var(--c,var(--pc)) 14%,transparent),transparent 70%);z-index:-1}
.bgs svg{width:100%;height:100%;display:block;overflow:visible}
.bgs__float{transform-origin:50% 50%;animation:bgsFloat var(--d) ease-in-out infinite alternate}
.bgs__spin{transform-origin:50% 50%;animation:bgsSpin var(--d) linear infinite}
@keyframes bgsIn{to{opacity:var(--o,.1)}}
@keyframes bgsFloat{from{transform:translateY(-14px) rotate(-8deg)}to{transform:translateY(14px) rotate(10deg)}}
@keyframes bgsSpin{to{transform:rotate(360deg)}}
.bgs--near{--k:-.08}
.bgs--mid{--k:-.04}
.bgs--far{--k:-.015}

/* ===== filter chips ===== */

/* ===== tooltips ===== */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-5px) scale(.92);background:var(--osf);color:var(--sf);padding:.3rem .65rem;border-radius:6px;font-size:.74rem;font-weight:700;white-space:nowrap;z-index:60;opacity:0;pointer-events:none;transition:opacity var(--mo),transform 200ms var(--e-spring);box-shadow:0 6px 18px color-mix(in srgb,black 22%,transparent)}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.achip{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:6px;width:clamp(96px,16vw,140px);height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--olv);background:transparent;color:var(--osv);font-family:var(--f-brand);font-weight:600;font-size:.82rem;letter-spacing:.01em;cursor:pointer;transition:background .2s var(--mo),color .2s var(--mo),border-color .2s var(--mo),transform .35s var(--spring-l)}
.achip .material-symbols-rounded{font-size:18px;color:var(--p);transition:transform .35s var(--spring-l)}
.achip:hover{background:color-mix(in srgb,var(--p) 6%,transparent);border-color:color-mix(in srgb,var(--p) 35%,var(--olv))}
.achip:hover .material-symbols-rounded{transform:scale(1.12) rotate(-6deg)}
.achip:active{transform:scale(.96);border-radius:16px}


.badge-block{padding:3rem 0 2rem;text-align:center}
.badges{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center}
.badges__link{display:inline-block;line-height:0;border-radius:5px}
.badges__link .badges__img{border-color:var(--olv)}
.badges__img{display:block;width:88px;height:31px;border-radius:5px;border:1px solid var(--olv);image-rendering:pixelated;background:var(--cll);transition:transform 200ms var(--e-spring),box-shadow 200ms var(--e-spring),border-color var(--mo)}
.badges__img:hover{transform:translateY(-2px) scale(1.06);box-shadow:0 4px 14px color-mix(in srgb,var(--p) 18%,transparent);border-color:var(--p)}

/* ===== вращающееся конусное кольцо карточки профиля (hover) ===== */
@property --card-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.profile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--card-a),transparent 0deg,color-mix(in srgb,var(--p) 85%,transparent) 70deg,transparent 160deg,transparent 200deg,color-mix(in srgb,var(--pc) 90%,transparent) 290deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s var(--mo);animation:cardAngle 5s linear infinite}
.profile:hover::after{opacity:1}
@keyframes cardAngle{to{--card-a:360deg}}

/* ===== wipe-появление заголовков секций (MD3 reveal) ===== */
.reveal .sec__title{clip-path:inset(-12% 100% -12% 0);transition:clip-path .9s var(--e-emphasized) .12s}
.reveal.vis .sec__title{clip-path:inset(-12% -2% -12% 0)}

/* ===== точки таймлайна: заполнение по мере скролла ===== */
.timeline__dot.done{background:var(--p);color:var(--op);border-color:var(--p);box-shadow:0 0 0 5px color-mix(in srgb,var(--p) 16%,transparent);animation:dotPop .5s var(--spring-l)}
@keyframes dotPop{from{transform:scale(.55)}to{transform:scale(1)}}

/* ===== скроллбар в духе MD3 ===== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--olv);border:2px solid var(--sf);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--ol)}

/* ===== круглый wipe смены темы (View Transitions) ===== */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2147483646;clip-path:circle(0 at var(--vt-x,50%) var(--vt-y,50%));animation:vtReveal .65s var(--e-emphasized) forwards}
@keyframes vtReveal{to{clip-path:circle(150% at var(--vt-x,50%) var(--vt-y,50%))}}

/* fallback-анимация смены темы (браузеры без View Transition API) */
.theme-pulse{position:fixed;z-index:9999;width:0;height:0;border-radius:50%;background:color-mix(in srgb,var(--p) 18%,transparent);transform:translate(-50%,-50%);pointer-events:none;animation:themePulse .55s var(--e-emphasized) forwards}
@keyframes themePulse{0%{width:0;height:0;opacity:.9}100%{width:300vmax;height:300vmax;opacity:0}}

/* ===== MD3: Assist Chip (32px, иконка + лейбл) ===== */

/* ===== MD3: Outlined Card ===== */
.md-card{position:relative;background:var(--cl);border-radius:12px;padding:1.2rem 1.4rem;margin-bottom:1rem;transition:background .2s var(--mo),box-shadow .2s var(--mo)}
.md-card--outlined{border:1px solid var(--olv);background:transparent}
.md-card--outlined:hover{border-color:color-mix(in srgb,var(--p) 35%,var(--olv));box-shadow:0 2px 12px color-mix(in srgb,var(--p) 8%,transparent)}
.md-card__hd{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
.md-card__ic{color:var(--p);font-size:1.2rem;font-variation-settings:"FILL" 1,"wght" 600,"GRAD" 0,"opsz" 24;animation:cardIc 4.5s ease-in-out infinite}
@keyframes cardIc{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(8deg)}}
.md-card__h{font-family:var(--f-mono);font-size:.95rem;font-weight:700;color:var(--osf)}
.md-card__sub{color:var(--osv);font-size:.92rem;font-weight:500;line-height:1.45}

/* ===== MD3: Circular Progress (4dp stroke, indeterminate) ===== */
.circprog{display:none;width:24px;height:24px;transform:rotate(-90deg);color:var(--p);vertical-align:middle}
.circprog circle{fill:none;stroke:currentColor;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1 100;stroke-dashoffset:0;animation:circSpin 1.1s linear infinite}
@keyframes circSpin{to{stroke-dasharray:80 100;stroke-dashoffset:-120}}
.contact-card.is-copying .contact-card__icon{display:none}
.contact-card.is-copying .circprog{display:inline-block;margin-bottom:.3rem}

/* ===== ENHANCED MD3 MOTION ===== */

/* Hero title: hover spring lift + shine sweep (без background-clip) */
.profile__name{overflow:hidden;border-radius:14px}
.profile__name::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--p) 18%,transparent) 50%,transparent 58%);background-size:200% 100%;background-position:-200% 0;opacity:0;pointer-events:none}
.profile__name:hover{transform:translateY(-3px) rotate(-.35deg)!important}
.profile__name:hover::before{animation:nameShine .95s var(--e-emphasized) forwards}
@keyframes nameShine{0%{opacity:0;background-position:-200% 0}12%{opacity:1}85%{opacity:1}100%{opacity:0;background-position:100% 0}}

/* Hero blob: translate-свойство для mouse follow */
.hero__blob{translate:var(--hm-x,0) var(--hm-y,0);transition:translate .5s var(--spring-l)}

/* m3morph: цветовой цикл (определено выше; keyframes тут для ясности) */
@keyframes morphColor{0%,100%{color:var(--p)}33%{color:var(--sc)}66%{color:var(--tc)}}

/* bg shapes: мягкая пульсация цвета */
@keyframes bgsColor{0%,100%{color:var(--c,var(--pc))}50%{color:color-mix(in srgb,var(--c,var(--pc)) 55%,var(--sc))}}

/* Timeline cards: shine sweep */
.timeline__card{position:relative;overflow:hidden}
.timeline__card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--p) 12%,transparent) 50%,transparent 70%);background-size:200% 100%;transform:translateX(-100%);opacity:0;pointer-events:none;transition:opacity .3s var(--mo)}
.timeline__card:hover::after{opacity:1;animation:shineSweep .9s var(--e-emphasized)}

/* Skill groups: shine sweep */
.skill-group{position:relative;overflow:hidden}
.skill-group::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--p) 10%,transparent) 50%,transparent 70%);background-size:200% 100%;transform:translateX(-100%);opacity:0;pointer-events:none;transition:opacity .3s var(--mo)}
.skill-group:hover::after{opacity:1;animation:shineSweep .9s var(--e-emphasized)}

/* Buttons: shine sweep (::before, чтобы не конфликтовать с ripple) */

/* Contact cards: shine sweep через ::before (::after занят spotlight-глоу) */
.contact-card::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--p) 14%,transparent) 50%,transparent 70%);background-size:200% 100%;transform:translateX(-100%);opacity:0;pointer-events:none;z-index:0;transition:opacity .3s var(--mo)}
.contact-card:hover::before{opacity:1;animation:shineSweep .9s var(--e-emphasized)}
.contact-card--main::before{background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--op) 28%,transparent) 50%,transparent 70%)}

/* Avatar: расширяющееся кольцо при hover */
.avatar::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--p);opacity:0;pointer-events:none;z-index:0}
.avatar:hover::after{animation:avatarRipple 1.4s ease-out infinite}
@keyframes avatarRipple{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.38)}}

/* Speed FAB: пульс-кольцо когда закрыт */
@keyframes fabPulse{
  0%{box-shadow:0 8px 26px color-mix(in srgb,var(--p) 38%,transparent),0 0 0 0 color-mix(in srgb,var(--p) 42%,transparent)}
  70%{box-shadow:0 8px 26px color-mix(in srgb,var(--p) 38%,transparent),0 0 0 14px transparent}
  100%{box-shadow:0 8px 26px color-mix(in srgb,var(--p) 38%,transparent),0 0 0 0 transparent}
}
.speed:not(.open) .speed-trigger{animation:fabPulse 3s ease-out infinite}

/* Marquee: скорость зависит от скорости скролла */
.marquee__track{animation-duration:var(--marquee-speed,26s)}

/* Topbar scrolled: лого слегка сжимается */
.topbar.scrolled .topbar__logo{transform:scale(.92)}

/* Shine sweep (используется в нескольких местах) */
@keyframes shineSweep{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Respect reduced motion для новых анимаций (базовая глобальная уже ловит их, но явно для псевдо-элементов) */
@media(prefers-reduced-motion:reduce){
  .profile__name::before,.timeline__card::after,.skill-group::after,.contact-card::before,.avatar::after{animation:none!important}
  .speed:not(.open) .speed-trigger{animation:none!important}
  .bgs{animation:bgsIn 1.6s var(--e-emphasized) forwards}
}

/* ===== music player ===== */
.music-player{display:flex;flex-direction:column;gap:.75rem;padding:1.2rem;margin-bottom:1.4rem;background:var(--cl);border:1px solid var(--olv);border-radius:var(--r-l)}
.music-player__row{display:flex;align-items:center;gap:1rem}
.music-player__artwork{flex-shrink:0;width:64px;height:64px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(135deg,var(--p),var(--sc));overflow:hidden;position:relative}
.music-player__note{font-size:32px;font-variation-settings:"FILL" 1,"wght" 400;color:var(--opc);position:absolute}
.music-player__cover{width:100%;height:100%;object-fit:cover;border-radius:inherit;position:relative;z-index:1}
.music-player__info{flex:1;min-width:0}
.music-player__track{display:block;font-weight:800;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-player__artist{display:block;font-size:.85rem;color:var(--osv);margin-top:.15rem}
.music-player audio{width:100%;height:40px;color-scheme:dark;accent-color:var(--p)}
.music-player audio::-webkit-media-controls-panel{background:var(--cll)}
.music-player audio::-webkit-media-controls-current-time-display,
.music-player audio::-webkit-media-controls-time-remaining-display{color:var(--osv);font-family:var(--f-mono)}
.music-list{border:1px solid var(--olv);border-radius:var(--r-l);overflow:hidden}
.music-list__summary{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;font-weight:700;font-size:.9rem;cursor:pointer;user-select:none;color:var(--osv);list-style:none;transition:background var(--mo)}
.music-list__summary::-webkit-details-marker{display:none}
.music-list__summary::marker{display:none;content:''}
.music-list__summary .material-symbols-rounded{font-size:1.2rem;color:var(--p);transition:transform .35s var(--e-spring)}
.music-list[open] .music-list__summary .material-symbols-rounded{transform:rotate(180deg)}
.music-list__summary:hover{background:color-mix(in srgb,var(--p) 4%,transparent)}
.music-list__inner{list-style:none;display:flex;flex-direction:column;gap:.5rem;padding:0 .9rem .85rem}
.music-list__item{display:flex;align-items:center;gap:.85rem;padding:.8rem 1rem;background:var(--cl);border:1px solid var(--olv);border-radius:var(--r-l);transition:border-color var(--mo),background var(--mo);cursor:pointer}
.music-list__item:hover{border-color:var(--p);background:color-mix(in srgb,var(--p) 4%,var(--cl))}
.music-list__item.playing{border-color:var(--p);background:color-mix(in srgb,var(--p) 10%,var(--cl))}
.music-list__play{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;border:1px solid var(--olv);background:transparent;color:var(--p);cursor:pointer;transition:background var(--mo),transform 200ms var(--e-spring)}
.music-list__play:hover{background:color-mix(in srgb,var(--p) 12%,transparent);transform:scale(1.08)}
.music-list__play .material-symbols-rounded{font-size:18px}
.music-list__info{min-width:0}
.music-list__title{display:block;font-weight:700;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-list__artist{display:block;font-size:.78rem;color:var(--osv);margin-top:.1rem}


.ov nav .btn{width:100%}

.rip{position:absolute;width:16px;height:16px;border-radius:50%;pointer-events:none;background:color-mix(in srgb,currentColor 22%,transparent);opacity:1;transform:translate(-50%,-50%) scale(0);animation:ripOut .55s var(--e-standard) forwards}
@keyframes ripOut{to{transform:translate(-50%,-50%) scale(3.5);opacity:0}}

.btn::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--op) 30%,transparent) 50%,transparent 70%);background-size:200% 100%;transform:translateX(-100%);opacity:0;pointer-events:none;transition:opacity .3s var(--mo)}
.btn:hover::before{opacity:1;animation:shineSweep .9s var(--e-emphasized)}
.btn--tonal::before{background:linear-gradient(115deg,transparent 30%,color-mix(in srgb,var(--osc) 24%,transparent) 50%,transparent 70%)}