:root {
  --activeObjectBackground1: #9b47b6;
  --activeObjectBackground2: #4fa7dc;
  --activeObjectTextColor: #fff;
  --backdrop: rgba(26, 31, 38, 0.75);
  --blueTextColor: #4fa7dc;
  --blueTintBackground: rgba(79, 167, 220, 0.15);
  --blueTintLightBackground: rgba(79, 167, 220, 0.1);
  --didNotPlaceBackground: #435061;
  --disabledDefaultButtonColor: #323c48;
  --disabledPrimaryButtonBackground: #323c48;
  --disabledPrimaryButtonColor: #435061;
  --eventCanceled: #f35a76;
  --eventFinished: #28c19c;
  --eventRunning: #f2991f;
  --eventUpcoming: #8596ab;
  --grayTintBackground: rgba(255, 255, 255, 0.05);
  --grayTintLightBackground: rgba(133, 150, 171, 0.1);
  --greenTextColor: #28c19c;
  --greenTintBackground: rgba(40, 193, 156, 0.15);
  --greenTintLightBackground: rgba(40, 193, 156, 0.1);
  --loadingBackground: #323c48;
  --loadingHighlight: #435061;
  --navSelectedBackground: #9b47b6;
  --pedigreeLine: #435061;
  --pillBackground: #323c48;
  --pillSelectedBackground: #fff;
  --pillSelectedTextColor: #1a1f26;
  --pillTextColor: #8596ab;
  --pinkTextColor: #ff6bb3;
  --pinkTintBackground: rgba(255, 107, 179, 0.15);
  --primaryButtonBackground1: #f0374e;
  --primaryButtonBackground2: #f2991f;
  --primaryButtonColor: #fff;
  --primaryColor: #fff;
  --purpleTextColor: #d471f4;
  --purpleTintBackground: rgba(155, 71, 181, 0.15);
  --redTextColor: #f35a76;
  --redTintBackground: rgba(243, 90, 118, 0.15);
  --rootBackground: #222830;
  --secondaryBackground: #1a1f26;
  --secondaryColor: #8596ab;
  --sectionHeaderLine: #222830;
  --siteBackground: #060f1c;
  --subtleBorderColor: #323c48;
  --tertiaryButtonBackground: #9b47b6;
  --textOverColorColor: #1a1f26;
  --tinyCountBackground: #f35a76;
  --tooltipBackground: #9b47b6;
  --tooltipTextColor: #fff;
  --transparent: transparent;
  --whiteTintBackground: rgba(255, 255, 255, 0.15);
  --yellowTextColor: #f2991f;
  --yellowTintBackground: rgba(242, 153, 31, 0.15);
  --yellowTintLightBackground: rgba(242, 153, 31, 0.1);
}

html,
body {
  background: var(--siteBackground);
  color: var(--primaryColor);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: clamp(6px, -0.122px + 0.816vw, 10px);
  font-weight: 400;
  margin: 0;
  min-height: 100%;
  overscroll-behavior: none;
  padding: 0;
  scroll-behavior: smooth;
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  cursor: pointer;
  text-decoration: underline;
}

button,
h1,
section {
  border: 0;
  box-sizing: content-box;
  color: var(--primaryColor);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    'Open Sans',
    'Helvetica Neue',
    sans-serif;
  font-size: inherit;
  font-weight: 400;
  margin: 0;
  margin-block: 0;
  margin-inline: 0;
  padding: 0;
}

.contentContainer {
  margin: 0 auto;
  width: 120rem;
}

.frameHeaderBackground {
  background: #060f1c;
  height: 8.4rem;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2;
}

.frameHeader {
  align-items: center;
  background: #060f1c;
  column-gap: 1.2rem;
  display: flex;
  height: 6rem;
  justify-content: space-between;
  margin: auto;
  padding: 1.2rem 0;
  position: fixed;
  top: 0;
  width: 120rem;
  z-index: 999;
}

.logo {
  height: 4.5rem;
}

.logoLink {
  display: inline-block;
  height: 4.5rem;
}

.faq {
  color: var(--primaryColor);
  font-size: 2rem;
  font-weight: 500;
}

.defaultButton {
  background-color: var(--purpleTextColor);
  border-radius: 1.2rem;
  box-sizing: content-box;
  color: var(--primaryColor);
  font-size: 2rem;
  font-weight: 600;
  height: 3.2rem;
  margin-inline-start: 2rem;
  min-width: 14rem;
  padding: 1.2rem;
}

.specialButton {
  background-color: --primaryButtonBackground1;
  background-image: linear-gradient(
    96deg,
    var(--primaryButtonBackground1) 0%,
    var(--primaryButtonBackground2) 100%
  );
  border-radius: 1.6rem;
  box-sizing: content-box;
  color: var(--primaryColor);
  font-size: 2.8rem;
  font-weight: 700;
  height: 4.8rem;
  margin-top: 2.8rem;
  min-width: 24rem;
  padding: 1.2rem;
}

.section {
  align-items: center;
  column-gap: 3rem;
  display: flex;
  height: 54rem;
  padding: 4rem 0;
  position: relative;
}

.section:first-of-type {
  margin-top: 8.4rem;
}

.sectionReverse {
  flex-direction: row-reverse;
}

.sectionTitle {
  color: var(--purpleTextColor);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 150%;
}

.blur {
  background: linear-gradient(
    96deg,
    var(--activeObjectBackground1) 0%,
    var(--activeObjectBackground2) 100%
  );
  border-radius: 50%;
  opacity: 0.2;
  filter: blur(15rem);
  position: absolute;
  height: 40rem;
  width: 40rem;
}

.blur1 {
  left: 58rem;
  top: 28rem;
}

.blur2 {
  background: linear-gradient(
    96deg,
    var(--activeObjectBackground1) 0%,
    var(--pinkTextColor) 100%
  );
  left: 0;
  top: 27rem;
}

.blur3 {
  background: linear-gradient(
    96deg,
    var(--primaryButtonBackground1) 0%,
    var(--primaryButtonBackground2) 100%
  );
  left: 85rem;
  top: 3rem;
}

.blur4 {
  left: -3rem;
  top: 3rem;
}

.textSide {
  align-items: flex-start;
  display: flex;
  flex: 0 0 63rem;
  flex-direction: column;
  justify-content: center;
  margin-inline-end: 6rem;
}

.sectionReverse .textSide {
  margin-inline-end: 0;
  margin-inline-start: 6rem;
}

.h1 {
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 125%;
}

.subtitle {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 150%;
  margin-top: 2rem;
}

.animationSide {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: flex-start;
  pointer-events: none;
  position: relative;
  user-select: none;
}

.sectionReverse .animationSide {
  justify-content: flex-end;
}

.phoneContainer {
  height: 38.5rem;
  position: relative;
  width: 34rem;
  z-index: 1;
}

.phone {
  animation: phoneUp 0.5s ease-out 1s 1 forwards;
  height: 38.5rem;
  left: 0;
  position: absolute;
  top: 0;
  /* transform: translate3d(2.4rem, 3rem, 0); */
  width: 34rem;
}

