/* Оболочка приложения Софии — «кабинет Софии ночью»: спокойное тёмно-синее небо, тёплый свет лампы,
   стеклянные карточки со светящимся краем, одна золотая кнопка на экран, живая героиня на входе.
   Палитра сайта sofiaprotebya.ru. Правила для экранов тикетов — DESIGN.md (там же — почему так). */
:root{
  --navy-d:#141d36; --navy:#1E2A4A; --navy-l:#2B3A63;
  --cream:#FBF7F0; --cream-t:#EADFC8; --gold:#C9A24B; --gold-l:#E7D6A8; --terra:#C06B4F; --terra-d:#A95A40;
  --ink:var(--cream); --ink-2:rgba(234,223,200,.8); --ink-3:rgba(234,223,200,.64);
  --line:rgba(231,214,168,.18); --line-strong:rgba(231,214,168,.3);
  /* стекло: свет падает из левого верхнего угла, край подсвечен изнутри; без размытия подложки —
     на спокойном небе blur был декором и делал карточку непрозрачной плитой; плотность .72/.56 — чтобы
     звёзды не просвечивали сквозь текст точками-«опечатками» (ревью 30.09) */
  --glass:radial-gradient(120% 80% at 0% 0%, rgba(231,214,168,.10), transparent 60%),
          linear-gradient(180deg, rgba(43,58,99,.72), rgba(30,42,74,.56));
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(231,214,168,.16),
                 0 10px 22px -14px rgba(0,0,0,.5);
  /* кнопка — золото сайта с тёмно-синим текстом (6,95:1 на #C9A24B, 11,6:1 на светлом верху градиента);
     терракота — свет лампы, не кнопка: крем на ней 3,6:1, не проходит AA */
  --cta-bg:linear-gradient(180deg, var(--gold-l) 0%, var(--gold) 62%); --cta-ink:var(--navy-d);
  --r-card:26px; --r-pill:999px; --r-chip:16px;
  --nav-h:64px; --nav-gap:12px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --ease-out:cubic-bezier(.16,1,.3,1);
  /* Playfair — только заставка и названия экранов, лёгким весом; всё остальное — Onest
     (кириллический гуманистический гротеск, OFL, лежит у нас) */
  --display:'Playfair Display',Georgia,serif;
  --ui:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Фон только у body: тогда он уходит на холст страницы, и слой неба (body::before, z-index:-1) виден.
   Фон ещё и на html прятал небо ПОД фоном body — экран выходил плоским (30.09). */
html{height:100%}
body{
  min-height:100%;font-family:var(--ui);color:var(--ink);background:var(--navy-d);
  line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
/* Небо. Фиксированный слой под всем: на iOS background-attachment:fixed не работает, поэтому
   псевдоэлемент. sky.jpg рисует make_icons.py: глубина navy и редкие звёзды, без орнамента. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55% 30% at 88% -2%, rgba(201,162,75,.14), transparent 72%),
    url('/static/img/sky.jpg') center top / cover no-repeat var(--navy-d);
}
#app{min-height:100%}
::selection{background:rgba(201,162,75,.35);color:var(--cream)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block}
.noscript{padding:32px 20px;color:var(--cream-t)}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.01em;text-wrap:balance}
h3{font-family:var(--ui);font-weight:600;letter-spacing:-.01em;text-wrap:balance}

/* ─── заставка: София во всю ширину, растворяется в небо ─── */
.splash{
  min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  padding-bottom:calc(28px + var(--safe-b));
}
/* Портрет занимает всё, что остаётся над текстом и кнопкой (~290px): на iPhone SE 377px, на 812 — 522,
   на больших — до 700. Текстовый блок прижат к низу и наезжает на растворение портрета. */
.hero{
  position:relative;height:clamp(300px, calc(100svh - 290px), 700px);overflow:hidden;flex:none;
  /* Портрет растворяется в небо маской, а не градиентом до сплошного цвета: под ним просвечивает
     небо, и шва между героиней и землёй нет (градиент в navy-d давал жёсткую линию, 30.09). */
  -webkit-mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.55) 76%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 50%,rgba(0,0,0,.55) 76%,transparent 100%);
}
.hero-img,.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 16%;
  transform-origin:50% 28%;
}
/* изумрудная стена кабинета уводится в navy по краям — лицо не трогается (ревью 30.09) */
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(62% 58% at 50% 36%, transparent 52%, var(--navy) 125%);
  mix-blend-mode:multiply;
}
.hero-img{animation:breathe 14s ease-in-out infinite alternate}
.hero-video{opacity:0;transition:opacity .8s ease}
.hero.live .hero-video{opacity:1}
.hero.live .hero-img{animation:none}
.splash-body{padding:0 24px;margin-top:-44px;position:relative;display:flex;flex-direction:column;flex:1;justify-content:flex-end}
.splash h1{font-size:clamp(36px,10.5vw,44px);line-height:1.08;font-weight:600;color:var(--cream)}
.splash .lede{margin-top:14px;max-width:32ch;font-size:17px;line-height:1.45;color:var(--ink-2)}
.splash .btn{margin-top:30px;align-self:stretch}
.splash .after{margin-top:14px;text-align:center;font-size:14px;color:var(--ink-3)}
.splash .after a{color:var(--gold-l);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(231,214,168,.45)}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.05)}}
.rise{animation:rise .7s var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ─── кнопки ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 28px;border-radius:var(--r-pill);
  background:var(--cta-bg);color:var(--cta-ink);font-weight:600;font-size:17px;letter-spacing:.005em;
  text-decoration:none;
  /* тень — нейтральная, со смещением; светлая кромка сверху делает кнопку выпуклой, а не плоской */
  box-shadow:0 14px 26px -14px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .15s var(--ease-out), box-shadow .2s ease, filter .2s ease;
}
.btn:active{transform:translateY(1px) scale(.985);box-shadow:0 6px 14px -10px rgba(0,0,0,.5)}
.btn.ghost{
  background:rgba(30,42,74,.5);color:var(--gold-l);border:1px solid var(--line-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.btn[disabled]{opacity:.55;pointer-events:none}

/* ─── экраны ─── */
.screen{
  min-height:100vh;min-height:100svh;
  padding:calc(22px + var(--safe-t)) 20px calc(var(--nav-h) + var(--nav-gap) + 32px + var(--safe-b));
}
.screen-head{margin-bottom:22px}
.screen h2{font-size:32px;line-height:1.15;color:var(--cream)}
.screen .sub{margin-top:6px;font-size:15px;color:var(--ink-3)}
.stack>*+*{margin-top:14px}

.card{
  position:relative;border-radius:var(--r-card);padding:20px;
  background:var(--glass);box-shadow:var(--glass-shadow);
}
.card p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.card h3{font-size:20px;line-height:1.25;color:var(--cream);margin-bottom:8px}
.card .btn{margin-top:18px;width:100%}

/* Карточка-приглашение с Софией по плечи справа (как героиня входит в кадр у Селены): текст слева, портрет
   растворяется влево, стена кабинета уводится в navy. Главное приглашение экрана — одна такая карточка. */
.card.feature{
  overflow:hidden;min-height:220px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.card.feature .portrait{
  position:absolute;top:0;right:0;bottom:0;width:52%;height:100%;object-fit:cover;object-position:46% 8%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,#000 40%);
}
/* текст не заходит под лицо: колонка 56 % карточки, кнопка может лечь на плечо портрета */
.card.feature::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:52%;pointer-events:none;
  background:radial-gradient(80% 70% at 55% 35%, transparent 45%, var(--navy) 120%);mix-blend-mode:multiply;
  /* та же маска, что у портрета: без неё у затемнения виден левый край — жёсткий шов (30.09) */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 40%);mask-image:linear-gradient(90deg,transparent 0%,#000 40%);
}
.card.feature > :not(.portrait){position:relative;z-index:1}
.card.feature h3,.card.feature p{max-width:56%}
.card.feature p{font-size:15px}
.card.feature h3{font-size:22px;line-height:1.2;margin-bottom:10px}
.card.feature .btn{align-self:flex-start;width:auto;min-height:48px;padding:0 22px;font-size:16px;margin-top:18px}

/* Реплика Софии: строка «чип + имя», под ней текст на всю ширину карточки */
.sofia{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.chip{
  flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:1.5px solid rgba(201,162,75,.55);box-shadow:0 6px 14px -8px rgba(0,0,0,.6);
}
.sofia .who{font-size:15px;font-weight:600;color:var(--gold-l)}

/* тихая строка о том, что появится позже — текст, не пустая коробка */
.later{display:flex;gap:12px;align-items:flex-start;padding:4px 6px;color:var(--ink-3);font-size:14.5px;line-height:1.45}
.later svg{flex:none;width:20px;height:20px;margin-top:1px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ─── нижнее меню: плавающая стеклянная капсула ─── */
.tabbar{
  position:fixed;z-index:10;left:var(--nav-gap);right:var(--nav-gap);bottom:calc(var(--nav-gap) + var(--safe-b));
  height:var(--nav-h);display:grid;grid-template-columns:repeat(4,1fr);padding:0 6px;
  border-radius:var(--r-card);background:rgba(30,42,74,.78);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 16px 36px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(231,214,168,.14);
}
.tab{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:12.5px;font-weight:500;color:var(--ink-3);text-decoration:none;border-radius:var(--r-chip);
  transition:color .2s ease;
}
.tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease-out), fill .2s ease}
.tab::before{
  content:'';position:absolute;inset:7px 4px;border-radius:var(--r-chip);
  background:rgba(231,214,168,.10);box-shadow:inset 0 0 0 1px rgba(231,214,168,.22);
  opacity:0;transform:scale(.85);transition:opacity .2s ease, transform .25s var(--ease-out);
}
.tab[aria-current="page"]{color:var(--gold-l)}
.tab[aria-current="page"]::before{opacity:1;transform:none}
.tab[aria-current="page"] svg{transform:translateY(-1px);fill:rgba(231,214,168,.2)}
.tab>*{position:relative}

@media (prefers-reduced-motion:reduce){
  .hero-img,.rise{animation:none}
  .rise{opacity:1;transform:none}
  .hero-video{display:none}
  *{transition-duration:.01ms !important}
}
@media (min-width:520px){
  /* планшет и десктоп не целевые: держим телефонную колонку по центру */
  #app{max-width:460px;margin:0 auto}
  .tabbar{left:50%;right:auto;width:436px;transform:translateX(-50%)}
}