/* Агентство Эффективных Решений — заглушка.
   Палитра и пластика взяты из шаблона презентации: фиолетовый фон,
   сетка «пилюль» в тонкую линию, бирюзовые заливки, белый круг с логотипом. */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --purple: #6D3DF7;
  --purple-deep: #4420B8;
  --teal: #07B0B7;
  --ink: #2A2540;
  --muted: #76728A;
  --line: rgba(109, 61, 247, .17);

  /* модуль сетки: высота одной «пилюли». JS уточняет его до пикселя */
  --u: max(11.25vw, 20vh);
  --ease: cubic-bezier(.2, .75, .1, 1);
}

@supports (height: 1dvh) {
  :root { --u: max(11.25vw, 20dvh); }
}

/* 1% высоты видимой области: на телефонах — без учёта адресной строки */
:root { --vh: 1vh; }
@supports (height: 1svh) {
  :root { --vh: 1svh; }
}

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

html, body { height: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

.js body { background: var(--purple); }
.js.is-done body { background: #fff; }

.sprite { position: absolute; }

/* ───────── Сетка «пилюль» ───────── */

.grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.grid .cell { fill: none; stroke-width: 1.5; }
.grid .fill { stroke: none; }
.grid text { font-family: inherit; }

.grid--intro .cell { stroke: rgba(255, 255, 255, .55); stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.25s var(--ease) var(--d, 0s) forwards, seal 1ms linear calc(var(--d, 0s) + 1.25s) forwards; }
.grid--intro .fill { fill: var(--teal); transform-box: fill-box; transform-origin: center; animation: pop .7s cubic-bezier(.3, 1.4, .5, 1) var(--d, 0s) backwards; }
.grid--intro text { fill: #fff; font-size: 21px; font-weight: 400; opacity: 0; animation: fade .6s ease 1s forwards; }

.grid--light .cell { stroke: var(--line); }
.grid--light .fill { fill: rgba(7, 176, 183, .13); }
.grid--light text { display: none; }

@keyframes draw { to { stroke-dashoffset: 0; } }
/* дорисованный контур перестаёт быть пунктиром: иначе в точке начала остаётся незамкнутый стык */
@keyframes seal { from, to { stroke-dasharray: none; } }
@keyframes pop  { from { transform: scale(0); } }
@keyframes fade { to { opacity: 1; } }

/* ───────── Интро ───────── */

.intro {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--purple);
  overflow: hidden;
  display: none;
}
.js .intro { display: block; }

/* линза: белый круг с логотипом. Раскрытие — только масштаб, без clip-path,
   чтобы всё считала видеокарта */
.lens {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--lens-d, 200vmax);
  height: var(--lens-d, 200vmax);
  margin: calc(var(--lens-d, 200vmax) / -2) 0 0 calc(var(--lens-d, 200vmax) / -2);
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
}
/* ───────── Сцена ───────── */

.stage {
  position: fixed;
  inset: 0;
  z-index: 2;
}

/* фон сцены: сиреневая виньетка, сетка пилюль и белое пятно, которое гасит
   линии под логотипом и текстом. Пока идёт интро, фона нет — под сценой линза */
.stage__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 95% at 50% 42%, #fff 38%, #F1EEFE 100%);
}
.stage__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #fff 68%, rgba(255, 255, 255, 0) 126%);
}
.js .stage__bg { opacity: 0; transition: opacity 1.2s ease; }
.js.is-done .stage__bg { opacity: 1; }

.stage__scroll {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: grid;
  /* если экран совсем мал, страница прокручивается, а не наезжает сама на себя */
  grid-template-rows: minmax(min-content, 1fr) auto;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6.5vh, 68px);
  padding: 48px max(24px, env(safe-area-inset-right)) 24px max(24px, env(safe-area-inset-left));
}

.lockup {
  display: flex;
  align-items: center;
  gap: clamp(26px, 4.2vw, 64px);
}

/* ───────── Логотип ───────── */

.logo {
  --L: clamp(180px, 24vw, 330px);
  position: relative;
  flex: none;
  width: var(--L);
  height: var(--L);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.logo__shadow {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -15%;
  height: 10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(58, 28, 160, .3), rgba(58, 28, 160, 0));
  opacity: 0;
  transition: opacity 1s ease 1.1s;
}
.is-live .logo__shadow, html:not(.js) .logo__shadow { opacity: 1; }

.logo__float { position: absolute; inset: 0; perspective: calc(var(--L) * 3.4); }
.logo__sway, .logo__tilt, .logo__part { position: absolute; inset: 0; transform-style: preserve-3d; }

.logo__part svg,
.logo__ball svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.logo__ball { position: absolute; inset: 0; transform: translateZ(calc(var(--L) * .035)); }

/* слои логотипа растеризуются один раз и дальше только двигаются */
.logo, .logo__sway, .logo__tilt, .logo__part, .logo__part svg, .logo__ball, .logo__spec { will-change: transform; }

/* блик на шаре: едет за курсором */
.logo__spec {
  position: absolute;
  left: 37.5%;
  top: 36%;
  width: 14%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}

.is-idle .logo__float { animation: bob 6s ease-in-out infinite; }
.is-idle .logo__sway  { animation: sway 11s ease-in-out infinite; }
.is-idle .logo__shadow { animation: shadow 6s ease-in-out infinite; }

@keyframes bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.4%); } }
@keyframes shadow { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }
@keyframes sway {
  0%, 100% { transform: rotateX(0) rotateY(0); }
  25% { transform: rotateX(4deg) rotateY(-8deg); }
  75% { transform: rotateX(-3deg) rotateY(8deg); }
}

