:root{
  --overlay: rgba(0,0,0,.92);
  --bar-bg: rgba(255,255,255,.35);
  --bar-fill: #fff;
  --duration: 5000ms;
  --radius: 16px;
}

/* ==== PREVIEW (desktop: arrows / mobile: swipe+snap) ==== */
.stories-preview-wrapper{ position:relative; margin: 1em 0 2em; }
.stories-preview-track-container{ overflow:hidden; }
.stories-preview-track{ display:flex; gap:12px; transition:transform .4s ease; will-change:transform; }
.stories-preview-card{ flex:0 0 auto; aspect-ratio:4/5; width: 200px; border-radius: 25px; overflow:hidden; position:relative; cursor:pointer; background:#f5f5f5; user-select:none; }
.stories-preview-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.stories-preview-card .title{ position:absolute; left:8px; right:8px; bottom:8px; font-weight:700; font-size:14px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.6); }
/* мягкая подсветка просмотренных превью */
.stories-preview-card { transition: opacity .3s ease; }
.stories-preview-card.viewed { opacity: .65; }
.stories-preview-card.viewed:hover { opacity: .6; }

.stories-preview-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border:none; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:5; box-shadow:0 4px 12px rgba(0,0,0,.35); transition:opacity .25s ease; }
.stories-preview-arrow.left{ left:-20px; }
.stories-preview-arrow.right{ right:-20px; }
.stories-preview-arrow.hidden{ display:none; }

/* ==== VIEWER ==== */
.stories-viewer{ position:fixed; inset:0; display:none; place-items:center; background:var(--overlay); z-index:9999; }
.stories-viewer.active{ display:grid; }

.stories-viewer-frame{ display:flex; align-items:center; justify-content:center; gap:20px; width:100%; max-width:900px; height:100%; padding:40px 0; }

.stories-viewer-inner{ position:relative; flex:0 1 auto; height:calc(100vh - 80px); aspect-ratio:9/16; max-width:500px; border-radius:var(--radius); overflow:hidden; background:#000; cursor:pointer; }
.stories-story-layer{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.stories-progress{ position:absolute; left:0; right:0; top:8px; padding:0 10px; display:flex; gap:4px; z-index:20; }
.stories-progress .bar{ flex:1; height:3px; background:var(--bar-bg); border-radius:2px; overflow:hidden; }
.stories-progress .bar .fill{ height:100%; width:0; background:var(--bar-fill); }

.stories-btn{ flex:0 0 auto; width:50px; height:50px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.35); font-size:26px; transition:transform .2s ease, opacity .2s ease; opacity:.9; }
.stories-btn:hover{ transform:scale(1.12); opacity:1; }
.stories-btn.close{ position:absolute; top:10px; right:14px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.5); font-size:24px; z-index:40; }
.stories-btn.disabled{ opacity:.35; cursor:not-allowed; } /* без pointer-events: none — курсор виден */

/* Action button on slide */
.action-btn{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); padding:12px 22px; border:none; border-radius:25px; font-size:16px; font-weight:600; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.3); display:none; }
.action-btn.primary{ background:#f8d748; color:#000; } .action-btn.primary:hover{ background:#ffd800; }
.action-btn.secondary{ background:#444; color:#fff; } .action-btn.secondary:hover{ background:#666; }
.action-btn.outline{ background:transparent; color:#fff; border:2px solid #fff; } .action-btn.outline:hover{ background:rgba(255,255,255,.1); }

/* ==== section slide animation (NOT on first open) ==== */
.slide-in-right{ animation: slideInRight .45s ease forwards; }
.slide-out-left{ animation: slideOutLeft .45s ease forwards; }
.slide-in-left{ animation: slideInLeft .45s ease forwards; }
.slide-out-right{ animation: slideOutRight .45s ease forwards; }

@keyframes slideInRight{ from{ opacity:0; transform:translateX(100%);} to{ opacity:1; transform:translateX(0);} }
@keyframes slideOutLeft { from{ opacity:1; transform:translateX(0);} to{ opacity:0; transform:translateX(-30%);} }
@keyframes slideInLeft  { from{ opacity:0; transform:translateX(-100%);} to{ opacity:1; transform:translateX(0);} }
@keyframes slideOutRight{ from{ opacity:1; transform:translateX(0);} to{ opacity:0; transform:translateX(30%);} }

/* ==== Mobile <768px: swipeable previews, fullscreen viewer ==== */
@media (max-width:768px){
  .stories-preview-arrow{ display:none; }
  .stories-preview-track-container{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .stories-preview-track{ gap:8px; }
  .stories-preview-card{ scroll-snap-align:start; width:40vw; }

  .stories-viewer-frame{ gap:0; padding:0; }
  .stories-viewer-inner{ width:100vw; height:100vh; max-width:none; max-height:none; aspect-ratio:auto; border-radius:0; }
  .stories-btn{ display:none; }
  .stories-btn.close{ display:flex; top:20px; right:20px; }
}