/* ============================================================
   Общие стили сайта кафедры
   ------------------------------------------------------------
   Отсюда берут оформление и главная страница, и внутренние.
   Главная подключает файл первой, а дальше в своём <style>
   держит только то, что относится к закреплённой сцене с
   роликами: её правилам положено идти после общих.
   ============================================================ */

/* ============================================================
   1. Основа
   ============================================================ */
:root{
  --bg:        #070d18;
  --bg-2:      #0b1320;
  --surface:   #101b2d;
  --line:      #23334d;
  --text:      #e8edf5;
  --muted:     #a9b8cc;
  --muted-2:   #7b8ca3;
  --accent:    #7cc7ea;
  --accent-2:  #b3e0f5;
  --warm:      #f0b775;

  --font-display: 'Piazzolla', Georgia, serif;
  --font-text:    'Commissioner', system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --pad:  clamp(20px, 5vw, 60px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ font-family:var(--font-display); font-weight:500; line-height:1.1; margin:0; letter-spacing:-0.015em; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.num{ font-variant-numeric:tabular-nums; }
::selection{ background:rgba(124,199,234,.28); }

/* ============================================================
   2. Появление блоков при прокрутке
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:.09s; }
.js .reveal[data-delay="2"]{ transition-delay:.18s; }
.js .reveal[data-delay="3"]{ transition-delay:.27s; }

/* ============================================================
   3. Верхняя панель
   Внутренние страницы держат её на виду постоянно; главная
   добавляет класс topbar--hero и показывает после первого экрана.
   ============================================================ */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:13px var(--pad);
  background:rgba(7,13,24,.74); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(124,199,234,.13);
}
/* На главной панель видна с первого кадра — иначе о разделах сайта
   не догадаться. Но на первом экране она идёт без подложки: под ней
   Земля, и плашка во всю ширину резала бы кадр. Подложка приезжает,
   как только читатель трогает прокрутку. */
.topbar--hero{
  background:transparent; backdrop-filter:none; border-bottom-color:transparent;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease),
             border-color .45s var(--ease);
}
.topbar--hero .topbar__mark,
.topbar--hero .topbar__nav a{ text-shadow:0 1px 5px rgba(0,0,0,.85); }
.topbar--hero.is-solid{
  background:rgba(7,13,24,.74); backdrop-filter:blur(16px);
  border-bottom-color:rgba(124,199,234,.13);
}
.topbar--hero.is-solid .topbar__mark,
.topbar--hero.is-solid .topbar__nav a{ text-shadow:none; }
.topbar__mark{ font-family:var(--font-display); font-size:16px; font-weight:500; white-space:nowrap; }
.topbar__mark em{ font-style:normal; color:var(--accent); }
.topbar__nav{ display:flex; flex-wrap:nowrap; gap:18px; font-size:13.5px; color:var(--muted); white-space:nowrap; }
.topbar__nav a{ position:relative; transition:color .25s ease; }
.topbar__nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-5px; height:1px;
  background:var(--accent); transition:right .35s var(--ease);
}
.topbar__nav a:hover{ color:var(--accent-2); }
.topbar__nav a:hover::after{ right:0; }
.topbar__nav a.is-here{ color:var(--accent-2); }
.topbar__nav a.is-here::after{ right:0; }
/* Семь пунктов в строку помещаются не везде: марка и меню просят
   около 950 px, поэтому ниже тысячи панель переносит меню под марку,
   а на телефоне оно ещё и прокручивается вбок. */
@media (max-width:1000px){
  .topbar{ flex-direction:column; align-items:flex-start; gap:8px; padding-block:10px; }
  .topbar__nav{ width:100%; overflow-x:auto; gap:16px; font-size:13px; scrollbar-width:none; }
  .topbar__nav::-webkit-scrollbar{ display:none; }
  /* На первом экране название кафедры и так стоит крупно прямо под
     панелью — марку там прячем, и панель остаётся в одну строку.
     Второй ряд на телефоне отнял бы место у карт прогноза. */
  .topbar--hero:not(.is-solid) .topbar__mark{ display:none; }
}

/* ============================================================
   4. Бегущая строка терминов
   ============================================================ */
.ticker{
  overflow:hidden; padding:18px 0;
  border-block:1px solid rgba(124,199,234,.12);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker__track{ display:flex; width:max-content; animation:slide 58s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__track span{
  font-family:var(--font-display); font-style:italic; font-size:16px;
  color:var(--muted-2); padding:0 26px; white-space:nowrap;
}
.ticker__track span::after{ content:'·'; margin-left:26px; color:var(--accent); }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================
   5. Секции
   ============================================================ */
.section{ position:relative; padding:clamp(76px, 9vw, 140px) 0; overflow:hidden; }
.section--alt{ background:var(--bg-2); border-block:1px solid rgba(124,199,234,.09); }
.section--tight{ padding-block:clamp(52px, 6vw, 84px); }

.aurora{
  position:absolute; z-index:0; pointer-events:none;
  width:70vw; height:70vw; max-width:900px; max-height:900px; border-radius:50%;
  filter:blur(90px); opacity:.16;
  background:radial-gradient(circle, var(--accent) 0%, transparent 68%);
  animation:drift 26s ease-in-out infinite alternate;
}
.aurora--a{ top:-22%; right:-16%; }
.aurora--b{ bottom:-28%; left:-18%; animation-duration:34s; animation-delay:-9s;
            background:radial-gradient(circle, var(--warm) 0%, transparent 68%); opacity:.11; }
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-6%, 7%, 0) scale(1.16); }
}
.section > .wrap{ position:relative; z-index:1; }