.phoneLine {
  animation: phoneLineDown 0.5s ease-out 1s 1 forwards;
  height: 36.8rem;
  left: 0.8rem;
  position: absolute;
  top: 1.8rem;
  width: 34rem;
}

@keyframes phoneUp {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-2.4rem, -3rem, 0);
  }
}

@keyframes phoneLineDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(2.4rem, 3rem, 0);
  }
}

.alert {
  animation: alertFadeIn 0.4s ease-out 1.75s 1 forwards;
  background: var(--secondaryBackground);
  border-radius: 2rem;
  font-size: 1.4rem;
  min-height: 3.6rem;
  opacity: 0;
  padding: 1.6rem 1.6rem 1.6rem calc(1.6rem + 4.4rem);
  position: absolute;
  transform: translate3d(0, -3rem, 0);
  white-space: nowrap;
}

.alert::before {
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 2rem;
  padding: 0.2rem;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.alert::after {
  background-size: 100%;
  content: '';
  height: 3.6rem;
  left: 1.6rem;
  position: absolute;
  top: 1.6rem;
  width: 3.6rem;
}

.alertPurple {
  left: -7.4rem;
  top: 0.6rem;
}

.alertPurple::before {
  background: linear-gradient(
    110deg,
    var(--activeObjectBackground1),
    var(--activeObjectBackground2)
  );
}

.alertPurple::after {
  background-image: url(/img/alertShield.svg);
}

.alertGreen {
  animation-delay: 2.25s;
  left: 21rem;
  top: -6.5rem;
}

.alertGreen::before {
  background: linear-gradient(
    110deg,
    var(--greenTextColor),
    var(--blueTextColor)
  );
}

.alertGreen::after {
  background-image: url(/img/alertCheck.svg);
}

.alertRed {
  animation-delay: 2.75s;
  left: 19rem;
  top: 24rem;
}

.alertRed::before {
  background: linear-gradient(
    110deg,
    var(--primaryButtonBackground1),
    var(--primaryButtonBackground2)
  );
}

.alertRed::after {
  background-image: url(/img/alertBadge.svg);
}

@keyframes alertFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, -3rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.horseCircle {
  animation:
    fadeIn 0.5s ease-in-out 2.8s 1 forwards,
    bounce 2s ease-in-out 0s infinite alternate;
  height: 9rem;
  left: -8rem;
  opacity: 0;
  position: absolute;
  top: 11rem;
  width: 9rem;
}

.flagCircle {
  animation:
    fadeIn 0.5s ease-in-out 3s 1 forwards,
    bounce 2s ease-in-out 0.75s infinite alternate;
  height: 6rem;
  left: 9rem;
  opacity: 0;
  position: absolute;
  top: -11rem;
  width: 6rem;
}

.badgeCircle {
  animation:
    fadeIn 0.5s ease-in-out 3.2s 1 forwards,
    bounceWithRotation 2s ease-in-out 1.5s infinite alternate;
  height: 11.2rem;
  left: 29rem;
  opacity: 0;
  position: absolute;
  top: 9.5rem;
  transform: rotate(10deg) translate3d(0, 0, 0);
  width: 11.2rem;
}

@keyframes bounce {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 2.5rem, 0);
  }
}

