/* Rothic series page — tabs, the cover showcase and the per-series effects. Loads after site.css. */

@keyframes coverCross { 0%, 35% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes coverCross3a { 0%, 22% { opacity: 0; } 33%, 55% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes coverCross3b { 0%, 55% { opacity: 0; } 66%, 89% { opacity: 1; } 100% { opacity: 0; } }
@keyframes traceDraw { 0% { stroke-dashoffset: 1200; opacity: 0; } 8% { opacity: 0.85; } 70% { stroke-dashoffset: 0; opacity: 0.85; } 90% { opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes nodeGlow { 0%, 100% { opacity: 0.15; r: 1.4; } 50% { opacity: 0.9; r: 2.4; } }
@keyframes glyphFade { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } 5% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); } 14% { opacity: 0.9; } 20% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes moteRise { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 20% { opacity: 0.85; } 60% { opacity: 0.6; } 100% { transform: translate(var(--mx), -120px) scale(1.1); opacity: 0; } }
@keyframes smokePulse { 0% { transform: translate3d(-30%, 0, 0) scaleX(0.8); opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.8; } 100% { transform: translate3d(130%, 0, 0) scaleX(1.2); opacity: 0; } }
@keyframes orbFloat { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(var(--dx), calc(var(--dy) * -1)) scale(1.08); } 66% { transform: translate(calc(var(--dx) * -0.6), var(--dy)) scale(0.94); } 100% { transform: translate(0, 0) scale(1); } }
@keyframes orbPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes starSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes petalFall { 0% { transform: translate(0, -10vh) rotate(var(--r0)) rotateY(0deg); opacity: 0; } 5% { opacity: 1; } 30% { transform: translate(40px, 28vh) rotate(calc(var(--r0) + 120deg)) rotateY(180deg); } 60% { transform: translate(-30px, 60vh) rotate(calc(var(--r0) + 240deg)) rotateY(360deg); } 95% { opacity: 0.9; } 100% { transform: translate(25px, 110vh) rotate(calc(var(--r0) + 380deg)) rotateY(540deg); opacity: 0; } }
@keyframes bloomGlow { 0%, 100% { filter: drop-shadow(0 0 2px rgba(255, 200, 215, 0.5)); transform: scale(1); } 50% { filter: drop-shadow(0 0 10px rgba(255, 170, 200, 0.95)); transform: scale(1.08); } }
@keyframes topDrift { 0% { transform: translate(-30%, 0) scale(1); opacity: 0.5; } 50% { transform: translate(10%, 12%) scale(1.2); opacity: 0.95; } 100% { transform: translate(40%, -4%) scale(1.05); opacity: 0.5; } }
@keyframes featherFall { 0% { transform: translate(0, -15vh) rotate(var(--r0)); opacity: 0; } 6% { opacity: 1; } 25% { transform: translate(60px, 25vh) rotate(calc(var(--r0) + 35deg)); } 50% { transform: translate(-40px, 52vh) rotate(calc(var(--r0) - 25deg)); } 75% { transform: translate(50px, 80vh) rotate(calc(var(--r0) + 30deg)); } 94% { opacity: 0.9; } 100% { transform: translate(-20px, 110vh) rotate(calc(var(--r0) - 10deg)); opacity: 0; } }
@keyframes puffDrift { 0% { transform: translate(-20%, 20%) scale(0.9); opacity: 0.35; } 50% { transform: translate(10%, -15%) scale(1.15); opacity: 0.85; } 100% { transform: translate(35%, 10%) scale(0.95); opacity: 0.35; } }
@keyframes wispRise { 0% { transform: translate(0, 30%) scale(0.8) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 40% { transform: translate(calc(var(--drift) * -0.6), -20%) scale(1.15) rotate(-10deg); opacity: 0.9; } 70% { transform: translate(calc(var(--drift) * 0.7), -50%) scale(1.3) rotate(6deg); opacity: 0.4; } 100% { transform: translate(var(--drift), -75%) scale(1.5) rotate(18deg); opacity: 0; } }
@keyframes bankRoll { 0% { transform: translateX(-6%) scaleY(0.9); opacity: 0.55; } 50% { transform: translateX(6%) scaleY(1.25); opacity: 1; } 100% { transform: translateX(-6%) scaleY(0.9); opacity: 0.55; } }

/* Series tabs under the header */
.tabs-bar { position: relative; overflow: hidden; }
.tabs-bar .wrap {
  position: relative;
  padding: 0.875rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.tabs { display: flex; gap: 1.5rem; margin-left: auto; flex-wrap: wrap; }
.tab {
  position: relative;
  height: 2rem;
  padding: 0 0.25rem;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  transition: color 300ms ease, text-shadow 300ms ease;
}
.tab[aria-selected="true"] { color: var(--gold-text); }
.tab:hover { background: transparent; border: none; color: var(--gold-bright); text-shadow: var(--glow); }

/* Cover and details */
.series-hero {
  padding: 3.5rem 2rem 4rem;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
  gap: 4rem;
  align-items: start;
}
.cover-frame {
  position: relative;
  aspect-ratio: 331 / 505;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 8px 16px rgba(59, 36, 41, 0.08);
  animation: hover 6s ease-in-out infinite;
  will-change: transform;
}
.cover-frame img.cover {
  position: absolute;
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  object-fit: cover;
}
.cover-frame img.alt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
}
.cover-frame .smoke { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.series-info { display: flex; flex-direction: column; gap: 1.5rem; }
.series-info .head { display: flex; flex-direction: column; gap: 0.75rem; }
.series-title {
  font-family: "Cinzel", serif;
  font-size: 2.5rem;
  line-height: 1.1;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}
.series-title .first { position: relative; display: inline-block; }
.series-title .title-fx { position: absolute; inset: 0; pointer-events: none; }
.tagline { font-size: 1rem; line-height: 1.5; font-style: italic; color: var(--gold-text); margin: 0; white-space: nowrap; }
.synopsis { font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 58ch; }
.facts {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.fact { display: flex; flex-direction: column; gap: 0.25rem; }
.fact span { font-family: "Cinzel", serif; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.fact strong { font-family: "Cinzel", serif; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }

/* Collected editions */
.trades {
  padding: 4rem 2rem 0;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr);
  gap: 3.5rem;
  align-items: start;
}
.trades h2 { font-family: "Cinzel", serif; font-size: 1.5rem; font-weight: 800; margin: 0.75rem 0; color: var(--ink); }
.trades p { font-size: 1rem; line-height: 1.65; color: var(--muted); margin: 0; }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.25rem; }
.trade {
  display: flex;
  gap: 1rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  padding: 1rem;
  transition: var(--transition-base);
}
.trade:hover { border-color: var(--gold); }
.trade .frame {
  position: relative;
  width: 6rem;
  flex-shrink: 0;
  aspect-ratio: 2 / 3;
  border-radius: 0.25rem;
  overflow: hidden;
  background: var(--bg);
  animation: hover 7s ease-in-out -2s infinite;
  will-change: transform;
}
.trade .frame img { width: 100%; height: 100%; object-fit: cover; }
.trade .text { display: flex; flex-direction: column; gap: 0.375rem; min-width: 0; }
.trade .text strong { font-family: "Cinzel", serif; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.trade .text span { font-size: 0.9375rem; color: var(--muted); line-height: 1.5; }

/* Preview pages */
.previews { padding: 4rem 2rem 0; }
.previews > div { border-top: 1px solid var(--line); padding-top: 2.5rem; }
.previews .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; }
.preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; }
.preview {
  position: relative;
  aspect-ratio: 2 / 3;
  border: 1px solid var(--line);
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--bg-soft);
  animation: hover var(--dur, 7s) ease-in-out var(--delay, 0s) infinite;
  will-change: transform;
}
.preview img { width: 100%; height: 100%; object-fit: cover; }

/* Page-wide effects (feathers, petals, orbs, glyphs) sit above the content */
.page-fx { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.bar-smoke { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

@media (max-width: 900px) {
  .series-hero, .trades, .previews { padding-left: 1.25rem; padding-right: 1.25rem; }
  .series-hero { padding-top: 2.5rem; padding-bottom: 3rem; gap: 2rem; }
  .trades, .previews { padding-top: 3rem; }
  .tabs-bar .wrap { padding: 0.75rem 1.25rem; }
  /* Keep every series title visible by wrapping whole tabs onto more rows. */
  .tabs { width: 100%; margin-left: 0; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
  .tab { flex: 0 0 auto; white-space: nowrap; }
  .cover-frame { max-width: 22rem; }
  .preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .series-title { font-size: 2rem; }
  .tagline { white-space: normal; }
  .facts { gap: 1.25rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cover-frame, .trade .frame, .preview, .page-fx *, .cover-frame .smoke *, .bar-smoke * { animation: none !important; }
}