/* RYU v5.2 – restrained literary-library interaction polish. */
:root { --ryu-selection-gold: #f2d19a; }

/* Important: keep the original geometry and artwork; paint selection OUTSIDE
   the spine itself. The image can cover 100% of the spine without hiding it. */
.shelf-grid .bookcase-frame .spine.pulled,
.shelf-grid .bookcase-frame .spine.pulled.has-spine-artwork {
  outline: 2px solid var(--ryu-selection-gold) !important;
  outline-offset: 1px;
  box-shadow:
    0 0 0 4px rgba(224, 177, 106, .21),
    0 0 15px 3px rgba(241, 188, 111, .48),
    0 9px 24px 5px rgba(7, 6, 5, .75),
    inset 1px 0 2px rgba(255, 247, 223, .18) !important;
  filter: brightness(1.075) !important;
  z-index: 9 !important;
}

/* One soft reflection when selected. NOT a perpetual pulse. */
.shelf-grid .bookcase-frame .spine .ryu-spine-sheen {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(104deg,
    transparent 25%, rgba(255, 239, 200, 0) 35%,
    rgba(255, 239, 200, .34) 48%,
    rgba(255, 249, 227, .09) 52%, transparent 69%);
  transform: translateX(-155%);
}
.shelf-grid .bookcase-frame .spine.pulled .ryu-spine-sheen {
  animation: ryu-selected-sheen .75s ease-out both;
}
@keyframes ryu-selected-sheen {
  0% {opacity: 0; transform: translateX(-155%)}
  23% {opacity: 1}
  77% {opacity: .84}
  100% {opacity: 0; transform: translateX(155%)}
}

/* The shelf illuminates the selected book very gently. */
.shelf-grid .bookcase-frame .shelf-unit.ryu-shelf-lit {
  background:
    radial-gradient(ellipse at 50% 70%, rgba(203, 156, 86, .22), transparent 75%),
    repeating-linear-gradient(90deg,rgba(0,0,0,.015) 0 8px,rgba(255,255,255,.009) 8px 12px),
    linear-gradient(#211912,#32251b);
}
.shelf-grid .bookcase-frame .spine:focus-visible:not(.pulled) {
  outline: 2px solid var(--ryu-selection-gold) !important;
  outline-offset: 2px;
}
/* Hint is an explicit second selection cue, not solely a change of color. */
.shelf-intro #interaction-hint.ryu-selection-hint {
  color: #f0d3a7;
  text-shadow: 0 0 12px rgba(205, 158, 94, .23);
}

/* Restrained entrance and hover details for the literary atmosphere. */
.site-header .brand-mark {
  transition: box-shadow .28s ease, border-color .28s ease,
              color .28s ease, transform .28s ease;
}
.site-header .brand-mark:hover {
  border-color: #e4be88;
  color: #f0d8b6;
  box-shadow: 0 0 20px rgba(201, 154, 94, .22);
  transform: translateY(-2px);
}
.bookcase-panel {
  animation: ryu-case-gentle-enter .38s cubic-bezier(.22,.72,.25,1) both;
}
@keyframes ryu-case-gentle-enter {
  from {opacity: .32; transform: translateY(9px)}
  to {opacity: 1; transform: translateY(0)}
}
.case-arrow:not(:disabled) {
  transition: background-color .2s ease, border-color .2s ease,
              color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.case-arrow:not(:disabled):hover, .case-arrow:not(:disabled):focus-visible {
  background-color: rgba(183, 137, 84, .21);
  border-color: #caa475;
  color: #f9e7cb;
  box-shadow: 0 0 14px rgba(200, 151, 94, .16);
  transform: translateY(-1px);
}
.case-arrow:not(:disabled):active {transform: translateY(1px)}

/* Accessibility, low-power user choice, and keyboard navigation. */
@media (prefers-reduced-motion: reduce) {
  .shelf-grid .bookcase-frame .spine.pulled .ryu-spine-sheen {animation:none!important}
  .bookcase-panel {animation:none!important}
  .site-header .brand-mark, .case-arrow {transition:none!important}
  .site-header .brand-mark:hover, .case-arrow:not(:disabled):hover {transform:none!important}
}