/* Two vertical identities, using Arcade's existing brand palette. */
/* CRT test pattern: static texture, not flashing noise. Only the wipe transforms. */
html { background: #07021a; }
html[data-market-transition] { scroll-behavior: auto !important; }
html[data-market-destination='b3'] { --wipe-accent: #22e0ff; --wipe-origin: left; }
html[data-market-destination='perps'] { --wipe-accent: #3dff9e; --wipe-origin: right; }
html[data-market-transition] body::after {
  content: ''; position: fixed; inset: 0; z-index: 65; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, #07021a44 0 1px, transparent 1px 4px),
    repeating-conic-gradient(#07021a22 0 25%, #ffffff11 0 50%) 0 0 / 4px 4px,
    linear-gradient(0deg, #07021a 0 20%, transparent 20%),
    linear-gradient(90deg, #f4edff 0 14.285%, #ffb627 14.285% 28.57%, #22e0ff 28.57% 42.855%, #3dff9e 42.855% 57.14%, #ff2e88 57.14% 71.425%, #c42bff 71.425% 85.71%, #33269e 85.71%);
  border-inline: 4px solid var(--wipe-accent);
  box-shadow: 0 0 32px color-mix(in srgb, var(--wipe-accent) 35%, transparent);
  transform-origin: var(--wipe-origin);
}
html[data-market-transition='loading'] body::after { transform: scaleX(1); }
html[data-market-transition='exit'] body::after { animation: arcade-wipe-cover 300ms cubic-bezier(.4, 0, .2, 1) both; }
html[data-market-transition='enter'] body::after { animation: arcade-wipe-reveal 550ms cubic-bezier(.2, .7, .2, 1) 200ms both; }
@keyframes arcade-wipe-cover { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes arcade-wipe-reveal { from { transform: scaleX(1); } to { transform: scaleX(0); } }
html[data-motion='paused'] body::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  html[data-market-transition] body::after { display: none; }
}
body[data-market='b3'] {
  --market-accent: #22e0ff;
  --market-shadow: #7b2bff;
  --market-glow: #073b53;
}
body[data-market='perps'] {
  --market-accent: #3dff9e;
  --market-shadow: #238959;
  --market-glow: #073d30;
}
body[data-market] { --cyan: var(--market-accent); --pink: var(--market-accent); }
[data-market] :focus-visible { outline-color: var(--market-accent); }
[data-market] .hero { background: radial-gradient(110% 85% at 70% 100%, var(--market-glow), #1b0740 48%, #07021a 85%) !important; }
[data-market] .hero h1 span { text-shadow: 3px 3px 0 var(--market-accent), 6px 6px 0 var(--market-shadow) !important; }
[data-market] .market-switch a[aria-current] { background: var(--market-accent); box-shadow: 3px 3px 0 var(--market-shadow); }
[data-market] .menu-toggle, [data-market] .dashboard-link { color: var(--market-accent); border-color: var(--market-accent); }
[data-market] .nav-links a:not(.button-link), [data-market] .perps-eyebrow,
[data-market] .benchmark-sources a, [data-market] .perps-table tbody td:nth-child(2) { color: var(--market-accent); }
[data-market] .perps-plan { --plan-accent: var(--market-accent) !important; }
[data-market] .perps-info-card, [data-market] .venue-list span { border-color: color-mix(in srgb, var(--market-accent) 35%, #150836); }
[data-market] .perps-info-card { border-top: 2px solid var(--market-accent); }
[data-market] .perps-table tbody td:nth-child(2) { background: color-mix(in srgb, var(--market-accent) 6%, #0c0326); }
[data-market] .table-scroll { scrollbar-color: var(--market-accent) var(--surface); }
[data-market] .dashboard-link:hover { background: color-mix(in srgb, var(--market-accent) 8%, transparent); }
@media (hover: hover) and (pointer: fine) {
  [data-market] .plan-card:hover, [data-market] .perps-plan:hover { border-color: var(--market-accent) !important; box-shadow: 0 0 28px color-mix(in srgb, var(--market-accent) 8%, transparent); }
}
@media (max-width: 760px) {
  [data-market] .hero h1 span { text-shadow: 2px 2px 0 var(--market-accent), 4px 4px 0 var(--market-shadow) !important; }
}