/* Hero-сцена kvoka: шесть сцен в квадрате, слои absolute, движение задаёт hero.js
   (Web Animations API). Здесь — геометрия и состояния покоя; keyframes только
   для бесконечных мелочей (курсор, точки «печатает»). */

.stage { position:relative; aspect-ratio:1; width:100%; max-width:560px; margin:0 auto; border-radius:1.5rem; background:var(--sand-900); overflow:hidden; perspective:1200px; isolation:isolate; container-type:inline-size }
.stage::before { content:''; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 45%, rgba(92,157,187,.14), transparent 70%); pointer-events:none }
.stage > * { position:absolute }
.stage * { box-sizing:border-box }
.stage [hidden] { display:none !important }

/* масштаб: сцена расчитана на 560 px, всё в cqw (1cqw = 1% ширины контейнера) */

/* ─── 1. фото и поле запроса ─── */
.st-photo { left:26cqw; top:22cqw; width:48cqw; height:56cqw; border-radius:3cqw; background:linear-gradient(165deg, #E9DFCC 0%, #CFB99A 55%, #B98A62 100%); box-shadow:0 30cqw 60cqw rgba(0,0,0,.45), 0 2cqw 6cqw rgba(0,0,0,.3); overflow:hidden }
.st-photo::before { content:''; position:absolute; left:28%; top:18%; width:44%; height:52%; border-radius:50% 50% 45% 45% / 55% 55% 40% 40%; background:linear-gradient(180deg, #F8F2E8, #E8D9C2 70%, #C9A98A); box-shadow:0 3cqw 5cqw rgba(0,0,0,.18) }
.st-photo::after { content:''; position:absolute; left:40%; top:14%; width:20%; height:8%; border-radius:50%; background:radial-gradient(circle, #FFE9B8, #F2B35B 60%, transparent 70%); filter:blur(1.2cqw); opacity:.9 }
.st-photo__cap { position:absolute; left:0; right:0; bottom:0; padding:2cqw 2.5cqw; font-size:2.2cqw; color:rgba(27,39,48,.75); background:linear-gradient(transparent, rgba(255,255,255,.55)); font-family:var(--mono) }

.st-ask { left:8cqw; top:46cqw; width:84cqw; min-height:11cqw; background:#fff; color:var(--ink); border-radius:3.2cqw; padding:2.6cqw 3cqw; display:flex; align-items:center; gap:3cqw; font-size:3cqw; line-height:1.3; box-shadow:0 0 0 1cqw rgba(255,255,255,.18), 0 0 8cqw rgba(169,211,228,.45), 0 6cqw 14cqw rgba(0,0,0,.35) }
.st-ask__text { flex:1; min-width:0 } .st-ask__text::after { content:''; display:inline-block; width:.6cqw; height:3.2cqw; background:var(--ink); margin-left:.4cqw; vertical-align:-.5cqw; animation:caret 1s steps(2) infinite }
.st-ask.is-sent .st-ask__text::after { display:none }
.st-ask__send { width:6.5cqw; height:6.5cqw; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:3.2cqw; flex:none }
@keyframes caret { to { opacity:0 } }

/* ─── 2. ответ агента и сетка товаров ─── */
.st-reply { left:8cqw; top:8cqw; background:var(--sand-800); color:var(--sand-50); border-radius:3cqw 3cqw 3cqw 1cqw; padding:2cqw 3cqw; font-size:2.6cqw; display:inline-flex; gap:2cqw; align-items:center; opacity:0 }
.st-reply__dots i { display:inline-block; width:1.2cqw; height:1.2cqw; border-radius:50%; background:var(--water-200); margin-left:.6cqw; animation:dots 1s ease-in-out infinite }
.st-reply__dots i:nth-child(2) { animation-delay:.15s } .st-reply__dots i:nth-child(3) { animation-delay:.3s }
@keyframes dots { 0%,100% { transform:translateY(0); opacity:.5 } 50% { transform:translateY(-.8cqw); opacity:1 } }

.st-shop { left:12cqw; top:15cqw; width:76cqw; border-radius:2.4cqw; background:var(--sand-50); color:var(--ink); padding:3cqw; box-shadow:0 6cqw 16cqw rgba(0,0,0,.45); opacity:0; transform-origin:50% 50% }
.st-shop__bar { display:flex; justify-content:space-between; align-items:center; font-size:2.6cqw; font-weight:600; letter-spacing:-.02em; margin-bottom:2.4cqw }
.st-shop__bar span { font-weight:400; font-size:2cqw; color:var(--sand-600) }
.st-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:2cqw }
.st-item { background:#fff; border-radius:1.6cqw; padding:1.4cqw; opacity:0 }
.st-item i { display:block; aspect-ratio:1; border-radius:1.2cqw; background:linear-gradient(160deg, var(--sand-100), var(--sand-300)) }
.st-item:nth-child(2) i { background:linear-gradient(160deg, #E3B08F, #C97A4A) }
.st-item:nth-child(3) i { background:linear-gradient(160deg, #A9D3E4, #5C9DBB) }
.st-item:nth-child(4) i { background:linear-gradient(160deg, #BFD6C3, #8FB596) }
.st-item:nth-child(5) i { background:linear-gradient(160deg, #E2D8C4, #A79B86) }
.st-item:nth-child(6) i { background:linear-gradient(160deg, #5C9DBB, #1E4F66) }
.st-item b { display:block; font-size:1.7cqw; font-weight:500; margin-top:1cqw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .st-item small { font-size:1.6cqw; color:var(--sand-600); font-family:var(--mono) }

/* ─── 3. телефон ─── */
.st-phone { left:33cqw; top:12cqw; width:34cqw; height:70cqw; border-radius:5.5cqw; background:#111; padding:1.4cqw; box-shadow:0 10cqw 24cqw rgba(0,0,0,.55), inset 0 0 0 .3cqw rgba(255,255,255,.12); opacity:0 }
.st-phone__screen { width:100%; height:100%; border-radius:4.4cqw; background:var(--sand-50); color:var(--ink); overflow:hidden; display:grid; grid-template-rows:auto 1fr auto }
.st-phone__url { font-family:var(--mono); font-size:1.6cqw; color:var(--sand-600); text-align:center; padding:2cqw 2cqw 1cqw; display:flex; justify-content:center; align-items:center; gap:1cqw }
.st-phone__url::before { content:''; width:1.4cqw; height:1.4cqw; border-radius:50%; background:var(--euca-500) }
.st-phone__photo { margin:0 2cqw; aspect-ratio:1; border-radius:2cqw; background:linear-gradient(165deg, #E9DFCC, #CFB99A 55%, #B98A62); position:relative }
.st-phone__photo::before { content:''; position:absolute; left:30%; top:20%; width:40%; height:50%; border-radius:50% 50% 45% 45%/55% 55% 40% 40%; background:linear-gradient(180deg,#F8F2E8,#E8D9C2 70%,#C9A98A) }
.st-phone__body { padding:2cqw } .st-phone__body b { display:block; font-size:2.2cqw; font-weight:600; letter-spacing:-.01em } .st-phone__body .price { font-family:var(--mono); font-size:2cqw; margin-top:.6cqw; color:var(--sand-700) }
.st-phone__btns { display:grid; grid-template-columns:1fr 1fr; gap:1.2cqw; margin-top:2cqw }
.st-phone__btns span { font-size:1.7cqw; text-align:center; padding:1.5cqw 0; border-radius:99cqw; border:.2cqw solid var(--sand-300) } .st-phone__btns span:last-child { background:var(--ink); color:#fff; border-color:var(--ink) }

/* ─── 4. подключения ─── */
.st-links { inset:0; pointer-events:none }
.st-links svg { width:100%; height:100%; display:block } .st-links path { stroke:var(--water-400); stroke-width:.5; fill:none; opacity:.7; stroke-dasharray:60; stroke-dashoffset:60 }
.st-plug { background:var(--sand-50); color:var(--ink); border-radius:2.2cqw; padding:1.6cqw 2.2cqw; font-size:2.2cqw; font-weight:500; display:inline-flex; align-items:center; gap:1.4cqw; box-shadow:0 3cqw 8cqw rgba(0,0,0,.45); opacity:0; white-space:nowrap }
.st-plug small { font-weight:400; color:var(--sand-600); font-size:1.8cqw }
.st-plug::before { content:'✓'; width:3.2cqw; height:3.2cqw; border-radius:50%; background:var(--euca-500); color:#fff; font-size:2cqw; display:grid; place-items:center; flex:none }

/* ─── 5. заказы ─── */
.st-orders { inset:0; pointer-events:none; transform-style:preserve-3d }
.st-order { position:absolute; background:#fff; color:var(--ink); border-radius:2cqw; padding:1.8cqw 2.4cqw; font-size:2cqw; line-height:1.3; box-shadow:0 2cqw 6cqw rgba(0,0,0,.45); opacity:0; width:30cqw }
.st-order b { display:block; font-family:var(--mono); font-weight:500; font-size:1.9cqw }
.st-order .ok { color:var(--euca-700) } .st-order .ship { color:var(--water-700) }
.st-order--thanks { background:linear-gradient(160deg, #E3B08F, #C97A4A); color:#fff; font-size:2.4cqw; font-weight:500; width:34cqw; padding:3cqw }
.st-order--thanks::before { content:'✓'; display:inline-grid; place-items:center; width:4cqw; height:4cqw; border-radius:50%; background:rgba(255,255,255,.9); color:var(--clay-700); margin-bottom:1.4cqw; font-size:2.4cqw }
.st-toast { left:50%; bottom:6cqw; transform:translateX(-50%); background:var(--sand-50); color:var(--ink); border-radius:99cqw; padding:1.6cqw 3cqw; font-size:2.2cqw; display:inline-flex; gap:2cqw; align-items:center; box-shadow:0 2cqw 8cqw rgba(0,0,0,.4); opacity:0; white-space:nowrap }
.st-toast b { color:var(--euca-700); font-weight:600 }

/* покой без JS и при reduce-motion: показываем сцену 2 */
.stage.is-static .st-ask, .stage.is-static .st-reply { opacity:1 }
.stage.is-static .st-ask { top:84cqw } .stage.is-static .st-ask .st-ask__text::after { display:none }
.stage.is-static .st-photo { display:none }
.stage.is-static .st-shop, .stage.is-static .st-item { opacity:1 }
.stage.is-static .st-phone, .stage.is-static .st-plug, .stage.is-static .st-order, .stage.is-static .st-toast { display:none }