/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * RevealImageText — section with a background image and an overlay
 * text block (category pill + headline + description + button). The
 * image expands its `max-width` from a narrow start to a wider end as
 * the user scrolls past it, and the text fades in late.
 *
 * Both animations are driven by `animation-timeline: view()` — modern
 * Chrome/Edge/Safari support them natively; older browsers degrade to
 * the static "end" state (animation just doesn't run; visual is the
 * fully-revealed layout).
 *
 * `prefers-reduced-motion` users see the final state immediately.
 *
 * Token values inlined from @creditas-ui/themes standard:
 *
 *   colors.neutral.0   = #ffffff
 *   colors.neutral.80  = #3b4540
 *   colors.neutral.90  = #292929
 *
 *   breakpoints.2xl    = 600px
 *   breakpoints.7xl    = 1366px
 *
 *   typography.heading.xl → 40px / 52px / 0.5px / Maison Neue Extended / 400
 *   typography.body.xl    → 20px / 28px / 0.5px / Helvetica Now Display / 400
 *
 *   fadedBrightnessAmount = 0.75
 */

.reveal-image-text,
.reveal-image-text *,
.reveal-image-text *::before,
.reveal-image-text *::after {
  box-sizing: border-box;
}

/* ----- keyframes ------------------------------------------------- */

@keyframes reveal-image-text-reveal {
  0% {
    max-width: var(--reveal-width-start);
  }
  100% {
    max-width: var(--reveal-width-end);
  }
}

@keyframes reveal-image-text-text-entrance {
  0%,
  60% {
    opacity: 0;
  }
  70%,
  100% {
    opacity: 1;
  }
}

.reveal-image-text {
  position: relative;
  height: calc(635px + 2rem);
  contain: layout;
  /* Changed from white (#ffffff) → beige (#e9e9e1) to match the
   * surrounding CardReveal / BlogList sections. White made this section
   * read as a "page break" between two beige sections; beige restores
   * the color rhythm while the rounded image card inside continues to
   * provide the visual focal point. Must stay opaque so the
   * SimpleImagePlusText sticky-pin (z-index: -1) is correctly painted
   * over when it scrolls past. */
  background-color: #e9e9e1;
  padding: 2rem 0;
  width: auto;
  margin: 2rem auto 0;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  /* ----- background image ------------------------------------------ */

  .image {
    position: absolute;
    left: 50%;
    top: 2rem;
    height: calc(100% - 4rem);
    width: 1316px;
    max-width: var(--reveal-width-end, 95%);
    object-fit: cover;
    object-position: center;
    transform: translateX(-50%);
    z-index: 0;
    border-radius: 20px;
    filter: brightness(0.75);
    pointer-events: none;

    /* mobile/tablet: 70% → 95% */
    --reveal-width-start: 70%;
    --reveal-width-end: 95%;

    /* 1366px+: fixed-pixel reveal width range */
    @media (min-width: 1366px) {
      --reveal-width-start: 612px;
      --reveal-width-end: 1316px;
    }

    @supports (animation-timeline: view()) {
      animation: reveal-image-text-reveal both;
      animation-range: cover contain;
      animation-timeline: view();

      @media (min-width: 1366px) {
        animation-range: cover 20% contain 20%;
      }
    }
  }

  /* ----- content container ---------------------------------------- */

  .container {
    position: relative;
    z-index: 1;
    max-width: 1388px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 1rem;

    @media (min-width: 600px) {
      padding-inline: 2rem;
    }
  }

  /* ----- text block ----------------------------------------------- */

  .text {
    display: inline-flex;
    flex-flow: column;
    gap: 1.5rem;
    color: #ffffff;
    height: 635px;
    justify-content: center;
    align-items: flex-start;
    padding-inline: 1rem;

    @media (min-width: 600px) {
      width: 620px;
      padding-inline: 5rem;
    }

    @supports (animation-timeline: view()) {
      animation: reveal-image-text-text-entrance both;
      animation-range: cover contain;
      animation-timeline: view();
    }
  }

  /* ----- pill ----------------------------------------------------- */

  .pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: transparent;
    backdrop-filter: blur(10px);
    border: 1px solid #ffffff;
    border-radius: 500px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.3px;
  }

  /* ----- title ---------------------------------------------------- */

  .title {
    margin: 0;
    color: #ffffff;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 400;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: 0.5px;
  }

  /* ----- description --------------------------------------------- */

  .description {
    margin: 0;
    color: #ffffff;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
  }

  /* ----- button with arrow --------------------------------------- */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    background-color: #292929;
    color: #ffffff;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #3b4540;
    }

    &:focus-visible {
      outline: 2px solid #8edb00;
      outline-offset: 2px;
    }
  }

  .button-icon {
    width: 20px;
    height: 20px;
  }

  /* ----- reduced motion ------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    .image,
    .text {
      animation: none;
    }
    .image {
      max-width: var(--reveal-width-end);
    }
  }
}