/* Homepage story rails: transparent at rest, softly illuminated on touch/focus. */
.rail-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(177, 158, 239, 0.16) !important;
  background: rgba(6, 9, 20, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(232, 226, 255, 0.025),
    inset 0 -1px 0 rgba(118, 97, 199, 0.025);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: border-color 260ms ease, box-shadow 320ms ease, background-color 260ms ease;
}

.rail-panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -35% -12%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    42% 60% at var(--rail-glow-x, 28%) var(--rail-glow-y, 48%),
    rgba(143, 112, 246, 0.16),
    rgba(105, 82, 197, 0.05) 48%,
    transparent 74%
  );
  transition: opacity 300ms ease;
}

.rail-panel.is-glowing,
.rail-panel:has(.wide-card:active),
.rail-panel:has(.wide-card:focus-within) {
  border-color: rgba(174, 151, 248, 0.38) !important;
  background: rgba(8, 10, 24, 0.11) !important;
  box-shadow:
    inset 0 1px 0 rgba(239, 234, 255, 0.07),
    0 0 24px rgba(118, 86, 225, 0.08);
}

.rail-panel.is-glowing::before,
.rail-panel:has(.wide-card:active)::before,
.rail-panel:has(.wide-card:focus-within)::before {
  opacity: 1;
}

.wide-card {
  isolation: isolate;
  overflow: visible !important;
  border-color: color-mix(in srgb, var(--tone) 16%, rgba(202, 190, 245, 0.08)) !important;
  background: rgba(5, 7, 17, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(239, 234, 255, 0.018);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  transform: translateZ(0);
  transition:
    border-color 220ms ease,
    box-shadow 280ms ease,
    background-color 220ms ease,
    transform 220ms ease;
}

.wide-card::before,
.wide-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease;
}

.wide-card::before {
  z-index: -1;
  inset: -12px;
  border-radius: 24px;
  background: radial-gradient(
    72% 88% at 34% 48%,
    rgba(159, 112, 255, 0.28),
    rgba(123, 82, 226, 0.1) 46%,
    transparent 76%
  );
  filter: blur(10px);
}

.wide-card::after {
  z-index: -1;
  left: 9%;
  right: 18%;
  bottom: -10px;
  height: 12px;
  border-radius: 50%;
  background: rgba(157, 108, 255, 0.46);
  filter: blur(9px);
}

.wide-card:is(.is-selected, :active, :focus-within) {
  border-color: rgba(178, 142, 255, 0.92) !important;
  background: rgba(11, 11, 29, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(244, 240, 255, 0.14),
    0 0 0 1px rgba(151, 105, 255, 0.2),
    0 0 24px rgba(143, 91, 255, 0.34),
    0 12px 30px rgba(2, 3, 10, 0.24);
  transform: translateY(-1px) translateZ(0);
}

.wide-card:is(.is-selected, :active, :focus-within)::before,
.wide-card:is(.is-selected, :active, :focus-within)::after {
  opacity: 1;
}

.wide-card:is(.is-selected, :active, :focus-within) .cover-frame {
  box-shadow:
    0 0 0 1px rgba(190, 160, 255, 0.92),
    0 12px 24px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(151, 99, 255, 0.38) !important;
}

.wide-card:is(.is-selected, :active, :focus-within) .wide-title,
.wide-card:is(.is-selected, :active, :focus-within) .wide-stats,
.wide-card:is(.is-selected, :active, :focus-within) .wide-latest {
  filter: brightness(1.1);
}

.wide-heart,
.wide-latest {
  background: rgba(7, 9, 20, 0.1) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.wide-latest {
  border-color: color-mix(in srgb, var(--tone) 18%, rgba(205, 194, 245, 0.08)) !important;
}

.rail-track {
  background: rgba(220, 212, 250, 0.07) !important;
}

.rail-track span {
  background: linear-gradient(90deg, #8d78e7, #b5a3ff) !important;
  box-shadow: 0 0 9px rgba(156, 132, 244, 0.22);
  transition: width 160ms ease, box-shadow 260ms ease;
}

.rail-panel.is-glowing .rail-track span,
.rail-panel:has(.wide-card:active) .rail-track span,
.rail-panel:has(.wide-card:focus-within) .rail-track span {
  box-shadow: 0 0 13px rgba(167, 143, 255, 0.48);
}

@media (hover: hover) and (pointer: fine) {
  .wide-card:hover {
    border-color: color-mix(in srgb, var(--tone) 40%, rgba(218, 208, 255, 0.16)) !important;
    background: rgba(9, 10, 25, 0.13) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-panel,
  .rail-panel::before,
  .wide-card,
  .wide-card::before,
  .wide-card::after,
  .rail-track span {
    transition: none !important;
  }
}