/* =========================================================
   ДАРСИ — блок «Лучшие видео со свадеб».
   Видео фоном, по центру заголовок и кнопка плей.
   По клику оверлей уходит и видео играет со звуком.
   ========================================================= */

.reel{
  position:relative;
  padding:clamp(56px,7vw,110px) var(--pad-x) clamp(56px,7vw,110px);
  background:#0B0B0C; color:#fff;
}
.reel__inner{width:100%; max-width:var(--maxw); margin:0 auto}

/* ---------- заголовок над видео ---------- */
.reel__head{text-align:center; margin-bottom:clamp(28px,3.4vw,48px)}

/* ---------- сцена с видео ---------- */
.reel__stage{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(420px, 66svh, 720px);
  display:grid; place-items:center;
  background:#0B0B0C;
}

.reel__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1s ease;
}
.reel__video.is-ready{opacity:1}

/* затемнение — уходит вместе с оверлеем */
.reel__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,8,9,.55) 0%, rgba(8,8,9,.42) 45%, rgba(8,8,9,.62) 100%),
    rgba(8,8,9,.18);
  transition:opacity .6s ease;
}

.reel__overlay{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.reel__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(30px, 3.6vw, 50px); line-height:1; letter-spacing:-.015em;
  margin:0;
}

/* ---------- кнопка плей ---------- */
.reel__play{
  position:relative; width:clamp(74px,6vw,96px); height:clamp(74px,6vw,96px);
  display:grid; place-items:center; border-radius:50%;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; cursor:pointer;
  transition:background .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.reel__play:hover{background:rgba(255,255,255,.28); transform:scale(1.06)}
.reel__play svg{
  width:clamp(22px,1.7vw,28px); height:clamp(22px,1.7vw,28px);
  fill:currentColor; margin-left:4px; position:relative; z-index:1;
}
.reel__play::before,
.reel__play::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(255,255,255,.5);
}
.reel__play::before{animation:reelRing 3s cubic-bezier(0,0,.2,1) infinite}
.reel__play::after{animation:reelRing 3s cubic-bezier(0,0,.2,1) infinite 1.5s}
@keyframes reelRing{
  0%{transform:scale(1); opacity:.65}
  70%,100%{transform:scale(1.5); opacity:0}
}

/* прозрачный слой для паузы по клику — появляется только во время проигрывания */
.reel__hit{position:absolute; inset:0; z-index:2; display:none; cursor:pointer}
.reel.is-playing .reel__hit{display:block}

/* ---------- состояние «играет» ---------- */
.reel.is-playing .reel__overlay{opacity:0; transform:scale(.96); pointer-events:none}
.reel.is-playing .reel__scrim{opacity:0}

/* маленький контрол поверх — вернуть звук/паузу */
.reel__ctrl{
  position:absolute; left:clamp(16px,2vw,28px); bottom:clamp(16px,2vw,28px); z-index:3;
  display:none; align-items:center; gap:8px;
  height:42px; padding:0 16px;
  background:rgba(11,11,12,.7); color:#fff;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-size:13px; letter-spacing:-.03em;
  transition:background .25s ease;
}
.reel.is-playing .reel__ctrl{display:inline-flex}
.reel__ctrl:hover{background:rgba(11,11,12,.9)}
.reel__ctrl svg{width:15px; height:15px; fill:currentColor}

/* значок паузы, когда видео остановлено */
.reel__hit::after{
  content:''; position:absolute; left:50%; top:50%; width:78px; height:78px;
  transform:translate(-50%,-50%) scale(.9); border-radius:50%;
  background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2 19 12 8 18.8V5.2Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.reel.is-paused .reel__hit::after{opacity:1; transform:translate(-50%,-50%) scale(1)}

@media (max-width:720px){
  .reel{padding-bottom:calc(var(--bar-h, 0px) + env(safe-area-inset-bottom))}
  .reel__stage{min-height:clamp(320px, 48svh, 460px)}
}

@media (prefers-reduced-motion:reduce){
  .reel__play::before,.reel__play::after{animation:none; opacity:0}
  .reel__video{opacity:1}
}

@media (max-width:900px){
  .reel__play{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(255,255,255,.26)}
}