/* ==========================================================================
   Фрагменти — Контакт-лист
   scenes.css: Camcorder OSD, scanlines, and SVG character/scene animations
   ========================================================================== */

.vid {
  position: relative;
  overflow: hidden;
  background: #222;
  isolation: isolate;
  max-width: 100%;
}

.vid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.14) 2px 3px);
}

.vid > *:not(.scene) {
  z-index: 2;
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.piv {
  transform-box: view-box;
  transform-origin: 0px 0px;
}

.tw {
  animation: tw 1.6s ease-in-out infinite alternate;
}

@keyframes tw {
  from {
    opacity: 0.25;
  }
  to {
    opacity: 1;
  }
}

.swy {
  transform-box: view-box;
  transform-origin: 0px 0px;
  animation: sway 3.2s ease-in-out infinite alternate;
}

@keyframes sway {
  from {
    transform: rotate(-3.5deg);
  }
  to {
    transform: rotate(3.5deg);
  }
}

.bob {
  animation: bob 0.75s ease-in-out infinite alternate;
}

@keyframes bob {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-3.5px);
  }
}

.danceL {
  animation: danceL 0.75s ease-in-out infinite alternate;
}

.danceR {
  animation: danceR 0.75s ease-in-out infinite alternate;
}

@keyframes danceL {
  from {
    transform: rotate(-16deg);
  }
  to {
    transform: rotate(22deg);
  }
}

@keyframes danceR {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(-22deg);
  }
}

.waveArm {
  animation: waveArm 1.8s ease-in-out infinite alternate;
}

@keyframes waveArm {
  from {
    transform: rotate(-8deg);
  }
  to {
    transform: rotate(14deg);
  }
}

.fall {
  animation: fall 5s linear infinite;
}

@keyframes fall {
  from {
    transform: translate(0, -16px) rotate(0deg);
  }
  to {
    transform: translate(12px, 125px) rotate(200deg);
  }
}

.rise {
  animation: rise 2.4s ease-in infinite;
}

@keyframes rise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  25% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(-26px);
    opacity: 0;
  }
}

.spin {
  transform-box: view-box;
  transform-origin: 80px 14px;
  animation: spin 3.8s ease-in-out infinite alternate;
}

@keyframes spin {
  from {
    transform: rotate(-22deg);
  }
  to {
    transform: rotate(22deg);
  }
}

.flick {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flick 0.35s steps(2) infinite;
}

@keyframes flick {
  50% {
    opacity: 0.65;
    transform: scaleY(0.86);
  }
}

.clinkL {
  animation: clL 2.6s ease-in-out infinite;
}

.clinkR {
  animation: clR 2.6s ease-in-out infinite;
}

.clinkPop {
  animation: clPop 2.6s ease-in-out infinite;
}

@keyframes clL {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
  }
  70%,
  78% {
    transform: rotate(-18deg);
  }
}

@keyframes clR {
  0%,
  50%,
  100% {
    transform: rotate(0deg);
  }
  70%,
  78% {
    transform: rotate(18deg);
  }
}

@keyframes clPop {
  0%,
  64%,
  86%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  73% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.tapL {
  animation: tapL 0.55s ease-in-out infinite alternate;
}

.tapR {
  animation: tapR 0.55s ease-in-out infinite alternate;
}

@keyframes tapL {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-11deg);
  }
}

@keyframes tapR {
  from {
    transform: rotate(-3deg);
  }
  to {
    transform: rotate(9deg);
  }
}

.passCam {
  animation: passCam 2.8s ease-in-out infinite alternate;
}

.passArmL {
  animation: passArmL 2.8s ease-in-out infinite alternate;
}

.passArmR {
  animation: passArmR 2.8s ease-in-out infinite alternate;
}

@keyframes passCam {
  from {
    transform: translateX(-11px) rotate(-3deg);
  }
  to {
    transform: translateX(11px) rotate(3deg);
  }
}

@keyframes passArmL {
  from {
    transform: rotate(6deg);
  }
  to {
    transform: rotate(-14deg);
  }
}

@keyframes passArmR {
  from {
    transform: rotate(14deg);
  }
  to {
    transform: rotate(-6deg);
  }
}

.spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: spark 0.38s ease-in-out infinite alternate;
}

@keyframes spark {
  from {
    transform: scale(0.68);
    opacity: 0.6;
  }
  to {
    transform: scale(1.22);
    opacity: 1;
  }
}

.raise {
  animation: raise 2.8s ease-in-out infinite;
}

@keyframes raise {
  0%,
  100% {
    transform: rotate(4deg);
  }
  50% {
    transform: rotate(-16deg);
  }
}

.beam {
  animation: beam 4s ease-in-out infinite alternate;
}

@keyframes beam {
  from {
    opacity: 0.18;
  }
  to {
    opacity: 0.48;
  }
}

.steam {
  animation: steam 2.8s ease-in-out infinite;
}

@keyframes steam {
  0% {
    transform: translateY(3px);
    opacity: 0;
  }
  40% {
    opacity: 0.85;
  }
  100% {
    transform: translateY(-12px);
    opacity: 0;
  }
}

.osd {
  position: absolute;
  inset: 8px 10px;
  z-index: 2;
  pointer-events: none;
  font: 500 0.64rem/1.2 var(--f-mono);
  letter-spacing: 0.06em;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
}

.osd > span:not(:empty) {
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 5px;
  width: max-content;
  max-width: 100%;
}

.osd .rec {
  display: flex;
  align-items: center;
  gap: 5px;
}

.osd .rec i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff4b3e;
  animation: tw 1s steps(2) infinite;
}

.osd .ts {
  grid-row: 3;
  grid-column: 1;
  align-self: end;
}

.osd .who {
  grid-row: 3;
  grid-column: 2;
  align-self: end;
  justify-self: end;
  text-align: right;
}

.review .osd {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}