/* ===== Шрифт (локально) ===== */
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap;
  src: url('/fonts/onest-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-weight: 100 900; font-display: swap;
  src: url('/fonts/onest-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #f4f6fb; --card: #ffffff; --ink: #121a2b; --muted: #55627a; --line: #e2e8f3;
  --accent: #3556ff; --accent-soft: #e8edff; --pop: #ffd84d; --good: #1fb865;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --shadow: 0 1px 2px rgba(18, 26, 43, .05), 0 10px 30px rgba(18, 26, 43, .07);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 2rem 1.1rem; background: var(--bg); color: var(--ink); font: 400 1.0625rem/1.55 var(--font); overflow-x: hidden; position: relative; }
h1, h2, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }

/* мягкие цветные пятна на фоне: только CSS, без картинок */
.blob { position: fixed; border-radius: 50%; filter: blur(60px); opacity: .55; pointer-events: none; z-index: 0; }
.blob--a { width: 22rem; height: 22rem; background: var(--pop); top: -8rem; right: -6rem; }
.blob--b { width: 20rem; height: 20rem; background: #b9c8ff; bottom: -8rem; left: -7rem; }

.page { position: relative; z-index: 1; width: 100%; min-width: 0; max-width: 30rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }

/* ===== Блок «обо мне» ===== */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .6rem; }
.avatar { width: 6.5rem; height: 6.5rem; border-radius: 30px; background: var(--pop); display: grid; place-items: center; overflow: hidden; transform: rotate(-4deg); box-shadow: var(--shadow); margin-bottom: .6rem; }
.avatar span { font-size: 2.4rem; font-weight: 800; letter-spacing: -.04em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.hello { font-size: 1.15rem; color: var(--muted); font-weight: 500; }
.wave { display: inline-block; transform-origin: 70% 70%; }
h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.tagline { color: var(--muted); font-size: 1.15rem; max-width: 26rem; }
.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.tags li { display: inline-flex; align-items: center; gap: .15rem; padding: .45rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: 99px; font-weight: 600; font-size: .95rem; box-shadow: 0 1px 2px rgba(18, 26, 43, .04); }

/* ===== Блок «давай общаться» ===== */
.talk { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; padding: 1.5rem; background: var(--card); border-radius: 28px; box-shadow: var(--shadow); }
.status { display: inline-flex; align-items: center; gap: .5rem; justify-self: start; font-size: .85rem; font-weight: 600; color: #127a43; background: #e5f7ec; padding: .25rem .7rem; border-radius: 99px; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--good); }
h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.cta { color: var(--muted); }
.links { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; margin-top: .6rem; }
.link { min-width: 0; display: flex; align-items: center; gap: .85rem; min-height: 3.75rem; padding: .6rem 1rem .6rem .7rem; background: var(--bg); border: 1px solid var(--line); border-radius: 18px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
.link .ic { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.link .lk { font-weight: 700; white-space: nowrap; }
.link .lh { min-width: 0; margin-left: auto; color: var(--muted); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link::after { content: '→'; color: var(--accent); font-weight: 700; }
.link:hover { transform: translateY(-2px); background: var(--card); border-color: var(--accent); box-shadow: var(--shadow); }
.link:active { transform: scale(.98); }
.link--mail { background: var(--accent); border-color: var(--accent); color: #fff; }
.link--mail .ic { background: rgba(255, 255, 255, .2); color: #fff; }
.link--mail .lh, .link--mail::after { color: rgba(255, 255, 255, .9); }
.link--mail:hover { background: #2443e0; border-color: #2443e0; }

/* ===== Компьютер: две колонки ===== */
@media (min-width: 56rem) {
  body { padding: 3rem 2rem; }
  .page { max-width: 62rem; grid-template-columns: minmax(0, 1fr) 26rem; align-items: center; gap: 4.5rem; }
  .avatar { width: 9rem; height: 9rem; border-radius: 40px; }
  .avatar span { font-size: 3.3rem; }
  h1 { font-size: clamp(3.4rem, 6vw, 4.6rem); }
  .tagline { font-size: 1.3rem; }
  .tags li { font-size: 1rem; }
  .talk { padding: 2rem; }
}
@media (min-width: 40rem) and (max-width: 55.99rem) { .page { max-width: 34rem; } .talk { padding: 2rem; } }

/* ===== Анимация: один вход + приветственная «волна» ===== */
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } 50% { transform: rotate(8deg); } }
@keyframes pop { from { opacity: 0; transform: rotate(-4deg) scale(.7); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .avatar { animation: pop .6s cubic-bezier(.3, 1.4, .5, 1) backwards; }
  .hero > :not(.avatar):not(.tagline), .talk { animation: rise .6s cubic-bezier(.22, .8, .2, 1) both; }
  .hello { animation-delay: .1s; } h1 { animation-delay: .16s; } .tagline { animation-delay: .22s; } .tags { animation-delay: .28s; }
  .talk { animation-delay: .34s; }
  .links li { animation: rise .5s cubic-bezier(.22, .8, .2, 1) both; }
  .links li:nth-child(1) { animation-delay: .5s; } .links li:nth-child(2) { animation-delay: .56s; }
  .links li:nth-child(3) { animation-delay: .62s; } .links li:nth-child(4) { animation-delay: .68s; }
  .wave { animation: wave 1.8s .9s 2; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* пока JS подгружает config.json, страница скрыта (вёрстка не прыгает); анимация входа стартует после показа */
html.js:not(.ready) body[data-hide] .page { visibility: hidden; }
html.js:not(.ready) body[data-hide] .page * { animation-play-state: paused !important; }

/* ===== Верхнее меню и внутренние страницы ===== */
.topnav { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 3; width: 100%; max-width: 62rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1.1rem; }
.topnav:empty { display: none; }
.topnav .brand { font-weight: 800; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; min-height: 2.75rem; display: inline-flex; align-items: center; }
.topnav ul { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topnav ul::-webkit-scrollbar { display: none; }
.topnav .pill { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .95rem; border-radius: 99px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--muted); white-space: nowrap; transition: background .15s, color .15s; }
.topnav .pill:hover { color: var(--ink); }
.topnav .pill[aria-current='page'] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
body.has-nav { padding-top: 5rem; }
body.doc { place-items: start center; }
.page.page--doc { max-width: 40rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.doc-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.5rem; background: var(--card); border-radius: 28px; box-shadow: var(--shadow); }
.doc-card h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
.prose { display: grid; gap: 1rem; color: var(--muted); }
.prose h2 { color: var(--ink); margin-top: .5rem; }
.prose a { color: var(--accent); }
@media (min-width: 56rem) { .doc-card { padding: 2.5rem; } body.has-nav { padding-top: 6rem; } }

/* с настоящим фото аватар крупнее, чтобы лицо было видно */
.avatar.has-photo { width: 8.5rem; height: 8.5rem; background: var(--card); }
.avatar.has-photo img { object-position: 50% 22%; }
@media (min-width: 56rem) { .avatar.has-photo { width: 13rem; height: 13rem; } }


/* ===== Факты, слова тэглайна, живые детали ===== */
.facts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .95rem; font-weight: 600; color: var(--ink); }
.facts li { display: inline-flex; align-items: center; gap: .3rem; }
.em { font-style: normal; }
.tagline .w { display: inline-block; }
.avatar { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.avatar:hover { transform: rotate(3deg) scale(1.05); }
.link { position: relative; overflow: hidden; }
.link::before { content: ''; position: absolute; inset: 0 auto 0 -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg) translateX(0); opacity: 0; pointer-events: none; }
.link:hover::before { opacity: 1; transform: skewX(-18deg) translateX(420%); transition: transform .8s ease, opacity .2s; }

/* ===== Внутренние страницы: шапка, проекты, галерея ===== */
.page.page--wide { max-width: 62rem; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 3.5rem; }
.page-intro { display: grid; gap: .6rem; justify-items: start; }
.page-intro h1 { font-size: clamp(2.6rem, 11vw, 4.4rem); }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 40rem; }
.proj { display: grid; gap: 1.5rem; }
.proj-head { display: grid; gap: .7rem; justify-items: start; max-width: 40rem; }
.proj-head h2 { font-size: clamp(1.8rem, 7vw, 2.6rem); }
.proj-head p { color: var(--muted); }
.meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.meta li { padding: .25rem .7rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .82rem; }
.gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.shot { margin: 0; min-width: 0; }
.shot a { display: block; overflow: hidden; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.shot img { width: 100%; height: auto; transition: transform .7s cubic-bezier(.22, .8, .2, 1); }
.shot a:hover img { transform: scale(1.03); }
.shot--plan img { padding: .8rem; background: #fff; }
.shot--portrait { max-width: 26rem; }
.shot figcaption { margin-top: .55rem; padding-inline: .35rem; font-size: .9rem; color: var(--muted); }
.soon { display: grid; gap: .3rem; padding: 1.4rem 1.5rem; border: 2px dashed var(--line); border-radius: 24px; color: var(--muted); }
.soon .hello { font-size: 1rem; color: var(--ink); font-weight: 700; }
@media (min-width: 48rem) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
  .shot--lead, .shot--plan { grid-column: 1 / -1; }
  .shot--portrait { grid-column: auto; }
  .page.page--wide { gap: 5rem; }
}

/* ===== Страница проектов: игра ===== */
.game-feature { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.game-shot { position: relative; display: block; border-radius: 26px; overflow: hidden; background: #0a0a0c; box-shadow: var(--shadow); }
.game-shot img { width: 100%; height: auto; transition: transform .8s cubic-bezier(.22, .8, .2, 1); }
.game-shot:hover img { transform: scale(1.04); }
.play { position: absolute; right: 1rem; bottom: 1rem; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #121a2b; font-size: 1.2rem; padding-left: .2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.game-shot:hover .play { transform: scale(1.12); }
.game-body { display: grid; gap: .9rem; justify-items: start; }
.game-body h2 { font-size: clamp(2rem, 8vw, 3rem); }
.game-body p { color: var(--muted); max-width: 40rem; }
.game-body .lead { color: var(--ink); font-weight: 500; }
.actions { margin-top: .5rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 1.7rem; border-radius: 99px; font: 700 1.05rem var(--font); text-decoration: none; transition: transform .15s, box-shadow .2s, background .15s; -webkit-tap-highlight-color: transparent; }
.btn--primary { background: var(--accent); color: #fff; box-shadow: 0 8px 22px rgba(53, 86, 255, .35); }
.btn--primary:hover { background: #2443e0; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(53, 86, 255, .4); }
.btn:active { transform: scale(.97); }
.game-extra { grid-column: 1 / -1; }
@media (min-width: 56rem) {
  .game-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem 3rem; align-items: center; }
  .game-extra { grid-column: 1 / -1; max-width: 42rem; }
}

/* ===== Красивые анимации ===== */
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes drift-a { from { transform: translate(0, 0) scale(1); } to { transform: translate(-3rem, 4rem) scale(1.12); } }
@keyframes drift-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(4rem, -3rem) scale(1.1); } }
@keyframes word { from { opacity: 0; transform: translateY(.7em) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.9) translateY(1rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .blob { will-change: transform; }
  .blob--a { animation: drift-a 16s ease-in-out infinite alternate; }
  .blob--b { animation: drift-b 20s ease-in-out infinite alternate; }
  .tagline .w { animation: word .55s cubic-bezier(.22, .8, .2, 1) backwards; animation-delay: calc(.35s + var(--i, 0) * .06s); }
  .facts li { animation: rise .5s cubic-bezier(.22, .8, .2, 1) backwards; }
  .facts li:nth-child(1) { animation-delay: .25s; } .facts li:nth-child(2) { animation-delay: .3s; } .facts li:nth-child(3) { animation-delay: .35s; }
  .tags li { animation: pop-in .5s cubic-bezier(.3, 1.4, .5, 1) backwards, float 4.5s ease-in-out infinite; }
  .tags li:nth-child(1) { animation-delay: .8s, 1.4s; } .tags li:nth-child(2) { animation-delay: .9s, 2s; } .tags li:nth-child(3) { animation-delay: 1s, 2.6s; }
  .page-intro > * { animation: rise .6s cubic-bezier(.22, .8, .2, 1) backwards; }
  .page-intro > :nth-child(2) { animation-delay: .08s; } .page-intro > :nth-child(3) { animation-delay: .16s; }
  .proj:first-of-type .proj-head > *, .game-body > * { animation: rise .6s cubic-bezier(.22, .8, .2, 1) backwards; }
  .game-body > :nth-child(2) { animation-delay: .06s; } .game-body > :nth-child(3) { animation-delay: .12s; } .game-body > :nth-child(4) { animation-delay: .18s; }
  .play { animation: pulse-ring 2.4s ease-out infinite; }
  @keyframes pulse-ring { 0% { box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 255, 255, .6); } 70%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1.4rem rgba(255, 255, 255, 0); } }
}
/* появление по мере прокрутки: только там, где браузер умеет, без поддержки просто статика */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .shot, .proj-head, .soon, .game-extra { animation: scroll-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .shot img { animation: img-settle linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    @keyframes scroll-in { from { opacity: 0; transform: translateY(2.2rem) scale(.97); } to { opacity: 1; transform: none; } }
    @keyframes img-settle { from { scale: 1.12; } to { scale: 1; } }
  }
}
/* плавные переходы между страницами (Chrome, Safari 18.2+; в остальных просто обычный переход) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease both vt-out; }
::view-transition-new(root) { animation: .32s ease both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* компактное меню на узких телефонах, чтобы влезали все пункты */
@media (max-width: 30rem) {
  .topnav { gap: .4rem; padding-inline: .8rem; }
  .topnav .brand { font-size: .95rem; }
  .topnav ul { gap: .1rem; }
  .topnav .pill { padding: 0 .65rem; font-size: .9rem; }
}

/* первый кадр страницы виден сразу: без появления по прокрутке (быстрее LCP) */
@supports (animation-timeline: view()) { .proj:first-of-type .shot--lead, .proj:first-of-type .shot--lead img, .proj:first-of-type .proj-head { animation: none; } }

/* ===== Список проектов (карточки) ===== */
.works { display: grid; gap: 1.4rem; }
.work { display: grid; min-width: 0; overflow: hidden; border-radius: 28px; background: var(--card); color: inherit; text-decoration: none; box-shadow: var(--shadow); transition: transform .4s cubic-bezier(.22, .8, .2, 1), box-shadow .4s; -webkit-tap-highlight-color: transparent; }
.work .pic { aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg); }
.work .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.22, .8, .2, 1); }
.work .info { display: grid; gap: .55rem; justify-items: start; padding: 1.2rem 1.4rem 1.5rem; }
.work h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.work p { color: var(--muted); }
.work .more { margin-top: .3rem; font-weight: 700; color: var(--accent); }
.work .more span { display: inline-block; transition: transform .25s; }
.work:hover { transform: translateY(-5px); box-shadow: 0 20px 46px rgba(18, 26, 43, .15); }
.work:hover .pic img { transform: scale(1.06); }
.work:hover .more span { transform: translateX(5px); }
.work:active { transform: scale(.985); }
@media (min-width: 48rem) {
  .works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; }
  .work--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .work--lead .pic { aspect-ratio: auto; min-height: 24rem; }
  .work--lead .info { align-content: center; padding: 2.2rem; }
  .work--lead h2 { font-size: 2.6rem; }
}

/* ===== Страница проекта ===== */
.back { font-weight: 600; }
.back a { color: var(--muted); text-decoration: none; }
.back a:hover { color: var(--accent); }
.case-head { display: grid; gap: .8rem; justify-items: start; margin-top: -1.2rem; }
.case-head h1 { font-size: clamp(2.5rem, 11vw, 4.6rem); }
.gallery--one { grid-template-columns: minmax(0, 1fr); }
.shot--cover a { border-radius: 28px; }
.case-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.stat { display: grid; gap: .1rem; padding: 1rem 1.1rem; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.stat b { font-size: clamp(1.8rem, 8vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .9rem; }
.case-body { display: grid; gap: 1.1rem; max-width: 44rem; }
.case-body .intro { font-size: clamp(1.4rem, 5.5vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); max-width: none; }
.case-body h2 { margin-top: 1rem; font-size: clamp(1.4rem, 5vw, 1.8rem); }
.case-body p { color: var(--muted); font-size: 1.1rem; max-width: none; }
.case-block { display: grid; gap: 1.2rem; }
.block-title { font-size: clamp(1.5rem, 6vw, 2rem); }
.next-case { position: relative; display: grid; gap: .4rem; padding: 1.7rem; border-radius: 28px; background: var(--ink); color: #fff; text-decoration: none; overflow: hidden; transition: transform .3s cubic-bezier(.22, .8, .2, 1); }
.next-case .muted-w { color: rgba(255, 255, 255, .7); font-weight: 600; }
.next-title { font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; max-width: 90%; }
.next-arrow { position: absolute; right: 1.5rem; bottom: 1.4rem; font-size: 2rem; transition: transform .3s; }
.next-case:hover { transform: translateY(-3px); }
.next-case:hover .next-arrow { transform: translateX(8px); }
@media (min-width: 48rem) {
  .case-head { margin-top: -2rem; }
  .case-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .shot--portrait { max-width: none; }
  .next-case { padding: 2.4rem; }
}

/* первый кадр страницы проекта виден сразу, без анимации появления (быстрее LCP) */
@supports (animation-timeline: view()) { .gallery--one .shot, .gallery--one .shot img, .case-head, .back { animation: none; } }

/* если кадров нечётное число, последний занимает всю строку */
@media (min-width: 48rem) { .gallery > .shot:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* подсказка под кнопкой «Играть» */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; }
.note { font-size: .92rem; color: var(--muted); max-width: 24rem; }

/* на узких телефонах в шапке только имя, фамилия прячется, чтобы влезали все пункты */
@media (max-width: 26rem) { .topnav .brand-rest { display: none; } }

/* плитки «что живёт на сервере» */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .9rem; }
.tile { display: grid; gap: .4rem; align-content: start; padding: 1.2rem 1.3rem; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); color: inherit; text-decoration: none; transition: transform .3s cubic-bezier(.22, .8, .2, 1), box-shadow .3s; }
.tile h3 { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.tile p { color: var(--muted); font-size: .98rem; }
a.tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(18, 26, 43, .14); }
.tile .more { color: var(--accent); font-weight: 700; }

/* последняя плитка: «список открытый» */
.tile--more { background: transparent; box-shadow: none; border: 2px dashed var(--line); align-content: center; }
.tile--more h3 { color: var(--accent); }

/* ===== «Помахать»: тихая кнопка со счётчиком (не выделяется, повторяет приветствие 👋) ===== */
.wave-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-top: .3rem; padding-top: .9rem; border-top: 1px dashed var(--line); min-height: 3.9rem; }
.wave-row.off { visibility: hidden; }
.wave-btn { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font: 600 .92rem var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s, border-color .2s, background .2s, transform .1s; }
.wave-btn:hover { color: var(--ink); border-color: var(--accent); background: var(--card); }
.wave-btn:active { transform: scale(.96); }
.wave-btn[disabled] { cursor: default; }
.wave-em { display: inline-block; transform-origin: 70% 70%; }
.wave-btn.waving .wave-em { animation: wave 0.9s; }
.wave-count { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.wave-count b { color: var(--ink); font-weight: 700; }
.wave-plus { position: absolute; right: .6rem; top: -.2rem; font-size: .85rem; font-weight: 700; color: var(--accent); pointer-events: none; animation: wave-plus .9s ease-out forwards; }
@keyframes wave-plus { from { opacity: 0; transform: translateY(.3rem); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-1.5rem); } }
@media (prefers-reduced-motion: no-preference) { .wave-row { animation-delay: .85s; } }
.topnav .brand-rest { white-space: pre; }  /* в flex-контейнере ведущий пробел иначе схлопывается */