/* Coffee Stories — стрічка як у TikTok */
.feed-page{background:#000;overflow:hidden}
.feed-page .grain{display:none}
.feed-page .top{background:linear-gradient(rgba(0,0,0,.55),transparent)!important;box-shadow:none!important;backdrop-filter:none!important}
.feed-page .top .nav,.feed-page .top .ig{display:none}
.feed-page .top .brand__text{display:none}
.feed-page .top .burger span{background:#fff}

.feed{position:fixed;left:0;right:0;top:0;bottom:var(--tabbar,0px);overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none;background:#000}
.feed::-webkit-scrollbar{display:none}
.feed-top{position:fixed;top:calc(18px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:61;pointer-events:none}
.feed-top__t{font-family:var(--cond);text-transform:uppercase;letter-spacing:.24em;font-size:13px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6)}

.st{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;
  max-width:560px;margin:0 auto;background:#0a0a0a}
.st__media,.st__media>*{position:absolute;inset:0}
.st__img{background-size:cover;transform:scale(1.12);transition:transform 9s linear}
.st.live .st__img{transform:scale(1.0) translate(-1.5%,1%)}
.st__img.sepia{filter:sepia(.8) contrast(1.05);transition:transform 9s linear,filter 2.5s ease 1.2s}
.st.live .st__img.sepia{filter:none}
.st__bgimg{background-size:cover;background-position:center;filter:blur(36px) saturate(1.4) brightness(.85);transform:scale(1.3)}
.st__drink{display:grid;place-items:center;background:radial-gradient(ellipse 70% 55% at 50% 45%,rgba(255,255,255,.95),rgba(236,232,225,.85) 45%,transparent 75%)}
.st__drink img{width:min(78%,420px);mix-blend-mode:multiply;transform:translateY(8%) scale(.92);opacity:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),opacity .8s;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
.st.live .st__drink img{transform:translateY(-6%) scale(1);opacity:1}
.st__v{width:100%;height:100%;object-fit:cover}
.st__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.35),transparent 20%,transparent 50%,rgba(0,0,0,.78))}
.st--drink .st__shade{background:linear-gradient(rgba(0,0,0,.25),transparent 18%,transparent 52%,rgba(7,14,27,.92))}

.st__cap{position:absolute;left:16px;right:86px;bottom:calc(22px + env(safe-area-inset-bottom,0px));color:#fff;z-index:2;
  opacity:0;transform:translateY(16px);transition:opacity .6s .15s,transform .7s .15s cubic-bezier(.2,.7,.2,1)}
.st.live .st__cap{opacity:1;transform:none}
.st__who{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;margin-bottom:10px}
.st__who img{width:30px;height:30px;border-radius:50%;box-shadow:0 0 0 1.5px #fff}
.st__series{display:inline-block;margin-bottom:8px;padding:4px 10px;background:var(--yellow);color:#111;font-family:var(--cond);font-weight:700;
  text-transform:uppercase;letter-spacing:.2em;font-size:11px}
.st__k{font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--gold-hi)}
.st__t{font-family:var(--serif);font-style:italic;font-weight:900;font-size:clamp(26px,7vw,34px);line-height:1.08;margin:4px 0 8px;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.st__x{font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.st__cta{margin-top:14px;padding:11px 20px;font-size:12px}

.rail{position:absolute;right:10px;bottom:calc(30px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;flex-direction:column;gap:18px;align-items:center}
.rail__b{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;-webkit-tap-highlight-color:transparent}
.rail__b svg{width:30px;height:30px;padding:10px;box-sizing:content-box;border-radius:50%;background:rgba(0,0,0,.28);backdrop-filter:blur(8px);
  fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.rail__b span{font-size:11px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.rail__b:active svg{transform:scale(.85)}
.rail__b.on svg{fill:#ff3b5c;stroke:#ff3b5c;animation:pop .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.st--drink .rail__b[href] svg,.rail__go svg{background:var(--goldGrad);stroke:#1a1206}
.st__evdate{top:calc(70px + env(safe-area-inset-top,0px));z-index:2}

.st__burst{position:absolute;left:50%;top:45%;z-index:4;width:120px;height:120px;margin:-60px 0 0 -60px;pointer-events:none;opacity:0}
.st__burst svg{width:100%;height:100%;fill:#ff3b5c;filter:drop-shadow(0 6px 20px rgba(255,59,92,.5))}
.st.burst .st__burst{animation:burst .8s cubic-bezier(.2,1.4,.4,1)}
@keyframes burst{0%{opacity:0;transform:scale(.3) rotate(-15deg)}25%{opacity:1;transform:scale(1.15) rotate(5deg)}60%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.4) translateY(-40px)}}
.st__bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.18);z-index:3}
.st__bar i{display:block;height:100%;width:0;background:#fff}
.st:not(.st--video) .st__bar{display:none}
.st__flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;padding:10px 16px;border-radius:12px;background:rgba(0,0,0,.7);color:#fff;font-size:14px}

/* клубний і «поділитися» сюжети */
.st__club,.st__share{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#1d3a66,#070e1b 70%)}
.st__card{width:min(74%,320px);aspect-ratio:.63;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(125deg,#173462,#0b1a33);border:1px solid rgba(214,168,78,.6);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(127,227,255,.15);
  transform:rotate(-6deg) translateY(-12%);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.st.live .st__card{transform:rotate(0) translateY(-14%)}
.st__card img{width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 3px var(--gold)}
.st__card b{font-family:var(--cond);letter-spacing:.26em;color:var(--gold-hi);font-size:14px}
.st__card em{font-style:normal;font-family:var(--serif);font-size:20px;color:#fff}
.st__stamps{display:flex;gap:8px}
.st__stamps i{width:30px;height:30px;border-radius:50%;background:var(--goldGrad);display:grid;place-items:center;font-style:normal;font-size:15px}
.st__stamps i:last-child{background:none;border:1.5px dashed var(--gold)}
.st__share{font-size:64px;gap:10px;grid-auto-flow:column;align-content:center;padding-bottom:30%}
.st__share span{animation:float 4s ease-in-out infinite}
.st__share span:nth-child(2){animation-delay:-1.3s}.st__share span:nth-child(3){animation-delay:-2.6s}
.st--end{display:grid;place-items:center;background:radial-gradient(ellipse at 50% 35%,#1d3a66,#070e1b 70%);text-align:center}
.st__endin{padding:24px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:12px}
.st__endin img{width:92px;height:92px}
.st__endin h2{font-family:var(--serif);font-style:italic;font-weight:900;font-size:30px}
.st__endin p{color:var(--cream-dim)}

/* нижній лист */
.sheet{position:fixed;inset:0;z-index:180}
.sheet[hidden]{display:none}
.sheet__bg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity .35s}
.sheet.open .sheet__bg{opacity:1}
.sheet__in{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:88svh;overflow-y:auto;padding:12px 20px calc(24px + env(safe-area-inset-bottom,0px));
  border-radius:24px 24px 0 0;background:#0e1c33;border-top:1px solid rgba(214,168,78,.4);transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sheet.open .sheet__in{transform:none}
.sheet__grip{display:block;width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.25);margin:0 auto 14px}
.sheet__tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:16px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05)}
.sheet__tabs button{padding:10px;border-radius:10px;font-family:var(--cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--cream-dim)}
.sheet__tabs button.on{background:var(--gold);color:var(--night)}
.sheet .form[hidden]{display:none}

@media (min-width:781px){
  .feed{bottom:0}
  .st{border-left:1px solid #111;border-right:1px solid #111}
  .feed-page{background:radial-gradient(ellipse at 50% 30%,#13284a,#000 70%)}
  .feed{background:transparent}
}