/* Publi. Токены и компоненты по v5/03_art_direction.md (разделы 2–4), знак — SPEC раздел 8. */

/* Фолбэк дисплея с подгонкой, чтобы макет не прыгал до загрузки Roboto Flex */
@font-face { font-family: "RF Fallback"; src: local("Impact"), local("Arial Narrow Bold"); size-adjust: 88%; ascent-override: 92%; }

:root{
  --s0:#0B0C0E; --s1:#141619; --s2:#1C1F22; --s3:#262A2E;
  --line:rgba(255,255,255,.08); --line-dash:#2E3236;
  --text:#F4F5F2; --text-2:#A1A4A8; --text-3:#8A8D91; --text-4:#5E6165;
  --lime:#D1FE17; --on-lime:#0F1113; --lime-tint:rgba(209,254,23,.12);
  --lime-line:rgba(209,254,23,.40); --lime-glow:rgba(209,254,23,.14);
  --white-btn:#F4F5F2; --danger:#FF5A5F; --warn:#FFB547;
  --plate:rgba(10,11,12,.72);
  --r-in:12px; --r-card:20px; --r-pill:999px;
  --font-d:"Roboto Flex Cond","RF Fallback",Impact,sans-serif;
  --font-t:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --dur-instant:80ms; --dur-fast:160ms; --dur-base:220ms; --dur-slow:320ms; --dur-slower:480ms; --dur-ambient:10s;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.55,0,1,.45); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --move-sm:4px; --move-md:8px; --move-lg:16px; --move-xl:24px;
  --gut:16px; --hdr:56px; --stag:40ms;
  --sh-lime:0 8px 24px -6px rgba(209,254,23,.45);
  --sh-float:0 24px 48px -12px rgba(0,0,0,.65);
  --focus:0 0 0 2px var(--s0),0 0 0 4px var(--lime);
  color-scheme: dark;
}
@media (min-width:900px){ :root{ --r-card:24px; --gut:24px; --hdr:64px; --stag:60ms; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; background:var(--s0); }
body{
  margin:0; min-height:100svh; background:var(--s0); color:var(--text);
  font:400 16px/1.45 var(--font-t); -webkit-font-smoothing:antialiased; overflow-x:clip;
}
@media (min-width:900px){ body{ font-size:17px; } }
img,video,canvas{ display:block; max-width:100%; }
button,input,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:0; padding:0; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:none; box-shadow:var(--focus); }
[hidden]{ display:none!important; }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tnum{ font-variant-numeric:tabular-nums; }

/* Зерно на крупных плоскостях s0 (статичное) */
.grain{ position:relative; isolation:isolate; }
.grain::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url(../img/grain.png); opacity:.04; mix-blend-mode:overlay; }

/* ───── Типографика ───── */
.d1,.d2,.d3,.d4,.giant{ font-family:var(--font-d); font-weight:800; font-stretch:30%; text-transform:uppercase; letter-spacing:0; margin:0; text-wrap:balance; font-synthesis:none; }
.d1{ font-size:clamp(38px,10.8vw,46px); line-height:.96; letter-spacing:-.005em; }
.d2{ font-size:40px; line-height:.96; }
.d3{ font-size:32px; line-height:.95; }
.d4{ font-size:24px; line-height:1; }
.giant{ font-stretch:25%; font-size:38vw; line-height:.8; letter-spacing:-.01em; }
@media (min-width:900px){
  .d1{ font-size:clamp(60px,5.6vw,88px); line-height:.94; }
  .d2{ font-size:72px; line-height:.94; }
  .d3{ font-size:44px; }
  .d4{ font-size:28px; }
  .giant{ font-size:22vw; }
}
.t-lead{ font-size:19px; line-height:1.35; color:var(--text-2); }
.t-ui{ font-size:15px; line-height:1.3; font-weight:500; }
.t-cap{ font-size:13px; line-height:1.35; color:var(--text-3); }
.t-label{ font-size:11px; line-height:1.2; font-weight:500; text-transform:uppercase; letter-spacing:.06em; }
.mute{ color:var(--text-2); }

