/* Стили для js/motion.js. Подключается на всех страницах последним. */

/* ===== Плавный скролл (Lenis) ===== */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* Параллакс-элементы - на свой слой: сдвиг идёт на компоситоре, без перерисовки главным потоком.
   Самый тяжёлый - весь тёмный подвал .cta, он параллаксит на каждой странице. */
.has-motion .hero__photo, .has-motion .hero__title,
.has-motion .about-hero__photo,
.has-motion .cta > .wrap, .has-motion .cta__bottom { will-change: transform; }

/* ===== Появление при скролле ===== */
.has-motion .reveal-fade { opacity: 0; translate: 0 2em; transition: opacity 1.75s cubic-bezier(.19,1,.22,1), translate 1.75s cubic-bezier(.19,1,.22,1); }
.has-motion .reveal-fade.is-inview { opacity: 1; translate: 0 0; }
.reveal-lines .line { display: block; overflow: hidden; }
.reveal-lines .line > span { display: block; }
.has-motion .reveal-lines .line > span { translate: 0 100%; transition: translate 1s cubic-bezier(.215,.61,.355,1) calc(var(--l, 0) * 0.04s); }
.has-motion .reveal-lines.is-inview .line > span { translate: 0 0; }

/* ===== Подвал: дуга предыдущего блока свисает в тёмный подвал и расправляется скроллом ===== */
.cta { --curve-color: #FFFFFF; }
.cta__curve { position: absolute; z-index: 3; left: -25%; top: -16vh; width: 150%; height: 32vh; border-radius: 50%; background: var(--curve-color); pointer-events: none; will-change: transform; }

/* ===== Заливка кругом при наведении ===== */
:where(.has-fill) { position: relative; }
.has-fill { overflow: hidden; isolation: isolate; transition-property: color, background-color, box-shadow, opacity; }
.btn-fill { position: absolute; z-index: -1; left: -25%; top: -50%; width: 150%; height: 200%; border-radius: 50%; background: var(--fill, #166FF5); translate: 0 76%; pointer-events: none; }
.btn-text { display: inherit; align-items: inherit; justify-content: inherit; gap: inherit; }
.has-fill.is-hover { color: var(--fill-text, #FFFFFF); transition: color .3s ease .1s; }

.cta__button,
.brief__submit { --fill: #2F84FF; }
.intro__about { --fill: #166FF5; }
.cta__pill,
.brief-success__reset { --fill: #FFFFFF; --fill-text: #1C1D20; }
.all-works,
.pill-btn,
.icon-btn { --fill: #1C1D20; --fill-text: #FFFFFF; }
.pill-btn[aria-pressed="true"],
.icon-btn[aria-pressed="true"] { --fill: #166FF5; }
.pill-btn.is-hover sup { color: inherit; }

/* ===== Превью проекта и кружок «Смотреть» за курсором ===== */
.cursor-media,
.cursor-btn { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; }
.cursor-media__scale { --w: max(260px, calc(400 * var(--k))); width: var(--w); height: calc(var(--w) * 0.75); margin: calc(var(--w) * -0.375) 0 0 calc(var(--w) * -0.5); overflow: hidden; background: #E9EAEB; scale: 0; transition: scale .4s cubic-bezier(.76,0,.24,1); }
.cursor-media.is-active .cursor-media__scale { scale: 1; }
.cursor-media__strip { height: 100%; transition: translate .5s cubic-bezier(.76,0,.24,1); }
.cursor-media__slide { display: flex; align-items: center; justify-content: center; height: 100%; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-weight: 400; font-size: max(24px, calc(46 * var(--k))); color: #B3B2B2; }
.cursor-btn__scale { --s: max(72px, calc(96 * var(--k))); display: flex; align-items: center; justify-content: center; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: #166FF5; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; font-weight: 400; font-size: max(13px, calc(16 * var(--k))); scale: 0; transition: scale .4s cubic-bezier(.76,0,.24,1); }
.cursor-btn.is-active .cursor-btn__scale { scale: 1; }
.cursor-btn.is-big .cursor-btn__scale { --s: max(100px, calc(150 * var(--k))); }

/* ===== Меню-бургер ===== */
.burger { --size: max(64px, calc(96 * var(--k))); position: fixed; z-index: 92; top: max(16px, calc(36 * var(--k))); right: max(16px, calc(36 * var(--k))); display: flex; align-items: center; justify-content: center; width: var(--size); height: var(--size); margin: 0; padding: 0; border: 0; border-radius: 50%; background: #1C1D20; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); cursor: pointer; scale: 0; transition: scale .4s cubic-bezier(.76,0,.24,1); }
.burger.is-visible { scale: 1; }
.burger { --fill: #166FF5; }
.burger__lines { position: relative; display: block; width: 32%; height: 10px; }
.burger__lines::before,
.burger__lines::after { content: ''; position: absolute; left: 0; width: 100%; height: 1.5px; background: #FFFFFF; transition: transform .4s cubic-bezier(.76,0,.24,1), top .4s cubic-bezier(.76,0,.24,1); }
.burger__lines::before { top: 0; }
.burger__lines::after { top: calc(100% - 1.5px); }
.is-menu-open .burger__lines::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.is-menu-open .burger__lines::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }
/* магнит двигает всю кнопку, линии внутри отдельно не сдвигаются */
.burger .btn-text { display: contents; }

.menu-backdrop { position: fixed; inset: 0; z-index: 90; background: #000000; opacity: 0; pointer-events: none; transition: opacity .8s cubic-bezier(.7,0,.2,1); }
.is-menu-open .menu-backdrop { opacity: 0.3; pointer-events: auto; }

.menu { position: fixed; z-index: 91; top: 0; right: 0; width: max(440px, calc(760 * var(--k))); height: 100vh; background: #1C1D20; color: #FFFFFF; font-family: 'PP Neue Montreal', 'Manrope', sans-serif; translate: calc(100% + 8vw) 0; transition: translate .8s cubic-bezier(.7,0,.2,1); }
.is-menu-open .menu { translate: 0 0; }
/* левый край - дуга, пока панель едет; в покое край ровный */
.menu__curve { position: absolute; top: -25%; left: -6vw; width: 12vw; height: 150%; border-radius: 50%; background: inherit; transition: transform .8s cubic-bezier(.7,0,.2,1); }
.is-menu-open .menu__curve { transform: scaleX(0); }
.menu__inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; height: 100%; padding: 15vh max(40px, calc(120 * var(--k))) 10vh; }
.menu__rule { height: 1px; margin-top: 24px; background: rgba(255,255,255,0.18); }
.menu__list { margin: 5vh 0 0; padding: 0; list-style: none; }
.menu__link { position: relative; display: inline-flex; align-items: center; padding: 0.08em 0; color: #FFFFFF; font-weight: 400; font-size: max(40px, calc(80 * var(--k))); line-height: 1.15; letter-spacing: -0.01em; }
.menu__dot { position: absolute; left: -0.45em; width: 0.15em; height: 0.15em; border-radius: 50%; background: #FFFFFF; }
.menu__list li { translate: 8vw 0; transition: translate .8s cubic-bezier(.7,0,.2,1); }
.is-menu-open .menu__list li { translate: 0 0; }
.is-menu-open .menu__list li:nth-child(1) { transition-delay: .08s; }
.is-menu-open .menu__list li:nth-child(2) { transition-delay: .12s; }
.is-menu-open .menu__list li:nth-child(3) { transition-delay: .16s; }
.is-menu-open .menu__list li:nth-child(4) { transition-delay: .2s; }
.menu__bottom { display: flex; flex-direction: column; gap: 15px; }
.cursor-media__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ===== Телефон: меню на весь экран ===== */
@media (max-width: 767px) {
  /* по центру лого по высоте; справа - по краю текста (20px), на всех страницах одинаково (владелец 31.10) */
  .burger { top: 39px; right: 20px; }
  .menu { width: 100%; height: 100vh; height: 100dvh; }
  .menu__inner { padding: 14vh 24px 6vh; overflow-y: auto; }
  /* телефон боком: экран низкий - ссылки мельче, иначе последняя уходит за низ */
  .menu__link { font-size: clamp(40px, 12vw, 56px); font-size: min(clamp(40px, 12vw, 56px), 10dvh); }
}