/* ============================================================
   Vampires vs. Werewolves — Tools Hub landing
   Scoped component styles for tools-hub.html.
   Card grid, category headers, and CSS-only animated preview
   thumbnails (loot chest shimmer, XP bar loop, event-timer ring).
   Every animation is wrapped in a prefers-reduced-motion opt-out.
   Token-driven — no shared-file edits required.
   ============================================================ */

.tools-hub {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-12) var(--space-4) var(--space-16);
}

/* ── Page intro ──────────────────────────────────────────── */
.tools-hub__intro {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-12);
}
.tools-hub__eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.tools-hub__title {
  font-size: var(--fluid-h1);
  line-height: 1.05;
  margin: 0 0 var(--space-4);
  background: var(--grad-gold);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tools-hub__lead {
  font-size: var(--fluid-lead);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Category section ────────────────────────────────────── */
.tools-cat {
  margin-top: var(--space-12);
}
.tools-cat__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.tools-cat__title {
  font-family: var(--font-gothic);
  font-size: var(--fluid-h3);
  letter-spacing: 0.05em;
  margin: 0;
  white-space: nowrap;
}
.tools-cat__title .tools-cat__glyph {
  color: var(--color-accent);
  margin-right: var(--space-2);
}
.tools-cat__rule {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border) 0%, transparent 100%);
}
.tools-cat__count {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  letter-spacing: 0.08em;
}

/* ── Card grid ───────────────────────────────────────────── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

/* ── Tool card ───────────────────────────────────────────── */
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--elev-1);
  transition:
    transform var(--dur-base) var(--ease-out-soft),
    border-color var(--dur-base) var(--ease-out-soft),
    box-shadow var(--dur-base) var(--ease-out-soft);
}
.tool-card:hover,
.tool-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--color-accent);
  box-shadow: var(--elev-3), var(--shadow-glow-accent);
  outline: none;
}
.tool-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* New / teaser flag */
.tool-card__flag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--grad-vampire);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: var(--elev-1);
}

/* ── Preview thumbnail (holds CSS animations) ────────────── */
.tool-preview {
  position: relative;
  height: 140px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 90% at 50% 120%, var(--color-accent-glow) 0%, transparent 60%),
    var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-preview::after {
  /* subtle dot texture */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.6;
  pointer-events: none;
}

