@import url("tokens/fonts.css");
@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/borders.css");
@import url("tokens/motion.css");

section[data-hero] .hero-label,
section[data-hero] .hero-sub {
  color: var(--purple);
}
section[data-hero] .hero-rule {
  background: var(--purple);
}

@media (min-width: 901px) {
  section[data-hero="light"] > [data-hero-scrim],
  section[data-hero="about"] > [data-hero-scrim] {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(max(0px, (100vw - 1320px) / 2) + clamp(20px, 5vw, 64px) + 620px);
    background: linear-gradient(
      to right,
      color-mix(in srgb, var(--almost-white) 72%, transparent) 0,
      color-mix(in srgb, var(--almost-white) 58%, transparent) calc(100% - 72px),
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  section[data-hero="credentials"] > [data-hero-scrim] {
    position: absolute;
    inset: 0 0 0 auto;
    width: calc(max(0px, (100vw - 1180px) / 2) + min(590px, 50vw) + 24px);
    background: linear-gradient(
      to left,
      color-mix(in srgb, var(--almost-white) 78%, transparent) 0,
      color-mix(in srgb, var(--almost-white) 64%, transparent) calc(100% - 80px),
      transparent 100%
    );
    pointer-events: none;
    z-index: 1;
  }
  section[data-hero="light"] > div,
  section[data-hero="about"] > div,
  section[data-hero="credentials"] > div {
    z-index: 2;
  }
  section[data-hero="light"] .hero-label {
    color: var(--almost-black);
  }
  section[data-hero="light"] .hero-rule {
    background: var(--almost-black);
  }
}

@media (max-width: 900px) {
  br.hero-break {
    display: none;
  }
  section[data-hero] > [data-hero-scrim] {
    display: none;
  }
}

@media (max-width: 900px) {
  section[data-hero] {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    align-items: stretch !important;
  }
  section[data-hero] > img {
    position: relative !important;
    inset: auto !important;
    order: 2;
    width: 100% !important;
    height: 56vw !important;
    min-height: 240px;
    max-height: 520px;
    object-fit: cover;
  }
  section[data-hero] > div {
    position: relative !important;
    order: 1;
  }
  section[data-hero="credentials"] > div > div:empty {
    display: none;
  }
}