/* =========================
   Tokens
========================== */
:root {
  --ink: #0b1220;
  --hero: #0f172a;
  --panel: #0f172a;
  --line: #0b1220;
  --accent: #22c55e;
  --accent-2: #16a34a;
}

/* =========================
   Base
========================== */
* { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
html { scroll-behavior: smooth; }
body { background: var(--ink); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { animation: none; }
}

/* =========================
   Utility
========================== */
.fade-in { animation: fadeIn .8s ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.nav-scrolled {
  background: rgba(30, 41, 59, .98) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* =========================
   Typography
========================== */
.comic-title { font-family: 'Bangers', cursive; letter-spacing: .5px; }

.ink-underline { position: relative; display: inline-block; padding-bottom: .25rem; }
.ink-underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border-radius: 6px;
}

/* =========================
   Hero
========================== */
#home {
  background-color: #0b1624;
  background-image: linear-gradient(
    to bottom,
    rgba(11, 22, 36, .45) 0%,
    rgba(11, 22, 36, .65) 75%,
    rgba(11, 22, 36, .85) 100%
  ), url('../img/wsu-building.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

#home::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  opacity: .45;
  background:
    repeating-linear-gradient(-24deg, rgba(16,185,129,.20) 0px, rgba(16,185,129,.20) 2px, transparent 2px, transparent 9px),
    radial-gradient(1000px 700px at 62% -12%, rgba(16,185,129,.30), transparent 60%),
    radial-gradient(1000px 700px at -10% 112%, rgba(4,120,87,.26), transparent 60%);
}

#home .vignette {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 -140px 220px -120px rgba(0,0,0,.45);
}

#home .hero-inner { position: relative; z-index: 2; }

/* =========================
   Buttons
========================== */
.btn-comic {
  background: linear-gradient(var(--accent), var(--accent-2));
  color: var(--line);
  font-weight: 800;
  border: 3px solid #0f3b25;
  border-radius: 14px;
  padding: .95rem 1.35rem;
  box-shadow: 0 10px 0 #052e1d;
  transition: transform .1s, box-shadow .1s;
}
.btn-comic:hover { transform: translateY(-2px); box-shadow: 0 12px 0 #052e1d; }

.btn-ghost {
  border: 3px solid #e5e7eb;
  color: #16a34a;
  background: #ffffff;
  border-radius: 14px;
  padding: .95rem 1.35rem;
  font-weight: 800;
  box-shadow: 0 10px 0 rgba(0,0,0,0.2);
  transition: transform .1s, box-shadow .1s;
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 12px 0 rgba(0,0,0,0.2); }

/* =========================
   Chips & Speech
========================== */
.chip {
  background: #052e1d;
  color: #a7f3d0;
  border: 2px solid #14532d;
  border-radius: 999px;
  padding: .2rem .6rem;
  font-weight: 700;
  font-size: .75rem;
}

.speech {
  background: #0c1828;
  color: #d1fae5;
  border: 3px solid #07263a;
  border-radius: 18px;
  position: relative;
  padding: .9rem 1.15rem;
  box-shadow: 0 10px 0 #00000025;
}
.speech::after {
  content: "";
  position: absolute; left: 38px; bottom: -16px;
  width: 22px; height: 22px;
  background: inherit; border-left: inherit; border-bottom: inherit;
  transform: skewX(-18deg) rotate(45deg);
}

.speech-lite {
  position: relative;
  background: #0c1828;
  color: #a7f3d0;
  border: 3px solid #073244;
  border-radius: 16px;
  padding: .7rem 1rem;
  display: inline-block;
}
.speech-lite::after {
  content: "";
  position: absolute; left: 34px; bottom: -14px;
  width: 18px; height: 18px;
  background: #0c1828;
  border-left: 3px solid #073244;
  border-bottom: 3px solid #073244;
  transform: skewX(-12deg) rotate(45deg);
  border-bottom-left-radius: 4px;
}

/* =========================
   Comic Panels
========================== */
.panel {
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 0 #00000030, 0 0 0 6px #00000010 inset;
}

.comic-panel {
  background: #0f172a;
  border: 4px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 0 #00000035, 0 0 0 6px #00000015 inset;
  position: relative;
}

.panel-halftone {
  background:
    radial-gradient(900px 600px at 20% -10%, rgba(34,197,94,.15), transparent 50%),
    radial-gradient(900px 600px at 120% 120%, rgba(15,118,110,.18), transparent 50%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.05) 0 2px, transparent 2px 6px);
}

.tape {
  position: absolute;
  height: 22px; width: 84px;
  background: #86efacdd;
  transform: rotate(-6deg);
  border-radius: 4px;
  box-shadow: 0 1px 0 #00000033 inset, 0 2px 0 #00000022;
}
.tape.tl { top: -12px; left: 28px; }
.tape.tr { top: -16px; right: 36px; transform: rotate(8deg); }

.notch { position: absolute; width: 22px; height: 22px; background: var(--line); transform: rotate(45deg); }
.notch.tl { top: -13px; left: -13px; }
.notch.tr { top: -13px; right: -13px; }
.notch.bl { bottom: -13px; left: -13px; }
.notch.br { bottom: -13px; right: -13px; }

.action-banner {
  display: inline-block;
  background: linear-gradient(var(--accent), var(--accent-2));
  color: #ffffff;
  text-shadow: 2px 2px 0 #0b1220;
  padding: .55rem 1.1rem;
  border: 3px solid #064e3b;
  border-radius: 14px;
  box-shadow: 0 8px 0 #052e1d;
}

.flyer-frame {
  border: 3px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--line);
  box-shadow: 0 10px 0 #00000030 inset;
}

