/* 2 */

.bg-liner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  /* top: 56%; */
  left: 1%;
  transform: translate(-26%, -11%);
  rotate: 2;
  transform: rotate(90deg);
  width: 123px;
}
.bg-liner svg {
  position: absolute;
  left: -63px;
  top: 73px;
}

.rtl-bg svg {
  position: absolute;
  left: -61px;
  top: -353px;
}

.path-liner {
  animation: draw 5s linear infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 96;
  }
}

/* 3 */

body {
  transition: opacity ease-in 0.2s;
}
body[unresolved] {
  opacity: 0;
  display: block;
  overflow: hidden;
  position: relative;
}

/* 4 */

/* html, body {
      height: 100%;
      overflow: hidden;
      background: radial-gradient(circle, white, rgba(0, 0, 0, 0.5));
      background-color: #2F2F31;
      background-blend-mode: overlay;
    } */

.credits {
  width: 100%;
  top: 90%;
}

.text {
  text-align: center;
  font-family: Helvetica;
  font-size: 0.8rem;
  color: grey;
  pointer-events: none;
}

.centered,
.cube > .piece > .element > .sticker {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.scene {
  width: 50%;
  height: 100vh;
  perspective: 1200px;
  transform-style: preserve-3d;
}
.page::before {
  --size: 45px;
  --line: color-mix(in hsl, canvasText, #ffffff 70%);
  content: "";
  height: 100vh;
  width: 100vw;
  position: absolute;
  background: linear-gradient(
        90deg,
        var(--line) 1px,
        transparent 1px var(--size)
      )
      50% 50% / var(--size) var(--size),
    linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
      var(--size) var(--size);
  -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
  mask: linear-gradient(-20deg, transparent 50%, white);
  top: 0;
  transform-style: flat;
  pointer-events: none;
  z-index: 8;
}
.scene > .pivot {
  width: 0;
  height: 0;
  transition: 0.18s;
}
.scene .anchor {
  width: 2em;
  height: 6em;
}
.scene div {
  position: absolute;
  transform-style: inherit;
}

#piece4 > .element.top > .sticker {
  background-size: cover;
}

.cube {
  font-size: 190%;
  margin-left: -1em;
  margin-top: -1em;
}
.cube > .piece {
  width: 1.9em;
  height: 1.9em;
}
.cube > .piece > .element {
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  outline: 1px solid transparent;
  border: 0.05em solid #0a0a0a;
  border-radius: 10%;
}
.cube > .piece > .element.left {
  transform: rotateX(0deg) rotateY(-90deg) rotateZ(180deg) translateZ(1em);
}
.cube > .piece > .element.right {
  transform: rotateX(0deg) rotateY(90deg) rotateZ(90deg) translateZ(1em);
}
.cube > .piece > .element.back {
  transform: rotateX(0deg) rotateY(180deg) rotateZ(-90deg) translateZ(1em);
}
.cube > .piece > .element.front {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(1em);
}
.cube > .piece > .element.bottom {
  transform: rotateX(-90deg) rotateY(0deg) rotateZ(-90deg) translateZ(1em);
}
.cube > .piece > .element.top {
  transform: rotateX(90deg) rotateY(0deg) rotateZ(180deg) translateZ(1em);
}
.cube > .piece > .element > .sticker {
  transform: translateZ(2px);
  width: 95%;
  height: 95%;
  border-radius: 10%;
  outline: 1px solid transparent;
  box-shadow: inset 0.05em 0.05em 0.2rem 0 rgba(255, 255, 255, 0.25),
    inset -0.05em -0.05em 0.2rem 0 rgba(0, 0, 0, 0.25);
}
.cube > .piece > .element > .sticker.blue {
  background-color: #001ca8;
}
.cube > .piece > .element > .sticker.green {
  background-color: #006e16;
}
.cube > .piece > .element > .sticker.white {
  background-color: #ddd;
}
.cube > .piece > .element > .sticker.yellow {
  background-color: #e0ae00;
}
.cube > .piece > .element > .sticker.orange {
  background-color: #ff5000;
}
.cube > .piece > .element > .sticker.red {
  background-color: #df0500;
}

/* 5 */
@font-face {
  font-family: FigtreeVF;
  src: url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2)
      format("woff2 supports variations"),
    url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2)
      format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
}

/* 6 */
body {
  margin: 0;
  overflow-x: hidden;
  background: #000;
}


canvas {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
}


#main-content {
  display: block;
  background: #fff;
  color: #000;
  padding: 0;
}


/* 7 */
@font-face {
  font-family: FigtreeVF;
  src: url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2)
      format("woff2 supports variations"),
    url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2)
      format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
}

