@font-face { font-family:'HFont'; src:url('../main_page/fonts/h_fonts.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'PFont'; src:url('../main_page/fonts/p_fonts.ttf') format('truetype'); font-display:swap; }

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

:root {
  --ui-font-size: clamp(14px, 1.25vw, 24px);
  --blue:#186BB8; --blue-dark:#0f4d8a;
  --card-bg:#959490; --panel-bg:#a3a09b; --text-muted:#cbc9c4;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --title-size: 4vw;

  --fan-active: 31.25vw;
  --fan-card:   28.65vw;
  --fan-first:  18.75vw;
  --fan-peek:   8.02vw;
}

html { scroll-behavior:smooth; }
html, body { width:100%; overflow-x:hidden; font-family:'HFont',sans-serif; background:#B4B1AC; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }

.works-page { position:relative; width:100%; min-height:100vh; overflow:hidden; background:#B4B1AC; }

.bricks { position:absolute; z-index:0; opacity:1; pointer-events:none; user-select:none; height:auto; }

/* Размеры чередуются как на главной: крупные «стены» 30–38vw, средние 20–26vw,
   мелкие 13–17vw — иначе фон читается как одинаковый повторяющийся штамп. */
.bricks--1  { left:1vw;   top:4vw;    width:21vw; }
.bricks--2  { right:1vw;  top:2vw;    width:32vw; }
.bricks--3  { left:41vw;  top:34vw;   width:14vw; }
.bricks--4  { left:0vw;   top:57vw;   width:36vw; }
.bricks--5  { right:4vw;  top:66vw;   width:22vw; }
.bricks--6  { left:37vw;  top:99vw;   width:27vw; }
.bricks--7  { left:1vw;   top:128vw;  width:33vw; }
.bricks--8  { right:2vw;  top:137vw;  width:16vw; }
.bricks--9  { left:42vw;  top:166vw;  width:23vw; }
.bricks--10 { right:1vw;  top:186vw;  width:30vw; }
.bricks--11 { left:2vw;   top:205vw;  width:15vw; }
.bricks--12 { left:38vw;  top:232vw;  width:25vw; }
.bricks--13 { right:3vw;  top:258vw;  width:35vw; }
.bricks--14 { left:1vw;   top:276vw;  width:19vw; }

.works-header { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:3.4vw 2vw 0; }
.works-title { font-family:'HFont',sans-serif; font-size:7.8vw; line-height:0.87; letter-spacing:2px; color:#fff; text-transform:uppercase; }
.works-logo { display:flex; align-items:center; }
.works-logo img { width:17.86vw; max-width:343px; height:auto; object-fit:contain; }

.works-nav { position:relative; z-index:2; display:flex; justify-content:center; margin-top:0.6vw; }
.works-nav__list {
  display:inline-flex; align-items:center; gap:0; overflow:hidden; flex-wrap:nowrap;
  background:rgba(138,138,138,0.92); border-radius:12px; padding:0; box-shadow:0 4px 14px rgba(0,0,0,0.18);
}
.works-nav__link {
  display:block; padding:12px 32px; white-space:nowrap;
  font-family:'HFont',sans-serif; font-size:var(--ui-font-size); letter-spacing:2px; text-transform:uppercase;
  color:#fff; border-radius:0; transition:background-color .2s ease;
}
.works-nav__link:hover, .works-nav__link--active { background:var(--blue); color:#fff; }

.works-nav__current { display:inline-flex; align-items:center; gap:6px; background:var(--blue); padding-left:12px; }
.works-nav__current .works-nav__link--active { background:none; }
.works-nav__arrow { display:inline-flex; align-items:center; justify-content:center; transition:transform .2s var(--ease-out); }
.works-nav__arrow:hover { transform:translateX(-3px); }
.works-nav__arrow svg { display:block; width:22px; height:auto; }

.has-tip { position:relative; }
.has-tip::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%) translateY(4px); white-space:nowrap; padding:6px 10px; border-radius:8px;
  background:rgba(20,22,26,0.95); color:#fff; font-family:'PFont',sans-serif; font-weight:500; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s var(--ease-out); z-index:60;
}
.has-tip::before {
  content:''; position:absolute; bottom:calc(100% + 2px); left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:rgba(20,22,26,0.95); opacity:0; pointer-events:none;
  transition:opacity .18s ease; z-index:60;
}
.has-tip:hover::after, .has-tip:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }
.has-tip:hover::before, .has-tip:focus-visible::before { opacity:1; }

.cats { position:relative; z-index:1; padding:1vw 2vw 4vw; }
.cat { margin-top:2.5vw; }
.cat__title { font-family:'HFont',sans-serif; font-size:5.21vw; line-height:1; letter-spacing:2px; color:#fff; text-transform:uppercase; margin-bottom:1vw; }

.cat__stage { position:relative; transition:height .6s var(--ease-out); }

.carousel {
  position:relative;
  height:34vw;
  background:var(--card-bg);
  border-radius:20px;
  padding:0 8.07vw;
  overflow:visible;
  transition:opacity .35s ease;
}

.fan { position:relative; height:100%; clip-path:inset(-40vw 0px -40vw 0px); }
.carousel:hover .fancard, .carousel:focus-within .fancard { animation-play-state:paused; }
@keyframes fan-bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

.fancard {
  position:absolute;
  width:var(--fan-card); height:var(--fan-card);
  top:calc(50% - var(--fan-card)/2);
  border-radius:18px; overflow:hidden; cursor:pointer;
  outline:4px solid transparent; outline-offset:-4px;
  animation:fan-bob 3.6s ease-in-out infinite;
  animation-delay:calc(var(--bob-i, 0) * -0.25s);
  transition:left .55s var(--ease-out), width .55s var(--ease-out), height .55s var(--ease-out),
             top .55s var(--ease-out), margin-top .35s var(--ease-out),
             outline-color .35s var(--ease-out), opacity .4s ease;
}

.fancard:hover {
  margin-top:-2vw;
  outline-color:var(--blue);
}
.fancard__img { position:absolute; inset:0; background-size:cover; background-position:center;
  transition:filter .6s ease, transform .6s ease; }

.fancard__img.is-loading { filter:blur(18px); transform:scale(1.1); }

.fancard__shade { position:absolute; left:0; right:0; bottom:0; height:37.5%;
  border-radius:18px;
  opacity:0; transition:opacity .4s ease;
  background:rgba(180,177,172,0.6); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.fancard__overlay {
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.4vw; gap:1vw; opacity:0; pointer-events:none; transition:opacity .4s ease;
}

.fancard--active {
  width:var(--fan-active); height:var(--fan-active);
  top:calc(50% - var(--fan-active)/2);
  outline:4px solid var(--blue); outline-offset:-4px;

  animation:none;
}

.fancard--active:hover { margin-top:0; }
.fancard--active .fancard__shade { opacity:1; }
.fancard--active .fancard__overlay { opacity:1; pointer-events:auto; }

/* ---- шестерёнка «править в админке» (только для контент-менеджера) ---- */
.fancard__edit, .d__edit {
  position:absolute; z-index:130;
  display:flex; align-items:center; justify-content:center;
  width:2.6vw; height:2.6vw; min-width:34px; min-height:34px;
  border-radius:50%; color:#fff;
  background:rgba(15,30,48,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  transition:background-color .2s ease, transform .2s var(--ease-out);
}
/* Только на активной карточке: у «выглядывающих» из веера видна как раз
   правая кромка — шестерёнки на каждой из них замусорили бы стопку. */
.fancard__edit { top:0.7vw; right:0.7vw; display:none; }
.fancard--active .fancard__edit { display:flex; }
.fancard__edit svg, .d__edit svg { width:58%; height:58%; }
.fancard__edit:hover, .d__edit:hover { background:var(--blue); transform:rotate(45deg); }
.fancard__edit:active, .d__edit:active { transform:rotate(45deg) scale(0.94); }

.d__edit { position:static; display:inline-flex; vertical-align:middle; margin-left:0.8vw; }

.fancard__area { font-family:'HFont',sans-serif; font-size:1.5vw; letter-spacing:1px; color:#fff; text-transform:uppercase; }
.fancard__desc { font-family:'PFont',sans-serif; font-weight:500; font-size:1.05vw; line-height:1.25; color:var(--text-muted); }
.fancard__btn {
  width:100%; padding:0.8vw 0; border-radius:10px; background:var(--blue); color:#f0f0f0;
  font-family:'HFont',sans-serif; font-size:var(--ui-font-size); letter-spacing:1px; text-transform:uppercase;
  transition:background-color .25s ease, transform .16s var(--ease-out);
}
.fancard__btn:hover { background:var(--blue-dark); }
.fancard__btn:active { transform:scale(0.97); }

.switch {
  position:absolute; top:50%; transform:translateY(-50%); z-index:120;
  width:clamp(30px, 3vw, 56px); height:auto;
  transition:transform .2s var(--ease-out), opacity .2s ease, filter .2s ease;
}
.switch svg, .switch__ic { width:100%; height:auto; display:block; }
.switch__ic--flip { transform:scaleX(-1); }
.switch--next { right:0.6vw; } .switch--prev { left:0.6vw; }
.switch:hover:not(:disabled) { transform:translateY(-50%) scale(1.1); filter:drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
.switch:active:not(:disabled) { transform:translateY(-50%) scale(0.96); }
.switch:disabled { opacity:0.25; cursor:default; }

.cat--open .carousel { position:absolute; inset:0; opacity:0; pointer-events:none; }
.detail { width:100%; }
.detail[hidden] { display:none; }

.d__panel {
  position:relative; display:flex; gap:9.17vw; align-items:stretch;
  background:var(--panel-bg); border-radius:20px; padding:2.29vw 8.07vw;
  animation:d-panel-in .6s var(--ease-out) both;
}
@keyframes d-panel-in {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:none; }
}

.d__left { position:relative; flex:0 0 39.32vw; display:flex; flex-direction:column; }
.d__photo-wrap { position:relative; }
.d__photo { width:100%; aspect-ratio:1/1; border-radius:18px; background-size:cover; background-position:center;
  transition:opacity .16s ease; }
.d__photo.is-swapping { opacity:0.2; }

.d__photo-next { left:100%; top:50%; margin-left:3.02vw; width:2.97vw; }

.d__gallery { display:flex; align-items:center; margin-top:1.56vw; }
.d__back { width:1.875vw; height:auto; aspect-ratio:36/46; color:var(--blue);
  align-self:flex-start; margin-top:0.55vw;
  display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease-out); }
.d__back img { width:100%; height:auto; display:block; }
.d__back:hover { transform:translateX(-3px); }

.d__thumbs { position:relative; flex:none; width:31.24vw; height:7.03vw; margin-left:auto; overflow:hidden; border-radius:10px; }
.d__thumbs-track {
  display:flex; gap:1.04vw; height:100%; width:max-content;
  transition:transform .4s var(--ease-out); will-change:transform;
}
.d__thumb {
  position:relative; flex:0 0 7.03vw; width:7.03vw; height:7.03vw; border-radius:10px; overflow:hidden; cursor:pointer;
  background-size:cover; background-position:center; opacity:0.65;
  outline:3px solid transparent; outline-offset:-3px;
  transition:opacity .25s ease, outline-color .2s ease, transform .2s var(--ease-out);
}
.d__thumb:hover { opacity:1; transform:translateY(-3px); }
.d__thumb.is-active { opacity:1; outline-color:var(--blue); }
.d__thumb-count {
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(15,30,48,0.6); color:#fff; font-family:'PFont',sans-serif; font-weight:600; font-size:1.8vw; letter-spacing:1px;
}
.d__thumb.has-more .d__thumb-count { display:flex; }

.d__right { flex:1; display:flex; flex-direction:column; }
.d__area { font-family:'HFont',sans-serif; font-size:5.21vw; line-height:1; color:#fff; text-transform:uppercase; }
.d__term {
  align-self:flex-start; width:13.85vw; margin:0.52vw 0 3.28vw; padding:0.52vw; border-radius:10px;
  border:3px solid var(--blue); background:rgba(24,107,184,0.10);
  font-family:'PFont',sans-serif; font-weight:600; font-size:1.3vw; line-height:1.05; color:var(--text-muted);
}
.d__works { column-count:2; column-gap:1.09vw; }
.d__work { break-inside:avoid; position:relative; margin-bottom:0.83vw; padding-left:1.3vw;
  font-family:'PFont',sans-serif; font-weight:600; font-size:1.3vw; line-height:1.2; color:#fff; }
.d__work::before { content:'•'; position:absolute; left:0; top:0; color:var(--blue); font-weight:700; }
@keyframes d-work-in { from{ opacity:0; transform:translateX(-10px); } to{ opacity:1; transform:translateX(0); } }

.d__contacts { display:flex; align-items:center; margin-top:1.56vw; }
.d__phone { flex:0 0 18.7vw; font-family:'HFont',sans-serif; font-size:1.82vw; letter-spacing:1px; color:var(--blue); transition:color .2s ease; }
.d__phone:hover { color:var(--blue-dark); }
.d__sign { font-family:'PFont',sans-serif; font-weight:600; }
.d__socials { display:flex; align-items:center; gap:0.36vw; }
.d__social img { display:block; width:2.05vw; max-width:40px; height:auto; transition:transform .2s ease, opacity .2s ease; }
.d__social:hover img { transform:scale(1.12); opacity:0.85; }

.d__photo { cursor:zoom-in; }

.footer {
    position: relative;
    z-index: 2;
    width: 100%;
    background: var(--blue);
    display: flex;
    padding: 2.6vw 0 2.6vw 2.08vw;
    gap: 2.08vw;
    height: 29.22vw;
}
.footer__heading { font-family:'HFont',sans-serif; font-size:1.82vw; line-height:1; letter-spacing:2px; color:#ededed; text-transform:uppercase; }
.footer__line { margin-top:1.5vw; max-width:22.8vw; font-family:'PFont',sans-serif; font-weight:500; font-size:1.3vw; line-height:1.2; color:#fff; }
.footer__line:not(.footer__line--address) { margin-top:1.2vw; max-width:none; }
.footer__line-label { text-transform:uppercase; }
.footer__phone { transition:opacity .2s ease; } .footer__phone:hover { opacity:0.8; }
.footer__socials { display:flex; align-items:center; gap:12px; margin-top:0.94vw; }
.footer__social img { display:block; width:2.4vw; max-width:46px; height:auto; transition:transform .2s ease, opacity .2s ease; }
.footer__social:hover img { transform:scale(1.1); opacity:0.85; }
.footer__list { margin-top:1.5vw; display:flex; flex-direction:column; gap:1.41vw; }
.footer__link { font-family:'PFont',sans-serif; font-weight:500; font-size:1.3vw; color:#fff; display:inline-block; transition:opacity .2s ease, translate .2s var(--ease-out); }
.footer__link:hover { opacity:0.8; translate:4px 0; }
.footer__legal {
  position: absolute;
  left: 2.08vw;
  bottom: 1.72vw;
  width: 81.56vw;
  font-family: 'PFont', sans-serif;
  font-weight: 500;
  font-size: 1.3vw;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  .fan, .fancard, .cat__stage, .carousel, .d__panel, .d__work, .d__photo, .d__thumb
    { animation:none !important; transition:none !important; }
}

@media (max-width:1024px) {
  .works-title { font-size:60px; }
  .works-logo img { width:200px; }
  .works-nav__link { padding:10px 14px; }

}

@media (max-width:768px) {
  .works-header { flex-direction:column; gap:14px; padding:24px 16px 0; }
  .works-title { font-size:40px; }
  .works-nav { overflow-x:auto; } .works-nav__list { flex-wrap:nowrap; }
  .bricks { display:none; }
  .cats { padding:8px 12px 32px; }
  .cat__title { font-size:24px; margin-bottom:10px; }

  .carousel { height:84vw; padding:0 2vw; }
  :root { --fan-active:74vw; --fan-card:64vw; --fan-first:30vw; --fan-peek:10vw; }
  .fancard__area { font-size:6vw; } .fancard__desc { font-size:3.6vw; }
  .switch { width:44px; }

  .d__panel { flex-direction:column; gap:16px; padding:16px; }
  .d__left { flex-basis:auto; }
  .d__photo-next { left:auto; right:8px; top:50%; margin-left:0; width:40px; }
  .d__thumb { width:60px; height:60px; }
  .d__area { font-size:48px; }
  .d__term { font-size:13px; padding:6px 10px; max-width:none; }
  .d__works { column-count:1; } .d__work { font-size:14px; padding-left:14px; margin-bottom:8px; }
  .d__contacts { gap:16px; margin-top:16px; padding-top:16px; } .d__phone { font-size:20px; } .d__social img { width:28px; }
  .switch { width:44px; }

  .footer { flex-direction:column; gap:28px; padding:28px 16px 32px; }
  .footer__heading { font-size:22px; } .footer__line, .footer__link { font-size:14px; }
  .footer__line { max-width:none; } .footer__social img { width:30px; }

}

.cats__empty {
  font-family: 'PFont', sans-serif;
  font-size: 1.4vw;
  color: #fff;
  text-align: center;
  padding: 6vw 2vw 8vw;
  opacity: 0.85;
}