/* * onboarding-spotlight.css — эффект «прожектор-раскрытие» онбординга (Вариант 1, ред. 2026-06-09 v2). * * Идея (по ТЗ Александра): страница приглушается и обесцвечивается (ч/б + затемнение), * а из ПРАВОГО-ВЕРХНЕГО угла раскрывается «луч» живого цвета — там, где вход в чек-лист * («Первый раз здесь? Открыть чек-лист»). Луч РАСПУСКАЕТСЯ из угла (анимация спреда), * ссылка чек-листа пульсирует в фирменном цвете. Взгляд сам идёт в правый-верхний угол. * * Почему так (а не «добавить свечение»): прежняя редакция накладывала СВЕТЛОЕ сияние * на и так светлый герой → контраста нет, эффект невидим («Не эффекта», 2026-06-09). * Правильный прожектор УБИРАЕТ свет/цвет везде, КРОМЕ луча — тогда контраст максимальный. * * Активируется классом .ma-spotlight-active на (ставит onboarding-spotlight.js). * z-index: оверлей 50 (ниже sidebar=100 → навигация остаётся в цвете; ниже модалок=1000). * * Канон: затемняющая вуаль — это ЭФФЕКТ (тень/прожектор), не цвет палитры; фирменный цвет * луча/пульса — из токена var(--brand). reduced-motion → без анимации спреда, статичный кадр. */ /* Регистрируем анимируемую переменную радиуса луча (нужно для плавного спреда). */ @property --ma-spot-r { syntax: ''; initial-value: 0%; inherits: false; } /* ─── Оверлей: ч/б + затемняющая вуаль с прозрачным цветным лучом из угла ─── */ .ma-spotlight-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 50; --ma-spot-r: 0%; /* Лёгкий тёмный тон поверх вуали (углубляет затемнение к краям) */ background: radial-gradient( circle at 100% 0%, transparent var(--ma-spot-r), rgba(10, 12, 35, 0.26) calc(var(--ma-spot-r) + 22%), rgba(10, 12, 35, 0.42) 130% ); /* Маска: вуаль ОТСУТСТВУЕТ в луче (прозрачно у угла) и ПРИСУТСТВУЕТ за его пределами */ -webkit-mask-image: radial-gradient( circle at 100% 0%, transparent calc(var(--ma-spot-r) - 1%), #000 calc(var(--ma-spot-r) + 26%) ); mask-image: radial-gradient( circle at 100% 0%, transparent calc(var(--ma-spot-r) - 1%), #000 calc(var(--ma-spot-r) + 26%) ); /* Обесцвечивание + затемнение того, что ПОД вуалью (вне луча страница уходит в ч/б) */ -webkit-backdrop-filter: grayscale(0.82) brightness(0.86); backdrop-filter: grayscale(0.82) brightness(0.86); opacity: 0; transition: opacity 600ms ease; } .ma-spotlight-active .ma-spotlight-overlay { opacity: 1; /* Луч распускается из угла; forwards — держим финальный кадр */ animation: maSpotReveal 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes maSpotReveal { from { --ma-spot-r: 0%; } to { --ma-spot-r: 20%; } } /* ─── Подсветка онбординг-карточки (вход в чек-лист / обучение) ──────────── */ /* Карта приподнята над вуалью (остаётся в цвете в луче) + дышащий фирменный ореол. */ .ma-spotlight-active #ov-onb-card { position: relative; z-index: 51; animation: maCardPulse 2.1s ease-in-out 0.6s infinite; } @keyframes maCardPulse { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent), 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent), 0 10px 30px color-mix(in srgb, var(--brand) 24%, transparent); } 50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent), 0 0 0 12px color-mix(in srgb, var(--brand) 5%, transparent), 0 14px 42px color-mix(in srgb, var(--brand) 40%, transparent); } } /* ─── reduced-motion: без спреда/пульса, статичный кадр прожектора ───────── */ @media (prefers-reduced-motion: reduce) { .ma-spotlight-active .ma-spotlight-overlay { animation: none; --ma-spot-r: 20%; opacity: 1; } .ma-spotlight-active #ov-onb-card { animation: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent), 0 10px 30px color-mix(in srgb, var(--brand) 34%, transparent); } }