/* ================================
   KEVIN PAGE — WEEKEND UPDATE
   Graphic. Bold. Poster-like.
   ================================ */

/* Subtle scan lines for TV effect */
.kevin-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.02;
  z-index: 1000;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.3) 2px,
    rgba(0, 0, 0, 0.3) 4px
  );
}

.kevin-page {
  /* Weekend Update palette */
  --kevin-bg: #1a1c2e;
  --kevin-surface: #252840;
  --kevin-text: #f0f0f5;
  --kevin-text-soft: #9a9ab5;
  --kevin-accent: #5b8def;
  --kevin-accent-hover: #7aa3f5;
  --kevin-gold: #d4a855;
  --kevin-gold-bright: #f0c866;
  --kevin-highlight: #ff6b6b;
  
  color-scheme: dark;
  background: linear-gradient(180deg, #0d0f1a 0%, var(--kevin-bg) 30%, #12141f 100%);
  min-height: 100vh;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.kevin-container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- TOP NAV ---------- */

.kevin-nav {
  text-align: right;
  margin-bottom: var(--spacing-lg);
}

.kevin-nav a {
  font-size: 0.9rem;
  color: var(--kevin-text-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}

.kevin-nav a:hover {
  color: var(--kevin-gold);
}

/* ---------- HERO UNIT ---------- */

.kevin-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

/* Stefon image with gold outline */
.kevin-hero-image {
  flex-shrink: 0;
  position: relative;
}

.kevin-hero-image img {
  width: 280px;
  height: auto;
  display: block;
  /* Outline is baked into the PNG */
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5));
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
  animation: stefon-pulse 3s ease-in-out infinite;
}

@keyframes stefon-pulse {
  0%, 100% { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5)); }
  50% { filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 15px rgba(212, 168, 85, 0.3)); }
}

.kevin-hero-image:hover img {
  transform: scale(1.03);
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(212, 168, 85, 0.3));
  animation: none;
}

/* Hero text */
.kevin-hero-text {
  text-align: left;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.kevin-hero-text:hover {
  transform: scale(1.02);
}

.kevin-hero-text:hover .kevin-hero-intro {
  color: var(--kevin-text);
}

.kevin-hero-text:hover .kevin-hero-name {
  text-shadow: 
    0 0 60px rgba(212, 168, 85, 0.8),
    0 0 100px rgba(212, 168, 85, 0.4),
    0 4px 0 rgba(0, 0, 0, 0.4);
}

.kevin-hero-intro {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kevin-text-soft);
  margin-bottom: var(--spacing-xs);
  line-height: 1.3;
  transition: color 0.2s ease;
}

.kevin-hero-name {
  font-family: var(--font-heading);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--kevin-gold);
  text-shadow: 
    0 0 40px rgba(212, 168, 85, 0.5),
    0 4px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-1deg);
  transition: text-shadow 0.2s ease;
  animation: kevin-pulse 3s ease-in-out infinite;
}

@keyframes kevin-pulse {
  0%, 100% { 
    text-shadow: 
      0 0 40px rgba(212, 168, 85, 0.5),
      0 4px 0 rgba(0, 0, 0, 0.4);
  }
  50% { 
    text-shadow: 
      0 0 60px rgba(212, 168, 85, 0.7),
      0 0 80px rgba(212, 168, 85, 0.3),
      0 4px 0 rgba(0, 0, 0, 0.4);
  }
}

.kevin-hero-text:hover .kevin-hero-name {
  animation: none;
}

/* Audio hint for hero text */
.kevin-hero-text::after {
  display: none;
}

/* ---------- MONOLOGUE ---------- */

.kevin-monologue {
  max-width: 700px;
  margin: 0 auto var(--spacing-2xl);
}

.kevin-origin {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-style: italic;
  line-height: 1.7;
  color: var(--kevin-text-soft);
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

@keyframes subtle-pulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 20px rgba(212, 168, 85, 0.6), 0 0 40px rgba(212, 168, 85, 0.3); }
}

