/* ============================================
   NUSMods Talk — Light editorial theme
   ============================================ */

html {
  scroll-behavior: smooth;
}

/* Hide scrollbar but keep functionality */
#slides {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#slides::-webkit-scrollbar {
  display: none;
}

#slides {
  position: relative;
}

#slides::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  z-index: 1;
}

/* ---- Code block styling (light theme) ---- */
.code-block {
  background: #f5f2ec;
  color: #3c3836;
  font-family: 'Geist Mono', ui-monospace, monospace;
}
.code-keyword { color: #af3a03; }
.code-type { color: #076678; }
.code-function { color: #427b58; }
.code-string { color: #79740e; }
.code-number { color: #8f3f71; }
.code-comment { color: #928374; }

/* ---- Slide entrance animations ---- */
.slide {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.slide.visible {
  opacity: 1;
}

/* Pre-animation state — anime.js drives all entrance animations.
   Initial opacity set via JS to avoid CSS fighting anime.js final state. */

/* Embedded iframes */
.embedded-demo {
  background: #fff;
}

/* Avatar chain */
.avatar-chain .avatar-link {
  text-align: center;
}

/* Stack evolution table */
.stack-table th,
.stack-table td {
  white-space: nowrap;
}

/* Table row stagger animation */
.slide.visible .table-row-anim {
  animation: fadeSlideUp 0.5s ease both;
}
.slide.visible .table-row-anim:nth-child(1) { animation-delay: 0.1s; }
.slide.visible .table-row-anim:nth-child(2) { animation-delay: 0.2s; }
.slide.visible .table-row-anim:nth-child(3) { animation-delay: 0.3s; }
.slide.visible .table-row-anim:nth-child(4) { animation-delay: 0.4s; }
.slide.visible .table-row-anim:nth-child(5) { animation-delay: 0.5s; }
.slide.visible .table-row-anim:nth-child(6) { animation-delay: 0.6s; }

/* Pre-animation state for table rows — set via CSS since driven by CSS animation */
.slide .table-row-anim {
  opacity: 0;
}

/* Strikethrough joke animation */
.strikethrough-joke {
  position: relative;
  display: inline-block;
}

.slide.visible .strikethrough-joke::after {
  content: '';
  position: absolute;
  left: -4px;
  right: -4px;
  top: 50%;
  height: 4px;
  background: #dd3119;
  border-radius: 2px;
  animation: strikeThrough 0.6s ease 0.8s both;
}

@keyframes strikeThrough {
  from {
    transform: scaleX(0);
    transform-origin: left;
  }
  to {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* Secret reveal appears after strikethrough */
.slide.visible .secret-reveal {
  animation: fadeSlideUp 0.5s ease 1.4s both;
}

/* Redux interactive diagram (SVG) */
#redux-demo svg rect {
  transition: stroke 0.3s ease, stroke-width 0.3s ease;
}
.redux-btn {
  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.redux-btn:active {
  transform: scale(0.93);
}

/* Pill tags bounce on hover */
.pill-tag {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pill-tag:hover {
  transform: scale(1.06);
}

/* Keyboard navigation indicator */
.nav-hint {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  color: rgba(0, 0, 0, 0.2);
  font-size: 0.875rem;
  pointer-events: none;
  transition: opacity 0.3s ease;
}