/* ============================================ CREATE CTA — in-place morph «Создать» → [Изображение / Видео] ============================================ ⚠️ Этот файл ОБЯЗАТЕЛЬНО загружается eagerly (в index.html), а НЕ через VIEW_LAZY_BUNDLES. Причина: морф-элементы живут на view-home (первый экран), JS create-mode-sheet.js тоже eager — если CSS lazy, то до первого захода в view-create-video кнопки рендерятся без стилей (видны всегда, без размеров, без opacity:0). См. docs/WEBAPP_ASSET_LOADING.md. Структура: .create-cta (relative shell, max-width 260px — как .custom-prompt-btn) ├── .custom-prompt-btn ← дефолт visible └── .create-cta-options ← absolute inset:0, hidden by default, показывается при .is-expanded на shell'е Только GPU-свойства (opacity / transform) — composited, без repaint. */ .create-cta { position: relative; width: 100%; max-width: 260px; margin: 0 auto; } .create-cta .custom-prompt-btn { transition: opacity 0.22s ease, transform 0.22s ease; } .create-cta.is-expanded .custom-prompt-btn { opacity: 0; transform: scale(0.92); pointer-events: none; } .create-cta-options { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; opacity: 0; transform: scale(0.96); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } .create-cta.is-expanded .create-cta-options { opacity: 1; transform: scale(1); pointer-events: auto; } /* Опции — та же violet-палитра / glow / border-radius что у .custom-prompt-btn (см. references.css). Унифицировано визуально с исходной CTA, чтобы morph воспринимался как «разбиение пополам», не как другая кнопка. */ .create-cta-option { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; border-radius: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; line-height: 1; box-sizing: border-box; background: radial-gradient(65.28% 65.28% at 50% 100%, rgba(223, 113, 255, 0.7) 0%, rgba(223, 113, 255, 0) 100%), linear-gradient(0deg, #7a5af8, #7a5af8); box-shadow: 0 6px 22px -8px rgba(122, 90, 248, 0.55); transition: transform 0.12s ease, filter 0.12s ease; -webkit-tap-highlight-color: transparent; } .create-cta-option:active { transform: scale(0.96); filter: brightness(1.1); } .create-cta-option-icon { width: 18px; height: 18px; flex-shrink: 0; color: #fff; } .create-cta-option-label { font-size: 14px; font-weight: 700; white-space: nowrap; color: #fff; }