/* css styles */

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.quarto-light {
  background-color: #f2f3f5; /* light gray fallback */
  background-image: url('assets/bg-pattern.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* keep the reading area on a clean white panel so the background stays in the margins */
body.quarto-light #quarto-document-content {
  background-color: rgba(255, 255, 255, 0.88);
  border-radius: 8px;
  padding: 1.5rem 2rem;
}

body.quarto-dark {
  background-color: #05173f; /* dark mode fallback */
  background-image: url('assets/bg-pattern-dark.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: #e6e6e6;
}

/* keep the reading area on a clean dark panel so the background stays in the margins */
body.quarto-dark #quarto-document-content {
  background-color: rgba(10, 20, 45, 0.85);
  border-radius: 8px;
  padding: 1.5rem 2rem;
}

/* speech bubble popping out of the avatar */
.quarto-about-jolla {
  position: relative;
}

.quarto-about-jolla::after {
  content: "Welcome to my website";
  position: absolute;
  top: -0.5em;
  left: calc(50% + 3em);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.85rem;
  background: #ffffff;
  color: #1a1a1a;
  padding: 0.5em 0.9em;
  border-radius: 16px 16px 16px 2px;
  border: 1px solid #d8d8d8;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
  z-index: 5;
  animation: bubble-float 3s ease-in-out infinite;
}

@keyframes bubble-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@media (max-width: 480px) {
  .quarto-about-jolla::after {
    left: calc(50% + 2em);
    font-size: 0.75rem;
  }
}

/* subtitle typed out like a terminal prompt */
.quarto-about-jolla .subtitle {
  position: relative;
  left: 50%;
  transform: translateX(-22ch);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  animation: subtitle-typing 2.5s steps(44, end) forwards;
}

@keyframes subtitle-typing {
  from { width: 0; }
  to { width: 44ch; }
}

/* research areas, typed out thinner and smaller, right after the subtitle finishes */
.quarto-about-jolla .quarto-title::after {
  content: "European Politics, Environmental Politics, and Causal Inference";
  position: relative;
  left: 50%;
  transform: translateX(-31.5ch);
  display: block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  margin-top: 0.5em;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.8rem;
  font-weight: 300;
  opacity: 0.65;
  border-right: 1px solid currentColor;
  animation: research-typing 3.6s steps(63, end) 2.5s forwards,
             research-caret 0.75s step-end infinite 2.5s;
}

@keyframes research-typing {
  from { width: 0; }
  to { width: 63ch; }
}

@keyframes research-caret {
  50% { border-color: transparent; }
}

@media (max-width: 480px) {
  .quarto-about-jolla .quarto-title::after {
    font-size: 0.7rem;
  }
}

/* PhD stage progress timeline */
.phd-timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 34em;
  margin: 2em auto 1em;
  padding: 0 0.5em;
}

.phd-timeline::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0.5em;
  right: 0.5em;
  height: 2px;
  background: currentColor;
  opacity: 0.15;
}

.phd-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.7rem;
  text-align: center;
}

.phd-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid currentColor;
  opacity: 0.35;
  margin-bottom: 0.5em;
}

.phd-step.is-done .phd-dot {
  background: #27c93f;
  border-color: #27c93f;
  opacity: 1;
}

.phd-step.is-current .phd-dot {
  width: 18px;
  height: 18px;
  background: #ffbd2e;
  border-color: #ffbd2e;
  opacity: 1;
  box-shadow: 0 0 0 4px rgba(255, 189, 46, 0.25);
  animation: phd-pulse 2s ease-in-out infinite;
}

@keyframes phd-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255, 189, 46, 0.25); }
  50% { box-shadow: 0 0 0 7px rgba(255, 189, 46, 0.1); }
}

.phd-label {
  opacity: 0.55;
}

.phd-step.is-current .phd-label,
.phd-step.is-done .phd-label {
  opacity: 1;
  font-weight: 600;
}

.phd-sublabel {
  opacity: 0.6;
  font-size: 0.65rem;
  margin-top: 0.15em;
}

.phd-caption {
  max-width: 30em;
  margin: 0 auto 1.5em;
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.75;
}

@media (max-width: 480px) {
  .phd-timeline {
    font-size: 0.6rem;
  }
}