/* Первый экран главной для гостей: два варианта арта, переключатель 1/2 и шрифт Manrope. Подробности — docs/HOME_LANDING.md */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.site-shell--landing { --landing-ease: cubic-bezier(.22, 1, .36, 1); --landing-nav-wide: min(1200px, calc(100% - 32px)); }

/* Шапка — стеклянная плашка поверх арта: на варианте 1 широкая, на варианте 2 по размеру содержимого */
.site-shell--landing .site-header { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: var(--landing-nav-wide); min-height: 0; gap: 24px; padding: 8px 8px 8px 24px; border-radius: 9999px; background: #00000038; box-shadow: 0 0 0 1px #ffffff26; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); font-family: Manrope, system-ui, sans-serif; transition: width .6s var(--landing-ease), background-color .6s var(--landing-ease); }
/* До замера в landing.js компактная плашка берёт ширину по содержимому: сохранённый вариант 2 не сжимается анимацией при загрузке */
.site-shell--landing[data-hero="2"] .site-header { width: var(--landing-nav-compact, max-content); background: #0000004d; }
/* Опущен на 1 px: логотип из заглавных визуально выше слова «Войти» со строчными буквами */
.site-shell--landing .site-header .site-brand { position: relative; top: 1px; font-size: 14px; line-height: 20px; }
.site-shell--landing .site-header-controls { display: flex; gap: 24px; align-items: center; }
.landing-nav__link { color: #ffffffd9; font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; transition: color .3s var(--landing-ease); }
.landing-nav__link:hover { color: #fff; }
.landing-nav__link:focus-visible { outline: 2px solid var(--dream-accent); outline-offset: 4px; border-radius: 8px; }
.site-shell--landing .site-header .account-nav__button { padding: 8px 16px; border: 0; border-radius: 9999px; background: #1e3a6e; box-shadow: 0 0 0 1px #7dd3fc40; color: #fff; font: 600 14px/20px Manrope, system-ui, sans-serif; letter-spacing: 0; transition: background-color .6s var(--landing-ease), box-shadow .6s var(--landing-ease), transform .3s var(--landing-ease); }
.site-shell--landing .site-header .account-nav__button:hover { border-color: transparent; background: #28498a; color: #fff; transform: translateY(-1px); }
/* После входа вместо «Войти» — имя в такой же капсуле, по клику открывается обычное меню аккаунта */
.site-shell--landing .site-header .profile-menu { color: #fff; font: 600 14px/20px Manrope, system-ui, sans-serif; }
.site-shell--landing .site-header .profile-menu summary { max-width: min(220px, 50vw); padding: 8px 16px; border: 0; border-radius: 9999px; background: #1e3a6e; box-shadow: 0 0 0 1px #7dd3fc40; color: #fff; font-size: 14px; transition: background-color .6s var(--landing-ease), transform .3s var(--landing-ease); }
.site-shell--landing .site-header .profile-menu summary:hover, .site-shell--landing .site-header .profile-menu[open] summary { border-color: transparent; background: #28498a; color: #fff; }
/* На ПК и планшете имя в плашке целиком; длинное ограничено шириной экрана */
@media (min-width: 761px) { .site-shell--landing .site-header .profile-menu summary { max-width: calc(100vw - 320px); } }
.site-shell--landing .site-header .profile-menu__panel { top: calc(100% + 12px); border-color: #ffffff26; border-radius: 16px; font: 14px/1.5 Manrope, system-ui, sans-serif; }

/* Варианты лежат в одной ячейке сетки: высота блока — по большему из них, переключение — плавная смена прозрачности */
/* Страховка: ничто в ленте не должно расширять страницу на телефоне (iOS позволяет отдалить её и показывает чёрную полосу справа) */
.site-shell--landing .public-landing-feed { overflow-x: clip; }
.landing { position: relative; display: grid; isolation: isolate; overflow: hidden; background: #000; color: #fff; font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.landing-hero { grid-area: 1 / 1; position: relative; min-height: 640px; min-height: max(640px, var(--landing-h, 100svh)); opacity: 0; visibility: hidden; transition: opacity .8s var(--landing-ease), visibility 0s linear .8s; }
.landing-hero.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity .8s var(--landing-ease), visibility 0s; }
/* Слой арта шире экрана на 16 px слева, справа и сверху: параллакс за курсором (до ±7 px) не открывает чёрные края. Снизу запаса нет — кровать варианта 1 прижата к краю. */
.landing-hero__art { position: absolute; inset: -16px -16px 0; overflow: hidden; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform 1.2s var(--landing-ease); }
.landing-hero__art picture { display: contents; }
.landing-hero__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.landing-hero.is-active .landing-hero__art img { animation: landing-art 1.6s var(--landing-ease) both; }
.landing-hero__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.landing-rise { opacity: 0; }
.landing-hero.is-active .landing-rise { animation: landing-rise .8s var(--landing-ease) both; animation-delay: calc(.25s + var(--i, 0) * .12s); }
/* Размытие под кнопкой не видит арт, пока у предка прозрачность меньше 1: блок кнопки только выезжает,
   а проявляется сама кнопка, иначе после анимации фон кнопки скачком становится плотнее */
.landing-cta.landing-rise { opacity: 1; }
.landing-hero.is-active .landing-cta.landing-rise { animation-name: landing-rise-move; }
.landing-cta > * { opacity: 0; }
.landing-hero.is-active .landing-cta > * { animation: landing-fade .8s var(--landing-ease) both; animation-delay: calc(.25s + var(--i, 0) * .12s); }
.landing-title { margin: 0; max-width: 680px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; background: linear-gradient(90deg, #ffffff, var(--landing-title-end, #9b9b9b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.landing-sub { margin: 24px 0 0; text-wrap: pretty; }
.landing-cta { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: 32px; }
.landing-btn { display: inline-flex; gap: 8px; align-items: center; padding: 12px 24px; border-radius: 9999px; background: #ffffffd9; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #000; font-size: 16px; line-height: 24px; font-weight: 600; text-decoration: none; text-shadow: none; box-shadow: 0 16px 48px -12px #000000b3; transition: transform .5s var(--landing-ease), box-shadow .3s var(--landing-ease); }
/* В обоих вариантах одинаково полупрозрачная, с размытием арта под ней */
.landing-hero .landing-btn { background: #ffffff99; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.landing-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 56px -12px #000000cc; }
.landing-btn:active { transform: scale(.98); }
.landing-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.landing-btn svg { width: 16px; height: 16px; flex: none; }

/* Вариант 1 «Окно в сон»: арт прижат к нижнему краю, чтобы кровать всегда была видна */
.landing-hero--window .landing-hero__art img { object-position: 50% 100%; transform-origin: 50% 100%; }
.landing-hero--window .landing-hero__art { transform: translate3d(var(--px, 0), var(--py-down, 0), 0); }
.landing-hero__edge { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; background: #000; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); pointer-events: none; }
.landing-copy--window { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: max(120px, 20svh) 24px 96px; text-align: center; text-shadow: 0 2px 24px #0b1030b3; }
.landing-tags { display: flex; gap: 12px; align-items: center; margin: 0 0 24px; color: #ffffffd9; font-size: 14px; line-height: 20px; font-weight: 600; }
.landing-tags i { width: 4px; height: 4px; border-radius: 50%; background: #ffcf8f; box-shadow: 0 0 8px #ffcf8f; }
.landing-hero--window .landing-title { --landing-title-end: #c2c6cf; font-size: 72px; line-height: 1; text-shadow: none; filter: drop-shadow(0 2px 24px #0b1030b3); }
.landing-hero--window .landing-sub { max-width: 576px; padding: 2px 8px; border-radius: 8px; background: #0b103029; color: #ffffffd9; font-size: 18px; line-height: 28px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.landing-hero--window .landing-cta { justify-content: center; }

/* Вариант 2 «Граница сна»: текст в тёмной правой части, снизу арт уходит в чёрный */
.landing-hero--border .landing-hero__art { -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
.landing-hero--border .landing-hero__art img { object-position: 0% 50%; }
.landing-copy--border { position: absolute; z-index: 2; right: max(64px, 7vw); bottom: 72px; width: min(520px, 40vw); }
.landing-eyebrow { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 24px; color: #ffffffb3; font-size: 14px; line-height: 20px; font-weight: 600; }
.landing-eyebrow i { width: 24px; height: 1px; background: #ffffff80; }
.landing-hero--border .landing-title { font-size: 60px; line-height: 1.04; }
.landing-hero--border .landing-sub { color: #ffffffb3; font-size: 18px; line-height: 28px; }
.landing-note { color: #ffffff80; font-size: 14px; line-height: 20px; }
.landing-proof { display: flex; gap: 24px; margin-top: 32px; padding-top: 16px; box-shadow: 0 -1px 0 #ffffff1f; color: #ffffff80; font-size: 14px; line-height: 20px; }
.landing-proof b { display: block; color: #fff; font-size: 16px; line-height: 24px; font-weight: 700; }
.landing-scroll { position: absolute; z-index: 2; left: 32%; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #ffffff80; font-size: 12px; line-height: 16px; font-weight: 600; text-decoration: none; }
.landing-scroll i { width: 1px; height: 24px; background: #ffffff66; transform-origin: top; animation: landing-cue 2.4s var(--landing-ease) infinite; }

/* Переключатель вариантов: подсветка в стиле кнопки «Войти» переезжает на выбранную цифру */
.landing-switcher { position: absolute; z-index: 5; left: 24px; bottom: 24px; display: flex; gap: 2px; padding: 3px; border-radius: 9999px; background: #0000004d; box-shadow: 0 0 0 1px #ffffff26, 0 12px 32px -8px #00000099; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.landing-switcher[hidden] { display: none; }
.landing-switcher::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 8px) / 2); border-radius: 9999px; background: #1e3a6e; box-shadow: 0 0 0 1px #7dd3fc40; transition: transform .6s var(--landing-ease); }
.landing-switcher[data-active="2"]::before { transform: translateX(calc(100% + 2px)); }
.landing-switcher button { position: relative; min-width: 32px; padding: 4px 12px; border: 0; border-radius: 9999px; background: transparent; color: #ffffffb3; font: 600 13px/20px Manrope, system-ui, sans-serif; cursor: pointer; transition: color .3s var(--landing-ease); }
.landing-switcher button:hover, .landing-switcher button[aria-pressed="true"] { color: #fff; }
.landing-switcher button:active { transform: scale(.96); }
.landing-switcher button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

@keyframes landing-art { from { transform: scale(1.06); } to { transform: scale(1.03); } }
@keyframes landing-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes landing-rise-move { from { transform: translateY(24px); } to { transform: none; } }
@keyframes landing-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes landing-cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-height: 800px) and (min-width: 761px) {
  .landing-hero--window .landing-title { font-size: 60px; line-height: 1.04; }
  .landing-hero--window .landing-sub, .landing-hero--border .landing-sub { margin-top: 16px; }
  .landing-cta { margin-top: 24px; }
  .landing-hero--border .landing-title { font-size: 48px; }
  .landing-proof { margin-top: 24px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .landing-copy--border { right: 40px; width: min(440px, 46vw); }
  .landing-hero--border .landing-title { font-size: 48px; }
}
@media (max-width: 760px) {
  .site-shell--landing .site-header { padding-left: 16px; }
  /* На телефоне плашка варианта 2 во всю ширину, как у варианта 1 */
  .site-shell--landing[data-hero="2"] .site-header { width: var(--landing-nav-wide); }
  .landing-nav__link { display: none; }
}
/* Телефоны, вертикальные и почти квадратные планшеты: вертикальный арт на весь экран, кнопка внизу под большим пальцем, переключатель под шапкой справа */
@media (max-width: 760px), (max-aspect-ratio: 11/10) {
  .landing-switcher { left: auto; right: 16px; bottom: auto; top: calc(80px + env(safe-area-inset-top, 0px)); }
  .landing-hero { display: flex; flex-direction: column; min-height: var(--landing-h, 100svh); }
  .landing-hero__art { inset: 0; }
  .landing-copy--window, .landing-copy--border { position: relative; flex: 1; display: flex; flex-direction: column; right: auto; bottom: auto; width: 100%; max-width: 592px; margin: 0 auto; }
  .landing-hero--window .landing-sub, .landing-hero--border .landing-sub { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .landing-btn { padding: 10px 20px; font-size: 15px; line-height: 20px; }
  .landing-copy--window { align-items: center; padding: calc(132px + env(safe-area-inset-top, 0px)) 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .landing-tags { gap: 8px; font-size: 12px; line-height: 16px; }
  .landing-hero--window .landing-title { font-size: 40px; line-height: 1.04; }
  .landing-hero--window .landing-cta { width: 100%; margin-top: auto; padding-top: 24px; }
  .landing-hero--border .landing-hero__art { -webkit-mask-image: none; mask-image: none; }
  .landing-hero--border .landing-hero__art img { object-position: 50% 0%; }
  .landing-copy--border { justify-content: flex-end; padding: 0 16px calc(32px + env(safe-area-inset-bottom, 0px)); text-shadow: 0 2px 16px #000814; }
  .landing-hero--border .landing-title { font-size: 36px; line-height: 40px; }
  .landing-hero--border .landing-cta { justify-content: center; margin-top: 24px; }
  .landing-eyebrow, .landing-note, .landing-proof, .landing-scroll { display: none; }
}
/* Телефон после входа: «Добавить сон» по центру в просвете между лодкой и спящим на арте «Границы сна»
   (арт прижат к верху и масштабируется по высоте экрана, на широких телефонах — по ширине, 1024×1696).
   В «Окне в сон» на той же высоте подзаголовок, поэтому кнопка ниже него на 96 px. Кнопка крупнее обычной телефонной, 48 px */
@media (max-aspect-ratio: 7/10) {
  .landing-cta--between .landing-btn { padding: 12px 24px; font-size: 16px; line-height: 24px; }
  .landing-hero--border .landing-cta--between { position: absolute; left: 16px; right: 16px; top: calc(max(var(--landing-h, 100svh), 165.625vw) * .445 - 24px); margin: 0; }
  .landing-hero--window .landing-cta--between { margin-top: 96px; padding-top: 0; }
}
/* Планшеты в той же раскладке, что телефон, но с крупным текстом и кнопкой обычного размера */
@media (min-width: 761px) and (max-aspect-ratio: 11/10) {
  .landing-copy--window { padding-top: calc(144px + 6svh); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .landing-tags { gap: 12px; font-size: 14px; line-height: 20px; }
  .landing-hero--window .landing-title { font-size: 72px; line-height: 1; }
  .landing-hero--border .landing-title { font-size: 60px; line-height: 1.04; }
  .landing-hero--window .landing-sub, .landing-hero--border .landing-sub { margin-top: 24px; font-size: 18px; line-height: 28px; }
  .landing-copy--border { max-width: 640px; padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)); }
  .landing-btn { padding: 12px 24px; font-size: 16px; line-height: 24px; }
  .landing-switcher { right: 24px; top: calc(88px + env(safe-area-inset-top, 0px)); }
}
/* На сенсорных экранах вместо параллакса за курсором — медленное приближение арта */
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .landing-hero.is-active .landing-hero__art img { animation: landing-art 1.6s var(--landing-ease) both, landing-drift 24s ease-in-out 1.6s infinite alternate; }
}
@keyframes landing-drift { from { transform: scale(1.03); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) {
  .landing-hero, .landing-hero__art, .site-shell--landing .site-header, .landing-switcher::before { transition-duration: .01s; }
  .landing-hero.is-active .landing-hero__art img, .landing-hero.is-active .landing-rise, .landing-hero.is-active .landing-cta > *, .landing-scroll i { animation: none; }
  .landing-hero.is-active .landing-rise, .landing-hero.is-active .landing-cta > * { opacity: 1; }
}