/* Video background overrides */
/* Ensures original banner.jpg gradients are suppressed so the video shows through. */
:root {
  --banner-height: 100vh;
}

body.landing #page-wrapper,
body.is-mobile.landing #banner,
body.is-mobile.landing .wrapper.style4,
#main > header {
  background: transparent !important;
  background-image: none !important;
}

.video-bg-wrapper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -2; /* behind everything */
  background: #000; /* fallback color while video loads */
}

.video-bg-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.33);
  z-index: 1;
  pointer-events: none;
}

.video-bg-wrapper video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

@media screen and (max-width: 736px) {
  .video-bg-wrapper video {
    width: 100vw;
    height: auto;
    min-height: max(var(--banner-height), 100vw);
    top: 0;
    left: 0;
    transform: none;
  }
}

.video-bg-wrapper video::-webkit-media-controls-start-playback-button,
.video-bg-wrapper video::-webkit-media-controls-play-button {
  display: none !important;
}

/* Ensure content sits above overlay */
#page-wrapper { position: relative; z-index: 2; }

/* Faster initial transitions for banner elements */
#banner h2,
#banner h2:before,
#banner h2:after,
#banner .more {
  -webkit-transition: all .6s ease-in-out !important;
  -moz-transition: all .6s ease-in-out !important;
  -ms-transition: all .6s ease-in-out !important;
  transition: all .6s ease-in-out !important;
}

/* Speed up/removal of banner overlay fade so background video appears sooner */
#banner:after {
  -webkit-transition: opacity 1s ease-in-out !important;
  -moz-transition: opacity 1s ease-in-out !important;
  -ms-transition: opacity 1s ease-in-out !important;
  transition: opacity 1s ease-in-out !important;
  -webkit-transition-delay: 0s !important;
  -moz-transition-delay: 0s !important;
  -ms-transition-delay: 0s !important;
  transition-delay: 0s !important;
}

body.is-preload #banner:after { /* ensure starting state still visible pre-load */
  opacity: 1 !important;
}

/* About me headshot sizing - larger and responsive */
.about-me-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.about-headshot img {
  display: block;
  width: 400px; /* desired larger size */
  height: 400px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.3);
}

@media screen and (max-width: 980px) {
  .about-me-row { flex-direction: column; text-align: center; }
  .about-headshot img { width: 140px; height: 140px; }
}

@media screen and (max-width: 480px) {
  .about-headshot img { width: 120px; height: 120px; }
}

/* Preprint button icon spacing */
.preprint-btn .icon { margin-right: 0.5em; }

/* arXiv SVG icon styling inside preprint button */
.preprint-btn .arxiv-icon {
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  /* External SVG as <img>: cannot use fill: currentColor directly; ensure it scales */
}

/* Headline link chevron slide effect */
.headline-link a {
  position: relative;
  display: inline-block;
  text-decoration: none; /* underline already handled globally */
  transition: color .25s ease;
}

/* Replace global underline with animatable pseudo-element */
.headline-link a {
  border-bottom: 0 !important; /* suppress global thick underline so we can animate */
}
.headline-link a:after { /* chevron */
  content: '\203A';
  display: inline-block;
  margin-left: .25em;
  transform: translateX(0);
  transition: transform .3s ease;
}
.headline-link a:hover:after,
.headline-link a:focus:after {
  transform: translateX(0.35em); /* horizontal only */
}
/* Underline (animated fade) for just the text, not chevron */
.headline-link a span._hl_text_wrapper { position: relative; display: inline-block; }
.headline-link a span._hl_text_wrapper:after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  height: 3px;
  background: currentColor;
  opacity: 1;
  transition: opacity .3s ease;
  pointer-events: none;
}
.headline-link a:hover span._hl_text_wrapper:after,
.headline-link a:focus span._hl_text_wrapper:after { opacity: 0; }

.headline-link a .chevron {
  display: inline-block;
  transition: transform .3s ease, opacity .3s ease;
  margin-left: .25em;
}

.headline-link a:hover .chevron,
.headline-link a:focus .chevron {
  transform: translateX(.35em);
}

.headline-link a:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}