html {
  scroll-behavior: smooth;
}

/* Links */
p a {
  padding: 2px 0;
  background: linear-gradient(
        to right,
        rgba(84, 102, 253, 0.6),
        rgba(84, 102, 253, 0.6)
      )
      no-repeat left bottom / 100% 1px,
    linear-gradient(to right, rgba(84, 102, 253, 0.2), rgba(84, 102, 253, 0.2))
      no-repeat right bottom / 0 100%;
  transition: background-size 0.4s;
}

p a:where(:hover, :focus-visible) {
  background-size: 0 1px, 100% 100%;
  background-position: right bottom, left bottom;
}

.link-noeffect,
.primary--white {
  background: none;
}

/* Content cells */
.content-cell.section-pillars {
  filter: drop-shadow(0 2px 10px rgba(7, 8, 20, 0.4));
  transition: all 0.2s ease-in-out;
  user-select: none;
  cursor: pointer;
}

.content-cell.section-pillars:where(:hover, :focus-visible) {
  filter: drop-shadow(0 20px 30px rgba(7, 8, 20, 0.4));
}

.content-cell.section-pillars svg path,
.content-cell.section-pillars svg stop {
  transition: all 0.2s ease-in-out;
}

.content-cell.section-pillars.pillar-1:where(:hover, :focus-visible) svg path,
.content-cell.section-pillars.pillar-2:where(:hover, :focus-visible) svg path,
.content-cell.section-pillars.pillar-3:where(:hover, :focus-visible) svg path,
.content-cell.section-pillars.pillar-4:where(:hover, :focus-visible) svg path,
.content-cell.section-pillars.pillar-5:where(:hover, :focus-visible) svg path {
  stroke: #323d98;
}

.content-cell.section-pillars.pillar-1:where(:hover, :focus-visible)
  svg
  stop:first-child,
.content-cell.section-pillars.pillar-2:where(:hover, :focus-visible)
  svg
  stop:first-child,
.content-cell.section-pillars.pillar-3:where(:hover, :focus-visible)
  svg
  stop:first-child,
.content-cell.section-pillars.pillar-4:where(:hover, :focus-visible)
  svg
  stop:first-child,
.content-cell.section-pillars.pillar-5:where(:hover, :focus-visible)
  svg
  stop:first-child {
  stop-opacity: 0;
}

.content-cell.section-pillars.pillar-1:where(:hover, :focus-visible)
  svg
  stop:last-child,
.content-cell.section-pillars.pillar-2:where(:hover, :focus-visible)
  svg
  stop:last-child,
.content-cell.section-pillars.pillar-3:where(:hover, :focus-visible)
  svg
  stop:last-child,
.content-cell.section-pillars.pillar-4:where(:hover, :focus-visible)
  svg
  stop:last-child,
.content-cell.section-pillars.pillar-5:where(:hover, :focus-visible)
  svg
  stop:last-child {
  stop-opacity: 0.6;
}

/* Additional */
body.scrollflip-relative [tr-scrollflip-sticky="true"] {
  position: relative;
}

/* Media queries */
@media screen and (min-width: 992px) {
  .header-container.main::before,
  .header-container.main-dark::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -80px 0;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    mask: linear-gradient(
      to bottom,
      red 100px calc(100% - 80px),
      transparent 100%
    );
  }

  .header-container.main::before {
    background-image: linear-gradient(
      rgba(248, 249, 255, 0.8) 20%,
      rgba(248, 249, 255, 0.2)
    );
  }
  .header-container.main-dark::before {
    background-image: linear-gradient(
      rgba(17, 20, 51, 0.8) 20%,
      rgba(17, 20, 51, 0.2)
    );
  }
}

@media screen and (max-width: 991px) {
  .header-container.main::before,
  .header-container.main-dark::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -80px 0;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    mask: linear-gradient(
      to bottom,
      red 100px calc(100% - 80px),
      transparent 100%
    );
  }
}

.spline-container,
.spline-scene {
  pointer-events: none;
}

/* Scrolling Animations */
.snap-container {
  scroll-snap-type: y proximity;
}
.section-hero--test,
.section-technology--test,
.section-utility,
.section-principles,
.section-community {
  scroll-snap-align: start;
}