/* © 2026 NAAVGUST · naavgust.ru — стили сайта. Все права защищены. */

  /* шрифты: IBM Plex Sans + IBM Plex Mono (лицензия SIL OFL, файлы в папке fonts) */
@font-face { font-family:'IBM Plex Sans'; font-style:normal; font-weight:200; font-display:swap;
  src:url(../fonts/ibm-plex-sans-latin-200-normal.woff2) format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/ibm-plex-mono-latin-400-normal.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; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(../fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
:root { --glow: 255,80,220; --glow2: 120,90,255; --hud: 255,150,235;
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:#03030a; color:#f0eaff; overflow:hidden; overscroll-behavior:none;
  font-family: var(--mono); }
canvas { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.scan { position:fixed; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px); }   /* без mix-blend-mode: в Chrome он пересчитывает весь экран каждый кадр */
.vign { position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 50%, transparent 42%, rgba(0,0,0,.78) 100%); }

.ui { position:fixed; left:0; right:0; top:11vh; text-align:center; pointer-events:none; padding:0 24px; }
/* название: тонкие неоновые «трубки» (5) */
h1 { margin:0; font-family: var(--sans); font-size:clamp(30px,6.4vw,92px); font-weight:200; letter-spacing:.24em; line-height:1;
  white-space:nowrap; pointer-events:auto; cursor:default; animation: on 2.2s steps(1) both;
  display:inline-block; position:relative; }
.ttl { display:inline-block; margin-right:-.24em; color:#fff;
  text-shadow: 0 0 6px rgba(var(--glow),.95), 0 0 18px rgba(var(--glow),.55), 0 0 42px rgba(var(--glow2),.45);
  transition: color .4s, text-shadow 2s; }
h1:hover .ttl { color:rgb(var(--glow)); }
.ttl .ch { display:inline-block; text-align:center; }
.ttl .ch.flip { transform: scaleY(-1); transform-origin: 50% var(--fo, 50%); } /* «Λ» = перевёрнутая «V» */
.sub { margin-top:18px; font-family: var(--mono); font-size:12px;
  letter-spacing:.5em; text-transform:uppercase; color:rgba(240,234,255,.78); animation: up 1.4s .8s both;
  display:table; margin-left:auto; margin-right:auto; padding:6px 0 6px .5em; pointer-events:auto; cursor:default; transition: color .3s; }
.sub:hover { color:rgba(var(--glow),.95); }

.hud { position:fixed; font-family: var(--mono); font-size:11px; letter-spacing:.18em;
  color:rgba(var(--hud),.9); text-transform:uppercase; animation: up 1.4s 1.2s both; transition: color 2s; }
.tl { left:28px; top:24px; } .tr { right:28px; top:24px; text-align:right; }
.bl { left:28px; bottom:24px; } .br { right:28px; bottom:24px; }
.cr { left:28px; bottom:46px; font-size:9px; letter-spacing:.25em; color:rgba(240,234,255,.55); }
.bc { left:50%; bottom:24px; transform:translateX(-50%); animation-name: upc; }
@keyframes upc { from { opacity:0; transform:translate(-50%,14px) } to { opacity:1; transform:translate(-50%,0) } }

/* 13: кнопка звука */
.ctrls { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.ctl { background:none; border:0; padding:5px 0; cursor:pointer; display:flex; align-items:center; gap:10px; font:inherit;
  letter-spacing:inherit; text-transform:inherit; color:inherit; -webkit-tap-highlight-color: transparent; }
.ctl:hover { color:rgba(var(--glow),1); }
.ctl:focus-visible { outline:1px solid rgba(var(--glow),.8); outline-offset:6px; }
/* ползунок громкости */
.snd-wrap { display:flex; align-items:center; gap:14px; }
#vol { -webkit-appearance:none; appearance:none; width:72px; height:14px; background:transparent; cursor:pointer; margin:0; color:inherit;
  opacity:.75; transition: opacity .35s, visibility .35s, transform .35s; }
.snd-wrap.muted #vol { opacity:0; visibility:hidden; transform:translateX(8px); pointer-events:none; }
#vol:hover, #vol:focus-visible { opacity:1; outline:none; }
#vol::-webkit-slider-runnable-track { height:2px; border-radius:1px;
  background: linear-gradient(90deg, currentColor var(--p,35%), rgba(255,255,255,.18) var(--p,35%)); }
