/* ============================================================================
   EDGEPLAN MOTION  ("wow" layer)
   Everything dramatic is scoped to html.ui2[data-motion="full"].
   Calm = the quiet defaults from ui2.css. Off = nothing moves. The operating system's
   reduced-motion setting always means Calm at most.
   Only transform / opacity / clip-path are animated, so it stays on the GPU.
   ========================================================================== */

html.ui2 {
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);                 /* entrances (from the claude-motion toolkit) */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);           /* fallback overshoot */
  --ion-2: #7c8cff;                                           /* second accent for gradients */
  --ion-3: #34d9a8;
}
@supports (transition-timing-function: linear(0, 1)) {
  html.ui2 { --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.077 22.6%, 1.121 26.6%, 1.149 31.5%, 1.15 36.4%, 1.095 44%, 1.034 52%, 1.001 60.6%, 0.989 70%, 0.993 82%, 1); }
}
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ---------- Motion modes ---------- */
html.ui2[data-motion="off"] *, html.ui2[data-motion="off"] *::before, html.ui2[data-motion="off"] *::after {
  animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important;
}
html.ui2 .u2-fx { display: none; }
html.ui2[data-motion="full"] .u2-fx { display: block; }

/* ---------- Living background ---------- */
html.ui2 .u2-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html.ui2 .u2-fx > i { position: absolute; display: block; }
html.ui2 .u2-fx .o { width: 62vmax; height: 62vmax; border-radius: 50%; will-change: transform; opacity: .95; }
html.ui2 .u2-fx .o1 { left: -18vmax; top: -22vmax; background: radial-gradient(closest-side, rgba(76, 201, 240, .26), transparent 70%); animation: u2Drift1 38s ease-in-out infinite alternate; }
html.ui2 .u2-fx .o2 { right: -24vmax; top: 18vh; background: radial-gradient(closest-side, rgba(124, 140, 255, .24), transparent 70%); animation: u2Drift2 46s ease-in-out infinite alternate; }
html.ui2 .u2-fx .o3 { left: 22vw; bottom: -34vmax; background: radial-gradient(closest-side, rgba(52, 217, 168, .18), transparent 70%); animation: u2Drift3 52s ease-in-out infinite alternate; }
html.ui2 .u2-fx .o { translate: calc(var(--px, 0) * 26px) calc(var(--py, 0) * 20px); transition: translate 900ms var(--ease-expo); }
@keyframes u2Drift1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); } }
@keyframes u2Drift2 { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-12vmax, 12vmax, 0) scale(.92); } }
@keyframes u2Drift3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(16vmax, -8vmax, 0) scale(1.2); } }
html.ui2 .u2-fx .grid {
  inset: -60px; opacity: .9;
  background-image: radial-gradient(circle, rgba(148, 170, 210, .34) 1px, transparent 1.5px); background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 10%, transparent 72%);
  animation: u2Grid 70s linear infinite;
}
@keyframes u2Grid { to { transform: translate3d(34px, 34px, 0); } }
html.ui2 .u2-fx .grain {
  inset: 0; opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
html.ui2 .u2-fx .cursor {
  left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%; opacity: 0; will-change: transform;
  background: radial-gradient(closest-side, rgba(76, 201, 240, .13), rgba(124, 140, 255, .05) 55%, transparent 75%);
  transition: opacity 400ms ease;
}
html.ui2 .u2-fx .cursor.on { opacity: 1; }
html.ui2.theme-light .u2-fx .grain { mix-blend-mode: multiply; opacity: .05; }
html.ui2.theme-light .u2-fx .o { opacity: .35; }

/* ---------- Boot sequence (first load of the session) ---------- */
html.ui2[data-motion="full"].u2-boot:not(.u2-gsap) .u2-side .u2-brand { animation: u2BootLeft 700ms var(--ease-expo) both; }
html.ui2[data-motion="full"].u2-boot:not(.u2-gsap) .u2-nav-item { animation: u2BootLeft 640ms var(--ease-expo) both; animation-delay: calc(var(--n, 0) * 70ms + 120ms); }
html.ui2[data-motion="full"].u2-boot:not(.u2-gsap) .u2-top { animation: u2BootDown 620ms var(--ease-expo) both; animation-delay: 80ms; }
html.ui2[data-motion="full"].u2-boot:not(.u2-gsap) .u2-top-right > * { animation: u2BootDown 560ms var(--ease-expo) both; animation-delay: calc(var(--n, 0) * 55ms + 260ms); }
html.ui2[data-motion="full"].u2-boot:not(.u2-gsap) .u2-logo svg path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: u2Draw 900ms var(--ease-expo) 180ms forwards; }
@keyframes u2BootLeft { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes u2BootDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes u2Draw { to { stroke-dashoffset: 0; } }
html.ui2[data-motion="full"] .u2-logo { animation: u2LogoGlow 4.2s ease-in-out infinite; }
@keyframes u2LogoGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 201, 240, 0); } 50% { box-shadow: 0 0 22px 2px rgba(76, 201, 240, .28); } }
html.ui2[data-motion="full"] .u2-wordmark { background: linear-gradient(100deg, var(--text) 30%, var(--ion) 50%, var(--text) 70%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: u2Sheen 7s ease-in-out infinite; }
@keyframes u2Sheen { 0%, 60% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

/* ---------- Navigation: icons that react ---------- */
html.ui2[data-motion="full"] .u2-nav-item svg, html.ui2[data-motion="full"] .u2-tab svg { transition: transform 420ms var(--ease-spring), color var(--dur-fast) linear; }
html.ui2[data-motion="full"] .u2-nav-item.pulse svg, html.ui2[data-motion="full"] .u2-tab.pulse svg { animation: u2IconPop 520ms var(--ease-spring); }
@keyframes u2IconPop { 0% { transform: scale(.7) rotate(-14deg); } 100% { transform: none; } }
@media (hover: hover) and (pointer: fine) {
  html.ui2[data-motion="full"] .u2-nav-item:hover svg { transform: translateX(3px) scale(1.12) rotate(-4deg); }
  html.ui2[data-motion="full"] .u2-ibtn:hover svg { transform: scale(1.14) rotate(8deg); }
  html.ui2[data-motion="full"] .u2-ibtn svg { transition: transform 360ms var(--ease-spring); }
}
html.ui2[data-motion="full"] .u2-tab:active svg { transform: scale(.82); }

/* hub name letters */
html.ui2 .u2-ch { display: inline-block; }
html.ui2[data-motion="full"] .u2-ch { animation: u2Letter 520ms var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes u2Letter { from { opacity: 0; transform: translateY(.55em) rotate(4deg); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Cards that follow the light ---------- */
html.ui2[data-motion="full"] :is(.card, .stat-card, .chart-panel, .widget-card, .active-card, .queue-card, .tag-report-card, .kit-card, .rv-card, .gd-card, .rd-card, .rv-trade, .rv-det, .cx-card, .cx-row, .trades-container, .analytics-container) {
  --mx: 50%; --my: 50%;
}
@media (hover: hover) and (pointer: fine) {
  html.ui2[data-motion="full"] :is(.card, .stat-card, .chart-panel, .widget-card, .active-card, .queue-card, .tag-report-card, .kit-card, .rv-card, .gd-card, .rd-card, .rv-trade, .rv-det, .cx-card, .cx-row):hover {
    background-image: radial-gradient(320px circle at var(--mx) var(--my), rgba(76, 201, 240, .10), transparent 65%);
    border-color: var(--ion-line);
  }
}
html.ui2[data-motion="full"] .stat-card { animation: none; }
html.ui2[data-motion="full"] [data-tilt] { transition: transform 500ms var(--ease-expo); will-change: transform; transform-style: preserve-3d; }
html.ui2[data-motion="full"] [data-tilt].tilting { transition: transform 90ms linear; }

/* ---------- Buttons: ripple, shine, magnetic ---------- */
html.ui2[data-motion="full"] :is(.btn-primary, .pill-btn, .rv-chip, .cx-card, .u2-ibtn, .u2-chip) { position: relative; overflow: hidden; }
html.ui2[data-motion="full"] .u2-ibtn { overflow: visible; }
.u2-ripple { position: absolute; border-radius: 50%; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: currentColor; opacity: .28; transform: scale(0); animation: u2Ripple 650ms var(--ease-expo) forwards; }
@keyframes u2Ripple { to { transform: scale(26); opacity: 0; } }
html.ui2[data-motion="full"] :is(.btn-primary, .pill-btn.pill-primary, .pill-btn.primary)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
}
@media (hover: hover) and (pointer: fine) {
  html.ui2[data-motion="full"] :is(.btn-primary, .pill-btn.pill-primary, .pill-btn.primary):hover::after { transform: translateX(120%) skewX(-18deg); transition: transform 700ms var(--ease-expo); }
}
html.ui2[data-motion="full"] [data-magnet] { transition: transform 380ms var(--ease-spring); will-change: transform; }
html.ui2[data-motion="full"] [data-magnet].mag { transition: transform 80ms linear; }

/* ---------- Page changes: View Transitions (direction aware) ---------- */
html.u2-vt .u2-side { view-transition-name: u2side; }
html.u2-vt .u2-top { view-transition-name: u2top; }
html.u2-vt .u2-tabbar { view-transition-name: u2tab; }
html.u2-vt .u2-fx, html.u2-vt .u2-ambient { view-transition-name: u2fx; }
::view-transition-group(u2side), ::view-transition-group(u2top), ::view-transition-group(u2tab), ::view-transition-group(u2fx) { animation-duration: 0s; }
::view-transition-old(root) { animation: u2VtOut 160ms ease-in both; }
::view-transition-new(root) { animation: u2VtIn 460ms var(--ease-expo) both; }
html[data-navdir="back"]::view-transition-new(root) { animation-name: u2VtInBack; }
@keyframes u2VtOut { to { opacity: 0; transform: scale(.992); } }
@keyframes u2VtIn { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.988); } to { opacity: 1; transform: none; } }
@keyframes u2VtInBack { from { opacity: 0; transform: translate3d(0, -22px, 0) scale(.988); } to { opacity: 1; transform: none; } }

/* Theme switch: the new theme grows out of the button you pressed. */
html.u2-theme-vt::view-transition-old(root) { animation: none; z-index: 1; }
html.u2-theme-vt::view-transition-new(root) { animation: u2Circle 760ms var(--ease-expo) both; z-index: 2; mix-blend-mode: normal; }
@keyframes u2Circle { from { clip-path: circle(0 at var(--vx, 50%) var(--vy, 0)); } to { clip-path: circle(150vmax at var(--vx, 50%) var(--vy, 0)); } }

/* ---------- Scroll-driven motion (progressive: only where the browser supports it) ---------- */
@supports (animation-timeline: view()) {
  html.ui2[data-motion="full"] .page > :where(.card, .chart-panel, .trades-container, .analytics-container, .stat-row, .two-col, .kit-grid, .widget-grid, .risk-panel, .rv-card, .gd-card, .rd-card, .tag-report-grid, .symbol-perf-row, .rv-grid > *, .gd-grid > *, .rd-grid > *) {
    animation: u2ScrollIn linear both; animation-timeline: view(); animation-range: entry 0% entry 42%;
  }
  html.ui2[data-motion="full"] .u2-sub::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--ion), var(--ion-2)); box-shadow: 0 0 10px var(--ion-line);
    animation: u2Progress linear both; animation-timeline: scroll(nearest block);
  }
}
@keyframes u2ScrollIn { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes u2Progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Charts reveal left to right ---------- */
html.ui2 .u2-sweep { animation: u2Wipe 1000ms var(--ease-expo) both; }
@keyframes u2Wipe { from { clip-path: inset(0 100% 0 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* ---------- Risk: the account breathes when it matters ---------- */
html.ui2[data-motion="full"] .risk-panel.risk-high { animation: u2Breathe 2.6s ease-in-out infinite; }
html.ui2[data-motion="full"] .u2-chip[data-risk="high"] i { animation: u2Beat 1.3s ease-in-out infinite; }
html.ui2[data-motion="full"] .gd-banner { animation: u2Breathe 3s ease-in-out infinite; }
@keyframes u2Breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(226, 97, 126, 0); } 50% { box-shadow: 0 0 34px 2px rgba(226, 97, 126, .28); } }
@keyframes u2Beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
/* rotating colour border on the review prompt */
html.ui2[data-motion="full"] .rv-prompt {
  border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(from var(--ang), var(--ion), var(--ion-2), var(--ion-3), var(--ion)) border-box;
  animation: u2Spin 6s linear infinite;
}
@keyframes u2Spin { to { --ang: 360deg; } }

/* ---------- Toasts: spring in ---------- */
html.ui2[data-motion="full"] .toast { animation: u2ToastIn 560ms var(--ease-spring) both; }
html.ui2[data-motion="full"] .toast.toast-out { animation: toastOut 160ms var(--ease-out) both; }
@keyframes u2ToastIn { from { opacity: 0; transform: translate3d(36px, 0, 0) scale(.92); } to { opacity: 1; transform: none; } }

/* ---------- Dialogs ---------- */
html.ui2[data-motion="full"] .modal:not(.hidden) .modal-content { animation: u2ModalIn 640ms var(--ease-spring) both; }
html.ui2[data-motion="full"] .modal:not(.hidden) { animation: u2Fade 300ms ease-out both; }
@keyframes u2ModalIn { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.92) rotateX(8deg); } to { opacity: 1; transform: none; } }
@keyframes u2Fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Sign-in screen ---------- */
.u2-const { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
html.ui2[data-motion="full"] #authModal .u2-const { display: block; }
html.ui2 #authModal { overflow: hidden; }
html.ui2 #authModal .modal-content { position: relative; z-index: 1; }
html.ui2[data-motion="full"] #authModal .modal-content { background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: u2ModalIn 900ms var(--ease-spring) 120ms both; }
html.ui2[data-motion="full"] #authModal .modal-header h1 { background: linear-gradient(100deg, var(--ion) 20%, var(--ion-2) 50%, var(--ion-3) 80%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: u2Sheen 5s ease-in-out infinite; }
html.ui2[data-motion="full"] #authModal .auth-form-wrapper:not(.hidden) > * { animation: u2Rise 620ms var(--ease-expo) both; animation-delay: calc(var(--i, 0) * 60ms + 260ms); }
html.ui2[data-motion="full"] #authModal .cx-card { transition: transform 420ms var(--ease-spring), border-color var(--dur-fast) linear; }
@media (hover: hover) and (pointer: fine) { html.ui2[data-motion="full"] #authModal .cx-card:hover { transform: translateX(6px); } }

/* ---------- Celebration canvas ---------- */
.u2-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3000; }

/* ---------- Phones: lighter, because batteries matter ---------- */
@media (max-width: 700px) {
  html.ui2 .u2-fx .o3, html.ui2 .u2-fx .cursor { display: none; }
  html.ui2 .u2-fx .grid { animation: none; }
  html.ui2[data-motion="full"] .u2-logo { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.ui2 .u2-fx { display: none !important; }
}

/* GSAP-driven pointer effects own the transform: no CSS transition on them. */
html.ui2[data-motion="full"].u2-gsap [data-tilt], html.ui2[data-motion="full"].u2-gsap [data-magnet] { transition: none; }