.section__eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; }
.section h2{ font-size:clamp(27px, 3.4vw, 46px); font-weight:400; max-width:20ch; }
.section h2 em{ font-style:italic; color:var(--accent-2); }
.section__lead{ margin-top:24px; max-width:60ch; color:var(--muted); font-weight:300; font-size:clamp(16px,1.4vw,18.5px); }

.split{ display:grid; gap:clamp(30px,4vw,70px); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
@media (max-width:880px){ .split{ grid-template-columns:1fr; } }

.facts{ list-style:none; margin:0; padding:0; }
.facts li{
  padding:18px 0; border-top:1px solid var(--line);
  color:var(--muted-2); font-size:15.5px; font-weight:300;
  transition:border-color .35s ease, padding-left .35s var(--ease);
}
.facts li:hover{ border-color:var(--accent); padding-left:12px; }
.facts li strong{
  display:block; color:var(--text); font-weight:500; margin-bottom:4px;
  font-family:var(--font-display); font-size:17px;
}

.cards{ display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:56px; }
@media (max-width:900px){ .cards{ grid-template-columns:1fr; } }

.card{
  position:relative; overflow:hidden; display:block;
  padding:32px 30px; border:1px solid var(--line); border-radius:18px;
  background:var(--surface); transition:border-color .3s ease, transform .3s var(--ease);
}
.card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(124,199,234,.13), transparent 60%);
  opacity:0; transition:opacity .35s ease;
}
.card > *{ position:relative; z-index:1; }
.card:hover{ border-color:rgba(124,199,234,.42); transform:translateY(-4px); }
.card:hover::before{ opacity:1; }
.card h3{ font-size:20px; font-weight:500; margin-bottom:13px; }
.card p{ color:var(--muted-2); font-size:15px; font-weight:300; }
.card__go{ display:block; margin-top:16px; font-size:14px; color:var(--accent-2); }
.card__go span{ display:inline-block; transition:transform .3s var(--ease); }
.card:hover .card__go span{ transform:translateX(6px); }

/* ============================================================
   6. Шапка внутренней страницы
   ============================================================ */
