/* site-theme.css — Landing page design system for inner pages.
   Loaded AFTER inline <style> blocks; these rules override comic styles.
   index.html does NOT load this file. */

:root {
  --brand: #0f2942;
  --ink: #0a1c30;
  --gold: #f4c025;
  --accent-blue: #1e40af;
  --focus: #7bb0ff;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --r-card: 1.5rem;
  --r-btn: 9999px;
  --shadow-card: 0 1px 2px rgba(10,28,48,.05), 0 18px 44px -18px rgba(10,28,48,.18);
  --shadow-card-hover: 0 2px 4px rgba(10,28,48,.06), 0 34px 64px -24px rgba(10,28,48,.30);
  --shadow-gold: 0 14px 32px -12px rgba(244,192,37,.50);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ── SCROLL PROGRESS ─────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 80;
  background: linear-gradient(90deg, var(--gold), #f8d56b);
  transform-origin: left; transform: scaleX(0); pointer-events: none;
}

/* ── HEADER — inner pages always frosted solid ───────── */
#siteHeader {
  position: fixed !important;
  background-color: rgba(10, 28, 48, 0.92) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease) !important;
}
#siteHeader .lang-switcher { border-radius: 9999px !important; }
#siteHeader .lang-btn       { border-radius: 9999px !important; }

.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }

/* Auth button overrides — i18n.js injects these */
#authNavActions a,
#authNavActions button {
  box-shadow: none !important; border-radius: 9999px !important;
  padding: 0.625rem 1.25rem !important; letter-spacing: 0.05em !important;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), filter 0.2s var(--ease-out) !important;
}
#authNavActions a[class*="bg-white"],
#authNavActions button[class*="bg-white"] {
  background: rgba(255,255,255,0.10) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
#authNavActions a[class*="bg-brand-gold"] {
  background: linear-gradient(180deg, #f8cd49, #efb918) !important;
  color: var(--brand) !important;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.45) !important;
}
@media (hover: hover) and (pointer: fine) {
  #authNavActions a:hover,
  #authNavActions button:hover { transform: translateY(-1px) !important; }
}
#authNavActions a:active,
#authNavActions button:active { transform: scale(0.98) !important; }

#mobileMenu #authNavMobile a,
#mobileMenu #authNavMobile button { border-radius: 9999px !important; box-shadow: none !important; }
#mobileMenu #authNavMobile a[class*="bg-white"],
#mobileMenu #authNavMobile button[class*="bg-white"] {
  background: rgba(255,255,255,0.10) !important; border: 1px solid rgba(255,255,255,0.25) !important; color: #fff !important;
}
#mobileMenu #authNavMobile a[class*="bg-brand-gold"] {
  background: linear-gradient(180deg, #f8cd49, #efb918) !important; color: var(--brand) !important;
}
#mobileMenu a[class*="shadow-["] { border-radius: 9999px !important; box-shadow: none !important; }

/* ── BUTTON SYSTEM ───────────────────────────────────── */
.btn {
  border-radius: var(--r-btn);
  font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  transition: transform 0.2s var(--ease-out), filter 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
}
.btn:active { transform: scale(0.98); filter: brightness(0.97); }

.btn-gold {
  background: linear-gradient(180deg, #f8cd49, #efb918);
  color: var(--brand);
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn-navy {
  background: linear-gradient(180deg, #17354f, var(--brand));
  color: #fff;
  box-shadow: 0 16px 32px -14px rgba(10,28,48,.55), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-ghost {
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.25); color: #fff;
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 3px;
}

/* Override comic button → premium gold pill */
.btn-comic {
  border-radius: var(--r-btn) !important; border: none !important;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.45) !important;
  background: linear-gradient(180deg, #f8cd49, #efb918) !important;
  color: var(--brand) !important;
  font-weight: 700 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important;
  transform: none !important;
  transition: transform 0.2s var(--ease-out), filter 0.2s var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn-comic:hover {
    transform: translateY(-1px) !important; filter: brightness(1.06) !important;
    box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.45) !important;
  }
}
.btn-comic:active { transform: scale(0.98) !important; }

/* ── CARDS — comic-panel → premium panel ─────────────── */
.comic-panel {
  border: 1px solid rgba(10,28,48,.09) !important;
  border-radius: var(--r-card) !important;
  box-shadow: 0 2px 4px rgba(10,28,48,.06), 0 20px 48px -16px rgba(10,28,48,.22) !important;
  background: #ffffff !important;
  transform: none !important;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .comic-panel:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-card-hover) !important;
  }
}
.comic-panel img { border-radius: calc(var(--r-card) - 0.5rem); }
.card-press { cursor: pointer; }

/* Date badge inside cards */
.comic-panel .bg-brand-navy { border-radius: 0.75rem !important; border: none !important; box-shadow: none !important; }
/* Border-left accent: thin gold */
.comic-panel [class*="border-l-"] { border-left-width: 3px !important; border-left-color: var(--gold) !important; }
/* Image border-bottom in auction cards */
.comic-panel [class*="border-b-"] { border-bottom-width: 1px !important; border-bottom-color: rgba(10,28,48,.10) !important; }

