/* ==========================================================================
   Home page only: the carousel, the "BrainSaw" title, the dots, and the
   sheet of text that slides up over the image as you scroll.
   (Loaded after site.css.)
   ========================================================================== */

/* Black underneath, in case an image is slow to arrive. */
html { background: #000; scroll-behavior: smooth; }
body.home {
  background: #000;
  --first-screen: 70vh;      /* how much of the window the image gets on arrival; the sheet shows below it */
}


/* ---------- Carousel -------------------------------------------------------- */
/* Fixed behind everything: it stays put while the page scrolls over it. */

.carousel {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
}

/* Every slide waits just off-screen to the right until it is needed.
   (The transparent colour hides the alt text, which some browsers draw in
   the image's place while it is loading.) */
.carousel__slide {
  color: transparent;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(100%);
  transition: transform var(--slide-ms, 800ms) ease-in-out;
}
.carousel__slide.is-current { transform: translateX(0); }


/* ---------- Slides that need centring ------------------------------------------ */
/* A slide normally fills the whole window, so its lower part is behind the
   sheet. That suits a picture that is interesting all over. One with its
   subject in the middle is listed here instead, by part of its file name, and
   is then drawn in the space between the top bar and the sheet. */

.carousel__slide[data-src*="whole-mouse-brain-three-views"],
.carousel__slide[data-src*="mouse-brain-coronal-section"] {
  top: var(--bar-height);
  height: calc(var(--first-screen) - var(--bar-height));
}

/* This one is also shown whole rather than cropped to fill the space (its
   background is black, so the edges do not show), then enlarged a little. */
.carousel__slide[data-src*="mouse-brain-coronal-section"] {
  object-fit: contain;
  scale: 1.2;
}


/* ---------- First screen ---------------------------------------------------- */
/* Only the image shows here, with the title and the dots over it. It is
   shorter than the window, so that the top of the sheet shows below it. */

.first-screen {
  position: relative;
  height: var(--first-screen);
}

/* Title: fades out on the first transition (JS sets the duration to match). */
.home-title {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(3.5rem, 15vw, 12rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
}
.home-title.is-visible { opacity: 1; }

/* Dots */
.carousel__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: 1.5rem;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.carousel__dot {
  width: 0.7rem; height: 0.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: transform 300ms ease, background 300ms ease;
}
.carousel__dot:hover { background: rgba(255, 255, 255, 0.85); }
.carousel__dot[aria-current="true"] { background: #fff; transform: scale(1.5); }


/* ---------- The sheet --------------------------------------------------------- */
/* Dark and frosted, like the top and bottom bars. */

.sheet {
  position: relative;                 /* so that it sits above the fixed carousel */
  z-index: 5;
  padding: 2.25rem 1.25rem 6rem;      /* the bottom clears the fixed bottom bar */
  color: #dcdcdc;
  background: rgba(12, 14, 20, 0.7);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* Text on the left, key numbers on the right. */
.sheet__inner {
  max-width: var(--page-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 15rem;
  gap: 3.5rem;
  align-items: start;
}

.sheet h1 { margin: 0 0 1rem; color: #fff; font-size: clamp(1.7rem, 4vw, 2.4rem); }
.sheet p { margin: 0 0 1rem; }
.sheet__lead { color: #fff; font-size: 1.2rem; }

/* A row of buttons, a little tighter round their text than the site's usual button. */
.sheet__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; padding-top: 0.5rem; }
.sheet__links .btn { padding: 0.34rem 0.94rem; }

/* The preprint button: white, with the bioRxiv logo in place of text.
   The logo's height plus the padding and border make it as tall as the other
   buttons. It stays white on hover (the logo has a white background of its
   own); its border, white until then, turns grey instead. */
.sheet__links .btn--logo {
  padding: calc(0.5rem - 2px) calc(0.9rem - 2px);
  background: #fff;
  border: 2px solid #fff;
}
.sheet__links .btn--logo:hover,
.sheet__links .btn--logo:focus { background: #fff; border-color: #8c8c8c; }
.btn--logo img { height: 1.25rem; width: auto; }

/* Key numbers */
.facts { margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: 0.95rem; }
.facts li { padding: 0.8rem 0; border-top: 1px solid rgba(255, 255, 255, 0.25); }
.facts strong {
  display: block;
  color: #fff;
  font-family: var(--font-heading);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.1;
}

/* Narrow screens: one column, with the numbers two by two underneath. */
@media (max-width: 48rem) {
  .sheet__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
  .sheet { padding-bottom: 3rem; }
}