/* Carstream product-video — hero play button + modal player.
   Loaded only on the home pages (UA + EN). The button overlays the existing
   live-dashboard mock; clicking opens a centered modal that lazily mounts the
   React feature film (carstream-video.js). */

/* ── Play button over the hero dashboard mock ───────────────────────── */
.mock-play {
  position: absolute; inset: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  margin: 0; padding: 0; border: 0; cursor: pointer;
  border-radius: 16px;
  background: radial-gradient(62% 62% at 50% 50%, rgba(5, 8, 13, 0.34), rgba(5, 8, 13, 0.6));
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease;
}
.mock-play:hover,
.mock-play:focus-visible {
  outline: none;
  background: radial-gradient(62% 62% at 50% 50%, rgba(5, 8, 13, 0.44), rgba(5, 8, 13, 0.72));
}
.mock-play-rings {
  position: absolute; width: 88px; height: 88px; border-radius: 50%;
  pointer-events: none;
}
.mock-play-rings::before,
.mock-play-rings::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--accent-hi, #74c8e0);
  animation: mock-ring 2.4s ease-out infinite;
}
.mock-play-rings::after { animation-delay: 1.2s; }
@keyframes mock-ring {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(2.1); opacity: 0; }
}
.mock-play-btn {
  position: relative; z-index: 2;
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-hi, #74c8e0);
  box-shadow: 0 0 40px rgba(86, 184, 212, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mock-play:hover .mock-play-btn,
.mock-play:focus-visible .mock-play-btn {
  transform: scale(1.07);
  box-shadow: 0 0 58px rgba(116, 200, 224, 0.62);
}
.mock-play-btn svg { margin-left: 5px; display: block; }

/* ── Modal player ───────────────────────────────────────────────────── */
.csv-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; padding: 24px;
}
.csv-backdrop {
  position: absolute; inset: 0;
  background: rgba(3, 5, 8, 0.86);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: csv-fade 0.2s ease;
}
.csv-frame {
  position: relative;
  width: min(94vw, 1600px);
  height: min(88vh, 900px);
  background: #000;
  border: 1px solid var(--line-2, #1b2836);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  animation: csv-pop 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.csv-mount { position: absolute; inset: 0; }
.csv-close {
  position: absolute; top: 12px; left: 12px; z-index: 300;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 13, 19, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #eef4fa; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 0.2s ease;
}
.csv-close:hover { background: rgba(255, 255, 255, 0.14); }
.csv-loading {
  position: absolute; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3, #8a98a8);
  font-family: var(--font-body, "Manrope"), system-ui, sans-serif; font-size: 16px;
}
@keyframes csv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes csv-pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .mock-play-btn, .mock-play-rings { width: 66px; height: 66px; }
  .csv-modal { padding: 12px; }
  .csv-frame { height: min(74vh, 560px); }
}
@media (prefers-reduced-motion: reduce) {
  .mock-play-rings::before, .mock-play-rings::after { animation: none; opacity: 0; }
  .csv-backdrop, .csv-frame { animation: none; }
}