/* ── Card body ───────────────────────────────────────────── */
.tool-card__body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}
.tool-card__name {
  font-family: var(--font-gothic);
  font-size: var(--text-lg);
  letter-spacing: 0.03em;
  margin: 0;
  color: var(--color-text);
}
.tool-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1 1 auto;
}
.tool-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.tool-card__cta .tool-card__arrow {
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.tool-card:hover .tool-card__arrow,
.tool-card:focus-visible .tool-card__arrow {
  transform: translateX(4px);
}

/* ============================================================
   CSS-ONLY ANIMATED PREVIEWS
   Each animation loops idly and intensifies on card hover.
   All keyframe animation is disabled under reduced-motion.
   ============================================================ */

/* ── 1. Shimmering loot chest ────────────────────────────── */
.pv-chest {
  position: relative;
  width: 78px;
  height: 64px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.pv-chest__base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 78px;
  height: 40px;
  border-radius: 6px 6px 8px 8px;
  background: linear-gradient(180deg, #6b4a2a 0%, #4a2f17 100%);
  border: 2px solid #2a1a0c;
}
.pv-chest__lid {
  position: absolute;
  top: 4px;
  left: 0;
  width: 78px;
  height: 26px;
  transform-origin: bottom center;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #7d5730 0%, #5a3c1f 100%);
  border: 2px solid #2a1a0c;
  animation: chest-lid 3.2s var(--ease-out-soft) infinite;
}
.pv-chest__lock {
  position: absolute;
  top: 26px;
  left: 50%;
  width: 14px;
  height: 16px;
  margin-left: -7px;
  border-radius: 3px;
  background: var(--grad-gold);
  border: 1px solid #7a5e20;
  z-index: 2;
}
/* light spill when the lid cracks open */
.pv-chest__glow {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 60px;
  height: 40px;
  margin-left: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
  opacity: 0;
  filter: blur(4px);
  animation: chest-glow 3.2s ease-in-out infinite;
}
/* travelling shimmer sweep across the chest */
.pv-chest__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,240,200,0.55) 50%, transparent 60%);
  mix-blend-mode: screen;
  animation: chest-shine 3.2s linear infinite;
}
@keyframes chest-lid {
  0%, 55%, 100% { transform: rotateX(0deg); }
  70%, 85%      { transform: rotateX(42deg); }
}
@keyframes chest-glow {
  0%, 55%, 100% { opacity: 0; }
  72%, 84%      { opacity: 0.9; }
}
@keyframes chest-shine {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}
/* floating gold sparkles */
.pv-chest__spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
  box-shadow: 0 0 6px var(--color-gold-glow);
  opacity: 0;
}
.pv-chest__spark--a { top: 24px; left: 14px; animation: chest-spark 3.2s ease-out infinite; }
.pv-chest__spark--b { top: 24px; left: 40px; animation: chest-spark 3.2s ease-out 0.15s infinite; }
.pv-chest__spark--c { top: 24px; left: 62px; animation: chest-spark 3.2s ease-out 0.3s infinite; }
@keyframes chest-spark {
  0%, 60%   { opacity: 0; transform: translateY(0) scale(0.5); }
  72%       { opacity: 1; }
  100%      { opacity: 0; transform: translateY(-34px) scale(1); }
}
.tool-card:hover .pv-chest__lid,
.tool-card:hover .pv-chest__glow,
.tool-card:hover .pv-chest__shine,
.tool-card:hover .pv-chest__spark {
  animation-duration: 1.9s;
}

/* ── 2. Rising XP bar loop ───────────────────────────────── */
.pv-xp {
  width: 78%;
  max-width: 190px;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.pv-xp__label {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
}
.pv-xp__lvl { color: var(--color-xp); }
.pv-xp__track {
  position: relative;
  height: 14px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.45);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.pv-xp__fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #9a7f2e 0%, var(--color-xp) 60%, #f0d888 100%);
  box-shadow: 0 0 12px var(--color-gold-glow);
  animation: xp-fill 3.4s var(--ease-out-soft) infinite;
}
/* animated sheen sweeping over the fill */
.pv-xp__fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  animation: xp-sheen 1.6s linear infinite;
}
@keyframes xp-fill {
  0%   { width: 8%; }
  70%  { width: 100%; }
  100% { width: 100%; }
}
@keyframes xp-sheen {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* pop of the level number when bar fills */
.pv-xp__lvl {
  display: inline-block;
  animation: xp-levelup 3.4s steps(1) infinite;
}
@keyframes xp-levelup {
  0%, 68%  { transform: scale(1); color: var(--color-xp); }
  72%      { transform: scale(1.4); color: #fff; }
  80%,100% { transform: scale(1); color: var(--color-xp); }
}
.tool-card:hover .pv-xp__fill,
.tool-card:hover .pv-xp__lvl { animation-duration: 2s; }

/* ── 3. Ticking event-timer ring ─────────────────────────── */
.pv-ring {
  position: relative;
  width: 96px;
  height: 96px;
}
.pv-ring__svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.pv-ring__track {
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 8;
}
.pv-ring__bar {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 264;             /* 2πr, r = 42 */
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px var(--color-accent-glow));
  animation: ring-countdown 6s linear infinite;
}
@keyframes ring-countdown {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 264; }
}
.pv-ring__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--color-text);
  line-height: 1;
}
.pv-ring__time {
  font-size: var(--text-lg);
  letter-spacing: 0.04em;
  animation: ring-blink 1s steps(2, jump-none) infinite;
}
.pv-ring__unit {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-top: 3px;
}
@keyframes ring-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.tool-card:hover .pv-ring__bar { animation-duration: 3.4s; }

