/* Two-page local prototype only. No selectors affect the locked homepage. */
html[data-mag-system] {
  --preview-ease: cubic-bezier(.22,.61,.36,1);
}
html[data-mag-system] .iidrr-header-nav a[aria-current="page"] {
  color: var(--purple);
}
html[data-mag-system] .iidrr-header-nav a:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 5px;
}
html[data-mag-system] main a {
  -webkit-tap-highlight-color: rgba(120,60,246,.12);
}
html[data-mag-system] :is(.nav-current-list a,.issue-entry__link,.nav-lenses a,.enter-link,.nav-series-entry h2 a) {
  transition: color 180ms ease, transform 220ms var(--preview-ease);
}
html[data-mag-system] :is(.nav-current-list a,.enter-link,.nav-lenses a,.nav-series-entry h2 a) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
}
html[data-mag-system] main .nav-current-list a {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 6px 0;
}
html[data-mag-system] .nav-current-list .nav-meta { text-align: left; }
html[data-mag-system] .issue-entry__link { min-height: 44px; }
html[data-mag-system] :is(.issue-entry__title,.archive-copy h3,.archive-number,.nav-series-index) {
  transition: color 180ms ease, transform 220ms var(--preview-ease);
}
html[data-mag-system] .nav-series-entry:focus-within > .nav-series-index {
  color: var(--purple) !important;
}
html[data-mag-system] main a:active { color: var(--purple); }
html[data-mag-system] :is(.archive-row,.nav-current-list a,.issue-entry__link,.enter-link,.nav-lenses a,.nav-series-entry h2 a):focus-visible {
  color: var(--purple);
  outline: 2px solid var(--purple);
  outline-offset: 6px;
}

