/* sayt/static/scena.css локация серии (вещи теплеют и оживают), заставка-трейлер, приёмник ВЭФ */

/* заставка */
.zastavka { position: fixed; inset: 0; z-index: 80; background: #0e0d0c; display: grid; place-items: center; transition: opacity 1.2s; }
.zastavka video { width: 100%; height: 100%; object-fit: cover; }
.zastavka.gasnet { opacity: 0; pointer-events: none; }
.propustit { position: absolute; right: 1rem; bottom: 1.2rem; background: rgb(0 0 0 / .4); }

/* локация */
.komnata { position: relative; background: #0e0d0c; }
.komnata-scena { position: relative; width: 100%; max-width: 110rem; margin: 0 auto; overflow-x: auto; overscroll-behavior-x: contain; }
.komnata-scena svg { display: block; width: 100%; min-width: 56rem; height: auto; }
.komnata-podskazka { text-align: center; font-size: .9rem; color: var(--bumaga-tusk); margin: .6rem 1rem 0; padding-bottom: .6rem; }
.vesch { cursor: pointer; outline: none; }
.vesch .svet { opacity: 0; transition: opacity .35s; pointer-events: none; }
.vesch:hover .svet, .vesch:focus-visible .svet, .vesch.aktivna .svet { opacity: 1; }
.vesch.skrytaya:hover .svet { opacity: .25; }
.vesch .rama { fill: none; stroke: var(--ohra); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0; transition: opacity .3s; }
.vesch:focus-visible .rama { opacity: .8; }
.lokaciya-zaglushka { height: min(56vh, 34rem); background: center/cover no-repeat; filter: grayscale(1) brightness(.6); }
.scena-tiho .komnata-scena { animation: tiho 2.5s ease-in-out; }
@keyframes tiho { 30% { filter: saturate(0) brightness(.55); } 100% { filter: none; } }
.kachaetsya { animation: kach 1.6s ease-in-out 2; transform-box: view-box; }
@keyframes kach { 25% { transform: rotate(1.5deg); } 75% { transform: rotate(-1.5deg); } }

/* карточка вещи */
.vesch-kartochka {
  position: fixed; z-index: 65; left: 50%; bottom: 1rem; transform: translateX(-50%); width: min(30rem, calc(100% - 2rem));
  background: var(--bumaga); color: var(--fon); padding: 1rem 1.2rem; box-shadow: var(--ten); border-radius: 2px;
  font-size: 1.05rem;
}
.vesch-kartochka h3 { font: 1.05rem "Mashinka", monospace; text-transform: uppercase; letter-spacing: .08em; margin: 0 0 .4rem; color: var(--kirpich); }
.vesch-kartochka p { margin: 0; }
.vesch-kartochka button { position: absolute; top: .3rem; right: .5rem; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--fon); }
.vesch-kartochka a { color: var(--kirpich); }

/* ноги с края экрана — находка «Юрин ритм» */
.nogi { position: fixed; right: -2rem; bottom: 0; z-index: 75; width: 9rem; height: 70vh; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 30%, #3a3c40 30% 38%, transparent 38% 62%, #3a3c40 62% 70%, transparent 70%);
  opacity: 0; filter: blur(1px); transition: opacity 2s, transform 2s; transform: translateX(4rem); }
.nogi.vidny { opacity: .85; transform: translateX(0); }
body.tishina main, body.tishina .shapka { filter: grayscale(.9) brightness(.6); transition: filter 1.5s; }

/* приёмник */
.priemnik { position: fixed; left: 1rem; bottom: 1rem; z-index: 42; font-family: "Mashinka", monospace; }
.priemnik-ruchka {
  background: linear-gradient(#4a3f33, #2f2822); color: var(--ohra); border: 1px solid #6d5a44; border-radius: 6px;
  padding: .55rem .9rem; font: 700 1rem "Mashinka", monospace; letter-spacing: .15em; cursor: pointer; box-shadow: var(--ten);
}
.priemnik-panel { display: none; width: min(26rem, calc(100vw - 2rem)); margin-top: .5rem; padding: .9rem;
  background: linear-gradient(#5a4a38, #3b3128); border: 1px solid #7b6549; border-radius: 8px; box-shadow: var(--ten); }
.priemnik[data-sostoyanie="otkryt"] { display: flex; flex-direction: column-reverse; }
.priemnik[data-sostoyanie="otkryt"] .priemnik-panel { display: block; }
.shkala { position: relative; height: 4.2rem; background: linear-gradient(#e9dcb9, #d4c49b); border-radius: 3px; overflow: hidden;
  box-shadow: inset 0 0 12px rgb(0 0 0 / .35); }
.shkala-cifry { position: absolute; inset: 0; font-size: .72rem; color: #4a3b2c; }
.shkala-cifry span { position: absolute; top: 50%; transform: translateX(-50%); }
.shkala-cifry span::before { content: ""; position: absolute; left: 50%; top: -1.3rem; width: 1px; height: .8rem; background: #4a3b2c; }
.strelka { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--kirpich); left: 12%; box-shadow: 0 0 6px var(--kirpich); }
.priemnik-niz { display: grid; grid-template-columns: auto 1fr; gap: .5rem .8rem; align-items: center; margin-top: .7rem; color: var(--bumaga); font-size: .85rem; }
.priemnik-niz input { width: 100%; accent-color: var(--ohra); }
.gromkost { grid-column: 2; }
.stanciya { grid-column: 1 / -1; min-height: 1.3em; color: var(--ohra); }
.diapazon { grid-row: span 2; border: 1px solid var(--ohra); padding: .1rem .4rem; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.knopka-dozhd { display: block; margin: .4rem auto 0; font: inherit; font-size: .9rem; color: var(--kret); background: none; border: 1px solid var(--kret); border-radius: 2px; padding: .35rem .8rem; cursor: pointer; }
.idet-dozhd svg > image { filter: brightness(.82) saturate(.85); }
.vspyshka { position: fixed; inset: 0; z-index: 90; background: #fffdf4; pointer-events: none; animation: vspyshka .7s ease-out forwards; }
@keyframes vspyshka { from { opacity: .95; } to { opacity: 0; } }