/* Вторая («трендовая») версия сайта — docs/20-trend-v2.md.
   Приёмы по awwwards.com в стиле «Всемилы»: заставка, текст по словам,
   луч по кнопкам. Всё движение — только без «уменьшить движение»; магниты — только мышь. */

:root { --v2-delay: 1.45s; --v2-ease: cubic-bezier(.2, .8, .2, 1); }
.v2-intro-seen { --v2-delay: .05s; }

/* ── Заставка: восходит солнце, проявляется логотип, полотно уходит вверх ── */
.v2-intro { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; align-content: center; gap: 22px; background: var(--cream); pointer-events: none; }
.v2-intro__sun { width: 132px; aspect-ratio: 1; }
.v2-intro__sun svg { display: block; width: 100%; height: 100%; }
.v2-intro__logo { width: 170px; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .v2-js:not(.v2-intro-seen) .v2-intro { display: grid; animation: v2-intro-out .8s cubic-bezier(.7, 0, .2, 1) 1.15s forwards; }
  .v2-intro__sun { animation: v2-sun-rise 1s var(--v2-ease) both; }
  .v2-intro__sun .v2-sun__ring { transform-origin: 60px 60px; animation: v2-spin 6s linear infinite; }
  .v2-intro__logo { animation: v2-fade-up .7s var(--v2-ease) .35s both; }
}
@keyframes v2-intro-out { 0% { transform: none; border-radius: 0; } 100% { transform: translateY(-105%); border-radius: 0 0 50% 50% / 0 0 22vh 22vh; visibility: hidden; } }
@keyframes v2-sun-rise { from { transform: translateY(70px) scale(.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v2-fade-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes v2-spin { to { transform: rotate(360deg); } }

/* ── Полоса прогресса прокрутки ── */
.v2-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; background: linear-gradient(90deg, var(--sun), var(--sun-core)); transform-origin: 0 50%; transform: scaleX(var(--v2-p, 0)); pointer-events: none; }

/* Размытие под шапкой и закреплёнными панелями перерисовывается на каждый кадр
   прокрутки, а фон у них почти непрозрачный — разницы не видно. */
.site-header { backdrop-filter: none; background: var(--cream); }
.subnav, .price-tools { backdrop-filter: none; background: var(--paper); }

/* ── Заголовки собираются по словам ── */
.v2-split .v2-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.v2-split .v2-w > span { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; transition: transform 1s var(--v2-ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * 70ms); }
.v2-split.v2-in .v2-w > span { transform: none; }
.home-hero__h1.v2-split { --d: var(--v2-delay); }

/* Первый экран: подпись и вводная подтягиваются после заголовка. */
@media (prefers-reduced-motion: no-preference) {
  /* У блока и у его строк была бы своя анимация появления — оставляем только у строк. */
  .v2-js .home-hero__title, .v2-js .home-hero__text { animation: none; }
  .v2-js .home-hero__eyebrow, .v2-js .home-hero__text > * { animation: v2-fade-up .9s var(--v2-ease) both; animation-delay: calc(var(--v2-delay) + .35s); }
  .v2-js .home-hero__text > :nth-child(2) { animation-delay: calc(var(--v2-delay) + .5s); }
  .v2-js .home-hero__text > :nth-child(3) { animation-delay: calc(var(--v2-delay) + .65s); }
  .v2-js .home-hero__img img { animation-delay: calc(var(--v2-delay) - .1s); }
  /* Героиня не ходит за мышью (05.11, Д-60): она плавно «дышит» — только сдвиг слоя,
     его рисует видеокарта, поэтому не тормозит ни в одном браузере. Свечение мерцает прозрачностью. */
  .home-hero__img { animation: v2-float 7s ease-in-out calc(var(--v2-delay) + 1s) infinite alternate; will-change: transform; }
  .home-hero .glow { animation: v2-glow 6s ease-in-out infinite alternate; will-change: opacity; }
}
@keyframes v2-float { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -12px, 0); } }
@keyframes v2-glow { from { opacity: .75; } to { opacity: 1; } }

/* ── Фото раскрываются шторкой ── */
.v2-img-hide { clip-path: inset(100% 0 0 0); }
.v2-img-show { clip-path: inset(0 0 0 0); transition: clip-path .8s cubic-bezier(.7, 0, .2, 1); }
.wordmark.v2-img-hide { clip-path: inset(0 100% 0 0); transform: none; }
.wordmark.v2-img-show { clip-path: inset(0 0 0 0); transform: none; transition: clip-path 1.6s cubic-bezier(.7, 0, .2, 1); }

/* ── Без дрожания (05.11, Д-60): при наведении карточки, кнопки и значки
   стоят на месте — меняются только свет и тень. ── */
.tile:hover, .key-card:hover, .club-step:hover, .key-card:hover .key-card__arch,
.key-card:hover .key-card__motif, .club-step:hover .club-step__icon, .club-step:hover .club-step__icon svg,
.club-tiers li:hover .club-tiers__icon svg, .key-card:hover .key-card__media { transform: none !important; }
html[data-hover] :is(.key-card, .tile, .devcard, .club-step, .about-card, .dir-card, .dir-services__item, .edu-card, .device-card):hover { --ty: 0px; }

/* ── Луч по кнопке: при наведении по ней проходит полоса света ── */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; z-index: 1; width: 45%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); pointer-events: none; }
.btn-outline::after { background: linear-gradient(90deg, transparent, rgba(242, 201, 76, .55), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover::after, .btn:focus-visible::after { left: 135%; transition: left .9s cubic-bezier(.3, .6, .3, 1); }
}

/* Три ступени клуба на телефоне: две в ряд, третья — во всю ширину, а не одна в углу. */
@media (max-width: 639px) { .club-tiers > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* Кнопка рядом с полем поиска не сжимается уже своей надписи (иначе луч обрезал бы край текста). */
.search-box .btn, .search-head .btn { flex-shrink: 0; white-space: nowrap; }