/* TradeClick — Interactivity Layer
 * 
 * Drop-in animations, transitions, and visual effects that layer on top
 * of the existing design. Adds tactility without changing structure.
 *
 * Triggers on data attributes so any element can opt in:
 *   data-tc-live           — breathing live indicator
 *   data-tc-count          — animated number counter
 *   data-tc-card-flip      — clickable 3D-flip card
 *   data-tc-press-hold     — press & hold confirmation button
 *   data-tc-heartbeat      — heartbeat waveform display
 *   data-tc-momentum       — slider with physical resistance
 *   data-tc-empty-state    — animated empty illustration
 *   data-tc-reveal         — scroll-triggered fade-in & draw
 *   data-tc-page-transition— horizontal page slide
 */

/* ─────────────────────────────────────────────────────────────────
   #1 — LIVE PULSE — subtle breathing on any element marked live
   ───────────────────────────────────────────────────────────────── */
@keyframes tc-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.85; }
}

[data-tc-live] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

[data-tc-live]::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-bright);
  box-shadow: 0 0 8px var(--green-bright);
  animation: tc-breathe 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

[data-tc-live][data-tc-live-color="amber"]::before {
  background: var(--amber-bright);
  box-shadow: 0 0 8px var(--amber-bright);
}

[data-tc-live][data-tc-live-color="red"]::before {
  background: #F09595;
  box-shadow: 0 0 8px #F09595;
}

/* ─────────────────────────────────────────────────────────────────
   #2 — ANIMATED NUMBERS — handled by JS, this gives the smooth feel
   ───────────────────────────────────────────────────────────────── */
[data-tc-count] {
  font-variant-numeric: tabular-nums;
  transition: color 240ms ease;
}

[data-tc-count].tc-count-pulse-up {
  color: var(--green-bright);
  text-shadow: 0 0 12px rgba(36, 217, 161, 0.4);
}

[data-tc-count].tc-count-pulse-down {
  color: #F09595;
  text-shadow: 0 0 12px rgba(240, 149, 149, 0.4);
}

/* ─────────────────────────────────────────────────────────────────
   #3 — CARD FLIP — 3D rotate to show back of card
   ───────────────────────────────────────────────────────────────── */
[data-tc-card-flip] {
  perspective: 1200px;
  cursor: pointer;
}

[data-tc-card-flip] .tc-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

[data-tc-card-flip].tc-flipped .tc-flip-inner {
  transform: rotateY(180deg);
}

[data-tc-card-flip] .tc-flip-front,
[data-tc-card-flip] .tc-flip-back {
  position: relative;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: inherit;
}

[data-tc-card-flip] .tc-flip-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: rgba(255, 255, 255, 0.04);
  border-radius: inherit;
  padding: inherit;
}

/* ─────────────────────────────────────────────────────────────────
   #4 — PRESS & HOLD — fills a ring as user holds the button
   ───────────────────────────────────────────────────────────────── */
[data-tc-press-hold] {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

[data-tc-press-hold] .tc-hold-progress {
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0.18;
  width: 0%;
  transition: width 1.6s linear;
  pointer-events: none;
}

[data-tc-press-hold].tc-holding .tc-hold-progress {
  width: 100%;
}

[data-tc-press-hold].tc-confirmed {
  animation: tc-hold-complete 400ms ease;
}

@keyframes tc-hold-complete {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

[data-tc-press-hold] .tc-hold-label {
  position: relative;
  z-index: 1;
}

/* ─────────────────────────────────────────────────────────────────
   #5 — HEARTBEAT WAVEFORM — last N pulses visualised as a sparkline
   ───────────────────────────────────────────────────────────────── */
[data-tc-heartbeat] {
  display: inline-flex;
  align-items: end;
  gap: 2px;
  height: 16px;
  padding: 2px;
}

[data-tc-heartbeat] .tc-hb-bar {
  width: 2px;
  background: var(--green-bright);
  border-radius: 1px;
  opacity: 0.4;
  transition: height 240ms ease, opacity 240ms ease;
  min-height: 2px;
}

[data-tc-heartbeat] .tc-hb-bar.tc-hb-current {
  opacity: 1;
  box-shadow: 0 0 6px var(--green-bright);
}

/* ─────────────────────────────────────────────────────────────────
   #6 — MOMENTUM SLIDER — for risk %, etc. Subtle resistance bumps.
   ───────────────────────────────────────────────────────────────── */
[data-tc-momentum] {
  position: relative;
}

[data-tc-momentum].tc-resist-pulse {
  animation: tc-resist 200ms ease;
}

@keyframes tc-resist {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-2px); }
  70%      { transform: translateX(2px); }
}

/* ─────────────────────────────────────────────────────────────────
   #7 — EMPTY STATE — hand-drawn line art with breathing animation
   ───────────────────────────────────────────────────────────────── */
.tc-empty {
  text-align: center;
  padding: 32px 20px;
}

.tc-empty-illo {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  opacity: 0.5;
  animation: tc-breathe 3.6s ease-in-out infinite;
}

.tc-empty-illo svg {
  width: 100%;
  height: 100%;
}

.tc-empty-illo svg path,
.tc-empty-illo svg circle,
.tc-empty-illo svg line {
  fill: none;
  stroke: var(--green-bright);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tc-empty-title {
  font-size: 13px;
  color: white;
  font-weight: 500;
  margin-bottom: 4px;
}

.tc-empty-sub {
  font-size: 11px;
  color: rgba(229, 233, 240, 0.5);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* ─────────────────────────────────────────────────────────────────
   #8 — REVEAL ON SCROLL — fade-in and slide-up as element enters
   ───────────────────────────────────────────────────────────────── */
[data-tc-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
              transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-tc-reveal].tc-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* For SVG chart lines, draw themselves */
[data-tc-reveal-line] {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-tc-reveal-line].tc-revealed {
  stroke-dashoffset: 0;
}

/* ─────────────────────────────────────────────────────────────────
   #9 — PAGE TRANSITIONS — slide horizontally between onboarding steps
   ───────────────────────────────────────────────────────────────── */
@keyframes tc-page-enter-forward {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tc-page-enter-back {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

body.tc-anim-forward .onboarding-content,
body.tc-anim-forward .tc-wallet,
body.tc-anim-forward .dashboard-page {
  animation: tc-page-enter-forward 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
body.tc-anim-back .onboarding-content,
body.tc-anim-back .tc-wallet,
body.tc-anim-back .dashboard-page {
  animation: tc-page-enter-back 420ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Respect prefers-reduced-motion — kill all animation for those users */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Drag-and-drop on dashboard strategy/position cards
   ───────────────────────────────────────────────────────────────── */
[data-tc-draggable] {
  cursor: grab;
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

[data-tc-draggable]:active {
  cursor: grabbing;
}

[data-tc-draggable].tc-dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

[data-tc-drop-target] {
  position: relative;
}

[data-tc-drop-target].tc-drop-active::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 1px dashed var(--green-bright);
  border-radius: inherit;
  pointer-events: none;
  animation: tc-breathe 1.2s ease-in-out infinite;
}