/* ============================================================
   NOVA STUDIO — портфолио. Тёмная сцена + 3D-карусель.
   ============================================================ */

/* Цвета акцента регистрируем как настоящие css-свойства —
   тогда они плавно перетекают при смене проекта. */
@property --accent  { syntax: "<color>"; inherits: true; initial-value: #d1934f; }
@property --accent2 { syntax: "<color>"; inherits: true; initial-value: #6b3f86; }

:root{
  --bg:      #0a0809;
  --fg:      #f4efe9;
  --muted:   #a2988f;
  --line:    rgba(255,255,255,.13);

  /* карточка горизонтальная: превью 16:10 + строка браузера сверху.
     Ширина ограничена и по высоте окна: (100dvh - место под шапку,
     титул, подпись и стрелки) * 1.6 — иначе на низком экране карточки
     распирают свой ряд и лезут на заголовок. */
  --bar:     26px;
  --chrome:  380px;
  /* --card-fit ставит main.js по реальной высоте ряда карусели;
     формула с dvh — запасной вариант, пока скрипт не отработал */
  --card-w:  min(
               clamp(200px, min(33vw, (100dvh - var(--chrome)) * 1.6), 500px),
               var(--card-fit, 100vw)
             );
  --card-h:  calc(var(--card-w) * 0.625 + var(--bar));

  --ease:    cubic-bezier(.22,.68,.28,1);
  --dur:     820ms;

  transition: --accent 900ms ease, --accent2 900ms ease;
}

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

/* иначе собственный display элемента перебивает атрибут hidden */
[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  background: var(--bg);
  color: var(--fg);
  font-family: "Manrope", system-ui, "Segoe UI", sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- 1. Фон: свечение, звёзды, зерно, виньетка ---------- */

.ambient{
  position:fixed; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(52% 48% at 50% 44%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 72%),
    radial-gradient(60% 55% at 14% 82%, color-mix(in srgb, var(--accent2) 60%, transparent), transparent 74%),
    radial-gradient(55% 48% at 88% 16%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 72%);
  filter: blur(30px) saturate(1.2);
  opacity:.72;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform: translate3d(-1.5%, -1%, 0) scale(1.02); }
  to  { transform: translate3d( 1.5%, 1.5%, 0) scale(1.07); }
}

.stars{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.55;
  background-image:
    radial-gradient(1.4px 1.4px at 34px 26px,  rgba(255,255,255,.55), transparent 100%),
    radial-gradient(1px   1px   at 148px 92px, rgba(255,255,255,.38), transparent 100%),
    radial-gradient(1.1px 1.1px at 232px 44px, rgba(255,255,255,.30), transparent 100%),
    radial-gradient(1px   1px   at 78px 176px, rgba(255,255,255,.26), transparent 100%);
  background-size: 340px 240px, 517px 383px, 271px 199px, 433px 311px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle{ from{opacity:.38} to{opacity:.62} }

.vignette{
  position:fixed; inset:0; z-index:55; pointer-events:none;
  background: radial-gradient(78% 68% at 50% 46%, transparent 42%, rgba(0,0,0,.62) 100%);
}

.grain{
  position:fixed; inset:-60%; z-index:56; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)}  60%{transform:translate(-3%,-2%)}
  80%{transform:translate(4%,2%)}   100%{transform:translate(0,0)}
}

/* ---------- 2. Шапка ---------- */

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:22px 34px;
}
.brand{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; }
.brand b{ font-size:12.5px; font-weight:800; letter-spacing:.17em; }
.brand small{ font-size:8px; font-weight:500; letter-spacing:.34em; color:var(--muted); }

.nav{ display:flex; gap:48px; justify-self:center; }
.nav button{
  font-size:10px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); padding:6px 2px; position:relative; transition:color .35s;
}
.nav button::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.nav button:hover{ color:var(--fg); }
.nav button:hover::after{ transform:scaleX(1); }

/* ---------- 3. Сцена ---------- */

/* Сцена: титул сверху, ниже — группа «карусель + подпись + стрелки».
   Внутри группы ряды идут подряд и центрируются целиком, поэтому
   подпись всегда держится рядом с карточками и не наезжает на них.
   overflow:hidden обязателен — дальние карточки уходят за край экрана. */
