/**
 * TelccFree — Global micro-interactions (hover lift, press states, timing curves)
 * Visual-only layer — does not alter DOM, datasets, or event handlers.
 */
:root {
  --telc-interact-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --telc-interact-duration: 300ms;
  --telc-interact-press-duration: 100ms;
  --telc-interact-brand: #1877f2;
  --telc-interact-shadow-hover:
    0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
  --telc-interact-shadow-press: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --telc-interact-border-hover: #1877f2;
  --telc-interact-border-hover-dark: rgba(96, 165, 250, 0.55);
}

/* ── PROTOCOL 2: base transition profile ── */
.ex-btn,
.ex-btn,
a.ex-btn,
.stat-card,
.section-card,
.level-card,
.teil3-choice-card,
.telc-lang-trigger,
.telc-lang-option,
.telc-home-btn,
.telc-theme-toggle,
.telc-theme-capsule,
#telcThemeToggle,
.draggable,
.drop-target,
.question-box,
.quiz-scroll-container,
.right-column-content,
.ad-full,
.task-side,
.yellow-box,
.results-panel-inner,
.word-counter,
.option,
label.option,
.quiz-button,
.quiz-button-link,
.btn-check,
.btn-green,
.btn-blue,
#checkBtn,
#resetBtn,
#homeBtn,
#check-btn,
#btnCheck,
#btnRefresh,
#btnNewMixPanel,
.auto-nav-btn,
.modal-btn-save,
.modal-btn-cancel,
.modal-btn-clear,
.nav-btn-home,
.nav-btn-logout,
.wrong-flag,
.teil3-choice-btn,
button[type="button"],
button[type="submit"]:not(:disabled),
input[type="button"],
input[type="submit"]:not(:disabled),
a.btn,
.btn,
.modal-box,
#pwa-install-btn {
  transition: all var(--telc-interact-duration) var(--telc-interact-ease);
  -webkit-tap-highlight-color: transparent;
}

/* ── PROTOCOL 3: hover elevation ── */
a.ex-btn:hover,
.stat-card:hover,
.section-card:hover,
.level-card:hover,
.teil3-choice-card:hover,
.telc-lang-trigger:hover,
.telc-lang-option:hover,
.telc-home-btn:hover,
.telc-theme-toggle:hover,
.telc-theme-capsule:hover,
#telcThemeToggle:hover,
.draggable:not(.dragging):not(.dragging-style):hover,
.drop-target:hover,
.drop-target.drag-over,
.question-box:hover,
.ad-full:hover,
.task-side:hover,
.yellow-box:hover,
.results-panel-inner:hover,
.word-counter:hover,
.option:hover,
label.option:hover,
.quiz-button:hover,
.quiz-button-link:hover,
.btn-check:hover,
.btn-green:hover,
.btn-blue:hover,
#checkBtn:hover,
#resetBtn:hover,
#homeBtn:hover,
#check-btn:hover,
#btnCheck:hover,
#btnRefresh:hover,
#btnNewMixPanel:hover,
.auto-nav-btn:not(.auto-nav-disabled):hover,
.modal-btn-save:hover,
.modal-btn-cancel:hover,
.modal-btn-clear:hover,
.nav-btn-home:hover,
.nav-btn-logout:hover,
.wrong-flag:hover,
.teil3-choice-btn:hover,
button[type="button"]:not(:disabled):hover,
button[type="submit"]:not(:disabled):hover,
input[type="button"]:hover,
input[type="submit"]:not(:disabled):hover,
a.btn:hover,
.btn:hover,
#pwa-install-btn:hover {
  transform: translateY(-4px);
  box-shadow: var(--telc-interact-shadow-hover);
  border-color: var(--telc-interact-border-hover);
}

.quiz-scroll-container:hover,
.right-column-content:hover {
  transform: translateY(-4px);
  box-shadow: var(--telc-interact-shadow-hover);
  border-color: var(--telc-interact-border-hover);
}

html.dark .ex-btn:hover,
html.dark a.ex-btn:hover,
html.dark .stat-card:hover,
html.dark .section-card:hover,
html.dark .level-card:hover,
html.dark .teil3-choice-card:hover,
html.dark .telc-lang-trigger:hover,
html.dark .telc-lang-option:hover,
html.dark .draggable:not(.dragging):not(.dragging-style):hover,
html.dark .drop-target:hover,
html.dark .drop-target.drag-over,
html.dark .question-box:hover,
html.dark .ad-full:hover,
html.dark .task-side:hover,
html.dark .yellow-box:hover,
html.dark .results-panel-inner:hover,
html.dark .word-counter:hover,
html.dark .option:hover,
html.dark label.option:hover,
html.dark .quiz-scroll-container:hover,
html.dark .right-column-content:hover {
  border-color: var(--telc-interact-border-hover-dark);
  box-shadow:
    var(--telc-interact-shadow-hover),
    0 0 0 1px rgba(96, 165, 250, 0.22);
}

/* Preserve graded / disabled states */
a.ex-btn.auto-nav-disabled:hover,
.auto-nav-btn.auto-nav-disabled:hover,
button:disabled:hover,
input:disabled:hover {
  transform: none;
  box-shadow: none;
}

/* Drop-target with placed card — lift the slot subtly */
.drop-target:not(.empty-drop-target):hover {
  transform: translateY(-2px);
}

