/* Эффекты: более тёмная шапка с мягким бликом, тень при прокрутке, живые кнопки и карточки, появление экранов.
   При системной настройке «уменьшить движение» всё движение отключается (см. base.css). */

:root { --header-bg: linear-gradient(100deg, #3f4aa0 0%, #4b58b4 55%, #5563c2 100%); }

/* Шапка: темнее, с бликом и тонкой светлой кромкой снизу */
.topbar { background: var(--header-bg); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); transition: box-shadow .25s var(--ease); isolation: isolate; }
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px 120px at 18% -40%, rgba(151, 165, 249, .45), transparent 70%), radial-gradient(420px 110px at 88% 140%, rgba(255, 152, 0, .16), transparent 70%); }
.topbar.is-scrolled { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08), 0 6px 20px rgba(33, 20, 73, .22); }
.topnav a::after { transform: scaleX(0); transform-origin: 50% 100%; transition: transform .22s var(--ease); }
.topnav a { transition: color .18s, background-color .18s; }
.topnav a:hover { background: rgba(255, 255, 255, .06); }
.topnav a[aria-current=page]::after { transform: scaleX(1); }
.topnav a:hover::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: rgba(255, 255, 255, .35); transform: scaleX(1); }
.topnav a[aria-current=page]:hover::after { background: var(--orange); }
.top-btn { transition: background-color .18s, box-shadow .18s; }
.top-btn:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); transition: box-shadow .2s; }
.top-btn:hover .avatar { box-shadow: 0 0 0 3px rgba(255, 152, 0, .55); }

/* Письмо и заглушки тоже в тёмном фиолетовом */
.letter-head { background: var(--header-bg); }

/* Кнопки: мягкий подъём и свечение */
.btn-primary { box-shadow: 0 1px 0 rgba(33, 20, 73, .08), 0 4px 12px rgba(255, 152, 0, .22); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 2px 0 rgba(33, 20, 73, .06), 0 8px 20px rgba(255, 152, 0, .32); transform: translateY(-1px); }
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 6px rgba(255, 152, 0, .25); }
.btn-secondary:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(255, 152, 0, .16); }
.btn-danger:hover { box-shadow: 0 6px 16px rgba(199, 68, 60, .28); }
.btn { position: relative; overflow: hidden; }
.btn-primary::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); opacity: 0; pointer-events: none; }
.btn-primary:hover:not(:disabled)::before { animation: shine .7s var(--ease); }
@keyframes shine { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }

/* Поля: мягкое свечение фокуса */
.input:focus, .dd-trigger[aria-expanded=true], .dd-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(91, 105, 198, .22), 0 4px 14px rgba(91, 105, 198, .12); }

/* Панели и строки */
.panel { transition: box-shadow .25s var(--ease), border-color .25s; }
.drow.is-item, .lrow { transition: background-color .16s, box-shadow .16s; }
.drow.is-item:hover, .lrow:hover { background: linear-gradient(90deg, #f7f8ff, #fbfbff); box-shadow: inset 3px 0 0 var(--violet); }
.dev-tile { transition: transform .2s var(--ease), background-color .2s, color .2s; }
.drow.is-item:hover .dev-tile, .lrow:hover .dev-tile { transform: scale(1.06); background: var(--tint-2); }
.onb-step, .rcard, .check-row, .fmt-opt, .auth-card { transition: border-color .18s, box-shadow .2s var(--ease), transform .2s var(--ease), background-color .18s; }
.onb-step:hover, .rcard:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.auth-card { box-shadow: 0 1px 2px rgba(33, 20, 73, .05), 0 24px 60px rgba(63, 74, 160, .14); }

/* Точка «в сети» мягко пульсирует */
.dot.is-online { animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 179, 110, .45); } 70% { box-shadow: 0 0 0 6px rgba(47, 179, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 179, 110, 0); } }

/* Появление экранов, строк и заголовков */
.pagehead-inner, .auth-card, .mail-client { animation: rise .32s var(--ease) both; }
.page > *, .welcome > * { animation: rise .36s var(--ease) both; }
.page > *:nth-child(2) { animation-delay: .04s; } .page > *:nth-child(3) { animation-delay: .08s; } .page > *:nth-child(4) { animation-delay: .12s; }
.dtable .drow.is-item, .panel > .lrow { animation: rise .3s var(--ease) both; }
.dtable .drow.is-item:nth-child(2), .panel > .lrow:nth-child(1) { animation-delay: .02s; }
.dtable .drow.is-item:nth-child(3), .panel > .lrow:nth-child(2) { animation-delay: .05s; }
.dtable .drow.is-item:nth-child(4), .panel > .lrow:nth-child(3) { animation-delay: .08s; }
.dtable .drow.is-item:nth-child(5), .panel > .lrow:nth-child(4) { animation-delay: .11s; }
.dtable .drow.is-item:nth-child(n+6), .panel > .lrow:nth-child(n+5) { animation-delay: .14s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.wz-body { animation: rise .26s var(--ease) both; }
.success-mark { animation: pop .42s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* Меню и окна — чуть глубже */
.pop { box-shadow: 0 18px 50px rgba(33, 20, 73, .2), 0 2px 8px rgba(33, 20, 73, .08); }
.scrim { backdrop-filter: blur(2px); }