/* Frenlyverse page-fold — paper peel into the courtyard */
.fold {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 4000;
  width: 48px;
  height: 48px;
  display: block;
  text-decoration: none;
  color: #f6f3ec;
}
.fold:focus-visible {
  outline: 2px solid #eaa147;
  outline-offset: 3px;
}
.fold-under {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(225deg, #eaa147 0 42%, transparent 42.2%),
    #111528 url("world/sanctum.jpg") 100% 0 / 280px auto no-repeat;
  clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.fold-paper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(225deg, #fffcf6 0%, #efe8da 52%, #d9d0c0 100%);
  clip-path: polygon(28% 0, 100% 0, 100% 72%);
  box-shadow: -10px 12px 22px rgba(17, 21, 40, 0.28);
  transform-origin: 100% 0;
  transition: transform 0.35s ease, filter 0.35s ease;
  filter: drop-shadow(-2px 3px 0 rgba(215, 189, 131, 0.45));
}
.fold:hover .fold-paper,
.fold:focus-visible .fold-paper {
  transform: translate(-7px, 8px) rotate(-8deg);
}
.fold-label {
  position: absolute;
  top: 52px;
  right: 10px;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: #3d6b68;
  opacity: 0.85;
  pointer-events: none;
}
.fold:hover .fold-label,
.fold:focus-visible .fold-label {
  color: #c9a24a;
}
.fold-label .hover {
  display: none;
}
@media (min-width: 880px) {
  .fold {
    width: 64px;
    height: 64px;
  }
  .fold-label {
    top: 70px;
    right: 12px;
    font-size: 12px;
  }
  .fold-label .rest {
    display: none;
  }
  .fold-label .hover {
    display: inline;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .fold:hover .fold-label .hover,
  .fold:focus-visible .fold-label .hover {
    opacity: 1;
  }
}
.peel {
  position: fixed;
  inset: 0;
  z-index: 4010;
  pointer-events: none;
  opacity: 0;
}
body.peeling .peel {
  opacity: 1;
  pointer-events: auto;
}
.peel-sheet {
  position: absolute;
  inset: 0;
  background: #111528 url("world/sanctum.jpg") center / cover no-repeat;
  clip-path: polygon(100% 0, 100% 0, 100% 0);
  transition: clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
body.peeling .peel-sheet {
  clip-path: polygon(100% 0, -20% 0, 100% 120%);
}
@media (prefers-reduced-motion: reduce) {
  .fold-paper,
  .peel-sheet {
    transition: none;
  }
}