/* ============================================================================
   Модуль 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: radial-gradient(1200px 520px at 50% -8%, #eaf1f6 0%, #f4f5fb 46%, #f4f5fb 100%);
    color: #1f2937;
    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: transform .16s ease, box-shadow .28s ease, filter .2s ease;
}
.actpage .tk-cta:hover { transform: translateY(-2px); filter: brightness(1.03); }
.actpage .tk-cta:active { transform: translateY(0) scale(.99); }
.actpage .tk-cta:focus-visible { outline: 2px solid #dc7000; outline-offset: 2px; }
/* Текст на оранжевом. Белый на #F5820A - 2.6:1, цвет фирменный и не меняется, поэтому
   текст держит WCAG «крупный текст» (19px при весе 800) и лёгкую тёмную тень. Размер inline
   (activation-shortcode.php: 16px / 15.5px) - перебить можно только !important. */
.actpage .act-submit-code,
.actpage .act-submit-account,
.actpage .act-go-community { font-size: 19px !important; 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: #eaf1f6; border-color: #f8dcc1; }
.actpage .tk-ghost:focus-visible { outline: 2px solid #dc7000; outline-offset: 2px; }

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

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

/* OTP-ячейка: фокус-состояние (эквивалент style-focus в макете) */
.actpage .otp-row input:focus {
    border-color: #f5820a !important;
    box-shadow: 0 0 0 4px rgba(245, 130, 10, .16);
    transform: translateY(-2px);
}
/* Поля форм шага 2: фокус */
.actpage .tk-field:focus {
    border-color: #f5820a;
    box-shadow: 0 0 0 3px rgba(245, 130, 10, .12);
}

/* Блик поверх карты (физическая + 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; }
}