/* ============================================================
   SHVETSOV STUDIO — ГЛАВНАЯ «УЛИЦА РУЧНОЙ РАБОТЫ»
   glavnaya.css — подключается только на главной.
   Сцена: небо #252B38→#3A3F4A · контур #14161B · асфальт #33363C
   тротуар #4A4640 · свет окон #F5C96B · эмаль табличек #274A78
   ============================================================ */

* { margin:0; padding:0; box-sizing:border-box; }

html { background:#252B38; overflow-x:hidden; overflow-x:clip; }

body {
  background:#252B38;
  color:#E8E2D4;
  font-family:'Geologica', system-ui, sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

.sr-only {
  position:absolute; width:1px; height:1px; margin:-1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

/* --- небо: единственный градиент, неподвижный --- */
.sky { position:fixed; inset:0; z-index:0;
  background:linear-gradient(#252B38 0%, #2A303C 52%, #3A3F4A 100%); }
.sky svg { width:100%; height:100%; display:block; }

/* --- улица --- */
header.seg, main, footer.seg { position:relative; z-index:1; }
.seg { position:relative; width:min(100vw, 165vh); margin-left:auto; }
.seg svg.scene { display:block; width:100%; height:auto; overflow:visible; }

/* служебная строка въезда */
.street-line {
  position:absolute; top:16px; left:50%; transform:translateX(-50%);
  z-index:2; white-space:nowrap; text-align:center;
  font-feature-settings:'tnum';
}
.street-line b {
  display:block; font-size:13.5px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:#D3D8E2;
}
.street-line span {
  display:block; margin-top:6px;
  font-size:11px; font-weight:300; letter-spacing:.18em;
  text-transform:uppercase; color:#8B93A3;
}

/* табличка-легенда: как читать улицу */
.legend-plate {
  position:absolute; z-index:2; left:9%; top:61%; width:23%;
  background:#E8E2D4; border:2px solid #14161B; color:#3A362E;
  padding:.8em .9em .7em; font-size:clamp(10px, .95vw, 13px);
  font-weight:300; line-height:1.55; text-decoration:none;
  transform:rotate(-1deg);
}
.legend-plate::before {
  content:""; position:absolute; top:6px; left:50%;
  width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background:#14161B;
}
.legend-plate i {
  display:block; font-style:normal; font-weight:700;
  font-size:.82em; letter-spacing:.16em; text-transform:uppercase;
  color:#1C1914; margin:4px 0 7px;
}
.legend-plate u {
  display:block; margin-top:8px; padding-top:7px;
  border-top:1px solid rgba(20,22,27,.25);
  text-decoration:none; font-weight:700; font-size:.9em;
  letter-spacing:.12em; text-transform:uppercase; color:#8C5A18;
}
.legend-plate:hover { background:#F0EADB; }
.legend-plate:hover u { color:#B4761F; }

/* --- экспликационные таблички (эмаль) --- */
.plaque {
  position:absolute; z-index:2;
  width:clamp(172px, 15vw, 216px);
  background:#274A78;
  border:2px solid #14161B;
  padding:9px 12px 9px;
  color:#F2EFE7;
}
.plaque::before {
  content:''; position:absolute; inset:3px;
  border:1px solid rgba(233,229,218,.55); pointer-events:none;
}
.plaque--chip::after {
  content:''; position:absolute; right:-2px; top:-2px;
  width:15px; height:12px; background:#252B38;
  border-left:2px solid #14161B; border-bottom:2px solid #14161B;
}
.plaque h2 { font-size:16px; font-weight:700; letter-spacing:.04em; line-height:1.1; }
.pl-no {
  display:block; font-size:10px; font-weight:300; letter-spacing:.2em;
  text-transform:uppercase; opacity:.75; font-feature-settings:'tnum';
  margin-bottom:3px;
}
.pl-what { font-size:12.5px; font-weight:300; margin-top:4px; line-height:1.3; }
.pl-note { font-size:11.5px; font-weight:300; opacity:.72; margin-top:2px; line-height:1.3; }
.pl-go {
  display:block; margin-top:8px; padding-top:7px;
  border-top:1px solid rgba(233,229,218,.3);
  font-size:12px; font-weight:700; letter-spacing:.16em;
  color:#F5C96B; text-decoration:none;
}
.pl-go:hover { color:#FFDD8F; }
.pl-want {
  display:block; margin-top:6px;
  font-size:10.5px; font-weight:500; letter-spacing:.06em;
  color:#E9C87E; text-decoration:none; opacity:.9;
}
.pl-want:hover { color:#FFDD8F; text-decoration:underline; text-underline-offset:3px; }

/* --- билборд --- */
.bb-note {
  position:absolute; z-index:2; left:13.5%; top:42%; width:41%;
  text-align:center; text-decoration:none;
  color:#3A362E; font-size:clamp(9px, 1.05vw, 13.5px); font-weight:300; line-height:1.5;
}
.bb-note b { font-weight:700; color:#1C1914; letter-spacing:.03em; }
.bb-note:hover b { text-decoration:underline; text-underline-offset:3px; }

/* --- окно студии в брандмауэре --- */
.studio-plate {
  position:absolute; z-index:2; left:44%; top:45%; width:19%;
  background:#E8E2D4; border:1.5px solid #14161B; color:#1C1914;
  padding:.55em .7em; font-size:clamp(9px, .95vw, 12.5px);
  font-weight:300; line-height:1.5; text-decoration:none;
  transform:rotate(-1.2deg);
}
.studio-plate b { font-weight:700; letter-spacing:.06em; }
.studio-plate::after {
  content:""; position:absolute; right:-8.5%; top:38%;
  width:8.5%; height:1.5px; background:#14161B;
}
.studio-plate:hover { background:#F0EADB; }

/* --- прислонённая табличка у ящика --- */
.lean-plate {
  position:absolute; z-index:2; left:29%; top:72%; width:24%;
  background:#E8E2D4; border:1.5px solid #14161B; color:#1C1914;
  padding:.6em .7em; font-size:clamp(9px, .95vw, 12.5px);
  font-weight:300; line-height:1.5; text-decoration:none;
  transform:rotate(2.2deg); transform-origin:bottom right;
}
.lean-plate:hover { background:#F0EADB; }
.lean-plate::before, .lean-plate::after,
.postplate::before, .postplate::after {
  content:""; position:absolute; bottom:-13px; width:4px; height:13px;
  background:#3C4046; border:1px solid #14161B; border-top:none;
}
.lean-plate::before, .postplate::before { left:16%; }
.lean-plate::after, .postplate::after { right:16%; }

/* --- паспорта объектов на стройзаборе --- */
.passport {
  position:absolute; z-index:2; width:13.2%; min-height:17.5em;
  background:#E9E5DA; border:2px solid #14161B;
  color:#1C1914; padding:.55em .7em .5em;
  font-size:clamp(8px, .93vw, 12px); line-height:1.35; font-weight:300;
}
.passport h3 { font-size:1.05em; font-weight:700; letter-spacing:.05em; margin-bottom:.25em; }
.passport .pp-b { margin-top:.4em; font-weight:500; }
.passport .pp-s { margin-top:.35em; font-size:.82em; color:#6E6456; }

/* --- мемориальная доска --- */
.memorial {
  position:absolute; z-index:2; text-align:center;
  color:#EFE9DC; font-weight:300;
  font-size:clamp(8.5px, .95vw, 12.5px); line-height:1.5;
  padding:.4em .5em; pointer-events:none;
}
.memorial b { font-weight:700; letter-spacing:.06em; }

/* --- доска объявлений управы --- */
.sheet {
  position:absolute; z-index:2; width:11.6%;
  background:#E8E2D4; border:1.5px solid #14161B;
  color:#1C1914; padding:.5em .6em .3em;
  font-size:clamp(7.5px, .82vw, 11px); line-height:1.3; font-weight:300;
}
.sheet h3 { font-size:1.05em; font-weight:700; letter-spacing:.04em; margin-bottom:.2em; }
.sheet::before {
  content:''; position:absolute; top:-4px; left:50%; margin-left:-2px;
  width:4px; height:4px; border-radius:50%; background:#14161B;
}
.tabs { display:flex; gap:2px; margin-top:.45em; }
.tab {
  flex:1; border:1px solid #14161B; border-top:1px dashed #14161B;
  font-size:.72em; text-align:center; padding:.15em 0 .1em;
  background:#E8E2D4; transition:transform .2s ease;
  transform-origin:top center;
}
.sheet:hover .tab:nth-child(2) { transform:rotate(6deg); }
.sheet--hand {
  transform:rotate(-3deg); width:14%;
  font-size:clamp(7.5px, .85vw, 11.5px);
  background:#EFE9D8; padding-bottom:.6em;
}
/* --- почтовый ящик --- */
address { font-style:normal; }

/* --- табличка у почтового ящика --- */
.postplate {
  position:absolute; z-index:2; width:17.5%;
  background:#E9E5DA; border:2px solid #14161B; color:#1C1914;
  padding:.6em .8em; font-size:clamp(9px, .95vw, 13px);
  font-weight:300; line-height:1.45;
}
.postplate .pp-tg { display:block; margin-top:.35em; font-size:.9em; }
.postplate a { color:#1C1914; font-weight:500; }

/* --- колофон --- */
.colophon {
  position:relative; z-index:2; text-align:center;
  padding:10px 16px 46px;
  font-size:12px; font-weight:300; letter-spacing:.18em;
  text-transform:uppercase; font-feature-settings:'tnum'; color:#8B93A3;
}
.colophon a { color:#B8BFCB; text-decoration:underline; text-underline-offset:3px; }
.colophon a:hover { color:#F5C96B; }

/* ============ анимации ============ */

/* 1. окна зажигаются по очереди, когда дом замечает гостя */
html.js .w { opacity:0; }
html.js .seg.lit .w {
  opacity:1;
  transition:opacity .12s linear;
  transition-delay:var(--d, 0ms);
}

/* 2. мигающая «О» стоматологии */
#blink-o { animation:oblink 3.7s steps(1, end) infinite; }
@keyframes oblink { 0% {opacity:1;} 94.6% {opacity:0;} 100% {opacity:1;} }

/* 3. двери приоткрываются */

.door {
  transform-box:fill-box; transform-origin:left 80%;
  transition:transform .25s ease;
}
.seg:is(:hover, :focus-within) .door { transform:rotate(-13deg); }
.wedge {
  opacity:0; transform:scaleX(.25);
  transform-box:fill-box; transform-origin:top center;
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.seg:is(:hover, :focus-within) .wedge { opacity:1; transform:none; }
#bulb-kreit { opacity:0; transition:opacity .2s ease; }
.seg-kreit:is(:hover, :focus-within) #bulb-kreit { opacity:1; }
#ukazatel { transform-box:view-box; }
.seg-protoka:is(:hover, :focus-within) #ukazatel { animation:sway .9s ease-in-out 1; }
@keyframes sway { 0%{transform:rotate(0);} 35%{transform:rotate(1.5deg);} 70%{transform:rotate(-.7deg);} 100%{transform:rotate(0);} }
#crane-jib { transition:transform .8s ease; }
.seg-stroyka:is(:hover, :focus-within) #crane-jib { transform:rotate(4deg); }

/* 4. конверт уходит в щель */
#env { transition:transform .4s ease; }
.seg-post:is(:hover, :focus-within) #env { transform:translateY(48px); }

/* 5. три звезды мерцают */
.tw1 { animation:tw 4s ease-in-out infinite; }
.tw2 { animation:tw 5.3s ease-in-out infinite; }
.tw3 { animation:tw 6.1s ease-in-out infinite; }
@keyframes tw { 0%,100% {opacity:.4;} 50% {opacity:1;} }

/* --- клавиатура --- */
a:focus-visible, svg a:focus-visible {
  outline:2px solid #F5C96B; outline-offset:3px;
}
.pl-go:focus-visible { outline-offset:5px; }

/* --- prefers-reduced-motion: всё горит, ничего не движется --- */
@media (prefers-reduced-motion: reduce) {
  html.js .w { opacity:1 !important; transition:none !important; }
  #blink-o, .tw1, .tw2, .tw3 { animation:none !important; }
  .door, #crane-jib, #env, .tab, .wedge, #bulb-kreit { transition:none !important; }
  .seg:is(:hover, :focus-within) .door,
  .seg-stroyka:is(:hover, :focus-within) #crane-jib { transform:none; }
  .seg:is(:hover, :focus-within) .wedge { opacity:0; }
  .seg-protoka:is(:hover, :focus-within) #ukazatel { animation:none; }
  .seg-post:is(:hover, :focus-within) #env { transform:none; }
  .sheet:hover .tab:nth-child(2) { transform:none; }
}

/* --- планшеты: кадр ближе к домам --- */
@media (min-width: 760px) and (max-width: 1099px) {
  .seg { width:114vw; margin-left:0; margin-right:-14vw; }
  .street-line, .colophon { width:100vw; }
  .plaque { width:clamp(180px, 24vw, 240px); }
  .passport { font-size:clamp(9px, 1.25vw, 12px); }
  .seg-stroyka .ad-paper { display:none; }
  .postplate { width:23%; }
  .legend-plate { width:26%; }
}

/* --- мобильный: та же улица, кадр ближе к домам ---
   ширины сцен задаются по-сегментно в mobile-fixes.css (svg.scene) */
@media (max-width: 759px) {
  .seg { width:100vw; margin-left:0; margin-right:0; }
  .colophon, .street-line { width:100vw; }
  .street-line { left:0; transform:none; text-align:center; top:12px; }
  .street-line b { font-size:11px; letter-spacing:.18em; }
  .street-line span { font-size:9px; letter-spacing:.12em; margin-top:4px; white-space:normal; }
  .plaque { width:min(60vw, 250px); padding:8px 10px; transform:translateY(-45%); }
  .plaque h2 { font-size:15px; }
  .pl-no { font-size:10px; }
  .pl-what { font-size:12px; }
  .pl-note { font-size:11.5px; }
  .pl-go { font-size:12.5px; margin-top:6px; padding-top:5px; }
  .passport { font-size:8.5px; height:25em; overflow:hidden; }
  .passport h3 { letter-spacing:.02em; }
  .seg-stroyka .ad-paper { display:none; }
  .postplate { left:37% !important; top:68% !important; width:31%; font-size:10px; }
  .memorial {
    left:25% !important; top:63% !important; width:46% !important;
    background:#706456; border:2px solid #14161B;
    padding:.5em .6em; font-size:8.5px; line-height:1.4; pointer-events:none;
  }
  .seg-voron .plaque { top:36% !important; transform:none; }
  .legend-plate { left:3% !important; top:49% !important; width:49%;
    font-size:10px; line-height:1.42; padding:.55em .65em .5em; }
  .legend-plate i { font-size:.85em; margin:3px 0 5px; }
  .legend-plate u { margin-top:6px; padding-top:5px; }
  .pl-want { font-size:11px; margin-top:4px; }
  .bb-note { font-size:11px; width:70%; left:12%; top:42%; line-height:1.45; }
  .bb-note b { display:block; margin-top:3px; overflow-wrap:anywhere; }
  .bb-l1 { display:none; }
  .studio-plate {
    display:block; position:relative; left:auto; top:auto; width:min(82%, 320px);
    margin:0 auto 16px; transform:none; font-size:11px;
  }
  .studio-plate::after { display:none; }
  .lean-plate { left:4% !important; top:70% !important; width:31%; font-size:10px; }
  .sheet { width:29%; font-size:9.5px; }
  .sheet-1 { left:9% !important; top:40% !important; }
  .sheet-2 { left:41% !important; top:40% !important; }
  .sheet-3 { left:9% !important; top:63% !important; }
  .sheet-4 { left:41% !important; top:63% !important; }
  .sheet--hand { left:27% !important; top:74% !important; width:36%; font-size:9.5px; }
  .colophon { font-size:10px; letter-spacing:.12em; padding-bottom:40px; }
}