/* ============================================================================
   Модуль 2 — Экран «Активация карты» (page-activation).
   Центрированный флоу max-width 560px, 3 шага. Значения — дословно из макета
   CardActivation.dc.html (инлайн-px, не токены). Грузится только на /activate-card/
   (зависимость ibd-m2-base). Container-driven брейкпоинт @container (max-width:480px).
   ========================================================================== */

/* ── Корневой слой флоу (фон/шрифт/container-context) ── */
.actpage {
    width: 100%;
    min-height: 100%;
    background: #fff;          /* система макетов 20.10: фон страницы белый, без градиента */
    color: #1E2A32;
    font-family: var(--tusovka-font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    line-height: 1.6;
    container-type: inline-size;
}

.actpage .act-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 36px 20px 64px;
}

/* ── Keyframes (дословно из макета) ── */
@keyframes tkShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(4px); }
}
@keyframes tkConfFall {
    0% { opacity: 0; transform: translateY(-20px) rotate(0); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translateY(460px) rotate(640deg); }
}
@keyframes tkGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 130, 10, .5); }
    50% { box-shadow: 0 0 0 8px rgba(245, 130, 10, 0); }
}
@keyframes tkShine2 {
    0% { transform: translateX(-120%) rotate(8deg); }
    100% { transform: translateX(320%) rotate(8deg); }
}
@keyframes tkFadeUp {
    0% { opacity: 0; transform: translateY(14px); }
    100% { opacity: 1; transform: translateY(0); }
}

.actpage .tk-shake { animation: tkShake .4s ease; }
.actpage .tk-fade { opacity: 1; animation: tkFadeUp .5s ease; }

.actpage .tk-cta {
    transition: background .2s ease;
}
/* Система макетов 20.10: без подпрыгивания, фильтров и цветных теней. */
.actpage .tk-cta:hover,
.actpage .tk-cta:active { transform: none; filter: none; }
.actpage .tk-cta:focus-visible { outline: 2px solid #2E86C1; outline-offset: 2px; }
/* Текст на оранжевом: крупные CTA 52px - 16px/800 (решение владельца 20.10 сняло прежние
   19px), тёмная тень букв держит белый на #F5820A. */
.actpage .act-submit-code,
.actpage .act-submit-account,
.actpage .act-go-community { font-size: 16px; text-shadow: 0 1px 1px rgba(120, 50, 0, .35); }

.actpage .tk-ghost {
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.actpage .tk-ghost:hover { background: #FFF7EC; border-color: #F5820A; }
.actpage .tk-ghost:focus-visible { outline: 2px solid #2E86C1; outline-offset: 2px; }

.actpage .tk-link:focus-visible { outline: 2px solid #2E86C1; outline-offset: 2px; border-radius: 4px; }

/* Сегмент «Новый аккаунт / У меня есть»: цвета ставит JS inline (module2-activation.js
   styleTab), вес и тень букв - здесь, чтобы выбранный всегда был 800 с тенью. */
.actpage .act-tab[aria-selected="true"] { font-weight: 800 !important; text-shadow: 0 1px 1px rgba(120, 50, 0, .35); }
.actpage .act-tab[aria-selected="false"] { font-weight: 600 !important; text-shadow: none; }

.actpage .tk-cell {
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .12s ease;
}

/* OTP-ячейка: фокус-кольцо полей системы макетов. !important - sunday-unify.css держит
   рамку .otp-cell через !important. */
.actpage .otp-row input:focus {
    border-color: #1F6FA6 !important;
    box-shadow: 0 0 0 3px #D9EBF9;
}
/* Состояние кода (module2-activation.js paintCells красит рамку и фон inline): unify
   форсит рамку/фон ячейки через !important и гасил подсветку «неверный»/«верный».
   Возвращаем её по самому inline-цвету (#fca5a5 / #6ee7b7). */
.actpage .otp-cell[style*="252, 165, 165"] { border-color: #fca5a5 !important; background: #fef2f2 !important; }
.actpage .otp-cell[style*="110, 231, 183"] { border-color: #6ee7b7 !important; background: #ecfdf5 !important; }
/* Поля форм шага 2: фокус */
.actpage .tk-field:focus {
    border-color: #1F6FA6 !important;
    box-shadow: 0 0 0 3px #D9EBF9;
}

/* Блик поверх карты (физическая + membership) */
.actpage .tk-cardshine {
    position: absolute;
    top: -40%;
    left: 0;
    width: 40%;
    height: 180%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    animation: tkShine2 4.5s ease-in-out infinite;
    pointer-events: none;
}

/* Светящаяся зона кода на физ.карте */
.actpage .tk-codeglow {
    animation: tkGlow 2s ease-in-out infinite;
}

/* Reveal membership-карты: управляется классом .is-in (переключает JS) */
.actpage .tk-mcard {
    opacity: 0;
    transform: perspective(1200px) rotateY(-32deg) scale(.88);
    transition: opacity .6s ease, transform .7s cubic-bezier(.34, 1.4, .5, 1);
}
.actpage .tk-mcard.is-in {
    opacity: 1;
    transform: perspective(1200px) rotateY(0) scale(1);
}

/* Конфетти-частица */
.actpage .tk-confetti span {
    position: absolute;
    top: 0;
    animation: tkConfFall 3s ease-in both;
}

/* ── prefers-reduced-motion: гасим декоративное движение ── */
@media (prefers-reduced-motion: reduce) {
    .actpage .tk-shake,
    .actpage .tk-fade,
    .actpage .tk-cardshine,
    .actpage .tk-codeglow,
    .actpage .tk-confetti span { animation: none !important; }
    .actpage .tk-cta,
    .actpage .tk-ghost,
    .actpage .tk-cell,
    .actpage .tk-mcard { transition: none !important; }
    .actpage .tk-mcard { opacity: 1 !important; transform: none !important; }
}

/* ── Мобильный container-брейкпоинт ── */
@container (max-width: 480px) {
    .actpage .act-wrap { padding-left: 14px !important; padding-right: 14px !important; }
    .actpage .otp-row { gap: 5px !important; }
    .actpage .otp-row input { width: 34px !important; height: 46px !important; font-size: 19px !important; }
    .actpage .otp-row .otp-dash { font-size: 17px !important; }
}