/* wr_cards.css — WyrmRail on Synth's shelves (M10.6): the story card's corner
   pieces and wordmark, covers on every card, the WyrmRail filters, and the
   portal through to the WyrmRail Stories page. */

/* ── covers, for every story ── */
.story-card { position: relative; overflow: hidden; }
.story-card .sc-cover { margin: -1.5rem -1.5rem 1rem; aspect-ratio: 16 / 7; background: #0c1230 center / cover no-repeat;
  border-bottom: 1px solid var(--border, #2a2f45); }
@media (max-width: 800px) { .story-card .sc-cover { margin: -1.1rem -1.1rem .8rem; } }

/* ── a WyrmRail card: two corner pieces and the wordmark ── */
.story-card.wr { border-color: rgba(34, 211, 238, .28); }
.story-card.wr:hover { border-color: rgba(34, 211, 238, .6); }
.story-card .wr-cnr { position: absolute; width: 34px; height: 34px; pointer-events: none; z-index: 2; }
.story-card .wr-cnr.tl { top: 7px; left: 7px; border-top: 3px solid #22D3EE; border-left: 3px solid #22D3EE;
  border-top-left-radius: 8px; box-shadow: -2px -2px 12px -4px rgba(34, 211, 238, .7); }
.story-card .wr-cnr.br { bottom: 7px; right: 7px; border-bottom: 3px solid #FBBF24; border-right: 3px solid #FBBF24;
  border-bottom-right-radius: 8px; box-shadow: 2px 2px 12px -4px rgba(251, 191, 36, .7); }
.story-card .wr-cnr.tl::after, .story-card .wr-cnr.br::after { content: ''; position: absolute; width: 6px; height: 6px;
  border-radius: 50%; }
.story-card .wr-cnr.tl::after { top: 4px; left: 4px; background: #22D3EE; }
.story-card .wr-cnr.br::after { bottom: 4px; right: 4px; background: #FBBF24; }
.story-card .sc-wrfacts { font-size: .72rem; color: var(--text-muted, #9aa); margin: -.2rem 0 .6rem; line-height: 1.45; }
.story-card .sc-wrfacts b { color: #67E8F9; font-weight: 600; }
.story-card .sc-wrmark { font: 600 .62rem/1 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .16em; text-transform: uppercase;
  color: #22D3EE; margin: 0 0 .7rem; text-align: center; opacity: .9; }
.story-card .sc-wrmark span { color: #FBBF24; }

/* ── the WyrmRail filters ── */
.genre-pill.wr-pill { color: #67E8F9; border-color: rgba(34, 211, 238, .45); }
.genre-pill.wr-pill.active { background: rgba(34, 211, 238, .14); color: #22D3EE; border-color: #22D3EE; }
.wr-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: 0 0 1.4rem;
  padding: .7rem .9rem; border: 1px solid rgba(34, 211, 238, .3); border-radius: 10px; background: rgba(12, 18, 48, .55); }
.wr-filters label { display: flex; align-items: center; gap: .4rem; font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-dim, #8b949e); }
.wr-filters select { background: #11163a; color: #e8eaf6; border: 1px solid #2e3a6e; border-radius: 6px; padding: .3rem .5rem;
  font-size: .82rem; text-transform: none; letter-spacing: 0; max-width: 11rem; }
.wr-filters .wr-clear { font-size: .75rem; color: #FB7185; }
.browse-pages { display: flex; justify-content: center; gap: .6rem; margin: 1.6rem 0 0; }

/* ── the portal ── */
.wr-portal-link { display: flex; align-items: center; gap: 1.2rem; margin: 0 0 1.4rem; padding: .9rem 1.2rem;
  border-radius: 14px; text-decoration: none; border: 1px solid rgba(34, 211, 238, .3);
  background: radial-gradient(400px 120px at 10% 50%, rgba(34, 211, 238, .12), transparent), rgba(12, 18, 48, .45);
  transition: border-color .25s, transform .25s; }
.wr-portal-link:hover { border-color: rgba(34, 211, 238, .75); transform: translateY(-2px); }
.wr-portal-link:hover .wr-portal .swirl { animation-duration: 3s; }
.wr-portal-text b { display: block; font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 1.25rem; color: #E0F7FF; }
.wr-portal-text small { font-size: .82rem; color: var(--text-muted, #9aa); }
.wr-portal { position: relative; flex: 0 0 90px; width: 90px; height: 90px; border-radius: 50%; }
.wr-portal.big { flex-basis: 200px; width: 200px; height: 200px; }
.wr-portal canvas { position: absolute; inset: -25%; width: 150%; height: 150%; pointer-events: none; }
.wr-portal .swirl { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #0b3a8c, #22D3EE, #1e40af, #67E8F9, #0b3a8c, #38bdf8, #1d4ed8, #22D3EE, #0b3a8c);
  animation: wr-spin 6s linear infinite; filter: blur(1px);
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 42% 64%, transparent 71%);
          mask: radial-gradient(circle, transparent 0 18%, #000 42% 64%, transparent 71%); }
.wr-portal .swirl.two { inset: 8%; animation: wr-spin 4.2s linear infinite reverse; opacity: .8;
  background: conic-gradient(from 90deg, transparent, #a5f3fc, transparent 30%, #3b82f6, transparent 60%, #e0f2fe, transparent); }
.wr-portal .core { position: absolute; inset: 26%; border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0, #bae6fd 18%, #22D3EE 38%, rgba(30, 64, 175, .6) 62%, transparent 72%);
  animation: wr-pulse 2.6s ease-in-out infinite; box-shadow: 0 0 30px 8px rgba(34, 211, 238, .45); }
/* THE COPPER PORTAL (M10.7): the same door, the other half of Synth.pub. */
.wr-portal.copper .swirl { background: conic-gradient(from 0deg, #5a2a0c, #F59E0B, #7c2d12, #FCD34D, #5a2a0c, #FB923C, #92400E, #F59E0B, #5a2a0c); }
.wr-portal.copper .swirl.two { background: conic-gradient(from 90deg, transparent, #FDE68A, transparent 30%, #EA580C, transparent 60%, #FFF7ED, transparent); }
.wr-portal.copper .core { background: radial-gradient(circle, #ffffff 0, #FEF3C7 18%, #F59E0B 38%, rgba(124, 45, 18, .6) 62%, transparent 72%);
  box-shadow: 0 0 30px 8px rgba(245, 158, 11, .45); }
@keyframes wr-spin { to { transform: rotate(360deg); } }
@keyframes wr-pulse { 0%, 100% { transform: scale(.92); opacity: .85; } 50% { transform: scale(1.05); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wr-portal .swirl, .wr-portal .core { animation: none; } }
@media (max-width: 640px) { .wr-portal { flex-basis: 64px; width: 64px; height: 64px; }
  .wr-portal.big { flex-basis: 130px; width: 130px; height: 130px; } .wr-portal-link { gap: .9rem; padding: .8rem; } }

/* ── the portal page ── */
.wr-portal-page { position: relative; min-height: 80vh;
  background: radial-gradient(900px 500px at 50% 0, rgba(34, 211, 238, .12), transparent 70%),
              radial-gradient(700px 400px at 90% 30%, rgba(99, 102, 241, .12), transparent 70%); }
.wr-portal-page .wr-drift { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .6; }
.wr-portal-page .browse-content { position: relative; }
.wr-hero { display: flex; align-items: center; gap: 2rem; margin: 0 0 1.8rem; }
.wr-kicker { font: 600 .68rem/1 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .22em; color: #FBBF24; }
.wr-hero-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: 2.3rem; color: #E0F7FF; margin: .4rem 0 .6rem;
  text-shadow: 0 0 24px rgba(34, 211, 238, .45); }
.wr-hero-sub { color: var(--text-muted, #9aa); line-height: 1.6; max-width: 38rem; }
.wr-hero-sub b { color: #67E8F9; font-weight: 600; }
.wr-hero-sub.small { font-size: .82rem; }
.wr-hero-sub a { color: #67E8F9; }
@media (max-width: 700px) { .wr-hero { flex-direction: column; text-align: center; gap: 1rem; } .wr-hero-title { font-size: 1.7rem; } }

/* ── a WyrmRail story's own page ── */
.story-cover { width: 100%; aspect-ratio: 16 / 6; border-radius: 12px; background: #0c1230 center / cover no-repeat;
  border: 1px solid var(--border, #2a2f45); margin: 0 0 1.2rem; }
.story-wrmark { display: inline-block; font: 600 .66rem/1 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .16em;
  text-transform: uppercase; color: #22D3EE; border: 1px solid rgba(34, 211, 238, .45); border-radius: 999px; padding: .35rem .7rem; }
.story-wrmark span { color: #FBBF24; }

/* ── phones: nothing on the shelf may push the page wider than the screen ── */
.browse-content { min-width: 0; width: 100%; box-sizing: border-box; }
.browse-content > * { min-width: 0; max-width: 100%; }
.genre-filter { max-width: 100%; }
.story-grid { min-width: 0; }
.story-grid > .story-card { min-width: 0; }
.arc-heading { font: 600 .7rem/1 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .18em; text-transform: uppercase;
  color: #22D3EE; margin: 1.4rem 0 .5rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(34, 211, 238, .3); }

/* THE WARP (M10.7): stepping through a portal fills the screen with it */
/* THE WIPE (Deploy 28): a dark panel in from the right, soft-edged, never
   bright. The second half lives in templates/_wr_wipe_in.html. */
.wr-wipe { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background: linear-gradient(90deg, var(--wr-wipe-edge) 0, #070a14 26px, #070a14 100%);
  transform: translateX(102%); transition: transform .75s cubic-bezier(.45,0,.25,1); }
.wr-wipe.blue { --wr-wipe-edge: rgba(34,211,238,.35); }
.wr-wipe.copper { --wr-wipe-edge: rgba(245,158,11,.35); }
.wr-wipe.go { transform: translateX(0); }