/* ── 4. Coin / gold stacking preview ─────────────────────── */
.pv-coins {
  position: relative;
  width: 96px;
  height: 70px;
}
.pv-coins__coin {
  position: absolute;
  left: 50%;
  width: 40px;
  height: 12px;
  margin-left: -20px;
  border-radius: 50%;
  background: var(--grad-gold);
  border: 1px solid #7a5e20;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.pv-coins__coin--1 { bottom: 2px;  animation: coin-drop 3s ease-out infinite; }
.pv-coins__coin--2 { bottom: 12px; animation: coin-drop 3s ease-out 0.4s infinite; }
.pv-coins__coin--3 { bottom: 22px; animation: coin-drop 3s ease-out 0.8s infinite; }
.pv-coins__coin--4 { bottom: 32px; animation: coin-drop 3s ease-out 1.2s infinite; }
@keyframes coin-drop {
  0%       { opacity: 0; transform: translateY(-46px) scaleY(0.5); }
  30%, 90% { opacity: 1; transform: translateY(0) scaleY(1); }
  100%     { opacity: 1; transform: translateY(0) scaleY(1); }
}
.pv-coins__glint {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 90%, var(--color-gold-glow) 0%, transparent 60%);
  animation: ring-blink 3s ease-in-out infinite;
}
.tool-card:hover .pv-coins__coin { animation-duration: 1.8s; }

/* ── 5. Radar / matchup sweep preview ────────────────────── */
.pv-radar {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.05) 0 1px, transparent 1px 16px);
  overflow: hidden;
}
.pv-radar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform-origin: top left;
  background: conic-gradient(from 0deg, var(--color-accent-glow) 0deg, transparent 60deg);
  animation: radar-sweep 3s linear infinite;
}
.pv-radar__blip {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-danger);
  box-shadow: 0 0 6px var(--color-danger);
  top: 26px;
  left: 58px;
  opacity: 0;
  animation: radar-blip 3s linear infinite;
}
@keyframes radar-sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes radar-blip {
  0%, 20%  { opacity: 0; }
  25%      { opacity: 1; }
  60%,100% { opacity: 0; }
}
.tool-card:hover .pv-radar::before { animation-duration: 1.8s; }

/* ── Footer CTA banner ───────────────────────────────────── */
.tools-hub__foot {
  margin-top: var(--space-16);
  text-align: center;
  padding: var(--space-10) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--grad-hero);
}
.tools-hub__foot h2 {
  font-size: var(--fluid-h2);
  margin: 0 0 var(--space-3);
}
.tools-hub__foot p {
  color: var(--color-text-muted);
  max-width: 560px;
  margin: 0 auto var(--space-6);
}

/* ============================================================
   REDUCED-MOTION OPT-OUT
   Freeze every looping preview into a legible static state.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .tool-card { transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
  .tool-card:hover,
  .tool-card:focus-visible { transform: none; }

  .pv-chest__lid,
  .pv-chest__glow,
  .pv-chest__shine,
  .pv-chest__spark,
  .pv-xp__fill,
  .pv-xp__fill::after,
  .pv-xp__lvl,
  .pv-ring__bar,
  .pv-ring__time,
  .pv-coins__coin,
  .pv-coins__glint,
  .pv-radar::before,
  .pv-radar__blip,
  .tool-card__arrow {
    animation: none !important;
    transition: none !important;
  }

  /* Static resting states so previews still read as their tool */
  .pv-xp__fill      { width: 72%; }
  .pv-chest__lid    { transform: rotateX(0deg); }
  .pv-chest__spark  { opacity: 0; }
  .pv-ring__bar     { stroke-dashoffset: 92; }   /* ~65% remaining */
  .pv-coins__coin   { opacity: 1; transform: none; }
  .pv-radar__blip   { opacity: 1; }
}