/* Карта Атласа — отдельным файлом: её подключают кабинет, лендинг и галерея,
   а лендинг не тянет весь components.css с его кнопками. Нужен tokens.css. */
/* ── Карта Атласа: карта как предмет ──
   Пропорции ISO 7810 (85,6 × 54 мм), размеры внутри — от ширины карты (cqw), поэтому
   одна и та же разметка годится и для плашки в кабинете, и для большой карты на лендинге.
   Цвет — по тарифу, только из палитры: подписки — лайм, путешествия — бумага,
   премиум — графит с лаймом. Фирменный знак — точка после «Атлас» и крупный круг-«точка»
   в углу. Логотип платёжной системы не рисуем, пока BIN не подтверждён письменно.
   Наклон и блик двигает /ui/acard.js; без него карта просто лежит ровно. */
.acard {
  --acard-bg: var(--ink);
  --acard-ink: #fff;
  --acard-sub: var(--card-ink);
  --acard-dot: var(--lime);
  --acard-orb: var(--orb-lime);
  position: relative; width: 100%; max-width: 380px; aspect-ratio: 85.6 / 54;
  container-type: inline-size;
  /* Скругление ISO: 3,18 мм на 85,6 × 54 мм. Процентами от самой карты: единицы cqw на
     контейнере считаются от окна, и на широком экране карта превращалась в «стикер». */
  border-radius: 3.7% / 5.9%;
  background: var(--acard-bg); color: var(--acard-ink);
  overflow: hidden; isolation: isolate;
  box-shadow: var(--card-shadow);
  transform: perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  user-select: none;
}
.acard.is-tilting { transition: transform 0.08s linear; }
/* Круг-«точка» в правом верхнем углу — продолжение знака «Атлас.» */
.acard::before {
  content: ""; position: absolute; z-index: -1;
  width: 78cqw; aspect-ratio: 1; right: -30cqw; top: -38cqw; border-radius: 50%;
  background: var(--acard-orb);
}
/* Блик: следует за пальцем или курсором */
.acard::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(70cqw 70cqw at var(--glare-x, 20%) var(--glare-y, 0%), var(--sheen), transparent 60%),
    linear-gradient(115deg, var(--sheen-soft), transparent 40%);
  mix-blend-mode: soft-light;
}
.acard-top { position: absolute; left: 7cqw; right: 7cqw; top: 6.5cqw; display: flex; justify-content: space-between; align-items: center; }
.acard-tariff { font-size: 3.6cqw; font-weight: var(--w-semi); letter-spacing: 0.02em; color: var(--acard-sub); }
/* Бесконтактная оплата: три дуги, вырезанные сектором из колец */
.acard-nfc {
  width: 6.5cqw; aspect-ratio: 1; color: var(--acard-ink); opacity: 0.85;
  background: radial-gradient(circle at 0 50%,
    transparent 0 22%, currentColor 22% 30%, transparent 30% 48%,
    currentColor 48% 56%, transparent 56% 74%, currentColor 74% 82%, transparent 82%);
  -webkit-mask: conic-gradient(from 45deg at 0 50%, #000 0 90deg, transparent 90deg);
  mask: conic-gradient(from 45deg at 0 50%, #000 0 90deg, transparent 90deg);
}
.acard-chip {
  position: absolute; left: 7cqw; top: 22cqw; width: 12.5cqw; aspect-ratio: 1.3; border-radius: 2cqw;
  background:
    linear-gradient(90deg, transparent 32%, var(--orb-dark) 32% 35%, transparent 35% 65%, var(--orb-dark) 65% 68%, transparent 68%),
    linear-gradient(0deg, transparent 30%, var(--orb-dark) 30% 34%, transparent 34% 66%, var(--orb-dark) 66% 70%, transparent 70%),
    linear-gradient(135deg, var(--metal-hi), var(--metal-lo) 55%, var(--metal-hi));
}
.acard-pan { position: absolute; right: 7cqw; top: 25.5cqw; font: var(--w-semi) 4.2cqw/1 var(--font-mono); letter-spacing: 0.08em; color: var(--acard-sub); }
.acard-mark {
  position: absolute; left: 6.2cqw; bottom: 4.2cqw; margin: 0;
  /* Вариант B (выбор владельца 18.09.2026): чуть меньше и тоньше, чтобы знак не спорил
     со знаком платёжной системы. Было 800 и 17 % ширины карты. */
  font-size: 15cqw; line-height: 0.9; font-weight: var(--w-bold); letter-spacing: -0.045em;
}
.acard-mark::after { content: "."; color: var(--acard-dot); }
.acard-meta { position: absolute; right: 7cqw; top: 32cqw; text-align: right; font-size: 3.4cqw; line-height: 1.35; color: var(--acard-sub); }
/* Платёжная система — только по подтверждённому BIN (настройка issuer.<код>.network).
   Цвета — по брендбуку Visa (18.09.2026): на светлых картах только Visa Blue, на тёмной —
   только белый; знак целиком виден и не перекрыт. Знак Visa — официальный файл
   (web/ui/brand/visa.svg) маской: один файл, цвет задаёт фон элемента. Текст «VISA»
   остаётся в разметке для экранных дикторов, но не рисуется. */
.acard-net { position: absolute; right: 7cqw; bottom: 6.5cqw; font-size: 9.5cqw; line-height: 1; font-weight: var(--w-heavy); font-style: italic; letter-spacing: -0.02em; }
.acard-net--visa {
  width: 17cqw; aspect-ratio: 1000 / 324.68; bottom: 7.5cqw; font-size: 0;
  background: var(--visa-blue);
  -webkit-mask: url("/ui/brand/visa.svg") center / contain no-repeat;
  mask: url("/ui/brand/visa.svg") center / contain no-repeat;
}
.acard--premium .acard-net--visa { background: #fff; }
.acard-net--mastercard { font-size: 4.4cqw; font-style: normal; letter-spacing: 0; }

.acard--subscriptions { --acard-bg: var(--lime); --acard-ink: var(--lime-ink); --acard-sub: var(--lime-ink); --acard-dot: var(--ink); --acard-orb: var(--orb-dark); }
.acard--travel { --acard-bg: var(--paper); --acard-ink: var(--ink); --acard-sub: var(--ink-2); --acard-dot: var(--lime-text); --acard-orb: var(--orb-lime); }
.acard--premium { --acard-bg: linear-gradient(150deg, var(--graphite), var(--ink) 60%); --acard-orb: var(--sheen-soft); }
/* Лаймовая заливка на чёрном даёт мутный оливковый — у премиума круг только контуром. */
.acard--premium::before { box-shadow: inset 0 0 0 1.5px var(--orb-lime); }
.acard--premium .acard-mark { color: #fff; }
.acard--premium { outline: 1px solid var(--orb-lime); outline-offset: -1px; }

/* Выпуск идёт: карта уже есть, но ещё «проявляется» */
.acard--issuing .acard-mark, .acard--issuing .acard-chip { opacity: 0.55; }
.acard--issuing::after {
  background: linear-gradient(100deg, transparent 30%, var(--sheen) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: acard-shine 1.8s ease-in-out infinite;
}
@keyframes acard-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* Витрина: три карты веером, как на лендинге */
.acard-fan { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1.15; margin: 0 auto; }
.acard-fan .acard { position: absolute; width: 72%; max-width: none; }
/* Раскладка подобрана так, чтобы у каждой карты читались тариф и знак «Атлас.». */
.acard-fan .acard:nth-child(1) { left: 0; top: 26%; rotate: -13deg; animation: acard-float 7s ease-in-out infinite; }
.acard-fan .acard:nth-child(2) { left: 27%; top: 2%; rotate: 9deg; animation: acard-float 7s ease-in-out -2.3s infinite; }
.acard-fan .acard:nth-child(3) { left: 21%; top: 50%; rotate: -4deg; animation: acard-float 7s ease-in-out -4.6s infinite; z-index: 1; }
@keyframes acard-float { 50% { translate: 0 -10px; } }

@media (prefers-reduced-motion: reduce) {
  .acard, .acard.is-tilting { transition: none; transform: none; }
  .acard--issuing::after, .acard-fan .acard { animation: none; }
}
.acard--closed { filter: grayscale(1); opacity: 0.45; box-shadow: none; }