/* Adaptations of the four existing issue signals, not a fifth visual system. */
html[data-mag-system="issues"] .current-issue {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(180px,260px);
  gap: 48px;
}
html[data-mag-system="issues"] .current-copy { min-width: 0; }
html[data-mag-system="issues"] .preview-whisper {
  position: relative;
  height: 170px;
  margin-top: 90px;
  overflow: hidden;
  pointer-events: none;
}
html[data-mag-system="issues"] .preview-field-line {
  position: absolute; left: 0; right: 3%; height: 1px;
  transform-origin: left center;
}
html[data-mag-system="issues"] .preview-field-a {
  top: 48%; background: rgba(120,60,246,.58);
  animation: magPreviewResolve 2.4s cubic-bezier(.65,0,.35,1) 1 both;
}
html[data-mag-system="issues"] .preview-field-b {
  top: 56%; left: 28%; right: 16%; background: rgba(22,22,20,.18);
}
html[data-mag-system="issues"] .preview-field-point {
  position: absolute; right: 3%; top: calc(48% - 2px);
  width: 4px; height: 4px; border-radius: 50%; background: var(--purple);
  animation: magPreviewPoint 2.4s cubic-bezier(.65,0,.35,1) 1 both;
}
@keyframes magPreviewResolve {
  0% { transform: scaleX(.08); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: scaleX(1); opacity: 1; }
}
@keyframes magPreviewPoint {
  0%,18% { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
html[data-mag-system="issues"] .archive-row {
  grid-template-columns: 100px minmax(0,1fr) 180px !important;
  gap: 10px 28px !important;
  align-items: center;
}
html[data-mag-system="issues"] .archive-row:hover { color: var(--ink); }
html[data-mag-system="issues"] .preview-signal {
  display: block; position: relative; height: 70px; min-width: 0;
  overflow: hidden; opacity: .42; pointer-events: none;
  transition: opacity 220ms ease, transform 220ms var(--preview-ease);
}
html[data-mag-system="issues"] :is(.orbit,.serenity-ring,.glitch) { position: absolute; display: block; }
html[data-mag-system="issues"] .orbit-a {
  left: 8%; right: 9%; top: 19px; height: 40px;
  border-top: 1px dashed rgba(120,60,246,.72); border-radius: 50%; transform: rotate(-10deg);
}
html[data-mag-system="issues"] .orbit-b {
  left: 25%; right: 22%; top: 29px; height: 27px;
  border-top: 1px dashed rgba(22,22,20,.24); border-radius: 50%; transform: rotate(8deg);
}
html[data-mag-system="issues"] .orbit-dot {
  position: absolute; right: 10%; top: 22px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--purple);
}
html[data-mag-system="issues"] .serenity-ring {
  border: 1px dotted rgba(120,60,246,.62); border-radius: 50%; transform: rotate(-8deg);
  transition: transform 220ms var(--preview-ease);
}
html[data-mag-system="issues"] .ring-a { inset: 12px 6%; }
html[data-mag-system="issues"] .ring-b { inset: 22px 20%; }
html[data-mag-system="issues"] .ring-c { inset: 30px 34%; border-color: rgba(22,22,20,.25); }
html[data-mag-system="issues"] .glitch {
  left: 7%; height: 6px; background: rgba(120,60,246,.54);
  transition: transform 220ms var(--preview-ease);
}
html[data-mag-system="issues"] .glitch-a { top: 16px; width: 62%; }
html[data-mag-system="issues"] .glitch-b { top: 31px; left: 24%; width: 67%; background: rgba(22,22,20,.20); }
html[data-mag-system="issues"] .glitch-c { top: 47px; left: 12%; width: 78%; background: rgba(120,60,246,.34); }
html[data-mag-system="issues"] .archive-row:focus-visible :is(h3,.archive-number) { color: var(--purple); }
html[data-mag-system="issues"] .archive-row:focus-visible .preview-signal { opacity: .72; }

@media (hover:hover) and (pointer:fine) {
  html[data-mag-system] :is(.nav-current-list a,.issue-entry__link,.enter-link,.nav-lenses a,.nav-series-entry h2 a):hover {
    transform: translateX(3px);
  }
  html[data-mag-system] .nav-series-entry:has(a:hover) > .nav-series-index { color: var(--purple) !important; }
  html[data-mag-system="issues"] .archive-row:hover :is(h3,.archive-number) { color: var(--purple); }
  html[data-mag-system="issues"] .archive-row:hover h3 { transform: translateX(3px); }
  html[data-mag-system="issues"] .archive-row:hover .preview-signal { opacity: .72; }
  html[data-mag-system="issues"] .archive-row:hover .preview-playtime { transform: translateX(3px); }
  html[data-mag-system="issues"] .archive-row:hover .serenity-ring { transform: rotate(-8deg) scale(1.025); }
  html[data-mag-system="issues"] .archive-row:hover .glitch-a { transform: translateX(3px); }
  html[data-mag-system="issues"] .archive-row:hover .glitch-b { transform: translateX(-2px); }
  html[data-mag-system="issues"] .archive-row:hover .glitch-c { transform: translateX(2px); }
}
@media (max-width:800px) {
  html[data-mag-system="issues"] .current-issue { grid-template-columns: minmax(0,1fr); gap: 14px; }
  html[data-mag-system="issues"] .preview-whisper { height: 56px; margin-top: 0; width: min(100%,230px); }
  html[data-mag-system="issues"] .archive-row { grid-template-columns: 72px minmax(0,1fr) !important; gap: 8px 18px !important; }
  html[data-mag-system="issues"] .preview-signal { grid-column: 2; width: min(100%,190px); height: 60px; }
}
@media (prefers-reduced-motion:reduce) {
  html[data-mag-system] *, html[data-mag-system] *::after { animation: none !important; transition: none !important; }
  html[data-mag-system] :is(.nav-current-list a,.issue-entry__link,.enter-link,.nav-lenses a,.nav-series-entry h2 a):hover,
  html[data-mag-system="issues"] .archive-row:hover :is(h3,.preview-playtime,.glitch) { transform: none; }
  html[data-mag-system="issues"] .archive-row:hover .serenity-ring { transform: rotate(-8deg); }
}
