/* ═══════════════════════════════════════════════════════════════
   ГОЛОСОВОЕ ПОЗДРАВЛЕНИЕ
   ═══════════════════════════════════════════════════════════════
   Видеофайла нет: звучит голос, картинку рисует сайт.
   ═══════════════════════════════════════════════════════════════ */

.cine {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: #05060a;
  padding: 0;
  transition: opacity .9s;
}

.cine--out { opacity: 0 }

/* ── дрейфующие фотки ─────────────────────────────────────── */
.cine__stage { position: absolute; inset: 0; overflow: hidden }

.cine__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: cinePhoto 22s ease-in-out infinite;
  will-change: transform, opacity;
}

/* каждая следующая фотка вступает со своей задержкой */
@keyframes cinePhoto {
  0%   { opacity: 0; transform: scale(1.16) translate(2%, 1%) }
  8%   { opacity: .5 }
  30%  { opacity: .5 }
  40%  { opacity: 0; transform: scale(1.02) translate(-2%, -1%) }
  100% { opacity: 0 }
}

/* ── свечение и помехи ────────────────────────────────────── */
.cine__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0, 229, 122, .16), transparent 62%),
    radial-gradient(ellipse at 15% 85%, rgba(58, 160, 255, .12), transparent 60%),
    linear-gradient(180deg, rgba(5,6,10,.55), rgba(5,6,10,.9));
  animation: cineBreathe 7s ease-in-out infinite;
}

@keyframes cineBreathe {
  0%, 100% { opacity: .85 }
  50%      { opacity: 1 }
}

.cine__scan {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  opacity: .5;
  pointer-events: none;
}

/* ── реплики ──────────────────────────────────────────────── */
.cine__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  display: flex;
  justify-content: center;
  padding: 0 clamp(16px, 6vw, 90px);
  pointer-events: none;
}

.cine__line {
  max-width: 900px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(20px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1.28;
  color: #b9ffdc;
  text-wrap: balance;
  text-shadow:
    0 0 12px rgba(0, 229, 122, .65),
    0 0 44px rgba(0, 229, 122, .35);
  animation: cineLine .7s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes cineLine {
  from { opacity: 0; transform: translateY(22px) scale(.97); filter: blur(6px) }
  to   { opacity: 1; transform: none; filter: none }
}

.cine__skip {
  position: absolute;
  right: 20px;
  bottom: 20px;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 13px;
  color: var(--text-faint);
  background: rgba(0,0,0,.5);
  box-shadow: inset 0 0 0 1px var(--line);
  opacity: 0;
  animation: fadeIn .6s ease 6s forwards;
}

.cine__skip:hover { color: var(--text-dim) }

.cine__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}