:root{
  --ink:#020816; --deep:#061536; --dynamo:#0b2c80; --blue:#2a62ff; --ice:#a9cbff; --white:#f2f6ff;
  --muted:rgba(214,228,255,.62); --line:rgba(169,203,255,.22);
  --display:"Druk Cyr",Impact,"Arial Narrow",sans-serif;
  --text:"TT Hoves","Segoe UI",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
  --cw:calc(150px * var(--cs, 1)); --ch:calc(190px * var(--cs, 1));   /* --cs — масштаб спирали на экранах выше 1080 (layout в main.js) */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#020816; --white:#f2f6ff; } }
:root[data-theme="dark"]{ --ink:#020816; --white:#f2f6ff; }
@media (max-width:700px){ :root{ --cw:108px; --ch:138px; } }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--ink); color:var(--white); font-family:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; }

#space{ width:1px; }
.fixed{ position:fixed; inset:0; }
#bg{ background:
  radial-gradient(ellipse 60% 80% at 50% 50%, rgba(11,44,128,.5), transparent 70%),
  radial-gradient(ellipse 120% 60% at 50% 120%, rgba(42,98,255,.16), transparent 60%),
  var(--ink); }
#gl{ width:100vw; height:100vh; pointer-events:none; }

/* Год внутри оси */
#pillar{ pointer-events:none; }
#pillarYear{ position:absolute; left:max(3vw,14px); top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; line-height:1;
  font-family:var(--display); font-weight:800; font-size:clamp(70px,12vw,180px); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1px rgba(169,203,255,.2); white-space:nowrap; font-variant-numeric:tabular-nums; }
#pillar .beam{ display:none; position:absolute; top:0; bottom:0; width:2px; left:50%; margin-left:-1px;
  background:linear-gradient(to bottom, transparent, var(--ice) 18%, #fff 50%, var(--ice) 82%, transparent);
  box-shadow:0 0 18px 4px rgba(120,170,255,.55), 0 0 90px 30px rgba(42,98,255,.25); }
.nogl #pillar .beam{ display:block; }

/* Спираль */
#stage{ perspective:1300px; overflow:hidden; }
#scene{ position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d; }
.card{ --k:1; position:absolute; left:0; top:0; padding:0;
  width:calc(var(--cw) * var(--k)); height:calc(var(--ch) * var(--k));
  margin:calc(var(--ch) * var(--k) / -2) 0 0 calc(var(--cw) * var(--k) / -2);
  will-change:transform,opacity; transform-style:preserve-3d; }
.card.star{ --k:1.28; }
.card .thumb{ position:absolute; inset:0; border-radius:3px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 20px 60px rgba(0,0,0,.55); transition:border-color 90ms linear, box-shadow .45s var(--ease); }
.card .thumb::after{ content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; opacity:var(--flash,0);
  background:radial-gradient(circle at 50% 45%, rgba(220,235,255,.95), rgba(120,170,255,.35) 55%, transparent 80%); }
.card.star .thumb{ border-color:rgba(169,203,255,.55); box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 28px rgba(42,98,255,.3); }
.card.lit .thumb{ box-shadow:0 20px 60px rgba(0,0,0,.55), 0 0 0 1px var(--ice), 0 0 60px rgba(120,170,255,.55); }
.card:hover .thumb, .card:focus-visible .thumb{ border-color:var(--ice); }
.card .yr{ position:absolute; left:0; bottom:-26px; font-family:var(--display); font-size:12px; font-weight:500; color:var(--ice); }
.card.star .yr{ color:var(--white); }

