/* Uniform 02 stage: the look on squared paper with handwritten labels and
   pencil arrows (js/look-stage.js). Shop parts (card, drawer, buy bar) live
   in main.css. */

/* The rail fills the screen between top bar and buy bar; the look scales into it */
.sw-rail {
  position: relative;
  height: calc(100svh - 156px);
  min-height: 420px;
}

@media (max-width: 767px) {
  .sw-rail { height: calc(100svh - 300px); min-height: 380px; }
}

.sw-rail.is-pointing { cursor: pointer; }

.sw-sketch {
  position: absolute;
  z-index: 2;            /* drawn over the photo, so arrows can reach the bag on the hoodie */
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sw-sketch path {
  fill: none;
  stroke: var(--pencil);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke var(--dur-hover) var(--ease-out), stroke-width var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}

.sw-sketch .is-floor { stroke-width: 1.2; }
.sw-sketch .is-active { stroke: var(--thread); stroke-width: 2; }
.sw-rail.has-active .sw-sketch path:not(.is-active):not(.is-floor) { opacity: 0.35; }

/* The look: a background-free image, the cut-out pieces laid exactly on top of it */
.sw-look {
  position: absolute;
  z-index: 1;
}

/* Hidden until look-stage.js has sized and placed it, so it doesn't jump into place */
.sw-look:not(.is-ready) { visibility: hidden; }

.sw-look__base {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  transition: opacity var(--dur-hover) var(--ease-out);
}

.sw-cut {
  position: absolute;
  z-index: 1;
  pointer-events: none; /* mouse and touch use the pixel hit test in look-stage.js */
  transition: scale var(--dur-hover) var(--ease-out), opacity var(--dur-hover) var(--ease-out);
}

.sw-cut img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
}

/* Spotlight: everything but the active piece steps back */
.sw-rail.has-active .sw-look__base { opacity: 0; }
.sw-rail.has-active .sw-cut:not(.is-active) { opacity: 0.32; }
.sw-cut.is-active { z-index: 3; scale: 1.06; }

/* Handwritten labels, the buttons of the stage */
.sw-label {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  display: grid;
  max-width: 190px;
  padding: 2px 4px;
  border: 0;
  background: none;
  font-family: var(--hand);
  text-align: left;
  line-height: 1.1;
  cursor: pointer;
  translate: 0 -50%;
  transition: opacity var(--dur-hover) var(--ease-out);
}

.sw-label__name { font-size: 1.35rem; }
.sw-label__price { font-size: 1.1rem; color: var(--seam); }

.sw-rail.has-active .sw-label:not(.is-active) { opacity: 0.45; }

/* Opened from the keyboard: change at once, keyboard actions never animate */
.sw-rail.is-instant .sw-cut,
.sw-rail.is-instant .sw-look__base,
.sw-rail.is-instant .sw-label,
.sw-rail.is-instant .sw-sketch path,
.sw-rail.is-instant .card { transition: none; }

@media (max-width: 767px) {
  .sw-label { max-width: 130px; }
  .sw-label__name { font-size: 1.15rem; }
  .sw-label__price { font-size: 0.95rem; }
}

.js .piece-list { display: none; }
.no-js .sw-rail { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sw-cut, .sw-look__base, .sw-label, .sw-sketch path { transition: none; }
}