/* Keep the established rectangular / round frames; only the photo changes. */
.photo-slider { isolation: isolate; --photo-fade: 1500ms; }
.recruit__portrait.photo-slider { --photo-fade: 800ms; }
.photo-slider__viewport { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; touch-action: pan-y; }
.hero__detail .photo-slider__viewport { inset: 3px; }
.hero__detail.photo-slider.is-paint-playing::after { z-index: 4; }
.photo-slider__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; pointer-events: none; }
.photo-slider__slide.is-current { opacity: 1; z-index: 2; transition: opacity var(--photo-fade) ease-in-out; }
/* An opaque outgoing image prevents the dark frame flashing through the fade. */
.photo-slider__slide.is-outgoing { opacity: 1; z-index: 1; }
.photo-slider .photo-slider__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-slider__controls {
  position: absolute;
  z-index: 3;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: #f8f5f0;
}
.photo-slider__controls[hidden], .photo-slider__playback[hidden] { display: none; }
.photo-slider__dots { display: flex; order: -1; }
.photo-slider__controls button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  width: 24px;
  height: 32px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}
.photo-slider__controls button span { filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 4px #0008); }
.photo-slider__dot span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .65; transition: background-color .2s, opacity .2s, transform .2s; }
.photo-slider__dot[aria-current="true"] span { background: var(--gold-bright); opacity: 1; transform: scale(1.17); }
.photo-slider__controls .photo-slider__playback { width: 28px; }
.photo-slider__playback span { width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.photo-slider__playback.is-paused span { width: 0; height: 0; border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; margin-left: 2px; }
.photo-slider__controls button:hover { color: var(--gold-bright); }
.photo-slider__dot:hover span { opacity: 1; }
.photo-slider__controls button:focus-visible { outline: 2px solid #f8f5f0; outline-offset: 1px; }
@media (max-width: 699px) {
  .hero__detail .photo-slider__controls { right: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-slider__slide.is-current, .photo-slider__dot span { transition: none; }
}
@media print { .photo-slider__controls { display: none; } }