.ph{ position:absolute; inset:0;
  background:
    radial-gradient(circle at 28% 22%, rgba(169,203,255,.35), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, var(--c1,#12357f), var(--c2,#030b22)); }
.ph .ico{ position:absolute; left:12px; top:12px; width:22px; opacity:.55; }
.ph .q{ position:absolute; left:14px; top:4px; font-family:var(--display); font-size:90px; color:rgba(169,203,255,.45); line-height:1; }

.card.obj .thumb{ border:0; box-shadow:none; background:none; overflow:visible; }
.card.obj .thumb::after{ display:none; }
/* зона клика у 3D-товара — вся карточка (размер как у остальных), без рамки; при наведении модель перестаёт крутиться */
.card.obj .spin{ position:absolute; inset:-18%; display:grid; place-items:center; }
.c3d{ width:100%; height:auto; aspect-ratio:1;   /* квадратный холст не растягиваем под вертикальную карточку — иначе объект сплющивался */  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(42,98,255,.35)); }
.card.obj svg{ width:92%; }
.vtb2d{ height:92%; aspect-ratio:1/1.586; border-radius:6%; transform:rotate(30deg); box-shadow:0 10px 30px rgba(0,8,40,.5); }
.card.obj .tag{ position:absolute; right:-4px; top:-4px; font-size:10px; padding:3px 7px; border-radius:20px; background:var(--blue); color:#fff; transform:translateZ(30px); }

/* Первый экран */
#hero{ display:grid; align-content:center; justify-items:start; padding:8vh max(6vw,24px); pointer-events:none; }
#hero > *{ pointer-events:auto; }
#hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(40px,8.4vw,128px); line-height:.92; letter-spacing:-.045em; margin:0; max-width:11ch; }
#hero h1 .sub{ display:block; font-weight:300; }
/* буквы и слова при появлении анимируются отдельными слоями; на iOS слой (и фильтр) обрезает всё за границей бокса, а у курсива правый край выходит за бокс.
   Расширяем бокс полями и возвращаем ширину отрицательными отступами — раскладка не меняется */
#hero h1 .ch, .finaltext h2 .fw{ padding:.06em .16em .06em .06em; margin:-.06em -.16em -.06em -.06em; }
#hero p .par{ display:block; margin-top:.55em; }   /* абзац перед «Листайте» — как в документе */
#hero p{ max-width:42ch; color:var(--muted); font-size:clamp(15px,1.35vw,18px); line-height:1.55; margin:28px 0 34px; }
.nick{ position:absolute; right:max(6vw,24px); bottom:12vh; text-align:right; font-family:var(--display); font-weight:300; font-size:clamp(14px,1.6vw,22px); line-height:1.5; color:var(--ice); opacity:.8; }
.pre #hero > *{ opacity:0; }
/* первый экран: блок по центру, центральная выключка */
#hero{ justify-items:center; text-align:center; }
#hero p{ margin-left:auto; margin-right:auto; }
/* луч теперь проходит через центр текста: тёмная подложка-тень отделяет мелкий текст от линии, не пряча сам луч */
#hero p, #hero .hint{ text-shadow:0 0 6px rgba(3,8,26,.95), 0 0 14px rgba(3,8,26,.9), 0 0 24px rgba(3,8,26,.7); }
/* пока не стартовал скрипт, музейные элементы не показываем: на медленном телефоне они успевали мелькнуть */
.pre #pillarYear, .pre #eras, .pre #stage{ opacity:0; }
.btn{ text-decoration:none; display:inline-flex; align-items:center; gap:12px; padding:16px 26px; border-radius:40px; background:var(--white); color:var(--ink); font-weight:600; font-size:15px; transition:background 90ms linear, transform .18s var(--ease); }
.btn:hover{ background:var(--ice); }
.btn:active{ transform:scale(.97); }
.hint{ margin-top:22px; font-size:13px; color:var(--muted); }

/* Шапка и навигация */
#top{ position:fixed; left:0; right:0; top:0; display:flex; justify-content:space-between; align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 18px) max(4vw,18px) 18px; z-index:20; pointer-events:none; }
#top > *{ pointer-events:auto; }
.mark{ font-family:var(--display); font-weight:500; font-size:13px; }
.mark small{ display:block; font-family:var(--text); font-weight:400; color:var(--muted); font-size:11px; margin-top:2px; }
.proto{ font-size:11px; color:var(--ice); border:1px dashed rgba(169,203,255,.5); padding:5px 10px; border-radius:20px; }
#eras{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 22px); transform:translateX(-50%); z-index:20;
  display:flex; align-items:center; gap:6px; padding:6px; border-radius:40px;
  background:rgba(6,21,54,.72); border:1px solid var(--line); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
#eras .arr{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-size:18px; transition:background 90ms linear; }
#eras .arr:hover{ background:rgba(169,203,255,.12); }
#eras .arr:disabled{ opacity:.25; cursor:default; }
#eraLabel{ min-width:210px; text-align:center; overflow:hidden; }
#eraInner b{ display:block; font-family:var(--display); font-weight:500; font-size:13px; }
#eraInner span{ font-size:11px; color:var(--muted); }
#eraDots{ display:flex; gap:6px; justify-content:center; margin-top:5px; }
#eraDots button{ width:18px; height:3px; border-radius:2px; background:rgba(169,203,255,.25); padding:0; transition:background .45s var(--ease); }
#eraDots button.on{ background:var(--ice); }
@media (max-width:520px){ #eraLabel{ min-width:150px; } }

/* Финал */
#final{ opacity:0; pointer-events:none; overflow:hidden; }
#field{ position:absolute; left:-40%; right:-40%; bottom:-10%; height:75%; transform-origin:50% 100%;
  background:
    radial-gradient(ellipse 18% 16% at 50% 38%, transparent 96%, rgba(169,203,255,.3) 97% 99%, transparent 100%),
    linear-gradient(90deg, transparent 49.9%, rgba(169,203,255,.3) 50%, transparent 50.1%),
    repeating-linear-gradient(90deg, rgba(42,98,255,.12) 0 8%, rgba(11,44,128,.12) 8% 16%),
    linear-gradient(to top, rgba(11,44,128,.65), transparent);
  -webkit-mask:linear-gradient(to top, #000 30%, transparent 95%); mask:linear-gradient(to top, #000 30%, transparent 95%); }
.finaltext{ position:absolute; left:50%; top:9vh; transform:translateX(-50%); width:min(46ch, calc(100% - 48px)); text-align:center; z-index:2; }
#field{ display:none; }
.finaltext h2{ font-family:var(--display); font-weight:800; font-size:clamp(28px,4.4vw,60px); line-height:1.02; letter-spacing:-.04em; margin:0 0 18px; }
.finaltext p{ color:var(--muted); line-height:1.55; margin:0 0 28px; }
@media (max-width:700px){ .finaltext{ top:10vh; } }

/* Поп-ап */
#modal{ position:fixed; inset:0; z-index:50; display:none; place-items:center; padding:24px; }
#modal.open{ display:grid; }
#modal .veil{ position:absolute; inset:0; background:rgba(2,8,22,.8); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.sheet{ position:relative; isolation:isolate; width:min(980px,100%); max-height:calc(100dvh - 48px); overflow:auto;
  display:grid; grid-template-columns:1.05fr 1fr; gap:44px; align-items:center; padding:44px; }
.sheet-bg{ position:absolute; inset:0; z-index:-1; border-radius:6px; background:linear-gradient(160deg, #0a1f55, #040d27 70%); border:1px solid var(--line); box-shadow:0 40px 120px rgba(0,0,0,.6); }
.media{ position:relative; aspect-ratio:4/5; border-radius:3px; overflow:hidden; border:1px solid var(--line); }
.media.objm{ border:0; overflow:visible; display:grid; place-items:center; background:radial-gradient(circle, rgba(42,98,255,.3), transparent 65%); }
.media.objm canvas{ width:100%; height:100%; cursor:grab; touch-action:none; }
.media.objm canvas:active{ cursor:grabbing; }
.media.objm svg{ width:70%; }
.media.objm .vtb2d{ height:70%; }
.drag{ position:absolute; left:0; right:0; bottom:14px; text-align:center; font-size:12px; color:var(--muted); pointer-events:none; }
.sheet time{ display:block; font-family:var(--display); font-size:14px; color:var(--ice); }
.sheet h3{ font-family:var(--display); font-weight:800; font-size:clamp(24px,3vw,38px); line-height:1.05; letter-spacing:-.03em; margin:10px 0 18px; }
.sheet .desc{ color:var(--muted); line-height:1.6; margin:0 0 26px; max-width:46ch; }
.admark{ font-size:11px; color:rgba(214,228,255,.5); border-top:1px solid var(--line); padding-top:12px; margin-top:22px; line-height:1.5; }
/* в колонке flex отступы не схлопываются: над чертой «Реклама» было 26+22 px */
.mtext.has-ad .desc{ margin-bottom:0; }
.mtext.has-ad .admark{ margin-top:10px; }
.close{ position:absolute; right:14px; top:12px; width:40px; height:40px; font-size:24px; border-radius:50%; z-index:2; transition:background 90ms linear; }
.close:hover, .pn:hover{ background:rgba(169,203,255,.12); }
.pnav{ display:flex; gap:8px; margin-top:26px; }
.pn{ padding:10px 16px; border-radius:30px; border:1px solid var(--line); font-size:13px; transition:background 90ms linear; }
.pn:disabled{ opacity:.3; cursor:default; }
@media (max-width:760px){
  #modal{ padding:0; align-items:end; }
  .sheet{ grid-template-columns:1fr; gap:20px; padding:24px 20px calc(env(safe-area-inset-bottom,0px) + 24px); max-height:92dvh; }
  .sheet-bg{ border-radius:14px 14px 0 0; }
  .media{ aspect-ratio:16/11; }
}

/* ===== UI-кит «Ежедневник болельщика» (Figma): токены, шкала шрифтов, кнопки ===== */
:root{
  --blue:#1650B1;                                   /* Blue-100 */
  --border:rgba(255,255,255,.1);                    /* Colors/Border */
  --r-sm:8px; --r-lg:16px; --r-xl:20px; --r-over:1000px;
  --p1:4px; --p2:8px; --p3:12px; --p4:16px; --p5:20px;
  --blur:10px;
  --wide:"Druk Wide Cyr","Arial Black",sans-serif;
  /* Title/Large: 66 (360) / 140 (1024) / 200 (1440) / 260 (1920) */
  --t-large:66px; --t-middle:44px; --t-small:18px;
}
@media (min-width:1024px){ :root{ --t-large:140px; --t-middle:58px; } }
@media (min-width:1440px){ :root{ --t-large:200px; --t-middle:70px; --t-small:24px; } }
@media (min-width:1920px){ :root{ --t-large:260px; --t-middle:84px; } }

body{ font-size:14px; line-height:1.2; }
/* Title/Large и Title/Middle — Druk Cyr Bold Italic, капс */
#hero h1, .finaltext h2, .sheet h3, #pillarYear{
  font-family:var(--display); font-weight:700; font-style:italic; text-transform:uppercase; letter-spacing:0; }
#hero h1{ font-size:var(--t-large); line-height:normal; max-width:none; }
/* на мобиле имя крупнее шкалы (66): при 90 строка ~250px, влезает и на 320px */
@media (max-width:700px){ #hero h1{ font-size:90px; } }
#pillarYear{ font-size:var(--t-large); line-height:normal; }
.finaltext{ width:min(1100px, calc(100% - 48px)); }
.finaltext h2{ font-size:var(--t-middle); line-height:1; margin:0 0 20px; }
.finaltext p{ max-width:46ch; margin-left:auto; margin-right:auto; }
.finaltext p + p{ margin-top:-16px; }   /* два абзаца финала — ближе друг к другу, чем к кнопке */
/* первый и последний экран: без строк из одного слова. pretty — Chrome 117+, Safari 26+; для старых iOS последние два слова в index.html склеены   */
#hero h1 .sub, #hero p, .finaltext h2, .finaltext p{ text-wrap:pretty; }
.nw{ white-space:nowrap; }   /* заголовки режет SplitText (слова — отдельные блоки,   не держит), поэтому пары слов держим так */
.sheet h3{ font-size:var(--t-middle); line-height:1; margin:12px 0 20px; }
/* Title/Small — Druk Wide Cyr Medium, капс, 120% */
#hero h1 .sub, #eraInner b, .card .yr, .sheet time, .nick{
  font-family:var(--wide); font-weight:500; font-style:normal; text-transform:uppercase; letter-spacing:0; line-height:1.2; }
#hero h1 .sub{ display:block; font-size:var(--t-small); color:var(--ice); margin-top:.2em; }
/* дата к 22.10.2026: на десктопе одной строкой через точку, уже 1024px — двумя строками. После праздника убрать .sub-date и .sub-sep */
@media (max-width:1023px){ #hero h1 .sub-date{ display:block; } #hero h1 .sub-sep{ display:none; } }
@media (max-width:520px){ #hero h1 .sub-date{ font-size:15px; margin-bottom:.25em; } }   /* строка с датой длиннее «интерактивный музей»: при 18px на телефоне рвалась */
#eraInner b{ font-size:14px; }
.card .yr{ font-size:14px; bottom:-26px; }
.sheet time{ font-size:var(--t-small); color:var(--ice); }
.nick{ font-size:var(--t-small); }
/* Text — TT Hoves Regular, 120% */
.mark, .mark small, .proto, .btn, .hint, #hero p, .finaltext p, #eraInner span, .admark, .pn, .drag, .tag{
  font-family:var(--text); font-weight:400; font-size:14px; line-height:1.2; letter-spacing:0; }
.sheet .desc{ font-family:var(--text); font-size:16px; line-height:1.2; }     /* Text/Regular/16 */
/* подпись блока из документа: абзацы через пустую строку; цитата — отдельным блоком с автором */
.sheet .desc{ white-space:pre-line; }
#mBuy.above{ margin:0 0 26px; }
.mquote{ margin:0 0 26px; max-width:46ch; }
.mquote blockquote{ margin:0; padding:2px 0 2px var(--p4); border-left:2px solid rgba(169,203,255,.45); }
.mquote blockquote + blockquote{ margin-top:var(--p5); }
.mquote p{ margin:0; font-family:var(--text); font-size:16px; line-height:1.35; color:var(--white); white-space:pre-line; }
.mquote cite{ display:block; margin-top:var(--p2); font-family:var(--text); font-style:normal; font-size:13px; line-height:1.3; color:var(--muted); }
.mark{ font-weight:600; } .mark small{ font-weight:400; font-size:12px; }

/* Button: 36px, отступы 12/16, таблетка. Primary — белая с синим текстом, Secondary — белый 10% */
.btn{ height:36px; padding:var(--p3) var(--p4); border-radius:var(--r-over); background:#fff; color:var(--blue);
  border:1px solid transparent; background-clip:padding-box; gap:var(--p2); transition:border-color 90ms linear, background-color 90ms linear; }
.btn:hover{ background:#fff; border:2px solid rgba(255,255,255,.8); padding:calc(var(--p3) - 1px) calc(var(--p4) - 1px); transform:none; }
.btn.secondary, .pn{ height:36px; padding:var(--p3) var(--p4); border-radius:var(--r-over); background:rgba(255,255,255,.1); color:#fff; border:1px solid transparent; }
.btn.secondary:hover, .pn:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.8); }
.pn:disabled{ opacity:.35; border-color:transparent; }
/* кнопки фиксированной высоты: вертикальные поля не должны сжимать строку — центрируем флексом, иначе текст проседает вниз */
.btn.secondary, .pn{ display:inline-flex; align-items:center; justify-content:center; padding-top:0; padding-bottom:0; line-height:1; box-sizing:border-box; }
/* Круглые кнопки: 36px, Secondary — белый 10%, наведение — 20% */
#eras .arr, .close{ width:36px; height:36px; border-radius:var(--r-over); background:rgba(255,255,255,.1); display:grid; place-items:center; padding:0; transition:background-color 90ms linear; }
#eras .arr:hover, .close:hover{ background:rgba(255,255,255,.2); }
#eras .arr svg, .close svg{ width:24px; height:24px; }
.close{ top:var(--p4); right:var(--p4); }
/* Стекло: обводка белый 10%, размытие 10 */
#eras{ border:1px solid var(--border); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); padding:var(--p1); }
.proto{ border:1px solid var(--border); border-radius:var(--r-over); padding:var(--p2) var(--p3); color:#fff; }
.sheet-bg{ border-radius:var(--r-xl); border:1px solid var(--border); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); }
.media{ border-radius:var(--r-lg); border:1px solid var(--border); }
.card .thumb{ border-radius:var(--r-sm); border-color:var(--border); }
.card.obj .tag{ background:var(--blue); border-radius:var(--r-over); padding:var(--p1) var(--p2); font-size:12px; }
@media (max-width:760px){ .sheet-bg{ border-radius:var(--r-xl) var(--r-xl) 0 0; } }

/* Поп-ап карточки: один размер для всех. Сетка: фото | текст, под текстом — отдельная строка с кнопками листания
   (кнопки вне прокрутки и стоят на месте). Текст прокручивается без видимой полосы: сверху и снизу он растворяется,
   нижнее затухание подсказывает, что текст продолжается. Заголовок меньше шкалы Title/Middle */
.sheet{ height:min(640px, calc(100dvh - 48px)); max-height:none; overflow:hidden; align-items:stretch; padding:40px;
  grid-template-columns:1.05fr 1fr; grid-template-rows:minmax(0, 1fr) auto; column-gap:40px; row-gap:0; }
.media{ aspect-ratio:auto; height:100%; min-height:0; grid-column:1; grid-row:1 / span 2; }
/* 3D-объект: квадратный холст вписывается в блок и центрируется (в сетке проценты max-height не срабатывали — на мобиле перчатка вылезала на текст) */
.media.objm canvas{ position:absolute; inset:0; margin:auto; width:auto; height:auto; max-width:100%; max-height:100%; }
.mtext{ grid-column:2; grid-row:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column;
  margin-top:-16px; padding:24px 8px 32px 0;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 32px), transparent 100%);
  scrollbar-width:none; }
.mtext::-webkit-scrollbar{ display:none; width:0; height:0; }
.sheet h3{ font-size:clamp(28px, 2.7vw, 40px); line-height:1.02; margin:10px 0 18px; }
.pnav{ grid-column:2; grid-row:2; margin:0; padding-top:12px; }
@media (max-width:760px){
  .sheet{ height:88dvh; grid-template-columns:1fr; grid-template-rows:minmax(0, 34%) minmax(0, 1fr) auto; row-gap:4px; padding:20px 20px 0; }
  .media{ grid-column:1; grid-row:1; }
  .mtext{ grid-column:1; grid-row:2; margin-top:0; padding:16px 0 32px; }   /* без подтяжки вверх: на мобиле над текстом фото, текст наезжал на его край */
  .sheet h3{ font-size:30px; margin:8px 0 14px; }
  .pnav{ grid-column:1; grid-row:3; padding:8px 0 calc(env(safe-area-inset-bottom,0px) + 16px); }
  /* «закрыть» — внутри угла фото с ровными отступами, на стеклянной подложке (раньше висела на краю шторки и выглядела криво) */
  .close{ top:30px; right:30px; background:rgba(4,13,39,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .close:hover{ background:rgba(4,13,39,.7); }
}

/* Фото карточек (временные, из документа). Превью — кадр обрезается под карточку со смещением вверх, к лицам.
   Поп-ап — фото целиком, а поля вокруг заполняет тот же кадр, размытый и затемнённый: контейнер один, пропорции у фото любые */
.ph.has-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.media .photo{ position:absolute; inset:0; overflow:hidden; background:#030b22; }
.media .pbg{ position:absolute; left:-10%; top:-10%; width:120%; height:120%; object-fit:cover; filter:blur(24px) brightness(.45) saturate(.8); }
.media .pfg{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

/* Арт-дирекшн фото: дуотон в палитре сайта — снимки в ч/б, тени уходят в синий «Динамо», света — в ледяной голубой.
   Цветные и архивные кадры читаются одной серией. Делается стилями, поэтому любые новые фото (в т.ч. генеративные) получат тот же вид.
   Интенсивность: --duo-dark (насколько подняты тени) и --duo-light (оттенок светов) */
:root{ --duo-dark:#071a4e; --duo-light:#b4cfff; }
.media .photo{ isolation:isolate; }
/* Safari не обрезает скруглением .media слои с mix-blend-mode и фильтрами — в углах торчало фото. Режем сам слой фото
   (радиус рамки минус 1px канта) */
.media .photo{ border-radius:inherit; clip-path:inset(0 round calc(var(--r-lg) - 1px)); }
.media .photo img{ filter:grayscale(1) contrast(1.12); }
.media .photo .pbg{ filter:grayscale(1) blur(24px) brightness(.45); }
.media .photo::before, .media .photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; }
.media .photo::before{ background:var(--duo-dark); mix-blend-mode:lighten; }    /* чёрное становится тёмно-синим */
.media .photo::after{ background:var(--duo-light); mix-blend-mode:multiply; }    /* белое становится голубым */

/* Листалка фото в поп-апе (несколько фото в блоке): стрелки по бокам кадра и точки внизу, свайп — в main.js */
.media .gal{ position:absolute; top:50%; z-index:3; width:40px; height:40px; margin-top:-20px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:rgba(4,13,39,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background 90ms linear; }
.media .gal:hover{ background:rgba(4,13,39,.75); }
.media .gal svg{ width:20px; height:20px; }
.media .gal.prev{ left:12px; } .media .gal.prev svg{ transform:scaleX(-1); }
.media .gal.next{ right:12px; }
.media .gdots{ position:absolute; left:0; right:0; bottom:12px; z-index:3; display:flex; justify-content:center; gap:4px; }
.media .gdots button{ width:24px; height:24px; display:grid; place-items:center; }
.media .gdots button::after{ content:""; width:7px; height:7px; border-radius:50%; background:rgba(214,232,255,.4); transition:background .2s, transform .2s; }
.media .gdots button.on::after{ background:#fff; transform:scale(1.15); }
.media:has(.gal){ touch-action:pan-y; }

/* Превью — «светящаяся стеклянная пластина» (по референсу, в ледяном голубом сайта):
   крупное скругление ~17% ширины; матовые края — чёткий кадр растворяется к краям в размытую копию того же кадра
   (без backdrop-filter: на 30 крутящихся карточках он тормозил бы iPhone); толстая световая полоса по внутренней кромке.
   Сила света --glow: спокойная карточка < ключевая дата < наведение / фокус */
.card .thumb{ border-radius:calc(var(--cw) * var(--k) * .17); }
/* дуотон превью — цепочкой фильтров, без наложений с mix-blend-mode: рядом с маской Chrome смешивал их не с тем фоном
   (у кадра Евро-60 проступал бордовый). Тени уходят в синий через прозрачность кадра над тёмно-синим фоном */
.ph.has-img{ background:#061640; }
.ph.has-img img{ filter:grayscale(1) contrast(1.2) sepia(1) hue-rotate(182deg) saturate(1.8) brightness(.74); opacity:.9; }
.ph.has-img .tbg{ filter:grayscale(1) sepia(1) hue-rotate(182deg) saturate(1.8) blur(9px) brightness(.5); transform:scale(1.12); }
/* маска — на обёртке, фильтр — на картинке: вместе на одном элементе Chrome иногда теряет фильтр (проступал цвет) */
.ph.has-img .tfw{ position:absolute; inset:0; -webkit-mask-image:radial-gradient(ellipse 62% 66% at 50% 44%, #000 52%, transparent 100%);
  mask-image:radial-gradient(ellipse 62% 66% at 50% 44%, #000 52%, transparent 100%); }
.card:not(.obj) .thumb::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
  --glow:.6;
  box-shadow:inset 0 0 0 1.5px rgba(214,232,255,calc(var(--glow) * .95)),     /* кромка стекла */
             inset 0 0 10px 3px rgba(169,203,255,calc(var(--glow) * .9)),     /* яркий свет у края */
             inset 0 0 26px 9px rgba(84,140,255,calc(var(--glow) * .75)),     /* световая полоса */
             inset 0 0 60px 14px rgba(42,98,255,calc(var(--glow) * .45));     /* ореол, уходящий внутрь */
  transition:box-shadow .45s var(--ease); }
.card.star .thumb::before{ --glow:.85; }
.card:hover .thumb::before, .card:focus-visible .thumb::before, .card.lit .thumb::before{ --glow:1.15; }
.card:not(.obj) .thumb{ border-color:transparent; }                        /* кант рисует световой слой */
/* Safari не обрезает скруглением .thumb (overflow:hidden) слои с фильтрами внутри 3D-карточки — торчали углы фото.
   Кадр режем ещё и сам по себе: clip-path со скруглением на .ph (минус 1px прозрачного канта), вспышку — скруглением */
.card:not(.obj) .ph{ border-radius:inherit; clip-path:inset(0 round calc(var(--cw) * var(--k) * .17 - 1px)); }
.card .thumb::after{ border-radius:inherit; }

/* Шапка: слева эмблема «Динамо», справа логотип ВТБ (вместо текстовой подписи «Музей Льва Яшина / Динамо × ВТБ») */
#top .logo{ display:block; width:auto; }
#top .logo-dynamo{ height:48px; }
#top .logo-vtb{ height:22px; }
@media (max-width:700px){ #top .logo-dynamo{ height:38px; } #top .logo-vtb{ height:18px; } }

/* Листалка залов на мобиле — на всю ширину, название зала в одну строку (раньше переносилось и раздувало плашку) */
@media (max-width:700px){
  #eras{ left:16px; right:16px; transform:none; justify-content:space-between; }
  #eraLabel{ flex:1; min-width:0; }
  #eraInner b{ white-space:nowrap; font-size:min(14px, 3.6vw); }
}

/* Стабильная высота на телефоне (значения задаёт JS в layout): слои сцены — высотой композиции (видимая область
   при показанных панелях браузера), фон — полной высотой; от показа/скрытия панелей ничего не прыгает */
.fixed{ bottom:auto; height:var(--vh-lay, 100vh); }
#bg{ height:var(--vh-full, 100vh); }
/* слой карточек — тоже на полную высоту (иначе при скрытых панелях нижние карточки обрезались ровной линией),
   а центр спирали и точка перспективы — по-прежнему в центре композиции */
#stage{ height:var(--vh-full, 100vh); perspective-origin:50% calc(var(--vh-lay, 100vh) / 2); }
#scene{ top:calc(var(--vh-lay, 100vh) / 2); }
/* двойной тап не увеличивает страницу */
html{ touch-action:manipulation; }

/* запасной вариант книги без WebGL — фото обложки */
.book2d{ width:62%; border-radius:3px; box-shadow:0 18px 40px rgba(0,0,0,.5); }

/* ===== Прелоадер «Свет собирается»: 0 → 97 (лет) по реальной загрузке =====
   --pl (0…1) задаёт скрипт в index.html: уровень заливки цифры светом и длину луча */
html.pl-lock, html.pl-lock body{ overflow:hidden; }
#preloader{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; overflow:hidden; pointer-events:none; }
/* фон — отдельным слоем, такой же, как у сайта: когда готова 3D-сцена, он гаснет и сквозь прелоадер виден WebGL-луч */
.pl-bg{ position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(11,44,128,.5), transparent 70%),
    radial-gradient(ellipse 120% 60% at 50% 120%, rgba(42,98,255,.16), transparent 60%),
    var(--ink); }
/* фон едва заметно «дышит» */
.pl-bg::before{ content:""; position:absolute; left:50%; top:50%; width:90vmin; height:90vmin; margin:-45vmin 0 0 -45vmin; border-radius:50%;
  background:radial-gradient(circle, rgba(42,98,255,.22), transparent 62%); animation:pl-breathe 3.2s ease-in-out infinite; }
@keyframes pl-breathe{ 0%,100%{ transform:scale(.92); opacity:.7; } 50%{ transform:scale(1.06); opacity:1; } }
/* луч растёт вместе с загрузкой */
.pl-beam{ position:absolute; left:50%; top:50%; width:2px; margin-left:-1px; height:calc(6vh + var(--pl, 0) * 70vh); transform:translateY(-50%);
  background:linear-gradient(to bottom, transparent, var(--ice) 18%, #fff 50%, var(--ice) 82%, transparent);
  box-shadow:0 0 18px 4px rgba(120,170,255,.5), 0 0 90px 30px rgba(42,98,255,.22); opacity:calc(.35 + var(--pl, 0) * .65); }
/* цифра: контур + заливка светом снизу вверх; поля — чтобы курсив не обрезался (как у имени на первом экране) */
.pl-num{ position:relative; font-family:var(--display); font-style:italic; font-weight:700; line-height:1; letter-spacing:0;
  font-size:clamp(150px, 38vw, 400px); font-variant-numeric:tabular-nums; }
.pl-out, .pl-fill{ display:block; padding:.06em .16em .02em .06em; }
.pl-out{ color:transparent; -webkit-text-stroke:1.5px rgba(169,203,255,.45); }
/* заливка — градиентом по буквам (background-clip:text) с мягким краем «уровня света», без clip-path:
   слой с clip-path в Safari перекрывал луч за цифрой тёмным прямоугольником. Свечение — только у залитой части */
.pl-fill{ position:absolute; inset:0; color:transparent; -webkit-text-fill-color:transparent;
  background:linear-gradient(to top, #eef4ff calc(var(--pl, 0) * 100% - 1.5%), rgba(238,244,255,0) calc(var(--pl, 0) * 100% + 1.5%));
  -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 18px rgba(120,170,255,.65)); }
.pl-year{ position:absolute; left:0; right:0; top:calc(50% + clamp(92px, 22vw, 225px)); text-align:center;
  font-family:var(--wide); font-weight:500; font-size:14px; letter-spacing:.3em; color:var(--ice); opacity:.75; font-variant-numeric:tabular-nums; }
@media (prefers-reduced-motion: reduce){ .pl-bg::before{ animation:none; } }

/* Первый экран: плоскость текста в перспективе. Слои на разной глубине дают параллакс при наклоне
   (свойство translate, а не transform: transform у абзаца и кнопки занят анимацией появления) */
.hero-tilt{ display:grid; justify-items:center; }
@media (hover:hover) and (pointer:fine){      /* только для мыши: на телефонах наклона нет, глубина только увеличила бы заголовок */
  #hero{ perspective:1100px; }
  .hero-tilt{ transform-style:preserve-3d; }   /* без will-change: иначе наклонённый текст растрируется один раз и мылится */
  .hero-tilt h1{ translate:0 0 70px; }
  .hero-tilt .cta{ translate:0 0 40px; }
  .hero-tilt p{ translate:0 0 25px; }
  .hero-tilt .hint{ translate:0 0 10px; }
}

/* Первый экран: мелкий текст — цветом подзаголовка; тень глубоко-синяя, в тон фона (не чёрная) — отделяет буквы от луча */
#hero p, #hero .hint{ color:var(--ice); text-shadow:0 0 3px rgba(4,14,40,1), 0 0 7px rgba(6,21,54,1), 0 0 14px rgba(8,30,90,.95), 0 0 24px rgba(11,44,128,.85), 0 0 40px rgba(11,44,128,.6); }
#hero .hint{ opacity:.7; }                    /* подсказка — на ступень тише абзаца */

@media (max-width:700px){ #hero h1 .sub{ font-size:min(var(--t-small), 3.85vw); } }   /* телефон: подзаголовок ровно в две строки («Интерактивный музей, / посвящённый вратарю №1»), на 390 — 15px */