/* ── PROTOCOL 4: tactile press (:active) ── */
a.ex-btn:active,
.stat-card:active,
.level-card:active,
.teil3-choice-card:active,
.telc-lang-trigger:active,
.telc-lang-option:active,
.telc-home-btn:active,
.telc-theme-toggle:active,
.telc-theme-capsule:active,
#telcThemeToggle:active,
.draggable:not(.dragging):not(.dragging-style):active,
.drop-target:active,
.question-box:active,
.quiz-button:active,
.quiz-button-link:active,
.btn-check:active,
.btn-green:active,
.btn-blue:active,
#checkBtn:active,
#resetBtn:active,
#homeBtn:active,
#check-btn:active,
#btnCheck:active,
#btnRefresh:active,
#btnNewMixPanel:active,
.auto-nav-btn:not(.auto-nav-disabled):active,
.modal-btn-save:active,
.modal-btn-cancel:active,
.modal-btn-clear:active,
.nav-btn-home:active,
.nav-btn-logout:active,
.wrong-flag:active,
.teil3-choice-btn:active,
button[type="button"]:not(:disabled):active,
button[type="submit"]:not(:disabled):active,
input[type="button"]:active,
input[type="submit"]:not(:disabled):active,
a.btn:active,
.btn:active,
.option:active,
label.option:active,
#pwa-install-btn:active {
  transition-duration: var(--telc-interact-press-duration);
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--telc-interact-shadow-press);
}

/* Drag in progress — JS owns transform; never compress during drag */
.draggable.dragging,
.draggable.dragging-style,
.draggable.selected-word-style.dragging-style {
  transition: box-shadow var(--telc-interact-duration) var(--telc-interact-ease),
    border-color var(--telc-interact-duration) var(--telc-interact-ease),
    opacity var(--telc-interact-duration) var(--telc-interact-ease);
}

.draggable.dragging:active,
.draggable.dragging-style:active {
  transition-duration: var(--telc-interact-duration);
  transform: scale(1.02) translateY(-4px);
  box-shadow: var(--telc-interact-shadow-hover);
}

.drop-target .draggable:hover,
.drop-target .draggable:active {
  transform: none;
  box-shadow: none;
}

/* Dashboard exercise cards — override inline dashboard styles */
a.ex-btn {
  transition: all var(--telc-interact-duration) var(--telc-interact-ease) !important;
}

a.ex-btn:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
  border-color: var(--telc-interact-border-hover) !important;
}

a.ex-btn:active {
  transition-duration: var(--telc-interact-press-duration) !important;
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: var(--telc-interact-shadow-press) !important;
}

.stat-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
}

.section-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
  border-color: var(--telc-interact-border-hover);
}

.teil3-choice-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
  border-color: var(--telc-interact-border-hover) !important;
}

.teil3-choice-card:active {
  transition-duration: var(--telc-interact-press-duration) !important;
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: var(--telc-interact-shadow-press) !important;
}

.nav-btn-home:hover,
.nav-btn-logout:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
}

.nav-btn-home:active,
.nav-btn-logout:active {
  transition-duration: var(--telc-interact-press-duration) !important;
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: var(--telc-interact-shadow-press) !important;
}

.modal-btn-save:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
}

.modal-btn-save:active {
  transition-duration: var(--telc-interact-press-duration) !important;
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: var(--telc-interact-shadow-press) !important;
}

html.dark .teil3-choice-card:hover,
html.dark .section-card:hover,
html.dark a.ex-btn:hover {
  border-color: var(--telc-interact-border-hover-dark) !important;
}

/* Leseverstehen Teil 3 — override page-local styles loaded earlier */
.leseverstehen-teil3 .draggable:not(.dragging):hover,
body[data-level] .draggable:not(.dragging):not(.dragging-style):hover {
  transform: translateY(-4px);
  box-shadow: var(--telc-interact-shadow-hover);
  border-color: var(--telc-interact-border-hover);
}

.draggable:not(.dragging):not(.dragging-style):hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
  border-color: var(--telc-interact-border-hover) !important;
}

.quiz-button:hover,
#btnCheck:hover,
#btnRefresh:hover,
#btnNewMixPanel:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
}

.quiz-button:active,
#btnCheck:active,
#btnRefresh:active,
#btnNewMixPanel:active {
  transition-duration: var(--telc-interact-press-duration) !important;
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: var(--telc-interact-shadow-press) !important;
}

.drop-target:hover,
.drop-target.drag-over {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
  border-color: var(--telc-interact-border-hover) !important;
}

.question-box:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--telc-interact-shadow-hover) !important;
  border-color: var(--telc-interact-border-hover) !important;
}

@media (prefers-reduced-motion: reduce) {
  .ex-btn,
.ex-btn,
a.ex-btn,
  .stat-card,
  .section-card,
  .level-card,
  .teil3-choice-card,
  .telc-lang-trigger,
  .telc-lang-option,
  .telc-home-btn,
  .telc-theme-toggle,
  .telc-theme-capsule,
  #telcThemeToggle,
  .draggable,
  .drop-target,
  .question-box,
  .quiz-scroll-container,
  .right-column-content,
  .ad-full,
  .task-side,
  .word-counter,
  .option,
  label.option,
  .quiz-button,
  .btn-check,
  .btn-green,
  .btn-blue,
  .auto-nav-btn,
  .nav-btn-home,
  .nav-btn-logout,
  button,
  input[type="button"],
  input[type="submit"] {
    transition: none !important;
    transform: none !important;
  }
}