/* 8 */
@font-face {
  font-family: FigtreeVF;
  src: url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2)
      format("woff2 supports variations"),
    url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2)
      format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
}

/* 9 */
@font-face {
  font-family: FigtreeVF;
  src: url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2)
      format("woff2 supports variations"),
    url(chrome-extension://majdfhpaihoncoakbjgbdhglocklcgno/fonts/FigtreeVF.woff2)
      format("woff2-variations");
  font-weight: 100 1000;
  font-display: swap;
}

/* 10 */

@layer reset, base, utilities, components, layout, overrides;

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --direction {
  syntax: "<number>";
  initial-value: 1;
  inherits: true;
}

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



  :where(html) {
    -webkit-text-size-adjust: none;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  :where(body) {
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
  }
}

@layer base {
  html {
    --surface-1: oklch(20% 0.03 269);
    --surface-2: oklch(26% 0.04 269);
    --text-1: #2d7187;
    --body: 400 1rem/1.5rem system-ui, sans-serif;
    --display: 400 3.562rem/4rem system-ui, sans-serif;
    --display-small: 400 2.25rem/2.75rem system-ui, sans-serif;
    --label: 500 0.875rem/1.25rem system-ui, sans-serif;
    --title: 400 1.375rem/1.75rem system-ui, sans-serif;
    color-scheme: dark;
  }

  body {
    background-color: var(--surface-1);
    color: var(--text-1);
    font: var(--body);
  }
}

