/* Fonts */
@font-face { font-family:'SF Pro Ultralight'; src:url('../../fonts/SF-Pro-Display-Ultralight.woff') format('woff'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Eurostile Roman'; src:url('../../fonts/eurostile_roman.woff') format('woff'); font-weight:400; font-style:normal; font-display:swap; }

/* Variables — light default */
:root{
  --bg:#ffffff; --fg:#000000;
  --muted:#6b6b6b;
  --line:#e6e6e6; --line-strong:#d0d0d0;
  --card:#ffffff;
  --btn-bg:#000000; --btn-fg:#ffffff; --btn-outline:#000000;
}
.theme-dark:root{
  --bg:#000000; --fg:#ffffff;
  --muted:#a8a8a8;
  --line:#151515; --line-strong:#222;
  --card:#000000;
  --btn-bg:#ffffff; --btn-fg:#000000; --btn-outline:#ffffff;
}

/* Base + Scroll Snap */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }
html, body{ scroll-snap-type: y mandatory; } /* <-- секции притягиваются */
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'SF Pro Ultralight',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--fg); text-decoration:none; }
a:hover{ text-decoration:underline; }
.container{ width:min(1120px,92vw); margin:0 auto; }
.center{ text-align:center; }
.h2{
  font-family:'Eurostile Roman',sans-serif; font-weight:700;
  font-size:clamp(28px,4vw,44px); line-height:1.2; margin:8px 0 14px;
}
.kicker{ letter-spacing:.14em; text-transform:uppercase; font-size:12px; color:var(--muted); margin-bottom:10px; }
.muted{ color:var(--muted); }

/* Preloader */
#preloader{ position:fixed; inset:0; z-index:9999; background:#fff; display:grid; place-items:center; transition:opacity .4s ease, visibility .4s ease; }
.theme-dark #preloader{ background:#000; }
#preloader img{ width:220px; height:auto; }
.theme-dark #preloader img{ filter: invert(1); }
#preloader.hide{ opacity:0; visibility:hidden; }

/* Лого фикс по центру */
.logo-fixed{ position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:50; pointer-events:none; }
.theme-dark .logo-fixed img{ filter:invert(1) grayscale(1) contrast(1.05); }

/* ===== Panels with snap, без линий и без sticky ===== */
.panel{
  position:relative; height:100vh; /* ровно экран для снапа */
  background:var(--bg);
  scroll-snap-align: start; /* <-- притягиваемся к началу секции */
  display:grid; place-items:center; /* центрируем контент */
}
.panel + .panel{ border-top:none !important; }

.panel__content{
  width:min(1120px,92vw); margin:0 auto;
  opacity:0; transform: translate3d(0,160px,0); /* дефолт: спрятано ниже */
  transition: opacity .18s linear, transform .28s cubic-bezier(.22,.9,.18,1);
  will-change: opacity, transform;
}

/* Состояния (управляет JS) */
.panel__content.is-active{ opacity:1; transform: translate3d(0,0,0); z-index:3; pointer-events:auto; }
.panel__content.is-next  { opacity:0; transform: translate3d(0,160px,0); z-index:1; pointer-events:none; }
.panel__content.is-prev  { opacity:0; transform: translate3d(0,-40px,0); z-index:1; pointer-events:none; }

/* e.gif инверсия */
.egif{ filter:none; display:block; max-width:90vw; height:auto; }
.theme-dark .egif{ filter: invert(1); }

/* HERO */
.hero{ margin:0 0 6px 0; line-height:1.15; }
.hero.small{ font-size:clamp(22px,4vw,44px); font-weight:400; margin:0; }
.hero.strong{ font-size:clamp(24px,5vw,56px); font-weight:800; font-family:'Eurostile Roman',sans-serif; margin-top:12px; }

/* Split stripe */
.stripe{ width:min(1120px,92vw); margin:0 auto; }
.stripe--split{ display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:start; }
@media (max-width:980px){ .stripe--split{ grid-template-columns:1fr; gap:28px; } }
.slogan{
  font-family:'Eurostile Roman',sans-serif; font-weight:900; letter-spacing:.24em; text-transform:uppercase;
  font-size:clamp(18px,3.6vw,28px); margin-top:8px; padding-top:8px;
}

