/* Exploded plank. Scoped to this page's construction section. */

.el-plank {
  --el-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --el-ink: #1c1a17;
  --el-soft: #4a453e;
  --el-stone: #766e64;
  --el-rule: #e2dbcf;
  --el-oak: #b08a5b;
  --el-w: 240px;
  --el-d: 104px;
  container-type: inline-size;
  margin-top: 32px;
  color: var(--el-ink);
  font-family: "Inter Tight", "Segoe UI", sans-serif;
}

.el-plank__layout {
  display: grid;
  gap: 28px;
}

.el-plank__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  perspective: 900px;
  perspective-origin: 50% 46%;
  touch-action: none;
  cursor: ns-resize;
  user-select: none;
}

.el-plank__scene {
  position: relative;
  width: var(--el-w);
  height: var(--el-d);
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-24deg);
}

.el-layer {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform 180ms var(--el-ease);
  cursor: pointer;
  appearance: none;
}

.el-layer:focus {
  outline: none;
}

.el-layer:focus-visible {
  outline: 2px solid var(--el-oak);
  outline-offset: 4px;
}

.el-plank.is-dragging .el-layer {
  transition: none;
}

.el-layer--wear {
  --t: 16px;
  transform: translate3d(0, 0, 60px);
}

.el-layer--core {
  --t: 48px;
  transform: translate3d(0, 0, 0px);
}

.el-layer--back {
  --t: 12px;
  transform: translate3d(0, 0, -58px);
}

.el-box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.el-face {
  position: absolute;
  display: block;
  pointer-events: none;
}

.el-face--top,
.el-face--bottom {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.el-face--top {
  transform: translate3d(0, 0, calc(var(--t) / 2));
}

.el-face--bottom {
  transform: rotateX(180deg) translate3d(0, 0, calc(var(--t) / 2));
}

.el-face--front,
.el-face--back {
  width: 100%;
  height: var(--t);
  left: 0;
  top: calc(50% - (var(--t) / 2));
}

.el-face--front {
  transform: translate3d(0, calc(var(--el-d) / 2), 0) rotateX(-90deg);
}

.el-face--back {
  transform: translate3d(0, calc(var(--el-d) / -2), 0) rotateX(90deg);
}

.el-face--left,
.el-face--right {
  width: var(--t);
  height: 100%;
  top: 0;
  left: calc(50% - (var(--t) / 2));
}

.el-face--left {
  transform: translate3d(calc(var(--el-w) / -2), 0, 0) rotateY(-90deg);
}

.el-face--right {
  transform: translate3d(calc(var(--el-w) / 2), 0, 0) rotateY(90deg);
}

.el-layer--wear .el-face--top {
  background-color: #d7c4a4;
  background-image: url("media/grade-ab.webp");
  background-repeat: no-repeat;
  /* The sample photo sits on a black field. Zoom past that field so the face is oak. */
  background-position: center 46%;
  background-size: 230% auto;
}

.el-layer--wear .el-face--bottom,
.el-layer--wear .el-face--front,
.el-layer--wear .el-face--back,
.el-layer--wear .el-face--left,
.el-layer--wear .el-face--right {
  background-color: #c4a882;
  background-image: linear-gradient(
    90deg,
    #d7c4a4,
    #c4a882 42%,
    #a88862
  );
}

.el-layer--core .el-face--top,
.el-layer--core .el-face--bottom {
  background-color: #d7c4a4;
  background-image: repeating-linear-gradient(
    90deg,
    #a88862 0 1px,
    transparent 1px 8px
  );
}

.el-layer--core .el-face--front,
.el-layer--core .el-face--back,
.el-layer--core .el-face--left,
.el-layer--core .el-face--right {
  background-color: #c4a882;
  background-image:
    linear-gradient(to bottom, #a88862 0 2px, transparent 2px 31%, #a88862 31% 35%, transparent 35% 65%, #a88862 65% 69%, transparent 69% calc(100% - 2px), #a88862 calc(100% - 2px)),
    repeating-linear-gradient(0deg, #a88862 0 2px, #d7c4a4 2px 6px),
    repeating-linear-gradient(90deg, #d7c4a4 0 2px, #a88862 2px 5px),
    repeating-linear-gradient(0deg, #a88862 0 2px, #c4a882 2px 6px);
  background-size: 100% 100%, 100% 33%, 100% 34%, 100% 33%;
  background-position: center, top, center, bottom;
  background-repeat: no-repeat;
}

.el-layer--back .el-face {
  background-color: #8c6a43;
  background-image: linear-gradient(
    165deg,
    color-mix(in srgb, #8c6a43 42%, #f5f1ea),
    color-mix(in srgb, #8c6a43 72%, #a39a8e)
  );
}

.el-plank__note {
  margin: 0;
  max-width: 42ch;
  min-height: 6.6em;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--el-soft);
}

.el-plank__names {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1px solid var(--el-rule);
}

.el-plank__names li {
  border-bottom: 1px solid var(--el-rule);
}

.el-plank__names button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--el-stone);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
}

.el-plank__names button[aria-pressed="true"] {
  color: var(--el-ink);
}

.el-plank__dot {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: transparent;
}

.el-plank__names button[aria-pressed="true"] .el-plank__dot {
  background: var(--el-oak);
}

.el-plank__names button:focus-visible {
  outline: 2px solid var(--el-oak);
  outline-offset: 4px;
}

.el-plank__range {
  display: grid;
  gap: 8px;
  margin-top: 22px;
}

.el-plank__range span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--el-stone);
}

.el-plank__range input {
  width: 100%;
  margin: 0;
  accent-color: #b08a5b;
  cursor: pointer;
}

.el-plank__range input:focus-visible {
  outline: 2px solid var(--el-oak);
  outline-offset: 4px;
}

@container (max-width: 420px) {
  .el-plank__scene {
    transform: scale(0.86) rotateX(58deg) rotateZ(-24deg);
  }

  .el-plank__stage {
    min-height: 320px;
  }
}

@container (min-width: 600px) {
  .el-plank__layout {
    grid-template-columns: minmax(260px, 1.15fr) minmax(220px, 0.85fr);
    gap: 36px;
    align-items: center;
  }

  .el-plank__stage {
    border-right: 1px solid var(--el-rule);
  }

  .el-plank__note {
    min-height: 7.8em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .el-plank .el-layer {
    transition: none;
  }
}