/* Paper cards, inspired by the drag / tuck-under interaction in React Bits Stack. */
#cards.stack-enabled { isolation: isolate; }
#cards.stack-enabled.is-dragging, #cards.stack-enabled.is-cycling { z-index: 11; }
#cards.stack-enabled::before,
#cards.stack-enabled > .card-under,
#cards.stack-enabled > .stack-extra { display: none; }

#cards.stack-enabled > #portfolioCard,
#cards.stack-enabled > .stack-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 1px;
  overflow: visible;
  transform-origin: 50% 55%;
  transition: none;
  text-align: left;
  box-shadow: 1px 2px 3px #3e301c20, 5px 8px 11px #3e301c1c;
}
#cards.stack-enabled > #portfolioCard { z-index: 4; transform: none; touch-action: pan-y; cursor: grab; }
#cards.stack-enabled > #portfolioCard:hover { transform: none; }
#cards.stack-enabled.is-dragging > #portfolioCard { cursor: grabbing; box-shadow: 6px 13px 22px #3e301c30; }
#cards.stack-enabled.is-single > #portfolioCard { cursor: pointer; }
#cards.stack-enabled > .stack-card { pointer-events: none; user-select: none; }
#cards.stack-enabled > .stack-flight { z-index: 5; will-change: transform; }
#cards.stack-enabled .work-art { border-radius: 1px; overflow: hidden; transition: none; pointer-events: none; }
#cards.stack-enabled .work-art img { -webkit-user-drag: none; user-select: none; }
#cards.stack-enabled .work-cover img { transform: none; transition: none; }
#cards.stack-enabled .work-tags { translate: none; }
#cards.stack-enabled .stack-card::after {
  content: ''; position: absolute; inset: 0; background: #302619;
  opacity: var(--stack-shade, 0); pointer-events: none;
}
#cards.stack-enabled .star-seal,
.mobile-open #cards.stack-enabled .star-seal {
  left: auto; right: -7px; top: 35px; width: 57px; height: 57px;
}
.mobile-open #cards.stack-enabled .star-seal { width: 47px; height: 47px; top: 34px; }
#cards.stack-enabled > .play-ticket { z-index: 8; }
#cards.stack-enabled > .project-tabs { z-index: 9; }
#cards.stack-enabled .card-arrow:disabled,
#cards.stack-enabled #playTicket:disabled { cursor: default; opacity: .6; }

.stack-hint {
  position: absolute; right: 10px; bottom: -36px;
  margin: 0; color: #75664e; font: 9px/1.5 Arial, 'Microsoft YaHei', sans-serif;
  letter-spacing: 1px; pointer-events: none;
}
.stack-hint::before { content: '↔'; margin-right: 7px; display: inline-block; transition: transform 180ms ease; }
.is-dragging .stack-hint::before { transform: translateX(var(--hint-direction, 0px)); }
.is-single .stack-hint::before { content: '↗'; }
.stack-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) { .stack-hint { bottom: -37px; right: 3px; font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .stack-hint::before { transition: none; } }