@layer layout {
  .section {
    display: grid;
    background: #e0dad5;
    max-inline-size: 100%;
    min-block-size: 100svb;
    overflow-x: clip;
    padding-block: 80px;
    place-items: center;
  }

  .section-wrapper {
    display: grid;
    place-items: center;
  }

  .header {
    display: grid;
    place-items: center;
    gap: 16px;
    z-index: 2;

    /* lg-n-above */
    @media (width >=1024px) {
      /* Placing header and cards in the same grid cell to stack them */
      /* Both elements use grid-area: 1/1 to overlap within the same area */
      grid-area: 1/1;
    }
  }

  .hgroup {
    display: grid;
    place-items: center;
    gap: 8px;
  }
  .headline,
  .tagline {
    color: #2d7187;
  }
  .headline {
    font: var(--display-small);

    /* lg-n-above */
    @media (width >=1200px) {
      font: var(--display);
    }
  }

  .section-link {
    color: var(--text-1);
    text-decoration: underline;
    font: var(--label);

    /* lg-n-below */
    @media (width < 1024px) {
      display: none;
    }
  }

  .cards {
    list-style: none;
    padding: 0;

    /* lg-n-below */
    @media (width < 1024px) {
      display: grid;
      grid-auto-flow: column;
      gap: 32px;
      max-inline-size: 100%;
      overflow-x: scroll;
      padding-block: 32px;
      padding-inline: 32px;
    }

    /* lg-n-above */
    @media (width >=1024px) {
      --avatar-opacity: 1;
      --avatar-img-scale: 1;
      --tooltip-visibility: hidden;
      --tooltip-opacity: 0;
      --animation-state: running;

      display: grid;
      /* Placing header and cards in the same grid cell to stack them */
      /* Both elements use grid-area: 1/1 to overlap within the same area */
      grid-area: 1/1;
      min-block-size: 700px;
      place-items: center;

      &:has(.avatar-link-wrapper:is(:hover, :focus-visible, :active)) {
        --animation-state: paused;
        /* Reduces opacity of non-hovered avatars to create a layered effect */
        --avatar-opacity: 0.4;
      }
    }
  }

  .team-m .card {
    padding: 0;

    /* lg-n-above */
    @media (width >=1024px) {
      --radius: min(620px, 40cqi);
      --offset-per-child: calc(450deg / (var(--nth-siblings) + 1));
      --angle-offset: calc(var(--nth-child) * var(--offset-per-child));
      --inline-ratio: 1/1;
      /* Keeps the horizontal scaling unchanged */
      --block-ratio: 1/2;
      /* Reduces vertical scaling, making it an oval */

      /* Adjusts tooltip direction based on avatar position */
      /* Future improvement: Replace with the sign() CSS function when it becomes widely supported */
      /* Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/sign */
      --direction: min(
        max(calc(cos((var(--angle) + var(--angle-offset))) * -100), -1),
        1
      );

      /* Stack all cards in the same grid cell */
      grid-area: 1/1;

      /* Based on Bramus' article, modified with inline/block ratios to create an oval shape */
      /* Source: https://web.dev/articles/css-trig-functions */

      translate: calc(
          cos((var(--angle) + var(--angle-offset))) * var(--radius) *
            var(--inline-ratio)
        )
        calc(
          sin((var(--angle) + var(--angle-offset))) * var(--radius) *
            var(--block-ratio) * -1
        );

      animation: adjust-angle linear 40s infinite reverse var(--animation-state);
    }
  }

  /* Continuously rotates the avatars in a circular motion */
  @keyframes adjust-angle {
    to {
      --angle: 360deg;
    }
  }

  .avatar-link-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--text-1);

    &:is(:hover, :focus-visible, :active) {
      --avatar-img-scale: 1.1;
      --avatar-opacity: 1;
      --tooltip-opacity: 1;
      --tooltip-visibility: visible;
    }

    /* lg-n-below */
    @media (width < 1024px) {
      flex-direction: column;
      gap: 16px;
    }
  }

  .visual {
    aspect-ratio: 1;
    border-radius: 1rem;
    box-shadow: 0 2px 4px 0 oklch(0 0 0 / 10%);
    inline-size: 240px;
    opacity: var(--avatar-opacity);
    overflow: clip;
    transition: opacity 0.3s ease;

    /* lg-n-above */
    @media (width >=1024px) {
      inline-size: 144px;
      border-radius: 1e5px;
    }
  }

  .avatar-img {
    background-color: var(--surface-2);
    block-size: 100%;
    display: block;
    inline-size: 100%;
    object-fit: cover;
    scale: var(--avatar-img-scale, 1);
    transition: scale 0.3s ease;
  }

  .tooltiptext {
    display: grid;
    gap: 4px;

    /* lg-n-above */
    @media (width >=1024px) {
      position: absolute;
      /* Adjusts tooltip placement based on avatar position */
      /* Moves the tooltip to the left or right depending on the avatar's location */
      /* --direction is either 1 (right) or -1 (left) */
      max-inline-size: 20ch;
      opacity: var(--tooltip-opacity);
      transition-duration: 0.3s;
      transition-property: opacity, visibility;
      transition-timing-function: ease;
      translate: 110% 0;
      visibility: var(--tooltip-visibility);

      /* make the tooltips non-interactive */
      pointer-events: none;
      user-select: none;

      /* Adjusts text alignment based on avatar position */
      /* Ensures the tooltip text aligns properly when shifted left or right */
      @container style(--direction: -1) {
        text-align: end;
        translate: -110% 0;
      }
    }
  }

  .team-name {
    font: var(--title);
  }
}
/* 13 */
body {
  direction: ltr;
  font-family: Inter;
}
.container {
  width: 1280px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  text-align: center;
}
.title {
  margin-top: 150px;
  color: #000;
  font-size: 4rem;
}
.roadpath {
  margin: 40px auto 400px auto;
  position: relative;
}
.roadmap-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #050a2f;
  border: 1px solid #fff;
  position: relative;
}
.q1 {
  display: flex;
  position: absolute;
  top: 110px;
  right: 110px;
  opacity: 0;
}
.q2 {
  display: flex;
  position: absolute;
  top: 440px;
  right: 630px;
  opacity: 0;
}
.q3 {
  display: flex;
  position: absolute;
  top: 820px;
  right: 25px;
  opacity: 0;
}
.q4 {
  display: flex;
  position: absolute;
  top: 1145px;
  left: 90px;
  opacity: 0;
}
.roadmap-content {
  width: 290px;
  position: relative;
  direction: rtl;
  text-align: right !important;
  margin-right: 3%;
  background: #ededed;
  padding: 16px;
  border-radius: 16px;
}
.roadmap-content.rmright {
  margin-left: 150px;
  text-align: left;
  padding-left: 20px;
}
/* .roadmap-content.rmright:before {
        content: "";
        position: absolute;
        width: 130px;
        height: 1px;
        border-top: 1px solid #7a7c8e;
        left: -130px;
        top: 17px;
      } */
.roadmap-content.rmleft {
  margin-right: 150px;
  text-align: right;
  padding-right: 20px;
}
/* .roadmap-content.rmleft:after {
        content: "";
        position: absolute;
        width: 130px;
        height: 1px;
        border-top: 1px solid #7a7c8e;
        right: -130px;
        top: 17px;
      } */
.h--timeline-event-description{
        z-index: 2;
    position: relative;
    width: 60%;
}
.h--timeline-event-content{
    background: #f4f2ef;
    overflow: hidden;
}

.h--timeline-event-content img{position: absolute;
    right: -16px;
    bottom: -45px;
    width: 170px;
    z-index: 0;
    opacity: 0.6;}