/* ============================================================
   ВАРИАНТ ПОДАЧИ В ДУХЕ QWINS  (черновик, отдельная страница /new)

   Что взято у референса и что нет.

   ВЗЯТО — то, что делает его впечатление:
     • композиция первого экрана: всё по центру одной осью — плашка,
       огромный заголовок, одна строка подписи, крупный предмет;
     • типографика: очень большой кегль при среднем начертании и
       заметно отрицательном межбуквенном (у них 100px / 500 / −6px);
     • подписи-«пилюли», разбросанные вокруг предмета под углом;
     • сетка «бенто»: карточки разной ширины, у каждой маленькая плашка
       категории, жирный заголовок и приглушённое описание.

   НЕ ВЗЯТО — их объёмные предметы. Это готовые картинки, отрисованные
   в 3D-редакторе и выгруженные файлами (main-en.avif, card1.webp).
   Чужие файлы брать нельзя, а рисовать такие же нечем. Вместо них —
   наш собственный объёмный знак на WebGL, он живой и вращается.
   ============================================================ */

/* ------------------------------------------------------------
   1. ПЕРВЫЙ ЭКРАН
   ------------------------------------------------------------ */
.n-hero{
  position:relative;overflow:clip;
  padding:78px 0 40px;text-align:center;
}

