/* ==========================================================================
   DISCOVERY — момент редкой находки (§118, этап 26)

   ТЗ описывает эту сцену по шагам: падение, пауза, силуэт, свет,
   раскрытие, имя, короткий лор, прогресс коллекции. Шаги приходят
   классами `is-drop`, `is-pause`, `is-silhouette`, `is-light`,
   `is-reveal`, `is-name`, `is-lore`, `is-progress` — по одному на такт,
   и ни один из них не снимается: сцена накапливается, а не перебирает
   состояния. Поэтому её можно оборвать касанием на любом такте, и она
   останется собранной, а не разваленной наполовину.

   Силуэт — тот же рисунок предмета, погашенный фильтром, а не вторая
   «тёмная» картинка: две картинки разошлись бы при первой же перерисовке
   ассета. Тот же приём применён к неизвестному боссу.

   Цвета и тени — из ui-tokens.css и common.css; своих значений нет.
   ========================================================================== */

.tam-discovery {
    position: fixed;
    inset: 0;
    z-index: var(--tam-z-sheet);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4, 18px);
    /* Затемнение почти глухое: §118 — это момент, а не всплывающее окно
       поверх раздела. Читаемые надписи кабинета за спиной у находки
       отвлекали бы ровно там, где игрок должен смотреть на предмет. */
    background: radial-gradient(circle at 50% 44%,
        color-mix(in srgb, var(--ui-panel-main) 95%, transparent) 0%,
        color-mix(in srgb, var(--ui-bg-deep) 99%, transparent) 66%);
    opacity: 0;
    /* 260 мс — ровно столько ждёт `artifact.service.js`, прежде чем снять
       узел со страницы. При 320 мс уход сцены обрывался на пятой части. */
    transition: opacity var(--tam-t-modal) ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tam-discovery.is-drop { opacity: 1; }
.tam-discovery.is-closing { opacity: 0; }

/* ----- Свет ---------------------------------------------------------------
   Луч из-под предмета: он и есть шаг «light», отдельного слоя картинки у
   него нет — только градиент, который растёт. */

.tam-discovery__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vmin;
    height: 60vmin;
    transform: translate(-50%, -58%) scale(0.2);
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--ui-gold-light) 55%, transparent) 0%,
        color-mix(in srgb, var(--ui-gold) 22%, transparent) 42%,
        rgba(0, 0, 0, 0) 70%);
    opacity: 0;
    transition: transform var(--tam-t-reward) cubic-bezier(.2, .8, .3, 1), opacity var(--tam-t-reward) ease;
    pointer-events: none;
}

.tam-discovery.is-light .tam-discovery__glow {
    transform: translate(-50%, -58%) scale(1);
    opacity: 1;
}

/* ----- Сцена ------------------------------------------------------------- */

.tam-discovery__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 10px);
    width: min(420px, 100%);
    text-align: center;
}

/* Падение: предмет приходит сверху и замирает — это шаг «drop», а пауза
   после него сделана задержкой следующего такта, а не отдельной анимацией. */
.tam-discovery__art {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46vmin;
    height: 46vmin;
    max-width: 240px;
    max-height: 240px;
    transform: translateY(-42vh) scale(0.7);
    filter: brightness(0.05) contrast(1.4);
    opacity: 0;
    transition:
        transform .52s cubic-bezier(.18, .9, .28, 1),
        filter .6s ease,
        opacity .3s ease;
}

.tam-discovery__art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(var(--ui-art-shadow-xl));
}

.tam-discovery__art.is-empty { display: none; }

.tam-discovery.is-drop .tam-discovery__art {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Силуэт: предмет уже на месте, но ещё не узнан. */
.tam-discovery.is-silhouette .tam-discovery__art {
    filter: brightness(0.12) contrast(1.5);
}

/* Раскрытие: свет добирается до предмета, и он становится собой. */
.tam-discovery.is-reveal .tam-discovery__art {
    filter: brightness(1) contrast(1);
    animation: tamDiscoveryPop var(--tam-t-sheet) cubic-bezier(.2, 1.3, .4, 1);
}

@keyframes tamDiscoveryPop {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ----- Подписи -----------------------------------------------------------
   Каждая строка ждёт своего такта: имя, потом лор, потом прогресс. */

.tam-discovery__rarity,
.tam-discovery__name,
.tam-discovery__lore,
.tam-discovery__foot,
.tam-discovery__skip {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--tam-t-modal) ease, transform var(--tam-t-modal) ease;
}

.tam-discovery__rarity {
    font-family: var(--font-condensed);
    font-size: var(--ui-size-body);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold-3);
}

.tam-discovery__name {
    font-family: var(--font-heading);
    font-size: var(--ui-size-title);
    line-height: 1.2;
    color: var(--cream-2);
    text-shadow: var(--ui-text-shadow-md);
}

.tam-discovery__lore {
    max-width: 32ch;
    font-family: var(--font-main);
    font-size: var(--ui-size-body);
    line-height: 1.45;
    color: var(--ui-text-muted);
}

.tam-discovery__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2, 10px);
    margin-top: 2px;
}

.tam-discovery__kind,
.tam-discovery__progress {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid color-mix(in srgb, var(--ui-ivory) 14%, transparent);
    border-radius: var(--ui-radius-md);
    background: rgba(0, 0, 0, 0.38);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-body);
    color: var(--cream-3);
}

.tam-discovery__kind { color: var(--gold-2); }
.tam-discovery__progress:empty { display: none; }

.tam-discovery__skip {
    margin-top: var(--space-2, 10px);
    font-family: var(--font-condensed);
    font-size: var(--ui-size-small);
    letter-spacing: .06em;
    color: var(--ui-text-muted);
}

.tam-discovery.is-name .tam-discovery__rarity,
.tam-discovery.is-name .tam-discovery__name,
.tam-discovery.is-lore .tam-discovery__lore,
.tam-discovery.is-progress .tam-discovery__foot,
.tam-discovery.is-progress .tam-discovery__skip {
    opacity: 1;
    transform: translateY(0);
}

/* Низкий экран: предмет меньше, чтобы имя и лор не уехали за край. */
@media (max-height: 640px) {
    .tam-discovery__art { width: 34vmin; height: 34vmin; }
    .tam-discovery__name { font-size: 19px; }
    .tam-discovery__lore { font-size: 13px; }
}

/* Игрок просил не двигать интерфейс: сцена остаётся, движение уходит. */
@media (prefers-reduced-motion: reduce) {
    .tam-discovery__art,
    .tam-discovery__glow,
    .tam-discovery__rarity,
    .tam-discovery__name,
    .tam-discovery__lore,
    .tam-discovery__foot,
    .tam-discovery__skip {
        transition-duration: .01ms;
        animation: none;
    }
}