.page-head{
  position:relative; overflow:hidden;
  padding:clamp(118px,15vh,168px) 0 clamp(44px,6vh,72px);
  border-bottom:1px solid rgba(124,199,234,.10);
  background:linear-gradient(180deg, #0a1322 0%, var(--bg) 100%);
}
.page-head h1{ font-size:clamp(32px, 4.6vw, 60px); font-weight:400; max-width:18ch; }
.page-head h1 em{ font-style:italic; color:var(--accent-2); }
.page-head__lead{ margin-top:22px; max-width:62ch; color:var(--muted); font-weight:300; font-size:clamp(16px,1.4vw,19px); }

.crumb{ display:inline-block; margin-bottom:18px; font-size:13.5px; color:var(--muted-2); transition:color .25s ease; }
.crumb:hover{ color:var(--accent); }

/* ============================================================
   7. Люди
   ============================================================ */
.people{ display:grid; gap:18px; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:40px; }
@media (max-width:980px){ .people{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .people{ grid-template-columns:1fr; } }

.person-card{
  display:flex; gap:16px; align-items:flex-start;
  padding:20px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface);
  transition:border-color .3s ease, transform .3s var(--ease);
}
.person-card:hover{ border-color:rgba(124,199,234,.42); transform:translateY(-3px); }
.person-card__face{
  flex:none; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:19px; color:var(--accent-2);
  background:radial-gradient(circle at 34% 30%, #1b2b45, #0d1626);
  border:1px solid rgba(124,199,234,.22);
}
/* строчные элементы внутри карточки — блоками, иначе имя, должность
   и тема слипаются в одну строку и отступы к ним не применяются */
.person-card__text{ display:block; min-width:0; }
.person-card__name{ display:block; font-family:var(--font-display); font-size:17.5px; font-weight:500; line-height:1.25; }
.person-card__role{ display:block; margin-top:5px; font-size:13.5px; color:var(--accent); font-weight:300; line-height:1.35; }
.person-card__field{ display:block; margin-top:7px; font-size:14px; color:var(--muted-2); font-weight:300; line-height:1.4; }

.placeholder-note{
  margin-top:26px; padding:14px 18px;
  border:1px dashed rgba(124,199,234,.3); border-radius:12px;
  font-size:14px; color:var(--muted-2); font-weight:300;
}

/* ---------- страница сотрудника ---------- */
.person{ display:grid; gap:clamp(28px,4vw,58px); grid-template-columns:minmax(0,300px) minmax(0,1fr); align-items:start; }
@media (max-width:820px){ .person{ grid-template-columns:1fr; } }

.person__photo{
  aspect-ratio:4/5; border-radius:20px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 40% 28%, #1b2b45, #0b1220);
  border:1px solid var(--line); color:var(--muted-2); font-size:13.5px;
}
.person__side{ margin-top:22px; font-size:14.5px; color:var(--muted-2); font-weight:300; }
.person__side b{ display:block; margin-bottom:5px; color:var(--text); font-weight:500;
                 font-family:var(--font-display); font-size:15px; }
.person__side + .person__side{ margin-top:18px; }

.person__role{ margin-top:12px; font-size:16px; color:var(--accent); font-weight:300; }
.person__bio{ margin-top:26px; color:var(--muted); font-weight:300; max-width:62ch; }

.tags{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.tag{
  padding:7px 15px; border-radius:999px; font-size:13.5px; font-weight:300;
  border:1px solid rgba(124,199,234,.26); color:var(--accent-2);
  transition:border-color .25s ease, background .25s ease;
}
a.tag:hover{ border-color:var(--accent); background:rgba(124,199,234,.1); }

.subhead{ margin-top:44px; margin-bottom:16px; font-family:var(--font-display);
          font-size:21px; font-weight:500; }

.list{ list-style:none; margin:0; padding:0; }
.list li{ padding:16px 0; border-top:1px solid var(--line); font-weight:300; color:var(--muted-2); font-size:15px; }
.list li strong{ display:block; color:var(--text); font-weight:500; font-size:16px; margin-bottom:3px;
                 font-family:var(--font-display); }

/* ============================================================
   8. Новости, медиа, программы, вехи
   ============================================================ */
.news{ display:grid; gap:18px; margin-top:44px; }
.news article{
  display:grid; gap:6px 28px; grid-template-columns:150px minmax(0,1fr);
  padding:24px 0; border-top:1px solid var(--line);
}
@media (max-width:680px){ .news article{ grid-template-columns:1fr; } }
.news time{ font-size:13.5px; color:var(--accent); letter-spacing:.04em; padding-top:4px; }
.news h3{ font-size:20px; font-weight:500; }
.news p{ grid-column:2; color:var(--muted-2); font-size:15px; font-weight:300; }
@media (max-width:680px){ .news p{ grid-column:1; } }

.tiles{ display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:44px; }
@media (max-width:980px){ .tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:620px){ .tiles{ grid-template-columns:1fr; } }
.tile{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); }
.tile__ph{
  aspect-ratio:4/3; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 42% 34%, #16243a, #0a1220);
  color:var(--muted-2); font-size:13px; border-bottom:1px solid var(--line);
}
.tile__body{ padding:20px 22px; }
.tile__cat{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.tile__title{ margin-top:9px; font-family:var(--font-display); font-size:18px; font-weight:500; line-height:1.28; }
.tile__count{ margin-top:9px; font-size:13.5px; color:var(--muted-2); font-weight:300; }

.programs{ display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:48px; }
@media (max-width:980px){ .programs{ grid-template-columns:1fr; } }
.program{ padding:30px 28px; border:1px solid var(--line); border-radius:18px; background:var(--surface); }
.program__lvl{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.program h3{ margin-top:12px; font-size:22px; font-weight:500; }
.program p{ margin-top:14px; color:var(--muted-2); font-size:15px; font-weight:300; }
.program__foot{ margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
                font-size:13.5px; color:var(--muted-2); font-weight:300; }

.timeline{ list-style:none; margin:44px 0 0; padding:0; }
.timeline li{ display:grid; gap:6px 30px; grid-template-columns:110px minmax(0,1fr);
              padding:20px 0; border-top:1px solid var(--line); font-weight:300; color:var(--muted-2); }
.timeline b{ font-family:var(--font-display); font-size:24px; color:var(--accent-2); font-weight:500; }
@media (max-width:620px){ .timeline li{ grid-template-columns:1fr; } }

.stats{ display:flex; flex-wrap:wrap; gap:34px 58px; margin-top:44px; }
.stats div b{ display:block; font-family:var(--font-display); font-size:clamp(30px,3.6vw,44px);
              font-weight:500; color:var(--accent-2); line-height:1; }
.stats div span{ display:block; margin-top:8px; font-size:14.5px; color:var(--muted-2); font-weight:300; }

/* ============================================================
   9. Подвал
   ============================================================ */
.site-footer{ padding:60px 0 70px; border-top:1px solid var(--line); color:var(--muted-2); font-size:14.5px; }
.site-footer__row{ display:flex; flex-wrap:wrap; gap:20px 44px; justify-content:space-between; }
.site-footer a{ color:var(--accent); transition:color .25s ease; }
.site-footer a:hover{ color:var(--accent-2); }
.site-footer__nav{ display:flex; flex-wrap:wrap; gap:8px 20px; }

/* ============================================================
   10. «Меньше движения» — общая часть
   Правила сцены с роликами лежат в самой главной странице,
   последним блоком её <style>.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .aurora{ display:none; }
  .ticker__track{ animation:none; }
  .js .reveal{ opacity:1 !important; transform:none !important; }
}