/* 展卷过渡：点击「写下我的一字」先慢慢展开长卷，选字后再进入写字 */
.unroll {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
}
.unroll.is-open { opacity: 1; visibility: visible; }

.unroll-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 40%, #16302a 0%, #0e1f1b 55%, #0a1714 100%);
}

.unroll-stage {
  position: relative;
  width: min(1180px, 94vw);
  text-align: center;
  color: #e9ede3;
}

.unroll-eyebrow {
  margin: 0 0 18px;
  font-size: 11px;
  letter-spacing: 5px;
  color: #93a89b;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .6s ease .1s, transform .6s ease .1s;
}
.unroll.is-open .unroll-eyebrow { opacity: 1; transform: none; }

.unroll-viewport {
  position: relative;
  overflow: hidden;
  border-top: 1px solid #ffffff1f;
  border-bottom: 1px solid #ffffff1f;
  padding: 12px 0;
}

/* 卷面：从右往左展开 */
.unroll-scroll {
  position: relative;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.75s cubic-bezier(.22, .72, .16, 1);
  transform: scale(1.035);
  will-change: clip-path, transform;
  transition-property: clip-path, transform;
  transition-duration: 1.75s, 1.75s;
  transition-timing-function: cubic-bezier(.22, .72, .16, 1), ease-out;
}
.unroll:not(.is-open) .unroll-scroll { transition: none; }
.unroll.is-open .unroll-scroll {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

.unroll-canvas {
  position: relative;
  max-height: 66vh;
  aspect-ratio: 4513 / 1480;
  margin: 0 auto;
  background: #efe6d2;
  box-shadow: 0 30px 80px #0000005c;
  overflow: auto hidden;
}
.unroll-canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.unroll-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.unroll-cell {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
  transition: fill .18s, stroke .18s;
}
.unroll.is-ready .unroll-cell:hover {
  fill: #a54c3733;
  stroke: #b4543c;
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.unroll-hint {
  margin: 20px 0 0;
  font-size: 12.5px;
  letter-spacing: 2px;
  color: #a8b8ad;
  min-height: 20px;
  transition: color .3s;
}
.unroll.is-ready .unroll-hint { color: #e4c9b4; }

.unroll-close {
  position: absolute;
  top: 18px; right: 20px;
  width: 42px; height: 42px;
  border: 1px solid #ffffff2e;
  background: transparent;
  color: #cfd8cf;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s, color .2s, transform .2s;
}
.unroll-close:hover { border-color: #b4543c; color: #fff; transform: rotate(90deg); }

/* 展开完成后，卷面轻微上浮提示可点 */
.unroll.is-ready .unroll-canvas { animation: unrollFloat 5s ease-in-out infinite alternate; }
@keyframes unrollFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

@media (max-width: 760px) {
  .unroll-stage { width: 94vw; }
  .unroll-canvas { max-height: 52vh; }
  .unroll-eyebrow { font-size: 10px; letter-spacing: 3px; margin-bottom: 12px; }
  .unroll-hint { font-size: 11.5px; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .unroll-scroll { transition: none; clip-path: inset(0 0 0 0); transform: none; }
  .unroll.is-ready .unroll-canvas { animation: none; }
}