/* Dark comic-panel stays dark */
.comic-panel.bg-brand-navy,
.comic-panel.bg-brand-ink {
  background: linear-gradient(160deg, #14334f, var(--ink)) !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.comic-panel.bg-brand-navy *,
.comic-panel.bg-brand-ink * { color: inherit; }

/* ── FILTER BUTTONS ──────────────────────────────────── */
.filter-btn {
  border-radius: var(--r-btn) !important; border: 1px solid rgba(10,28,48,.15) !important;
  box-shadow: none !important; background: #fff !important; color: var(--brand) !important;
  font-weight: 700 !important; transform: none !important;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .filter-btn:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 16px -4px rgba(10,28,48,.15) !important; }
}
.filter-btn.active {
  background: linear-gradient(180deg, #f8cd49, #efb918) !important;
  border-color: transparent !important; box-shadow: var(--shadow-gold) !important; color: var(--brand) !important;
}

/* ── PROGRESS BAR ────────────────────────────────────── */
.progress-bar-container {
  height: 12px !important; background: rgba(10,28,48,.10) !important;
  border: none !important; border-radius: 9999px !important; overflow: hidden; position: relative;
}
.progress-bar-fill {
  height: 100% !important; background: linear-gradient(90deg, #e8b414, #f8d56b) !important;
  border-radius: 9999px !important; transition: width 1.2s var(--ease) !important;
  position: relative; overflow: hidden;
}
.progress-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  animation: shimmer 2.8s var(--ease-in-out) infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── PAGE HERO ───────────────────────────────────────── */
.page-hero {
  position: relative;
  padding: clamp(7rem, 10vw, 11rem) 0 clamp(4rem, 6vw, 6rem);
  background: var(--ink); overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 80% at 10% 50%, rgba(30,64,175,.18), transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 80%, rgba(244,192,37,.08), transparent 50%);
}
.page-hero__inner { position: relative; z-index: 1; }

.page-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.15rem;
  color: var(--gold); font-size: 0.78rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase;
}
.page-eyebrow::before {
  content: ''; width: 2rem; height: 0.25rem; border-radius: 9999px; background: var(--gold);
}

.page-hero-title,
.hero-title {
  text-shadow: none !important; -webkit-text-stroke: 0 !important; font-style: normal !important;
  font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 0.95 !important;
  text-transform: uppercase !important; color: #fff !important; max-width: 58rem; margin-bottom: 1.1rem;
}

.page-hero-copy {
  max-width: 44rem; color: rgba(255,255,255,.78);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-weight: 500; line-height: 1.55;
}

/* Kill band-angle clip-path remnants */
.band-angle, .band-angle.alt { clip-path: none !important; margin-top: 0 !important; }

/* ── PAGE CONTENT ────────────────────────────────────── */
.page-content {
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(5rem, 8vw, 8rem);
  background: #f0f1f2 !important;
}

/* ── SKELETON ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(10,28,48,.06) 25%, rgba(10,28,48,.10) 50%, rgba(10,28,48,.06) 75%) !important;
  background-size: 200% 100% !important;
  animation: skeleton-loading 1.5s linear infinite;
  border-radius: var(--r-card) !important;
  border: none !important; box-shadow: none !important;
}
@keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── SCROLL REVEAL ───────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--d, 0s); will-change: transform, opacity;
}
.reveal.in { opacity: 1; transform: none; }

.ink-underline { position: relative; display: inline-block; padding-bottom: 0.5rem; }
.ink-underline::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  border-radius: 3px; background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease) 0.15s;
}
.reveal.in .ink-underline::after { transform: scaleX(1); }

/* ── FOOTER ──────────────────────────────────────────── */
footer {
  background-color: #081322 !important;
  background-image: none !important;
}
.footer-link {
  color: rgba(255,255,255,.65);
  transition: color 0.2s var(--ease-out), padding-left 0.2s var(--ease-out);
}
.footer-link:hover { color: var(--gold); padding-left: 6px; }

/* ── TO-TOP BUTTON ───────────────────────────────────── */
.to-top {
  position: fixed; bottom: 30px; right: 30px; width: 52px; height: 52px;
  background: rgba(10,28,48,.72) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff !important; border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 16px 32px -12px rgba(4,12,22,.5) !important;
  border-radius: 9999px !important; font-weight: 700; display: flex;
  align-items: center; justify-content: center; cursor: pointer; z-index: 100;
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease),
    background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.to-top.show    { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover   { background: var(--gold) !important; color: var(--brand) !important; border-color: transparent !important; }

/* ── MISC ─────────────────────────────────────────────── */
main { padding-top: 0; padding-bottom: 0; }

/* Article image zoom */
.img-zoom { overflow: hidden; border-radius: var(--r-card); }
.img-zoom img { transition: transform 0.55s var(--ease-out); will-change: transform; }
@media (hover: hover) and (pointer: fine) { .img-zoom:hover img { transform: scale(1.04); } }

/* Article pages: bg-white cards stay white (already handled by base rule above) */

/* ── REDUCED MOTION ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .btn-comic, .comic-panel, .filter-btn, .to-top, .nav-link::after {
    transition: none !important;
  }
  .progress-bar-fill::after { animation: none !important; }
  .skeleton { animation: none !important; }
  .ink-underline::after { transition: none !important; transform: scaleX(1) !important; }
}