/* Independent, geometry-preserving details for the small-character pass. */

/* Visual: reveal the panel, keeping the cloned header and backdrop steady. */
@media (prefers-reduced-motion: no-preference) {
  .viewer[open] > .viewer-shell {
    animation: drau-viewer-reveal 160ms ease-out;
  }
  @keyframes drau-viewer-reveal {
    from { opacity: .85; }
    to { opacity: 1; }
  }
}

/* PPP: the visible character's copy gets a small, touch-friendly entrance. */
@media (prefers-reduced-motion: no-preference) {
  .ppp-character-copy article:not([hidden]) .ppp-character-details {
    animation: drau-character-reveal 160ms ease-out;
  }
  @keyframes drau-character-reveal {
    from { opacity: .65; }
    to { opacity: 1; }
  }
}

/* Daley: contextual states only; the closed control retains its appearance. */
.episode-sort.is-open .sort-trigger,
.episode-sort .sort-trigger:focus-visible {
  border-color: var(--acid);
}
.episode-sort .sort-trigger:focus-visible {
  box-shadow: inset 0 0 0 2px var(--acid);
}
.episode-sort.is-open .select-chevron {
  color: var(--acid);
}
.episode-sort .sort-menu [role=option]:is(:hover, :focus-visible) {
  background: rgb(217 251 74 / .16);
}
.episode-sort .sort-menu [role=option][aria-selected=true] {
  background: var(--acid);
  color: #000;
}
.episode-sort .sort-menu [role=option]:focus-visible {
  box-shadow: inset 0 0 0 2px currentColor;
}

/* For Him: keep the existing focus ring's width and offset, use its orange. */
.for-him-page main :is(a, button):focus-visible,
.fh-viewer button:focus-visible {
  outline-color: #ef8b58;
}

/* Voice: fade only the existing strip's visibility, never its playback width. */
@media (prefers-reduced-motion: no-preference) {
  .character-dialog-progress { transition: opacity 140ms ease-out; }
  .carousel-controls button:not(:disabled):active { transform: translateY(1px); }
  .home-featured-card .home-card-button { transition: transform 140ms ease-out; }
  .home-featured-card:is(:hover, :focus-visible) .home-card-button { transform: translateX(1px); }
}

/* The existing label is available on focus, with no permanent footer copy. */
.back-to-top { position: relative; }
.back-to-top:focus-visible::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  padding: 5px 8px;
  border: 1px solid var(--lilac);
  border-radius: 8px;
  background: #080609;
  color: #fff;
  font-size: .75rem;
  pointer-events: none;
}
.visual-random {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #604d78;
  border-radius: 999px;
  background: #0d0910;
  color: var(--lilac);
  font: 800 .86rem/1.2 Nunito, sans-serif;
}
.visual-random:disabled { opacity: .4; cursor: default; }
.visual-random:is(:hover, :focus-visible):not(:disabled) { background: #1a1120; }

/* Keep the gallery tint inside each tile, including during rapid hover changes.
   A clipped overlay avoids exposing a lilac backing below fractional image edges. */
.gallery-feed button {
  background: transparent;
  isolation: isolate;
  contain: paint;
}
.gallery-feed button::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: inherit;
  background: var(--lilac);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.gallery-feed button img,
.gallery-feed button:is(:hover, :focus-visible) img { opacity: 1; }
.gallery-feed button:is(:hover, :focus-visible)::after { opacity: .12; }