/* =========================================================
   LORKE — интерьерные детали: бра, драцена, факел с огнём (js/decor.js)
   Размер задаёт родитель (width / height), внутри всё тянется по нему.
   ========================================================= */

/* ---------- бра ---------- */
.sconce { position: absolute; aspect-ratio: 200 / 216; pointer-events: none; }
.sconce > [data-decor] { position: relative; width: 100%; height: 100%; }
.sconce svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; }
/* свет льётся из-за диска: кольцо у кромки и мягкое сияние на стене */
.sconce__halo {
  position: absolute; left: 50%; top: 46.3%; width: 210%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, transparent 0 41%, rgba(255, 244, 214, .95) 43.5%, rgba(255, 220, 150, .5) 50%, rgba(255, 200, 120, .16) 66%, transparent 100%);
  animation: sc-pulse 5.2s ease-in-out infinite; will-change: opacity;
}
.sconce__sheen { animation: sc-sheen 7s ease-in-out infinite alternate; }
@keyframes sc-pulse { 0%, 100% { opacity: 1; } 35% { opacity: .84; } 60% { opacity: .96; } 80% { opacity: .88; } }
@keyframes sc-sheen { from { opacity: .5; } to { opacity: 1; } }

/* ---------- растение ---------- */
.plant { position: absolute; aspect-ratio: 300 / 760; pointer-events: none; }
.plant > [data-decor] { width: 100%; height: 100%; }
.plant svg { display: block; width: 100%; height: 100%; overflow: visible; }
.plant__sway { transform-box: view-box; transform-origin: 150px 482px; animation: pl-sway 9s ease-in-out infinite alternate; will-change: transform; }
.plant__l--f { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
@keyframes pl-sway { from { transform: rotate(-.9deg); } to { transform: rotate(1deg); } }

/* ---------- факел с огнём ---------- */
.torch--fire { pointer-events: none; }
.torch--fire svg { overflow: visible; }
.torch--fire .flame, .torch--fire .flame-bloom { transform-box: view-box; transform-origin: 60px 153px; }
.fl-1 { animation: fl-a 1.15s ease-in-out infinite; }
.fl-2 { animation: fl-b .92s ease-in-out infinite; }
.fl-3 { animation: fl-a .74s ease-in-out infinite reverse; }
.fl-4 { animation: fl-b .58s ease-in-out infinite; }
.fl-t { transform-origin: 60px 122px; animation: fl-c 1.3s ease-in-out infinite; }
.fl-t2 { transform-origin: 60px 120px; animation: fl-c .86s ease-in-out infinite reverse; }
.flame-bloom { opacity: .26; filter: blur(7px); animation: bloom 2.1s ease-in-out infinite; }
@keyframes fl-a { 0%, 100% { transform: scale(1, 1) skewX(0); } 22% { transform: scale(.94, 1.08) skewX(-2.4deg); } 48% { transform: scale(1.05, .95) skewX(2.6deg); } 74% { transform: scale(.97, 1.1) skewX(-1.6deg); } }
@keyframes fl-b { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(1.06, .92) skewX(3deg); } 60% { transform: scale(.93, 1.12) skewX(-2.8deg); } }
@keyframes fl-c { 0%, 100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.8, 1.14) skewX(-6deg); } 55% { transform: scale(1.1, .86) skewX(5deg); } 80% { transform: scale(.88, 1.06) skewX(-3deg); } }
@keyframes bloom { 0%, 100% { opacity: .26; transform: scale(1); } 40% { opacity: .38; transform: scale(1.1); } 70% { opacity: .2; transform: scale(.94); } }

.ember {
  position: absolute; left: 50%; top: 16%; width: var(--sz); height: var(--sz); margin-left: var(--x); border-radius: 50%;
  background: #ffd27a; box-shadow: 0 0 6px 2px rgba(255, 170, 70, .8); opacity: 0;
  animation: ember var(--dur) linear var(--del) infinite;
}
@keyframes ember {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--rise) * -1)) scale(.2); }
}

/* вне экрана — пауза (класс ставит decor.js) */
.is-off, .is-off * { animation-play-state: paused !important; }

/* ---------- размещение на главной странице ---------- */
/* меню: пара бра по сторонам заголовка, высоко над обложками — книга при открытии их не задевает.
   Свет на мраморе рисует сам шейдер (js/marble.js), здесь — только мягкий ободок за диском */
.menu__head { position: relative; }
/* мягкая тень под текстом заголовка, чтобы золото прожилок не мешало читать */
.menu__head::before { content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 160%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(10, 9, 8, .55), rgba(10, 9, 8, .25) 60%, transparent); pointer-events: none; }
.menu__head > :not(.sconce) { position: relative; }
.menu__sc { top: 50%; width: clamp(62px, 4.8vw, 80px); transform: translateY(-50%); }
.menu__sc--l { left: calc(50% - 40vw); }
.menu__sc--r { right: calc(50% - 40vw); }
.menu__sc .sconce__halo {
  width: 180%;
  background: radial-gradient(closest-side, transparent 0 46%, rgba(255, 222, 160, .5) 49%, rgba(255, 196, 120, .2) 57%, rgba(255, 170, 90, .05) 74%, transparent 100%);
}
/* планшет и телефон: бра меньше и ближе к краям экрана, на уровне заголовка */
@media (max-width: 1180px) {
  .menu__sc { width: clamp(40px, 6vw, 64px); }
  .menu__sc--l { left: calc(50% - 45vw); }
  .menu__sc--r { right: calc(50% - 45vw); }
}

@media (prefers-reduced-motion: reduce) {
  .sconce__halo, .sconce__sheen, .plant__sway, .torch--fire .flame, .flame-bloom, .ember { animation: none; }
  .ember { display: none; }
}