/* Reusable Instagram-style "stories" player.
   Used full-screen on the Recap page and as an overlay on gallery pages.
   All styles are scoped to .stage so it can drop onto any page. */
:root{ --stories-seg-gap:3px; --stories-slide:.42s; }

body.stories-open{ overflow:hidden; }   /* lock page scroll while the player is open */

.stage{
  position:fixed;inset:0;z-index:2000;display:none;overflow:hidden;
  background:#000;transform-origin:top center;
  font-family:'Poppins',system-ui,sans-serif;color:#fff;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.stage.open{display:block}
.stage.dragging{transition:none}
.stage.settle{transition:transform .32s cubic-bezier(.22,.61,.36,1), border-radius .32s ease}

/* colour backdrop — gently fades to each photo's dominant colour */
.stage .modal{position:absolute;inset:0;background:#141414;transition:background 1.1s ease}

/* two photo layers we slide between */
.stage .layer{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transform:translateX(100%);
  transition:transform var(--stories-slide) cubic-bezier(.22,.61,.36,1);
  will-change:transform;z-index:1;
}
.stage .layer.current{z-index:2}
.stage .photo{max-width:85%;max-height:85%;object-fit:contain;border:1px solid rgba(255,255,255,.9);border-radius:2px;box-shadow:0 0 30px rgba(255,255,255,.4)}

/* top chrome: story progress segments + header */
.stage .top{position:absolute;left:0;right:0;top:0;z-index:5;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 0;pointer-events:none}
.stage .bars{display:flex;gap:var(--stories-seg-gap);width:100%}
.stage .bar{flex:1 1 0;height:2px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;min-width:0}
.stage .bar > i{display:block;height:100%;width:0%;border-radius:2px;background:rgba(255,255,255,.92)}
.stage .bar.done > i{width:100%}

.stage .header{display:flex;align-items:center;justify-content:space-between;margin-top:12px;pointer-events:none}
.stage .brand{font-weight:600;font-size:.9rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,0,0,.5);display:flex;align-items:center;gap:7px}
.stage .brand .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85)}
.stage .count{font-weight:400;font-size:.78rem;opacity:.55;letter-spacing:.05em}
.stage .close{pointer-events:auto;width:40px;height:40px;flex:0 0 auto;margin-right:-8px;display:grid;place-items:center;background:none;border:0;cursor:pointer}
.stage .close svg{width:22px;height:22px;stroke:rgba(255,255,255,.85);stroke-width:2;fill:none;stroke-linecap:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));transition:stroke .2s}
.stage .close:hover svg{stroke:#fff}

/* invisible tap zones */
.stage .zones{position:absolute;inset:0;z-index:3;display:flex}
.stage .zone{height:100%}
.stage .zone.prev{flex:0 0 33%}
.stage .zone.next{flex:1 1 auto}

/* first-run hint */
.stage .hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);z-index:4;text-align:center;font-size:.8rem;opacity:.85;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.8);transition:opacity .6s ease}
.stage .hint.hide{opacity:0}
.stage .hint b{font-weight:600}

/* paused pill */
.stage .paused{position:absolute;top:calc(env(safe-area-inset-top,0px) + 62px);left:50%;transform:translateX(-50%) translateY(-6px);z-index:5;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.4);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.stage .paused.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){
  .stage .layer{transition-duration:.001s}
  .stage .modal{transition-duration:.001s}
}