*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
    font-family: 'DM-Sans';
    src: url('assets/fonts/DMSans-VariableFont_opsz,wght.ttf') format('truetype');
    font-weight: 100 900;
  }

@font-face {
  font-family: 'ChakraPetch-Regular';
  src: url('assets/fonts/ChakraPetch-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'ChakraPetch-Light';
  src: url('assets/fonts/ChakraPetch-Light.ttf') format('truetype');
}


:root {
  --bg: #000000;
  --white: #f2f2f2;
  --muted: #8f8f8f;
  --soft: #3c3c3c;
  --line: #232323;
  --line-blue: #0b2f7e;
  --link-blue: #37ade9;
  --blue: #1b67d6;
  --blue-soft: rgba(24, 100, 220, 0.22);
  --yellow: #eff70b;
  --yellow-soft: rgba(231, 238, 25, 0.24);
  --grey-wip: #8b8b8b;
  --card: rgba(8, 8, 8, 0.82);
  --card-border: rgba(120, 120, 120, 0.34);
  --header-height: 180px;
  --timeline-height: 440px;
  --timeline-inner-height:      50%; /*change both!*/
  --timeline-inner-height-calc: 0.5; /*change both!*/
  --circle-diameter: 26px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: 'DM-Sans', sans-serif;
  text-rendering: geometricPrecision;
}

body {
  /* background-color: var(--bg); */
  background-color: black; /* fallback black background */
  background-image: url("assets/images/background_ship_VOC_v011.jpg");
  background-repeat: no-repeat; /* prevents repeating */
  background-position: center center; /* centers the image */
  background-size: auto;
  isolation: isolate;
  overflow-x: hidden;
}

header{
    width: 100%;
    height: var(--header-height);
    font-family: 'DM-Sans', sans-serif;
    font-size: 20px;
    color: #ffffff;
    position: sticky;
    top: 0;
    /* background: linear-gradient(
      to bottom,
      rgb(0, 0, 0) 60%,
      rgba(255, 0, 0, 0) 100%
  ); */
    z-index: 1000;
}

header .inner{
    width: 50%; /* This is the inner width of the content inside of your header (80%, etc) */
    top: 20px;
    height: 100%;
    display: block;
    margin: 0 auto;
    display: flex;
    align-items: center;     /* vertical centering */
}

header .logo--mobile {
  display: none;
}

header nav{
  border: 1px solid rgba(255, 255, 255, 0.315); /* border color */
  border-radius: 20px;   /* pill shape */
  padding: 12px 38px; /* nav pill size */
  width: 80%;
  margin-left: 40px; /* distance from the logo */
}

header nav ul {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

header nav li {
  display: table;
}

header .guidelines {
  cursor: pointer;
  background: linear-gradient(90deg, #4c4c4c, #dfdfdf);
  background-clip: text;
  user-select: none;

  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.guidelines:hover {
  background: #3a3a3a;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.guidelines:active {
  animation: shake 0.3s;
}

@keyframes shake {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(4px); }
  50%  { transform: translateY(-4px); }
  75%  { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

header nav span {
    display: table-cell;
    vertical-align: middle;
}

header .wip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 14px;
  padding: 0 3px;
  border-radius: 5px;
  border: 1px solid var(--grey-wip);
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-wip);
  margin-bottom: 16px;
  margin-left: 6px;
}

.page {
  margin: 0;
  font-family: DM-Sans, sans-serif;
  min-height: calc(80vh - var(--header-height)); /* match your header height */
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: black; */
}

/* Timeline container */
.timeline {
  width: 100vw;
  height: var(--timeline-height);
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  touch-action: pan-x pan-y;
  display: flex;
  justify-content: center;
  align-items: center;

  scrollbar-width: none;
  -ms-overflow-style: none;

  cursor: grab;
  user-select: none;
}

.timeline:active {
  cursor: grabbing;
  user-select: none;
}

.timeline::-webkit-scrollbar {
  display: none;
}

.timeline-inner {
  display: flex;
  gap: 18vw;
  width: fit-content;
  height: var(--timeline-inner-height);
  margin-left: 30vw;
  transform: translateX(300px); 
}

/* Horizontal line */
.timeline::before {
  content: "";
  position: absolute;
  top: calc(var(--timeline-height) / 2);
  left: 0;
  right: -650px;
  height: 2px;

  background: linear-gradient(
    to right,
    #131313 25vw,
    yellow 40vw,
    #396ace 70vw,
    #396ace 90vw,
    #131313 100vw
  );
}

.circle {
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  border-radius: 50%;
  position: absolute;
  top: calc(var(--timeline-height) / 2 * var(--timeline-inner-height-calc) - (var(--circle-diameter) / 2)); /* timeline height / 2 * timeline-inner percentage - circle diameter / 2 */
  z-index: 1;
  transition: all 0.3s ease;
}

.circle-in-progress {
  background: yellow;
  box-shadow: 0 30px 100px 20px var(--yellow);
}

.circle-not-started {
  background: #000000;
  box-shadow: 0 30px 100px 20px var(--blue); /* x offset, y offset, blur radius, color */
}

/* PC hover behavior */
@media (hover: hover) {
  .circle-in-progress:hover {
    width: calc(var(--circle-diameter) * 1.5);
    height: calc(var(--circle-diameter) * 1.5);
    transform: translate(-7px, -7px);

    box-shadow: 0 10px 160px 40px var(--yellow);
  }

  .circle-not-started:hover {
    width: calc(var(--circle-diameter) * 1.5);
    height: calc(var(--circle-diameter) * 1.5);
    transform: translate(-7px, -7px);

    box-shadow: 0 10px 180px 60px var(--blue);
    background: var(--blue);
  }
}

/* mobile tap behavior */
.circle-in-progress.active  {
  width: calc(var(--circle-diameter) * 1.5);
  height: calc(var(--circle-diameter) * 1.5);
  transform: translate(-7px, -7px);

  box-shadow: 0 10px 160px 40px var(--yellow);
}

.circle-not-started.active {
  width: calc(var(--circle-diameter) * 1.5);
  height: calc(var(--circle-diameter) * 1.5);
  transform: translate(-7px, -7px);
  
  box-shadow: 0 10px 180px 60px var(--blue);
  background: var(--blue);
}

/* Noise texture */

/* .circle-active::after {
  content: "";
  position: absolute;
  transform: translate(-45%, -45%); 
  width: 256px;
  height: 256px;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: url(assets/images/noise02.webp);
  opacity: .3;               
  z-index: 2;
} */

h1 {
  margin: 0;
  margin-bottom: 5px;
  font-size: 36px;
  line-height: 1.05;
  font-weight: 200;
  color: rgba(255,255,255,0.96);
  white-space: nowrap;
}

.status {
  font-size: 16px;
  line-height: 1.15;
  color: rgb(255, 255, 255);
  white-space: nowrap;
  font-weight: 100;
}

p {
  font-size: 14px;
  margin: 0;
  color: #555;
}

/* Link styles */
a {
  color: var(--link-blue);
  text-decoration: none;
  font-weight: 200;
  transition: color 0.3s ease;
}
a:visited {
  color: var(--link-blue);
}
a:hover {
  text-decoration: none;
  color: var(--yellow);
}
a:active {
  color: var(--link-blue);
}

/* Research checks line */
.research-checks::before {
  content: "";
  position: absolute;
  bottom: 10px;
  left: calc(var(--circle-diameter) / 2);
  width: 1px;
  height: calc(var(--timeline-height) / 2 * var(--timeline-inner-height-calc));
  background: rgb(110, 110, 110);
}

.research-checks {
  position: absolute;
  bottom: 0;
  color: #999999;
  font-size: 16px;
  font-weight: 200;
  list-style-image: url("assets/images/checklist_circle.webp");
  margin-block-start: 0;
  margin-block-end: 0;
}

.research-checks li {
  padding-left: 4px;
  margin-left: 8px;
}

.contributors {
  display: flex;
  min-width: 400px;
  max-width: 80%;
  min-height: 79px;
  padding: 16px 16px;
  border: 1px solid var(--card-border);
  border-radius: 0px 32px 32px 0px;
  border-left-style: none;
  z-index: 5;
}

.join-notification {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  margin-left: 22vw;
  min-width: 50px;
  height: 18px;
  padding: 7px 7px;
  border-radius: 7px;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 30px 80px 5px var(--yellow); /* x offset, y offset, blur radius, color */;
  /* cursor: pointer; */
  transition: all 0.5s ease;
  animation: blink 3s ease-in-out infinite;
}

@keyframes blink {
  0%   {  color: var(--yellow); 
          border: 1px solid var(--yellow);
          box-shadow: 0 30px 80px 5px var(--yellow);}
  
  50%  {  color: rgba(239, 247, 11, 0); 
          border: 1px solid rgba(239, 247, 11, 0);
          box-shadow: 0 30px 80px 5px rgba(239, 247, 11, 0);}
  
  100% {  color: var(--yellow); 
          border: 1px solid var(--yellow);
          box-shadow: 0 30px 80px 5px var(--yellow);}
}

.contributors-text {
  display: inline-block;
  max-width: 90%;
}

.contributors h3 {
  margin: 0 0 6px 16px;
  font-size: 20px;
  font-family: ChakraPetch-Light, sans-serif;
  line-height: 1.1;
  color: rgba(255,255,255,0.92);
}

.contributors p {
  margin: 0 0 6px 16px;
  font-size: 14px;
  font-family: "DM-Sans", sans-serif;
  font-weight: 200;
  line-height: 1.35;
  color: rgb(197, 197, 197);
}

.contributors .contact-links {
  display: flex;
  margin-top: 16px;
}

.bold {
  font-weight: 300;
}

@media (max-width: 768px) {
  header .logo--desktop {
    display: none;
  }
  header .logo--mobile {
    display: block;
  }
  header nav {
    margin-left: 20px;
    padding: 12px 24px;
  }
  .join-notification {
    margin-left: 6vw;
  }

  .timeline::before {
  background: linear-gradient(
    to right,       /* horizontal gradient */
    #131313 10vw,            /* start color */
    yellow 30vw,         /* middle color */
    #396ace 60vw,          /* end color */
    #396ace 99vw,          /* end color */
    #131313 150vw          /* end color */
    );
  }
}