/* =========================================================
   BlinkyHost · Анимированные сцены карточек «Преимущества»
   ========================================================= */

/* ——— карточка как модуль: тёмная сцена сверху, текст снизу ——— */
.adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.adv {
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 0; gap: 0;
  border-radius: var(--r-3);
  overflow: hidden;
  transition: transform var(--t-2) var(--e-out), box-shadow var(--t-2);
}
.adv:hover { transform: translateY(-6px); box-shadow: var(--sh-3), var(--glass-hi); }

.adv__stage {
  position: relative;
  height: 156px;
  background: var(--panel-grad);
  border-bottom: 1px solid rgba(143,178,255,.16);
  overflow: hidden;
}
.adv__stage::after { /* лёгкий блик-стекло поверх сцены */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 80% -20%, rgba(143,178,255,.16), transparent 60%);
}
.adv__n { position: absolute; top: 12px; right: 14px; z-index: 4; font-size: .72rem; color: rgba(170,190,240,.75); }

.adv__meta { display: flex; gap: 14px; padding: 20px 22px 24px; align-items: flex-start; }
.adv__ico {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--azure), var(--cobalt));
  color: #fff; display: grid; place-items: center; box-shadow: var(--sh-cobalt);
}
.adv__ico svg { width: 22px; height: 22px; }
.adv__txt h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.04rem; margin-bottom: 6px; letter-spacing: -.035em; }
.adv__txt p { color: var(--tx-2); font-size: .92rem; }

/* общий контейнер сцены */
.fx { position: absolute; inset: 0; z-index: 2; }

