/* 词条阅读动效 · 参考 GlassMusic 共享元素 / 3D tilt / stagger */

.read-portal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 199;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(124, 92, 224, 0.08), transparent 55%),
    rgba(8, 12, 24, 0.28);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.read-portal-backdrop.is-visible {
  opacity: 1;
}

.read-strip-inline {
  perspective: 1400px;
  perspective-origin: 40% 50%;
}

.read-group {
  transform-style: preserve-3d;
}

.read-tilt {
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.03, 0.98, 0.52, 0.99), box-shadow 0.35s ease;
  will-change: transform;
}

.read-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(255, 255, 255, 0.12) 100%
  );
  z-index: 2;
}
.read-tilt:hover::after,
.read-tilt.is-tilting::after {
  opacity: 1;
}

.kb-peek-card.read-tilt,
.read-summary-card.read-tilt {
  box-shadow: var(--shadow), 0 18px 48px rgba(0, 0, 0, 0.12);
}

.read-group:has(.read-article-card) .read-summary-card {
  transform: none;
  border-radius: var(--radius);
}

.read-article-card {
  transform-origin: left center;
  backface-visibility: hidden;
}

.read-article-card .article-section {
  opacity: 1;
}

.btn-expand-detail {
  transform-style: preserve-3d;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.35s ease;
}
.btn-expand-detail:hover:not(.is-pressed) {
  transform: translateY(-50%) translateX(2px) scale(1.04);
  box-shadow: 0 0 20px rgba(124, 92, 224, 0.2);
}
.btn-expand-detail.is-pressed {
  box-shadow: 0 0 12px rgba(124, 92, 224, 0.15);
}
.read-group-expanding .btn-expand-detail {
  opacity: 0;
  pointer-events: none;
}

.read-session {
  transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1), left 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.read-session-closing {
  pointer-events: none;
}
.read-group-closing {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .read-tilt,
  .read-session,
  .btn-expand-detail,
  .read-portal-backdrop {
    transition: none !important;
  }
}