/**
 * English Mastery Hub - Core Button Micro-Interactions
 * Inspired by Lucian UX/UI Prompt Library:
 * - 001: Liquid Glass Button (리퀴드 글래스 버튼)
 * - 002: Magnetic Arrow Button (자석 화살표 버튼)
 * - 003: Hold-to-Confirm / Delete Progress Ring (길게 눌러 삭제)
 * - 005: Paper Plane Send Button (종이비행기 전송)
 * - 007: Morphing Play/Pause SVG (재생 버튼 모핑)
 * - 008: Morphing Copy-to-Checkmark Button (복사 버튼 체크 전환)
 * - 013: Elastic Squash & Stretch Toggle Switch (늘어나는 스위치)
 * Zero external dependencies.
 */

/* ========================================================================== */
/* 1. LIQUID GLASS BUTTON (Element 001)                                       */
/* ========================================================================== */
.emh-btn-liquid-glass {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px -4px rgba(2, 132, 199, 0.25), inset 0 1px 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  user-select: none;
  cursor: pointer;
}

:root[data-theme="light"] .emh-btn-liquid-glass {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
  border-color: rgba(2, 132, 199, 0.3);
  box-shadow: 0 6px 20px -2px rgba(2, 132, 199, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.8);
}

.emh-btn-liquid-glass:hover {
  transform: translateY(-1.5px) scale(1.02);
  box-shadow: 0 12px 28px -4px rgba(2, 132, 199, 0.4), inset 0 1px 2px 0 rgba(255, 255, 255, 0.6);
  border-color: rgba(56, 189, 248, 0.5);
}

.emh-btn-liquid-glass:active {
  transform: translateY(0.5px) scale(0.98);
}

/* Dynamic specular cursor glare */
.emh-btn-liquid-glass::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: radial-gradient(circle 90px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.28), transparent 75%);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.emh-btn-liquid-glass:hover::before {
  opacity: 1;
}

/* ========================================================================== */
/* 2. MAGNETIC ARROW BUTTON (Element 002)                                     */
/* ========================================================================== */
.emh-magnetic-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.emh-btn-liquid-glass:hover .emh-magnetic-arrow,
.group:hover .emh-magnetic-arrow {
  transform: translateX(4px) scale(1.15);
}

/* ========================================================================== */
/* 3. MORPHING COPY-TO-CHECKMARK (Element 008)                                */
/* ========================================================================== */
.emh-copy-morph-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.emh-copy-morph-btn .emh-copy-icon-default,
.emh-copy-morph-btn .emh-copy-icon-check {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.emh-copy-morph-btn .emh-copy-icon-check {
  position: absolute;
  opacity: 0;
  transform: scale(0.3) rotate(-35deg);
  color: #10b981;
}

.emh-copy-morph-btn.is-copied {
  border-color: rgba(16, 185, 129, 0.6) !important;
  background-color: rgba(16, 185, 129, 0.12) !important;
  box-shadow: 0 0 16px -2px rgba(16, 185, 129, 0.45) !important;
  transform: scale(1.05);
}

.emh-copy-morph-btn.is-copied .emh-copy-icon-default {
  opacity: 0;
  transform: scale(0.3) rotate(35deg);
}

.emh-copy-morph-btn.is-copied .emh-copy-icon-check {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

/* ========================================================================== */
/* 4. HOLD-TO-CONFIRM / DELETE PROGRESS BUTTON (Element 003)                  */
/* ========================================================================== */
.emh-hold-btn {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.emh-hold-btn:active {
  transform: scale(0.98);
}

.emh-hold-progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.35) 0%, rgba(244, 63, 94, 0.65) 100%);
  pointer-events: none;
  transition: width 0.05s linear;
  z-index: 1;
}

.emh-hold-btn.is-holding {
  box-shadow: 0 0 18px 2px rgba(225, 29, 72, 0.45) !important;
  border-color: rgba(244, 63, 94, 0.8) !important;
  animation: emhHoldShake 0.18s infinite ease-in-out;
}

@keyframes emhHoldShake {
  0% { transform: scale(0.98) translate(0, 0); }
  25% { transform: scale(0.98) translate(-0.8px, 0.5px); }
  50% { transform: scale(0.98) translate(0.8px, -0.5px); }
  75% { transform: scale(0.98) translate(-0.5px, -0.8px); }
  100% { transform: scale(0.98) translate(0, 0); }
}

.emh-hold-btn .emh-hold-label {
  position: relative;
  z-index: 2;
}

