/* ==========================================================================
   Q1 MOTION TOKENS — CHUẨN TOKEN-01 & MOTION-01 ĐẾN MOTION-09
   Hệ thống gia tốc, thời lượng, vi phản hồi và hoạt họa chuyển động đa tầng
   Tham chiếu: TOKEN-01, MOTION-01 -> MOTION-09, HOME-01, HOME-02, HOME-03
   ========================================================================== */

:root {
  /* 01. THỜI LƯỢNG CHUẨN (DURATION TOKENS - TOKEN-01) */
  --duration-instant: 100ms;       /* Chạm, hover, micro-feedback (MOTION-02) */
  --duration-fast: 180ms;          /* Thu phóng thẻ, đổi trạng thái (MOTION-03) */
  --duration-normal: 240ms;        /* Chuyển view, đổi tab, fade (MOTION-05) */
  --duration-sheet: 280ms;         /* Trượt mở / đóng Bottom Sheet (MOTION-04) */
  --duration-slow: 450ms;          /* Mở màn intro, biến hình phức tạp */
  --duration-pulse: 2200ms;        /* Nhịp tim trạng thái bình thường (MOTION-06) */
  --duration-orbit-sweep: 6s;      /* Vòng quét radar Conic 360 độ (HOME-01) */
  --duration-orbit-dashed: 24s;    /* Vòng hào quang nét đứt xoay chậm (HOME-01) */

  /* 02. ĐƯỜNG CONG GIA TỐC (EASING CURVES - TOKEN-01) */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);        /* Đường cong chuẩn mượt mà */
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15); /* Độ nảy nhẹ tương tác */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
}

/* ==========================================================================
   03. VI PHẢN HỒI XÚC GIÁC (TAP / PRESS FEEDBACK - MOTION-02)
   ========================================================================== */
.btn-pressable, 
.card-pressable {
  transition: transform var(--duration-fast) var(--ease-smooth),
              background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.btn-pressable:active, 
.card-pressable:active {
  transform: scale(0.97) !important;
}

.card-pressable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-elevated);
}

/* ==========================================================================
   04. VÒNG QUAY RADAR VŨ TRỤ (ORBITAL PULSE GAUGE - HOME-01, MOTION-01)
   ========================================================================== */
@keyframes orbitSweep {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes orbitDashed {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

@keyframes orbitPulseBurst {
  0% { transform: scale(0.85) rotate(-60deg); opacity: 0.3; filter: blur(4px); }
  50% { transform: scale(1.06) rotate(180deg); opacity: 1; filter: drop-shadow(0 0 25px var(--color-cyan)); }
  100% { transform: scale(1) rotate(360deg); opacity: 1; filter: none; }
}

/* Sóng âm Equalizer biểu thị nhịp tim hệ thống thật */
@keyframes barEqualizer1 {
  0%, 100% { height: 6px; }
  50% { height: 14px; }
}
@keyframes barEqualizer2 {
  0%, 100% { height: 16px; }
  50% { height: 8px; }
}
@keyframes barEqualizer3 {
  0%, 100% { height: 10px; }
  50% { height: 15px; }
}

/* ==========================================================================
   05. MỐC HOẠT HỌA STEPPER (ACTIVE MILESTONE PULSE - HOME-01)
   ========================================================================== */
@keyframes activeNodePulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.5);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(6, 182, 212, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0);
  }
}

.pulse-indicator {
  animation: pulse-ring var(--duration-pulse) infinite ease-in-out;
}

/* ==========================================================================
   06. CHUYỂN ĐỔI 3 GÓC NHÌN HOME (SLIDE & FADE - HOME-02, MOTION-05)
   ========================================================================== */
.view-panel {
  transition: opacity var(--duration-normal) var(--ease-smooth),
              transform var(--duration-normal) var(--ease-smooth);
}

.view-panel.entering {
  opacity: 0;
  transform: translateY(8px);
}

.view-panel.active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   07. BOTTOM SHEET MOTION (HOME-03, MOTION-04)
   ========================================================================== */
.sheet-backdrop {
  transition: opacity var(--duration-sheet) var(--ease-smooth),
              backdrop-filter var(--duration-sheet) var(--ease-smooth);
}

.sheet-container {
  transition: transform var(--duration-sheet) var(--ease-smooth);
}

.sheet-backdrop.hidden {
  opacity: 0;
  pointer-events: none;
}

.sheet-container.hidden {
  transform: translateY(100%);
}

/* ==========================================================================
   08. LIVE SHIMMER & TICKER (MOTION-06)
   ========================================================================== */
@keyframes live-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.badge-live {
  background: linear-gradient(90deg, rgba(6,182,212,0.1) 0%, rgba(6,182,212,0.35) 50%, rgba(6,182,212,0.1) 100%);
  background-size: 200% 100%;
  animation: live-shimmer 2.5s infinite linear;
}

/* ==========================================================================
   09. HIỆU ỨNG MỞ MÀN INTRO KHI VÀO HOME (CYBER INTRO CASCADE)
   ========================================================================== */
@keyframes introCardCascade {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
    filter: blur(4px);
  }
  60% {
    opacity: 0.95;
    transform: translateY(-2px) scale(1.005);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

@keyframes cyberScanLine {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 0.8; }
  85% { opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}

@keyframes touchLightFlare {
  0% { transform: translateX(-100%) skewX(-20deg); opacity: 0; }
  40% { opacity: 0.6; }
  100% { transform: translateX(200%) skewX(-20deg); opacity: 0; }
}