/* Rotate the assembled sword so the blade still travels through its sheath aperture. */
.drag-sword-page .gate { --sword-pull: 0px; background: #090909; transition: none; }
.drag-sword-page .gate::before { background: #090909; }
.drag-sword-page .gate.is-open { background: transparent; pointer-events: none; }
.drag-sword-page .gate.is-open::before, .gate.is-open .gate__intro-stage { visibility: hidden; }
.gate__ink-split { display: none; }

@media (prefers-reduced-motion: no-preference) {
  body:not(.motion-reduced) .gate.is-open .gate__intro-stage {
    visibility: visible;
    opacity: max(0, calc(1 - var(--ink-cut, 1) * 4));
  }

  body:not(.motion-reduced) .gate.is-open .gate__ink-split {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
}

.drag-sword-page .gate__sword-artifact {
  --sword-length: min(84vw, max(520px, 83svh), 780px);
  --right-clearance: calc(54vw - var(--sword-length) * .5 - 8px);
  --follow-sword: max(0px, var(--sword-pull) - var(--right-clearance));
  top: 46%;
  left: 46%;
  width: clamp(100px, 22vw, 280px);
  height: var(--sword-length);
  min-height: 0;
  transform: translate(calc(-50% - var(--follow-sword)), -50%) rotate(90deg);
}
.scroll-blade-window { position: absolute; z-index: 1; inset: 0; clip-path: polygon(-100% -200%, 200% -200%, 200% 26.5%, -100% 26.5%); }
.drag-sword-page .scroll-blade-window .gate__blade { clip-path: none; transform: translateX(-50%) translateY(calc(0px - var(--sword-pull))); animation: none; }
.drag-sword-page .gate__sword-artifact img { filter: none !important; box-shadow: none !important; mix-blend-mode: normal; }
.drag-sword-page .gate__scabbard { transform: translateX(-50%) translateY(var(--sheath-offset, 0px)); animation: none; }
.scroll-grip { position: absolute; z-index: 6; top: 0; left: calc(50% + 8px); width: 92px; height: 27%; padding: 0; border: 0; border-radius: 4px; background: transparent; pointer-events: auto; cursor: grab !important; touch-action: none; transform: translateX(-50%) translateY(calc(0px - var(--sword-pull))); transition: none; }
.scroll-grip:active { cursor: grabbing !important; scale: 1 !important; }
.drag-sword-page .scroll-grip:focus-visible { outline: none; box-shadow: none; }
.gate__instruction { position: absolute; z-index: 7; top: calc(46% + clamp(32px, 5vw, 54px)); left: 46%; transform: translateX(-50%); color: #bdb4a4; font-size: 12px; font-weight: 400; line-height: 1.8; letter-spacing: .32em; white-space: nowrap; pointer-events: none; transition: color .2s ease; }
.gate__intro-stage:has(.scroll-grip:focus-visible) .gate__instruction { color: #f0e6d4; }
.drag-sword-page .gate__content { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
.return-grip { display: flex; align-items: center; flex: none; gap: 5px; height: 40px; padding: 0 9px 0 3px; border: 1px solid var(--control-line); border-radius: 20px; background: #140e09b3; color: #d5c1a0; font-size: 10px; cursor: grab !important; touch-action: none; transform: translateY(var(--return-offset, 0px)); }
.return-grip__crop { width: 19px; height: 36px; overflow: hidden; pointer-events: none; }
.return-grip__crop img { display: block; width: 24px; max-width: none; mix-blend-mode: normal; }
.return-grip:active { cursor: grabbing !important; }
.hero-scroll { width: min(100%, 440px); margin: 22px 0 0 4px; border-top: 1px solid #e8ce9833; border-bottom: 1px solid #e8ce9822; }
.hero-scroll__label { display: flex; align-items: center; justify-content: space-between; min-height: 32px; color: #c5b391; font-size: 10px; letter-spacing: .1em; }
.hero-scroll__label button { min-height: 32px; padding: 0 6px; background: transparent; color: #d8c3a0; font-size: 10px; }
.hero-scroll__viewport { height: 124px; overflow: auto; overscroll-behavior: auto; scrollbar-width: thin; scrollbar-color: #91795066 transparent; cursor: grab; background: #130e0959; }
.hero-scroll__viewport.is-dragging { cursor: grabbing; user-select: none; }
.hero-scroll__viewport img { display: block; height: 300px; width: auto; max-width: none; margin-inline: auto; padding: 12px 24px; mix-blend-mode: screen; opacity: .85; user-select: none; -webkit-user-drag: none; }
@media (max-width: 739px) {
  .topbar { gap: 6px; }
  .return-grip { width: 36px; padding: 0 6px; border-radius: 50%; }
  .return-grip > span:last-child { display: none; }
  .return-grip__crop { width: 22px; }
  .hero-scroll { width: min(100%, 360px); margin-top: 18px; }
  .hero-scroll__viewport { height: 108px; }
}