.subtitle { color: #34d399; }

/* =========================
   Cards & Hover Effects
========================== */
.card-hover { transition: all .3s cubic-bezier(.68, -.55, .265, 1.55); }
.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 0 3px var(--accent), 0 0 40px rgba(16,185,129,.5), 0 25px 0 #00000050;
}

.glow-spot { position: relative; border-radius: inherit; isolation: isolate; }
.glow-spot::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(240px 160px at var(--mx, 50%) var(--my, 50%), rgba(16,185,129,.35), transparent 60%),
    radial-gradient(560px 320px at var(--mx, 50%) var(--my, 50%), rgba(16,185,129,.18), transparent 75%);
  opacity: 0;
  transition: opacity .18s ease;
}
.glow-spot:hover::before { opacity: 1; }
.glow-spot:hover {
  box-shadow: 0 0 0 3px rgba(16,185,129,.35), 0 18px 0 #00000055, 0 0 40px rgba(16,185,129,.45);
}

.tilt { transform-style: preserve-3d; transition: transform .12s ease, box-shadow .12s ease; will-change: transform; }
.tilt:hover { transform: translateY(-6px); }

.icon-glow { box-shadow: 0 0 0 3px rgba(16,185,129,.2), 0 0 25px rgba(16,185,129,.3); }

/* =========================
   Gallery
========================== */
#gallery .grid {
  gap: 18px;
  padding: 28px;
  border-radius: 22px;
  background:
    radial-gradient(900px 600px at 15% -10%, rgba(16,185,129,.12), transparent 55%),
    radial-gradient(900px 600px at 110% 120%, rgba(4,120,87,.12), transparent 55%),
    repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.05) 0 2px, transparent 2px 6px);
  background-color: #0f172a;
  box-shadow: 0 18px 0 #00000035, 0 0 0 6px #ffffff, 0 0 0 10px #0b1220;
  overflow: visible;
}

#gallery .grid > img {
  display: block; width: 100%; height: auto; object-fit: cover;
  background: #0b1220;
  border: 8px solid #ffffff;
  outline: 4px solid #0b1220;
  border-radius: 16px;
  box-shadow: 0 12px 0 #00000035;
  transform-origin: center center;
  transform: rotate(var(--rot, 0deg));
  transition: transform .15s ease, box-shadow .15s ease;
}
#gallery .grid > img:nth-child(8n+1) { --rot: -2.2deg; }
#gallery .grid > img:nth-child(8n+2) { --rot:  1.8deg; }
#gallery .grid > img:nth-child(8n+3) { --rot: -1.5deg; }
#gallery .grid > img:nth-child(8n+4) { --rot:  2.3deg; }
#gallery .grid > img:nth-child(8n+5) { --rot:   -2deg; }
#gallery .grid > img:nth-child(8n+6) { --rot:  1.2deg; }
#gallery .grid > img:nth-child(8n+7) { --rot: -1.2deg; }
#gallery .grid > img:nth-child(8n)   { --rot:    2deg; }
#gallery .grid > img:hover { transform: rotate(var(--rot, 0deg)) translateY(-4px); box-shadow: 0 16px 0 #00000040; }

/* =========================
   Nav active state
========================== */
nav a { position: relative; transition: color 0.3s ease; }
nav a.active { color: #10b981 !important; }
nav a.active::after {
  content: "";
  position: absolute; bottom: -8px; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #22c55e);
  border-radius: 3px;
}

/* =========================
   Team Graph
========================== */
#teamGraphWrap {
  background: #0f172a;
  border: 4px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 0 #00000035, 0 0 0 6px #00000015 inset;
}
#teamGraph { height: 520px; }
.vis-tooltip { background: #052e1d !important; color: #a7f3d0 !important; border: 2px solid #14532d !important; }

.graph-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 0; }
.graph-btn {
  background: #0e2a1a;
  border: 1px solid #14532d;
  color: #a7f3d0;
  border-radius: 8px;
  padding: 5px 13px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.graph-btn:hover { background: #14532d; color: #d1fae5; }
.graph-btn.active { background: #16a34a; color: #fff; border-color: #22c55e; }

.graph-legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
  padding: 14px 20px;
  border-top: 1px solid #0e2a1a;
}
.legend-item { display: flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 600; color: #94a3b8; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }