/* assets/teczka.css - "Teczka sprawy" na akta.php: licznik, metryczki, klucze, rytuał odtajnienia. */

.teczka-licznik { margin: 0 0 34px; font-family: var(--font-mono); }
.teczka-wiersz { display: flex; justify-content: space-between; gap: 12px; font-size: .72rem; letter-spacing: .22em; color: var(--text-muted); }
#teczka-stan { color: var(--accent-amber); }
.teczka-pasek { height: 2px; background: var(--line-hairline); margin-top: 10px; overflow: hidden; }
.teczka-pasek i { display: block; height: 100%; width: 0; background: var(--accent-amber); transition: width 1.2s ease; }
.teczka-hint { margin-top: 10px; font-size: .72rem; letter-spacing: .12em; color: var(--text-dim); min-height: 1.2em; }

.karta-teczki { position: relative; }
.metryczka { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; color: var(--text-dim); margin: 6px 0 14px; }
.karta-teczki.otwarta .metryczka { display: none; }

/* Zamknięta karta wycinka: przygaszona */
.fragment-card.level-locked { opacity: .55; }
.fragment-card.otwarta { opacity: 1; transition: opacity .6s; }

/* Pieczęć ODTAJNIONO */
.pieczec {
    position: absolute; bottom: 14px; right: 16px; z-index: 2; pointer-events: none;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .25em; font-weight: 700;
    color: var(--accent-amber); border: 2px solid var(--accent-amber); padding: 4px 10px;
    transform: rotate(-8deg) scale(2.4); opacity: 0;
}
.karta-teczki.pieczec-spada .pieczec { animation: pieczec .45s cubic-bezier(.2,.9,.3,1.3) forwards; }
.karta-teczki.otwarta:not(.pieczec-spada) .pieczec { opacity: .55; transform: rotate(-8deg) scale(1); }
@keyframes pieczec { to { opacity: .85; transform: rotate(-8deg) scale(1); } }

/* Pasek deklasyfikacji w trakcie odtajniania */
.deklas { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .2em; color: var(--accent-amber); margin: 10px 0; }
.deklas::after { content: '█'; animation: kursor .7s steps(1) infinite; margin-left: 4px; }
@keyframes kursor { 50% { opacity: 0; } }
.karta-teczki.trwa { box-shadow: 0 0 0 1px rgba(var(--accent-amber-rgb), .5), 0 0 28px rgba(var(--accent-amber-rgb), .12); }

/* Słowo-klucz w odtajnionym tekście: ledwo widoczne migotanie, oczywiste po najechaniu */
button.klucz {
    all: unset; cursor: pointer; color: inherit; position: relative;
    border-bottom: 1px dashed rgba(var(--accent-amber-rgb), .55);
    animation: klucz-migocze 4.5s infinite;
}
button.klucz:hover, button.klucz:focus-visible {
    color: var(--accent-amber); border-bottom-style: solid;
    text-shadow: 0 0 10px rgba(var(--accent-amber-rgb), .6);
}
button.klucz:focus-visible { outline: 1px solid var(--accent-amber); outline-offset: 2px; }
@keyframes klucz-migocze {
    0%, 86%, 100% { color: inherit; }
    88% { color: var(--accent-amber); text-shadow: 0 0 8px rgba(var(--accent-amber-rgb), .7); }
    90% { color: inherit; }
    92% { color: var(--accent-amber); }
}

@media (prefers-reduced-motion: reduce) {
    button.klucz { animation: none; color: var(--accent-amber); }
    .karta-teczki.pieczec-spada .pieczec { animation: none; opacity: .85; transform: rotate(-8deg) scale(1); }
    .teczka-pasek i { transition: none; }
}