/* ══════════════════════════════════════════════
   ЧУЙКА · ТАКТИЧЕСКИЙ СЛОЙ ВИДЕО
   Плавное замедление → стоп-кадр → показ опасности
   ══════════════════════════════════════════════ */

.stage{isolation:isolate}

.stage video{
  position:relative;z-index:1;
  transition:filter 1.1s var(--ease),
             transform 1.1s var(--ease);
}

.tac{
  position:absolute;inset:0;z-index:10;
  overflow:hidden;pointer-events:none;
  opacity:0;
  transition:opacity .6s ease;
}
.tac.on{opacity:1}


/* ══════════ ФАЗА ЗАМЕДЛЕНИЯ ══════════ */
/* нарастает постепенно — без резкого скачка */

.stage.slow video{
  filter:saturate(1.1) contrast(1.04) brightness(.94);
  transform:scale(1.012);
}

.tac-vig{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 52%,
    transparent 0 38%,
    rgba(4,6,10,.3) 70%,
    rgba(4,6,10,.68) 100%);
  opacity:0;
  transition:opacity 1.2s var(--ease);
}
.stage.slow .tac-vig{opacity:.7}
.stage.freeze .tac-vig{opacity:1}

/* индикатор замедления — пульс в такт сердцу */
.tac-slow-tag{
  position:absolute;top:12px;left:12px;
  display:flex;align-items:center;gap:7px;
  padding:6px 11px;
  border:1px solid rgba(200,247,81,.35);
  border-radius:99px;
  background:rgba(7,8,11,.7);
  backdrop-filter:blur(8px);
  color:var(--ac);
  font:800 9.5px/1 Inter,sans-serif;
  letter-spacing:1.3px;
  opacity:0;transform:translateY(-8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.stage.slow .tac-slow-tag{opacity:1;transform:translateY(0)}
.stage.freeze .tac-slow-tag{opacity:0}

.tac-heart{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--ac);
  animation:heartBeat 1.15s ease-in-out infinite;
}
@keyframes heartBeat{
  0%{transform:scale(1);opacity:1}
  12%{transform:scale(1.5);opacity:1}
  24%{transform:scale(1);opacity:.75}
  36%{transform:scale(1.32);opacity:.95}
  50%,100%{transform:scale(1);opacity:.55}
}

/* полоса времени, замедляющаяся визуально */
.tac-timeline{
  position:absolute;left:12px;right:12px;top:36px;
  height:2px;border-radius:2px;
  background:rgba(255,255,255,.1);
  opacity:0;transition:opacity .5s ease;
}
.stage.slow .tac-timeline{opacity:1}
.stage.freeze .tac-timeline{opacity:0}
.tac-timeline i{
  display:block;height:100%;width:0;
  border-radius:2px;
  background:linear-gradient(90deg,var(--ac-dim),var(--ac));
  box-shadow:0 0 8px var(--ac-glow);
}


/* ══════════ СТОП-КАДР ══════════ */

.stage.freeze video{
  filter:grayscale(.35) contrast(1.1) brightness(.7);
  transform:scale(1.02);
}

.tac-flash{
  position:absolute;inset:0;
  background:#fff;opacity:0;
}
.tac-flash.fire{animation:flashHit .5s var(--ease)}
@keyframes flashHit{
  0%{opacity:.4}
  100%{opacity:0}
}

/* угловые скобки */
.tac-corner i{
  position:absolute;width:22px;height:22px;
  border:solid rgba(200,247,81,.65);
  opacity:0;
  transition:opacity .5s var(--ease) .1s,margin .55s var(--ease) .1s;
}
.tac-corner i:nth-child(1){top:14px;left:14px;border-width:2px 0 0 2px;margin:10px 0 0 10px}
.tac-corner i:nth-child(2){top:14px;right:14px;border-width:2px 2px 0 0;margin:10px 10px 0 0}
.tac-corner i:nth-child(3){bottom:14px;left:14px;border-width:0 0 2px 2px;margin:0 0 10px 10px}
.tac-corner i:nth-child(4){bottom:14px;right:14px;border-width:0 2px 2px 0;margin:0 10px 10px 0}
.stage.freeze .tac-corner i{opacity:1;margin:0}

/* подпись стоп-кадра */
.tac-frozen{
  position:absolute;left:50%;bottom:14px;
  transform:translate(-50%,12px);
  padding:7px 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:99px;
  background:rgba(7,8,11,.82);
  backdrop-filter:blur(10px);
  color:var(--tx-2);
  font:700 11.5px/1 Inter,sans-serif;
  letter-spacing:.4px;white-space:nowrap;
  opacity:0;
  transition:opacity .5s var(--ease) .2s,transform .5s var(--ease) .2s;
}
.stage.freeze .tac-frozen{opacity:1;transform:translate(-50%,0)}
.stage.reveal-mark .tac-frozen{opacity:0}


/* ══════════ РАМКА ОПАСНОСТИ ══════════ */
/* появляется после ответа — обучающий момент */

.tac-mark{
  position:absolute;
  transform:translate(-50%,-50%);
  display:none;
}
.tac-mark.on{display:block}

.tac-mark-box{
  position:relative;display:block;
  border:2.5px solid var(--no);
  border-radius:8px;
  background:rgba(248,113,113,.1);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.5),
    0 0 30px rgba(248,113,113,.4),
    inset 0 0 22px rgba(248,113,113,.12);
  animation:markLand .55s var(--spring) both;
}
@keyframes markLand{
  0%{transform:scale(2.4);opacity:0;border-radius:50%}
  55%{transform:scale(.94);opacity:1;border-radius:8px}
  100%{transform:scale(1);opacity:1}
}