/* ============ 1 · DEPLOY (сервер + терминал) ============ */
.fx--deploy { display: flex; align-items: center; gap: 13px; padding: 0 18px; }
.fx-rack {
  width: 70px; height: 108px; flex-shrink: 0;
  border-radius: 10px; padding: 9px 8px;
  background: linear-gradient(180deg, #1b2a5e, #0e1738);
  border: 1px solid rgba(143,178,255,.25);
  box-shadow: inset 0 0 18px rgba(0,0,0,.45);
  display: flex; flex-direction: column; gap: 7px;
}
.fx-bay { flex: 1; border-radius: 4px; background: rgba(143,178,255,.07); border: 1px solid rgba(143,178,255,.12); display: flex; align-items: center; justify-content: space-between; padding: 0 7px; }
.fx-bay span { width: 18px; height: 3px; border-radius: 2px; background: rgba(143,178,255,.32); }
.fx-bay i { width: 6px; height: 6px; border-radius: 50%; background: #16c784; box-shadow: 0 0 7px #16c784; animation: led 1.5s steps(1) infinite; }
.fx-bay:nth-child(2) i { background: #12d6c2; box-shadow: 0 0 7px #12d6c2; animation-delay: .5s; }
.fx-bay:nth-child(3) i { background: #f5a524; box-shadow: 0 0 7px #f5a524; animation-delay: .9s; }
.fx-bay:nth-child(4) i { animation-delay: .3s; }
@keyframes led { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .16; } }

.fx-term {
  flex: 1; align-self: stretch; margin: 14px 0;
  background: rgba(4,9,28,.6); border: 1px solid rgba(143,178,255,.16);
  border-radius: 10px; padding: 12px 13px;
  font-family: var(--f-mono); font-size: .72rem; color: #9fb2e8;
  display: flex; flex-direction: column; gap: 7px; overflow: hidden;
}
.fx-term__line { white-space: nowrap; overflow: hidden; }
.fx-term__line b { color: #12d6c2; }
.fx-term__cmd { color: #cfdaff; }
.fx-term__cmd::after { content: "▋"; color: #12d6c2; margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.fx-term__bar { height: 7px; border-radius: 4px; background: rgba(143,178,255,.16); overflow: hidden; margin-top: auto; }
.fx-term__bar > i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #3b6cff, #12d6c2); transition: width .24s linear; }
.fx-term__pct { color: #12d6c2; align-self: flex-end; }

/* ============ 2 · LOCK (конфиденциальность) ============ */
.fx--lock { display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.fx-lock { position: relative; width: 58px; height: 66px; flex-shrink: 0; animation: floaty 4s var(--e-out) infinite alternate; }
.fx-lock__shackle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 34px; height: 32px; border: 5px solid #8fb2ff; border-bottom: none; border-radius: 18px 18px 0 0; }
.fx-lock__body { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 42px; border-radius: 11px; background: linear-gradient(180deg, #3b6cff, #2438e0); box-shadow: 0 6px 18px rgba(36,56,224,.55); animation: lockGlow 2.6s ease-in-out infinite; }
.fx-lock__body::after { content: ""; position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: #0a1136; box-shadow: 0 9px 0 -2px #0a1136; }
@keyframes lockGlow { 0%, 100% { box-shadow: 0 6px 18px rgba(36,56,224,.45); } 50% { box-shadow: 0 6px 26px rgba(18,214,194,.6); } }
@keyframes floaty { to { transform: translateY(-7px); } }
.fx-cipher { flex: 1; display: flex; flex-direction: column; gap: 9px; font-family: var(--f-mono); font-size: .82rem; letter-spacing: .16em; color: #6f80bd; }
.fx-cipher__row { white-space: nowrap; overflow: hidden; transition: color .2s; }
.fx-cipher__row.is-locked { color: #12d6c2; }

/* ============ 3 · DDOS (снаряды + щит) ============ */
.fx--ddos { overflow: hidden; }
.fx-target { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); width: 50px; height: 60px; border-radius: 11px; background: linear-gradient(180deg, #1b2a5e, #0e1738); border: 1px solid rgba(143,178,255,.3); display: grid; place-items: center; color: #8fb2ff; z-index: 3; }
.fx-target svg { width: 26px; height: 26px; }
.fx-shield { position: absolute; right: 70px; top: 50%; width: 66px; height: 116px; transform: translateY(-50%); border: 2px solid rgba(18,214,194,.55); border-radius: 50%; clip-path: inset(0 52% 0 0); animation: shieldPulse 2.2s ease-in-out infinite; z-index: 3; }
@keyframes shieldPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; box-shadow: -6px 0 20px rgba(18,214,194,.4); } }
.fx-shot { position: absolute; left: -14px; width: 9px; height: 9px; border-radius: 50%; background: #f04461; box-shadow: 0 0 10px #f04461; animation: shot 2.3s cubic-bezier(.4,0,1,.6) infinite; z-index: 2; }
@keyframes shot {
  0%   { transform: translateX(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  62%  { transform: translateX(150px) scale(1); opacity: 1; }
  72%  { transform: translateX(166px) scale(1.7); opacity: .9; }
  80%, 100% { transform: translateX(166px) scale(.2); opacity: 0; }
}

/* ============ 4 · NVMe (скорость) ============ */
.fx--nvme { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 22px; }
.fx-speed { display: flex; align-items: baseline; gap: 8px; font-family: var(--f-mono); }
.fx-speed b { font-size: 1.85rem; letter-spacing: -.03em; background: linear-gradient(90deg, #8fb2ff, #12d6c2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-speed span { color: #7f8fc8; font-size: .8rem; }
.fx-bars { display: flex; align-items: flex-end; gap: 4px; height: 36px; }
.fx-bars i { flex: 1; border-radius: 2px; background: linear-gradient(180deg, #12d6c2, #3b6cff); transform-origin: bottom; transform: scaleY(.3); animation: eq 1.05s ease-in-out infinite; animation-delay: calc(var(--i) * -85ms); }
.fx-file { height: 6px; border-radius: 4px; background: rgba(143,178,255,.16); overflow: hidden; }
.fx-file > i { display: block; height: 100%; width: 8%; border-radius: 4px; background: linear-gradient(90deg, #3b6cff, #12d6c2); animation: fileFill 2.6s ease-in-out infinite; }
@keyframes fileFill { 0% { width: 6%; } 90%, 100% { width: 100%; } }

/* ============ 5 · FLEX (гибкая конфигурация) ============ */
.fx--flex { display: flex; align-items: center; gap: 16px; padding: 0 20px; }
.fx-cfg { flex: 1; display: flex; flex-direction: column; gap: 11px; }
.fx-cfg__row { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: .7rem; color: #9fb2e8; }
.fx-cfg__track { height: 8px; border-radius: 5px; background: rgba(143,178,255,.16); overflow: hidden; }
.fx-cfg__track > i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #3b6cff, #12d6c2); transform-origin: left; }
.fx-cfg__row:nth-child(1) .fx-cfg__track > i { width: 100%; animation: cfgA 3.4s ease-in-out infinite; }
.fx-cfg__row:nth-child(2) .fx-cfg__track > i { width: 100%; animation: cfgB 3.4s ease-in-out infinite; }
.fx-cfg__row:nth-child(3) .fx-cfg__track > i { width: 100%; animation: cfgC 3.4s ease-in-out infinite; }
@keyframes cfgA { 0%, 100% { transform: scaleX(.45); } 50% { transform: scaleX(.9); } }
@keyframes cfgB { 0%, 100% { transform: scaleX(.75); } 50% { transform: scaleX(.35); } }
@keyframes cfgC { 0%, 100% { transform: scaleX(.55); } 50% { transform: scaleX(1); } }
.fx-swap { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #12d6c2; border: 1px solid rgba(18,214,194,.4); background: rgba(18,214,194,.08); animation: spin 7s linear infinite; }
.fx-swap svg { width: 22px; height: 22px; }

/* ============ 6 · SUPPORT (оператор + чат) ============ */
.fx--support { display: flex; align-items: center; gap: 14px; padding: 0 18px; }
.fx-agent { position: relative; width: 60px; height: 66px; flex-shrink: 0; }
.fx-agent__head { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(180deg, #cfdaff, #8fb2ff); z-index: 2; }
.fx-agent__body { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 26px; border-radius: 24px 24px 9px 9px; background: linear-gradient(180deg, #3b6cff, #2438e0); }
.fx-agent__band { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 38px; height: 22px; border: 4px solid #12d6c2; border-bottom: none; border-radius: 19px 19px 0 0; z-index: 3; }
.fx-agent__cup { position: absolute; top: 18px; width: 8px; height: 14px; border-radius: 3px; background: #12d6c2; z-index: 3; box-shadow: 0 0 8px rgba(18,214,194,.5); }
.fx-agent__cup--l { left: 11px; }
.fx-agent__cup--r { right: 11px; }
.fx-agent__mic { position: absolute; top: 30px; left: 16px; width: 10px; height: 12px; border-left: 3px solid #12d6c2; border-bottom: 3px solid #12d6c2; border-radius: 0 0 0 6px; z-index: 3; }
.fx-agent__live { position: absolute; top: 8px; right: 6px; width: 9px; height: 9px; border-radius: 50%; background: #16c784; box-shadow: 0 0 0 0 rgba(22,199,132,.5); animation: pulseDot 1.6s var(--e-out) infinite; z-index: 4; }
.fx-chat { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.fx-chat__b { max-width: 88%; padding: 7px 11px; font-size: .72rem; border-radius: 13px; opacity: 0; animation: chatCycle 6s var(--e-out) infinite; }
.fx-chat__b--in { align-self: flex-start; background: rgba(143,178,255,.18); color: #dbe5ff; border-bottom-left-radius: 3px; }
.fx-chat__b--out { align-self: flex-end; background: linear-gradient(90deg, #3b6cff, #2438e0); color: #fff; border-bottom-right-radius: 3px; }
.fx-chat__b:nth-child(1) { animation-delay: 0s; }
.fx-chat__b:nth-child(2) { animation-delay: 1.4s; }
.fx-chat__b:nth-child(3) { animation-delay: 2.8s; }
@keyframes chatCycle {
  0%   { opacity: 0; transform: translateY(8px) scale(.96); }
  6%   { opacity: 1; transform: none; }
  82%  { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-6px); }
}
.fx-chat__typing { display: inline-flex; gap: 4px; align-items: center; }
.fx-chat__typing i { width: 6px; height: 6px; border-radius: 50%; background: #8fb2ff; animation: typing 1.1s ease-in-out infinite; }
.fx-chat__typing i:nth-child(2) { animation-delay: .15s; }
.fx-chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }

@media (max-width: 1024px) { .adv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .adv-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .fx-bay i, .fx-term__cmd::after, .fx-lock, .fx-lock__body, .fx-shield, .fx-shot,
  .fx-bars i, .fx-file > i, .fx-cfg__track > i, .fx-swap, .fx-chat__b, .fx-chat__typing i,
  .fx-agent__live { animation: none !important; }
  .fx-shot { display: none; }
  .fx-chat__b { opacity: 1; }
}