#vol::-moz-range-track { height:2px; border-radius:1px; background:rgba(255,255,255,.18); }
#vol::-moz-range-progress { height:2px; background:currentColor; }
#vol::-webkit-slider-thumb { -webkit-appearance:none; width:9px; height:9px; margin-top:-3.5px; border-radius:50%;
  background:currentColor; box-shadow:0 0 6px currentColor; border:0; }
#vol::-moz-range-thumb { width:9px; height:9px; border-radius:50%; background:currentColor; box-shadow:0 0 6px currentColor; border:0; }
/* тумблер «в этот день» */
.sw { position:relative; width:22px; height:12px; border:1px solid currentColor; border-radius:7px; box-sizing:border-box;
  transition: background .3s; }
.sw i { position:absolute; top:2px; left:2px; width:6px; height:6px; border-radius:50%; background:currentColor;
  transition: transform .3s cubic-bezier(.3,.7,.3,1); }
#factBtn.on .sw { background:rgba(var(--glow),.25); }
#factBtn.on .sw i { transform:translateX(10px); box-shadow:0 0 6px rgba(var(--glow),1); }
.bars { display:flex; align-items:flex-end; gap:2px; height:11px; }
.bars i { width:2px; height:3px; background:currentColor; transition:height .3s; }
#snd.live .bars i { animation: eq 1s ease-in-out infinite; }
#snd.live .bars i:nth-child(2){ animation-delay:-.3s } #snd.live .bars i:nth-child(3){ animation-delay:-.6s } #snd.live .bars i:nth-child(4){ animation-delay:-.15s }

/* 6: строка дня */
.fact { position:fixed; left:50%; bottom:64px; transform:translateX(-50%); width:min(62ch, calc(100vw - 460px));
  text-align:center; font-family: var(--mono); font-size:12px; line-height:1.6;
  letter-spacing:.04em; color:rgba(240,234,255,.85); pointer-events:auto; cursor:pointer;
  -webkit-tap-highlight-color: transparent; outline:none;
  transition: color .3s, opacity .5s, transform .5s, visibility .5s;
  text-shadow: 0 0 6px #03030a, 0 0 14px #03030a; }
@media (max-aspect-ratio: 3/4) { .ui { top:19vh; } }
/* на узком экране ползунок стоит над кнопкой звука и крупнее — под палец */
@media (max-width: 560px) {
  .snd-wrap { flex-direction: column; align-items: flex-end; gap: 4px; }
  #vol { width: 96px; height: 28px; }
  #vol::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -6px; }
  #vol::-moz-range-thumb { width: 14px; height: 14px; }
  .snd-wrap.muted #vol { transform: translateY(6px); }
}
@media (max-width: 560px) { h1 { font-size:10.5vw; letter-spacing:.18em; } .ttl { margin-right:-.18em; } .sub { margin-top:14px; } }
.fact:hover, .fact:focus-visible { color:#fff; }
.fact.off { opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,10px); }
.fact .lbl { color:rgba(var(--hud),.95); text-transform:uppercase; letter-spacing:.2em; margin-right:.8em; transition: color 2s; }
.fact .cur { display:inline-block; width:.55em; height:1.05em; vertical-align:-.18em; margin-left:2px;
  background:rgba(var(--glow),.8); animation: blink 1s steps(1) infinite; }

@keyframes on { 0%{opacity:0} 8%{opacity:1} 11%{opacity:.1} 15%{opacity:1} 19%{opacity:.3} 23%,100%{opacity:1} }
@keyframes up { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes blink { 50% { opacity:0 } }
@keyframes eq { 0%,100%{ height:3px } 50%{ height:11px } }

@media (max-width: 860px) {
  .fact { width:calc(100vw - 48px); bottom:96px; font-size:11px; }
  .bc { bottom:58px; }
  .tl,.bl { left:20px } .tr,.br { right:20px }
}
/* 16: уважение к системной настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
  h1, .sub, .hud { animation: none !important; }
  .fact { transition: none; }
  .fact .cur, #snd.live .bars i { animation: none !important; }
}
/* второй уровень: Солнечная система */
.ui, .hud, .fact, .bc { transition: opacity .6s, visibility .6s; }
body.space-leave .ui, body.space-leave .hud:not(.br), body.space-leave .fact,
body.space-on .ui, body.space-on .hud:not(.br), body.space-on .fact { opacity:0 !important; visibility:hidden !important; pointer-events:none !important; }
#spaceUI { position:fixed; inset:0; pointer-events:none; opacity:0; visibility:hidden; transition: opacity .8s, visibility .8s;
  font-family: var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(var(--hud),.9); }
#spaceUI.show { opacity:1; visibility:visible; }
#spaceUI .sp { position:fixed; }
#backBtn { pointer-events:auto; left:28px; top:22px; background:none; border:0; font:inherit; letter-spacing:inherit; text-transform:inherit;
  color:inherit; cursor:pointer; padding:6px 0; }
#backBtn:hover { color:rgba(var(--glow),1); }
#spTitle { right:28px; top:28px; text-align:right; }
#spNote { left:28px; bottom:24px; color:rgba(240,234,255,.62); line-height:1.8; }
/* шкала времени */
#timeline { left:50%; bottom:22px; transform:translateX(-50%); width:min(400px, calc(100vw - 40px)); pointer-events:auto; text-align:center; }
#timeline .tl-row { display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:6px; color:rgba(240,234,255,.85); }
#tlToday { background:none; border:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:rgba(var(--hud),.95); cursor:pointer;
  padding:2px 0; opacity:0; visibility:hidden; transition: opacity .3s; }
#tlToday.show { opacity:1; visibility:visible; }
#tl { -webkit-appearance:none; appearance:none; width:100%; height:16px; background:transparent; margin:0; cursor:pointer; color:rgb(var(--glow)); }
#tl::-webkit-slider-runnable-track { height:1px; background:rgba(var(--glow),.45); }
#tl::-moz-range-track { height:1px; background:rgba(var(--glow),.45); }
#tl::-webkit-slider-thumb { -webkit-appearance:none; width:11px; height:11px; margin-top:-5px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
#tl::-moz-range-thumb { width:11px; height:11px; border:0; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; }
#tlEvent { min-height:14px; margin-bottom:6px; font-size:10px; color:rgba(255,214,140,.9); }
#timeline .tl-ends { display:flex; justify-content:space-between; margin-top:4px; font-size:9px; color:rgba(240,234,255,.6); }
@media (max-width: 560px) {
  #spNote { display:none; } #backBtn { left:20px; } #spTitle { right:20px; }
  #timeline { bottom:92px; }
}
@media (max-width: 1100px) and (min-width: 561px) { #spNote { display:none; } }
/* карточка планеты */
#tip { position:fixed; left:0; top:0; z-index:5; pointer-events:none; opacity:0; transition: opacity .2s;
  width:340px; max-width:calc(100vw - 24px); padding:12px 14px 13px; background:rgba(4,4,14,.9);
  border:1px solid rgba(var(--glow),.35); box-shadow:0 0 24px rgba(var(--glow),.15);
  font-family: var(--mono); font-size:11px; line-height:1.55; color:rgba(240,234,255,.82); }
#tip.show { opacity:1; }
#tip .th { color:rgb(var(--hud)); letter-spacing:.2em; margin-bottom:8px; }
#tip .tr { display:flex; justify-content:space-between; gap:14px; }
#tip .tr span { color:rgba(240,234,255,.66); white-space:nowrap; }
#tip .tr b { font-weight:400; text-align:right; white-space:nowrap; }
#tip .tf { margin-top:8px; padding-top:8px; border-top:1px solid rgba(var(--glow),.2); color:rgba(240,234,255,.75); }
#tip .tk { margin-top:6px; color:rgba(111,227,255,.85); }