/* пульсирующее кольцо тревоги */
.tac-mark-box::before{
  content:"";
  position:absolute;inset:-6px;
  border:2px solid var(--no);
  border-radius:12px;
  opacity:0;
  animation:markPulse 1.9s ease-out infinite .5s;
}
@keyframes markPulse{
  0%{transform:scale(.94);opacity:.75}
  70%{transform:scale(1.2);opacity:0}
  100%{opacity:0}
}

/* значок внимания */
.tac-mark-sign{
  position:absolute;top:-15px;left:50%;
  transform:translateX(-50%);
  display:grid;place-items:center;
  width:28px;height:28px;
  border-radius:9px;
  background:var(--no);
  color:#450a0a;
  font:900 15px/1 Inter,sans-serif;
  box-shadow:0 4px 14px rgba(248,113,113,.45);
  animation:signDrop .45s var(--spring) .25s both;
}
@keyframes signDrop{
  from{opacity:0;transform:translate(-50%,-14px) scale(.5)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}

/* подпись объекта */
.tac-mark-name{
  position:absolute;top:calc(100% + 10px);left:50%;
  transform:translateX(-50%);
  padding:6px 12px;
  border:1px solid rgba(248,113,113,.4);
  border-radius:99px;
  background:rgba(7,8,11,.9);
  backdrop-filter:blur(8px);
  color:#fca5a5;
  font:800 10.5px/1 Inter,sans-serif;
  letter-spacing:.9px;text-transform:uppercase;
  white-space:nowrap;
  animation:nameUp .45s var(--ease) .38s both;
}
@keyframes nameUp{
  from{opacity:0;transform:translate(-50%,-7px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* когда показана опасность — кадр чуть светлеет */
.stage.reveal-mark video{
  filter:grayscale(.12) contrast(1.06) brightness(.82);
}
.stage.reveal-mark .tac-vig{opacity:.85}
.stage.reveal-mark .tac-corner i{opacity:.35}


/* ══════════ МОБИЛЬНОЕ ══════════ */

@media (max-width:560px){
  .tac-slow-tag{top:9px;left:9px;padding:5px 9px}
  .tac-timeline{top:30px;left:9px;right:9px}
  .tac-corner i{width:16px;height:16px}
  .tac-frozen{bottom:10px;font-size:10.5px;padding:6px 12px}
  .tac-mark-sign{width:24px;height:24px;font-size:13px;top:-13px}
  .tac-mark-name{font-size:9.5px;padding:5px 10px}
}


/* ══════════ ДОСТУПНОСТЬ ══════════ */

@media (prefers-reduced-motion:reduce){
  .tac-heart,.tac-mark-box,.tac-mark-box::before{animation:none !important}
  .stage video{transition:none}
}