/* Сетка и дуги позади предмета — глубина без единой картинки. */
.n-hero::before{
  content:"";position:absolute;left:50%;top:44%;translate:-50% -50%;
  width:min(1180px,120vw);aspect-ratio:1;pointer-events:none;opacity:.5;
  background:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 74px);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 0%,transparent 66%);
  mask:radial-gradient(circle at 50% 50%,#000 0%,transparent 66%);
}
.n-hero::after{
  content:"";position:absolute;left:50%;top:56%;translate:-50% 0;
  width:min(1000px,104vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:1px solid var(--line);
  box-shadow:0 0 0 78px color-mix(in srgb,var(--line) 42%,transparent);
  -webkit-mask:linear-gradient(180deg,#000 0%,transparent 52%);
  mask:linear-gradient(180deg,#000 0%,transparent 52%);
}

.n-hero .wrap{position:relative;z-index:2}

.n-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:800px;
  background:var(--surface-hi);border:1px solid var(--line);
  font-size:13px;color:var(--text);letter-spacing:0;
}

/* Кегль и межбуквенное — главное, что отличает их заголовок от нашего.
   Начертание среднее, а не жирное: при таком размере жирное «залипает». */
.n-title{
  margin:22px auto 0;max-width:16ch;
  font-family:var(--font-body);
  font-size:clamp(40px,7.4vw,96px);
  font-weight:500;line-height:.98;letter-spacing:-.045em;
  color:var(--ink);
}
.n-sub{
  margin:20px auto 0;max-width:52ch;
  font-size:17px;line-height:1.6;color:var(--muted);
}

/* ------------------------------------------------------------
   2. ПРЕДМЕТ И ПИЛЮЛИ ВОКРУГ
   ------------------------------------------------------------ */
.n-stage{
  position:relative;margin:34px auto 0;
  width:min(560px,86vw);aspect-ratio:1;
}
.n-stage .q-stage{width:100%;height:100%}
.n-canvas,.q-canvas{display:block;width:100%;height:100%}

/* Пилюля с подписью: глянцевая, под углом, чуть покачивается.
   Блик сверху и тень снизу — тот же приём, каким «лепят» объём в 3D. */
.n-pill{
  position:absolute;z-index:3;
  padding:11px 20px;border-radius:800px;white-space:nowrap;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--bg);
  background:linear-gradient(165deg,#fff 0%,#e6e6e6 52%,#c9c9c9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(0,0,0,.16),
    0 18px 34px -14px rgba(0,0,0,.85);
  animation:n-bob 6s ease-in-out infinite;
}
[data-theme="light"] .n-pill{
  color:#fff;
  background:linear-gradient(165deg,#4a4a4a 0%,#2a2a2a 52%,#131313 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -2px 4px rgba(0,0,0,.4),
    0 18px 34px -16px rgba(0,0,0,.5);
}
/* Тёмная пилюля — для разнообразия, как у референса. */
.n-pill.dark{
  color:var(--ink);
  background:linear-gradient(165deg,#3a3a3a 0%,#242424 52%,#141414 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -2px 4px rgba(0,0,0,.5),
    0 18px 34px -14px rgba(0,0,0,.9);
}

.n-pill-1{left:-4%;top:24%;rotate:-14deg;animation-delay:-.4s}
.n-pill-2{right:-6%;top:34%;rotate:11deg;animation-delay:-2.1s}
.n-pill-3{left:34%;bottom:16%;rotate:-4deg;animation-delay:-3.6s}
@keyframes n-bob{
  0%,100%{translate:0 0}
  50%{translate:0 -9px}
}

/* ------------------------------------------------------------
   3. БЕНТО-СЕТКА
   Карточки разной ширины: ряд из двух, затем во всю ширину, затем
   несимметричный ряд. Ритм важнее самих карточек — именно он не даёт
   странице выглядеть таблицей.
   ------------------------------------------------------------ */
.n-bento{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.n-bento .n-card.wide{grid-column:1 / -1}

.n-card{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:246px;padding:26px 26px 28px;
  border-radius:24px;border:1px solid var(--line);
  background:
    radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--ink) 7%,transparent) 0%,transparent 58%),
    var(--card-solid);
  transition:border-color .3s ease,transform .3s cubic-bezier(.215,.61,.355,1);
}
.n-card:hover{border-color:var(--line-hi);transform:translateY(-3px)}

.n-tag{
  display:inline-block;padding:6px 13px;border-radius:800px;
  background:var(--surface-hi);border:1px solid var(--line);
  font-size:12.5px;color:var(--text);
}
.n-card h3{
  margin:16px 0 0;max-width:14ch;
  font-family:var(--font-body);font-weight:600;
  font-size:clamp(21px,2.1vw,27px);line-height:1.12;letter-spacing:-.03em;
  color:var(--ink);
}
.n-card p{
  margin:12px 0 0;max-width:38ch;
  font-size:14.5px;line-height:1.55;color:var(--muted);
}

/* Объёмный предмет в углу карточки. Собран из градиентов: круг с
   бликом сверху и тенью снизу читается как выпуклое тело. */
.n-obj{
  position:absolute;right:-6%;top:50%;translate:0 -50%;
  width:44%;aspect-ratio:1;pointer-events:none;z-index:-1;
  border-radius:32%;
  background:
    radial-gradient(60% 55% at 34% 22%,#ffffff 0%,#dcdcdc 42%,#a8a8a8 72%,#6d6d6d 100%);
  box-shadow:
    inset 0 6px 14px rgba(255,255,255,.7),
    inset 0 -18px 26px rgba(0,0,0,.36),
    0 30px 60px -26px rgba(0,0,0,.9);
  opacity:.92;
  transition:transform .5s cubic-bezier(.215,.61,.355,1);
}
.n-card:hover .n-obj{transform:scale(1.05) rotate(-4deg)}
.n-obj.round{border-radius:50%}
.n-obj.soft{border-radius:26%;rotate:-10deg}
.n-card.wide .n-obj{width:26%;right:4%}

/* На узких экранах предмет мешает тексту — убираем. */
@media(max-width:760px){
  .n-bento{grid-template-columns:1fr}
  .n-obj{display:none}
  .n-card h3,.n-card p{max-width:none}
  .n-card{min-height:0}
}

/* ------------------------------------------------------------
   4. МЕНЬШЕ ДВИЖЕНИЯ
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .n-pill{animation:none}
  .n-card:hover{transform:none}
  .n-card:hover .n-obj{transform:none}
}

/* ============================================================
   НОВЫЙ ПЕРВЫЙ ЭКРАН ВНУТРИ ЗАКРЕПЛЁННОЙ СЦЕНЫ
   ============================================================ */

/* ------------------------------------------------------------
   Появление при загрузке. Анимации по времени — прозрачность здесь
   безопасна, они доигрывают сами.

   Каждая анимация висит на своём элементе, а не на общем: на одном
   элементе `animation` — это одно свойство, и второе правило просто
   заменило бы первое. Отсюда обёртка у кнопок и разделение
   «текст / сцена / пилюли».
   ------------------------------------------------------------ */
.n-eyebrow{animation:soft-up .85s cubic-bezier(.16,1,.3,1) 1.86s both}
.n-title{animation:soft-blur 1.05s cubic-bezier(.16,1,.3,1) 1.98s both}
.n-sub{animation:soft-up .9s cubic-bezier(.16,1,.3,1) 2.16s both}
.n-stage{animation:visual-in 1.6s cubic-bezier(.16,1,.3,1) 2.1s both}
.n-cta-wrap{animation:soft-up .9s cubic-bezier(.16,1,.3,1) 2.42s both}

/* Пилюли: появление, затем бесконечное покачивание. */
.n-pill{
  animation:
    soft-up .7s cubic-bezier(.16,1,.3,1) both,
    n-bob 6s ease-in-out infinite;
}
.n-pill-1{animation-delay:2.5s,3.4s}
.n-pill-2{animation-delay:2.6s,3.9s}
.n-pill-3{animation-delay:2.7s,4.4s}

/* ------------------------------------------------------------
   Размер предмета привязан и к высоте окна.
   Внутри закреплённого кадра всё содержимое обязано уместиться в один
   экран: плашка, заголовок в две строки, подпись, предмет и кнопки.
   Без ограничения по высоте предмет 560px выдавливал кнопки за нижний
   край на экране 900px — считал, не подбирал: 35 + 22 + 188 + 20 + 81 +
   34 + 560 + 34 + 68 = 1042 при доступных 900.

   При 42vh содержимое выходило 865 из 900 — влезало, но впритык, поля
   сверху и снизу по 17px. 38vh даёт 829 и по 35px воздуха с каждой
   стороны.
   ------------------------------------------------------------ */
.n-stage{width:min(560px,86vw,38vh)}

/* ------------------------------------------------------------
   Уход по прокрутке. Таймлайн `--hero` висит на подвижной обёртке
   сцены: у самого закреплённого кадра коробка неподвижна, и `view()`
   на нём встал бы намертво.
   ------------------------------------------------------------ */
@supports (animation-timeline: view()){
  @media(min-width:900px){
    /* Закрепление задаётся в motion.css селектором `.hero`, но `.n-hero`
       идёт позже в каскаде с тем же удельным весом и возвращал
       `position:relative` вместе с отступами — кадр переставал липнуть.
       Повторяем нужные свойства здесь. */
    /* Липнем под шапкой, а не к нулю. Шапка занимает 72px потока,
       поэтому незакреплённый кадр начинается с этой отметки, а
       закреплённый прилипал бы к нулю — содержимое прыгало бы на 72px
       и в первый момент вылезало на 38px за нижний край. С одинаковыми
       `top` и высотой кадр стоит на месте до и после закрепления. */
    .n-hero{
      position:sticky;top:72px;height:calc(100vh - 72px);
      display:flex;align-items:center;
      padding:0;
    }
    .n-hero>.wrap{width:100%}

    /* В один экран содержимое влезает только с поджатыми отступами. */
    .n-title{margin-top:16px}
    .n-sub{margin-top:14px}
    .n-stage{margin-top:22px;width:min(560px,86vw,36vh)}
    .n-cta-wrap{margin-top:24px}

    .n-copy{
      animation:n-copy-out linear forwards;
      animation-timeline:--hero;animation-range:contain 0% contain 100%;
    }
    @keyframes n-copy-out{
      0%,26%{transform:none;opacity:1}
      100%{transform:translateY(-74px);opacity:.08}
    }

    .hero-cta{
      animation:n-cta-out linear forwards;
      animation-timeline:--hero;animation-range:contain 0% contain 100%;
    }
    @keyframes n-cta-out{
      0%,30%{transform:none;opacity:1}
      100%{transform:translateY(-46px);opacity:0}
    }

    /* Пилюли гаснут раньше предмета — сначала уходят подписи, потом сам знак. */
    .n-pill{
      animation:
        soft-up .7s cubic-bezier(.16,1,.3,1) both,
        n-bob 6s ease-in-out infinite,
        n-pill-out linear forwards;
      animation-timeline:auto,auto,--hero;
      animation-range:normal,normal,contain 0% contain 100%;
    }
    @keyframes n-pill-out{
      0%,20%{opacity:1;scale:1}
      100%{opacity:0;scale:.82}
    }
    .n-pill-1{animation-delay:2.5s,3.4s,0s}
    .n-pill-2{animation-delay:2.6s,3.9s,0s}
    .n-pill-3{animation-delay:2.7s,4.4s,0s}
  }
}

/* ------------------------------------------------------------
   Меньше движения
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  .n-eyebrow,.n-title,.n-sub,.n-stage,.n-cta-wrap,.n-pill,.n-copy,.hero-cta{
    animation:none;
  }
  .n-hero{padding:78px 0 40px}
}