/* Grid 2 */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:8vw; }
@media (max-width:980px){ .grid-2{ grid-template-columns:1fr; gap:28px; } }

/* Brain cards */
.brain-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:24px; }
@media (max-width:980px){ .brain-steps{ grid-template-columns:1fr; } }
.brain-card{ border:1px solid var(--line-strong); border-radius:16px; padding:18px; background:var(--card); color:var(--fg); }
.brain-card__num{ width:32px; height:32px; border:2px solid var(--fg); border-radius:50%; display:grid; place-items:center; font-weight:800; margin:10px 0; }
.brain-card .ph{
  height:120px; border-radius:12px; background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--fg) 8%, var(--bg)), color-mix(in srgb, var(--fg) 8%, var(--bg)) 8px, transparent 8px, transparent 16px);
  border:1px dashed var(--line-strong);
}

/* Team */
.team-grid{ margin-top:22px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:1100px){ .team-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{ border:1px solid var(--line-strong); border-radius:16px; padding:16px; background:var(--card); color:var(--fg); }
.team-card .avatar{
  height:140px; border-radius:14px;
  background:
    radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--fg) 10%, var(--bg)), transparent 60%),
    radial-gradient(ellipse at 70% 70%, color-mix(in srgb, var(--fg) 12%, var(--bg)), transparent 62%),
    color-mix(in srgb, var(--fg) 2%, var(--bg));
  border:1px solid var(--line-strong);
  margin-bottom:12px;
}

/* Roadmap */
.road{ position:relative; width:min(840px,92vw); margin:0 auto; display:grid; row-gap:18px; }
.road__track{ position:absolute; left: calc(50% - 1px); top: 6px; bottom: 6px; width:2px; background: color-mix(in srgb, var(--fg) 10%, var(--bg)); }
.road__progress{ position:absolute; left:0; top:0; width:100%; height:0%; background: var(--fg); transition: height .12s linear; }
.road__item{
  position:relative; padding:12px 18px; border:1px solid var(--line-strong); border-radius:12px;
  background:var(--card); color:var(--fg); font-family:'Eurostile Roman',sans-serif;
  width:min(420px, 90%); justify-self:center;
}
.road__item::before{
  content:""; position:absolute; left: calc(50% - 6px); top: 50%; transform: translate(-50%, -50%);
  width:12px; height:12px; border:2px solid var(--fg); border-radius:50%; background: var(--bg);
}
.road__item.active{ box-shadow: 0 0 0 2px var(--fg) inset; }

/* CTA */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:12px;
  font-family:'Eurostile Roman',sans-serif; font-weight:700; letter-spacing:.02em;
  transition: transform .15s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn--outline{ border:2px solid var(--btn-outline); color:var(--fg); background:transparent; }
