/* =====================================================================
   /reels · public snap feed — any video/image dimensions, TikTok-style
   ===================================================================== */
.reels-page{max-width:1120px;margin:0 auto;padding:clamp(110px,14vh,150px) 1rem .6rem}
.reels-head{padding-bottom:.4rem}
.reels-head .lede{max-width:34rem}

.reels-wrap{position:relative}

/* loading spinner while the feed fetches its source */
.reels-loading{
  height:100%;min-height:200px;
  display:grid;place-items:center;
}
.reels-loading[hidden]{display:none}
.reels-spinner{
  width:34px;height:34px;border-radius:999px;
  border:2.5px solid var(--line);
  border-top-color:var(--accent,#8fa8ff);
  animation:reelsSpin .8s linear infinite;
}
@keyframes reelsSpin{to{transform:rotate(360deg)}}

/* ---------- feed: internal snap viewport (never scrolls under the nav) ---------- */
.reels-viewport{
  position:sticky;
  top:84px;
  max-width:540px;margin:0 auto;
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  overscroll-behavior-y:contain;
  border-radius:26px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.reels-viewport::-webkit-scrollbar{display:none}

.reels-feed{
  display:flex;flex-direction:column;height:100%;
}

.reel{
  position:relative;
  flex:0 0 100%;
  height:100%;
  border-radius:26px;overflow:hidden;
  background:linear-gradient(160deg,#0c0c12,#101018);
  border:1px solid var(--line);
  display:grid;place-items:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  box-shadow:0 18px 50px -22px rgba(0,0,0,.55);
}
html[data-theme="light"] .reel{
  background:linear-gradient(160deg,#101018,#181826);
  box-shadow:0 18px 44px -24px rgba(30,34,60,.45);
}

.reel-media{width:100%;height:100%;display:grid;place-items:center;cursor:pointer}
.reel-media video,.reel-media img{
  display:block;width:100%;height:100%;
  max-height:100%;
  object-fit:contain;
}
.reel-media img{cursor:default}

/* top counter chip */
.reel-count{
  position:absolute;top:.9rem;inset-inline-end:.9rem;
  padding:.28rem .7rem;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:#fff;background:rgba(10,10,16,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
}

/* bottom info overlay */
.reel-info{
  position:absolute;inset-inline:0;bottom:0;
  padding:2.6rem 1.1rem .95rem;
  background:linear-gradient(180deg,transparent,rgba(4,4,10,.82));
  color:#fff;pointer-events:none;
}
.reel-title{font-weight:600;font-size:.98rem;margin:0 0 .18rem}
.reel-caption{font-size:.85rem;color:rgba(255,255,255,.78);margin:0;line-height:1.5;word-break:break-word}
.reel-type{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent,#9db8ff);margin-bottom:.32rem;
}

/* side actions */
.reel-actions{
  position:absolute;inset-inline-end:.8rem;bottom:5.6rem;
  display:grid;gap:.55rem;justify-items:center;
}
.reel-btn{
  width:42px;height:42px;border-radius:999px;
  display:grid;place-items:center;
  color:#fff;cursor:pointer;
  background:rgba(10,10,16,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  transition:transform .18s var(--ease-spring, ease),background .18s;
}
.reel-btn:hover{background:rgba(10,10,16,.72);transform:scale(1.06)}
.reel-btn:active{transform:scale(.94)}
.reel-btn .ico{width:19px;height:19px}

/* video progress bar */
.reel-progress{
  position:absolute;inset-inline:0;bottom:0;height:3px;
  background:rgba(255,255,255,.14);opacity:0;transition:opacity .3s;
}
.reel-progress i{display:block;height:100%;width:0;background:#fff;border-radius:0 2px 2px 0}
.reel.is-video:hover .reel-progress,.reel.is-paused .reel-progress{opacity:1}

/* big centered play badge when paused */
.reel-playbadge{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:999px;
  display:grid;place-items:center;color:#fff;
  background:rgba(8,8,14,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.reel.is-paused .reel-playbadge{opacity:1}
.reel-playbadge .ico{width:26px;height:26px;margin-inline-start:2px}

/* ---------- empty state ---------- */
.reels-empty{
  height:100%;
  border:1.5px dashed var(--line);
  display:grid;place-content:center;justify-items:center;gap:.4rem;
  text-align:center;padding:2rem;
}
.reels-empty-ico{color:var(--ink-3)}
.reels-empty-ico .ico{width:40px;height:40px}
.reels-empty-title{font-weight:600;font-size:1.05rem;margin:.4rem 0 0}
.reels-empty-hint{color:var(--ink-3);font-size:.85rem;margin:0;max-width:24rem;line-height:1.6}

.reels-foot{
  text-align:center;color:var(--ink-3);font-size:.76rem;
  margin-top:1.6rem;
}
.reels-foot kbd{
  font-family:inherit;font-size:.7rem;
  padding:.1rem .38rem;border-radius:6px;
  border:1px solid var(--line);background:var(--glass-bg, rgba(255,255,255,.04));
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  .reels-page{padding:clamp(96px,12vh,130px) .55rem .6rem}
  .reels-viewport{border-radius:20px}
  .reel{border-radius:20px}
  .reel-info{padding:2.2rem .9rem .8rem}
  .reel-btn{width:38px;height:38px}
  .reel-actions{bottom:5rem;inset-inline-end:.6rem}
}

/* app-like feed page: no page scroll at all — the footer is hidden so the
   snap viewport can never slide under the fixed nav */
html[data-page="reels"] .footer{display:none}