html:not(.is-ready) body {
  opacity: 0;
}

html.is-ready body {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    transition: opacity 0.25s ease;
  }
}

.card {
  display: flex;
  flex-direction: column;
  min-height: 100svh;

  @media (width >= 768px) {
    flex-direction: row-reverse;
    align-items: stretch;
    height: 100svh;
    max-height: 100svh;
    overflow: hidden;
  }
}

.card__photo {
  flex-shrink: 0;

  @media (width >= 768px) {
    flex: 0 0 42%;
    max-width: 42%;
    align-self: flex-start;
    height: 100svh;
    max-height: 100svh;
  }

  & figure {
    margin: 0;

    @media (width < 768px) {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        inset: auto 0 0;
        height: min(28%, 5em);
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(var(--ids__background-RGB), 1)
        );
      }
    }

    @media (width >= 768px) {
      height: 100%;
    }
  }

  & img {
    display: block;
    width: 100%;
    height: auto;

    @media (width >= 768px) {
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }
  }
}

.card__narrative {
  overflow-x: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--ids__density) * 0.5em) calc(var(--ids__density) * 0.75em)
    calc(var(--ids__density) * 1.5em);

  @media (width >= 768px) {
    min-height: 0;
    overflow-y: auto;
    padding: calc(var(--ids__density) * 2em) calc(var(--ids__density) * 2.5em);
  }

  & .card__content {
    container-type: inline-size;
    width: 100%;
    max-width: 36em;
    margin: 0 auto;

    @media (width >= 768px) {
      margin-block: auto;
      margin-inline: 0;
      max-width: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      opacity: 0;
      transform: translateY(1.25em);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.is-ready .card__content {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 0.6s ease-out,
      transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-ready .card__content {
    opacity: 1;
    transform: none;
  }
}

.card__content {
  & p:has(+ .card__list) {
    margin-bottom: calc(var(--ids__density) * 0.2em);
  }

  & .card__list {
    margin-top: 0;

    & li {
      margin-bottom: calc(var(--ids__density) * 0.2em);
      padding-left: calc(var(--ids__density) * 1.125em);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.card__hint {
  position: relative;
  top: -0.2em; /* оптическая подгонка к строке; крути ±0.02em */
  display: inline-block;
  margin-left: 0.12em;
  vertical-align: baseline;
  line-height: 0;
  white-space: nowrap;
}

.card__hint-trigger {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(var(--ids__text-RGB), 0.15);
  color: inherit;
  font-family: inherit;
  font-size: 0.62em;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.card__hint-popup {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 0.4em);
  transform: translateX(calc(-50% + var(--popup-shift, 0px)));
  width: max(14em, 16em);
  max-width: min(20em, calc(100vw - 2em));
  padding: calc(var(--ids__density) * 0.45em) calc(var(--ids__density) * 0.55em);
  border: 1px solid rgba(var(--ids__text-RGB), 0.2);
  border-radius: 0.35em;
  background: rgba(var(--ids__surface-RGB), 1);
  color: rgba(var(--ids__text-RGB), 1);
  font-size: 0.85em;
  line-height: var(--ids__density);
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (hover: hover) {
  .card__hint:hover .card__hint-popup,
  .card__hint:focus-within .card__hint-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.card__hint.is-open .card__hint-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.card__signature {
  display: block;
  height: 4em;
  width: auto;
  margin-inline: auto;
}

#countdown {
  width: 100%;
  max-width: 100%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-size: min(8em, 20cqi);
}

@media (width >= 768px) {
  #countdown {
    width: auto;
    max-width: none;
    font-size: 8em;
  }
}