/* Лента „демо от Сайтово“ + общи FX стилове за всички демота */
.demo-ribbon { position: relative; z-index: 60; display: block; padding: 9px 16px; font: 600 13px/1.4 "Manrope", system-ui, sans-serif; background: #17201b; color: #fbf7f0; text-align: center; }
.demo-ribbon a { color: #f3b48f; font-weight: 800; text-decoration: none; }
.demo-ribbon a:hover { text-decoration: underline; }

.fx-o { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.fx-i { display: inline-block; will-change: transform; }
.fx-w { display: inline-block; white-space: nowrap; }

.fx-cursor i, .fx-cursor b { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; border-radius: 50%; }
.fx-cursor i { width: 7px; height: 7px; background: var(--cursor, #fff); mix-blend-mode: difference; }
.fx-cursor b { width: 38px; height: 38px; border: 1.5px solid var(--cursor, #fff); opacity: .6; mix-blend-mode: difference; transition: width .35s, height .35s, opacity .35s; }
.fx-cursor.hover b { width: 70px; height: 70px; opacity: 1; }
@media (pointer: fine) { .fx-on body { cursor: none; } .fx-on a, .fx-on button, .fx-on label { cursor: none; } }

.three-wrap { position: relative; }
.three-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.no-webgl .three-wrap canvas { display: none; }
.three-fallback { display: none; }
.no-webgl .three-fallback { display: block; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }