.future {
  position: relative;
  padding: 68px var(--gutter) 105px;
  overflow: hidden;
  background: var(--black);
  max-width: 1920px;
  margin: 0 auto;
}

.future__dust {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 1080px;
  object-fit: cover;
  object-position: center top;
  mix-blend-mode: screen;
  opacity: 0.35;

  -webkit-mask-image: radial-gradient(ellipse 28% 45% at 50% 55%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 28% 45% at 50% 55%, #000 30%, transparent 100%);
  pointer-events: none;
}

.future__lamp {
  position: absolute;
  top: 3px;
  left: calc(50% + 13px);
  width: 311px;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
}

.future__light {
  position: absolute;
  top: 84px;
  left: 50%;
  width: 1250px;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  mix-blend-mode: screen;
  opacity: 0.3;
  pointer-events: none;
}

.future__head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}

.future__title {
  max-width: 460px;
  color: var(--white);
  font: 600 80px/0.9 var(--font-serif);
}

.future__text {
  max-width: 424px;
  color: #ACACAC;
  font: 500 16px/1.5 var(--font-sans);
}

.future__scroll {
  position: relative;
  z-index: 2;
  margin-top: clamp(120px, 15.6vw, 299px);
}

.board {
  position: relative;
  max-width: 1792px;
  margin: 0 auto;
  aspect-ratio: 1792 / 880;
  container-type: inline-size;
  background: url("../assets/board.svg") 0 0 / 100% 100% no-repeat;
  --u: calc(100cqw / 1792);
}

.board__card {
  position: absolute;
  top: calc(var(--y) * var(--u));
  left: calc(var(--x) * var(--u));
  width: calc(var(--w) * var(--u));
  background: #E9E3D8;
  color: #2E2A25;
  box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) rgba(0, 0, 0, 0.45);
  transform:
    translate(calc(var(--dx, 0) * var(--u)), calc(var(--dy, 0) * var(--u)))
    rotate(calc(var(--r, 0) * 1deg));
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: scale 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.board__card.is-dragging {
  scale: 1.04;
  box-shadow: 0 calc(24 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, 0.6);
  cursor: grabbing;
}

.board__pin {
  position: absolute;
  top: calc(2 * var(--u));
  left: 50%;
}

.board__img {
  display: block;
  width: 100%;
  aspect-ratio: 258 / 182;
  object-fit: cover;
  pointer-events: none;
}

.board__title {
  color: var(--black);
  font: 700 calc(22 * var(--u))/1.2 var(--font-sans);
}

.board__text {
  margin-top: calc(8 * var(--u));
  color: var(--black);
  font: 400 calc(16 * var(--u))/1.2 var(--font-sans);
}

.board__card--polaroid {
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
}

.board__card--polaroid .board__title {
  margin-top: calc(16 * var(--u));
}

.board__card--snap {
  padding: calc(9 * var(--u));
}

.board__card--snap .board__img {
  aspect-ratio: 204 / 152;
}

.board__img--empty {
  background: #5E564C;
}

.board__card--note {
  min-height: calc(163 * var(--u));
  padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(20 * var(--u));
  background: var(--sticker);
  box-shadow: 0 calc(4 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.4);
}

.board__card--note .board__title {
  font-size: calc(16 * var(--u));
  line-height: 1.25;
}

.board__card--note .board__text {
  margin-top: calc(10 * var(--u));
  color: #4A3A26;
  font-size: calc(14 * var(--u));
  line-height: 1.25;
}

.board__img--question {
  display: grid;
  place-items: center;
  background: #2B2A28;
  color: #E2DACE;
  font: 700 calc(64 * var(--u))/1 var(--font-sans);
}