.stage{
  position:relative; width:100%; height:100dvh; z-index:10; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr);
  padding:78px 0 24px;
}

.showcase{
  min-height:0;
  display:grid; align-content:center; justify-items:center;
  row-gap:20px;
  /* стрелки на десктопе висят в левом нижнем углу — центрируем группу
     в зоне над ними, иначе она садится слишком низко */
  padding-bottom:88px;
}

.hero{
  z-index:22; text-align:center; pointer-events:none;
  animation: rise 1.1s var(--ease) both .1s;
}
.hero .star{ display:block; font-size:12px; opacity:.75; margin-bottom:13px; }
.hero h1{ font-size:14.5px; font-weight:700; letter-spacing:.42em; text-indent:.42em; }
.hero p{ margin-top:9px; font-size:8.5px; font-weight:500; letter-spacing:.44em; text-indent:.44em; color:var(--muted); }
@keyframes rise{ from{opacity:0; transform:translateY(-14px); filter:blur(6px)} to{opacity:1} }

/* ---------- 4. Карусель ---------- */

/* Карточки позиционированы абсолютно, своей высоты у карусели нет —
   задаём её явно, иначе ряд схлопнется в ноль. +24px, чтобы боковые
   карточки со сдвигом вниз не съедали отступ до подписи. */
.carousel{
  position:relative; z-index:10; width:100%;
  height:calc(var(--card-h) + 24px);
  perspective: 1700px; perspective-origin: 50% 50%;
  touch-action: pan-y;
}
/* pointer-events:none обязателен: боковые карточки уходят по Z за плоскость
   трека, и без этого он перехватывал бы все клики по ним */
.track{ position:absolute; inset:0; transform-style:preserve-3d; pointer-events:none; }

.card{
  position:absolute; left:50%; top:50%;
  width:var(--card-w); height:var(--card-h);
  margin-left:calc(var(--card-w) / -2); margin-top:calc(var(--card-h) / -2);
  border-radius:13px; overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:#14121a;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  cursor:pointer; will-change:transform,opacity,filter;
  transition:
    transform var(--dur) var(--ease),
    opacity   var(--dur) var(--ease),
    filter    var(--dur) var(--ease),
    box-shadow .6s var(--ease);
  animation: cardIn 1.2s var(--ease) backwards;
}
@keyframes cardIn{ from{opacity:0} }

/* строка браузера с адресом сайта */
.card-bar{
  position:absolute; top:0; left:0; right:0; z-index:4;
  height:var(--bar); display:flex; align-items:center; gap:5px; padding:0 11px;
  background:rgba(17,14,21,.96);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.card-bar i{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.2); }
