/* ══════════════════════════════════════════════════════════════
   INTERACTIVE MODULE — Residual scoped styles
   Only rules that cannot be expressed as Tailwind utilities live
   here. All structural layout, spacing, and typography has moved
   to Tailwind classes in the partials.

   What remains:
   · @keyframes animations
   · 3D transform / backface-visibility (flip cards)
   · clip-path (before/after slider — set dynamically by JS)
   · .module-shell shell structural rules (aspect ratio, complex shadow)
   · JS-targeted state classes (quiz-feedback, is-matched, etc.)
   · Stagger animation system
   · CSS-only interaction patterns (details/summary, tab active state)
   · hotspot pulse animation
══════════════════════════════════════════════════════════════ */

/* ── Slide area ─────────────────────────────────────────────── */

.module-shell .slide.active {
  display: flex;
  flex-direction: column;
  animation: m-slideEnter 0.45s cubic-bezier(0.16,1,0.3,1) both;
}

.module-shell .slide-inner {
  flex: 1;
  padding: 28px 36px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-light-dark) transparent;
}

/* ── Typography ─────────────────────────────────────────────── */

.module-shell .slide-title {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-dark);
  line-height: 1.2;
  margin-bottom: 20px;
}

.module-shell .slide-subtitle {
  font-size: var(--text-sm);
  color: var(--color-dark-muted);
  margin-bottom: 16px;
  font-weight: 400;
}

/* ── Long text slide — scale prose for 16:9 shell ──────────── */

.module-shell .prose {
  font-size: 0.875rem; /* = text-sm, matches other slide body text */
}

.module-shell .prose h2 {
  font-size: 1.125rem;
}

.module-shell .prose h3 {
  font-size: 1rem;
}

/* ── Animations ─────────────────────────────────────────────── */

@keyframes m-slideEnter {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes m-fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes m-slideUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes m-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-6px); }
  75%       { transform: translateX(6px); }
}

@keyframes m-hotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 50%, transparent); }
  50%       { box-shadow: 0 0 0 10px transparent; }
}

.module-shell .stagger {
  opacity: 0;
  animation: m-slideUp 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
}
.module-shell .d1 { animation-delay: 0.05s; }
.module-shell .d2 { animation-delay: 0.10s; }
.module-shell .d3 { animation-delay: 0.18s; }
.module-shell .d4 { animation-delay: 0.26s; }
.module-shell .d5 { animation-delay: 0.34s; }

/* ── Hotspot pulse ──────────────────────────────────────────── */

.module-shell .hotspot-btn {
  animation: m-hotPulse 2.5s infinite;
}

.module-shell .hs-tooltip.show {
  display: block;
  animation: m-fadeIn 0.2s ease;
}

/* ── Flip card 3D ───────────────────────────────────────────── */

.module-shell .flip-card {
  perspective: 1000px;
}

.module-shell .flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 120px;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.module-shell .flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

/* ── Before/after slider ────────────────────────────────────── */
/* clip-path is set dynamically by JS — stub here for clarity */

.module-shell .comp-after {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* ── Accordion details/summary interaction ──────────────────── */

.module-shell details[open] .acc-trigger {
  background: var(--color-highlight);
  color: var(--color-accent-dark);
}

.module-shell details[open] .acc-icon {
  transform: rotate(180deg);
}

/* ── Tabs active state (set by tabs Stimulus controller) ────── */

.module-shell .tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.module-shell .tab-pane.active {
  display: block;
  animation: m-fadeIn 0.3s ease;
}

/* ── Quiz / matching / drag-drop JS state classes ───────────── */

.module-shell .quiz-opt.correct   { background: var(--color-success-light); border-color: var(--color-success); color: var(--color-success); }
.module-shell .quiz-opt.incorrect { background: var(--color-error-light); border-color: var(--color-error); color: var(--color-error); }

.module-shell .quiz-feedback.show    { display: block; }
.module-shell .quiz-feedback.success { background: var(--color-success-light); color: var(--color-success); }
.module-shell .quiz-feedback.error   { background: var(--color-error-light); color: var(--color-error); }

.module-shell .matching-item.is-selected {
  border-color: var(--color-accent);
  background: var(--color-highlight);
  color: var(--color-accent-dark);
  box-shadow: 0 0 0 3px var(--color-highlight);
}

.module-shell .matching-item.is-selected .matching-connector {
  background: var(--color-accent);
}

.module-shell .matching-item.is-matched {
  border-color: var(--color-success);
  background: var(--color-success-light);
  color: var(--color-success);
  cursor: default;
}

.module-shell .matching-item.is-matched .matching-connector {
  background: var(--color-success);
}

.module-shell .matching-item.is-wrong {
  border-color: var(--color-error);
  background: var(--color-error-light);
  animation: m-shake 0.4s ease;
}

.module-shell .correct-placed {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success-dark);
  cursor: default;
}

.module-shell .incorrect-placed {
  border-color: var(--color-error);
  animation: m-shake 0.4s ease;
}

/* ── True/false JS state classes ────────────────────────────── */

.module-shell .tf-btn--correct {
  border-color: var(--color-success) !important;
  background: var(--color-success-light) !important;
  color: var(--color-success) !important;
}

.module-shell .tf-btn--wrong {
  border-color: var(--color-error) !important;
  background: var(--color-error-light) !important;
  color: var(--color-error) !important;
  animation: m-shake 0.4s ease;
}

/* ── Slide menu overlay ─────────────────────────────────────── */

.module-shell .slide-menu.open {
  display: flex;
  animation: m-fadeIn 0.25s ease;
}

/* ── Slide menu item states ─────────────────────────────────── */


.module-shell .slide-menu-item.current {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

/* ── Modal open state ───────────────────────────────────────── */

.module-shell .ff-modal.open {
  display: flex;
  animation: m-fadeIn 0.2s ease;
}

/* ── Objectives stagger (index-based delay set inline) ──────── */

.module-shell .objectives-item {
  opacity: 0;
  animation: m-slideUp 0.55s cubic-bezier(0.16,1,0.3,1) forwards;
}

/* ── Footer nav JS state ────────────────────────────────────── */

.module-shell .slide-dot.active {
  width: 18px;
  border-radius: 100px;
  background: var(--color-accent);
}

/* ── Slide menu items (built by JS, not ERB) ────────────────── */