/* Видео с хакатона: кнопки, подсказка со стрелкой, блок в конце, попап. */

.pv-cta {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 28px;
}

.pv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 26px 14px 16px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--bg, #0b0f22);
  background: var(--ink, #f7f3ec);
  cursor: pointer;
  box-shadow: 0 0 32px color-mix(in srgb, var(--accent, #f0b46a) 45%, transparent);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pv-btn:hover { transform: translateY(-2px); box-shadow: 0 0 44px color-mix(in srgb, var(--accent, #f0b46a) 65%, transparent); }
.pv-btn:focus-visible, .pv-close:focus-visible, .pv-card:focus-visible, .pv-pill:focus-visible {
  outline: 2px solid var(--accent, #f0b46a);
  outline-offset: 3px;
}

.pv-btn-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg, #0b0f22);
  color: var(--ink, #f7f3ec);
}
.pv-btn-icon svg { width: 12px; height: 12px; margin-left: 2px; }

/* пульсирующее кольцо вокруг кнопки */
.pv-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--accent, #f0b46a);
  opacity: 0;
  pointer-events: none;
  animation: pv-ring 2.4s ease-out infinite;
}
@keyframes pv-ring {
  0% { transform: scale(1); opacity: 0.85; }
  70%, 100% { transform: scale(1.35, 1.7); opacity: 0; }
}

/* стрелка от руки + подпись, указывают на кнопку */
.pv-pointer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent, #f0b46a);
  font-size: 15px;
  font-style: italic;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  animation: pv-nudge 1.6s ease-in-out infinite;
  transition: opacity 0.6s ease, visibility 0.6s;
}
.pv-pointer svg { width: 74px; height: 38px; flex: none; overflow: visible; }
.pv-pointer path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pv-pointer .pv-draw { stroke-dasharray: 120; stroke-dashoffset: 120; animation: pv-draw 0.9s 0.5s ease-out forwards; }
.pv-pointer .pv-head { opacity: 0; animation: pv-fade 0.3s 1.3s forwards; }
.pv-pointer.is-off { opacity: 0; visibility: hidden; }
@keyframes pv-draw { to { stroke-dashoffset: 0; } }
@keyframes pv-fade { to { opacity: 1; } }
@keyframes pv-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }

/* кнопка в шапке */
.pv-pill { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: 14px; }
.pv-pill svg { width: 10px; height: 10px; }

/* блок в конце истории */
.pv-end { position: relative; padding: 40px var(--gutter, 24px) clamp(80px, 12vh, 130px); background: var(--bg, #0b0f22); }
.pv-end-inner { max-width: 1160px; margin: 0 auto; }
.pv-end h2 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 52px); font-weight: 300; line-height: 1.1; color: var(--ink, #f7f3ec); }
.pv-end p { max-width: 560px; margin: 0 0 32px; font-size: 18px; line-height: 1.5; color: var(--ink-soft, rgba(247, 243, 236, 0.78)); }
.pv-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  padding: 0;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.16));
  border-radius: 32px 32px 32px 10px;
  overflow: hidden;
  cursor: pointer;
  background: #0b0f22 center / cover no-repeat;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
.pv-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 15, 34, 0.15), rgba(11, 15, 34, 0.7)); transition: opacity 0.3s; }
.pv-card:hover::before { opacity: 0.7; }
.pv-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: clamp(72px, 10vw, 112px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--bg, #0b0f22);
  background: var(--ink, #f7f3ec);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 60px color-mix(in srgb, var(--accent, #f0b46a) 55%, transparent);
  transition: transform 0.3s ease;
}
.pv-card:hover .pv-card-play { transform: translate(-50%, -50%) scale(1.08); }
.pv-card-play svg { width: 36%; height: 36%; margin-left: 6%; }
.pv-card-label {
  position: absolute;
  left: clamp(18px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 28px);
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--ink, #f7f3ec);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
}

/* попап */
.pv-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(5, 8, 18, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.pv-modal.is-open { opacity: 1; visibility: visible; }
.pv-frame {
  position: relative;
  width: min(1100px, 100%, calc((100vh - 96px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 0.25s ease;
}
.pv-modal.is-open .pv-frame { transform: none; }
.pv-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pv-close {
  position: absolute;
  top: clamp(10px, 2vw, 22px);
  right: clamp(10px, 2vw, 22px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  background: rgba(14, 20, 26, 0.7);
}
body.pv-lock { overflow: hidden; }

@media (max-width: 560px) {
  .pv-btn { font-size: 15px; padding: 12px 22px 12px 14px; }
  .pv-pointer svg { width: 52px; transform: scaleY(-1); }
  .pv-pointer { font-size: 14px; }
  .pv-card { border-radius: 22px 22px 22px 8px; }
  .pv-close { top: 8px; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-btn::after, .pv-pointer { animation: none; }
  .pv-pointer .pv-draw { animation: none; stroke-dashoffset: 0; }
  .pv-pointer .pv-head { animation: none; opacity: 1; }
  .pv-modal, .pv-frame, .pv-btn, .pv-card-play { transition: none; }
}