/* "This guy has everything" */
.kevin-everything {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: var(--kevin-text);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  animation: subtle-pulse 3s ease-in-out infinite;
}

.kevin-everything:hover {
  color: var(--kevin-gold);
  text-shadow: 0 0 20px rgba(212, 168, 85, 0.6), 0 0 40px rgba(212, 168, 85, 0.3);
  animation: none;
}

/* The list */
.kevin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.kevin-list li {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--kevin-text);
  padding-left: 2rem;
  position: relative;
  cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.2s ease;
  animation: subtle-pulse 3s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.4s);
}

.kevin-list li:nth-child(1) { --i: 0; }
.kevin-list li:nth-child(2) { --i: 1; }
.kevin-list li:nth-child(3) { --i: 2; }
.kevin-list li:nth-child(4) { --i: 3; }
.kevin-list li:nth-child(5) { --i: 4; }

.kevin-list li:hover {
  color: var(--kevin-gold);
  text-shadow: 0 0 20px rgba(212, 168, 85, 0.6), 0 0 40px rgba(212, 168, 85, 0.3);
  transform: translateX(4px);
  animation: none;
}

.kevin-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--kevin-gold);
  font-weight: 700;
  transition: transform 0.2s ease;
}

.kevin-list li:hover::before {
  transform: translateX(2px);
}

/* Highlighted list item - inline emphasis */
.kevin-list li.kevin-highlight {
  color: var(--kevin-gold);
  font-weight: 700;
}

.kevin-list li.kevin-highlight::before {
  content: "\2192";
  color: var(--kevin-gold);
}

/* ---------- SETH INTERRUPTION ---------- */

.kevin-seth {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-md);
  margin: var(--spacing-2xl) auto;
  max-width: 500px;
  padding: var(--spacing-md);
  border-radius: 16px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Flash highlight when Human Jira boards is clicked */
.kevin-seth.seth-flash {
  background-color: rgba(91, 141, 239, 0.25);
  box-shadow: 0 0 40px rgba(91, 141, 239, 0.4), 0 0 80px rgba(91, 141, 239, 0.2);
}

.kevin-seth-image {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--kevin-accent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.kevin-seth-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kevin-speech-bubble {
  position: relative;
  background: var(--kevin-surface);
  border: 2px solid var(--kevin-accent);
  border-radius: 20px;
  padding: var(--spacing-md) var(--spacing-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  animation: bubble-pulse 3s ease-in-out infinite;
}

@keyframes bubble-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(91, 141, 239, 0.3); }
}

.kevin-speech-bubble:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 30px rgba(91, 141, 239, 0.4);
  border-color: var(--kevin-accent-hover);
  animation: none;
}

/* Speech bubble tail */
.kevin-speech-bubble::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 24px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid var(--kevin-accent);
  transition: border-color 0.2s ease;
}

.kevin-speech-bubble:hover::before {
  border-right-color: var(--kevin-accent-hover);
}

.kevin-speech-bubble::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid var(--kevin-surface);
}

.kevin-question {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--kevin-text);
  margin: 0;
}

/* ---------- THE ANSWER ---------- */