/* ========================================================================== */
/* 5. MORPHING SVG PLAY/PAUSE BUTTON (Element 007)                            */
/* ========================================================================== */
.emh-morph-play-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.emh-morph-play-btn:active {
  transform: scale(0.93);
}

.emh-morph-play-svg {
  width: 14px;
  height: 14px;
  overflow: visible;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emh-morph-play-svg path {
  fill: currentColor;
  transition: d 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================================================== */
/* 6. ELASTIC SQUASH & STRETCH TOGGLE SWITCH (Element 013)                    */
/* ========================================================================== */
.emh-elastic-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.emh-elastic-track {
  position: relative;
  width: 44px;
  height: 24px;
  background-color: #334155;
  border-radius: 9999px;
  transition: background-color 0.25s ease;
  padding: 2px;
}

.emh-elastic-thumb {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.18s ease;
  will-change: transform, width;
}

.emh-elastic-track.active {
  background-color: #0284c7;
}

.emh-elastic-track.active .emh-elastic-thumb {
  transform: translateX(20px);
}

.emh-elastic-track.is-animating .emh-elastic-thumb {
  width: 26px; /* Elastic squash-and-stretch effect */
}

/* ========================================================================== */
/* 7. PAPER PLANE SEND SUBMISSION (Element 005)                               */
/* ========================================================================== */
.emh-btn-paper-plane {
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.emh-btn-paper-plane.is-flying .emh-plane-icon {
  animation: emhFlyPlane 0.75s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================================================== */
/* 8. UNDO SNACKBAR (Element 071)                                              */
/* ========================================================================== */
.emh-snackbar-region {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  width: min(94vw, 420px);
}

.emh-snackbar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  padding: 13px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  transition: opacity 0.24s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emh-snackbar--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.emh-snackbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 9999px;
}

.emh-snackbar--success .emh-snackbar__icon { color: #34d399; background: rgba(16, 185, 129, 0.15); }
.emh-snackbar--warning .emh-snackbar__icon { color: #fbbf24; background: rgba(245, 158, 11, 0.15); }
.emh-snackbar--error   .emh-snackbar__icon { color: #f87171; background: rgba(239, 68, 68, 0.15); }

.emh-snackbar__msg {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emh-snackbar__action {
  flex-shrink: 0;
  padding: 5px 12px;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  background: linear-gradient(135deg, #38bdf8, #6366f1);
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}

.emh-snackbar__action:hover {
  transform: translateY(-1px) scale(1.03);
  filter: brightness(1.08);
}

.emh-snackbar__action:active {
  transform: translateY(1px) scale(0.97);
}

.emh-snackbar__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  color: #94a3b8;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.emh-snackbar__close:hover {
  background: rgba(148, 163, 184, 0.15);
  color: #e2e8f0;
  transform: scale(1.06);
}

@media (max-width: 480px) {
  .emh-snackbar-region {
    bottom: 16px;
  }
  .emh-snackbar {
    font-size: 0.85rem;
    padding: 11px 13px;
  }
}

@keyframes emhFlyPlane {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
  35% { transform: translate(-4px, 4px) scale(0.9) rotate(-15deg); opacity: 0.9; }
  100% { transform: translate(45px, -45px) scale(0.4) rotate(45deg); opacity: 0; }
}

/* ========================================================================== */
/* 9. STREAMING TEXT REVEAL CARET (Element 086)                                */
/* ========================================================================== */
.emh-stream-caret {
  display: inline-block;
  margin-left: 2px;
  color: #38bdf8;
  font-weight: 700;
  animation: emhStreamBlink 0.9s steps(1) infinite;
}

.emh-stream-caret--done {
  animation: none;
  opacity: 0;
}

@keyframes emhStreamBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.emh-stream-chunk {
  animation: emhStreamFade 0.3s ease both;
}

@keyframes emhStreamFade {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .emh-stream-caret,
  .emh-stream-chunk {
    animation: none !important;
  }
}

/* ========================================================================== */
/* 10. SKELETON LOADING SHIMMER (async panel placeholders)                     */
/* ========================================================================== */
.emh-skeleton-card {
  min-height: 180px;
}

.emh-sk {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(148, 163, 184, 0.12);
}

.emh-sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  animation: emhSkShimmer 1.6s infinite;
}

@keyframes emhSkShimmer {
  100% { transform: translateX(100%); }
}

.emh-sk-dot {
  width: 14px;
  height: 14px;
  border-radius: 9999px;
}

.emh-sk-title {
  width: 55%;
  height: 14px;
}

.emh-sk-subtitle {
  width: 35%;
  height: 9px;
  margin-top: 6px;
}

.emh-sk-chip {
  width: 64px;
  height: 26px;
  border-radius: 10px;
}

.emh-sk-foot {
  width: 42%;
  height: 9px;
}

.emh-sk-foot--short {
  width: 24%;
}

.emh-sk-stat {
  display: inline-block;
  width: 52px;
  height: 28px;
  border-radius: 6px;
  vertical-align: middle;
}

.emh-sk-stat--wide {
  width: 110px;
}

.emh-sk-pill {
  display: inline-block;
  width: 70px;
  height: 20px;
  border-radius: 9999px;
}

.emh-sk-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
}

/* ========================================================================== */
/* 11. BREATHING PACEMAKER (Element 193 - Speaking Hub Monologue Prep)         */
/* ========================================================================== */
.emh-pacemaker-container {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.emh-pacemaker-ring {
  transform-origin: center center;
  transition: transform 0.4s ease-out, stroke 0.4s ease;
}

.emh-pacemaker-pulse {
  animation: emhPacemakerAura 4s ease-in-out infinite alternate;
}

@keyframes emhPacemakerAura {
  0% {
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.25));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(99, 102, 241, 0.45));
  }
  100% {
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.35));
  }
}

/* ========================================================================== */
/* 12. PULL-TO-REFRESH INDICATOR (Element 085 - Mobile Gesture Engine)         */
/* ========================================================================== */
.emh-ptr-indicator {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.25);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 15px rgba(99, 102, 241, 0.2);
  white-space: nowrap;
  width: max-content;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}