/* проект не сайт — вместо точек значок приложения */
.card-bar.is-app svg{ width:11px; height:11px; color:rgba(255,255,255,.45); }
.card-bar.is-app span{ margin-left:4px; }
.card-bar span{
  margin-left:8px; padding:2px 13px; border-radius:999px;
  background:rgba(255,255,255,.06);
  font-size:7.5px; font-weight:600; letter-spacing:.08em;
  color:rgba(244,239,233,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:72%;
}

/* превью сайта: длинный скриншот, при наведении прокручивается */
.card-media{
  position:absolute; top:var(--bar); left:0; right:0; bottom:0;
  overflow:hidden; background:#0f0d12;
}
.card-media img{
  width:100%; height:auto; display:block;
  transform:translate3d(0,0,0);
  transition:transform 8s linear;
  will-change:transform;
}

.card-scrim{
  position:absolute; left:0; right:0; bottom:0; height:42%; z-index:2;
  pointer-events:none;
  background: linear-gradient(to top, rgba(6,4,8,.92) 0%, rgba(6,4,8,.5) 32%, transparent 100%);
}
.card-sheen{
  position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:screen;
  background: linear-gradient(118deg, rgba(255,255,255,.13), rgba(255,255,255,0) 32%, rgba(255,255,255,0) 66%, rgba(255,255,255,.06));
}
.card-label{
  position:absolute; left:15px; right:15px; bottom:13px; z-index:5;
  display:flex; flex-direction:column; gap:5px;
  opacity:.55; transition:opacity .5s var(--ease);
}
.card.is-active .card-label{ opacity:1; }
.cl-title{ font-size:10px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.cl-meta { font-size:7.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:rgba(244,239,233,.6); }

.card.is-active{
  box-shadow: 0 44px 120px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.16);
}

/* ---------- 5. Подпись под каруселью ---------- */

.caption{
  z-index:30;
  width:min(580px, 88vw); text-align:center;
}
.anim{ transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
.caption.out .anim{ opacity:0; transform:translateY(9px); filter:blur(7px); }

.overline{ font-size:8.5px; font-weight:600; letter-spacing:.34em; text-transform:uppercase; color:var(--muted); }

.ctitle{
  margin-top:13px;
  font-size:clamp(29px, 4.3vw, 56px); line-height:1;
  font-weight:800; letter-spacing:.015em; text-transform:uppercase;
}
.ctitle span{
  display:inline-block;
  animation: charIn .6s var(--ease) both;
  animation-delay: calc(var(--i) * 26ms);
}
@keyframes charIn{
  from{ opacity:0; transform:translateY(18px) rotateX(-45deg); filter:blur(5px); }
  to  { opacity:1; }
}
.caption.out .ctitle span{ animation:none; }

.cdesc{ margin-top:13px; font-size:12px; line-height:1.65; color:var(--muted); }

/* Ровно две строки: иначе высота подписи скачет от проекта к проекту,
   вслед за ней меняется высота ряда карусели и всё дёргается.
   В модалке описание показывается целиком. */
.caption .cdesc{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  overflow:hidden; min-height:calc(2 * 1.65em);
}

.pill{
  display:inline-flex; align-items:center; gap:11px; margin-top:20px;
  padding:11px 25px; border-radius:999px;
  border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.045);
  font-size:9px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  backdrop-filter:blur(10px);
  transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.pill:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); transform:translateY(-2px); }
.pill svg{ width:9px; height:9px; }

/* ---------- 6. Стрелки и счётчик ---------- */

.controls{
  position:absolute; left:34px; bottom:56px; z-index:30;
  display:flex; align-items:center; gap:11px;
}
.nav-btn{
  width:33px; height:33px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:grid; place-items:center;
  transition: background .35s, border-color .35s, transform .35s var(--ease);
}
.nav-btn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.45); }
.nav-btn:active{ transform:scale(.9); }
.nav-btn svg{ width:11px; height:11px; }
.counter{ margin-left:9px; font-size:9.5px; font-weight:600; letter-spacing:.2em; color:var(--muted); }
.counter b{ color:var(--fg); font-weight:700; }

/* ---------- 7. Оверлеи: модалка проекта и панели ---------- */

.overlay{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.overlay.open{ opacity:1; pointer-events:auto; }
.overlay-bd{ position:absolute; inset:0; background:rgba(6,4,7,.7); backdrop-filter:blur(16px); }

.win{
  position:relative; z-index:2;
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(19,15,20,.72); backdrop-filter:blur(22px);
  box-shadow:0 50px 140px rgba(0,0,0,.7);
  transform:scale(.955) translateY(16px);
  transition:transform .55s var(--ease);
}
.overlay.open .win{ transform:none; }

.close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); display:grid; place-items:center;
  transition:background .3s, transform .3s;
}
.close:hover{ background:rgba(255,255,255,.14); transform:rotate(90deg); }
.close svg{ width:11px; height:11px; }

