/**
 * Quiz Player — Animation Library
 * Location: /www/components/quiz/player/player-animations.css
 *
 * Card-level transitions (applied by JS to the whole question card):
 *   ENTRANCE → q-enter-appear | q-enter-fade | q-enter-fly-[left|right|top|bottom]
 *   EXIT     → q-exit-disappear | q-exit-fade | q-exit-fly-[left|right|top|bottom]
 *
 * Element-level animations (applied by JS to badge, text, options):
 *   q-el-badge-pop | q-el-appear | q-el-fade | q-el-fly-[left|right|top|bottom]
 */

/* ─── RESET: neutralise base fadeIn already on .question-card ───────── */
.question-card {
    animation: none !important;
}

/* ─── Container: clip overflow for fly animations ───────────────────── */
#questionsContainer {
    position: relative;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════
   CARD-LEVEL KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── ENTRANCE keyframes ────────────────────────────────────────────── */

@keyframes q-card-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes q-card-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes q-card-fly-left {
    from { opacity: 0; transform: translateX(-50px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes q-card-fly-right {
    from { opacity: 0; transform: translateX(50px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes q-card-fly-top {
    from { opacity: 0; transform: translateY(-50px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes q-card-fly-bottom {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ─── EXIT keyframes ────────────────────────────────────────────────── */

@keyframes q-card-disappear {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes q-card-exit-fade {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes q-card-exit-fly-left {
    from { opacity: 1; transform: translateX(0);     }
    to   { opacity: 0; transform: translateX(-50px); }
}

@keyframes q-card-exit-fly-right {
    from { opacity: 1; transform: translateX(0);    }
    to   { opacity: 0; transform: translateX(50px); }
}

@keyframes q-card-exit-fly-top {
    from { opacity: 1; transform: translateY(0);     }
    to   { opacity: 0; transform: translateY(-50px); }
}

@keyframes q-card-exit-fly-bottom {
    from { opacity: 1; transform: translateY(0);    }
    to   { opacity: 0; transform: translateY(50px); }
}

/* ─── CARD-LEVEL CLASSES ────────────────────────────────────────────── */

.question-card.q-enter-appear       { animation: q-card-appear       450ms ease-out; }
.question-card.q-enter-fade         { animation: q-card-fade         450ms ease-out; }
.question-card.q-enter-fly-left     { animation: q-card-fly-left     450ms ease-out; }
.question-card.q-enter-fly-right    { animation: q-card-fly-right    450ms ease-out; }
.question-card.q-enter-fly-top      { animation: q-card-fly-top      450ms ease-out; }
.question-card.q-enter-fly-bottom   { animation: q-card-fly-bottom   450ms ease-out; }

.question-card.q-exit-disappear     { animation: q-card-disappear    350ms ease-in; }
.question-card.q-exit-fade          { animation: q-card-exit-fade    350ms ease-in; }
.question-card.q-exit-fly-left      { animation: q-card-exit-fly-left  350ms ease-in; }
.question-card.q-exit-fly-right     { animation: q-card-exit-fly-right 350ms ease-in; }
.question-card.q-exit-fly-top       { animation: q-card-exit-fly-top   350ms ease-in; }
.question-card.q-exit-fly-bottom    { animation: q-card-exit-fly-bottom 350ms ease-in; }

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENT-LEVEL KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Badge bounce ──────────────────────────────────────────────────── */

@keyframes q-el-badge-bounce {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { transform: scale(1.05); }
    70%  { transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1);   }
}

/* ─── Simple appear/fade ────────────────────────────────────────────── */

@keyframes q-el-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes q-el-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ─── Fly-in from four directions ───────────────────────────────────── */

@keyframes q-el-fly-left {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes q-el-fly-right {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes q-el-fly-top {
    from { opacity: 0; transform: translateY(-30px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes q-el-fly-bottom {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ─── ELEMENT-LEVEL CLASSES ─────────────────────────────────────────── */

.q-el-badge-pop   { animation: q-el-badge-bounce 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.q-el-appear      { animation: q-el-appear       250ms ease-out; }
.q-el-fade        { animation: q-el-fade         250ms ease-out; }
.q-el-fly-left    { animation: q-el-fly-left     200ms ease-out; }
.q-el-fly-right   { animation: q-el-fly-right    200ms ease-out; }
.q-el-fly-top     { animation: q-el-fly-top      200ms ease-out; }
.q-el-fly-bottom  { animation: q-el-fly-bottom   200ms ease-out; }

/* ═══════════════════════════════════════════════════════════════════════
   INITIAL STATE: hide elements until animations apply
   ═══════════════════════════════════════════════════════════════════════ */

/* Cards start invisible UNLESS they have inline opacity set */
.question-card:not([style*="opacity"]) {
    opacity: 0 !important;
}

/* During entrance/exit animations, let keyframes control opacity */
.question-card[class*="q-enter-"],
.question-card[class*="q-exit-"] {
    opacity: unset !important;
}

/* Elements (badge, text, options) start invisible UNLESS they have inline opacity */
.question-number:not([style*="opacity"]),
.question-text:not([style*="opacity"]),
.option-label:not([style*="opacity"]),
.multiple-select-option:not([style*="opacity"]),
.draggable-word:not([style*="opacity"]),
.sentence-with-blanks:not([style*="opacity"]),
.draggable-unit:not([style*="opacity"]),
.drop-zone:not([style*="opacity"]),
.sorting-item:not([style*="opacity"]),
.ordering-item:not([style*="opacity"]),
.classification-item:not([style*="opacity"]) {
    opacity: 0 !important;
}

/* CLASSIFICATION CONTAINERS - ALWAYS VISIBLE WITH HIGHEST PRIORITY */
.classification-container,
.classification-items-pool,
.categories-grid,
.category-zone,
.category-header,
.category-items {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force display for each type - HIGHEST SPECIFICITY */
body .question-card .classification-container {
    display: flex !important;
}

body .question-card .classification-items-pool {
    display: flex !important;
}

body .question-card .categories-grid {
    display: grid !important;
}

body .question-card .category-zone {
    display: flex !important;
}

body .question-card .category-header {
    display: flex !important;
}

body .question-card .category-items {
    display: flex !important;
}

/* During animation, let keyframes control opacity */
.question-number[class*="q-el-"],
.question-text[class*="q-el-"],
.option-label[class*="q-el-"],
.multiple-select-option[class*="q-el-"],
.draggable-word[class*="q-el-"],
.draggable-unit[class*="q-el-"],
.drop-zone[class*="q-el-"],
.sorting-item[class*="q-el-"],
.ordering-item[class*="q-el-"],
.classification-item[class*="q-el-"] {
    opacity: unset !important;
}