.btn--outline:hover{ background:var(--fg); color:var(--bg); text-decoration:none; }
.btn--solid{ border:2px solid var(--btn-bg); background:var(--btn-bg); color:var(--btn-fg); }
.btn--solid:hover{ background:transparent; color:var(--fg); }
.cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Визитка-футер */
.visit-card{
  width:min(1120px,92vw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px;
  border:1px solid var(--line-strong); border-radius:18px; padding:22px; background:var(--card);
}
@media (max-width:820px){ .visit-card{ grid-template-columns:1fr; } }
.visit-title{ font-family:'Eurostile Roman',sans-serif; font-weight:900; letter-spacing:.2em; font-size:clamp(22px,4vw,32px); }
.visit-sub{ color:var(--muted); margin-top:8px; font-size:14px; }
.visit-right{ display:grid; gap:8px; justify-items:start; }
.visit-links{ display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }
.copy{ width:min(1120px,92vw); margin:12px auto 0; color:var(--muted); font-size:12px; text-align:center; }

/* Фикс. нижние ссылки */
.floating-footer{
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 60; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: transparent; padding: 0;
}
.f-link{ font-family:'Eurostile Roman',sans-serif; font-weight:700; color: var(--fg); padding: 2px 0; border-bottom: 2px solid transparent; }
.f-link:hover{ border-bottom-color: var(--fg); }
.f-link--accent{ border-bottom-color: var(--fg); }
.dot{ opacity:.4; user-select:none; }
.f-toggle{ border: 0; background: transparent; color: var(--fg); cursor: pointer; font-family:'Eurostile Roman',sans-serif; font-weight:700; padding: 2px 0; border-bottom: 2px solid transparent; }
.f-toggle.is-active{ border-bottom-color: var(--fg); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .panel__content{ transition:none !important; }
}








/* ====== REVEAL ANIMATIONS (повторяются при каждом появлении секции) ====== */
:root{ --stagger: 140ms; }          /* шаг задержки для стаггера */
.reveal{ opacity:0; will-change: opacity, transform, filter; }

/* базовые состояния (до входа) */
.fx-up   { transform: translateY(24px); }
.fx-down { transform: translateY(-24px); }
.fx-left { transform: translateX(28px); }
.fx-right{ transform: translateX(-28px); }
.fx-zoom { transform: scale(.96); }
.fx-rotate{ transform: rotate(-2deg) translateY(10px); transform-origin: 50% 70%; }
.fx-skew { transform: skewY(4deg) translateY(20px); }

/* когда контейнер помечен .in — анимируем детей .reveal */
.reveal.in{ animation: none; } /* сброс, далее конкретные эффекты */

/* эффекты */
.reveal.fx-up.in      { animation: slideUp .55s cubic-bezier(.22,.9,.18,1) both; }
.reveal.fx-down.in    { animation: slideDown .55s cubic-bezier(.22,.9,.18,1) both; }
.reveal.fx-left.in    { animation: slideLeft .6s cubic-bezier(.22,.9,.18,1) both; }
.reveal.fx-right.in   { animation: slideRight .6s cubic-bezier(.22,.9,.18,1) both; }
.reveal.fx-zoom.in    { animation: zoomIn .55s cubic-bezier(.22,.9,.18,1) both; }
.reveal.fx-rotate.in  { animation: rotateIn .6s cubic-bezier(.22,.9,.18,1) both; }
.reveal.fx-skew.in    { animation: skewIn .55s cubic-bezier(.22,.9,.18,1) both; }

/* лёгкий fade для всего (накладывается) */
.reveal.re-fade.in    { animation: fadeIn .6s ease both; }

/* стаггер по индексу (JS выставит --i) */
.reveal.in{ animation-delay: calc(var(--i, 0) * var(--stagger)); }

/* кнопки снизу (CTA, нижний фикс-футер) */
.reveal-btn{ opacity:0; transform: translateY(30px); }
.reveal-btn.in{ animation: riseIn .45s cubic-bezier(.22,.9,.18,1) both; }

/* побольше расстояние между блоками */
.stack-lg > * + *{ margin-top: clamp(14px, 2.8vw, 28px); }
.cta-row{ margin-top: clamp(20px, 3.5vw, 40px); }

/* KEYFRAMES */
@keyframes slideUp   { from{ opacity:0; transform:translateY(24px)} to{ opacity:1; transform:translateY(0)} }
@keyframes slideDown { from{ opacity:0; transform:translateY(-24px)} to{ opacity:1; transform:translateY(0)} }
@keyframes slideLeft { from{ opacity:0; transform:translateX(28px)} to{ opacity:1; transform:translateX(0)} }
@keyframes slideRight{ from{ opacity:0; transform:translateX(-28px)} to{ opacity:1; transform:translateX(0)} }
@keyframes zoomIn    { from{ opacity:0; transform:scale(.96)} to{ opacity:1; transform:scale(1)} }
@keyframes rotateIn  { from{ opacity:0; transform:rotate(-2deg) translateY(10px)} to{ opacity:1; transform:rotate(0) translateY(0)} }
@keyframes skewIn    { from{ opacity:0; transform:skewY(4deg) translateY(20px)} to{ opacity:1; transform:skewY(0) translateY(0)} }
@keyframes fadeIn    { from{ opacity:0 } to{ opacity:1 } }
@keyframes riseIn    { from{ opacity:0; transform:translateY(30px)} to{ opacity:1; transform:translateY(0)} }

/* анимация фикс-кнопок снизу при загрузке */
.floating-footer{ opacity:0; transform: translateY(16px); transition: opacity .4s ease, transform .4s ease; }
.floating-footer.ready{ opacity:1; transform: translateY(0); }








/* ===== Бесконечный перелив слева-направо по буквам ===== */
.repute-sheen{
  --band: 22%;         /* ширина светлой полосы */
  --spd: 2.2s;         /* скорость лупа */
  background-image:
    linear-gradient(90deg,
      var(--muted) 0%,
      var(--muted) calc(50% - var(--band)),
      var(--fg)    calc(50% - var(--band)),
      var(--fg)    calc(50% + var(--band)),
      var(--muted) calc(50% + var(--band))
    );
  background-size: 300% 100%;
  background-position: -50% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;            /* сам текст — клип градиента */
  will-change: background-position;
}
.repute-sheen.run{               /* когда секция в кадре — запускаем */
  animation: repute-loop var(--spd) linear infinite;
}
@keyframes repute-loop{
  0%   { background-position: -50% 0; }
  100% { background-position: 150% 0; }
}



/* ===== Типографика блока «Почему мы» ===== */
.typo-block{
  width:min(980px, 92vw);
  margin-inline:auto;
  text-wrap: pretty;
  hanging-punctuation: first last;
  font-feature-settings: "kern","liga","clig","calt";
  --ch: 64ch; /* целевая длина строки */
}

.typo-kicker{
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.typo-slogan{
  position: relative;
  margin: 2px 0 18px;
  font-family: 'Eurostile Roman', sans-serif;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.15;
  font-size: clamp(22px, 3.6vw, 30px);
  text-align: center;
}

.typo-slogan__rule{
  display:block;
  height:1px;
  width: 220px;
  margin: 10px auto 0;
  background: currentColor;
  opacity:.22;
}

.typo-lead{
  margin: 6px auto 18px;
  max-width: var(--ch);
  font-size: clamp(18px, 2.2vw, 20px);
  line-height: 1.55;
  letter-spacing: .005em;
  text-align: center;
}

.typo-columns{
  margin: 10px auto 0;
  column-gap: 56px;
  max-width: var(--ch);
  line-height: 1.6;
  font-size: clamp(16px, 1.8vw, 18px);
  color: var(--fg);
  /* вместо реального двухколоночного потока — управляемые блоки */
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.typo-columns > p{ margin: 0; hyphens: auto; }
.typo-columns .typo-muted{ color: var(--muted); }

.typo-em{
  position: relative;
  font-family: 'Eurostile Roman', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.typo-em::after{
  content:"";
  position:absolute; left:0; right:0; bottom:.08em; height: .08em;
  background: currentColor; opacity:.18;
}

@media (max-width: 900px){
  .typo-columns{ grid-template-columns: 1fr; row-gap: 14px; }
  .typo-slogan__rule{ width: 160px; }
}

/* чуть больше воздуха вокруг блока */
.typo-block{ padding-block: clamp(8px, 3vw, 18px); }






/* ====== MOBILE ADAPTATION ====== */

/* Базовые мобильные размеры */
@media (max-width: 980px){
  /* панели — ровно по экрану, без лишних скроллов */
  .panel{ height: 100svh; }            /* учитывает iOS бары */
  .panel__content{ width: 92vw; }

  /* фикс-кнопки снизу — в одну строку со скроллом */
  .floating-footer{
    left: 0; transform:none; right: 0; bottom: max(12px, env(safe-area-inset-bottom));
    justify-content: center; padding: 0 12px;
    gap: 10px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .floating-footer::-webkit-scrollbar{ display:none; }

  /* блок WHY (наша цель / люди) → в столбик */
  .why-split{ grid-template-columns: 1fr; row-gap: 18px; width: 92vw; }
  .why-slogan{ font-size: clamp(28px, 8vw, 40px); line-height: 1.06; }
  .why-lead, .why-text{ font-size: 15px; line-height: 1.6; max-width: 100%; }
  .why-kicker{ letter-spacing: .16em; }
}

/* Узкие экраны */
@media (max-width: 700px){
  /* геро-заголовки и слоганы меньше */
  .hero.small{ font-size: clamp(18px, 6vw, 22px); }
  .hero.strong{ font-size: clamp(20px, 7vw, 28px); }

  /* “мозг агентства” — карточки в одну колонку */
  .brain-steps{ grid-template-columns: 1fr; gap: 14px; }
  .team-grid{ grid-template-columns: 1fr 1fr; gap: 12px; }
  .visit-card{ grid-template-columns: 1fr; gap: 14px; }

  /* кнопки (CTA) — крупнее зона касания */
  .btn{ padding: 12px 16px; border-radius: 12px; font-size: 15px; }
  .cta-row{ gap: 10px; margin-top: 18px; }
}

/* Очень узкие < 480px */
@media (max-width: 480px){
  .team-grid{ grid-template-columns: 1fr; }
  .goal-slogan, .why-slogan{ word-break: break-word; overflow-wrap: anywhere; }
  .why-caret{ width: 0.08em; height: 1.05em; vertical-align: -0.2em; }
  .logo-fixed img{ width: 140px; height: auto; }
}


/* === Floating footer: всегда виден сразу, без ожиданий === */
.floating-footer{
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);    /* без первоначального смещения */
  z-index: 2147483647;            /* выше прелоадера */
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  background: transparent;
  padding: 0;

  opacity: 1 !important;          /* видим сразу */
  visibility: visible !important;  /* без скрытия */
  pointer-events: auto;

  transition: none;                /* убираем анимацию появления */
}

@media (max-width: 980px){
  .floating-footer{
    left: 0; right: 0; transform: none;
    justify-content: center; gap: 10px;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .floating-footer::-webkit-scrollbar{ display:none; }
}













/*portfolio*/
/* ===== Escense Portfolio Section ===== */
#pfTitle {
  color:#fff;
  font-family:'Eurostile Roman',sans-serif;
  font-size:clamp(24px,4vw,48px);
  margin:0 0 24px 0;
  align-self:start;
}

/* Секция-панель под систему scroll-snap */
.panel.portfolio-panel {
  background:#000;
  display:grid;
  place-items:center;
  height:100vh;
  overflow:hidden;
}
.panel.portfolio-panel .panel__content {
  width:100vw;
  max-width:none;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* ====== ГРИД ====== */
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,3vw,48px);
  width:100vw;
  margin:0;
  padding:0;
  align-items:center;
}

/* ====== КАРТОЧКА ====== */
.card {
  position:relative;
  width:100%;
  height:min(38vh,28vw);
  background:#000;
  border-radius:0;
  overflow:hidden;
  cursor:pointer;
  opacity:0;
  transform:translateY(36px);
  transition:opacity .6s ease,
             transform .6s cubic-bezier(.22,.9,.18,1),
             box-shadow .3s ease,
             filter .3s ease;
}
.card.in {
  opacity:1;
  transform:translateY(0);
}
.card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:filter .3s ease;
}
.card:hover img {
  filter:brightness(0.6);
}
.card:hover {
  box-shadow:0 0 40px rgba(255,255,255,.08);
}

/* ====== Overlay с названием ====== */
.overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
  opacity:0;
  transition:opacity .25s ease;
  text-align:center;
}
.card:hover .overlay {
  opacity:1;
}
.title {
  color:#fff;
  font-family:'Eurostile Roman',sans-serif;
  font-weight:700;
  font-size:clamp(16px,2vw,24px);
  padding:0 16px;
}

/* ====== Адаптив ====== */
@media (max-width:1100px){
  .grid { grid-template-columns:repeat(2,1fr); }
  .card { height:min(42vh,36vw); }
}
@media (max-width:680px){
  .grid { grid-template-columns:1fr; gap:clamp(12px,4vw,28px); }
  .card { height:min(50vh,62vw); }
  .overlay { opacity:1; background:rgba(0,0,0,.35); }
}