/* Legacy-parity text rendering (see CardRevealOld.css). */
:host,
div.card-reveal-card-old {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
}

/* ------------------------------------------------------------------ *
 * Semantic port of creditas-site/src/sections/CardReveal/styles.js
 * (Card, CardCategory, CardImageContainer, CardImage, CardTitle,
 *  Content, CardDescription). Tokens resolved to concrete values.
 *
 * Class naming: single-class, no BEM `__` separator; element rules nested
 * under `.card-reveal-card-old`. The section-level title/description in the
 * parent are scoped with `> ` so they don't clash with this card's `.title`
 * and `.description`.
 * ------------------------------------------------------------------ */

/* Card root — also the stable class the list rail's sibling-shrink targets. */
.card-reveal-card-old {
  position: relative;
  display: block;
  width: 100%;
  max-width: 362px;
  flex: 0 0 90%;
  border-radius: 24px;
  text-align: center;
  /* Sibling-shrink: the rail sets `--card-target-scale` on hover/focus; it
   * inherits across the shadow/slot boundary. The hovered/focused card resets
   * it to 1 on itself below. */
  scale: var(--card-target-scale, 1);
  transition: scale 0.3s ease;

  /* Hovered/focused card cancels the inherited shrink by resetting the VARIABLE
   * (not `scale` directly) so `scale: var(--card-target-scale)` stays the single
   * source of the animated value. */
  &:hover,
  &:focus-within {
    --card-target-scale: 1;
  }

  &:hover .image,
  &:focus-within .image {
    filter: blur(0px) brightness(80%);
  }

  /* CardCategory */
  .category {
    position: absolute;
    top: 29px;
    left: 29px;
    z-index: 99;
  }

  /* CardImageContainer */
  .image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 24px;

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      bottom: 0;
      top: auto;
      height: 20%;
      scale: 1.2;
      background-color: #292929; /* colors.neutral.100 */
      filter: blur(20px);
      opacity: 0.25;
    }
  }

  /* CardImage */
  .image {
    width: 100%;
    height: clamp(260px, 50vh + 0.1rem, 438px);
    object-fit: cover;
    transform: scale(1.1);
    will-change: filter;
    filter: brightness(0.75);

    @media (pointer: fine) {
      filter: blur(5px) brightness(0.75);
    }
  }

  /* CardTitle — Typography headingLgRegular */
  .title {
    position: absolute;
    bottom: 20px;
    z-index: 999;
    margin: 0;
    padding-inline: 30px 50px;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.5px;
    text-align: left;
    color: #ffffff;
  }

  .title-icon {
    position: absolute;
    right: 20px;
    bottom: 5px;
    width: 25px;
    height: 25px;
  }

  /* Content */
  .content {
    position: relative;
    z-index: 9;
    color: #000000;
  }

  /* CardDescription — Typography bodySmRegular */
  .description {
    margin: 1rem 0;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: inherit;
    /* EXIT (hover → out): fade opacity out first (120ms) and delay the
     * slide/scale until after it's faded (120ms), so the text never lingers
     * over the image on the way out. Previously this was `opacity 0.5s` with
     * NO translate transition, so on exit the text snapped up over the image
     * and stayed visible for the 0.5s fade — the overlap. ENTER timing is set
     * on the :hover rule below. */
    transition: opacity 120ms ease, translate 250ms ease 120ms,
      scale 250ms ease 120ms;
    text-align: left;

    @media (pointer: fine) {
      opacity: 0;
      scale: 0.7;
    }
  }

  /* Category pill (kept: old @creditas-ui Tag internals not in source) */
  .pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 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;
  }

  /* CTA (kept: old ButtonCta variant not unambiguously in source) */
  .cta-old {
    display: block;
    align-items: center;
    justify-content: flex-start;
    margin-top: 8px;
    padding: 12px 20px;
    background: #8edb00;
    color: #292929;
    border: 0;
    border-radius: 8px;
    text-align: left;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
    cursor: pointer;

    &:hover {
      box-shadow: 0px 16px 12px -8px rgba(0, 0, 0, 0.16),
        0px 16px 8px -12px rgba(0, 0, 0, 0.12);
    }

    &:focus {
      box-shadow: 0px 16px 12px -8px rgba(0, 0, 0, 0.16),
        0px 16px 8px -12px rgba(0, 0, 0, 0.12);
      outline: 0;
    }
  }
}

/* Hover-reveal choreography (fine pointers only): description/CTA start
 * translated up, the CTA also scaled down + hidden, and reveal on hover.
 * Tag-based (p / a / button) so it's independent of the element classes. */
@media (pointer: fine) {
  /* Resting state = the EXIT transition (hover → out): fade opacity out first
   * (120ms) and delay the upward slide/scale until after it's faded (120ms),
   * so the text doesn't overlap the image on the way out. */
  .card-reveal-card-old p,
  .card-reveal-card-old a,
  .card-reveal-card-old button {
    translate: 0 -100%;
    transition: opacity 120ms ease, translate 250ms ease 120ms,
      scale 250ms ease 120ms;
  }

  .card-reveal-card-old a,
  .card-reveal-card-old button {
    scale: 0.8;
    opacity: 0;
  }

  /* ENTER (out → hover): smooth simultaneous 250ms reveal; CTA staggered
   * 100ms after the description. Higher specificity than the base rules above
   * so it wins for the hover direction. */
  .card-reveal-card-old:hover .description,
  .card-reveal-card-old:focus-within .description {
    transition: translate 250ms ease, opacity 250ms ease, scale 250ms ease;
  }

  .card-reveal-card-old:hover a,
  .card-reveal-card-old:hover button,
  .card-reveal-card-old:focus-within a,
  .card-reveal-card-old:focus-within button {
    transition: translate 250ms ease 100ms, opacity 250ms ease 100ms,
      scale 250ms ease 100ms;
  }
}

.card-reveal-card-old:hover p,
.card-reveal-card-old:hover a,
.card-reveal-card-old:hover button,
.card-reveal-card-old:focus-within p,
.card-reveal-card-old:focus-within a,
.card-reveal-card-old:focus-within button {
  translate: 0;
  opacity: 1;
  scale: 1;
}