/* Swipe navigation for the main Studio event card. */
.studio-card {
  position: relative;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  will-change: transform, opacity;
  transform-origin: 50% 58%;
}

.studio-card[data-swipe-dragging="true"] {
  cursor: grabbing;
}

.studio-card[data-swipe-animating="true"] {
  pointer-events: none;
}

/* The portrait is visual content inside a swipe surface, not an independent
   control. Let pointer hit-testing fall through to the card so iOS does not
   open the native image Save/Copy callout and interrupt the swipe pointer
   lifecycle. The full portrait area remains swipeable through its parent. */
.studio-portrait-window img {
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The CharaSelect logo moved out of the hero and into the page header, so the
   portrait window no longer needs the old reserved header/footer insets. Let
   the model use the full art pane instead of clipping below empty space. */
.studio-portrait-window {
  top: 0 !important;
  bottom: 0 !important;
}

/* Mobile swipe affordance. Font Awesome 6 is loaded directly from cdnjs on
   the event page so the exact arrows-left-right icon renders on dev and prod
   without depending on kit-domain configuration. */
.studio-swipe-hint {
  display: none;
}

@media (max-width: 760px) {
  .studio-swipe-hint {
    position: absolute;
    z-index: 20;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    left: auto;
    right: 12px;
    bottom: 7px;
    width: max-content;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--theme-accent);
    text-align: center;
    pointer-events: none;
    opacity: .78;
    transform: none;
  }

  .studio-swipe-hint .fa-arrows-left-right {
    display: block;
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    text-align: center;
    font-size: 1.08rem;
    line-height: .9;
  }

  .studio-swipe-hint span {
    display: block;
    margin: 0;
    font: 900 .5rem/.9 Arial, Helvetica, sans-serif;
    letter-spacing: .12em;
  }
}

@media (hover: hover) {
  .studio-card::after {
    content: "";
    position: absolute;
    z-index: 8;
    top: 50%;
    right: 8px;
    width: 7px;
    height: 7px;
    border-top: 2px solid rgba(255,255,255,.42);
    border-right: 2px solid rgba(255,255,255,.42);
    pointer-events: none;
    transform: translateY(-50%) rotate(45deg);
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-card {
    will-change: auto;
  }
}