/* ===== промо-полоса ===== */
body{position:relative; min-width:1440px;}
.promo-bar{
  position:absolute; top:0; left:0; right:0; height:33.4px;
  background:#3d56f5; display:flex; align-items:center; justify-content:center;
  font:13.5px/1 'Inter',sans-serif; color:#fff; letter-spacing:.1px;
  white-space:nowrap; z-index:30;
}
.promo-bar b{font-weight:700; margin-right:6px;}

/* ===== сторка в хиро ===== */
.hero-story-label{
  position:absolute; top:329px; right:60px; width:350px;
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  font:600 12.5px/1 'Inter',sans-serif; color:#fff; letter-spacing:1.4px;
  text-transform:uppercase; z-index:6;
}
.hero-story-label::before{content:''; width:8px; height:8px; border-radius:50%; background:#4a7dff;}
.hero-story-card{
  position:absolute; top:361px; right:60px; width:350px; height:512px;
  border-radius:16px; overflow:hidden; cursor:pointer; z-index:6;
  background:#232325; box-shadow:0 24px 48px -12px rgba(0,0,0,.55);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.hero-story-card:hover{transform:scale(1.02);}
.hero-story-card img.poster{width:100%; height:100%; object-fit:cover; display:block;}
.story-cap{
  position:absolute; left:50%; bottom:9%; transform:translateX(-50%);
  width:62%; max-height:30%; object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
.story-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}

/* ===== карусель ===== */
.stories-track{
  position:absolute; top:160px; left:0; right:0; height:450px;
  display:flex; gap:10px; padding:0 40px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.stories-track::-webkit-scrollbar{display:none;}
.story-card{
  position:relative; flex:0 0 300px; height:450px; border-radius:16px;
  overflow:hidden; cursor:pointer; scroll-snap-align:start;
  background:rgba(255,255,255,.1);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.story-card:hover{transform:translateY(-4px);}
.story-card img.poster{width:100%; height:100%; object-fit:cover; display:block;}

.stories-dots{
  position:absolute; top:630px; left:0; right:0;
  display:flex; gap:8px; justify-content:center;
}
.stories-dots button{
  width:8px; height:8px; border-radius:50%; border:0; padding:0;
  background:#232325; cursor:pointer; transition:background .25s;
}
.stories-dots button.active{background:#fff;}

.stories-arrow{
  position:absolute; top:80px; width:40px; height:40px; border-radius:50%;
  border:0; background:#232325; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s;
}
.stories-arrow:hover{background:#3a3a3d;}
.stories-arrow.prev{right:88px;}
.stories-arrow.next{right:40px;}
.stories-arrow svg{width:20px; height:20px;}

/* ===== попап-плеер ===== */
.story-dialog{
  border:0; padding:0; background:transparent; max-width:none; max-height:none;
  width:100vw; height:100vh; position:fixed; inset:0; display:none;
  align-items:center; justify-content:center; z-index:100;
}
.story-dialog[open]{display:flex;}
.story-dialog::backdrop{background:rgba(0,0,0,.85);}
.story-stage{position:relative; height:min(86vh,900px); aspect-ratio:9/16;}
.story-stage video, .story-stage img.poster{
  width:100%; height:100%; object-fit:cover; border-radius:20px; display:block;
  background:#111;
}
.story-stage .story-cap{width:58%;}
.story-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font-size:0;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s;
}
.story-nav:hover{background:rgba(255,255,255,.25);}
.story-nav.prev{left:-72px;}
.story-nav.next{right:-72px;}
.story-nav svg{width:22px; height:22px;}
.story-close{
  position:absolute; top:-8px; right:-64px; width:44px; height:44px;
  border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.12);
  color:#fff; display:flex; align-items:center; justify-content:center;
  transition:background .25s;
}
.story-close:hover{background:rgba(255,255,255,.25);}
.story-close svg{width:20px; height:20px;}

@media (prefers-reduced-motion: reduce){
  .hero-story-card, .story-card, .stories-track{transition:none; scroll-behavior:auto;}
}

/* CSS-подпись для СОТКИ (пока нет исправленного PNG) */
.story-cap-text{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  width:80%; color:#fff; text-align:center;
}
.cap-name{font:700 11px/1.6 'Inter',sans-serif; letter-spacing:2.2px;}
.cap-title{font:400 46px/1 'BebasCyrLocal','Bebas Neue Cyrillic','Oswald',sans-serif; letter-spacing:2px;}
.cap-sub{font:500 11px/1.6 'Inter',sans-serif; letter-spacing:5px;}

/* ===== параллакс третьего экрана ===== */
.parallax-wrap{position:absolute; inset:0; overflow:hidden;}
.parallax-img{
  position:absolute; left:50%; top:50%; width:100%; height:136%;
  object-fit:cover; transform:translate(-50%,-50%); will-change:transform;
}
.parallax-shade{position:absolute; inset:0; background:rgba(0,0,0,.52);}
@media (prefers-reduced-motion: reduce){ .parallax-img{transform:translate(-50%,-50%) !important;} }

/* CTA → Telegram */
.tg-cta{transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;}
.tg-cta:hover{transform:scale(1.04); box-shadow:0 8px 24px -8px rgba(0,0,0,.35);}

/* ===== big banner слайдер ===== */
.bb-track{
  position:absolute; inset:0; display:flex;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.bb-slide{flex:0 0 100%; width:100%; height:100%; object-fit:cover; display:block;}
.bb-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.45); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s; z-index:2;
}
.bb-arrow:hover{background:rgba(0,0,0,.7);}
.bb-arrow.prev{left:24px;}
.bb-arrow.next{right:24px;}
.bb-arrow svg{width:22px; height:22px;}
.bb-dots{
  position:absolute; bottom:24px; left:0; right:0;
  display:flex; gap:8px; justify-content:center; z-index:2;
}
.bb-dots button{
  width:8px; height:8px; border-radius:50%; border:0; padding:0;
  background:rgba(255,255,255,.35); cursor:pointer; transition:background .25s;
}
.bb-dots button.active{background:#fff;}
@media (prefers-reduced-motion: reduce){ .bb-track{transition:none;} }

/* ===== видео-поздравления ===== */
.greet-track{
  position:absolute; top:537px; left:0; right:0; height:570px;
  display:flex; gap:30px; padding:0 40px;
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.greet-track::-webkit-scrollbar{display:none;}
.greet-card{
  position:relative; flex:0 0 380px; height:570px; border-radius:16px;
  overflow:hidden; background:#111; scroll-snap-align:start; cursor:pointer;
}
.greet-card video{width:100%; height:100%; object-fit:cover; display:block;}
.greet-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center; color:#111;
  pointer-events:none; transition:opacity .25s;
}
.greet-play svg{width:28px; height:28px; margin-left:3px;}
.greet-card.playing .greet-play{opacity:0;}
.greet-arrow{
  width:40px; height:40px; border-radius:50%; border:0; background:#f6f6f7;
  color:#111; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .25s; z-index:2;
}
.greet-arrow:hover{background:#e8e8ea;}
.greet-arrow svg{width:20px; height:20px;}

/* ===== Данина волна: аудиоплеер ===== */
.wave-player{
  position:absolute; inset:48px; display:flex; gap:64px;
  font-family:'Inter',sans-serif; color:#111;
}
.wp-left{width:340px; flex:0 0 340px; display:flex; flex-direction:column;}
.wp-cover{width:340px; height:340px; object-fit:cover; border-radius:12px;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.25); display:block;}
.wp-title{font-size:22px; font-weight:600; margin-top:24px; line-height:1.25;}
.wp-artist{font-size:15px; color:#6b6b70; margin-top:4px;}
.wp-bar{position:relative; height:6px; border-radius:3px; background:#e2e2e6;
  margin-top:22px; cursor:pointer;}
.wp-bar::after{content:''; position:absolute; inset:-8px 0;}
.wp-fill{position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:3px; background:#111;}
.wp-time{display:flex; justify-content:space-between; font-size:12px; color:#8a8a90; margin-top:8px;}
.wp-controls{display:flex; gap:16px; justify-content:center; align-items:center; margin-top:22px;}
.wp-btn{width:48px; height:48px; border-radius:50%; border:0; background:#e8e8ec;
  color:#111; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s;}
.wp-btn:hover{background:#dcdce2;}
.wp-btn svg{width:22px; height:22px;}
.wp-play{width:60px; height:60px; background:#111; color:#fff;}
.wp-play:hover{background:#333;}
.wp-play svg{width:26px; height:26px;}
.wp-list{flex:1; display:flex; flex-direction:column; gap:6px; overflow-y:auto; padding-right:8px;}
.wp-row{
  display:flex; align-items:center; gap:16px; padding:12px 16px; border-radius:12px;
  cursor:pointer; transition:background .2s;
}
.wp-row:hover{background:#ececf0;}
.wp-row.active{background:#111; color:#fff;}
.wp-row.active .wp-row-artist, .wp-row.active .wp-row-dur{color:rgba(255,255,255,.6);}
.wp-row img{width:56px; height:56px; border-radius:8px; object-fit:cover; flex:0 0 56px;}
.wp-row-meta{flex:1; min-width:0;}
.wp-row-title{font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wp-row-artist{font-size:13px; color:#8a8a90; margin-top:2px;}
.wp-row-dur{font-size:13px; color:#8a8a90; font-variant-numeric:tabular-nums;}
.wp-row-eq{width:16px; height:16px; display:none;}
.wp-row.active.playing .wp-row-eq{display:block;}

/* ===== футер ===== */
.site-footer{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; border-top:1px solid #232325;
  font:400 13px/1 'Inter',sans-serif; color:rgba(255,255,255,.45); white-space:nowrap;
}
.sf-by{color:rgba(255,255,255,.7);}