/* ═══ WRAPPED EQUALS — fullscreen stories-like presentation ═══ */
#wrapped-overlay{
  position:fixed; inset:0; z-index:10000;
  display:none;
  background:#000;
  overflow:hidden;
  font-family:'Inter',sans-serif;
  color:#fff;
  user-select:none;
  -webkit-user-select:none;
}
#wrapped-overlay.open{display:block;}

/* Бар прогресса — точки */
#wrapped-progress{
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  left:14px; right:64px;
  z-index:30;
  display:flex; gap:4px;
}
.wp-dot{
  flex:1; height:3px;
  background:rgba(255,255,255,.2);
  border-radius:3px;
  overflow:hidden;
  position:relative;
}
.wp-dot.done{background:rgba(255,255,255,.85);}
.wp-dot.active::after{
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:0; background:#fff;
  animation:wpFill var(--wp-duration,5s) linear forwards;
}
@keyframes wpFill{from{width:0;}to{width:100%;}}

#wrapped-close{
  position:absolute;
  top:max(10px, env(safe-area-inset-top));
  right:14px;
  z-index:30;
  width:38px; height:38px;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.25);
  border-radius:50%;
  color:#fff; font-size:18px;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
#wrapped-close:hover{background:rgba(0,0,0,.8); border-color:#fff;}

/* Зоны кликов: левая половина → назад, правая → вперёд */
.wrapped-nav-zones{
  position:absolute; inset:0; z-index:5;
  display:flex; pointer-events:none;
}
.wnz{flex:1; pointer-events:auto; cursor:pointer;}
.wnz-prev{cursor:w-resize;}
.wnz-next{cursor:e-resize;}

/* Канвас, в котором рендерим текущий слайд */
#wrapped-canvas{
  position:absolute; inset:0;
  z-index:10;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

/* Слайд */
.wrapped-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:80px 28px 50px;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.wrapped-slide.active{
  opacity:1;
  pointer-events:auto;
}
.wrapped-slide.active .ws-content{animation:wsContentIn .85s cubic-bezier(.2,.7,.4,1) both;}
@keyframes wsContentIn{
  from{opacity:0; transform:translateY(32px) scale(.94);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.ws-content{position:relative; z-index:5; max-width:540px; width:100%;}
.ws-eyebrow{font-size:11px; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.65); margin-bottom:18px; font-weight:500;}
.ws-big-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(120px, 26vw, 220px);
  line-height:.9;
  letter-spacing:-2px;
  margin:8px 0 4px;
  text-shadow:0 8px 40px rgba(0,0,0,.5);
}
.ws-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(36px, 9vw, 64px);
  letter-spacing:2px;
  line-height:1.05;
  margin:0 0 18px;
}
.ws-sub{
  font-size:15px; color:rgba(255,255,255,.78);
  margin-top:14px; line-height:1.5;
  max-width:380px;
  margin-left:auto; margin-right:auto;
}
.ws-emoji{font-size:64px; margin-bottom:18px; display:block;}

/* Постер на слайде «Лучший фильм» */
.ws-poster{
  width:200px; height:300px;
  border-radius:8px;
  overflow:hidden;
  margin:0 auto 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.1);
  animation:wsPosterIn 1.1s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes wsPosterIn{
  from{opacity:0; transform:translateY(40px) rotate(-3deg) scale(.85);}
  to{opacity:1; transform:translateY(0) rotate(0) scale(1);}
}
.ws-poster img{width:100%; height:100%; object-fit:cover; display:block;}

/* Аватар актёра */
.ws-avatar{
  width:160px; height:160px;
  border-radius:50%;
  overflow:hidden;
  margin:0 auto 22px;
  border:3px solid rgba(255,255,255,.25);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.ws-avatar img{width:100%; height:100%; object-fit:cover; display:block;}

/* Список топа */
.ws-list{display:flex; flex-direction:column; gap:8px; margin-top:18px;}
.ws-list-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 18px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  font-size:15px;
  text-align:left;
}
.ws-list-rank{font-family:'Bebas Neue',sans-serif; font-size:24px; color:rgba(255,255,255,.6); min-width:28px;}
.ws-list-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ws-list-val{font-size:13px; color:rgba(255,255,255,.65);}

/* Парящие постеры на фоне */
.ws-floats{position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.35;}
.ws-floats img{
  position:absolute;
  width:90px; height:135px;
  object-fit:cover; border-radius:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  animation:wsFloat 20s linear infinite;
}
@keyframes wsFloat{
  0%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(-20px,-30px) rotate(-3deg);}
  100%{transform:translate(0,0) rotate(0deg);}
}

/* Финальный слайд — кнопки шеринга */
.ws-share{
  display:flex; flex-direction:column; gap:10px;
  margin-top:28px;
  max-width:280px;
  margin-left:auto; margin-right:auto;
}
.ws-share-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px;
  background:rgba(255,255,255,.95);
  color:#000;
  border:none; border-radius:10px;
  font-family:inherit; font-size:13px; font-weight:600;
  letter-spacing:1.5px; text-transform:uppercase;
  cursor:pointer;
  transition:transform .2s, background .2s;
}
.ws-share-btn:hover{transform:translateY(-2px);}
.ws-share-btn.alt{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.3);}

/* Фоновые градиенты на каждый слайд */
.wrapped-slide.bg-1{background:radial-gradient(circle at 50% 35%, #5b21b6 0%, #1e0d3a 50%, #000 100%);}
.wrapped-slide.bg-2{background:radial-gradient(circle at 50% 50%, #ea580c 0%, #5a1f04 60%, #000 100%);}
.wrapped-slide.bg-3{background:radial-gradient(circle at 50% 50%, #15803d 0%, #04220f 60%, #000 100%);}
.wrapped-slide.bg-4{background:radial-gradient(circle at 50% 50%, #be185d 0%, #4a0a26 60%, #000 100%);}
.wrapped-slide.bg-5{background:radial-gradient(circle at 50% 50%, #1d4ed8 0%, #0b1d4f 60%, #000 100%);}
.wrapped-slide.bg-6{background:radial-gradient(circle at 50% 50%, #c2410c 0%, #4b1606 60%, #000 100%);}
.wrapped-slide.bg-7{background:radial-gradient(circle at 50% 50%, #7c2d12 0%, #2a0e07 60%, #000 100%);}
.wrapped-slide.bg-8{background:radial-gradient(circle at 50% 50%, #c8a84b 0%, #4a3d12 60%, #000 100%);}
.wrapped-slide.bg-final{background:linear-gradient(135deg, #1e1b4b 0%, #581c87 50%, #831843 100%);}

/* Логотип EQUALS на каждом слайде */
.ws-brand{
  position:absolute;
  bottom:max(20px, env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%);
  font-family:'Bebas Neue',sans-serif;
  font-size:14px; letter-spacing:6px;
  color:rgba(255,255,255,.55);
  z-index:8;
}
.ws-brand span{color:#c8a84b;}

/* Sparkles на финале */
.ws-sparkles{position:absolute; inset:0; pointer-events:none;}
.ws-sparkle{
  position:absolute;
  width:6px; height:6px;
  background:#c8a84b; border-radius:50%;
  box-shadow:0 0 12px #c8a84b;
  animation:wsSparkle 2.4s ease-in-out infinite;
}
@keyframes wsSparkle{
  0%,100%{opacity:0; transform:scale(.4);}
  50%{opacity:1; transform:scale(1);}
}

/* Кнопка-вход на профиле */
.wrapped-cta-card{
  display:flex; align-items:center; gap:18px;
  padding:20px 24px;
  background:linear-gradient(135deg, #1e1b4b 0%, #581c87 50%, #831843 100%);
  border:1px solid rgba(200,168,75,.4);
  border-radius:14px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
  text-decoration:none; color:#fff;
}
.wrapped-cta-card:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(168,124,31,.3);}
.wrapped-cta-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 80% 30%, rgba(200,168,75,.3) 0%, transparent 60%);
  pointer-events:none;
}
.wcta-icon{font-size:42px; flex-shrink:0; filter:drop-shadow(0 4px 12px rgba(200,168,75,.5));}
.wcta-text{flex:1; min-width:0; z-index:2;}
.wcta-title{font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:3px; color:#c8a84b; margin-bottom:4px;}
.wcta-sub{font-size:12px; color:rgba(255,255,255,.8); line-height:1.5;}
.wcta-arrow{font-size:22px; color:#c8a84b; flex-shrink:0; transition:transform .25s; z-index:2;}
.wrapped-cta-card:hover .wcta-arrow{transform:translateX(6px);}

/* Mobile adjustments */
@media (max-width:640px){
  .ws-poster{width:160px; height:240px;}
  .ws-avatar{width:130px; height:130px;}
  .wrapped-slide{padding:80px 22px 60px;}
  .ws-list-row{padding:10px 14px; font-size:13px;}
  .wrapped-cta-card{padding:16px 18px;}
  .wcta-icon{font-size:32px;}
  .wcta-title{font-size:18px;}
  .wcta-sub{font-size:11px;}
}