/* Reels - one clip per screen, vertical snap.
   Scoped to this page only; nothing here is imported by the rest of the site. */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:#08080c;color:#fff}
html{height:100%}
body.reels-body{
  height:100%;overflow:hidden;
  font:400 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

.reels{
  height:100dvh;width:100%;
  overflow-y:scroll;overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.reels::-webkit-scrollbar{display:none}

.reel{
  position:relative;
  height:100dvh;width:100%;
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:flex-end;
  overflow:hidden;
  background:#000;
  isolation:isolate;
}

/* The poster is the slide. A lapsed CDN token leaves a moving-less but
   readable page instead of a black rectangle. */
.reel-poster{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
  transform:scale(1.02);
}
.reel.has-video .reel-poster{opacity:0;transition:opacity .28s ease}

.reel-video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  object-fit:contain;
  background:#000;
}

.reel-scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(to top,rgba(0,0,0,.86) 0%,rgba(0,0,0,.34) 26%,rgba(0,0,0,0) 52%),
    linear-gradient(to bottom,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%);
}

.reel-spin{
  position:absolute;left:50%;top:50%;z-index:3;
  width:34px;height:34px;margin:-17px 0 0 -17px;
  border:2px solid rgba(255,255,255,.22);border-top-color:#fff;border-radius:50%;
  opacity:0;transition:opacity .2s;pointer-events:none;
  animation:reel-spin .8s linear infinite;
}
.reel.loading .reel-spin{opacity:1}
@keyframes reel-spin{to{transform:rotate(360deg)}}

.reel-meta{
  position:relative;z-index:4;
  width:100%;padding:0 18px calc(96px + env(safe-area-inset-bottom)) 18px;
}
.reel-title{
  margin:0 0 8px;
  font:700 19px/1.25 system-ui,-apple-system,sans-serif;
  letter-spacing:-.01em;
  text-shadow:0 2px 14px rgba(0,0,0,.7);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.reel-sub{margin:0;display:flex;align-items:center;gap:10px;font-size:12.5px;color:#cfcfdb}
.reel-dur{
  padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.14);
  font-variant-numeric:tabular-nums;font-weight:600;color:#fff;
}
.reel-code{color:#9a9aae;font-variant-numeric:tabular-nums}

.reel-open{
  position:absolute;right:16px;bottom:calc(96px + env(safe-area-inset-bottom));
  z-index:5;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 18px;
  border-radius:999px;
  background:#fff;color:#0b0b12;
  font:650 14px/1 system-ui,-apple-system,sans-serif;
  text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
}
.reel-open:active{transform:scale(.97)}

/* chrome ---------------------------------------------------------------- */
.reels-top{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;
  pointer-events:none;
}
.reels-top > *{pointer-events:auto}
.reels-brand{
  color:#fff;text-decoration:none;font:700 15px/1 system-ui,sans-serif;
  letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.reels-mute{
  appearance:none;border:1px solid rgba(255,255,255,.22);
  background:rgba(12,12,18,.6);color:#fff;
  min-height:36px;padding:0 12px;border-radius:999px;
  font:600 12px/1 system-ui,sans-serif;cursor:pointer;
  backdrop-filter:blur(6px);
}
.reels-mute[aria-pressed="false"]{background:#fff;color:#0b0b12;border-color:#fff}

.reels-tabs{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom));z-index:20;
  display:flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(12,12,18,.66);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);
}
.reels-tabs a{
  padding:8px 16px;border-radius:999px;text-decoration:none;
  color:#b6b6c6;font:600 12.5px/1 system-ui,sans-serif;
}
.reels-tabs a.on{background:#fff;color:#0b0b12}

.reel-empty{align-items:center;justify-content:center;text-align:center}
.reel-empty .reel-open{position:static;margin:18px auto 0}

/* desktop: keep the portrait frame instead of stretching 16:9 source to 21:9 */
@media (min-width: 768px){
  body.reels-body{background:
    radial-gradient(1200px 600px at 50% -10%,#1a1a26 0%,#08080c 70%);}
  .reels{max-width:480px;margin:0 auto;border-left:1px solid #16161f;border-right:1px solid #16161f}
  .reels-top,.reels-tabs{max-width:480px;left:50%;right:auto;transform:translateX(-50%);width:100%}
  .reels-top{padding-left:20px;padding-right:20px}
}