/* Лицо карты: устройство. Оформление — в card-styles.css.

   Карта — своя система координат: `container-type` делает её точкой
   отсчёта, и все размеры внутри (те же токены `--sp-*` и `--fs-*`)
   считаются от ширины самой карты, а не от ширины экрана. Поэтому
   одно лицо годится и на весь экран, и плиткой в списке — второй
   вёрстки для маленького размера не нужно.

   Пропорция банковской карты: фон шире по вертикали и обрезается
   по краям — это дешевле, чем карта в пол-экрана. */

.cardface {
  container-type: inline-size;
  position: relative;
  /* Пропорция банковской карты: 85,6 × 54 мм. Пластик в кармане
     именно такой, и предмет узнаётся раньше, чем прочитан. */
  aspect-ratio: 1.586;
  border: 1px solid var(--card-edge);
  border-radius: var(--r-lg);
  overflow: hidden;
  background-color: var(--card-back);
  background-size: cover;
  background-position: center;
  color: var(--card-ink);
  box-shadow: 0 var(--sp-2) var(--sp-6) var(--card-shadow);
}

/* Вуаль: фон живёт своей жизнью, а код и имя обязаны читаться на любом
   из восьми оформлений. Гасим левый верх и низ — там весь текст, — а
   правую половину с волной оставляем в силе. */
.cardface::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, var(--card-veil) 0%, transparent 55%),
    linear-gradient(0deg, var(--card-veil) 0%, transparent 45%);
}

/* Блик проходит слева направо и подолгу не возвращается: предмет
   с поверхностью, а не мигающая вывеска. Полоса шире карты и наклонена —
   так она читается как отсвет, а не как ползущий прямоугольник. */
.cardface::after {
  content: "";
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(105deg,
    transparent 42%, var(--card-shine) 50%, transparent 58%);
  animation: cardshine var(--shine) var(--ease) infinite;
  pointer-events: none;
}

@keyframes cardshine {
  0%        { transform: translateX(-55%); }
  55%, 100% { transform: translateX(55%); }
}

/* Кому движение мешает — тому его нет: блик здесь украшение,
   и без него карта остаётся картой. */
@media (prefers-reduced-motion: reduce) {
  .cardface::after { animation: none; }
}

.cardface__in {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
}

.cardface__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

.cardface__who {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.cardface__markbox {
  position: relative;
  flex: none;
}

.cardface__mark {
  display: grid;
  place-items: center;
  /* Крупнее шкалы: знак компании — то, по чему карту узнают
     с расстояния вытянутой руки, и мельче он не читается. */
  width: 16cqw;
  height: 16cqw;
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background-color: var(--card-plate);
  background-size: cover;
  background-position: center;
  font-size: var(--fs-lg);
  font-weight: 700;
}

.cardface__mark .icon { width: var(--fs-md); height: var(--fs-md); }

.cardface__whobody { min-width: 0; }

.cardface__label {
  font-size: var(--fs-xs);
  color: var(--card-dim);
}

.cardface__label--accent { color: var(--card-accent); }

.cardface__name {
  margin-top: var(--sp-1);
  font-size: var(--fs-xl);
  font-weight: 750;
  letter-spacing: -.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardface__craft {
  font-size: var(--fs-xs);
  color: var(--card-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Скидка — самое крупное число на карте, но тонким начертанием:
   она сообщает, а не кричит. */
.cardface__rate {
  flex: none;
  text-align: right;
}

.cardface__value {
  margin-top: var(--sp-1);
  font-size: var(--fs-2xl);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.03em;
}

/* Смена оформления — шестерёнкой в углу знака компании: вид карты
   принадлежит ей, и кнопка сидит на её лице, а не поверх кода
   или узора, где свободного места нет вовсе. */
.cardface__look {
  position: absolute;
  right: calc(var(--sp-1) * -1);
  bottom: calc(var(--sp-1) * -1);
  display: grid;
  place-items: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border: 1px solid var(--card-edge);
  border-radius: 50%;
  background: var(--card-plate);
  color: var(--card-ink);
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}

.cardface__look .icon { width: var(--fs-xs); height: var(--fs-xs); }

.cardface__look:active { background: var(--card-veil); }

@media (hover: hover) {
  .cardface__look:hover { background: var(--card-veil); }
}