/* =========================================================
   Section 6 — Reels: horizontal strip of 9:16 cards, full bleed,
   snap scrolling, drag, progress bar, pop-up player.
   ========================================================= */

.reels{padding-block:clamp(72px,9vw,144px) clamp(56px,6vw,96px);border-top:1px solid var(--line);overflow:hidden}
.reels__head{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter);row-gap:16px;padding:0 var(--margin);margin-bottom:clamp(28px,3vw,48px);align-items:end}
.reels__idx{grid-column:1/-1;color:var(--acid)}
.reels__title{grid-column:1/-1;font-family:var(--f-display);font-weight:600;font-size:var(--t-xl);letter-spacing:-.04em;line-height:.92;text-transform:uppercase}
.reels__ctrl{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.reels__count{color:var(--mute-2);margin-right:auto;font-variant-numeric:tabular-nums}
.reels__count span{color:var(--paper)}
.reels__btn{width:48px;height:48px;border:1px solid var(--line-strong);font-family:var(--f-mono);font-size:16px;transition:background .3s,color .3s,border-color .3s}
.reels__btn:hover{background:var(--acid);color:var(--ink);border-color:var(--acid)}
.reels__btn:disabled{opacity:.3;pointer-events:none}
@media (min-width:900px){
	.reels__idx{grid-column:1/span 2;align-self:start;padding-top:.6em}
	.reels__title{grid-column:3/span 6}
	.reels__ctrl{grid-column:9/span 4;justify-content:flex-end}
	.reels__count{margin-right:16px}
}

.reels__track{display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margin);padding:0 var(--margin) 8px;scrollbar-width:none;cursor:grab;outline-offset:-2px}
.reels__track::-webkit-scrollbar{display:none}
.reels__track.is-drag{cursor:grabbing;scroll-snap-type:none}
.reels__track.is-drag .reel{pointer-events:none}
.reel{flex:0 0 auto;width:clamp(220px,19vw,300px);scroll-snap-align:start;display:flex;flex-direction:column;gap:12px;text-align:left;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.reel:disabled{cursor:default}
.reel__media{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--ink-2)}
.reel__media img,.reel__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--expo),opacity .4s}
.reel__media video{opacity:0}
.reel.is-playing .reel__media video{opacity:1}
.reel:hover .reel__media img{transform:scale(1.05)}
.reel__ph{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:64px;letter-spacing:-.06em;color:var(--line-strong)}
.reel__ph sup{font-size:.3em}
.reel__play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;display:grid;place-items:center;background:var(--acid);color:var(--ink);font-family:var(--f-mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;transform:scale(.8);opacity:0;transition:transform .5s var(--expo),opacity .3s}
.reel:hover .reel__play,.reel:focus-visible .reel__play{transform:scale(1);opacity:1}
.reel:disabled .reel__play{opacity:1;transform:scale(1);background:var(--ink);color:var(--mute-2);border:1px solid var(--line-strong);font-size:10px}
@media (hover:none){.reel__play{opacity:1;transform:scale(.85)}}
.reel__meta{display:grid;grid-template-columns:44px 1fr;row-gap:2px;border-top:1px solid var(--line-strong);padding-top:10px}
.reel__i{font-family:var(--f-mono);font-size:10.5px;color:var(--mute-2);grid-row:span 2}
.reel__t{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:-.015em;line-height:1.2;transition:color .3s}
.reel:hover .reel__t{color:var(--acid)}
.reel__tag{font-size:13px;color:var(--mute-2)}

.reels__bar{height:2px;background:var(--line);margin:28px var(--margin) 0}
.reels__bar span{display:block;height:100%;width:100%;background:var(--acid);transform-origin:left;transform:scaleX(.1)}

.reels__empty{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:32px var(--margin);border-block:1px solid var(--line)}
.reels__empty p{color:var(--mute-2);max-width:48ch}

/* pop-up player */
.reel-modal{width:min(92vw,1100px);max-height:92vh;padding:0;border:0;background:transparent;color:var(--paper);overflow:visible}
.reel-modal::backdrop{background:rgba(9,9,9,.92);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.reel-modal__close{position:absolute;right:0;top:-44px;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);padding:8px 0}
.reel-modal__close:hover{color:var(--acid)}
.reel-modal__stage{display:flex;justify-content:center}
.reel-modal__stage video{max-width:100%;max-height:86vh;background:#000}
.reel-modal__stage iframe{width:100%;aspect-ratio:16/9;border:0;background:#000}