/* =====================================================================
   ЛЕЙМУ — документ 3D-пекарни (assets/uslugi/bakery-3d.html), который страница
   «Услуги» показывает во фрейме. Переменные и кнопка .req — из site.css.
   Фон прозрачный: сцена стоит на бежевой подложке страницы, а не в белом окне.
   ===================================================================== */

html, body.scene-doc { width: 100%; height: 100%; overflow: hidden; background: transparent; }
body.scene-doc::after { display: none; }            /* зерно плёнки уже лежит поверх фрейма на самой странице */

#app { position: fixed; inset: 0; }
/* холст появляется, когда сцена готова: до этого сквозь фрейм виден неподвижный кадр со страницы */
#app canvas { display: block; width: 100% !important; height: 100% !important; outline: none; opacity: 0; transition: opacity 1.1s var(--ease-out); }
html.ready #app canvas { opacity: 1; }

/* кнопка режима и строка загрузки стоят в одном месте — внизу по центру */
.scene-ui { position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(16px, 5vh, 46px); display: grid; justify-items: center; align-items: end; pointer-events: none; }
.scene-ui > * { grid-area: 1 / 1; }

#mode-btn { pointer-events: auto; opacity: 0; visibility: hidden; box-shadow: 0 16px 30px -16px rgba(45, 29, 18, 0.55); transition: opacity .6s var(--ease-out), visibility 0s linear .6s, transform 160ms var(--ease-out), background .25s var(--ease-out); }
#mode-btn.show { opacity: 1; visibility: visible; transition: opacity .6s var(--ease-out), transform 160ms var(--ease-out), background .25s var(--ease-out); }

#loader { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 4px; text-align: center; text-shadow: 0 0 14px var(--paper), 0 0 8px var(--paper), 0 0 3px var(--paper); transition: opacity .6s var(--ease-out); }
#loader.hide { opacity: 0; }
.loader-title { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; color: var(--accent); }
.loader-bar { width: 180px; height: 1px; background: var(--tint-strong); overflow: hidden; }
.loader-fill { width: 0; height: 100%; background: var(--brown); animation: bake 2.4s ease-in-out forwards; }
@keyframes bake { 0% { width: 0; } 50% { width: 70%; } 100% { width: 100%; } }
.loader-sub { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; color: var(--ink-2); }

/* нет WebGL — на странице остаётся неподвижный кадр, а подписи сцены не нужны */
html.no-webgl .scene-ui { display: none; }

@media (max-width: 600px) {
  .scene-ui { bottom: 14px; }
  #mode-btn { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  #app canvas, #mode-btn, #loader { transition: none; }
  .loader-fill { animation-duration: 0.01s; }
}