.emh-ptr-indicator.is-pulling {
  opacity: 1;
}

.emh-ptr-indicator.is-refreshing {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.emh-ptr-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.emh-ptr-indicator.can-release .emh-ptr-arrow {
  transform: rotate(180deg);
}

/* ========================================================================== */
/* TACTILE SPRING BUTTON MICRO-INTERACTIONS (Animate UI Primitives)           */
/* ========================================================================== */
.emh-btn-spring,
.btn-launch-level,
.btn-primary,
.btn-secondary,
.btn-skill-toggle {
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.2s ease, filter 0.2s ease;
  will-change: transform;
}

.emh-btn-spring:hover,
.btn-launch-level:hover,
.btn-primary:hover {
  transform: translateY(-1.5px) scale(1.015);
}

.emh-btn-spring:active,
.btn-launch-level:active,
.btn-primary:active,
.btn-secondary:active,
.btn-skill-toggle:active {
  transform: translateY(0.5px) scale(0.96) !important;
  transition-duration: 0.08s !important;
}

/* ========================================================================== */
/* ACCESSIBILITY & FOCUS-VISIBLE SYSTEM (UI/UX PRO MAX STANDARD)              */
/* ========================================================================== */
.emh-btn-liquid-glass:focus-visible,
.emh-copy-morph-btn:focus-visible,
.emh-hold-btn:focus-visible,
.emh-morph-play-btn:focus-visible,
.emh-btn-paper-plane:focus-visible,
.emh-btn-spring:focus-visible,
.emh-elastic-toggle:focus-visible {
  outline: 2px solid #0284c7 !important;
  outline-offset: 2px !important;
}

:root[data-theme="dark"] .emh-btn-liquid-glass:focus-visible,
:root[data-theme="dark"] .emh-copy-morph-btn:focus-visible,
:root[data-theme="dark"] .emh-hold-btn:focus-visible,
:root[data-theme="dark"] .emh-morph-play-btn:focus-visible,
:root[data-theme="dark"] .emh-btn-paper-plane:focus-visible,
:root[data-theme="dark"] .emh-btn-spring:focus-visible,
:root[data-theme="dark"] .emh-elastic-toggle:focus-visible {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 2px !important;
}

/* Touch Target Ergonomics: Minimum 44px hit bounds on touch devices */
@media (pointer: coarse) {
  .emh-btn-liquid-glass,
  .emh-btn-paper-plane,
  .emh-btn-spring {
    min-height: 44px;
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }
  .emh-copy-morph-btn,
  .emh-morph-play-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .emh-elastic-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}


@media (prefers-reduced-motion: reduce) {
  .emh-sk::after {
    animation: none;
    opacity: 0.5;
  }
  .emh-pacemaker-pulse {
    animation: none;
  }
}