/* Двухцветный заголовок (Morphic): белая строка — утверждение, серая — контекст */
.tt{ display:block; }
.tt > span{ display:block; }
.tt > span + span{ color:var(--text-2); }

/* ───── Кнопки ───── */
.btn{
  --h:56px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:var(--h); padding:0 24px; border-radius:var(--r-pill); font-weight:500; font-size:16px; white-space:nowrap;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-fast);
  -webkit-tap-highlight-color:transparent; position:relative; user-select:none;
}
.btn:active{ transform:scale(.98); transition-duration:120ms; }
.btn--lime{ background:var(--lime); color:var(--on-lime); font-weight:600; font-size:17px; box-shadow:var(--sh-lime); }
.btn--lime:active{ box-shadow:0 4px 12px -6px rgba(209,254,23,.45); }
.btn--lime:focus-visible{ box-shadow:0 0 0 2px var(--s0),0 0 0 4px #fff; }
.btn--white{ background:var(--white-btn); color:var(--on-lime); }
.btn--soft{ background:var(--s2); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
.btn--text{ height:44px; padding:0 4px; color:var(--text-2); font-weight:500; font-size:15px; }
.btn--text:hover{ color:var(--text); }
.btn--block{ width:100%; }
.btn--sm{ --h:40px; padding:0 18px; font-size:15px; }
.btn[disabled]{ background:var(--s3); color:var(--text-3); box-shadow:none; cursor:default; }
.btn__2l{ display:flex; flex-direction:column; align-items:center; line-height:1.05; }
.btn__2l small{ font-size:12px; font-weight:500; opacity:.72; margin-top:3px; }
@media (min-width:900px){ .btn{ --h:52px; } .btn--sm{ --h:40px; } }
.btn.is-loading{ pointer-events:none; }
.btn.is-loading::after{ content:""; position:absolute; left:24px; right:24px; bottom:8px; height:2px; border-radius:2px; background:currentColor; opacity:.5; transform-origin:left; animation:loadbar 1.4s var(--ease-in-out) infinite; }
@keyframes loadbar{ 0%{ transform:scaleX(0);} 60%{ transform:scaleX(1);} 100%{ transform:scaleX(1); opacity:0; } }

.ibtn{ width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; flex:none; color:var(--text); }
.ibtn svg{ width:20px; height:20px; }
.ibtn--s3{ background:var(--s3); }
.ibtn--s2{ background:var(--s2); box-shadow:inset 0 0 0 1px var(--line); }
.ibtn--lg{ width:56px; height:56px; }

/* ───── Стекло (раздел 2.7). Только поверх фото. ───── */
.glass{
  --tint:rgba(12,13,15,.42);
  background:radial-gradient(120% 90% at 0% 0%, rgba(255,255,255,.12), transparent 55%), var(--tint);
  -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05);
  position:relative; isolation:isolate;
}
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.42), rgba(255,255,255,.06) 45%, rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass--dense{ --tint:rgba(12,13,15,.55); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ .glass{ --tint:rgba(18,20,22,.9); } }

.bubble{
  border-radius:999px;
  background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.55), transparent 20%), radial-gradient(circle at 70% 80%, rgba(255,255,255,.10), transparent 40%);
  -webkit-backdrop-filter:blur(2px) saturate(140%); backdrop-filter:blur(2px) saturate(140%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), inset -10px -12px 24px rgba(255,255,255,.10), inset 12px 14px 30px rgba(0,0,0,.28), 0 18px 40px -12px rgba(0,0,0,.6);
}

/* ───── Чипы на фото ───── */
.chip{ display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px; border-radius:var(--r-in); color:var(--text); white-space:nowrap; }
.chip--dark{ background:var(--plate); }
.chip svg{ width:10px; height:10px; }
.chip--ai{ height:20px; padding:0 6px; border-radius:6px; background:rgba(10,11,12,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); color:rgba(244,245,242,.8); font-size:10px; }

