@value (
  darkContentTextColor,
  lightContentTextColor
) from "pageflow-scrolled/values/colors.module.css";

.root {
  margin-top: 0.3em;
  margin-bottom: 0;
  padding-top: 0.45em;
}

.animation-fadeIn {
  --fade-in-duration: 2s;
  --fade-in-delay: 0.4s;
}

.animation-fadeInFast {
  composes: animation-fadeIn;
  --fade-in-duration: 1s;
  --fade-in-delay: 0.4s;
}

.animation-fadeInSlow {
  composes: animation-fadeIn;
  --fade-in-duration: 3s;
  --fade-in-delay: 0.8s;
}

.animation-fadeIn .main,
.animation-fadeIn .tagline,
.animation-fadeIn .subtitle {
  opacity: 0;
}

.animation-fadeIn.animating .main,
.animation-fadeIn.animating .tagline,
.animation-fadeIn.animating .subtitle {
  transition: opacity var(--fade-in-duration) ease;
  opacity: 1;
}

.animation-fadeIn.animating .subtitle {
  transition-delay: var(--fade-in-delay);
}

.animation-fadeIn.hasTagline.animating .main {
  transition-delay: var(--fade-in-delay);
}

.animation-fadeIn.hasTagline.animating .subtitle {
  transition-delay: calc(var(--fade-in-delay) * 2);
}

.main {
  margin: 0;
}

.tagline {
  margin-bottom: 0.8em;
}

.subtitle {
  margin-top: 0.6em;
  margin-bottom: 2em;
}

@media (max-width: 600px) {
  .tagline {
    margin-bottom: 0.4em;
  }

  .subtitle {
    margin-top: 0.4em;
  }
}

@media (min-width: 951px) {
  .right {
    text-align: right;
  }
}

.light {
  color: lightContentTextColor;
}

.dark {
  color: darkContentTextColor;
}

.centerRagged,
.center {
  text-align: center;
}

@media (orientation: landscape) {
  .forcePaddingTop {
    padding-top: var(--theme-first-heading-landscape-padding-top, 25%);
  }
}
