/*
 * Лаборатория Кошмарского — quest.css
 * Ключи на странице, записка о находке и дверь в карантин. Работает в паре с js/quest.js.
 */

/* ===== КЛЮЧИ ===== */
.quest-key {
    cursor: pointer;
    transition: opacity .6s, filter .6s;
}

/* Найденный ключ «забрали»: на его месте остался бледный след */
.quest-key--taken {
    cursor: default;
    opacity: .18;
    filter: grayscale(1);
}

/* ===== ЗАПИСКА ===== */
.quest-note {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9000;
    max-width: 300px;
    padding: 14px 18px 10px;
    background: #F2EEE3;
    border: 1px solid #CFC8B4;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    color: #6B1A1E;
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px) rotate(-2deg);
    transition: opacity .4s, transform .4s;
    pointer-events: none;
}

.quest-note.is-shown {
    opacity: 1;
    transform: translateY(0) rotate(-2deg);
    pointer-events: auto;
}

.quest-note__text {
    font-family: 'Caveat', 'Comic Sans MS', cursive;
    font-size: 24px;
    line-height: 1.1;
}

.quest-note__count {
    margin-top: 6px;
    color: #8C8676;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 11px;
    text-align: right;
}

/* ===== ДВЕРЬ В ПОДВАЛЕ =====
   Два класса в селекторе, чтобы перебить .footer__legal a из мобильной версии style.css */
.footer__legal .footer__door {
    display: none;
}

.footer__legal .footer__door--open {
    display: inline-block;
    color: #C9585E;
}

.footer__legal .footer__door--open:hover {
    color: #E8767B;
}

.footer__door i {
    margin-right: 4px;
}

/* Только что открылась: пару раз мигает, чтобы ее заметили */
.footer__door--new {
    animation: quest-door 1.2s ease-in-out 3;
}

@keyframes quest-door {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

@media (max-width: 600px) {
    .quest-note {
        left: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
    }
}