/* ==========================================================================
SEROPHITO — PREMIUM BIO // FULL SITE
Палитра строго Ч/Б. Заголовки: Days One (общий) + Fraunces (только сектор 3).
Шрифты подключены через в (НЕ @import здесь) — так браузер
качает их параллельно с этим CSS и имя сразу рисуется настоящим Days One.
========================================================================== */
:root {
--black-absolute: #000000;
--text-main: #ffffff;
--text-muted: #a1a1a1;
--text-dim: #6b6b6b;
--font-display: 'Fraunces', serif; /* ТОЛЬКО заголовок сектора 3 (ради &) */
--font-heading: 'Days One', sans-serif; /* все остальные заголовки */
--font-main: 'Inter', sans-serif;
--font-premium: 'Outfit', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--transition-hover: 1.4s cubic-bezier(0.16, 1, 0.3, 1);
--transition-btn-liquid: 0.8s cubic-bezier(0.16, 1, 0.3, 1);
--ease-liquid: cubic-bezier(0.16, 1, 0.3, 1);
--transition-slow: 1.4s var(--ease-liquid);
--transition-medium: 0.9s var(--ease-liquid);
--transition-fast: 0.4s var(--ease-liquid);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html { scroll-behavior: smooth; }
body {
background-color: var(--black-absolute);
color: var(--text-main);
font-family: var(--font-premium);
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
::-webkit-scrollbar { width: 0; display: none; }
/* ==========================================================================
ИНТРО-ЗАГРУЗКА — ЕДИНАЯ анимация имени на его настоящем месте
==========================================================================
Принцип: НЕТ отдельного прелоадер-текста и НЕТ кроссфейда двух надписей
(именно из-за этого имя «прыгало», когда курсор был не по центру). На старте
стоит body.intro: фон — чёрная пустота, всё кроме самого hero-«serophito»
скрыто. Имя «прорисовывается» световой развёрткой (clip-path) — без тяжёлого
блюра, дёшево для GPU. На 4-й секунде script.js снимает .intro → фон, шапка
и остальной hero ПЛАВНО проявляются. Текст ни разу не двигается и не гаснет —
он один, настоящий и стоит ровно на своём финальном месте. */
/* во время интро держим экран на hero и блокируем прокрутку (старт всегда тут) */
body.intro { overflow: hidden; }
/* фон-космос и блики — скрыты до конца интро, плавно возвращаются при снятии .intro */
#cosmos-bg,
.ambient-glow { transition: opacity 1.3s var(--ease-liquid); }
body.intro #cosmos-bg,
body.intro .ambient-glow { opacity: 0; }
/* ШАПКА — выезжает сверху в момент снятия .intro (≈4-я секунда) */
.site-nav {
transition: transform 1.0s var(--ease-liquid), opacity 1.0s var(--ease-liquid),
background var(--transition-fast);
}
body.intro .site-nav {
transform: translateY(-110%);
opacity: 0;
pointer-events: none;
}
/* подзаголовок / подсказка / скролл-индикатор — мягкий каскад после снятия .intro */
.hero-sub,
.hero-section .scroll-indicator-wrapper {
transition: opacity 1.1s var(--ease-liquid), transform 1.1s var(--ease-liquid);
}
body.intro .hero-sub,
body.intro .hero-section .scroll-indicator-wrapper {
opacity: 0;
transform: translateY(8px);
}
.hero-sub { transition-delay: 0.10s; }
.hero-section .scroll-indicator-wrapper { transition-delay: 0.34s; }
/* enter-hint имеет собственную анимацию «дыхания» (перебивает opacity), поэтому
на время интро её гасим вместе с самой анимацией */
.enter-hint { transition: opacity 1.1s var(--ease-liquid), transform 1.1s var(--ease-liquid); transition-delay: 0.22s; }
body.intro .enter-hint { animation: none; opacity: 0; transform: translateY(8px); }
/* ИМЯ HERO — ПОКАДРОВАЯ СБОРКА ПО БУКВАМ (обводка → заливка → зарядка).
----------------------------------------------------------------------
script.js на старте бьёт «serophito» на буквы и вешает
на #heroEnter класс .lettered (в reduced-motion НЕ бьёт — текст остаётся
цельным и видимым). Каждая буква:
1) контур (::before, -webkit-text-stroke) проявляется «вычерчиванием»;
2) сама буква заливается вертикальным градиентом и встаёт на место;
буквы идут каскадом (--i), после сборки имя один раз «заряжается» свечением.
Один настоящий элемент на своём месте → никакого кроссфейда и «прыжка». */
body.intro #heroEnter { pointer-events: none; } /* во время интро не ловим «вход» */
/* когда имя разбито на буквы — гасим собственную заливку родителя, чтобы он
не «подсвечивал» глифы до их анимации; всё рисуют сами буквы */
body.intro #heroEnter.lettered {
background: none;
will-change: filter;
animation: heroGlow 0.95s var(--ease-liquid) 0.95s both;
}
.hl { display: inline-block; position: relative; }
/* ЗАЛИВКА буквы — каскадом всплывает на место (без обводки/контура) */
body.intro #heroEnter.lettered .hl {
background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #8a8a8a 140%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
opacity: 0;
transform: translateY(0.5em) scale(0.92);
animation: hlFill 0.5s var(--ease-liquid) forwards;
animation-delay: calc(var(--i) * 0.055s);
will-change: transform, opacity;
}
@keyframes hlFill {
0% { opacity: 0; transform: translateY(0.5em) scale(0.92); }
55% { opacity: 1; }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* после сборки — имя один раз «заряжается» свечением и оседает */
@keyframes heroGlow {
0% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
45% { filter: drop-shadow(0 0 24px rgba(255, 255, 255, 0.34)); }
100% { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.08)); }
}
@media (prefers-reduced-motion: reduce) {
body.intro { overflow: auto; }
body.intro #cosmos-bg,
body.intro .ambient-glow,
body.intro .site-nav,
body.intro .hero-sub,
body.intro .enter-hint,
body.intro .hero-section .scroll-indicator-wrapper { opacity: 1; transform: none; }
body.intro #heroEnter { animation: none; }
}
/* ════════════════════════════════════════════════════════════════════
ПРЕЛОАДЕР — хоровод частиц + реальный процент загрузки
Чёрный экран поверх всего, по центру крутится колеблющийся хоровод
частиц (canvas) и тикает %. По завершении — fade, мир уже проявлен.
════════════════════════════════════════════════════════════════════ */
.preloader {
position: fixed;
inset: 0;
z-index: 100000;
background: #000;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 1.1s var(--ease-liquid);
}
.preloader.fade {
opacity: 0;
pointer-events: none;
}
#preloader-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
}
/* reduced-motion: без анимации частиц — мир проявится сразу по загрузке */
@media (prefers-reduced-motion: reduce) {
#preloader-canvas { display: none; }
.preloader { transition: opacity 0.4s linear; }
}
/* ==========================================================================
КОСМИЧЕСКИЙ ФОН (canvas) — за всем сайтом, не перехватывает клики
========================================================================== */
#cosmos-bg {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
display: block;
}
/* ==========================================================================
ФОНОВЫЕ БЛИКИ (только Ч/Б)
========================================================================== */
/* Раньше: filter: blur(140px) на 450px — огромное ядро размытия, дорогое для GPU
(перерисовка при скролле/анимации). Радиальный градиент сам по себе мягкий, поэтому
просто увеличиваем пятно и убираем фильтр — выглядит так же, но почти бесплатно.
margin центрирует пятно там же, где был центр прежнего 450px-блока. */
.ambient-glow {
position: fixed;
pointer-events: none;
z-index: 0;
opacity: 0.12;
border-radius: 50%;
}
.glow-1 {
top: 25%; left: 15%; width: 740px; height: 740px; margin: -145px 0 0 -145px;
background: radial-gradient(circle, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 70%);
}
.glow-2 {
bottom: 20%; right: 12%; width: 740px; height: 740px; margin: 0 -145px -145px 0;
background: radial-gradient(circle, rgba(255,255,255,0.055) 0%, rgba(255,255,255,0) 70%);
}
/* ==========================================================================
ШАПКА: ПОЛНОШИРИННЫЙ СТЕКЛЯННЫЙ БАР С ЛИНИЕЙ
========================================================================== */
.site-nav {
position: fixed;
top: 0; left: 0;
width: 100%;
z-index: 50;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 12px clamp(16px, 4vw, 46px);
background: linear-gradient(180deg, rgba(18,18,22,0.72) 0%, rgba(10,10,12,0.50) 100%);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-bottom: 1px solid rgba(255,255,255,0.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 24px rgba(0,0,0,0.25);
}
.nav-zone { display: flex; align-items: center; gap: 16px; }
.nav-left { justify-content: flex-start; }
.nav-right { justify-content: flex-end; }
/* Логотип-кнопка: открывает панель прогресса пасхалок (см. easter.js) */
.nav-logo-btn {
display: inline-flex;
align-items: center;
padding: 0;
border: none;
background: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.nav-logo-btn:focus-visible { outline: 1px solid rgba(255,255,255,0.3); outline-offset: 4px; border-radius: 6px; }
/* Логотип в самом левом углу шапки — крупнее, с разделителем и мягким свечением */
.nav-logo {
height: 42px;
width: auto;
display: block;
flex-shrink: 0;
/* отступ + тонкий разделитель, чтобы логотип «сидел», а не липнул к свитчу */
padding-right: 16px;
border-right: 1px solid rgba(255,255,255,0.10);
-webkit-user-drag: none;
user-select: none;
opacity: 0.95;
filter: drop-shadow(0 1px 6px rgba(255,255,255,0.10));
transition: opacity var(--transition-fast), transform var(--transition-fast), filter var(--transition-fast);
}
.nav-logo:hover {
opacity: 1;
transform: scale(1.05);
filter: drop-shadow(0 1px 10px rgba(255,255,255,0.22));
}
.nav-links {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.nav-link {
position: relative;
border: none;
background: transparent;
cursor: pointer;
font-family: var(--font-premium);
font-size: 0.98rem;
font-weight: 500;
letter-spacing: 0.3px;
color: var(--text-muted);
padding: 6px 16px;
white-space: nowrap;
/* padding тоже в transition — иначе расступание соседей было резким скачком */
transition: color var(--transition-medium),
transform var(--transition-medium),
letter-spacing var(--transition-medium),
padding var(--transition-medium);
}
.nav-link:hover { color: var(--text-main); }
/* активный пункт: белеет и плавно увеличивается, соседи плавно расступаются */
.nav-link.active {
color: var(--text-main);
transform: scale(1.18);
letter-spacing: 0.5px;
font-weight: 600;
padding: 6px 22px;
}
/* ── ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА (свитч RU/EN с бегунком) ── */
.lang-switch {
position: relative;
display: inline-flex;
align-items: center;
width: 78px;
height: 32px;
padding: 3px;
border-radius: 50px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
cursor: pointer;
transition: border-color var(--transition-fast), background var(--transition-fast);
}
.lang-switch:hover { border-color: rgba(255,255,255,0.22); }
.ls-opt {
position: relative;
z-index: 2;
flex: 1;
text-align: center;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 1px;
color: var(--text-dim);
transition: color var(--transition-fast);
}
.ls-knob {
position: absolute;
z-index: 1;
top: 3px; left: 3px;
width: calc(50% - 3px);
height: calc(100% - 6px);
border-radius: 50px;
background: rgba(255,255,255,0.13);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
transition: transform var(--transition-medium);
}
.lang-switch.lang-ru .ls-knob { transform: translateX(100%); }
.lang-switch.lang-en .opt-en,
.lang-switch.lang-ru .opt-ru { color: var(--text-main); }
/* ── ПЕРЕКЛЮЧАТЕЛЬ МУЗЫКИ (свитч on/off с бегунком) ── */
.np-name {
background: none;
border: none;
cursor: pointer;
color: var(--text-muted);
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.5px;
max-width: 230px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--transition-fast);
}
.np-name:hover { color: var(--text-main); }
.music-switch {
position: relative;
flex-shrink: 0;
width: 46px;
height: 26px;
padding: 0;
border-radius: 50px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.04);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.ms-knob {
position: absolute;
top: 50%; left: 3px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--text-dim);
transform: translateY(-50%);
transition: transform var(--transition-medium), background var(--transition-fast);
}
.music-switch.is-playing { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.3); }
.music-switch.is-playing .ms-knob { transform: translateY(-50%) translateX(20px); background: #fff; }
/* ==========================================================================
ОБЩАЯ ОБЁРТКА СЕКЦИЙ
========================================================================== */
.fullscreen-section {
position: relative;
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 5% 90px;
z-index: 2;
}
/* ==========================================================================
ЗАГОЛОВКИ СЕКТОРОВ
========================================================================== */
.section-head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
margin-bottom: 55px;
}
.section-title {
font-family: var(--font-heading); /* Days One */
font-size: clamp(2.2rem, 5vw, 3.4rem);
font-weight: 400;
letter-spacing: -0.5px;
line-height: 1.05;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #8f8f8f 130%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.section-title::after {
content: '';
display: block;
width: 46px;
height: 2px;
margin: 18px auto 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
border-radius: 2px;
}
/* ==========================================================================
REVEAL ПО СКРОЛЛУ — КАЖДЫЙ ОБЪЕКТ ОТДЕЛЬНО (стаггер задаётся в JS)
========================================================================== */
.reveal {
opacity: 0;
transform: translate3d(0, 38px, 0);
transition: opacity 1.4s var(--ease-liquid), transform 1.4s var(--ease-liquid);
will-change: transform, opacity;
}
.reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
СЕКТОР 1: HERO
========================================================================== */
.hero-section { flex-direction: column; }
.hero-center-manifest {
position: relative;
z-index: 5; /* всегда ВЫШЕ зоны-шара слева — клик по serophito = вход, а не звук */
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
will-change: transform; /* лёгкий параллакс героя (см. script.js, секция 3b) */
}
.serophito-subtext {
font-family: var(--font-heading); /* Days One */
font-size: clamp(3.2rem, 10vw, 6.4rem);
font-weight: 400;
letter-spacing: -1px;
line-height: 0.98;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #8a8a8a 140%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.hero-sub {
margin-top: 22px;
font-family: var(--font-premium);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 1px;
color: var(--text-muted);
}
/* SCROLL — текст + тонкая линия с бегущим светом; прячется при скролле */
.scroll-indicator-wrapper {
position: absolute;
bottom: 46px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
cursor: pointer;
transition: opacity 0.6s var(--ease-liquid), transform 0.6s var(--ease-liquid);
}
.scroll-indicator-wrapper.is-hidden {
opacity: 0;
transform: translateY(14px);
pointer-events: none;
}
.scroll-text {
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 4px;
color: var(--text-dim);
transition: color var(--transition-fast);
animation: scrollTextBreath 2.6s ease-in-out infinite;
}
.scroll-indicator-wrapper:hover .scroll-text { color: var(--text-main); }
@keyframes scrollTextBreath {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
}
/* тонкая вертикальная линия с бегущим вниз световым штрихом */
.scroll-line {
position: relative;
width: 1px;
height: 58px;
overflow: hidden;
background: linear-gradient(180deg,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.20) 50%,
rgba(255,255,255,0.02) 100%);
transition: background var(--transition-fast);
}
.scroll-indicator-wrapper:hover .scroll-line {
background: linear-gradient(180deg,
rgba(255,255,255,0.08) 0%,
rgba(255,255,255,0.35) 50%,
rgba(255,255,255,0.04) 100%);
}
.scroll-line-dot {
position: absolute;
top: 0; left: 50%;
width: 1px; height: 20px;
transform: translate(-50%, -100%);
background: linear-gradient(180deg, transparent, #fff, transparent);
animation: scrollLineRun 2.4s var(--ease-liquid) infinite;
}
@keyframes scrollLineRun {
0% { transform: translate(-50%, -100%); opacity: 0; }
18% { opacity: 1; }
82% { opacity: 1; }
100% { transform: translate(-50%, 300%); opacity: 0; }
}
/* ==========================================================================
КАРТОЧКИ / СЕТИ (эталон стиля)
========================================================================== */
.hub-standalone-container {
width: 100%;
max-width: 1100px;
position: relative;
z-index: 1;
}
.hub-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
/* ── НЕНАВЯЗЧИВЫЙ ВОДЯНОЙ ЗНАК СОЦСЕТИ (только карточки «Мои сети») ──
Иконка платформы тихо «проявлена» в пустом правом поле карточки: даёт
мгновенное узнавание, но не спорит с заголовком. На ховере чуть ярче. */
#links .premium-glass-card.brand-tg,
#links .premium-glass-card.brand-tt { overflow: hidden; position: relative; }
/* текст всегда поверх знака */
#links .premium-glass-card.brand-tg > *,
#links .premium-glass-card.brand-tt > * { position: relative; z-index: 1; }
/* знак ЦЕЛИКОМ в пустом правом поле карточки: по центру по высоте и сдвинут
ВГЛУБЬ от края/стрелки — заполняет пустоту, не липнет к стрелке, не обрезается */
#links .premium-glass-card.brand-tg::after,
#links .premium-glass-card.brand-tt::after {
content: "";
position: absolute;
z-index: 0;
pointer-events: none;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.07; /* еле заметно — «просто так», не выделяется */
transition: opacity 0.45s var(--ease-liquid);
width: 120px; height: 120px;
right: 72px; /* вглубь от правого края (дальше от стрелки) */
top: 50%;
transform: translateY(-50%);
}
/* Идентичные по размеру/месту SVG-знаки (белая заливка, та же тусклая opacity),
inline data-URI — без отдельных файлов и без «некрасивых» webp. */
#links .premium-glass-card.brand-tg::after {
background-image: url("data:image/svg+xml,");
}
#links .premium-glass-card.brand-tt::after {
background-image: url("data:image/svg+xml,");
}
#links .premium-glass-card.brand-tg:hover::after,
#links .premium-glass-card.brand-tt:hover::after { opacity: 0.13; }
@media (prefers-reduced-motion: reduce) {
#links .premium-glass-card[class*="brand-"]::after { transition: none; }
}
.premium-glass-card {
position: relative;
cursor: pointer;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 24px;
padding: 30px 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 170px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 55%),
radial-gradient(circle at 30% 80%, rgba(255,255,255,0.02) 0%, transparent 60%),
linear-gradient(135deg, rgba(16,16,20,0.93) 0%, rgba(10,10,12,0.96) 100%);
backface-visibility: hidden;
transition: transform var(--transition-hover), border-color var(--transition-hover), box-shadow var(--transition-hover), opacity 1.2s var(--ease-liquid);
}
.card-meta {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.card-platform {
font-family: var(--font-premium);
font-size: 0.65rem;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 1.5px;
}
.card-index {
font-family: var(--font-premium);
font-size: 0.7rem;
color: rgba(255,255,255,0.15);
}
.card-version {
font-family: var(--font-mono);
font-size: 0.65rem;
color: rgba(255,255,255,0.35);
letter-spacing: 1px;
}
.card-content {
margin-top: auto;
margin-bottom: auto;
overflow: hidden;
}
.card-title {
font-family: var(--font-premium);
font-size: 1.55rem;
font-weight: 600;
letter-spacing: -0.3px;
color: var(--text-main);
transform: translate3d(0,0,0);
transition: transform var(--transition-hover);
will-change: transform;
}
.card-footer-zone {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.card-arrow {
width: 14px; height: 14px;
color: rgba(255,255,255,0.3);
display: block;
will-change: transform;
backface-visibility: hidden;
transform: translate3d(0,0,0);
transition: transform var(--transition-hover), filter var(--transition-hover);
}
/* КНОПКА-ПИЛЮЛЯ С ШИММЕРОМ */
.card-action-btn {
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.055);
border-radius: 50px;
padding: 12px 22px;
min-width: 140px;
height: 40px;
overflow: hidden;
isolation: isolate;
transition: border-color var(--transition-btn-liquid), background-color var(--transition-btn-liquid), transform var(--transition-btn-liquid);
}
/* блик крутится ВСЕГДА (видимость даёт только opacity) — поэтому при уходе
мыши он плавно гаснет, продолжая движение, без резкого скачка позиции */
.liquid-bg {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.01) 20%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.01) 80%, rgba(255,255,255,0) 100%);
background-size: 200% 100%;
background-position: 200% 0;
animation: silkShimmer 4.5s linear infinite;
transition: opacity 0.6s ease;
}
@keyframes silkShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.action-text {
position: relative;
z-index: 2;
font-family: var(--font-premium);
font-size: 0.65rem;
font-weight: 600;
letter-spacing: 1px;
color: #d6d6d6;
transition: color 0.5s ease;
white-space: nowrap;
}
/* ХОВЕР КАРТОЧЕК */
.premium-glass-card:hover {
transform: translate3d(0,-4px,0);
border-color: rgba(255,255,255,0.15);
box-shadow: 0 15px 35px rgba(255,255,255,0.02), inset 0 1px 0 rgba(255,255,255,0.12);
}
.premium-glass-card:hover .card-title { transform: translate3d(4px,0,0); }
.premium-glass-card:hover .card-arrow {
color: var(--text-main);
filter: brightness(1.5);
transform: translate3d(2px,-2px,0) rotate(45deg);
}
.card-action-btn:hover {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.09);
transform: scale(0.97);
}
.card-action-btn:hover .liquid-bg { opacity: 1; }
.card-action-btn:hover .action-text { color: var(--text-main); }
/* ШИРОКАЯ КАРТОЧКА BOOSTY */
.card-wide-featured {
grid-column: span 2;
min-height: 130px;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 0 40px;
gap: 40px;
background: radial-gradient(circle at 85% 50%, rgba(255,255,255,0.035) 0%, transparent 50%),
radial-gradient(circle at 15% 50%, rgba(255,255,255,0.015) 0%, transparent 50%),
linear-gradient(135deg, rgba(16,16,20,0.93) 0%, rgba(10,10,12,0.96) 100%);
}
.featured-left-layout {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
}
.featured-action-zone {
display: flex;
align-items: center;
gap: 30px;
height: 100%;
}
/* ==========================================================================
СЕКТОР 3: WORKFLOW & TOOLS — ВЕРТИКАЛЬНЫЙ ПЕРЕКЛЮЧАТЕЛЬ
========================================================================== */
.wt-container {
width: 100%;
max-width: 1100px;
}
/* «воздух» между заголовком и переключателем */
.wt-container .section-head { margin-bottom: 44px; }
.wt-layout { display: block; }
/* Горизонтальный переключатель вкладок (капсула с бегунком) */
.tabs-nav {
position: relative;
display: flex;
justify-content: center;
gap: 4px;
width: max-content;
margin: 0 auto 52px;
padding: 6px;
border-radius: 50px;
border: 1px solid rgba(255,255,255,0.07);
background: linear-gradient(135deg, rgba(20,20,24,0.7) 0%, rgba(10,10,12,0.8) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}
.tab-btn {
position: relative;
z-index: 2;
border: none;
background: transparent;
cursor: pointer;
padding: 11px 26px;
border-radius: 50px;
font-family: var(--font-premium);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.5px;
color: var(--text-muted);
transition: color var(--transition-medium);
}
.tab-btn.active { color: var(--text-main); }
.tab-indicator {
position: absolute;
z-index: 1;
top: 6px;
left: 6px;
height: calc(100% - 12px);
border-radius: 50px;
background: rgba(255,255,255,0.06);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
transition: transform var(--transition-medium), width var(--transition-medium);
}
/* Панели вкладок */
.tab-panels { position: relative; min-height: 320px; }
.tab-panel {
display: none;
opacity: 0;
transform: translateY(18px);
}
.tab-panel.active {
display: block;
animation: tabIn 0.7s var(--ease-liquid) forwards;
}
@keyframes tabIn {
to { opacity: 1; transform: translateY(0); }
}
/* УХОД старой панели: держится поверх потока (absolute) и плавно гаснет вверх,
пока новая панель уже въезжает в поток снизу → мягкий кроссфейд без рывка. */
.tab-panel.tab-out {
display: block;
position: absolute;
top: 0; left: 0; right: 0;
pointer-events: none;
animation: tabOut 0.36s var(--ease-liquid) forwards;
}
@keyframes tabOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
.tab-panel.active { animation: none; opacity: 1; transform: none; }
.tab-panel.tab-out { animation: none; display: none; }
}
.project-intro {
text-align: center;
max-width: 620px;
margin: 0 auto 40px;
}
.project-name {
font-family: var(--font-heading); /* Days One */
font-size: 1.9rem;
font-weight: 400;
letter-spacing: -0.5px;
margin: 0 0 14px;
color: var(--text-main);
}
.project-desc {
font-family: var(--font-premium);
font-size: 0.98rem;
font-weight: 400;
line-height: 1.65;
color: var(--text-muted);
}
.wt-grid { display: grid; gap: 24px; }
.wt-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
/* «Инструменты»: 2 карточки в ряд + 3-я НА ВСЮ ШИРИНУ (панель). Ширина колонок
та же, что в «Upload method» (760px) → карточки одинакового размера во всех вкладках,
верстка не «пляшет» из-за разного числа элементов. */
.wt-grid-3 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
.wt-grid-3 > .premium-glass-card:nth-child(3) {
grid-column: 1 / -1; /* последняя карточка = панель на всю ширину */
min-height: 130px;
}
/* ==========================================================================
СЕКТОР 4: КОНТАКТЫ
========================================================================== */
.contact-wrap { width: 100%; max-width: 1100px; }
.contact-split-layout {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 70px;
align-items: center;
}
.contact-glass-form-panel {
position: relative;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 24px;
padding: 50px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.04) 0%, transparent 55%),
linear-gradient(135deg, rgba(16,16,20,0.93) 0%, rgba(10,10,12,0.96) 100%);
transition: border-color var(--transition-slow), box-shadow var(--transition-slow), opacity 1.2s var(--ease-liquid), transform 1.2s var(--ease-liquid);
}
.contact-glass-form-panel:hover {
border-color: rgba(255,255,255,0.12);
box-shadow: 0 15px 35px rgba(255,255,255,0.02), inset 0 1px 0 rgba(255,255,255,0.12);
}
.liquid-form { display: flex; flex-direction: column; gap: 34px; }
.form-meta-tag {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--text-muted);
letter-spacing: 2px;
}
/* ГРУППА ПОЛЯ: поле-рамка, лейбл плавно садится на верхнюю границу */
.liquid-input-group {
position: relative;
width: 100%;
}
.liquid-input-group input,
.liquid-input-group textarea {
width: 100%;
background: rgba(255,255,255,0.015);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 14px;
padding: 17px 18px;
outline: none;
font-family: var(--font-premium);
font-size: 1rem;
color: var(--text-main);
transition: border-color var(--transition-fast), background-color var(--transition-fast);
user-select: text;
}
.liquid-input-group textarea { resize: none; min-height: 112px; line-height: 1.6; }
.liquid-input-group input:focus,
.liquid-input-group textarea:focus {
border-color: rgba(255,255,255,0.45);
background: rgba(255,255,255,0.035);
}
/* лейбл: тот же шрифт в обоих состояниях, без смены letter-spacing */
.liquid-input-group label {
position: absolute;
left: 14px;
top: 18px;
padding: 0 6px;
color: var(--text-dim);
font-family: var(--font-premium);
font-size: 1rem;
pointer-events: none;
background-color: transparent;
transform-origin: left center;
transition: transform var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
}
.liquid-input-group input:focus ~ label,
.liquid-input-group input:not(:placeholder-shown) ~ label,
.liquid-input-group textarea:focus ~ label,
.liquid-input-group textarea:not(:placeholder-shown) ~ label {
transform: translateY(-27px) scale(0.82);
color: var(--text-main);
background-color: #0e0e11; /* перекрывает линию рамки — лейбл «сидит» на ней */
}
/* SUBMIT — стиль card-action-btn + анимация заливки при отправке */
.liquid-submit-btn {
position: relative;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
height: 52px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.055);
border-radius: 50px;
overflow: hidden;
isolation: isolate;
transition: border-color var(--transition-btn-liquid), background-color var(--transition-btn-liquid), transform var(--transition-btn-liquid);
}
.liquid-submit-btn:hover {
border-color: rgba(255,255,255,0.3);
background: rgba(255,255,255,0.09);
transform: scale(0.99);
}
.liquid-submit-btn:hover .liquid-bg { opacity: 1; }
.submit-text {
position: relative;
z-index: 2;
font-family: var(--font-premium);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 2px;
color: #d6d6d6;
transition: color 0.5s ease, opacity 0.3s ease;
}
.liquid-submit-btn:hover .submit-text { color: var(--text-main); }
/* ==========================================================================
АНИМАЦИЯ ЗАЛИВКИ (Copied / Sent) — единый Ч/Б приём
========================================================================== */
.fill-layer {
position: absolute;
inset: 0;
z-index: 1;
background: #ffffff;
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.5s var(--ease-liquid);
pointer-events: none;
}
/* SUBMIT: успешная отправка */
.submit-feedback {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-premium);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 2px;
color: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease 0.12s;
}
.liquid-submit-btn.sent { pointer-events: none; border-color: rgba(255,255,255,0.5); }
.liquid-submit-btn.sent .fill-layer { transform: scaleX(1); }
.liquid-submit-btn.sent .submit-text { opacity: 0; }
.liquid-submit-btn.sent .submit-feedback { opacity: 1; }
/* отправка идёт / ошибка доставки */
.liquid-submit-btn.busy { pointer-events: none; opacity: 0.8; }
.liquid-submit-btn.form-error { pointer-events: none; border-color: rgba(255,120,120,0.6); }
/* ПРАВАЯ КОЛОНКА — DIRECT LINE */
.contact-direct-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.direct-title {
font-family: var(--font-heading); /* Days One */
font-size: 2.3rem;
font-weight: 400;
letter-spacing: -0.5px;
background: linear-gradient(180deg, #fff 0%, #fff 50%, #8f8f8f 140%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.direct-nodes-list {
margin-top: 36px;
display: flex;
flex-direction: column;
gap: 15px;
}
.direct-item {
position: relative;
cursor: pointer;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 18px;
padding: 22px 28px;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, rgba(16,16,20,0.93) 0%, rgba(10,10,12,0.96) 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
transition: transform var(--transition-hover), border-color var(--transition-hover), box-shadow var(--transition-hover);
}
.direct-item:hover {
transform: translate3d(0,-4px,0);
border-color: rgba(255,255,255,0.15);
box-shadow: 0 15px 35px rgba(255,255,255,0.02), inset 0 1px 0 rgba(255,255,255,0.12);
}
.direct-text { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 2; transition: opacity 0.25s ease; }
.direct-label {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--text-muted);
letter-spacing: 2px;
}
.direct-value {
font-family: var(--font-premium);
font-size: 1.05rem;
font-weight: 500;
color: var(--text-main);
transition: transform var(--transition-hover);
}
.direct-item:hover .direct-value { transform: translateX(3px); }
.direct-action {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
transition: opacity 0.25s ease;
}
.copy-hint {
font-family: var(--font-mono);
font-size: 0.62rem;
color: var(--text-dim);
letter-spacing: 1px;
transition: color var(--transition-fast);
}
.direct-item:hover .copy-hint { color: var(--text-main); }
/* Кнопки Direct line — пилюля как в секторе 2.
Карточка отзывается на свой ховер, а кнопка анимируется отдельно
на свой (ховер/блик через глобальные правила .card-action-btn:hover).
Клик по кнопке всплывает на всю строку → копирование/переход работают. */
.direct-action .card-action-btn {
min-width: auto;
height: 36px;
padding: 9px 18px;
}
.direct-arrow {
width: 15px; height: 15px;
color: rgba(255,255,255,0.3);
transition: transform var(--transition-hover), filter var(--transition-hover), color var(--transition-hover);
}
.direct-item:hover .direct-arrow {
color: var(--text-main);
filter: brightness(1.5);
transform: translate3d(2px,-2px,0) rotate(45deg);
}
.direct-icon {
width: 16px; height: 16px;
color: rgba(255,255,255,0.4);
transition: color var(--transition-fast);
}
.direct-item:hover .icon-copy { color: var(--text-main); }
/* состояние «скопировано»: заливка + центр «Copied» (строго Ч/Б) */
.copy-feedback {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 2px;
color: #000;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease 0.12s;
}
.direct-item.copyable.copied .fill-layer { transform: scaleX(1); }
.direct-item.copyable.copied .direct-text,
.direct-item.copyable.copied .direct-action { opacity: 0; }
.direct-item.copyable.copied .copy-feedback { opacity: 1; }
.direct-item.copyable.copied {
border-color: rgba(255,255,255,0.5);
}
/* ==========================================================================
ПОДВАЛ — КОМПАКТНЫЙ СТЕКЛЯННЫЙ БАР (как шапка)
========================================================================== */
.site-footer {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
padding: 14px clamp(16px, 4vw, 46px);
background: linear-gradient(0deg, rgba(18,18,22,0.72) 0%, rgba(10,10,12,0.50) 100%);
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
border-top: 1px solid rgba(255,255,255,0.10);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 -6px 24px rgba(0,0,0,0.25);
}
.footer-zone { display: flex; align-items: center; gap: 12px; min-width: 0; }
.footer-left { justify-content: flex-start; }
.footer-center { justify-content: center; }
.footer-right { justify-content: flex-end; }
/* В подвале нужна ТОЛЬКО марка «serophito © 2026 • all rights reserved» — живой статус по
центру и мета справа убраны (по требованию). Одна колонка → строка не обрезается. */
.site-footer { grid-template-columns: 1fr; }
.footer-center, .footer-right { display: none; }
/* марка слева — короткий «штамп» в стиле сайта */
.footer-mark {
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 3px;
color: var(--text-main);
opacity: 0.85;
}
.footer-sep {
width: 1px;
height: 14px;
background: rgba(255,255,255,0.14);
flex-shrink: 0;
}
.footer-copy {
font-family: var(--font-mono);
font-size: 0.64rem;
color: var(--text-muted);
letter-spacing: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* живой статус по центру — пульсирующая точка «всё работает» */
.footer-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.footer-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 8px 1px rgba(255,255,255,0.6);
animation: footerPulse 2.6s ease-in-out infinite;
}
@keyframes footerPulse {
0%, 100% { opacity: 0.35; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1); }
}
.footer-meta {
font-family: var(--font-mono);
font-size: 0.64rem;
color: rgba(255,255,255,0.35);
letter-spacing: 2px;
transition: color var(--transition-fast);
}
.footer-meta:hover { color: rgba(255,255,255,0.6); }
@media (max-width: 680px) {
.site-footer { grid-template-columns: 1fr; }
.footer-center, .footer-right { display: none; }
}
/* ==========================================================================
CLICK-ЭФФЕКТ «ТЕХНО-ОСКОЛКИ» (Ч/Б) — разлетаются от курсора
Разные детальки: глифы, тонкие штрихи, мини-рамки/кольца.
========================================================================== */
.click-debris {
position: fixed;
z-index: 999;
pointer-events: none;
top: 0; left: 0;
transform: translate(-50%, -50%);
opacity: 0;
color: rgba(255,255,255,0.85);
font-family: var(--font-mono);
line-height: 1;
white-space: nowrap;
will-change: transform, opacity;
}
.click-debris.debris-glyph { font-weight: 400; letter-spacing: 0.5px; }
.click-debris.debris-line {
width: 1px;
background: linear-gradient(180deg, transparent, rgba(255,255,255,0.85), transparent);
}
.click-debris.debris-shape {
border: 1px solid rgba(255,255,255,0.8);
background: transparent;
}
/* акцентные осколки — ярче и со свечением */
.click-debris.accent { color: #fff; text-shadow: 0 0 8px rgba(255,255,255,0.6); }
.click-debris.accent.debris-line { box-shadow: 0 0 8px rgba(255,255,255,0.5); }
.click-debris.accent.debris-shape { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.45); }
.click-debris.animate {
animation: debrisBurst var(--duration, 1s) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes debrisBurst {
0% {
transform: translate(-50%, -50%) scale(var(--start-scale, 1)) rotate(0deg);
opacity: 1;
}
60% { opacity: 1; }
100% {
transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.35) rotate(var(--tr));
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.click-debris { display: none !important; }
}
/* ==========================================================================
АДАПТИВНОСТЬ
========================================================================== */
@media (max-width: 968px) {
.fullscreen-section { padding: 110px 6% 80px; }
.site-nav { grid-template-columns: auto 1fr auto; padding: 10px 14px; gap: 8px; }
.nav-logo { height: 30px; padding-right: 10px; }
.nav-zone { gap: 10px; }
.nav-links { gap: 0; }
.nav-link { font-size: 0.82rem; padding: 6px 9px; }
.nav-link.active { transform: scale(1.14); padding: 6px 12px; }
/* плеер в шапке — только на полноценном десктопе (>968px); на планшете/телефоне
шапка узкая, он бы давил меню. */
.np-name, .music-switch { display: none; }
/* карточки ОСТАЮТСЯ по 2 на планшете/ноутбуке — на одну колонку сваливаемся
только на телефоне (≤560px, см. ниже). Раньше схлопывалось уже здесь → «по одной». */
.hub-grid { gap: 18px; }
.premium-glass-card:hover { transform: none; }
.premium-glass-card:hover .card-title { transform: none; }
.premium-glass-card:hover .card-arrow { transform: none; }
.contact-split-layout { grid-template-columns: 1fr; gap: 45px; }
.contact-glass-form-panel { padding: 38px 28px; }
.direct-title { font-size: 2rem; }
.site-footer { gap: 12px; }
}
/* ==========================================================================
ВХОД В HERO (кликабельный serophito) + ПЕРЕХОД ЧЕРЕЗ ЧЁРНУЮ ДЫРУ
========================================================================== */
/* ── Заголовок serophito = «вход» (чёрная дыра рисуется на canvas позади) ── */
#heroEnter {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: filter var(--transition-medium), letter-spacing var(--transition-medium),
transform var(--transition-medium);
}
#heroEnter:hover,
#heroEnter:focus-visible {
outline: none;
letter-spacing: 0.5px;
transform: scale(1.015);
filter: drop-shadow(0 0 26px rgba(255,255,255,0.35));
}
/* подсказка под заголовком — ярчеет, когда наводишь на serophito */
.enter-hint {
margin-top: 26px;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 3px;
color: var(--text-muted);
/* подпись — НЕ кликабельна: обычный курсор, клики не ловит (вход — только заголовок serophito) */
cursor: default;
pointer-events: none;
transition: color var(--transition-fast), letter-spacing var(--transition-fast), opacity var(--transition-fast);
animation: enterHintBreath 3.6s ease-in-out infinite;
}
#heroEnter:hover ~ .enter-hint,
#heroEnter:focus-visible ~ .enter-hint {
color: var(--text-main);
letter-spacing: 4px;
}
@keyframes enterHintBreath {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.enter-hint { animation: none !important; }
}
/* ── Заголовок «inner space» = ВОЗВРАТ (зеркало serophito-портала на главной) ── */
#dimReturn {
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: filter var(--transition-medium), letter-spacing var(--transition-medium),
transform var(--transition-medium);
}
#dimReturn:hover,
#dimReturn:focus-visible {
outline: none;
letter-spacing: 0.5px;
transform: scale(1.015);
filter: drop-shadow(0 0 26px rgba(255,255,255,0.35));
}
/* подсказка под заголовком — ярчеет при наведении на «inner space» (как enter-hint) */
.dim-hint {
display: block;
margin-top: 26px;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 3px;
color: var(--text-muted);
/* подпись — НЕ кликабельна: обычный курсор, клики не ловит (возврат — только заголовок bio.serophito.com) */
cursor: default;
pointer-events: none;
transition: color var(--transition-fast), letter-spacing var(--transition-fast), opacity var(--transition-fast);
animation: enterHintBreath 3.6s ease-in-out infinite;
}
#dimReturn:hover ~ .dim-hint,
#dimReturn:focus-visible ~ .dim-hint {
color: var(--text-main);
letter-spacing: 4px;
}
@media (prefers-reduced-motion: reduce) {
.dim-hint { animation: none !important; }
}
/* МЕНЮ СЕКЦИЙ в шапке при входе во второе пространство НЕ исчезает мгновенно, а плавно
и НЕТОРОПЛИВО гаснет и приподнимается под темп длинного перехода (зеркально на выходе). */
.nav-links {
/* ВОЗВРАТ из 2-го пространства: разделы основного появляются ПОЗДНО (delay 2.25s),
синхронно с возвратом основного контента — а не сразу после клика. */
transition: opacity 0.9s var(--ease-liquid) 2.25s, transform 0.9s var(--ease-liquid) 2.25s;
}
body.in-dimension .nav-links {
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
/* ВХОД: гаснут быстро на старте всасывания, без задержки */
transition: opacity 0.7s var(--ease-liquid), transform 0.7s var(--ease-liquid);
}
/* ПЕРЕХОД ШАПКИ: в глубоком пространстве ЛОГОТИП (+разделитель), ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА и
правый блок (плеер/пасхалка) плавно уезжают вверх и гаснут — синхронно с основным меню.
Остаётся ТОЛЬКО лента разделов 2-го пространства (центрируется по всей ширине, ничего не
перекрывает → чинит русскую шапку). На возврате всё появляется обратно (поздняя задержка). */
.nav-left, .nav-right {
transition: opacity 0.9s var(--ease-liquid) 2.25s, transform 0.9s var(--ease-liquid) 2.25s;
}
body.in-dimension .nav-left,
body.in-dimension .nav-right {
opacity: 0;
transform: translateY(-12px);
pointer-events: none;
transition: opacity 0.7s var(--ease-liquid), transform 0.7s var(--ease-liquid);
}
/* ШАПКА 2-ГО ПРОСТРАНСТВА — разделы по центру; видны только in-dimension, появляются
РОВНО когда материализуется контент 2-го пространства (синхрон с переходом). */
.dim-nav-links {
position: absolute;
left: 50%;
top: 50%;
/* ИДЕНТИЧНО основной шапке: скрытое состояние = приподнято вверх + прозрачно
(центрирование сохраняем через calc). На выходе шапка «уходит вверх» так же,
как .nav-links на входе. */
transform: translate(-50%, calc(-50% - 12px));
display: flex;
align-items: center;
justify-content: flex-start;
gap: 2px;
/* НЕ даём 5 разделам (вкл. длинное «БЛАГОДАРНОСТИ») вылезти на логотип/края:
коробка по ширине контента и СТРОГО центрирована; если шире лимита — мягкий
горизонтальный скролл вместо наезда на логотип/края. */
width: max-content;
max-width: min(640px, 56vw);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
opacity: 0;
pointer-events: none;
transition: opacity 0.7s var(--ease-liquid), transform 0.7s var(--ease-liquid);
}
.dim-nav-links::-webkit-scrollbar { display: none; }
.dim-nav-links .nav-link {
flex: 0 0 auto;
white-space: nowrap;
font-size: 0.84rem;
padding: 6px 11px;
}
.dim-nav-links .nav-link.active { padding: 6px 13px; }
body.in-dimension .dim-nav-links {
opacity: 1;
transform: translate(-50%, -50%);
pointer-events: auto;
/* появляется ПОЗДНО (синхронно с материализацией контента), слайдом сверху вниз */
transition: opacity 0.9s var(--ease-liquid) 2.3s, transform 0.9s var(--ease-liquid) 2.3s;
}
/* ── Состояния тела ── */
body.warping,
body.in-dimension { overflow: hidden; }
/* ПЕРЕХОД: главный контент «засасывается» в чёрную дыру по центру —
стягивается в точку с закруткой, гаснет и размывается. Затем (с задержкой)
из сингулярности «большим взрывом» разворачивается #dimension.
Базовый transition (без класса) = плавное возвращение на выходе (ease-out);
transition внутри .in-dimension = ускоряющийся «засос» на входе (ease-in). */
.fullscreen-section,
.site-footer {
transform-origin: 50% 47%; /* центр дыры — контент засасывается ровно в неё */
/* ВЫХОД: возврат main ЗЕРКАЛИТ проявление .dimension на входе. Задержка 1.85s ≈ старт
РАЗЛЁТА частиц при выходе (T0.60 от темпа 2.8s) — main-текст появляется ровно тогда,
когда объекты начали выбрасываться по местам, а не пока кольцо ещё крутится. */
transition: transform 1.1s cubic-bezier(0.16, 0.84, 0.44, 1) 2.25s,
opacity 1.0s ease 2.25s, filter 1.0s ease 2.25s;
}
body.in-dimension .fullscreen-section,
body.in-dimension .site-footer {
transform: scale(0.03); /* чистый «засос» к центру, без вращения */
opacity: 0;
filter: blur(5px);
pointer-events: none;
/* ускоряющийся «засос» в дыру (ease-in) — синхронно с воронкой на canvas */
transition: transform 1.05s cubic-bezier(0.55, 0.0, 1, 0.45),
opacity 1.0s cubic-bezier(0.55, 0.0, 1, 0.45),
filter 1.0s ease-in;
}
/* ==========================================================================
ВТОРОЕ ПРОСТРАНСТВО
========================================================================== */
/* ЗАТЕМНЕНИЕ ГЛУБИНЫ — отдельный fixed-слой, который ТОЛЬКО гаснет/проявляется и
НИКОГДА не масштабируется. Раньше тёмный фон жил на .dimension и на выходе ужимался
вместе с ней в «чёрный прямоугольник» — теперь он вынесен сюда. */
.dimension-veil {
position: fixed;
inset: 0;
z-index: 35; /* выше main-контента, ниже .dimension(40) и nav(50) */
pointer-events: none;
opacity: 0;
background: radial-gradient(circle at 50% 32%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
transition: opacity 0.85s var(--ease-liquid); /* плавное гашение на выходе */
}
body.in-dimension .dimension-veil {
opacity: 1;
transition: opacity 1.0s var(--ease-liquid) 0.6s; /* проявляется вслед за всасыванием */
}
.dimension {
position: fixed;
inset: 0;
z-index: 40;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: scale(0.72); /* мягко наезжает из темноты, не «из точки» */
filter: blur(6px);
transform-origin: 50% 47%; /* центр дыры (откуда мы вышли с той стороны) */
background: transparent; /* затемнение переехало в .dimension-veil (см. выше) */
transition: opacity 1.0s var(--ease-liquid), transform 1.05s var(--ease-liquid),
filter 1.0s var(--ease-liquid), visibility 1.0s linear;
}
body.in-dimension .dimension {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: scale(1);
filter: blur(0);
/* ждём СХОД в кольцо + вращение, и проявляемся РОВНО на старте разлёта частиц
(≈1.95s от темпа входа 3.0s) — синх. с cosmos onArrive (fireAt 0.64). Пока кольцо
крутится, текста нет: видно только вихрь объектов. */
transition: opacity 1.0s var(--ease-liquid) 2.3s, transform 1.1s var(--ease-liquid) 2.3s,
filter 1.0s var(--ease-liquid) 2.3s, visibility 0.1s linear 2.3s;
}
/* ВЫХОД: контент 2-го пространства ВСАСЫВАЕТСЯ в дыру (стягивается к центру 50% 47%
и гаснет), а не пропадает мгновенно. Текст держится, пока идёт засасывание —
ease-in ускоряется к центру, opacity гаснет чуть позже → видно «поглощение». */
body.dim-exiting .dimension {
transform: scale(0.05);
opacity: 0;
filter: blur(8px);
pointer-events: none;
/* ЗЕРКАЛО входного всасывания main (body.in-dimension .fullscreen-section):
ускоряющийся «засос» к центру с t=0, ~1.05s — синхронно со сходом частиц в кольцо */
transition: transform 1.05s cubic-bezier(0.55, 0.0, 1, 0.45),
opacity 1.0s cubic-bezier(0.55, 0.0, 1, 0.45),
filter 1.0s ease-in,
visibility 0s linear 1.05s;
}
/* prefers-reduced-motion: без масштабов/размытия/закрутки — простой кроссфейд */
@media (prefers-reduced-motion: reduce) {
.dimension-veil { transition: opacity 0.3s ease; }
.fullscreen-section,
.site-footer { transition: opacity 0.3s ease; }
body.dim-exiting .dimension { transform: none; filter: none; transition: opacity 0.3s ease; }
body.in-dimension .fullscreen-section,
body.in-dimension .site-footer { transition: opacity 0.3s ease; transform: none; filter: none; }
.dimension { transform: none; filter: none; transition: opacity 0.3s ease, visibility 0.3s linear; }
body.in-dimension .dimension { transform: none; filter: none; transition: opacity 0.3s ease 0s, visibility 0.1s linear 0s; }
}
.dimension-scroll {
position: relative; /* якорь для пасхалок-надписей (absolute), чтобы они скроллились с контентом */
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 110px 5% 90px;
-webkit-overflow-scrolling: touch;
}
.dimension-scroll::-webkit-scrollbar { width: 0; display: none; }
.dim-section {
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 64px 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* INTRO — заполняет ПЕРВЫЙ экран целиком, чтобы следующая карточка (about/витрина)
не выглядывала снизу и не «обрезалась» при засасывании на возврате.
Запас вычитает верхний паддинг скролла (см. .dimension-scroll). */
.dim-intro {
text-align: center;
min-height: calc(100vh - 120px);
justify-content: center;
}
.dim-title {
font-family: var(--font-heading);
font-size: clamp(2.6rem, 7vw, 4.6rem);
font-weight: 400;
letter-spacing: -1px;
line-height: 1;
background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #8a8a8a 140%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.dim-sub {
margin-top: 18px;
font-family: var(--font-premium);
font-size: 0.95rem;
letter-spacing: 1px;
color: var(--text-muted);
}
/* ABOUT — опущена ниже интро-сектора, чтобы карточка не «трогала» его и не попадала
в фокус всасывания на переходе */
.dim-about { margin-top: 8vh; }
.about-panel {
width: 100%;
max-width: 760px;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 24px;
padding: 46px 50px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
background: radial-gradient(circle at 82% 12%, rgba(255,255,255,0.045) 0%, transparent 55%),
linear-gradient(135deg, rgba(16,16,20,0.86) 0%, rgba(10,10,12,0.9) 100%);
}
.about-title {
font-family: var(--font-heading);
font-size: 2rem;
font-weight: 400;
letter-spacing: -0.5px;
margin: 14px 0 20px;
color: var(--text-main);
}
.about-body {
font-family: var(--font-premium);
font-size: 1.02rem;
font-weight: 400;
line-height: 1.8;
color: var(--text-muted);
}
/* ВИТРИНА — ЛУЧШИЙ ЭДИТ (видео + покупка проекта на Boosty) */
.dim-showcase { margin-top: 4vh; }
.showcase-panel {
width: 100%;
max-width: 860px;
border: 1px solid rgba(255,255,255,0.07);
border-radius: 24px;
padding: 18px 18px 24px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
background: radial-gradient(circle at 82% 12%, rgba(255,255,255,0.045) 0%, transparent 55%),
linear-gradient(135deg, rgba(16,16,20,0.86) 0%, rgba(10,10,12,0.9) 100%);
}
.showcase-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* ЕДИНЫЙ размер у всех слайдов (не подгоняем под видео) */
border-radius: 16px;
overflow: hidden;
background: #000;
box-shadow: 0 12px 40px rgba(0,0,0,0.5);
line-height: 0;
}
.showcase-video {
display: block;
width: 100%;
height: 100%;
object-fit: contain; /* видео вписывается в единую рамку, не растягивая её */
background: #000;
}
.showcase-info {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
margin-top: 22px;
padding: 0 8px;
}
.showcase-text { min-width: 0; }
.showcase-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 400;
letter-spacing: -0.5px;
color: var(--text-main);
}
.showcase-desc {
margin-top: 8px;
font-family: var(--font-premium);
font-size: 0.92rem;
line-height: 1.55;
color: var(--text-muted);
}
.showcase-buy { flex-shrink: 0; min-width: 170px; }
@media (max-width: 720px) {
.showcase-info {
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
.showcase-buy { width: 100%; }
}
/* ── КАРУСЕЛЬ ВИТРИНЫ: 2 слайда (эдит / коллаб) со стрелкой ── */
.showcase-carousel {
position: relative;
width: 100%;
max-width: 860px;
margin: 0 auto;
}
.showcase-track { position: relative; touch-action: pan-y; cursor: grab; }
.showcase-track:active { cursor: grabbing; }
/* слайды: активный в потоке (задаёт высоту, у всех одинаковую), неактивные — поверх.
Листание = мягкий fade + лёгкий сдвиг ПО НАПРАВЛЕНИЮ нажатия (вперёд = справа,
назад = слева). БЕЗ масштабирования/блюра и «выпучивания» — карточка просто
плавно меняется. Направление задаёт класс .to-prev на карусели (ставит script.js). */
.showcase-slide {
max-width: none;
opacity: 0;
visibility: hidden;
position: absolute;
inset: 0;
/* НЕактивный слайд НЕ держит постоянный сдвиг-трансформ — он просто погашен.
Любое движение даёт ТОЛЬКО входная keyframe-анимация активного слайда, чья
конечная точка = translateX(0). Поэтому слайд физически не может «застрять»
сдвинутым (старый баг при свайпе назад). */
transform: none;
transition: opacity 0.4s var(--ease-liquid), visibility 0s linear 0.4s;
}
.showcase-slide.active {
opacity: 1;
visibility: visible;
position: relative;
inset: auto;
transform: none;
transition: opacity 0.4s var(--ease-liquid), visibility 0s;
animation: scSlideInNext 0.42s var(--ease-liquid);
}
/* вперёд — приходит справа; назад (.to-prev) — слева. Конец всегда 0 → без залипания. */
@keyframes scSlideInNext { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scSlideInPrev { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: translateX(0); } }
.showcase-carousel.to-prev .showcase-slide.active { animation-name: scSlideInPrev; }
@media (prefers-reduced-motion: reduce) {
.showcase-slide.active { animation: none; }
}
/* стрелки-переключатели УБРАНЫ: листание теперь свайпом (влево/вправо) + точки.
Кнопки оставлены в DOM, но скрыты — JS-обработчики на них безвредны. */
.showcase-arrow { display: none !important; }
.showcase-arrow {
position: absolute;
top: 38%;
transform: translateY(-50%);
z-index: 6;
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(18, 18, 24, 0.6);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: var(--text-main);
cursor: pointer;
transition: background 0.25s var(--ease-liquid), border-color 0.25s var(--ease-liquid), transform 0.25s var(--ease-liquid);
}
.showcase-arrow svg { width: 22px; height: 22px; }
.showcase-arrow:hover {
background: rgba(40, 40, 48, 0.82);
border-color: rgba(255, 255, 255, 0.32);
}
.showcase-arrow:active { transform: translateY(-50%) scale(0.92); }
.showcase-prev { left: -62px; }
.showcase-next { right: -62px; }
/* точки-индикаторы */
.showcase-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 18px;
}
.sc-dot {
width: 8px;
height: 8px;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
cursor: pointer;
transition: background 0.25s var(--ease-liquid), transform 0.25s var(--ease-liquid);
}
.sc-dot.active {
background: var(--text-main);
transform: scale(1.3);
}
/* ПОДСКАЗКА «свайпни» — мягко пульсирует под точками, гаснет после первого листания.
На десктопе не нужна (там точки + перетаскивание мышью очевидны) → только на тач. */
.swipe-hint {
display: none;
text-align: center;
margin-top: 12px;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--text-dim);
pointer-events: none;
animation: swipeHintPulse 2.2s ease-in-out infinite;
transition: opacity 0.4s ease;
}
.swipe-hint.hidden { opacity: 0; }
@keyframes swipeHintPulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 0.85; }
}
@media (hover: none) { .swipe-hint { display: block; } }
@media (prefers-reduced-motion: reduce) { .swipe-hint { animation: none; } }
/* оверлей-заглушка: видео грузится ТОЛЬКО по клику */
.video-loader {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
border: none;
cursor: pointer;
background: radial-gradient(circle at 50% 45%, rgba(20, 20, 26, 0.32), rgba(0, 0, 0, 0.72));
color: var(--text-main);
transition: opacity 0.4s var(--ease-liquid);
}
.video-loader-icon {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
transition: transform 0.25s var(--ease-liquid), background 0.25s var(--ease-liquid);
}
.video-loader-icon svg { width: 28px; height: 28px; margin-left: 3px; }
.video-loader:hover .video-loader-icon {
transform: scale(1.08);
background: rgba(255, 255, 255, 0.16);
}
.video-loader-text {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--text-muted);
}
/* до загрузки прячем сам