/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Julius Sans One', sans-serif;
  font-size: 12px;
}

/* ===== Hero section ===== */
/* 200vh gives real scroll space even though bg is fixed */
.heroEffects {
  height: 200vh;
  position: relative;
  top: 0;
  left: 0;
}

/* Fixed background stays on screen, but must be BEHIND content */
.heroEffects .bg {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: scale(1);
  z-index: -2;            
}

.heroEffects .shade {
  opacity: 0;
  background: rgba(0, 0, 0, .8);
  height: 100vh;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;              
}

.heroEffects .title {
  width: 100%;
  height: 100vh;
  position: relative;
  z-index: 2;               /* hero text above bg */
}

.heroEffects .title .text {
  width: 100%;
  text-align: center;
  color: white;
  padding: 4em;
  background: rgba(0, 0, 0, .6);
}

.heroEffects .arrow {
  position: fixed;
  left: 50%;
  margin-left: -20px;
  bottom: 0;
  width: 40px;
  height: 40px;
  opacity: 1;
  z-index: 4;
  cursor: pointer;
}

/* Vertical centering helper */
.centerV {
  display: table;
  height: 100%;
  width: 100%;
}
.centerV > div {
  display: table-cell;
  vertical-align: middle;
}

/* Text styles */
h1 {
  font-size: 5em;
  margin-bottom: 0.1em;
  line-height: 1em;
  color: #fff;
  font-weight: 400;
}

.heroEffects p {
  width: 60vw;
  margin: 0 auto;
  line-height: 1.5em;
  padding: 10px 20px 0;
  border-top: solid 1px rgba(255, 255, 255, .2);
  letter-spacing: 0.015em;
  color: #eee;
}

/* ===== Content section (names) ===== */
.content {
  background: #cdcdcd;
  padding: 150px 50px;
  min-height: 100vh;

  position: relative;       /* ✅ KEY FIX */
  z-index: 5;               /* ✅ KEY FIX */
}

/* Center names and make them big/bold */
.content .names {
  min-height: calc(100vh - 300px); /* accounts for padding */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.content .names h2 {
  margin: 18px 0;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
}

/* ===== Arrow bounce animation ===== */
.bouncy {
  animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes Weeeeeeeeeee {
  0%   { transform: translate(0, 0px); }
  11%  { transform: translate(0, -25px) scaleX(.8); }
  20%  { transform: translate(0, 0px) scaleY(.8); }
  28%  { transform: translate(0, -10px); }
  36%  { transform: translate(0, 0px); }
  100% { transform: translate(0, 0px); }
}