/* ───── Шапка ───── */
.hdr{ position:fixed; inset:0 0 auto 0; z-index:40; height:var(--hdr); display:flex; align-items:center; gap:16px; padding:0 var(--gut); transition:background var(--dur-slow) var(--ease-out); }
.hdr{ padding:0 calc(var(--gut) + 10px); }
.hdr::before,.hdr::after{ content:""; position:absolute; inset:6px 8px; border-radius:999px; z-index:-1; opacity:0; pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out); }
.hdr::before{ background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03) 60%), rgba(14,15,17,.5);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 12px 32px -12px rgba(0,0,0,.7); }
.hdr::after{ padding:1px; background:linear-gradient(120deg, rgba(255,255,255,.45), rgba(255,255,255,.06) 40%, rgba(255,255,255,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.hdr.is-scrolled::before,.hdr.is-scrolled::after{ opacity:1; }
.hdr.is-scrolled .hdr__login{ background:rgba(255,255,255,.1); box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.hdr.is-scrolled .hdr__login::before{ display:none; }
@media (min-width:900px){ .hdr::before,.hdr::after{ inset:8px max(16px, calc((100% - 1240px) / 2)); } .hdr{ padding:0 max(34px, calc((100% - 1240px) / 2 + 20px)); } }
.hdr__nav{ display:none; gap:28px; margin-left:40px; }
.hdr__nav a{ color:var(--text-2); font-size:15px; font-weight:500; transition:color var(--dur-fast); }
.hdr__nav a:hover{ color:var(--text); }
.hdr__right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.hdr__link{ color:var(--text-2); font-size:15px; font-weight:500; }
.hdr__login{ height:36px; padding:0 16px; border-radius:999px; display:inline-flex; align-items:center; font-size:15px; font-weight:500; }
@media (min-width:900px){ .hdr__nav{ display:flex; } .hdr__link{ display:none; } }

/* Словесный знак «Publi» + лаймовая точка-ручка шторки (SPEC 8, art direction 6.2) */
.logo{ display:inline-flex; align-items:baseline; font-family:var(--font-d); font-weight:800; font-stretch:30%; text-transform:uppercase; font-size:24px; line-height:1; letter-spacing:.01em; color:var(--text); }
.logo__w{ color:var(--text); }
.logo__h{ position:relative; display:inline-block; width:.6em; height:.6em; margin-left:.08em; border-radius:50%; translate:0 .02em;
  background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M8 6l-3.5 4L8 14M12 6l3.5 4L12 14' fill='none' stroke='%230F1113' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/82% no-repeat; }

/* ───── Разделы ───── */
.wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 var(--gut); }
.wide{ width:100%; max-width:1440px; margin:0 auto; padding:0 var(--gut); }
.sec{ padding-top:64px; }
@media (min-width:900px){ .sec{ padding-top:96px; } }
.sec__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:24px; }
.dash{ border:0; border-top:1px dashed var(--line-dash); margin:0; }

/* ───── Карточка кадра (4.0) ───── */
.card{ position:relative; display:block; border-radius:var(--r-card); overflow:hidden; background:var(--s1); container-type:inline-size; isolation:isolate; -webkit-tap-highlight-color:transparent;
  transition:transform var(--dur-base) var(--ease-out); }
.card:active{ transform:scale(.98); transition-duration:120ms; }
.card__m{ position:relative; width:100%; aspect-ratio:4/5; }
.card--tall .card__m{ aspect-ratio:9/16; }
.card--sq .card__m{ aspect-ratio:1/1; }
.card__m img,.card__m video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__m::after{ content:""; position:absolute; inset:0; background:#000; opacity:0; transition:opacity var(--dur-base) var(--ease-out); pointer-events:none; }
.card__top{ position:absolute; top:8px; left:8px; right:8px; display:flex; justify-content:space-between; align-items:flex-start; gap:6px; z-index:2; pointer-events:none; }
.card__plate{ position:absolute; left:8px; right:8px; bottom:8px; z-index:2; border-radius:var(--r-in); background:var(--plate); padding:8px 8px 8px 12px;
  display:flex; align-items:center; gap:8px; min-height:52px; transition:transform var(--dur-base) var(--ease-out); }
.card__name{ flex:1; min-width:0; font-size:15px; font-weight:500; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.price{ flex:none; display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 12px; border-radius:999px; background:var(--lime-tint); color:var(--lime);
  font-size:13px; font-weight:600; white-space:nowrap; transition:background var(--dur-base) var(--ease-out); }
.price .s{ display:none; }
@container (max-width:339px){
  .card__plate{ flex-direction:column; align-items:stretch; gap:6px; padding:8px; min-height:0; }
  .card__name{ font-size:14px; padding:0 4px; }
  .price{ height:30px; font-size:12.5px; padding:0 8px; }
}
@container (max-width:259px){ .price .l{ display:none; } .price .s{ display:inline; } }
@media (hover:hover) and (pointer:fine){
  .card:hover .card__m::after{ opacity:.35; }
  .card:hover .card__plate{ transform:translateY(-8px); }
  .card:hover .price{ background:rgba(209,254,23,.2); }
}

/* ───── Пилюли категорий (4.0) ───── */
.pills{ position:relative; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:8px var(--gut); scroll-padding-inline:var(--gut);
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent); }
.pills::-webkit-scrollbar{ display:none; }
.pill{ position:relative; z-index:1; flex:none; display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 4px; border-radius:999px;
  background:var(--s2); box-shadow:inset 0 0 0 1px var(--line); color:var(--text-2); font-size:15px; font-weight:500; white-space:nowrap;
  transition:color var(--dur-slow) var(--ease-out), background var(--dur-slow) var(--ease-out); }
.pill img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.pill__ico{ width:32px; height:32px; display:grid; place-items:center; }
.pill__ico svg{ width:16px; height:16px; }
.pill[aria-pressed="true"]{ color:var(--on-lime); font-weight:600; background:transparent; box-shadow:none; }
.pills__ind{ position:absolute; z-index:0; top:8px; left:0; height:40px; width:0; border-radius:999px; background:var(--lime); pointer-events:none;
  transition:transform 260ms var(--ease-out), width 260ms var(--ease-out); }
@media (min-width:900px){ .pills{ justify-content:center; -webkit-mask:none; mask:none; overflow:visible; flex-wrap:wrap; } }

/* ───── Нижняя панель (M14) ───── */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:45; padding:12px var(--gut) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top, rgba(11,12,14,.96) 55%, rgba(11,12,14,0)); transform:translateY(0); opacity:1;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); }
.dock.is-hidden{ transform:translateY(24px); opacity:0; pointer-events:none; transition-timing-function:var(--ease-in); transition-duration:var(--dur-fast); }
.dock__row{ display:flex; gap:8px; }
.dock__row > *{ flex:1; }

/* ───── Лента вбок (похожие) ───── */
.lane{ display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 var(--gut); scroll-padding-inline:var(--gut);
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent); mask:linear-gradient(90deg,#000 calc(100% - 24px),transparent); }
.lane::-webkit-scrollbar{ display:none; }
.lane > .card{ flex:none; width:164px; scroll-snap-align:start; }
@media (min-width:900px){
  .lane{ -webkit-mask:none; mask:none; }
  .lane > .card{ width:calc((min(100vw,1440px) - 48px - 32px)/5); }
}
.arrows{ display:none; gap:8px; }
@media (min-width:900px){ .arrows{ display:flex; } }
.arrows .ibtn[disabled]{ opacity:.35; cursor:default; }

/* ───── Нижний лист оплаты ───── */
.sheet-bg{ position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.62); opacity:0; pointer-events:none; transition:opacity var(--dur-slow) var(--ease-out); }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:61; max-height:92svh; overflow:auto; background:var(--s3); border-radius:24px 24px 0 0;
  padding:8px var(--gut) calc(20px + env(safe-area-inset-bottom)); transform:translateY(104%); transition:transform 420ms var(--ease-out); box-shadow:0 -24px 48px -12px rgba(0,0,0,.6); }
