/* ═══════════════════════════════════════════════════════════
   NECTUS · reel.css — the collection, fanned

   One piece front and centre under the light, the rest falling
   away behind it on both sides. Swipe it on a phone, or use the
   arrows and the keyboard anywhere else.

   Every position is driven from one custom property, --o, which
   is how far a piece sits from the centre: 0 is front, -1 is one
   to the left, 2 is two to the right. JavaScript sets that number
   and nothing else; the arrangement is all here.
   ═══════════════════════════════════════════════════════════ */

.reel{
  position:relative;
  height:clamp(420px,62vh,640px);
  /* no perspective: nothing turns, so nothing needs it */

  overflow:hidden;
  user-select:none;
  touch-action:pan-y;
  cursor:grab;
}
.reel.dragging{cursor:grabbing}

/* sealed until the standard is met — the same treatment the grid
   had, since the seal panel sits over the top of it either way */
.reel.sealed{
  filter:blur(11px) grayscale(1) brightness(.5);
  opacity:.5;pointer-events:none;user-select:none;
}

/* the light behind the stage */
.reel::before{
  content:'';position:absolute;left:50%;top:-14%;
  width:min(900px,82%);height:46%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,
    rgba(221,227,233,.30) 0%,
    rgba(221,227,233,.10) 40%,
    transparent 74%);
  pointer-events:none;
}

/* the hard line of the lamp itself, as in the reference */
.reel .reel-lamp{
  position:absolute;left:50%;top:5%;
  width:min(760px,72%);height:3px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,
    transparent, rgba(240,245,250,.75) 22%, rgba(240,245,250,.9) 50%,
    rgba(240,245,250,.75) 78%, transparent);
  border-radius:50%;
  box-shadow:0 0 60px 14px rgba(221,227,233,.22);
  pointer-events:none;z-index:1;
}

/* the ground it stands on */
.reel::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(to top, rgba(7,8,10,.92), transparent);
  pointer-events:none;z-index:60;
}

.reel-stage{
  position:absolute;inset:0;
  transform-style:preserve-3d;
}

/* ── a piece on the reel ──────────────────────────────────── */
.reel-item{
  position:absolute;left:50%;top:50%;
  width:clamp(220px,27vw,360px);
  height:clamp(330px,45vh,520px);
  margin-left:calc(clamp(220px,27vw,360px) / -2);
  margin-top:calc(clamp(330px,45vh,520px) / -2);

  transition:transform .78s cubic-bezier(.22,1,.30,1),
             opacity   .6s  var(--ease),
             filter    .6s  var(--ease);

  /* everything below reads from --o, set by reel.js */
  --a: max(var(--o), calc(var(--o) * -1));          /* |o| */

  /* The garment does not turn — it only steps back and to the side,
     staying face on. Turning it would mean turning a photograph,
     which shows a flat plane the moment it moves. Depth comes from
     scale and overlap instead, which is honest about what a single
     photograph can do. */
  transform:
    translateX(calc(var(--o) * 36%))
    scale(calc(1 - var(--a) * 0.22));

  z-index:calc(50 - var(--a) * 10);
  opacity:calc(1 - var(--a) * 0.10);
  filter:brightness(calc(1 - var(--a) * 0.16));
}

/* the third out is on its way off the stage */
.reel-item[data-o="3"],
.reel-item[data-o="-3"]{ opacity:.35 }

/* anything more than three out is not worth drawing */
.reel-item[data-far="1"]{opacity:0;pointer-events:none}

/* With a cut-out garment the shadow falls on the cloth rather than
   on a box, which is the whole difference between a photograph
   floating and a card sitting there. Two shadows: a close one that
   describes the shape, and a long soft one that puts it in a room. */
.reel-item img{
  width:100%;height:100%;object-fit:contain;
  filter:
    drop-shadow(0 14px 18px rgba(0,0,0,.55))
    drop-shadow(0 44px 60px rgba(0,0,0,.75));
  pointer-events:none;
}

/* the patch of floor it stands on — this is what stops a cut-out
   looking like it is pasted over the page */
.reel-item::after{
  content:'';position:absolute;left:50%;bottom:2%;
  width:64%;height:5%;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,.75) 0%, rgba(0,0,0,.4) 45%, transparent 72%);
  filter:blur(7px);
  z-index:-1;pointer-events:none;
}

/* the piece in front catches the lamp */
.reel-item.front img{
  filter:
    drop-shadow(0 16px 20px rgba(0,0,0,.6))
    drop-shadow(0 52px 70px rgba(0,0,0,.85))
    drop-shadow(0 -2px 12px rgba(221,227,233,.10));
}
.reel-item.front::after{
  width:70%;height:6%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 45%, transparent 72%);
}
.reel-mk{
  width:100%;height:100%;display:grid;place-items:center;
  border:1px solid var(--hair);background:var(--pitch);
}
.reel-mk svg{width:38%;fill:var(--iron);opacity:.22}

/* the one in front earns its label */
.reel-item .reel-cap{
  position:absolute;left:0;right:0;bottom:-4px;
  text-align:center;opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  pointer-events:none;
}
.reel-item.front .reel-cap{opacity:1;transform:translateY(0)}
.reel-cat{
  display:block;font-family:var(--mono);font-size:0.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--iron);
}
.reel-nm{
  display:block;font-family:var(--disp);font-weight:700;
  font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;text-transform:uppercase;
  color:var(--platinum);margin-top:9px;
}
.reel-pr{
  display:block;font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;
  color:var(--mercury);margin-top:9px;font-variant-numeric:tabular-nums;
}


/* ── the controls ────────────────────────────────────────── */
.reel-arrow{
  position:absolute;top:44%;z-index:70;
  width:52px;height:52px;display:grid;place-items:center;
  border:1px solid var(--hair);background:rgba(7,8,10,.6);
  color:var(--mercury);backdrop-filter:blur(6px);
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.reel-arrow:hover{border-color:var(--platinum);color:var(--platinum);background:rgba(7,8,10,.85)}
.reel-arrow:disabled{opacity:.25;pointer-events:none}
.reel-arrow svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.4}
.reel-arrow.prev{left:clamp(10px,3vw,34px)}
.reel-arrow.next{right:clamp(10px,3vw,34px)}

/* on a phone the arrows get out of the way — you swipe instead */
@media (max-width:680px){
  .reel-arrow{width:42px;height:42px;top:auto;bottom:6px}
  .reel-arrow.prev{left:18px}
  .reel-arrow.next{right:18px}
}

/* which one you are on */
.reel-dots{
  position:absolute;left:0;right:0;bottom:14px;z-index:70;
  display:flex;justify-content:center;gap:7px;
}
.reel-dots button{
  width:22px;height:2px;background:var(--hair-lit);
  transition:background .35s var(--ease),width .35s var(--ease);
}
.reel-dots button.on{background:var(--platinum);width:34px}

.reel-hint{
  position:absolute;left:0;right:0;bottom:30px;z-index:65;text-align:center;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--steel);pointer-events:none;
  opacity:0;transition:opacity .6s var(--ease);
}
.reel.idle .reel-hint{opacity:1}

@media (prefers-reduced-motion:reduce){
  .reel-item{transition:none}
}