@keyframes bounceWithRotation {
  from {
    transform: rotate(10deg) translate3d(0, 0, 0);
  }
  to {
    transform: rotate(10deg) translate3d(0, 2.5rem, 0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.classCardContainer {
  height: 44rem;
  position: relative;
  width: 40rem;
}

.animate .classCardContainer {
  animation:
    fadeOut 0.5s ease-in-out 6.5s 1 forwards,
    fadeIn 0.25s ease-in-out 7.25s 1 forwards;
}

.classCard {
  background: var(--secondaryBackground);
  border-radius: 3rem;
  display: flex;
  flex-direction: column;
  height: calc(100% - 4rem);
  padding: 2rem;
  position: absolute;
  row-gap: 2rem;
  width: calc(100% - 4rem);
}

.classCard::before {
  background: linear-gradient(
    110deg,
    var(--primaryButtonBackground1),
    var(--primaryButtonBackground2)
  );
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 3rem;
  padding: 0.2rem;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.classCardOutline {
  background: transparent;
  opacity: 0;
  transform: rotate(0deg);
  transform-origin: 50% 70%;
}

.animate .classCardOutline {
  animation:
    rotateOutline 0.45s ease-in-out 1s 1 forwards,
    rotateOutline 0.25s step-end 7s 1 forwards reverse;
}

.classCardOutline::before {
  background: linear-gradient(
    110deg,
    var(--activeObjectBackground1),
    var(--activeObjectBackground2)
  );
}

@keyframes rotateOutline {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  10% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: rotate(-10deg);
  }
}

.classHeader {
  align-items: center;
  column-gap: 2rem;
  display: flex;
  flex: 0;
  flex-direction: row;
  height: 2.8rem;
  justify-content: space-between;
}

.className {
  color: var(--primaryColor);
  font-size: 2.2rem;
  font-weight: 500;
}

.live {
  align-items: center;
  background-color: var(--redTextColor);
  border-radius: 0.8rem;
  color: var(--textOverColorColor);
  display: flex;
  font-size: 1.6rem;
  font-weight: 500;
  height: 2.8rem;
  padding: 0 0.6rem 0 calc(1.2rem + 0.6rem);
  position: relative;
}

.live::before {
  animation: slowBlink 4s ease-in-out 0s infinite forwards;
  background-color: var(--textOverColorColor);
  border-radius: 50%;
  content: '';
  height: 0.6rem;
  left: 0.7rem;
  opacity: 1;
  position: absolute;
  top: calc(1.4rem - 0.3rem);
  width: 0.6rem;
}

@keyframes slowBlink {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

.classBody {
  align-self: stretch;
  border-radius: 0.8rem;
  flex: 1;
  overflow: hidden;
}

.resultGrouping {
  font-size: 1.8rem;
  font-weight: 600;
  height: 2.2rem;
}

.resultGrouping.upcoming {
  color: var(--eventRunning);
}

.animate .resultGrouping.upcoming {
  animation:
    resultSlideDown 1s cubic-bezier(0.46, 0.45, 0.57, 0.93) 1.6s 1 forwards,
    resultSlideDown 0.25s step-end 7s 1 forwards reverse;
}

.resultGrouping.finished {
  color: var(--eventFinished);
  margin-top: 1.6rem;
}

.entry {
  align-items: center;
  background-color: var(--rootBackground);
  border-radius: 1.2rem;
  display: flex;
  height: 6rem;
  margin-top: 0.8rem;
  padding: 1.2rem;
}

.entrySpacer {
  background-color: transparent;
}

.animatedEntry {
  border: 0.1rem solid var(--rootBackground);
  position: absolute;
  left: 2rem;
  right: 2rem;
  top: 9rem;
}

.animate .animatedEntry {
  animation:
    entrySlideOut 0.35s cubic-bezier(0.79, 0.14, 0.15, 0.86) 1s 1 forwards,
    entrySlideDown 1s linear 1.6s 1 forwards,
    entrySlideIn 0.25s cubic-bezier(0.79, 0.14, 0.15, 0.86) 3s 1 forwards,
    entryBorderColor 2s ease-in-out 3.75s 1 forwards,
    entrySlideDown 0.25s step-end 7s 1 forwards reverse,
    entryBorderColor 0.25s step-end 7s 1 forwards reverse;
}

.animatedEntry .status {
  border: 0;
  position: relative;
  width: 8.5rem;
}

.animate .animatedEntry .status {
  animation:
    widthChange 0.5s ease-in-out 3s 1 forwards,
    widthChange 0.25s step-end 7s 1 forwards reverse;
}

.animatedEntry .ongoingStatus,
.animatedEntry .finishedStatus,
.animatedEntry .placedStatus {
  border: 0.1rem solid var(--subtleBorderColor);
  border-radius: 0.8rem;
  opacity: 0;
  padding: 0.4rem 0.8rem;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.animatedEntry .ongoingStatus {
  border: 0.1rem solid var(--eventRunning);
  opacity: 1;
}

.animate .animatedEntry .ongoingStatus {
  animation:
    fadeOut 0.5s ease-in-out 0.5s 1 forwards,
    fadeIn 0.25s step-end 7s 1 forwards;
}

.animatedEntry .finishedStatus {
  border: 0.1rem solid var(--eventFinished);
  color: var(--eventFinished);
}

.animate .animatedEntry .finishedStatus {
  animation:
    fadeIn 0.5s ease-in-out 0.5s 1 forwards,
    fadeOut 0.5s ease-in-out 3s 1 forwards;
}

.animatedEntry .placedStatus {
  border: 0.1rem solid var(--eventFinished);
}

.animate .animatedEntry .placedStatus {
  animation:
    fadeIn 0.5s ease-in-out 3s 1 forwards,
    fadeOut 0.25s step-end 7s 1 forwards;
}

@keyframes widthChange {
  0% {
    width: 8.5rem;
  }
  100% {
    width: 6.5rem;
  }
}

@keyframes entrySlideOut {
  0% {
    left: 2rem;
    right: 2rem;
  }
  100% {
    left: -3rem;
    right: 7rem;
  }
}

@keyframes entrySlideIn {
  0% {
    left: -3rem;
    right: 7rem;
  }
  100% {
    left: 2rem;
    right: 2rem;
  }
}

@keyframes entrySlideDown {
  0% {
    top: 9rem;
  }
  100% {
    top: 15rem;
  }
}

@keyframes entryBorderColor {
  0% {
    border-color: var(--rootBackground);
  }
  10% {
    border-color: var(--eventFinished);
  }
  90% {
    border-color: var(--eventFinished);
  }
  100% {
    border-color: var(--rootBackground);
  }
}

@keyframes resultSlideDown {
  0% {
    margin-top: 0;
  }
  100% {
    margin-top: -34.6rem;
  }
}

.horseHead {
  background: transparent url(/img/horseHead.svg) no-repeat center center;
  background-size: 4.6rem;
  border: 0.4rem solid var(--eventUpcoming);
  border-radius: 50%;
  flex: 0 0 5.2rem;
  height: 5.2rem;
  margin-inline-end: 1.6rem;
  width: 5.2rem;
}

@media (max-width: 375px) {
  .horseHead,
  .open {
    display: none;
  }
}

.ongoing .horseHead {
  border-color: var(--eventRunning);
}

.finished .horseHead {
  border-color: var(--eventFinished);
}

.animatedEntry .horseHead {
  border-color: var(--eventRunning);
}

.animate .animatedEntry .horseHead {
  animation:
    finishedBorderColor 0.5s ease-in-out 0.5s 1 forwards,
    finishedBorderColor 0.25s step-end 7s 1 forwards reverse;
}

@keyframes finishedBorderColor {
  0% {
    border-color: var(--eventRunning);
  }
  100% {
    border-color: var(--eventFinished);
  }
}

.participants {
  flex: 1;
  overflow: hidden;
}

.mount {
  color: var(--primaryColor);
  font-size: 2rem;
  font-weight: 600;
  white-space: nowrap;
}

.rider {
  color: var(--secondaryColor);
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 0.4rem;
  white-space: nowrap;
}

.status {
  align-self: center;
  border: 0.1rem solid var(--subtleBorderColor);
  border-radius: 0.8rem;
  color: var(--eventUpcoming);
  font-size: 1.8rem;
  font-weight: 400;
  padding: 0.4rem 0.8rem;
}

.ongoing .status,
.animatedEntry .ongoingStatus {
  color: var(--eventRunning);
}

.finished .status,
.animatedEntry .placedStatus {
  background: var(--eventFinished) url(/img/place.svg) no-repeat 0.4rem center;
  background-size: 1.8rem / auto;
  color: var(--textOverColorColor);
  font-weight: 500;
  padding-inline-start: 3rem;
}

.blurCard {
  backdrop-filter: blur(0.5rem);
  background-color: var(--backdrop);
  border-radius: 3rem;
  bottom: 0.2rem;
  left: 0.2rem;
  opacity: 0;
  position: absolute;
  right: 0.2rem;
  top: 0.2rem;
}

.animate .blurCard {
  animation:
    fadeIn 0.5s ease-in-out 3.65s 1 forwards,
    fadeOut 0.5s ease-in-out 5.5s 1 forwards;
}

.sprinkles {
  background: transparent url(/img/confetti.svg) no-repeat center center;
  background-size: 100%;
  height: 17.72%;
  width: 78.5%;
  opacity: 0;
  position: absolute;
  left: 11.25%;
  top: 36.81%;
}

.animate .sprinkles {
  animation: sprinklesEffect 2s ease-in-out 3.75s 1 forwards;
}

@keyframes sprinklesEffect {
  0% {
    opacity: 0;
    transform: scale(1) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: scale(1.6) rotate(1deg);
  }
  90% {
    opacity: 1;
    transform: scale(1.75) rotate(9deg);
  }
  100% {
    opacity: 0;
    transform: scale(1) rotate(10deg);
  }
}

.pedigreeSquare {
  background: var(--secondaryBackground) url(/img/horseHeadOutline.svg)
    no-repeat center center;
  background-size: 6rem 6rem;
  border-radius: 3rem;
  height: 10rem;
  position: relative;
  width: 10rem;
}

.pedigreeSquare::before {
  background: linear-gradient(
    90deg,
    var(--primaryButtonBackground1),
    var(--primaryButtonBackground2)
  );
  background-position-x: 0;
  background-size: 40rem;
  border-radius: 3rem;
  bottom: 0;
  content: '';
  inset: 0;
  left: 0;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  padding: 0.2rem;
  position: absolute;
  right: 0;
  top: 0;
}

.animate .pedigreeSquare::before {
  animation:
    fadeIn 0.25s ease-in-out 0s 1 forwards,
    fadeOut 0.25s step-start 2s 1 forwards;
}

.column2 .pedigreeSquare::before {
  background-position-x: -15rem;
}

.animate .column2 .pedigreeSquare::before {
  animation-delay: 0.5s, 2s;
}

.column3 .pedigreeSquare::before {
  background-position-x: -30rem;
}

.animate .column3 .pedigreeSquare::before {
  animation-delay: 1s, 2s;
}

.pedigreeContainer {
  position: relative;
}

.pedigree {
  align-items: stretch;
  display: flex;
  justify-content: space-between;
  width: 40rem;
}

.animate .pedigree {
  animation:
    fadeOut 0.25s ease-in-out 1.5s 1 forwards,
    fadeIn 0.25s ease-in-out 8.25s 1 forwards;
}

.pedigree .column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 10rem;
}

.pedigree .column2 {
  row-gap: 14rem;
}

.pedigree .column3 {
  row-gap: 2rem;
}

.pedigree .columnSeparator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  width: 5rem;
}

.pedigree .pedigreeLine {
  align-items: center;
  display: flex;
  height: 25rem;
  justify-content: flex-start;
  width: 5rem;
  position: relative;
}

.pedigree .pedigreeLineCover {
  position: absolute;
  top: 50%;
  left: 0;
  mask: linear-gradient(90deg, #0000 50%, #000 50%) border-box var(--mask, 100%)
    100% / 200% no-repeat;
  transform: translateY(-50%);
}

.animate .pedigree .pedigreeLineCover {
  animation:
    mask 0.25s ease-in-out 0.25s 1 forwards,
    mask 0.25s step-end 2s 1 forwards reverse;
}

.pedigree .columnSeparator2 {
  row-gap: 11rem;
}

.columnSeparator2 .pedigreeLine {
  height: 13rem;
}

.columnSeparator2 .pedigreeLineCover {
  mask: linear-gradient(90deg, #0000 50%, #000 50%) border-box var(--mask, 100%)
    100% / 200% no-repeat;
  transform: translateY(calc(-50% - 12rem));
}

.animate .columnSeparator2 .pedigreeLineCover {
  animation-delay: 0.75s, 2s;
}

@property --mask {
  syntax: '<percentage>';
  initial-value: 100%;
  inherits: false;
}

@keyframes mask {
  0% {
    --mask: 100%;
  }
  100% {
    --mask: 0%;
  }
}

.columnSeparator2 .pedigreeLineCover + .pedigreeLineCover {
  transform: translateY(calc(-50% + 12rem));
}

.pedigree .pedigreeLine::before {
  border: 0.2rem solid #e2684a;
  border-bottom-left-radius: 0.3rem;
  border-left-color: #e2664b;
  border-right: 0;
  border-top-left-radius: 0.3rem;
  bottom: 0.5rem;
  content: '';
  left: 50%;
  position: absolute;
  right: 0;
  top: 0.5rem;
}

.columnSeparator2 .pedigreeLine::before {
  border-color: #e58643;
  border-left-color: #e58443;
}

.pedigreeLineCover::before {
  border-color: var(--pedigreeLine) !important;
}

.pedigree .pedigreeLine::after {
  background-color: #e1634b;
  content: '';
  height: 0.2rem;
  left: 0;
  position: absolute;
  top: calc(50% - 0.1rem);
  width: 50%;
}

.columnSeparator2 .pedigreeLine::after {
  background-color: #e48244;
}

.pedigreeLineCover::after {
  background-color: var(--pedigreeLine) !important;
}

.pedigreeLineInner {
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-left: 0.8rem solid #f15346;
  height: 0;
  left: 0;
  top: calc(50% - 0.8rem);
  width: 0;
}

.columnSeparator2 .pedigreeLineInner {
  border-left-color: #f37737;
}

.pedigreeLineCover .pedigreeLineInner {
  border-left-color: var(--pedigreeLine) !important;
}

.pedigreeLineInner::before,
.pedigreeLineInner::after {
  border-top: 0.6rem solid transparent;
  border-bottom: 0.6rem solid transparent;
  border-right: 0.8rem solid #f15f41;
  content: '';
  height: 0;
  position: absolute;
  right: 0;
  width: 0;
}

.columnSeparator2 .pedigreeLineInner::before,
.columnSeparator2 .pedigreeLineInner::after {
  border-right-color: #f28331;
}

.pedigreeLineCover .pedigreeLineInner::before,
.pedigreeLineCover .pedigreeLineInner::after {
  border-right-color: var(--pedigreeLine) !important;
}

.pedigreeLineInner::before {
  top: 0;
}

.pedigreeLineInner::after {
  bottom: 0;
}

.animatedPedigreeContainer {
  height: 10rem;
  left: 30rem;
  position: absolute;
  top: 0;
  width: 10rem;
}

.animate .animatedPedigreeContainer {
  animation:
    moveOver 0.5s ease-in-out 2s 1 forwards,
    scaleUp 0.5s ease-in-out 2.625s 1 forwards,
    scaleUp 0.25s ease-in-out 7.5s 1 forwards reverse,
    moveOver 0.25s ease-in-out 7.875s 1 forwards reverse;
}

.animatedPedigree {
  background: var(--secondaryBackground) url(/img/horseHeadOutline.svg)
    no-repeat 2rem 2rem;
  background-size: 6rem 6rem;
  border-radius: 3rem;
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 1;
}

.animatedPedigree::before {
  background: linear-gradient(
    90deg,
    var(--primaryButtonBackground1),
    var(--primaryButtonBackground2)
  );
  background-position-x: -30rem;
  background-size: 40rem;
  border-radius: 3rem;
  bottom: 0;
  content: '';
  inset: 0;
  left: 0;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  padding: 0.2rem;
  position: absolute;
  right: 0;
  top: 0;
}

.animate .animatedPedigree::before {
  animation:
    fadeIn 0.25s ease-in-out 1s 1 forwards,
    backgroundGradientGrow 0.5s ease-in-out 2s 1 forwards,
    backgroundGradientGrow 0.25s ease-in-out 7.875s 1 forwards reverse,
    fadeOut 0.25s ease-in-out 8.25s 1 forwards;
}

@keyframes scaleUp {
  0% {
    height: 10rem;
    width: 10rem;
  }
  100% {
    height: 31rem;
    width: 40rem;
  }
}

@keyframes moveOver {
  0% {
    left: 30rem;
    top: 0;
  }
  100% {
    left: 0;
    top: 7.5rem;
  }
}

@keyframes backgroundGradientGrow {
  0% {
    background-position-x: -30rem;
  }
  100% {
    background-position-x: 0;
  }
}

.sireDetails {
  display: flex;
  flex-direction: column;
  height: calc(100% - 4rem);
  justify-content: flex-start;
  opacity: 0;
  overflow: hidden;
  padding: 2rem;
}

.animate .sireDetails {
  animation:
    fadeIn 0.25s ease-in-out 3.125s 1 forwards,
    fadeOut 0.3s ease-in-out 6.95s 1 forwards;
}

.sireName {
  font-size: 2.8rem;
  font-weight: 600;
  margin-inline-start: 7.2rem;
}

.sireBreed {
  background: linear-gradient(
    90deg,
    var(--primaryButtonBackground1),
    var(--primaryButtonBackground2)
  );
  background-clip: text;
  font-size: 2rem;
  font-weight: 500;
  margin-inline-start: 7.2rem;
  -webkit-text-fill-color: transparent;
}

.sireStats {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-top: 2rem;
  row-gap: 1.6rem;
}

.sireStat {
  background-size: 2.8rem 2.8rem;
  background-repeat: no-repeat;
  background-position: center center;
  border: 0.2rem solid var(--subtleBorderColor);
  border-radius: 1.2rem;
  height: 4.2rem;
  margin-inline-start: 1.1rem;
  opacity: 0;
  position: relative;
  width: 4.2rem;
}

.sireStat::before,
.sireStat::after {
  background: var(--loadingBackground);
  border-radius: 0.2rem;
  content: '';
  height: 0.8rem;
  left: calc(100% + 1.6rem);
  position: absolute;
  top: calc(50% - 1.2rem);
  width: 12rem;
}

.sireStat::after {
  top: calc(50% + 0.4rem);
  width: 27rem;
}

.sireStat.calendar {
  background-image: url(/img/calendar.svg);
}

.animate .sireStat.calendar {
  animation: fadeIn 0.25s ease-in-out 3.5s 1 forwards;
}

.sireStat.horseshoe {
  background-image: url(/img/horseshoe.svg);
}

.animate .sireStat.horseshoe {
  animation: fadeIn 0.25s ease-in-out 3.75s 1 forwards;
}

.sireStat.color {
  background-image: url(/img/colorVenn.svg);
}

.animate .sireStat.color {
  animation: fadeIn 0.25s ease-in-out 4s 1 forwards;
}

.particle {
  background-size: 3.6rem 3.6rem;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
  height: 6rem;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 6rem;
  z-index: 1;
}

.particle.shieldParticle {
  background-color: var(--purpleTintBackground);
  background-image: url(/img/shield.svg);
  transform: scale(0.5) rotate(-12deg);
}

.particle.pedigreeParticle {
  background-color: var(--blueTintBackground);
  background-image: url(/img/pedigree.svg);
  transform: scale(0.5) rotate(15deg);
}

.particle.badgeParticle {
  background-color: var(--yellowTintBackground);
  background-image: url(/img/badge.svg);
  transform: scale(0.5) rotate(-8deg);
}

.animate .particle.shieldParticle {
  animation:
    shieldParticlePrep 0.1s step-start 4s 1 forwards,
    shieldParticle 3s ease-in-out 4.25s 1 forwards,
    shieldParticlePrep 0.1s step-end 7.25s 1 forwards reverse;
}

.animate .particle.pedigreeParticle {
  animation:
    pedigreeParticlePrep 0.1s step-start 4s 1 forwards,
    pedigreeParticle 3s ease-in-out 4.25s 1 forwards,
    pedigreeParticlePrep 0.1s step-end 7.25s 1 forwards reverse;
}

.animate .particle.badgeParticle {
  animation:
    badgeParticlePrep 0.1s step-start 4s 1 forwards,
    badgeParticle 3s ease-in-out 4.25s 1 forwards,
    badgeParticlePrep 0.1s step-end 7.25s 1 forwards reverse;
}

@keyframes shieldParticlePrep {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: 3.6rem;
    top: 0;
  }
}

@keyframes shieldParticle {
  0% {
    left: 3.6rem;
    opacity: 0;
    top: 0;
    transform: scale(0.5) rotate(-12deg);
    z-index: 1;
  }
  10% {
    left: -3.6rem;
    opacity: 1;
    transform: scale(1) rotate(-12deg);
    top: -8rem;
    z-index: 1;
  }
  90% {
    left: -6.6rem;
    opacity: 1;
    top: -4rem;
    transform: scale(1) rotate(-12deg);
    z-index: 0;
  }
  100% {
    left: -0.5rem;
    opacity: 0;
    top: 5rem;
    transform: scale(0.5) rotate(-12deg);
    z-index: 0;
  }
}

@keyframes pedigreeParticlePrep {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: 32rem;
    top: 1.5rem;
  }
}

@keyframes pedigreeParticle {
  0% {
    left: 32rem;
    opacity: 0;
    top: 1.5rem;
    transform: scale(0.5) rotate(-12deg);
    z-index: 1;
  }
  10% {
    left: 34rem;
    opacity: 1;
    transform: scale(1) rotate(-12deg);
    top: -8.5rem;
    z-index: 1;
  }
  90% {
    left: 26rem;
    opacity: 1;
    top: -10rem;
    transform: scale(1) rotate(-12deg);
    z-index: 0;
  }
  100% {
    left: 17rem;
    opacity: 0;
    top: 0.5rem;
    transform: scale(0.5) rotate(-12deg);
    z-index: 0;
  }
}

@keyframes badgeParticlePrep {
  0% {
    left: 0;
    top: 0;
  }
  100% {
    left: 8rem;
    top: 25.5rem;
  }
}

@keyframes badgeParticle {
  0% {
    left: 8rem;
    opacity: 0;
    top: 25.5rem;
    transform: scale(0.5) rotate(-12deg);
    z-index: 1;
  }
  10% {
    left: 11rem;
    opacity: 1;
    transform: scale(1) rotate(-12deg);
    top: 32.5rem;
    z-index: 1;
  }
  90% {
    left: 20rem;
    opacity: 1;
    top: 33rem;
    transform: scale(1) rotate(-12deg);
    z-index: 0;
  }
  100% {
    left: 26rem;
    opacity: 0;
    top: 26.5rem;
    transform: scale(0.5) rotate(-12deg);
    z-index: 0;
  }
}

.timelineContainer {
  height: 40rem;
  mask: linear-gradient(90deg, #0000 0%, #000 9%, #000 91%, #0000 100%)
    border-box no-repeat;
  opacity: 0;
  overflow: hidden;
  padding: 5rem 0;
  position: relative;
  min-width: 48rem;
}

.animate .timelineContainer {
  animation: fadeIn 0.25s ease-in-out 0s 1 forwards;
}

.timelineContainerInner {
  height: 40rem;
  position: relative;
  width: 100%;
}

.animate .timelineContainerInner {
  animation:
    timelineSlide 0.75s ease-in-out 2.5s 1 forwards,
    fadeOut 0.25s ease-in-out 3.75s 1 forwards;
}

@keyframes timelineSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-13.5rem);
  }
}

.spineContainer {
  height: 1.8rem;
  position: absolute;
  top: calc(50% - 0.9rem);
  left: 0;
  right: 0;
}

.spine {
  height: 0.2rem;
  background-color: var(--secondaryColor);
  position: absolute;
  top: calc(50% - 0.1rem);
  width: 150%;
}

.spineColored .spine {
  background-image: linear-gradient(
    90deg,
    var(--primaryButtonBackground1) 0,
    var(--primaryButtonBackground2) 37.5rem,
    var(--secondaryColor) 37.5rem
  );
  width: 39.2rem;
}

.spineColored {
  mask: linear-gradient(90deg, #000 50%, #0000 50%) border-box var(--mask, 100%)
    100% / 200% no-repeat;
}

.animate .spineColored {
  animation: mask 1.5s linear 0.25s 1 forwards;
}

.timeline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.circles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.circle {
  background-color: var(--siteBackground);
  border: 0.2rem solid var(--secondaryColor);
  border-radius: 50%;
  height: 1.4rem;
  position: absolute;
  top: 0;
  width: 1.4rem;
}

.circle1 {
  left: 8.6rem;
}

.spineColored .circle1 {
  border-color: #f15346;
}

.circle2 {
  left: 18.2rem;
}

.spineColored .circle2 {
  border-color: #f36c3c;
}

.circle3 {
  left: 27.8rem;
}

.spineColored .circle3 {
  border-color: #f3842f;
}

.circle4 {
  left: 37.4rem;
}

.spineColored .circle4 {
  border-color: var(--primaryButtonBackground2);
}

.circle5 {
  left: 47rem;
}

.circle6 {
  left: 56.6rem;
}

.timeline .item {
  background-color: var(--secondaryColor);
  height: 10rem;
  left: 9.4rem;
  position: absolute;
  top: calc(50% + 0.9rem);
  width: 0.2rem;
}

.timeline .item:nth-child(even) {
  bottom: calc(50% + 0.9rem);
  top: auto;
}

.coloredFlagContainer {
  --mask: 0%;
  bottom: 50%;
  left: 35.2rem;
  mask: linear-gradient(0deg, #000 50%, #0000 50%) border-box 100%
    var(--mask, 0%) / 200% 200% no-repeat;
  position: absolute;
  top: 0;
  width: 6rem;
}

.animate .coloredFlagContainer {
  animation: maskReverse 0.5s linear 1.5s 1 forwards;
}

@keyframes maskReverse {
  0% {
    --mask: 0%;
  }
  100% {
    --mask: 100%;
  }
}

.coloredFlagContainer .verticalLine {
  background-image: linear-gradient(180deg, #f27735 0%, #f29920 100%);
  bottom: 0.9rem;
  height: 8rem;
  left: 3rem;
  position: absolute;
  width: 0.2rem;
}

.flag {
  background: url(/img/flag.svg) no-repeat center center;
  background-size: 6rem 6rem;
  border: 0.2rem solid var(--secondaryColor);
  border-radius: 50%;
  box-sizing: border-box;
  height: 6rem;
  left: -3rem;
  position: absolute;
  top: calc(50% + 3rem);
  width: 6rem;
}

.coloredFlagContainer .flag::before {
  background: linear-gradient(
    110deg,
    var(--primaryButtonBackground1),
    var(--primaryButtonBackground2)
  );
  content: '';
  position: absolute;
  inset: 0;
  left: -0.2rem;
  right: -0.2rem;
  top: -0.2rem;
  bottom: -0.2rem;
  border-radius: 3rem;
  padding: 0.2rem;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.coloredFlagContainer .flag {
  bottom: 8.9rem;
  left: 0;
  top: auto;
}

.item:nth-child(even) .flag {
  bottom: calc(50% + 3rem);
  top: auto;
}

.item .year {
  color: var(--secondaryColor);
  font-size: 2rem;
  font-weight: 400;
  left: 0;
  opacity: 0;
  position: absolute;
  top: calc(50% + 10rem);
  transform: translateX(-50%);
}

.animate .item .year {
  animation: fadeIn 0.5s ease-in-out 0.5s 1 forwards;
}

.item:nth-child(even) .year {
  bottom: calc(50% + 10rem);
  top: auto;
}

.timeline .item2 {
  left: 19rem;
}

.animate .item2 .year {
  animation-delay: 0.85s;
}

.timeline .item3 {
  left: 28.6rem;
}

.animate .item3 .year {
  animation-delay: 1.2s;
}

.timeline .item4 {
  left: 38.2rem;
}

.item4 .flag {
  box-shadow: rem rem 1.6rem rem rgba(242, 153, 31, 0);
}

.animate .item4 .flag {
  animation: boxShadowFadeIn 0.5s ease-in-out 1.75s 1 forwards;
}

@keyframes boxShadowFadeIn {
  0% {
    box-shadow: rem rem 1.6rem rem rgba(242, 153, 31, 0);
  }
  100% {
    box-shadow: rem rem 1.6rem rem rgba(242, 153, 31, 0.5);
  }
}

.item4 .year {
  color: var(--primaryColor);
  font-weight: 600;
}

.animate .item4 .year {
  animation-delay: 1.55s;
}

.timeline .item5 {
  left: 47.8rem;
}

.animate .item5 .year {
  animation-delay: 1.55s;
}

.timeline .item6 {
  left: 57.4rem;
}

.animate .item6 .year {
  animation-delay: 1.55s;
}

.animatedFlag {
  background: url(/img/flag.svg) no-repeat center center;
  background-size: 6rem 6rem;
  border-radius: 50%;
  height: 6rem;
  left: 21.7rem;
  opacity: 0;
  position: absolute;
  top: 10.1rem;
  width: 6rem;
}

.animate .animatedFlag {
  animation:
    fadeIn 0.1s step-start 3.5s 1 forwards,
    flagSlide 0.5s ease-in-out 4.25s 1 forwards,
    fadeOut 0.5s ease-in-out 5s 1 forwards;
}

.animatedFlag::before {
  background: linear-gradient(
    110deg,
    var(--primaryButtonBackground1),
    var(--primaryButtonBackground2)
  );
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  padding: 0.2rem;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

@keyframes flagSlide {
  0% {
    left: 21.7rem;
    top: 10.1rem;
  }
  100% {
    left: 8rem;
    top: 7rem;
  }
}

.showCardWrapper {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 5rem;
}

.animate .showCardWrapper {
  animation:
    fadeIn 0.5s ease-in-out 5s 1 forwards,
    fadeOut 0.5s ease-in-out 9.5s 1 forwards;
}

.showCard {
  background: var(--secondaryBackground) url(/img/flag.svg) no-repeat 2rem 2rem;
  background-size: 6rem 6rem;
  border-radius: 3.2rem;
  display: flex;
  flex-direction: column;
  height: 36rem;
  left: 6rem;
  padding: 2rem;
  position: absolute;
  row-gap: 2rem;
  top: 0;
  transform-origin: right bottom;
  width: 32rem;
}

.showCard::before,
.showCard::after {
  background: linear-gradient(
    110deg,
    var(--primaryButtonBackground1),
    var(--primaryButtonBackground2)
  );
  content: '';
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 3.2rem;
  padding: 0.2rem;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.showCard::after {
  background: linear-gradient(
    110deg,
    var(--activeObjectBackground1),
    var(--activeObjectBackground2)
  );
  opacity: 0;
}

.showCard0::after,
.showCard1::after,
.showCard2::after {
  opacity: 1;
}

.showCard0 {
  opacity: 0;
}

.animate .showCard0 {
  animation:
    fourToThree 0.75s ease-in-out 6.5s 1 forwards,
    swipeAwayLeast 0.5s ease-in-out 9.5s 1 forwards;
}

.animate .showCard1 {
  animation:
    twoToThree 0.25s ease-in-out 5.75s 1 forwards,
    threeToTwo 0.75s ease-in-out 6.5s 1 forwards,
    swipeAwayLess 0.5s ease-in-out 9.5s 1 forwards;
}

.animate .showCard2 {
  animation:
    twoToOne 0.75s ease-in-out 6.5s 1 forwards,
    swipeAway 0.5s ease-in-out 9.5s 1 forwards;
}

.animate .showCard2::after {
  animation: fadeOut 0.75s ease-in-out 6.5s 1 forwards;
}

.animate .showCard3 {
  animation:
    twoToOne 0.25s ease-in-out 5.75s 1 forwards,
    swipeAway 0.75s ease-in-out 6.5s 1 forwards,
    fadeOut 0.75s ease-in-out 6.5s 1 forwards;
}

@property --gradient1 {
  syntax: '<color>';
  initial-value: var(--activeObjectBackground1);
  inherits: false;
}

@property --gradient2 {
  syntax: '<color>';
  initial-value: var(--activeObjectBackground2);
  inherits: false;
}

@keyframes twoToOne {
  0% {
    left: 6rem;
    top: 0;
  }
  100% {
    left: 7.6rem;
    top: -1.6rem;
  }
}

@keyframes twoToOneGradient {
  0% {
    --gradient1: var(--activeObjectBackground1);
    --gradient2: var(--activeObjectBackground2);
  }
  100% {
    --gradient1: var(--primaryButtonBackground1);
    --gradient2: var(--primaryButtonBackground2);
  }
}

@keyframes twoToThree {
  0% {
    left: 6rem;
    top: 0;
  }
  100% {
    left: 4.4rem;
    top: 1.6rem;
  }
}

@keyframes threeToTwo {
  0% {
    left: 4.4rem;
    top: 1.6rem;
  }
  100% {
    left: 6rem;
    top: 0;
  }
}

@keyframes fourToThree {
  0% {
    left: 2.8rem;
    opacity: 0;
    top: 3.2rem;
  }
  100% {
    left: 4.4rem;
    opacity: 1;
    top: 1.6rem;
  }
}

@keyframes swipeAway {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  100% {
    transform: rotate(10deg) translate(12rem, 1rem);
  }
}

@keyframes swipeAwayLess {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  100% {
    transform: rotate(7.5deg) translate(10rem, 1rem);
  }
}

@keyframes swipeAwayLeast {
  0% {
    transform: rotate(0deg) translate(0, 0);
  }
  100% {
    transform: rotate(5deg) translate(8rem, 1rem);
  }
}

.showCardHeader {
  font-size: 2.4rem;
  font-weight: 600;
  padding-inline-start: 7.2rem;
}

.showCardBody {
  column-gap: 1.2rem;
  display: flex;
  flex: 1;
  flex-direction: row;
  overflow: hidden;
}

.classList {
  align-items: stretch;
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 0.8rem;
}

.animate .classList {
  animation: scrollClassList 1s ease-in-out 7.75s 1 forwards;
}

.scrollbar {
  align-self: stretch;
  background-color: var(--rootBackground);
  border-radius: 0.4rem;
  flex: 0 0 0.8rem;
  position: relative;
}

.scrollbar::before {
  background-color: var(--primaryColor);
  border-radius: 0.4rem;
  content: '';
  position: absolute;
  height: 10rem;
  left: 0;
  top: 0;
  width: 0.8rem;
}

.animate .scrollbar::before {
  animation: scrollTheBar 1s ease-in-out 7.75s 1 forwards;
}

@keyframes scrollClassList {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-21.8rem);
  }
}

@keyframes scrollTheBar {
  0% {
    top: 0;
  }
  100% {
    top: calc(100% - 10rem);
  }
}

.classItem {
  background: url(/img/trophy.svg) left 1.2rem bottom 1.2rem / 2.4rem 2.4rem
    no-repeat;
  border: 0.1rem solid var(--subtleBorderColor);
  border-radius: 1.6rem;
  color: var(--primaryColor);
  font-size: 1.6rem;
  font-weight: 600;
  flex: 0 0 5.1rem;
  padding: 1.2rem;
  position: relative;
}

.classItem::before,
.classItem::after {
  background-color: var(--loadingBackground);
  border-radius: 0.3rem;
  bottom: 1.2rem;
  content: '';
  height: 0.8rem;
  left: 4rem;
  position: absolute;
  right: 1.2rem;
}

.classItem::after {
  bottom: 2.4rem;
  right: calc(50% - 1.4rem);
}

.footer {
  background-image: linear-gradient(
    90deg,
    var(--activeObjectBackground1) 0%,
    var(--activeObjectBackground2) 100%
  );
  width: 100%;
}

.footerContainer {
  width: 120rem;
  margin: 0 auto;
  text-align: center;
}

.footerMessage {
  color: var(--primaryColor);
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 125%;
  margin: 0 auto;
  padding-top: 8rem;
}

.footerSubmessage {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 150%;
  padding-top: 1.2rem;
}

.footerAppLinks {
  align-items: center;
  column-gap: 4rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 2rem;
}

.appButton {
  background-color: var(--siteBackground);
  border-radius: 1.2rem;
  box-sizing: border-box;
  color: var(--primaryColor);
  display: none;
  font-size: 2.2rem;
  font-weight: 700;
  height: 6rem;
  padding: 1.2rem;
  width: -webkit-fill-available;
}

.appLink {
  height: 4rem;
  width: 12rem;
}

.google {
  width: 13.5rem;
}

.socialIconLink {
  display: inline-block;
  height: 2.4rem;
  margin-inline-start: 3.2rem;
  transition:
    transform 0.1s ease-in-out,
    opacity 0.1s ease-in-out;
  width: 2.4rem;
}

.socialIcon {
  height: 2.4rem;
  width: 2.4rem;
}

.socialIconLink:hover {
  text-decoration: none;
  transform: scale(1.1);
  /* opacity: 0.8; */
}

.footerButtons,
.footerLegal {
  align-items: center;
  cursor: default;
  display: flex;
  font-size: 2rem;
  font-weight: 400;
  justify-content: space-between;
  padding: 4rem 0;
}

.footerLegal {
  border-top: 0.1rem solid var(--whiteTintBackground);
}

.footerLinks {
  white-space: nowrap;
}

.pipe {
  padding: 0 1.2rem;
}

.contentHeader {
  align-items: center;
  column-gap: 6rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20rem;
  position: relative;
  width: 100%;
}

.termsBlur,
.privacyBlur,
.faqBlur {
  background: linear-gradient(
    96deg,
    var(--activeObjectBackground2) 0%,
    var(--activeObjectBackground1) 100%
  );
  border-radius: 40rem;
  filter: blur(15rem);
  height: 40rem;
  left: 72rem;
  opacity: 0.2;
  position: absolute;
  top: 8rem;
  width: 40rem;
}

.privacyBlur {
  background: linear-gradient(
    96deg,
    var(--blueTextColor) 0%,
    var(--greenTextColor) 100%
  );
}

.faqBlur {
  background: linear-gradient(
    96deg,
    var(--primaryButtonBackground1) 0%,
    var(--primaryButtonBackground2) 100%
  );
}

.contentTitle {
  color: var(--primaryColor);
  font-size: 5.6rem;
  font-weight: 700;
  line-height: 125%;
}

.contentSubheader {
  color: var(--secondaryColor);
  font-size: 2.4rem;
  font-weight: 500;
  margin-top: 2rem;
}

.headerIcon {
  height: 40rem;
  width: 40rem;
}

.mainSection {
  align-items: flex-start;
  display: flex;
  column-gap: 6rem;
  margin-top: 8rem;
}

.tableOfContents {
  background-color: var(--grayTintBackground);
  border: 0.1rem solid var(--whiteTintBackground);
  border-radius: 2.8rem;
  display: flex;
  flex-direction: column;
  flex: 0 0 32rem;
  list-style-position: inside;
  margin: 0;
  padding: 4rem;
  position: sticky;
  top: 12rem;
  row-gap: 3.2rem;
}

.tableOfContentsItem {
  font-size: 2rem;
  font-weight: 600;
  line-height: 150%;
  margin: 0;
  padding: 0;
}

.contentBody {
  display: flex;
  flex-direction: column;
  margin: 4rem 0;
  row-gap: 8rem;
}

.sectionBodyTitle {
  color: var(--purpleTextColor);
  font-size: 2.8rem;
  font-weight: 500;
  margin: 0;
  padding: 0;
  scroll-margin-top: 12rem;
}

.sectionBodyText {
  color: var(--primaryColor);
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 150%;
}

.faqSection {
  margin-bottom: 4rem;
  margin-top: 8rem;
}

.questionContainer {
  border-bottom: 0.1rem solid var(--subtleBorderColor);
  overflow: hidden;
  position: relative;
}

.questionLabel {
  align-items: center;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  padding: 4rem 5.6rem 4rem 0;
}

.question {
  color: var(--primaryColor);
  font-size: 2.8rem;
  font-weight: 500;
}

.questionCheckbox {
  appearance: none;
  background: url(/img/downCaret.svg) center center / 100% no-repeat;
  height: 4rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  scroll-margin-top: 12rem;
  top: 4rem;
  transition: transform 0.2s ease-in-out;
  width: 4rem;
}

.questionCheckbox:checked,
.questionCheckbox:target {
  outline: none;
  transform: rotate(180deg);
}

.answer {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 150%;
  height: 0;
  interpolate-size: allow-keywords;
  transition: height 0.2s ease-in-out;
}

.questionCheckbox:checked ~ .answer,
.questionCheckbox:target ~ .answer {
  height: fit-content;
  height: calc-size(fit-content, size);
}

.answer > p {
  margin: 0;
  padding: 0 0 1.6rem 0;
}

.reset {
  display: none;
  height: 12rem;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.questionCheckbox:target + .reset {
  display: block;
}

/* (1200 + 40) * 0.7 */
@media (width < 750px) {
  html,
  body {
    font-size: clamp(8px, 5px + 0.833vw, 10px);
    font-size: 10px;
  }

  .contentContainer,
  .frameHeader,
  .footerContainer {
    margin: 0 auto;
    padding: 0;
    width: calc(100% - 4rem);
  }

  .frameHeaderBackground,
  .frameHeader {
    height: 8.8rem;
  }

  .section {
    display: block;
    height: auto;
    margin: 0 auto;
    padding: 2rem 0 0;
    position: relative;
    width: 100%;
  }

  .blur,
  .privacyBlur,
  .termsBlur,
  .faqBlur,
  .headerIcon,
  .tableOfContents {
    display: none;
  }

  .textSide {
    flex-basis: 100%;
    margin-inline-end: 0;
  }

  .sectionReverse .textSide {
    margin-inline-start: 0;
  }

  .animationSide,
  .sectionReverse .animationSide {
    flex: 0 0 100%;
    justify-content: center;
  }

  .phoneAnimation {
    margin-top: 7rem;
    transform: scale(var(--scale-ratio, 0.75));
  }

  .classAnimation {
    margin-top: 2rem;
    --class-scale-ratio: calc(var(--scale-ratio, 0.75) * 0.9);
    transform: scale(var(--scale-ratio));
  }

  .pedigreeAnimation {
    margin-top: 2rem;
    transform: scale(var(--scale-ratio, 0.75));
  }

  .timelineAnimation {
    transform: scale(var(--scale-ratio, 0.75));
  }

  .defaultButton {
    font-size: 1.6rem;
    font-weight: 500;
    height: 2.4rem;
    margin-inline-start: 1.6rem;
    min-width: 8rem;
  }

  .logo,
  .logoLink {
    height: 3.4rem;
  }

  .faq {
    font-size: 1.6rem;
  }

  .textSide {
    font-size: clamp(8px, 0.8px + 2vw, 10px);
  }

  .h1 {
    /* font-size: clamp(8px, 5px + 0.833vw, 10px); */
    font-size: 3.6em;
    font-weight: 700;
    line-height: 133%;
  }

  .subtitle {
    font-size: 1.8em;
    font-weight: 400;
    line-height: 133%;
    margin-top: 1.6rem;
  }

  .sectionTitle {
    font-size: 1.8rem;
    font-weight: 500;
    line-height: normal;
  }

  .specialButton {
    border-radius: 1.2rem;
    font-size: 2.2rem;
    height: 3.6rem;
    margin-top: 2rem;
    width: calc(100% - 2.4rem);
  }

  .contentHeader {
    margin-top: 10.4rem;
  }

  .contentTitle {
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 133%;
  }

  .contentSubheader {
    color: var(--primaryColor);
    font-size: 1.8rem;
    font-weight: 500;
    line-height: normal;
  }

  .contentBody {
    row-gap: 4.6rem;
  }

  .mainSection {
    margin-top: 2.8rem;
  }

  .sectionBodyTitle {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 133%;
  }

  .sectionBodyText {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 133%;
  }

  .faqSection {
    margin-top: 4rem;
  }

  .questionLabel {
    padding: 2.4rem 4.8rem 2.4rem 0;
  }

  .question {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 133%;
  }

  .questionCheckbox {
    height: 3.2rem;
    top: 2.4rem;
    width: 3.2rem;
  }

  .footerMessage {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 133%;
    padding-top: 4rem;
  }

  .footerSubmessage {
    font-size: 1.8em;
    font-weight: 400;
    line-height: 133%;
  }

  .footerButtons {
    padding: 6rem 0 2rem;
  }

  .footerContainer .footerButtons:first-child {
    padding-top: 2rem;
  }

  .appButton {
    display: block;
  }

  .appLink {
    display: none;
  }

  .footerButtons > .logo {
    height: 2.8rem;
  }

  .socialIconLink {
    height: 2rem;
    margin-inline-start: 2rem;
  }

  .socialIcon {
    height: 2rem;
    width: 2rem;
  }

  .footerLegal {
    align-items: center;
    flex-direction: column-reverse;
    font-size: 1.6em;
    font-weight: 400;
    line-height: normal;
    padding: 2rem 0;
    row-gap: 2rem;
  }
}

@media (450px < width < 750px) {
  .animationSide {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .phoneAnimation {
    margin-top: 14rem;
    margin-bottom: 5rem;
  }

  .classAnimation {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}