/* Folded geometry uses the same real paper as the main sheet. */
.paper-shell {
  --paper-roll-height: 23px;
  --paper-curl-size: 67px;
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  perspective: 1600px;
  perspective-origin: 20% 45%;
  isolation: isolate;
}

.paper-shell > .parchment {
  width: 100%;
  height: 100%;
  position: relative;
  transform-origin: 0 50%;
}

/* The top lip is a shallow cylinder: light on its crown, shade below. */
.paper-shell.paper-ready::before {
  content: '';
  position: absolute;
  left: -7px;
  right: -7px;
  top: -10px;
  height: var(--paper-roll-height);
  z-index: 3;
  pointer-events: none;
  border-radius: 48% 48% 30% 30% / 18% 18% 32% 32%;
  background: linear-gradient(180deg, #806039 0%, #d3b885 14%, #f9edce 39%, #e0c697 70%, #a78350 94%, #6a4b2b 100%);
  box-shadow: 0 5px 7px -4px #0005, inset 0 1px 0 #fff3d1a3;
}

.paper-shell.paper-ready::after {
  content: '';
  position: absolute;
  inset: 10px 2px auto;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, #69471d24, #69471d00);
}

.paper-turn-edge {
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 6;
  display: block;
  width: var(--paper-curl-size);
  height: var(--paper-curl-size);
  padding: 0;
  border: 0;
  border-radius: 3px 0 6px 0;
  background: transparent;
  color: #544126;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  perspective: 320px;
}

.paper-turn-edge::before {
  content: '';
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 85%;
  height: 85%;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #38251300 34%, #38251326 57%, #38251300 78%);
  transform: translate(-3px, -2px);
  pointer-events: none;
}

.paper-turn-fold {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transform-origin: 100% 100%;
  transform-style: preserve-3d;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 6px 0;
  background:
    linear-gradient(135deg, #ecd6ad00 38%, #f7e9c7c9 47%, #a98854c2 50%, #fff2d1 54%, #e1c697 80%, #b08e5e 100%),
    url('/mint-ui/assets/parchment-v1.png') bottom right / 450px auto;
  transform: rotateX(12deg) rotateY(-11deg) translate(-3px, -3px);
  filter: drop-shadow(-3px -3px 3px #4b301930);
  animation: paper-corner-breathe 7s ease-in-out infinite;
  transition: transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.paper-edge-label {
  position: absolute;
  right: 10px;
  bottom: 13px;
  width: max-content;
  padding: 2px 7px;
  background: #f6e9cd;
  box-shadow: 1px 2px 6px #0002;
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  opacity: 0;
  transform: translate(-30px, -24px);
  pointer-events: none;
  transition: opacity 150ms ease-out;
}

.paper-turn-edge:hover .paper-turn-fold,
.paper-turn-edge:focus-visible .paper-turn-fold {
  animation: none;
  transform: rotateX(23deg) rotateY(-24deg) translate(-7px, -7px);
}

.paper-turn-edge:hover .paper-edge-label,
.paper-turn-edge:focus-visible .paper-edge-label {
  opacity: 1;
}

.paper-turn-edge:focus-visible {
  outline: 2px solid #4d623b;
  outline-offset: 3px;
}

.paper-turn-edge:disabled {
  cursor: default;
}

.paper-shell.paper-at-rest .paper-turn-fold {
  animation-play-state: paused;
}

.paper-shell.paper-turning > .paper-sheet {
  will-change: transform, filter;
  animation: paper-sheet-turn 550ms cubic-bezier(.16, 1, .3, 1) both;
}

.paper-shell.paper-turning .paper-turn-fold {
  will-change: transform;
  animation: paper-leaf-turn 550ms cubic-bezier(.25, .6, .25, 1) both;
}

.paper-shell.paper-turning .paper-edge-label {
  opacity: 0;
}

@keyframes paper-corner-breathe {
  0%, 100% { transform: rotateX(12deg) rotateY(-11deg) translate(-3px, -3px); }
  50% { transform: rotateX(17deg) rotateY(-15deg) translate(-4px, -4px); }
}

@keyframes paper-sheet-turn {
  0%, 100% { transform: rotateY(0); filter: brightness(1); }
  38% { transform: rotateY(-1.5deg); filter: brightness(.985); }
  60% { transform: rotateY(.5deg); filter: brightness(1.005); }
}

@keyframes paper-leaf-turn {
  0% { transform: rotateX(18deg) rotateY(-20deg) translate(-5px, -5px) scale(1); }
  44% { transform: rotateX(28deg) rotateY(-143deg) translate(-9px, -7px) scale(1.6); }
  60% { transform: rotateX(20deg) rotateY(-100deg) translate(-6px, -4px) scale(1.4); }
  100% { transform: rotateX(12deg) rotateY(-11deg) translate(-3px, -3px) scale(1); }
}

@media (max-width: 760px) {
  .paper-shell {
    --paper-roll-height: 20px;
    --paper-curl-size: 59px;
    width: 100%;
    flex: 1 0 auto;
  }
  .paper-shell > .parchment { height: auto; min-height: calc(100dvh - 175px); }
  .paper-shell.paper-ready::before { top: -8px; left: -4px; right: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .paper-turn-fold,
  .paper-shell.paper-turning .paper-turn-fold,
  .paper-shell.paper-turning > .paper-sheet {
    animation: none;
    transition: none;
    will-change: auto;
  }
  .paper-edge-label { transition: none; }
  .paper-turn-edge:hover .paper-turn-fold,
  .paper-turn-edge:focus-visible .paper-turn-fold {
    transform: rotateX(12deg) rotateY(-11deg) translate(-3px, -3px);
  }
}