/* ───────── Название ───────── */

.rule {
  flex: none;
  align-self: stretch;
  width: 2px;
  margin-block: 7%;
  border-radius: 2px;
  background: var(--purple);
  transform-origin: 50% 50%;
}

.wordmark {
  margin: 0;
  color: var(--purple);
  font-weight: 300;
  font-size: clamp(34px, 4.4vw, 66px);
  line-height: 1.16;
  letter-spacing: -.012em;
}
.wordmark span { display: block; overflow: hidden; padding-bottom: .06em; }
.wordmark i { display: block; font-style: normal; }

/* ───────── Наши проекты ───────── */

.actions { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.cta {
  --h: clamp(64px, 5.4vw, 80px);
  --dot: calc(var(--h) - 20px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--h) * .34);
  height: var(--h);
  padding: 0 10px 0 calc(var(--h) * .56);
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line), 0 24px 48px -22px rgba(109, 61, 247, .55);
  color: var(--purple);
  font-size: clamp(14px, 1.22vw, 18px);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
/* фиолетовый круг из колонтитула презентации: при наведении заливает всю плашку */
.cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: 10px;
  top: 10px;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--purple);
  transition: transform .6s var(--ease);
}
.cta__label { transition: color .35s ease; }
.cta__dot {
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  color: #fff;
  transition: background-color .35s ease, color .35s ease;
}
.cta__dot svg { width: max(14px, 46%); height: max(14px, 46%); transition: transform .5s var(--ease); }

.cta:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.cta:active { transform: scale(.98); }

@media (hover: hover) {
  .cta:hover::before { transform: scale(12); }
  .cta:hover .cta__label { color: #fff; }
  .cta:hover .cta__dot { background: #fff; color: var(--purple); }
  .cta:hover .cta__dot svg { transform: translateX(3px); }
}

.cta-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .04em;
}

.legal {
  padding: 20px 24px max(24px, env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .02em;
  text-align: center;
}

/* ───────── Появление после раскрытия линзы ───────── */

.js .wordmark i { transform: translateY(108%); transition: transform 1s var(--ease); }
.js .rule { transform: scaleY(0); transition: transform .9s var(--ease); }
.js .actions > * { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .9s var(--ease); }
/* подпись внизу только проявляется: сдвиг вниз вылезал за край экрана, появлялась
   полоса прокрутки, и в конце анимации вся страница дёргалась вбок */
.js .legal { opacity: 0; transition: opacity .8s ease; }
.js .actions > *, .js .legal { visibility: hidden; }

.js.is-live .wordmark i { transform: none; transition-delay: calc(.82s + var(--i) * .09s); }
.js.is-live .rule { transform: none; transition-delay: .76s; }
.js.is-live .actions > *, .js.is-live .legal { opacity: 1; transform: none; visibility: visible; }
.js.is-live .cta { transition-delay: 1.25s; }
.js.is-live .cta-note { transition-delay: 1.38s; }
.js.is-live .legal { transition-delay: 1.5s; }

/* после появления кнопка откликается сразу, без задержки от выхода */
.js.is-idle .cta { transition: transform .2s ease; }

/* ───────── Уход на NEYRUSS ───────── */

.exit {
  position: fixed;
  z-index: 10;
  border-radius: 50%;
  background: var(--purple);
  visibility: hidden;
  pointer-events: none;
}

/* ───────── Адаптив ───────── */

/* телефон и планшет вертикально: логотип над названием. Размеры зависят и от ширины,
   и от высоты экрана, чтобы всё помещалось без прокрутки */
@media (max-width: 900px) and (orientation: portrait) {
  .hero {
    gap: clamp(22px, calc(var(--vh) * 5), 44px);
    padding-top: clamp(16px, calc(var(--vh) * 4), 40px);
    padding-bottom: 16px;
  }
  .lockup { --g: clamp(30px, calc(var(--vh) * 5.6), 50px); flex-direction: column; gap: var(--g); }
  .logo { --L: min(56vw, calc(var(--vh) * 29), 300px); }
  .rule { align-self: center; width: 56px; height: 2px; margin: 0 0 calc(var(--g) * -.4); }
  .js .rule { transform: scaleX(0); }
  .wordmark { font-size: clamp(24px, min(8.4vw, calc(var(--vh) * 4.5)), 52px); text-align: center; }
  /* в узком экране линии сетки остаются только сверху и снизу, по бокам от логотипа их нет */
  .stage__bg::after { background: radial-gradient(ellipse 100% 40% at 50% 46%, #fff 70%, rgba(255, 255, 255, 0) 112%); }
}

@media (max-width: 760px) {
  .legal { font-size: clamp(10.5px, 3.2vw, 13px); white-space: nowrap; }
  .grid--intro text { display: none; }
}

/* телефон горизонтально и низкие окна: логотип и название в строку, всё компактнее */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { gap: clamp(14px, calc(var(--vh) * 5), 28px); padding-top: 14px; padding-bottom: 10px; }
  .lockup { gap: clamp(18px, 3.4vw, 40px); }
  .logo { --L: clamp(96px, calc(var(--vh) * 36), 200px); }
  .wordmark { font-size: clamp(21px, calc(var(--vh) * 7.6), 40px); }
  .actions { gap: 8px; }
  .cta { --h: clamp(48px, calc(var(--vh) * 14), 64px); font-size: 13px; }
  .cta-note { font-size: 12px; }
  .legal { padding-top: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); font-size: 12px; }
  .grid--intro text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}