.board__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(34 * var(--u));
  margin-top: calc(18 * var(--u));
  padding: 0 calc(28 * var(--u));
  border: calc(2 * var(--u)) solid var(--ink);
  background: none;
  color: var(--ink);
  font: 700 calc(15 * var(--u))/1 var(--font-sans);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.board__btn-icon {
  position: absolute;
  right: calc(12 * var(--u));
  width: calc(17 * var(--u));
  height: calc(17 * var(--u));
  background: currentColor;
  -webkit-mask: url("../assets/edit.svg") center / contain no-repeat;
  mask: url("../assets/edit.svg") center / contain no-repeat;
}

.board__btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.board__strings {
  position: absolute;
  inset: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.board__string {
  stroke: #C0272D;
  stroke-opacity: 0.85;
  stroke-width: 1.5;
}

.board__pin-head {
  fill: #2B2622;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}

.board__pin-shine {
  fill: rgba(255, 255, 255, 0.22);
}

@media (max-width: 1100px) {
  .future__head {
    flex-direction: column;
    gap: 24px;
  }

  .future__title {
    font-size: 64px;
  }

  .future__lamp {
    left: auto;
    right: 0;
    width: 200px;
    transform: none;
  }

  .future__light {
    left: auto;
    right: -380px;
    width: 960px;
    transform: none;
  }
}

@media (max-width: 900px) {
  .future {
    display: flex;
    flex-direction: column;
    padding: 80px var(--gutter) 64px;
  }

  .future__dust {
    display: none;
  }

  .future__light {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 3;
    order: 1;
    align-self: center;
    flex: none;
    width: 680px;
    margin: -104px 0 -311px;
    transform: none;
  }

  .future__head {
    gap: 12px;
  }

  .future__title {
    font-size: 32px;
    line-height: 0.9;
  }

  .future__text {
    font-size: 14px;
    line-height: 1.4;
  }

  .future__lamp {
    position: relative;
    top: auto;
    left: auto;
    order: 1;
    width: 170px;
    margin: 56px auto 0;
    transform: none;
  }

  .future__scroll {
    order: 2;
    margin: 48px calc(11px - var(--gutter)) 0;
    padding: 0;
    overflow: visible;
  }

  .board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    width: auto;
    padding: 29px 0 64px;
    aspect-ratio: auto;
    border: 4px solid #3C2813;
    background:
      radial-gradient(circle, #57442F 1.5px, transparent 2px) 0 0 / 12px 12px,
      linear-gradient(#503C27, #503C27);
    --u: 1px;
  }

  .board__card {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    max-width: calc(100% - 32px);
    cursor: default;
    touch-action: auto;
    transform: translateX(var(--mx, 0px)) rotate(calc(var(--mr, 0) * 1deg));
  }

  .board__card--snap {
    display: none;
  }

  .board__img {
    aspect-ratio: 258 / 156;
  }

  .board__strings {
    inset: -6px;
    z-index: 0;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
  }

  .board__strings g {
    display: none;
  }

  .board__card {
    z-index: 1;
  }

  .board__pin::before {
    content: "";
    position: absolute;
    top: -7px;
    left: -7px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.22) 0 2.5px, transparent 3px), #2B2622;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
  }

  .board__card[data-id="6"] { order: 1; --mx: 18px; --mr: 2; }
  .board__card[data-id="1"] { order: 2; --mx: -18px; --mr: -2; }
  .board__card[data-id="9"] { order: 3; --mx: 39px; --mr: 2; }
  .board__card[data-id="8"] { order: 4; --mx: -20px; --mr: 0; }
  .board__card[data-id="3"] { order: 5; --mx: 12px; --mr: 2; }
  .board__card[data-id="5"] { order: 6; --mx: -50px; --mr: -1; }
  .board__card[data-id="4"] { order: 7; --mx: 14px; --mr: -2; }
  .board__card[data-id="10"] { order: 8; --mx: 0px; --mr: 0; }

  .board__title {
    font-size: 17px;
  }

  .board__text {
    font-size: 14px;
  }

  .board__card--note {
    min-height: 0;
  }

  .board__card--note .board__title {
    font-size: 15px;
  }

  .board__card--note .board__text {
    font-size: 13px;
  }

  .board__btn {
    height: 38px;
    font-size: 15px;
  }
}