/* =========================================================
   ЗЕЛЕМІНЬ — «ЗЕЛЕМІНЬ наживо»
   Широкий кадр з відео без звуку; по центру кнопка «зі звуком», знизу ліворуч назва.
   ========================================================= */
.live { background: var(--forest-950); padding: 0 var(--gutter) clamp(80px, 9vw, 140px); }
.live__frame {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: var(--container); margin: 0 auto; aspect-ratio: 21 / 9; max-height: 82svh; min-height: 420px;
  border-radius: 32px; background: var(--forest-900);
  box-shadow: inset 0 0 0 1px rgba(240, 224, 184, .1);
}
.live__poster { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; animation: liveDrift 24s ease-in-out infinite alternate; }
@keyframes liveDrift { from { transform: scale(1.02) translateX(0); } to { transform: scale(1.1) translateX(-1.5%); } }
.live__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(0deg, rgba(10, 13, 7, .88) 0%, rgba(10, 13, 7, .25) 45%, rgba(10, 13, 7, .1) 70%, rgba(10, 13, 7, .45) 100%),
    radial-gradient(60% 60% at 50% 50%, transparent 40%, rgba(10, 13, 7, .35) 100%);
}

.live__rec {
  position: absolute; left: clamp(20px, 3vw, 44px); top: clamp(20px, 3vw, 40px);
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px;
  background: rgba(16, 21, 12, .5); border: 1px solid rgba(240, 224, 184, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cream);
}
.live__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(242, 180, 101, .6); animation: recPulse 1.8s ease-in-out infinite; }
@keyframes recPulse { 50% { box-shadow: 0 0 0 6px rgba(242, 180, 101, 0); opacity: .6; } }

.live__play {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 16px; padding: 0; border: 0; background: none; color: var(--cream); cursor: pointer;
}
.live__play-core {
  position: relative; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(240, 224, 184, .16); border: 1px solid rgba(240, 224, 184, .5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .6s var(--ease), background .4s, color .4s;
}
.live__play-core svg { margin-left: 4px; }
.live__play-core::before, .live__play-core::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(240, 224, 184, .5);
  animation: livePing 3s var(--ease) infinite;
}
.live__play-core::after { animation-delay: 1.5s; }
@keyframes livePing { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }
.live__play-txt { white-space: nowrap; font-size: .8rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; opacity: .85; transition: opacity .3s; }
.live__play:hover .live__play-core { transform: scale(1.1); background: var(--cream); color: var(--forest-900); }
.live__play:hover .live__play-txt { opacity: 1; }

.live__text { position: absolute; left: clamp(20px, 3vw, 44px); right: clamp(20px, 3vw, 44px); bottom: clamp(22px, 3vw, 44px); max-width: 760px; }
.live__eyebrow { margin: 0 0 10px; font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--moss-300); }
.live__title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 1.4rem + 3.6vw, 5.6rem); line-height: .95; letter-spacing: -.01em; }
.live__title em { font-style: italic; font-weight: 500; background: linear-gradient(180deg, #fff4dc 0%, var(--cream) 40%, #e2b06a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.live__lead { margin: 14px 0 0; max-width: 34em; font-size: 1.05rem; line-height: 1.6; color: var(--cream-soft); }

@media (max-width: 760px) {
  .live__frame { aspect-ratio: auto; height: 78svh; min-height: 520px; max-height: none; border-radius: 24px; }
  .live__play { top: 40%; }
  .live__play-core { width: 84px; height: 84px; }
  .live__lead { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .live__poster { animation: none; } }