/* модалка проекта */
.modal .win{
  width:min(1060px, 92vw); height:min(600px, 82vh);
  display:grid; grid-template-columns:1.4fr 1fr;
}
/* слева — весь сайт целиком, его можно прокрутить прямо в модалке */
.modal-media{
  position:relative; background:#0d0a0e;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent;
}
.modal-media::-webkit-scrollbar{ width:6px; }
.modal-media::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.22); border-radius:3px; }
.modal-media img{ width:100%; height:auto; display:block; }
.modal-media video{ width:100%; height:100%; object-fit:cover; }
.modal-info{
  padding:52px 44px; display:flex; flex-direction:column; justify-content:center;
  overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent;
}
.modal-info .overline{ margin-bottom:15px; }
.modal-info .ctitle{ margin:0; font-size:clamp(26px,2.6vw,42px); line-height:1.04; }
.modal-info .cdesc{ margin-top:17px; }
.modal-info .pill{ align-self:flex-start; margin-top:26px; }

/* характеристики проекта в модалке */
.modal-facts{
  margin-top:24px; display:grid; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:10px; overflow:hidden;
}
.modal-facts > div{
  background:rgba(255,255,255,.02); padding:11px 15px;
  display:flex; gap:16px; justify-content:space-between; align-items:baseline;
}
.modal-facts dt{
  font-size:8px; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.modal-facts dd{ font-size:11.5px; font-weight:600; text-align:right; }

/* панели «обо мне» / «контакты» */
.panel .win{ width:min(880px, 92vw); max-height:84vh; padding:60px 56px; overflow:auto; }
.panel h2{
  font-size:clamp(28px,3.6vw,46px); font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; line-height:1;
}
.panel .lead{ margin-top:22px; font-size:14px; line-height:1.75; color:#cdc4bc; max-width:60ch; }
.panel .grid{
  margin-top:38px; display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  grid-template-columns:repeat(3, 1fr);
}
.panel .cell{ background:rgba(255,255,255,.02); padding:22px 20px; }
.panel .cell span{ display:block; font-size:8px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }
.panel .cell b{ display:block; margin-top:10px; font-size:19px; font-weight:800; letter-spacing:.01em; }
.panel .cell a{ display:block; margin-top:10px; font-size:15px; font-weight:700; transition:color .3s; }
.panel .cell a:hover{ color:var(--accent); }
.panel ul{ margin-top:30px; display:flex; flex-wrap:wrap; gap:9px; list-style:none; }
.panel li{
  padding:8px 16px; border-radius:999px; border:1px solid var(--line);
  font-size:9px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}

/* ---------- 8. Адаптив ---------- */

@media (max-width: 1000px){
  :root{
    --bar: 22px;
    --chrome: 360px;
    --card-w: min(
                clamp(170px, min(68vw, (100dvh - var(--chrome)) * 1.6), 380px),
                var(--card-fit, 100vw)
              );
  }
  .topbar{ padding:18px 20px; }
  .nav{ gap:26px; }
  .nav button{ font-size:9px; letter-spacing:.2em; }
  .stage{ padding:70px 0 18px; }
  /* стрелки уходят в поток последним рядом группы */
  .controls{ position:static; margin-top:0; }
  .showcase{ padding-bottom:0; }
  .modal .win{ grid-template-columns:1fr; grid-template-rows:minmax(200px,44%) 1fr; height:min(720px,86vh); }
  .modal-info{ padding:30px 26px; }
  .panel .win{ padding:44px 26px; }
  .panel .grid{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .brand small{ display:none; }
  .topbar{ grid-template-columns:auto 1fr; }
  .nav{ justify-self:end; gap:14px; }
  .hero{ top:70px; }
  .cdesc{ font-size:11px; }
}

/* низкое окно: ужимаем титул и подпись, чтобы карусели осталась высота */
@media (max-height: 760px){
  :root{ --chrome: 350px; }
  .stage{ padding:66px 0 16px; }
  /* места и так впритык — не поднимаем группу, отдаём высоту карточкам */
  .showcase{ padding-bottom:24px; row-gap:14px; }
  .hero .star{ font-size:10px; margin-bottom:8px; }
  .hero h1{ font-size:12.5px; }
  .hero p{ margin-top:6px; font-size:7.5px; }
  .caption{ padding:18px 0 4px; }
  .ctitle{ margin-top:10px; font-size:clamp(24px, 3.4vw, 40px); }
  .cdesc{ margin-top:10px; font-size:11px; }
  .pill{ margin-top:14px; padding:9px 21px; }
  .controls{ bottom:38px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
}