/* ====== main.css ====== */

/* ---- Base ---- */
:root { --gap:.6rem; --muted:#888; --orange:#ff9900; }
*{ box-sizing:border-box; }

body{
  background:#171819; color:#fffdfb; margin:0;
  font-family:
    -apple-system, system-ui,         /* SF на macOS/iOS */
    "Inter",                          /* fallback для Win/Android */
    "SF Pro Display",                 /* если локально установлен */
    BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
    sans-serif;
    min-height: 100dvh;        /* вся страница минимум на высоту окна */
    display: flex;             /* вертикальный флекс-контейнер */
    flex-direction: column;
}
body > main{
  flex: 1 0 auto;            /* контент тянется, футер уходит вниз */
}
body.lb-lock{ overflow:hidden; }
section{ padding-top:2rem; }

/* ---- Layout ---- */
.container{
  margin:0; padding-left:280px; padding-right:280px;
  max-width:none; width:100%;
}
@media (max-width:980px){ .container{ padding-left:64px; padding-right:64px; } }

/* ---- Header / Nav ---- */
header{ display:flex; align-items:flex-start; gap:36px; margin-top:36px; }
.nav-wrapper{ display:flex; flex-direction:column; align-items:flex-start; width:100%; }
.logo-img{ display:block; height:1.1rem; width:auto; margin:6px 12px 0 56px; opacity:0.5; }
.menu-panel{ position:relative; display:flex; align-items:flex-start; }
.menu-panel::before{ content:""; position:absolute; inset:0 auto 0 0; width:1px; background:#323437; border-radius:1px; }
@media (max-width:700px){ .menu-panel::before{ display:none; } }
.menu-block{ display:flex; flex-direction:column; align-items:flex-start; margin-left:22px; }
.main-menu{ display:flex; gap:18px; margin:0; }

.subheading{
  margin:0 0 2.5rem;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.5rem);
  font-weight:400; letter-spacing:.02em;
}
.subnav{ display:flex; gap:12px; margin:10px 0 0; padding:0; }

.menu-link,.sub-link{
  color:#bbb; font-size:1.1rem; text-decoration:none;
  padding:6px 16px; border-radius:8px; transition:background .25s, color 2s;
}
.menu-link:hover,.sub-link:hover{ color:var(--orange); }
.menu-link.current,.sub-link.current{ background:#242627; color:var(--orange); transition:background .5s, color .15s; }

/* Focus ring */
.menu-link:focus-visible,.sub-link:focus-visible,.tool:focus-visible,
.case-thumb2:focus-visible,.lightbox-close:focus-visible,.lightbox-arrow:focus-visible,
.contact-block:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; border-radius:8px; }

/* ---- Hero ---- */
.intro-hero{
  display:flex; flex-direction:column; justify-content:center;
  min-height:calc(100vh - 112px);
  font-size:1.35rem; font-weight:400; color:#fff; opacity:.90;
  line-height:1.4; letter-spacing:.01em;
  animation:heroFadeIn 1.1s cubic-bezier(.19,1,.22,1); position:relative;
}
@media (max-width:980px){
  .intro-hero{ font-size:1.2rem; line-height:normal; letter-spacing:normal; min-height:calc(100vh/2); }
}
@keyframes heroFadeIn{ from{ opacity:0; transform:translateY(30px);} to{ opacity:.90; transform:none;} }
.intro-divider{ height:1.5px; background:linear-gradient(90deg,#272829 0%,#434446 100%); margin-top:40px; border-radius:2px; opacity:.55; }

/* ---- Bio / Skills ---- */
.bio-section{ margin-top:148px; }
.skills-section{ margin:2rem 0 3rem; }
.skills-columns,.bio-columns{ display:grid; gap:32px; }
.skills-columns{ grid-template-columns:1fr 1fr; }
.bio-columns{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.bio-columns>.bio{ min-width:0; }
.bio{ font-size:1.35rem; font-weight:400; color:#fff; opacity:.90; line-height:1.4; letter-spacing:.01em; }
.bio p{ margin:0 0 1rem; max-width:68ch; }
.bio-photo{ max-width:100%; height:auto; object-fit:contain; width:auto; display:block; }
@media (max-width:980px){
  .skills-columns{ grid-template-columns:1fr; }
  .bio-columns{ grid-template-columns:1fr; }
  .bio-columns .bio:first-child{ order:2; }
  .bio-columns .bio:last-child{ order:1; }
}

/* ---- Cases ---- */
.case-card{
  border-radius:18px; overflow:hidden;
  box-shadow:0 2px 18px #2f343929; transition:box-shadow .18s, transform .2s;
  display:flex; flex-direction:column;
}
.case-card:hover{ box-shadow:0 4px 28px #19c0ff2c; transform:translateY(-2px) scale(1.018); }
.case-img-wrap{ background:#17191e; width:100%; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.case-thumb{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:0; transition:filter .18s; cursor:pointer; }
.case-meta{ padding:22px 18px 18px; display:flex; flex-direction:column; gap:7px; }
.case-title{ font-size:1.19rem; font-weight:600; color:#fff; margin-bottom:2px; text-decoration:underline dotted; text-underline-offset:4px; transition:color .15s; }
.case-title:hover{ color:var(--orange); }
.case-year{ color:#9fa7b2; font-size:.97rem; }
.case-summary{ font-size:1.04rem; color:#e2e5e7; opacity:.93; }

.featured-cases{ display:flex; flex-direction:column; gap:60px; margin:0 0 32px; padding:48px 280px 0; }
@media (max-width:980px){ .featured-cases{ padding-left:64px; padding-right:64px; } }

.case-block{ 
  border-radius:18px; 
  padding:0; display:flex; 
  flex-direction:column; 
  gap:24px; 
}

.case-meta2{ 
  display:flex; 
  flex-direction:column; 
  gap:7px; 
}

@media (max-width:980px){ .case-meta2{ padding-left:0; padding-right:0; } }

.case-meta2-inline{ 
  color:#8B8B8C; 
  font-size:1.01rem;
  margin:4px 0 0; 
  white-space:nowrap; 
}
.case-title-row{ display:flex; align-items:center; gap:18px; }
.case-title2{
  margin:0; font-size:clamp(1.3rem,1.1rem + 1vw,1.5rem); font-weight:400; letter-spacing:.02em; color:#fff; text-decoration:none;
}
.case-title2:link,.case-title2:visited,.case-title2:active,.case-title2:focus{ color:#fff; text-decoration:none; }
.case-title2:hover,.case-title2:focus-visible{ color:var(--orange); transition:color 2s cubic-bezier(.19,1,.22,1); }
.case-title3{
  margin:0; font-size:clamp(1.3rem,1.1rem + 1vw,1.5rem); font-weight:400; letter-spacing:.02em; color:#fff; text-decoration:none;
}
.case-year2{ color:#9fa7b2; font-size:1.05rem; opacity:.9; margin-left:8px; white-space:nowrap; }
.case-type2{ color:#b7c1cc; font-size:1.01rem; opacity:.96; }

/* Pet projects: summary как .intro-hero */

.case-summary2{
  margin: 0;
  font-size: 1.01rem;
  font-weight: 400;
  color: #8B8B8C;
  line-height: 1.4;
  letter-spacing: .02em;
}

/* как у .intro-hero на узких экранах */
@media (max-width:980px){
  .pet-meta .case-summary2{
    font-size: 1.2rem;
    line-height: normal;
    letter-spacing: normal;
  }
}

/* Текст описания этапа внутри кейса (используется на /cases/) */
.stage-summary {
  font-family: "Playfair", ui-serif, Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: #fff;
  margin-top: 18px;
  font-synthesis: none;
  line-height: 1.4;
  letter-spacing: .01em;
}

@media (max-width: 980px) {
  .stage-summary { margin-top: 12px; }
}

/* Case gallery */
.case-gallery{ display:grid; gap:22px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:979px){ .case-gallery{ grid-template-columns:1fr; } }


@media (min-width:1290px){ .case-gallery{ grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); } }
.case-gallery-item{
  display:flex; 
  flex-direction:column; 
  align-items:center;
  background:#232429; 
  border-radius:12px; 
  padding:12px; 
  box-shadow:0 2px 8px #0002; 
  transition:box-shadow .25s;
  position:relative;
}
.case-gallery-item:hover{ 
  background:#2c2d33; 
}

.case-thumb2{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/3;
  max-height:350px;
  object-fit:contain;
  border-radius:8px;
  background:#232429;
  margin-bottom:6px;
  cursor:pointer;
  transition:filter .14s;
}

.case-thumb-caption{
  font-size: 1rem;
  color: #8B8B8C;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 12px;
  margin-right: 12px;

  --cap-lines: 2; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* стандарт + префикс для совместимости */
  line-clamp: var(--cap-lines);
  -webkit-line-clamp: var(--cap-lines);
}

/* ---- Lightbox ---- */
/* Лайтбокс-контейнер: задаём переменные и сетку */
.lightbox{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:#16181ef0; animation:lightbox-fade-in .5s;
}
@keyframes lightbox-fade-in{ from{opacity:0;} to{opacity:1;} }
.lightbox-bg{ position:absolute; inset:0; background:transparent; z-index:0; }
/* Лайтбокс — контейнер (ОБНОВЛЕНО) */
/* Контент лайтбокса — 2 строки: 1) зона картинки (1fr), 2) caption (auto) */
/* Контейнер контента лайтбокса — три строки в одном потоке (IMG / caption / thumbs) */
/* Контент лайтбокса: один поток (картинка → подпись → миниатюры) */
.lightbox-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  height:100dvh;            /* всё в пределах окна */ 
  width:100%;
  padding:12px 0 35px;      /* маленький верхний отступ, снизу 35px как просил */
}

/* Зона картинки: получает весь остаток высоты */
.lightbox-stage{
  flex:1 1 auto;
  min-height:0;             /* критично: разрешаем сжиматься */
  display:flex;
  align-items:center;       /* центрируем картинку по вертикали */
  justify-content:center;   /* и по горизонтали */
  overflow: hidden; /* чтобы не было проклёвываний за края */
}

/* Картинка — вписываемся в свою строку, не вылезаем и не перекрываем caption/thumbs */
/* Картинка вписывается в stage, не вылезает и не тянет низ */
.lightbox-img{
  max-width:75vw;
  max-height:100%;          /* занимает высоту stage, но не больше */
  object-fit:contain;
  display:block;
  position: absolute;          /* две картинки поверх друг друга */
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  will-change: transform, opacity;
}

/* Исправление асимметрии стрелок лайтбокса */
/* Заменить блок с .lightbox-arrow в main.css */

.lightbox-arrow{
  position:fixed; 
  top:50%; 
  transform:translateY(-50%); 
  z-index:11001;
  background:none; 
  border:none; 
  padding:8px; /* Одинаковый padding для обеих стрелок */
  margin:0; 
  cursor:pointer;
  transition:filter .5s cubic-bezier(.42,0,.58,1), opacity .18s;
  /* Явно задаем размеры кнопки для симметрии */
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox-arrow.left{ left:42px; }
.lightbox-arrow.right{ right:42px; }

.lightbox-arrow img,.lightbox-close img{ 
  width:42px; 
  height:42px; 
  display:block; 
  pointer-events:none; 
  transition:filter .5s cubic-bezier(.42,0,.58,1), opacity .18s; 
}

.lightbox-close{
  position:fixed; 
  top:42px; 
  right:32px; 
  background:none; 
  border:none; 
  cursor:pointer; 
  z-index:11002;
  padding:6px 10px; 
  transition:filter .5s cubic-bezier(.42,0,.58,1), opacity .18s;
}

.lightbox-arrow:hover img,.lightbox-close:hover img{ 
  filter:brightness(.70); 
  opacity:.84; 
}

@media (max-width:900px){
  .lightbox-arrow.left{ left:16px; } 
  .lightbox-arrow.right{ right:16px; }
  .lightbox-close{ right:34px; top:34px; }
  /* Увеличиваем отступы для изображения, учитывая кнопки 40px + 12px = 52px с каждой стороны */
  .lightbox-img{ max-width:75vw; }
  /* Уменьшаем размер кнопки на мобильных */
  .lightbox-arrow{ width:36px; height:36px; padding:6px; }
  .lightbox-stage{ padding: 0 54px; }
}

@media (max-width:590px){ 
  .lightbox-arrow img,.lightbox-close img{ width:32px; height:32px; }
  .lightbox-arrow{ width:32px; height:32px; padding:4px; }
  .lightbox-arrow.left{ left:24px; } 
  .lightbox-arrow.right{ right:24px; }
  /* Еще больше отступов: 32px + 8px = 40px с каждой стороны */
  .lightbox-img{ max-width:75vw; }
  .lightbox-stage{ padding: 0 36px; }
}
/* Подпись — обычный авто-блок, без «резервов» и перекрытий */
/* Подпись — авто-высота, вписывается между stage и миниатюрами */
.lightbox-caption{
  flex:0 0 auto;
  margin:10px auto 8px;   /* ← auto по бокам центрирует сам блок */
  color:#e7eaf0;
  font-size:1.12rem;
  text-align:center;
  max-width:82vw;         /* ограничение по ширине остаётся */
  opacity:.90;
  overflow-wrap:break-word;
}

/* Миниатюры — теперь в обычном потоке, прижаты к низу за счёт третьей строки грида */
/* Миниатюры — внизу потока, не фиксируем */
.lightbox-thumbs-wrap{
  flex:0 0 auto;
  width:100%; max-width:100vw;
  padding:0 12px;
  box-sizing:border-box;
  display:flex; justify-content:center;
  margin-top:6px;
}

/* Ряд миниатюр — как и было, только без внешних margin */
.lightbox-thumbs{
  --lb-thumb-size:50px;     /* стартовый размер (можно было 100px, но экономим высоту) */
  --lb-thumb-min:30px;
  --lb-gap:25px;
  display:flex; gap:var(--lb-gap);
  flex-wrap:nowrap; align-items:center; justify-content:center;
}
.lightbox-thumb{
  width:var(--lb-thumb-size); height:var(--lb-thumb-size);
  min-width:var(--lb-thumb-min); min-height:var(--lb-thumb-min);
  object-fit:cover; border-radius:8px;
  opacity:.4; filter:saturate(.9);
  transition:opacity .18s, transform .18s;
  cursor:pointer; user-select:none; display:block;
}
.lightbox-thumb.is-active{
  opacity:1;
  outline:2px solid #ff9900; outline-offset:2px;
}
.lightbox-thumb:focus-visible{
  outline:2px solid #ff9900; outline-offset:2px;
}
/* слой прелоадера поверх картинки */
.lightbox-stage{ position:relative; } /* если уже есть — оставь */
.lightbox-loading{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  pointer-events:none; /* не блокируем клики по стрелкам */
}
.lightbox-stage.is-loading .lightbox-loading{ display:flex; }
.lightbox-stage.is-loading .lightbox-img{ visibility:hidden; }

/* классы-анимации */
.lightbox-img.lb-anim{
  transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s ease;
}
.lightbox-img.lb-center{ transform: translate(-50%,-50%); opacity: 1; }
.lightbox-img.lb-enter-right{ transform: translate(150%,-50%); opacity: 0; }
.lightbox-img.lb-enter-left{  transform: translate(-250%,-50%); opacity: 0; }
.lightbox-img.lb-exit-left{   transform: translate(-250%,-50%); opacity: 0; }
.lightbox-img.lb-exit-right{  transform: translate(150%,-50%);  opacity: 0; }

/* Размер контейнера Lottie (подгони при желании) */
#lottie-loader{ width:64px; height:64px; }

/* ---- Tools ---- */
.tools-grid{ display:flex; flex-wrap:wrap; column-gap:35px; row-gap:24px; align-items:center; justify-content:flex-start; }
.tool{
  display:flex; align-items:center; justify-content:center; padding:0; background:transparent; border:0; border-radius:0;
  opacity:0; will-change:opacity, transform; overflow:visible;
}
.tool-logo-wrap{ width:100%; height:32px; display:flex; align-items:center; justify-content:center; }
.tool-logo{ height:100%; width:auto; max-height:100%; max-width:100%; object-fit:contain; display:block; }
.tool .tool-name{ display:none; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.tool.appear.in-view{ animation:fadeUp .45s ease both; animation-delay:calc(var(--tools-delay-base,0ms) + (var(--i,0) * 80ms)); }
@media (max-width:900px){ .tool{ padding:3px; } .tool-logo-wrap{ height:30px; } }

/* ---- Footer ---- */
.site-footer{
  width:100%; min-height:clamp(80px,14vw,400px);
  background:linear-gradient(to bottom,#171819 0%,#171819 80%,#212223 100%);
  display:flex; flex-direction:column;
  margin-top: auto;
}
.footer-inner{ display:flex; align-items:center; justify-content:flex-end; padding:0 200px 40px 293px; margin-top:auto; margin-left:auto; }
@media (max-width:980px){ .footer-inner{ padding:0 64px 12px; } }
.footer-updated{ color:#bbb; font-size:.85rem; line-height:1.2; opacity:.70; }

/* ---- Laurel badge ---- */
.achievements-grid{ display:grid; grid-template-columns:repeat(2,minmax(140px,1fr)); gap:18px; align-items:center; justify-items:center; }
@media (max-width:920px){ .achievements-grid{ grid-template-columns:1fr; gap:14px; } }
.laurel-badge{
  --size:160px; --leaf:#d6c083; --text:#d6c083; --lift:-20%;
  width:var(--size); height:var(--size); display:grid; place-items:center; color:var(--leaf); position:relative;
}
.laurel-badge svg{ width:100%; height:100%; display:block; transform:translateY(var(--lift)); }
.laurel-badge .lb-text{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; text-align:center; }
.laurel-badge .lb-number{ 
  color:var(--text); 
  font-size:calc(var(--size)*0.20); 
  line-height:1; 
  font-weight:600; 
  letter-spacing:.01em; 
}

.laurel-badge .lb-label{ 
  color:var(--text); 
  font-size:calc(var(--size)*0.11); 
  margin-top:calc(var(--size)*0.16);
}

html[data-theme="dark"] .laurel-badge{ --leaf:#c2c9d3; }
.lb-leaf{ opacity:0; transform:translateY(8px) scale(.96); animation:lb-leaf-in 520ms cubic-bezier(.19,1,.22,1) both; animation-delay:calc(var(--leaf-delay,.35s) + var(--i,0) * var(--leaf-gap,120ms)); }
@keyframes lb-leaf-in{ to{ opacity:1; transform:none; } }
:root{ --lb-text-base-delay:calc(var(--leaf-delay,.35s) + (var(--pairs,6) * var(--leaf-gap,120ms)) + 120ms); }
@keyframes lb-number-in{ 0%{opacity:0; transform:translateY(10px); filter:blur(6px);} 50%{filter:blur(1px);} 100%{opacity:1; transform:none; filter:none;} }
@keyframes lb-label-in{ 0%{opacity:0; transform:translateY(12px); filter:blur(8px);} 60%{filter:blur(1px);} 100%{opacity:1; transform:none; filter:none;} }
.laurel-badge .lb-number{ animation:lb-number-in 1.2s cubic-bezier(.19,1,.22,1) calc(var(--number-delay,var(--lb-text-base-delay)) + 80ms) both; }
.laurel-badge .lb-label{  animation:lb-label-in 1.5s cubic-bezier(.19,1,.22,1) calc(var(--label-delay,var(--lb-text-base-delay)) + 280ms) both; }

/* ---- Prefers-reduced-motion ---- */
@media (prefers-reduced-motion:reduce){
  .intro-hero,.tool.appear.in-view,.lb-leaf,.laurel-badge .lb-number,.laurel-badge .lb-label,.contacts-list .contact-item{ animation:none !important; }
  .lb-leaf,.laurel-badge .lb-number,.laurel-badge .lb-label{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* ---- Contacts ---- */
body.page-contact{ min-height:100dvh; display:flex; flex-direction:column; }
body.page-contact>main{ flex:1 0 auto; }
.contacts-section{ margin-top:148px; }
.contacts-list{
  --contact-link-color:#e2e5e7;
  list-style:none; margin:0; padding:0; display:grid; gap:14px;
}
.contacts-list .contact-item{
  --stagger:90ms; --ci-opacity:1;
  opacity:0; transform:translateY(8px); filter:blur(12px);
  animation:contacts-in .66s cubic-bezier(.19,1,.22,1) both;
}
@keyframes contacts-in{
  0%{opacity:0; filter:blur(14px); transform:translateY(8px);}
  60%{opacity:0; filter:blur(6px); transform:translateY(4px);}
  100%{opacity:var(--ci-opacity); filter:none; transform:none;}
}
.contacts-list .contact-item:nth-child(1){animation-delay:calc(var(--stagger)*0);}
.contacts-list .contact-item:nth-child(2){animation-delay:calc(var(--stagger)*1);}
.contacts-list .contact-item:nth-child(3){animation-delay:calc(var(--stagger)*2);}
.contacts-list .contact-item:nth-child(4){animation-delay:calc(var(--stagger)*3);}
.contacts-list .contact-item:nth-child(5){animation-delay:calc(var(--stagger)*4);}
.contacts-list .contact-item:nth-child(6){animation-delay:calc(var(--stagger)*5);}
.contacts-list .contact-item:nth-child(7){animation-delay:calc(var(--stagger)*6);}
.contacts-list .contact-item:nth-child(8){animation-delay:calc(var(--stagger)*7);}
.contacts-list .contact-item:nth-child(9){animation-delay:calc(var(--stagger)*8);}
.contacts-list .contact-item:nth-child(10){animation-delay:calc(var(--stagger)*9);}
.contacts-list .contact-item:nth-child(11){animation-delay:calc(var(--stagger)*10);}
.contacts-list .contact-item:nth-child(12){animation-delay:calc(var(--stagger)*11);}
.contact-block{ display:inline-grid; grid-template-columns:32px auto; align-items:center; column-gap:14px; color:var(--contact-link-color); text-decoration:none; padding:2px 0; }
.contact-block:visited,.contact-block:hover,.contact-block:active,.contact-block:focus{ color:var(--contact-link-color); text-decoration:none; }
.ci,.ci img,.ci svg{ width:32px; height:32px; display:block; }
.ci{ display:inline-flex; align-items:center; justify-content:center; }
.contact-line{ display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap; min-width:0; }
.contact-title,.contact-hint{ white-space:nowrap; }
.contact-hint{ color:#b7c1cc; font-size:.95rem; opacity:.96; }
.contact-block:hover .contact-title,.contact-block:focus-visible .contact-title,
.contact-block:hover .contact-hint,.contact-block:focus-visible .contact-hint{ color:var(--orange); transition:color 2s cubic-bezier(.19,1,.22,1); }
@media (max-width:640px){ .contact-line{ flex-wrap:wrap; } .contact-title,.contact-hint{ white-space:normal; } }
.contacts-list .contact-item.disabled-text{ display:grid; grid-template-columns:32px auto; align-items:center; column-gap:14px; }

/* ---- Util: disabled-text ---- */
.disabled-text{ --disabled-fg:#424242; color:var(--disabled-fg); }
.disabled-text a{ color:var(--disabled-fg); text-decoration:none; }
.disabled-text .contact-hint,.disabled-text .soon-tag{ color:var(--disabled-fg); opacity:.9; }
.disabled-text img,.disabled-text svg{ filter:grayscale(100%) brightness(.5); }

/* ===== Pet projects ===== */

/* Короткое описание раздела */
.pet-meta{ 
  padding:48px 280px 32px 280px; 
}

@media (max-width:980px){ 
  .pet-meta{ 
    padding:48px 64px 32px 64px; 
  } 
}

/* ===== Pet projects — финальная сетка ===== */
.pp-grid {
  padding: 0 280px 32px;
  display: grid;
  gap: 22px;
  /* фиксированные треки по 660px, прижаты влево */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 660px), 660px));
  justify-content: start;
}
@media (max-width:980px){
  .pp-grid { padding: 0 64px 24px; }
}
@media (min-width:1152px){
  .pp-grid { padding-right:100px; }
}

/* Кликабельная карточка */
.pp-item{
  display:block;
  text-decoration:none;
  color:inherit;
}

/* Карточка */
.pp-card {
  display:grid;
  grid-template-rows:auto 1fr;
  gap:12px;
  background:#232429;
  border-radius:18px;
  box-shadow:0 2px 14px #181a1c29;
  padding:16px;
  min-height:220px;
  min-width:0;
  container-type:inline-size;
  width:100%; /* трек задаёт 660px */
}

/* Шапка */
.pp-header{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:10px;
  align-items:center;
  min-width:0;
  margin-top:0;
}
.pp-icon{ width:32px; height:32px; display:block; }
.pp-title{
  margin:0;
  font-size:1.15rem;
  color:#fff;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Тело карточки */
.pp-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);
  gap:16px;
  align-items:stretch; 
  min-width:0;
}

/* Узкая карточка ≤520px — одна колонка */
@container (max-width:520px){
  .pp-body{ grid-template-columns:1fr; }
}
/* Узкий ноутбук — две колонки, но без жёстких минимумов */
@container (min-width:361px) and (max-width:640px){
  .pp-body{
    grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
    gap:12px;
  }
}

.pp-media{ 
  min-height:180px; 
  overflow:hidden; 
}

.pp-media-link > img{
  width:100%;
  height:auto;
  aspect-ratio: inherit;
  object-fit:contain;
  display:block;
  margin:0;
}

/* Правая колонка: первая строка тянется, вторая под футер */
.pp-side{
  display:grid;
  grid-template-rows:1fr auto;  /* возвращаем 1fr auto */
  min-width:0;
  min-height:180px;
  align-self:stretch;
  row-gap: 24px;
}

/* Блок с текстом: держим всё у верхнего края */
.pp-text{
  display:flex;                  /* вместо grid */
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
  min-width:0;
  padding-right: 32px;
}

.pp-subtitle{ color:#cdd3db; opacity:.92; font: size .98rem; }
.pp-desc{ color:#cdd3db; opacity:.92; font-size:.98rem; line-height:1.35; }

/* Футер — жёстко к правому нижнему углу */
.pp-footer{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
  align-self:end;     /* ← фикс: прижать к нижней границе .pp-side */
  margin-top:0px;
  margin-right: 18px;
  margin-bottom: 24px;
}

@media (max-width:980px){
  .pp-footer {   
  margin-right: 8px;
  margin-bottom: 12px; }
  .container {
  padding-top: 32px;
    }
}

@media (min-width:1152px){
  .pp-footer {   margin-right: 14px;
  margin-bottom: 18px; }
}

.pp-kind{
  color:#cbd2db; font-size:.9rem; opacity:.95;
  text-align:right;
}
.pp-links{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
}
.pp-links img{ height:32px; width:auto; display:block; }

.pp-media-link{
  display:block;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
}
.pp-media-link:focus-visible{
  outline-offset:4px;
  outline: none;       
  box-shadow: inset 0 0 0 2px var(--orange);  /* рисуем «внутри» */
  border-radius: 12px; 
}
/* Ссылки сторов в футере */
.pp-links a.pp-store{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  text-decoration:none;
}
.pp-links a.pp-store:focus-visible{
  outline:2px solid #ff9900;
  outline-offset:3px;
  border-radius:8px;
}
/* (Опционально) убрать браузерный контур у картинок-иконок */
.pp-links a.pp-store img{ display:block; height:32px; width:auto; }

/* кейсовые превью показываем сразу (не зависят от .is-loaded) */
.case-thumb2 { opacity: 1; background: transparent; }


/* Дополнительно: скелетон для медиа-контейнера */
.pp-media {
  border-radius: 8px;
  min-height: 180px;
  display: flex;
  align-items: start;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Скелетон-индикатор для контейнера (опционально) */
.pp-media::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 2px solid #3a3f45;
  border-top-color: #5a6570;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.pp-media:has(.lazy-img:not(.is-loaded))::before { opacity:.6; }

.pp-media:has(.lazy-img.is-loaded)::before { opacity:0; }

@keyframes spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Улучшенная анимация появления */
.pp-media img.is-loaded {
  animation: fadeInImage .4s ease-out;
}

@keyframes fadeInImage {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Лоадер для превью кейсов */
.case-gallery-item:has(.case-thumb2.lazy-img:not(.is-loaded))::before{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:40px; height:40px;
  border:2px solid #3a3f45;
  border-top-color:#5a6570;
  border-radius:50%;
  transform: translate(-50%, -50%);
  animation: spin 1s linear infinite;
  opacity:.6;
  z-index:2;
}

/* Smooth reveal for ALL lazy images (pet + works + cases) */
.lazy-img{ 
  opacity: 0;
}

.lazy-img.is-loaded{
  opacity: 1;
  animation: fadeInImage 1s cubic-bezier(.19,1,.22,1);
}

@keyframes fadeInImage{
  from { opacity:0; transform:scale(.70); }
  to   { opacity:1; transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .lazy-img.is-loaded{ animation: none !important; }
}

.pp-media .lazy-img{ will-change: opacity, transform; }

.pp-media .lazy-img.is-loaded{
  opacity: 1; /* конечное состояние явно */
  animation: fadeInImage .45s cubic-bezier(.19,1,.22,1);
}
/* ===== Back-to-top ===== */
:root{
  --tt-size: 48px;
  --tt-right: 32px;
  --tt-bottom: 32px;
}

#to-top{
  position: fixed;
  right: var(--tt-right);
  bottom: var(--tt-bottom);
  width: var(--tt-size);
  height: var(--tt-size);
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(35, 36, 41, 0.151);
  border: 1px solid #2b2e33;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);

  opacity: 0;
  transform: scale(.95);
  transition: opacity .5s cubic-bezier(.19,1,.22,1),
              transform .5s cubic-bezier(.19,1,.22,1),
              filter .2s;
  z-index: 1000;           /* ниже лайтбокса; лайтбокс всё равно скрывает кнопкой body.lb-lock */
  pointer-events: none;    /* пока скрыта — кликов нет */
}

#to-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  cursor: pointer;
}

#to-top img{
  width: 70%; height: auto; display: block;
}

#to-top:hover{ 
  filter: brightness(1.1);
  opacity: .6; 
}
#to-top:active{ transform: scale(.98); }
#to-top:focus-visible{ outline: 2px solid var(--orange); outline-offset: 3px; }

/* Не показываем, когда открыт лайтбокс */
body.lb-lock #to-top{ opacity: 0; pointer-events: none; }

body.lb-lock .lang-floater,
body.lb-lock .mobile-lang-floater{
  display: none !important;
}

/* Адаптив: 980 и 580 — меньше иконка и отступы */
@media (max-width: 980px){
  :root{ --tt-size: 44px; --tt-right: 12px; --tt-bottom: 18px; }
}
@media (max-width: 580px){
  :root{ --tt-size: 40px; --tt-right: 14px; --tt-bottom: 18px; }
}

/* === Case year rail: overlay, не двигает контент === */
:root{
  --case-rail-gap: 53px;
  --case-rail-top: 6px;
}
.case-year-rail{ display:none; }
.case-year-inline{ display:inline; }

.case-meta2-inline{ display:flex; gap:0; flex-wrap:nowrap; }
/* Буллеты между видимыми частями меты.
   Не ставим маркер если предыдущий элемент — .case-year-inline (который на десктопе скрыт) */
.case-meta2-inline span + span::before{
  content: "\00A0\00B7\00A0";
}

/* На десктопе (когда .case-year-inline скрыт) — ставим буллет только между видимыми спанами */
@media (min-width:980px){
  /* убираем общий маркер (перекроем более специфичным селектором ниже) */
  .case-meta2-inline span + span::before{ content: ""; }

  /* ставим буллеты только между span'ами, которые НЕ .case-year-inline */
  .case-meta2-inline span:not(.case-year-inline) + span:not(.case-year-inline)::before{
    content: "\00A0\00B7\00A0";
  }
}

@media (min-width:980px){
  .case-block{ position:relative; }
  .case-year-rail{
    display:block;
    position:absolute;
    top: var(--case-rail-top);
    left: calc(-1 * var(--case-rail-gap));
    transform: translateX(-100%); 
    color:#8B8B8C;
    font-size:1.05rem;
    white-space:nowrap;
    text-align:left;
    pointer-events:none;
  }
  .case-year-inline{ display:none; }
}
@media (max-width:980px){
  .case-year-rail{ display:none; }
  .case-year-inline{ display:inline; }
}

/* ==== Mobile header / menu ==== */

/* Кнопка-бургер (показываем только на мобильных) */
.burger-btn{
  position: fixed;
  top: 18px;
  right: 16px;
  z-index: 1200;
  display: none; /* по умолчанию скрыта — на десктопе не нужна */
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  transition: filter .5s cubic-bezier(.42,0,.58,1), opacity .18s;
}
.burger-btn img{
  width: 32px; height: 32px; display: block;
  will-change: transform, filter, opacity;
  transition: transform .45s cubic-bezier(.19,1,.22,1),
              filter .5s cubic-bezier(.42,0,.58,1),
              opacity .18s;
}
/* такой же hover, как у стрелок лайтбокса */
.burger-btn:hover img{ filter: brightness(.70); opacity: .84; }

/* Состояние "открыто": лёгкая перекрутка и размытие при смене иконок */
.burger-btn.is-open img{
  transform: rotate(180deg);
  filter: blur(0.5px);
  z-index: 1300;
}

/* Показываем бургер только на <= 980px */
@media (max-width:980px){
  .burger-btn{ display: inline-flex; align-items:center; justify-content:center; }
  /* В шапке скрываем десктопные меню */
  .main-menu{ display: none !important; }
  .subnav{ display: none !important; }
  .logo-img{ margin-right: 48px; }
}

/* Оверлей мобильного меню */
.mobile-menu{
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(22,24,30,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none; /* по умолчанию скрыто */
}
.mobile-menu.is-open{ display: grid; }

/* Контент и список */
.mobile-menu__inner{
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 90px 28px 28px;
  gap: 16px;
}
.mobile-menu__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.mobile-menu__link{
  display: block;
  padding: 14px 12px;
  font-size: clamp(1.1rem, 0.95rem + 1.5vw, 1.6rem);
  color: #e7eaf0;
  text-decoration: none;
  border-radius: 10px;
  transition: background .25s, color 2s;
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible{
  color: var(--orange);
  outline: none;
  background: #23262b;
}

/* Когда меню открыто — блокируем прокрутку страницы (как лайтбокс) */
body.mm-open{ overflow: hidden; }

/* Учитываем reduced motion */
@media (prefers-reduced-motion: reduce){
  .burger-btn img{ transition: none !important; }
}

/* Подсписок в мобильном меню */
.mobile-menu__sublist{
  list-style:none;
  margin:4px 0 0 0;
  padding: 6px 0 0 12px;
  border-left: 1px solid #2b2e33;
  display:grid;
  gap:8px;
}

.mobile-menu__sublink{
  display:block;
  padding:10px 10px;
  font-size: clamp(1.0rem, 0.92rem + 0.8vw, 1.25rem);
  color:#dfe4ea;
  text-decoration:none;
  border-radius:8px;
  transition: background .2s, color 2s;
}
.mobile-menu__sublink:hover,
.mobile-menu__sublink:focus-visible{
  color: var(--orange);
  background:#23262b;
  outline: none;
}

.mobile-menu__link.current,
.mobile-menu__sublink.current{
  color: var(--orange);
  background:#23262b;
}

/* ==== CV  ===================================== */
:root{
  --cv-rail-w: 180px;       /* ширина левого «рейла» */
  --cv-gap: 28px;           /* зазор между рейлом и контентом */
  --cv-row: 12px;           /* вертикальный шаг между строками */
}

/* Заголовок */
.cv-head{ 
  margin: 80px 0 8px; 
  width: 100%;
}
.cv-name{ margin: 0 0 6px; font-size: clamp(1.6rem,1.2rem+2vw,2.2rem); font-weight: 600; color:#fff; }
.cv-title{ 
  margin-bottom: 8px; 
  width: inherit;
  font-size:1.35rem; 
  font-weight:400; 
}
.cv-contacts{ display:flex; flex-wrap:wrap; gap:8px 12px; color:#fff; opacity:.92; }
.cv-contact{ color:inherit; text-decoration:none; }
.cv-contact:hover{ color:var(--orange); transition: color 2s; }
.cv-sep{ opacity:.4; }

/* Сетка CV: правая колонка идёт от левой кромки контейнера
   (как контент на index/cases), левый рейл вынесен в «минус» */
.cv-grid{
  position: relative;
  display: grid;
  grid-template-columns: var(--cv-rail-w) minmax(0,1fr);
  column-gap: var(--cv-gap);
  row-gap: var(--cv-row);
  margin-left: calc(-1 * (var(--cv-rail-w) + var(--cv-gap)));
  /* так правая колонка начинается строго там же, где заголовок страницы */
}

/* Левый «рейл»: стиль как у годового рейла на кейсах */
.cv-rail{
  font-size: 1.02rem;
  white-space: nowrap;
  text-align: right;           /* визуально ближе к контенту */
  padding-right: 4px;
  pointer-events: none;        /* чтобы не перехватывал клики */
}

/* Контент правой колонки */
.cv-right{ color:#e2e5e7; font-size: 1.02rem; line-height: 1.5; }

/* Списки */
.cv-bullets{ 
  margin: 0 0 0 0; 
  padding-left: 20px;
  padding-bottom: 18px;
}

.cv-bullets li{ margin: 4px 0; }

/* Мобилка: одна колонка, всё по потоку, рейл превращаем в обычную строку над контентом */
@media (max-width:980px){
  .cv-grid{
    grid-template-columns: 1fr;
    margin-left: 0;
    row-gap: 18px;
  }
  .cv-rail{
    text-align: left;
    pointer-events: auto;
  }
}
/* CV: subheading с индивидуальными отступами */
.cvsubheading{
  margin: 0;
  padding: 1.5rem 0 0 0;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.5rem);
  font-weight:400; letter-spacing:.02em;
}
.cv-company{ 
  display:block; 
  font-weight:600; 
  color:#fff;
  margin-top:2px;  
}
.cv-dates{ 
  display:block; 
  color:#fff;
  opacity:.35; 
  font-size:0.95rem; 
  margin-top:2px; 
}
.cv-role{ 
  font-weight:600; 
  color:#fff; 
}
.cv-download{
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0;
}
.cv-download a{
  text-decoration: none;
}

.cv-contacts-list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.cv-contacts-list li{
  margin: 4px 0;
}
.cv-contacts-list a{
  color: inherit;               /* всегда как обычный текст */
  text-decoration: underline;   /* подчёркнутые */
  text-underline-offset: 3px;
}
.cv-contacts-list a:hover{
  color: inherit; /* не меняется при ховере */
}

/* CV: не применять общий фильтр к иконке PDF в шапке */
.cv-head .cv-download.disabled-text a > img,
.cv-head .cv-download.disabled-text a > svg{
  filter: none !important;
  opacity: 1;
}

.cv-download-icon{
  position: relative;
  top: -3px;            /* приподняли на 3px */
  margin-right: 8px;    /* сохраняем отступ справа */
  vertical-align: middle;
}

.cv-bullets{
  list-style: none;       /* убираем стандартные точки */
  margin: 0;
  padding: 0 0 18px 0;    /* снизу оставляем как было */
}
.cv-bullets li{
  position: relative;
  margin: 4px 0;
  padding-left: .8em;    /* отступ для чёрточки */
}
.cv-bullets li::before{
  content: "\2043";           /* маркер — длинное тире */
  position: absolute;
  left: 0;
  color: inherit;         /* цвет такой же, как у текста */
}

/* === CV download: trigger/link === */
.cv-download-wrap{
  margin-left: auto; /* уводим в правый край шапки CV */
  position: relative;
  z-index: 3000;
}
.cv-download-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;   /* на случай глобальных правил */
}
.cv-download-link span{ 
  text-decoration: none;
  color: #424242; 
}
.cv-download-link img{ filter: none !important; } /* не трогаем иконку PDF */

/* === CV download: desktop popover === */
.cv-download-pop{
  position: fixed; /* позиционируем относительно окна, чтобы не уезжала */
  z-index: 4000;
  min-width: 320px;
  max-width: min(92vw, 420px);
  background: #000;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
  padding: 14px 14px 10px;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.cv-download-pop.is-open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.cv-download-pop__title{
  font-size: 1rem;
  font-weight: 600;
  margin: 2px 4px 10px;
  color: #fff;
}
.cv-download-pop__row{
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  column-gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  text-decoration: none;
  color: #e7eaf0;
}
.cv-download-pop__row:hover,
.cv-download-pop__row:focus-visible{
  background: #111214;
  outline: 2px solid #2b2e33;
  outline-offset: 2px;
}
.cv-download-pop__icon{ width: 32px; height: 32px; display: block; filter: none !important; }
.cv-download-pop__label{ font-size: .98rem; }
.cv-download-pop__size{ font-size: .95rem; opacity: .8; }

/* === CV download: mobile overlay (reuse mobile-menu look) === */
#download-overlay.mobile-menu .mobile-menu__inner{
  position: fixed;
  display: grid;
  inset: 0;
  z-index: 6000;
  align-content: start;
  gap: 14px;
  padding-top: clamp(18px, 6vw, 36px);
}
#download-overlay .download-list{
  list-style: none; 
  margin: 0; 
  padding: 70px 0 0 0; 
  display: grid; 
  gap: 8px;
}
#download-overlay .download-link{
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
}
#download-overlay .download-link .dl-ico{ width: 32px; height: 32px; display: block; filter: none !important; }
#download-overlay .download-link .dl-size{ opacity: .8; font-size: .95rem; }

/* Без ховеров/ховеров — на мобилке всё по тачу, но оставим фокус-стиль */
@media (max-width: 980px){
  .cv-download-pop{ display: none !important; }
}

body.mm-open #cv-download-trigger{
  pointer-events: none;
}

body.mm-open .cv-download-wrap{
  z-index: 0;
}

/* === Site-wide notice banner === */
.site-banner{
  position: fixed; inset: 0 0 auto 0; z-index: 1400;   /* выше бургера/меню */
  background: rgba(12,13,15,.96);
  box-shadow: 0 14px 30px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.3);
  border-bottom: 1px solid #2b2e33;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.19,1,.22,1), opacity .35s;
}

.site-banner.is-visible{
  transform: translateY(0);
  opacity: 1;
}

.site-banner__inner{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
}

.site-banner__text{
  color:#e7eaf0; font-size:.98rem; line-height:1.35; opacity:.96;
}

.site-banner__close{
  background:none; border:0; padding:6px; cursor:pointer;
  filter:none; opacity:.9; border-radius:8px;
  transition: filter .25s, opacity .25s, transform .25s;
}
.site-banner__close:hover{ filter:brightness(.8); opacity:1; transform:scale(1.02); }
.site-banner__close img{ display:block; width:18px; height:18px; }

/* Чуть сжимаем на узких */
@media (max-width:980px){
  .site-banner__inner{ padding: 8px 14px; gap:10px; }
  .site-banner__text{ font-size:.95rem; }
}
/* === Site-wide notice banner end=== */

/* ===== i18n helpers (если ещё не добавляли) ===== */
.i18n-en, .i18n-ru { display: none; }
html[data-lang="en"] .i18n-en { display: initial; }
html[data-lang="ru"] .i18n-ru { display: initial; }

/* ===== Языковой «поплавок» (RUS/ENG) ===== */
/* === Lang floater: right-top — farther start (×3), slower move (×4), 2s before move === */
.lang-floater{
  position: absolute;
  z-index: 1000000;
  pointer-events: auto;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.35);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* финальная точка (не меняем) */
  top: 34px;
  right: 20px;
  opacity: .35;
}
.lang-floater:hover{ opacity: .9; }

/* до появления */
.lang-floater.pre{ opacity: 0; pointer-events: none; }

/* ПЕРВЫЙ показ за сессию:
   появляется в стартовой точке (×3 дальше от угла),
   затем ждёт 2s и едет к финалу 3.6s */
.lang-floater.intro{
  top: 44px;     /* было 20px → ×3 от финального отступа (16px → +12px) */
  right: 30px;   /* было 26px → ×3 от финального отступа (18px → +24px) */
  left: auto;
  opacity: 1;
  animation: lang-nudge 2s ease-out forwards;
  animation-delay: 1s; /* ← задержка между появлением и стартом движения */
}

/* повторные визиты — сразу финал */
.lang-floater.settled{
  top: 34px;
  right: 20px;
  opacity: .35;
}

/* короткий «нудж» ТОЛЬКО внутри правого верхнего угла */
@keyframes lang-nudge{
  0%   { top: 44px; right: 30px; opacity: 1; }
  60%  { top: 40px; right: 25px; opacity: .40; }
  100% { top: 34px; right: 20px; opacity: .35; }
}


@media (max-width: 980px){
  .lang-floater{ display:none !important; }
}

/* ===== NEW: мобильный языковой поплавок в левом нижнем углу ===== */
.mobile-lang-floater{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1200;                /* выше подложки меню */
  display: none;                /* показываем только когда меню открыто */
  padding: 14px 16px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: .06em;
  background: rgba(0,0,0,.35);
  color: #e7eaf0;
  border: 1px solid #2b2e33;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: clamp(1.1rem, 0.95rem + 1.5vw, 1.6rem); /* как пункты меню */
}
.mobile-menu.is-open .mobile-lang-floater{
  display: inline-flex;
  align-items:center;
  justify-content:center;
}
.mobile-lang-floater:hover{ filter:brightness(1.1); }
.mobile-lang-floater:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

/* Pet projects: in-progress */
/* Kind, когда «переехал» на место стора */

.pp-inprogress-note {
  color: #858585;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  /*border: 1px solid rgba(255,255,255,0.18);*/
  font-size: 14px;
  line-height: 1.45;
  margin-right: -30px;
}

/* Pet projects: media placeholder */
.pp-media-ph {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.pp-media-ph-ico {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  pointer-events: none;            
}

/* 2.1. Когда превью загрузилось — убираем псевдо-элементы и их анимации */
.case-img-wrap.has-loaded::before,
.case-img-wrap.has-loaded::after,
.pp-media.has-loaded::before,
.pp-media.has-loaded::after,
.pp-media-link.has-loaded::before,
.pp-media-link.has-loaded::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* 2.2. Для плейсхолдера — лоадер не нужен вообще */
/* у плейсхолдера лоадер не нужен в принципе */
.pp-media--ph::before,
.pp-media--ph::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* На всякий случай — если лоадер задавался фоном у контейнера */
.pp-media--ph {
  background: none !important;
}