.kevin-answer {
  max-width: 650px;
  margin: 0 auto var(--spacing-xl);
  text-align: center;
  padding: var(--spacing-md);
  border-radius: 16px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Flash highlight when answer is playing */
.kevin-answer.answer-flash {
  background-color: rgba(212, 168, 85, 0.15);
  box-shadow: 0 0 40px rgba(212, 168, 85, 0.3), 0 0 80px rgba(212, 168, 85, 0.15);
}

.kevin-answer-text {
  font-size: clamp(1.1rem, 2.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--kevin-text);
  margin-bottom: var(--spacing-md);
}

.kevin-answer-text .highlight {
  color: var(--kevin-gold);
  font-weight: 600;
}

/* Meme */
.kevin-meme {
  max-width: 500px;
  margin: var(--spacing-lg) auto 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  border: 2px solid rgba(212, 168, 85, 0.4);
}

.kevin-meme img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- STEFON TRANSITION ---------- */

.kevin-transition {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  font-style: italic;
  color: var(--kevin-gold);
  text-align: center;
  margin: var(--spacing-2xl) 0;
  cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.kevin-transition:hover {
  color: var(--kevin-gold-bright);
  text-shadow: 0 0 20px rgba(212, 168, 85, 0.6), 0 0 40px rgba(212, 168, 85, 0.3);
}

/* ---------- AUDIO PLAYING STATE ---------- */

.audio-playing {
  animation: none !important;
  text-shadow: 0 0 30px rgba(212, 168, 85, 0.8), 0 0 60px rgba(212, 168, 85, 0.5) !important;
}

.kevin-speech-bubble.audio-playing {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3), 0 0 40px rgba(91, 141, 239, 0.5) !important;
}

.kevin-hero-image.audio-playing img {
  animation: none !important;
  filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(212, 168, 85, 0.5)) !important;
}

/* ---------- STEFON RAIN ---------- */

.stefon-rain {
  position: fixed;
  top: -100px;
  pointer-events: none;
  z-index: 9999;
  animation: fall linear forwards;
}

@keyframes fall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0;
  }
}

/* ---------- SERIOUS SECTION ---------- */

.kevin-serious {
  max-width: 550px;
  margin: var(--spacing-2xl) auto 0;
  background: var(--kevin-surface);
  border-radius: 16px;
  padding: var(--spacing-xl);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.kevin-serious-headline {
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kevin-text-soft);
  margin-bottom: var(--spacing-md);
}

.kevin-serious-headline.clickable {
  cursor: pointer;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.kevin-serious-headline.clickable:hover {
  color: var(--kevin-gold);
  text-shadow: 0 0 20px rgba(212, 168, 85, 0.6);
}

.kevin-serious-body {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--kevin-text);
  margin-bottom: var(--spacing-lg);
}

.kevin-btn {
  display: inline-block;
  background: var(--kevin-accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.kevin-btn:hover {
  background: var(--kevin-accent-hover);
  transform: translateY(-2px);
}

/* ---------- FOOTER ---------- */

.kevin-footer {
  margin-top: var(--spacing-2xl);
  text-align: center;
}

.kevin-footer p {
  font-size: 0.85rem;
  color: var(--kevin-text-soft);
}

.kevin-footer a {
  color: var(--kevin-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.kevin-footer a:hover {
  color: var(--kevin-accent-hover);
}

/* ---------- MOBILE ---------- */

@media (max-width: 768px) {
  .kevin-page {
    padding: var(--spacing-xl) var(--spacing-md);
  }

  .kevin-hero {
    gap: var(--spacing-md);
  }

  .kevin-hero-image img {
    width: 140px;
  }

  .kevin-hero-name {
    font-size: clamp(2.5rem, 12vw, 4rem);
  }

  .kevin-hero-intro {
    font-size: 0.85rem;
  }

  .kevin-seth {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .kevin-seth-image {
    width: 50px;
    height: 50px;
  }

  .kevin-speech-bubble {
    border-radius: 16px;
  }

  .kevin-speech-bubble::before {
    top: 16px;
  }

  .kevin-speech-bubble::after {
    top: 18px;
  }
}

@media (max-width: 480px) {
  .kevin-hero {
    gap: var(--spacing-sm);
  }

  .kevin-hero-image img {
    width: 100px;
  }

  .kevin-hero-name {
    font-size: 2rem;
  }

  .kevin-hero-intro {
    font-size: 0.75rem;
  }

  .kevin-origin {
    font-size: 1rem;
  }

  .kevin-everything {
    font-size: 1.25rem;
  }

  .kevin-list li {
    font-size: 1rem;
  }

  .kevin-seth-image {
    width: 40px;
    height: 40px;
  }

  .kevin-speech-bubble {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .kevin-question {
    font-size: 0.95rem;
  }

  .kevin-serious {
    padding: var(--spacing-lg);
  }
}