.sheet.is-open{ transform:none; }
.sheet-bg.is-open{ opacity:1; pointer-events:auto; }
.sheet__grab{ width:40px; height:4px; border-radius:4px; background:rgba(255,255,255,.18); margin:0 auto 16px; }
@media (min-width:900px){ .sheet{ left:50%; right:auto; width:480px; bottom:50%; border-radius:24px; transform:translate(-50%,calc(50% + 40px)); opacity:0; transition:transform 420ms var(--ease-out), opacity 320ms var(--ease-out); padding:24px 28px 28px; }
  .sheet.is-open{ transform:translate(-50%,50%); opacity:1; } .sheet__grab{ display:none; } }

/* ───── Подвал ───── */
.foot{ margin-top:96px; padding-top:48px; border-top:1px solid var(--line); overflow:hidden; }
.foot__cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px 16px; }
.foot__cols a{ display:block; color:var(--text-2); font-size:15px; padding:6px 0; }
.foot__cols a:hover{ color:var(--text); }
.foot__meta{ margin-top:8px; display:grid; gap:4px; grid-column:1/-1; }
.foot__mark{ display:flex; align-items:center; justify-content:center; margin:40px 0 -2.5vw; color:var(--s2); white-space:nowrap; line-height:.78; user-select:none; }
.foot__mark .giant{ font-size:27vw; }
.foot__mark .giant i{ display:inline-block; width:.2em; height:.2em; border-radius:50%; background:var(--lime); margin-left:.03em; }
@media (min-width:900px){ .foot__meta{ grid-column:auto; margin-top:0; } .foot__cols{ grid-template-columns:repeat(4,1fr); } .foot__mark .giant{ font-size:21vw; } }

/* ───── Моушен: базовые правила (раздел 3) ───── */
@keyframes rise{ from{ opacity:0; transform:translateY(var(--move-md)); } }
@keyframes mediaIn{ from{ opacity:0; transform:scale(.97); } }
@keyframes ambient{ to{ transform:scale(1.025); } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes develop{ from{ filter:blur(12px); transform:scale(1.02); opacity:.2; } }
@media (max-width:899px){ @keyframes develop{ from{ filter:blur(8px); transform:scale(1.02); opacity:.2; } } }

/* M5: появление при прокрутке. Контент видим по умолчанию, скрытие только под .has-motion */
.has-motion .reveal{ opacity:0; transform:translateY(var(--move-md)); transition:opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out); transition-delay:calc(var(--i,0) * var(--stag)); }
.has-motion .reveal.in{ opacity:1; transform:none; }
@media (min-width:900px){ .has-motion .reveal{ transform:translateY(var(--move-lg)); } }
@supports (animation-timeline: view()){
  .has-motion.sda .reveal{ opacity:1; transform:none; transition:none; animation:reveal linear both; animation-timeline:view(); animation-range:entry 10% cover 30%; }
  @keyframes reveal{ from{ opacity:0; transform:translateY(var(--move-lg)); } }
}
.has-motion .breathe{ animation:ambient var(--dur-ambient) var(--ease-in-out) infinite alternate; animation-delay:var(--bd,0s); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; scroll-behavior:auto!important; }
}

/* Режим скриншота: всё видно сразу, анимации в финальном состоянии */
.shot *,.shot *::before,.shot *::after{ animation:none!important; transition:none!important; }
.shot .reveal{ opacity:1!important; transform:none!important; }
.shot .hits__word{ clip-path:none!important; }
.shot-full .hdr,.shot-full .dock{ position:absolute; }
.shot-full .dock{ bottom:0; }
.shot-full body{ position:relative; }

/* Тост */
.toast{ position:fixed; left:50%; bottom:96px; z-index:80; translate:-50% 12px; opacity:0; pointer-events:none; background:var(--s3); color:var(--text); padding:12px 18px; border-radius:999px; font-size:14px;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.6); transition:opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out); white-space:nowrap; }
.toast.is-on{ opacity:1; translate:-50% 0; }
.shot-full .hdr--flow{ position:relative; }