/* --- Base ---
   The scroller is 1 screen + 1 step per text slide. The sticky panel stays pinned
   while the page scrolls through that extra height; module.js turns the scroll
   position into the slide transitions. lvh for the pinned panel (no resize jumps
   when mobile toolbars collapse), svh for the content so text stays above them. */
.ib-scroller {
  --ib-step: 100vh;
  position: relative;
  width: 100%;
  height: calc(100vh + var(--ib-steps, 0) * var(--ib-step));
}
@supports (height: 100svh) {
  .ib-scroller {
    --ib-step: 100svh;
    height: calc(100lvh + var(--ib-steps, 0) * var(--ib-step));
  }
}
.ib-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  width: 100%;
  overflow: hidden;
  color: #fff;
  border: solid 10px white;
  border-radius: 40px;
}

/* --- Site menu pinned with the hero (module.js moves <header> into this track) --- */
.ib-header-track {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  z-index: 100;
  pointer-events: none;
}
.ib-header-track > header.ib-header {
  position: sticky;
  top: 0;
  pointer-events: auto;
  /* Theme gives every <header> a 1px black bottom border; it used to sit hidden
     behind the hero, but now the menu is layered on top of it */
  border-bottom: 0;
}

/* --- Backgrounds --- */
.ib-background, .ib-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.ib-background video,
.ib-background img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The default video has the black & white look baked in; this is for colour uploads */
.ib-background .ib-video--filter { filter: grayscale(100%) contrast(1.2); }
.ib-overlay { background: rgba(0,0,0,0.3); z-index: 2; }

/* --- Container --- */
.ib-container {
  position: relative;
  z-index: 10;
  max-width: 1300px;
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
}

/* --- Slides ---
   Without JS only the intro shows. module.js sets opacity/transform/visibility inline. */
.ib-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
.ib-slide--initial { opacity: 1; visibility: visible; }

/* ------------------------------------------------ */
/* --- 1. Initial Hero --- */
/* ------------------------------------------------ */
.ib-slide--initial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 15vh;
  padding-bottom: 8vh;
}

@media (max-width: 1024px) {
  .ib-slide--initial { padding-top: 22vh; }
}

.ib-hero-top {
  max-width: 950px;
}

.ib-heading {
  font-size: 4.5rem;
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  color: white;
}

.ib-subheading {
  font-size: 3rem;
  font-weight: 600;
  opacity: 0.9;
}

/* Bottom Area */
.ib-hero-bottom {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 500px;
}

.ib-scroll-label {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
}

.ib-hero-desc {
  font-size: 1.125rem;
  line-height: 1.5;
  opacity: 0.9;
}

/* ------------------------------------------------ */
/* --- 2. Text slides --- */
/* ------------------------------------------------ */
.ib-slide--item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Meta: label + counter, outside the slides so they stay put */
.ib-slide-meta {
  position: absolute;
  top: 15vh;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}

.ib-meta-label {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  background: rgba(255,255,255,0.15);
  padding: 6px 12px;
  border-radius: 4px;
  width: fit-content;
}

.ib-dot {
  width: 6px; height: 6px;
  background-color: #f90022;
  margin-right: 8px;
  border-radius: 50%;
}

.ib-meta-counter {
  display: flex;
  align-items: center;
  gap: 0.5ch;
  font-family: monospace;
  font-size: 0.85rem;
  line-height: 1.2;
  padding: 6px 16px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 20px;
  width: fit-content;
}

/* Rolling number: a column of numbers behind a one-line window */
.ib-counter-window {
  display: block;
  height: 1.2em;
  overflow: hidden;
}
.ib-counter-track {
  display: block;
  will-change: transform;
}
.ib-counter-track > span {
  display: block;
  height: 1.2em;
}

/* Content Text */
.ib-slide-content {
  width: 65%;
  font-size: 3rem;
  line-height: 1.25;
  font-weight: 300;
  color: #e0e0e0;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .ib-heading { font-size: 3.5rem; }
  .ib-subheading { font-size: 2rem; }
  .ib-slide-meta { top: 12vh; }
  .ib-slide-content { width: 100%; font-size: 2.25rem; padding-top: 22vh; }
  .ib-slide--item { display: block; }
}

@media (max-width: 767px) {
  .ib-sticky { border: none; border-radius: 0; }
  .ib-slide { padding-left: 1.25rem; padding-right: 1.25rem; }
  .ib-slide-meta { flex-direction: row; align-items: center; gap: 10px; left: 1.25rem; }
}