/* Login side panel: animated flow, facts */
/* «Принцип работы»: 7 coloured steps, a progress line that fills step by step and an active step
   cycling through (2s per step, 14s loop). Pure CSS; prefers-reduced-motion shows the static list. */
.hiw { --hiw-n: 7; --hiw-cycle: 14s; margin-top: clamp(28px, 7vh, 72px); }
.hiw > p { margin: 0 0 clamp(16px, 3vh, 28px); color: #7ee8dc; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.hiw ol { position: relative; display: grid; gap: clamp(10px, 2.2vh, 22px); margin: 0; padding: 0; list-style: none; }
.hiw ol::before, .hiw ol::after { content: ""; position: absolute; left: 23px; top: 24px; width: 2px; margin-left: -1px; border-radius: 2px; pointer-events: none; }
.hiw ol::before { bottom: 24px; background: rgba(120, 150, 190, .16); }
.hiw ol::after { height: 0; background: linear-gradient(#14c4b4, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #22c55e, #06b6d4); background-size: 100% calc(100vh); box-shadow: 0 0 10px rgba(59, 130, 246, .45); animation: hiwLine var(--hiw-cycle) linear infinite; max-height: calc(100% - 48px); }
.hiw-step { --c1: #14c4b4; --c2: #0ea5e9; position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; opacity: 0; animation: hiwIn .6s cubic-bezier(.2, .7, .2, 1) forwards; }
.hiw-step--2 { --c1: #3b82f6; --c2: #6366f1; animation-delay: .08s; }
.hiw-step--3 { --c1: #8b5cf6; --c2: #a855f7; animation-delay: .16s; }
.hiw-step--4 { --c1: #ec4899; --c2: #f43f5e; animation-delay: .24s; }
.hiw-step--5 { --c1: #f59e0b; --c2: #f97316; animation-delay: .32s; }
.hiw-step--6 { --c1: #22c55e; --c2: #10b981; animation-delay: .40s; }
.hiw-step--7 { --c1: #06b6d4; --c2: #3b82f6; animation-delay: .48s; }
.hiw-step > i { position: relative; display: grid; flex: 0 0 48px; width: 48px; height: 48px; place-items: center; color: #fff; border-radius: 14px; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 6px 18px -6px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .25); animation: hiwFloat 4s ease-in-out infinite, hiwActive var(--hiw-cycle) ease-in-out infinite; }
.hiw-step > i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hiw-step > span { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 2px; align-items: baseline; min-width: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 12px; animation: hiwCard var(--hiw-cycle) ease-in-out infinite; }
.hiw-step em { color: var(--c1); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.hiw-step b { color: #f3f7fc; font-size: 16px; font-weight: 650; }
.hiw-step small { grid-column: 2; color: #8ea3bf; font-size: 12.5px; line-height: 1.35; }
.hiw-step--2 > i, .hiw-step--2 > span { animation-delay: .5s, 2s; } .hiw-step--2 > span { animation-delay: 2s; }
.hiw-step--3 > i { animation-delay: 1s, 4s; } .hiw-step--3 > span { animation-delay: 4s; }
.hiw-step--4 > i { animation-delay: 1.5s, 6s; } .hiw-step--4 > span { animation-delay: 6s; }
.hiw-step--5 > i { animation-delay: 2s, 8s; } .hiw-step--5 > span { animation-delay: 8s; }
.hiw-step--6 > i { animation-delay: 2.5s, 10s; } .hiw-step--6 > span { animation-delay: 10s; }
.hiw-step--7 > i { animation-delay: 3s, 12s; } .hiw-step--7 > span { animation-delay: 12s; }
@keyframes hiwIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes hiwFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes hiwActive {
  0%, 16%, 100% { box-shadow: 0 6px 18px -6px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .25); scale: 1; }
  4%, 11% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c1) 22%, transparent), 0 0 26px var(--c1), inset 0 1px 0 rgba(255, 255, 255, .35); scale: 1.08; }
}
@keyframes hiwCard {
  0%, 16%, 100% { border-color: transparent; background: transparent; }
  4%, 11% { border-color: color-mix(in srgb, var(--c1) 35%, transparent); background: color-mix(in srgb, var(--c1) 10%, transparent); }
}
@keyframes hiwLine { 0% { height: 0; opacity: 1; } 92% { height: calc(100% - 48px); opacity: 1; } 100% { height: calc(100% - 48px); opacity: 0; } }
@media (max-height: 760px) {
  .hiw-step > i { flex-basis: 40px; width: 40px; height: 40px; border-radius: 12px; }
  .hiw ol::before, .hiw ol::after { left: 19px; top: 20px; }
  .hiw-step > span { padding-block: 4px; }
  .hiw-step small { font-size: 11.5px; }
}
@media (max-height: 640px) { .hiw-step small { display: none; } }
@media (max-width: 1000px) { .hiw-step b { font-size: 15px; } .hiw-step small { font-size: 11.5px; } }

.auth-story__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding: 32px 0 44px; list-style: none; }
.auth-story__facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; color: #9fb4cc; font-size: 11px; border: 1px solid #16304a; border-radius: 999px; background: #0d1a2c; }
.auth-story__facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }