/* ════════════════════════════════════════════════════════════════════════
   eve-primitives.css
   VERBATIM CSS COPIED FROM EVE app/src/renderer/styles.css
   These are the EXACT animation + visual rules the real EVE Electron app
   uses. Loaded by the marketing site so its mockups match the real app
   pixel-for-pixel instead of being approximations.
   Source: C:/Users/Upstairs Trader/Desktop/Eve/src/renderer/styles.css
   ════════════════════════════════════════════════════════════════════════ */

/* ── Skip-to-content (a11y · d-074) ── */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#000;padding:8px 12px;z-index:9999;font-weight:600;border-radius:4px;text-decoration:none}
.skip-link:focus{left:8px;top:8px;outline:2px solid var(--accent);outline-offset:2px}

/* ── Reduced motion (a11y · d-074) ── */
@media (prefers-reduced-motion: reduce){*{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important}}

/* ── EVE Orb · the .orb-mover wrapper from styles.css lines 488-542 ── */
.orb-mover {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 50%;
  will-change: transform, opacity;
  pointer-events: auto;
  z-index: 30;
  --orb-avoid-x: 0px;
  --orb-avoid-y: 0px;
  --orb-core-power: 0.4;
  transform: translate(var(--orb-avoid-x), var(--orb-avoid-y));
  transition: transform 280ms cubic-bezier(0.22, 0.85, 0.32, 1.18);
  filter:
    brightness(calc(0.85 + var(--orb-core-power) * 0.55))
    saturate(calc(0.95 + var(--orb-core-power) * 0.35));
  --orb-halo-blur: calc(8px + var(--orb-core-power) * 26px);
  --orb-halo-alpha: calc(0.20 + var(--orb-core-power) * 0.18);
}
.orb-mover::before {
  content: '';
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle,
    rgba(74, 214, 255, var(--orb-halo-alpha)) 0%,
    rgba(122, 252, 255, calc(var(--orb-halo-alpha) * 0.55)) 38%,
    transparent 72%);
  filter: blur(calc(var(--orb-halo-blur) * 0.5));
  transition: background 320ms ease-out, filter 320ms ease-out;
}
/* Drive an idle "breath" by gently animating --orb-core-power */
@keyframes eve-idle-pulse {
  0%, 100% { --orb-core-power: 0.4; }
  50%      { --orb-core-power: 0.9; }
}
.orb-mover.idle-breathing {
  animation: eve-idle-pulse 4.4s ease-in-out infinite;
}
/* Speak/surge — used on hover or when she has the floor */
.orb-mover.surge { --orb-core-power: 1.6; }

/* ── Orb core canvas substitute (since marketing site has no JS canvas) ── */
.orb-mover .orb-core-substitute {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,
    rgba(190, 240, 255, 1) 0%,
    rgba(96, 215, 255, 0.85) 25%,
    rgba(60, 160, 230, 0.55) 55%,
    rgba(20, 60, 120, 0.22) 85%,
    transparent 100%);
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, 0.30),
    0 0 60px rgba(74, 214, 255, 0.45);
}
/* Concentric expanding rings — the visible signature of an active EVE */
.orb-mover .orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(74, 214, 255, 0.85);
  pointer-events: none;
  animation: eve-orb-ring 2.6s ease-out infinite;
}
.orb-mover .orb-ring.r2 { animation-delay: 1.3s; }
@keyframes eve-orb-ring {
  0%   { inset: 12%; opacity: 1; }
  100% { inset: -30%; opacity: 0; }
}

/* ── EVE shimmer (insubstantial dodge) — styles.css 548-556 ── */
@keyframes eve-shimmer {
  0%   { opacity: 1;    filter: blur(0px)  saturate(1.1)  brightness(1.1); }
  35%  { opacity: 0.15; filter: blur(8px)  saturate(0.4)  brightness(2.4); }
  65%  { opacity: 0.15; filter: blur(6px)  saturate(0.5)  brightness(2.2); }
  100% { opacity: 1;    filter: blur(0px)  saturate(1.1)  brightness(1.1); }
}
.orb-mover.eve-shimmer {
  animation: eve-shimmer 540ms cubic-bezier(0.22, 0.85, 0.32, 1.18);
}

/* ── Aurora mood layer — styles.css 3207-3256 ── */
.aurora-mood {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  mix-blend-mode: screen;
  transition: opacity 1500ms ease, filter 1500ms ease;
}
.aurora-mood::before,
.aurora-mood::after {
  content: '';
  position: absolute;
  inset: 0;
  transition: background 2000ms ease;
}
.aurora-mood::before {
  background:
    linear-gradient(to bottom, var(--aurora-color, transparent) 0%, transparent 24%, transparent 76%, var(--aurora-color, transparent) 100%);
}
.aurora-mood::after {
  background:
    linear-gradient(to right, var(--aurora-color, transparent) 0%, transparent 18%, transparent 82%, var(--aurora-color, transparent) 100%);
}
.aurora-neutral  { --aurora-color: rgba(74, 214, 255, 0.10); }
.aurora-up       { --aurora-color: rgba(74, 255, 176, 0.14); }
.aurora-crushing { --aurora-color: rgba(255, 210, 90, 0.22); animation: aurora-crushing-pulse 4s ease-in-out infinite; }
.aurora-down     { --aurora-color: rgba(255, 130, 130, 0.13); }
.aurora-bleeding { --aurora-color: rgba(255, 70, 70, 0.22); animation: aurora-bleeding-pulse 2.6s ease-in-out infinite; }

@keyframes aurora-crushing-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; filter: hue-rotate(8deg) brightness(1.15); }
}
@keyframes aurora-bleeding-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.80; filter: brightness(1.10); }
}

/* ── Heartbeat grid — styles.css 3262-3305 ── */
.heartbeat-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(74, 214, 255, 0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 214, 255, 0.30) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  mix-blend-mode: screen;
  transition: opacity 800ms ease, background-size 1200ms ease;
}
.heartbeat-calm  { animation: heartbeat-calm  4.0s ease-in-out infinite; }
.heartbeat-surge { animation: heartbeat-surge 2.2s ease-in-out infinite; opacity: 0.16; }
.heartbeat-storm { animation: heartbeat-storm 1.1s ease-in-out infinite; opacity: 0.22; background-image:
  linear-gradient(rgba(255, 90, 90, 0.30) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255, 90, 90, 0.30) 1px, transparent 1px); }

@keyframes heartbeat-calm {
  0%, 100% { opacity: 0.10; background-size: 48px 48px; }
  50%      { opacity: 0.14; background-size: 48.6px 48.6px; }
}
@keyframes heartbeat-surge {
  0%, 100% { opacity: 0.14; background-size: 48px 48px; }
  50%      { opacity: 0.20; background-size: 49.5px 49.5px; }
}
@keyframes heartbeat-storm {
  0%, 100% { opacity: 0.18; background-size: 48px 48px; filter: brightness(1); }
  50%      { opacity: 0.30; background-size: 50.5px 50.5px; filter: brightness(1.25); }
}

/* ── Real-logo container — for ticker + watermark + feature demos ── */
.eve-logo {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.eve-logo[data-sym="NVDA"]{ background-image: url('logos/NVDA.svg'); }
.eve-logo[data-sym="TSLA"]{ background-image: url('logos/TSLA.svg'); }
.eve-logo[data-sym="AAPL"]{ background-image: url('logos/AAPL.svg'); }
.eve-logo[data-sym="MSFT"]{ background-image: url('logos/MSFT.svg'); }
.eve-logo[data-sym="AMZN"]{ background-image: url('logos/AMZN.svg'); }
.eve-logo[data-sym="META"]{ background-image: url('logos/META.svg'); }
.eve-logo[data-sym="GOOG"]{ background-image: url('logos/GOOG.svg'); }
/* ETFs + indices fall back to text labels (no S&P-pack equivalent) */

/* ════════════════════════════════════════════════════════════════════════
   d-113 · Academy SVG Video Primitives
   10 reusable primitives (Chart, Candle, OrbPulse, PriceTicker, Arrow,
   Label, Shape, LineMA, Volume, Highlight) used by the silent SVG videos
   that play alongside each .eve-player audio clip in academy.html.
   Spec: docs/specs/d-113-academy-svg-videos.md
   Theme tokens: --ok aliased to --good (academy theme uses --good).
   ════════════════════════════════════════════════════════════════════════ */

.eve-vid{display:block;width:100%;height:auto;max-height:120px;
  background:linear-gradient(180deg,rgba(var(--accent-rgb),0.04),rgba(var(--accent-rgb),0.01));
  border:1px solid rgba(var(--accent-rgb),0.18);border-radius:8px;
  margin:6px 0 14px;
  --ok:var(--good);
  --ok-rgb:var(--good-rgb)}
.eve-vid *{animation-play-state:paused}
.eve-vid.is-playing *{animation-play-state:running}
/* is-static: locked players with no audio — show end-state immediately */
.eve-vid.is-static *{animation:none!important;transition:none!important}
.eve-vid.is-static .pf-candle{opacity:1;transform:scaleY(1)}
.eve-vid.is-static .pf-ticker{opacity:1}
.eve-vid.is-static .pf-arrow{opacity:1;stroke-dashoffset:0}
.eve-vid.is-static .pf-label{opacity:1;transform:translateY(0)}
.eve-vid.is-static .pf-shape{stroke-dashoffset:0;opacity:1}
.eve-vid.is-static .pf-line line{stroke-dashoffset:0;opacity:1}
.eve-vid.is-static .pf-vol-bar{transform:scaleY(1)}
.eve-vid.is-static .pf-hl{opacity:0.6}
@media (prefers-reduced-motion: reduce){
  .eve-vid *{animation:none!important;transition:none!important}
  .eve-vid .pf-candle{opacity:1;transform:scaleY(1)}
  .eve-vid .pf-ticker{opacity:1}
  .eve-vid .pf-arrow{opacity:1;stroke-dashoffset:0}
  .eve-vid .pf-label{opacity:1;transform:translateY(0)}
  .eve-vid .pf-shape{stroke-dashoffset:0;opacity:1}
  .eve-vid .pf-line line{stroke-dashoffset:0;opacity:1}
  .eve-vid .pf-vol-bar{transform:scaleY(1)}
  .eve-vid .pf-hl{opacity:0.6}
  .eve-vid .pf-reduced-shown{opacity:1!important}
}

/* P1 · Chart (frame) — static */
.pf-chart-bg{fill:rgba(var(--accent-rgb),0.03);stroke:none}
.pf-chart-axis-x,.pf-chart-axis-y{stroke:rgba(var(--accent-rgb),0.25);stroke-width:1}
.pf-chart-grid line{stroke:rgba(var(--accent-rgb),0.08);stroke-width:0.5;stroke-dasharray:2 3}

/* P2 · Candle */
.pf-candle .pf-wick{stroke:currentColor;stroke-width:1}
.pf-candle .pf-body{stroke:currentColor;stroke-width:1}
.pf-candle.up{color:var(--good)}
.pf-candle.up .pf-body{fill:var(--good)}
.pf-candle.down{color:var(--bad)}
.pf-candle.down .pf-body{fill:var(--bad)}
.pf-candle{opacity:0;transform-origin:center;animation:pf-candle-in 240ms ease-out forwards;animation-delay:var(--draw-delay,0ms)}
@keyframes pf-candle-in{
  0%{opacity:0;transform:scaleY(0)}
  100%{opacity:1;transform:scaleY(1)}
}

/* P3 · OrbPulse */
.pf-orb-core{fill:var(--accent);filter:drop-shadow(0 0 4px var(--accent))}
.pf-orb-halo{fill:rgba(var(--accent-rgb),0.18)}
.pf-orb.idle .pf-orb-halo{animation:pf-orb-idle 2.4s ease-in-out infinite}
.pf-orb.active .pf-orb-halo{animation:pf-orb-active 1.4s ease-in-out infinite}
.pf-orb.alert .pf-orb-core{fill:var(--warn)}
.pf-orb.alert .pf-orb-halo{fill:rgba(var(--warn-rgb),0.22);animation:pf-orb-alert 0.9s ease-in-out infinite}
@keyframes pf-orb-idle{0%,100%{opacity:0.6;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
@keyframes pf-orb-active{0%,100%{opacity:0.7;transform:scale(1)}50%{opacity:1;transform:scale(1.32)}}
@keyframes pf-orb-alert{0%,100%{opacity:0.6}50%{opacity:1}}

/* P4 · PriceTicker */
.pf-ticker-bg{fill:rgba(var(--accent-rgb),0.12);stroke:rgba(var(--accent-rgb),0.35)}
.pf-ticker-val{fill:var(--accent-2);font:600 11px var(--mono,monospace)}
.pf-ticker.up .pf-ticker-val{fill:var(--good)}
.pf-ticker.down .pf-ticker-val{fill:var(--bad)}
.pf-ticker{opacity:0;animation:pf-fade-in 320ms ease-out forwards;animation-delay:var(--draw-delay,0ms)}

/* P5 · Arrow */
.pf-arrow{color:var(--accent-2);stroke-width:1.5;fill:none;stroke:currentColor;opacity:0;stroke-dasharray:60;stroke-dashoffset:60;animation:pf-arrow-draw 380ms ease-out forwards;animation-delay:var(--draw-delay,0ms)}
.pf-arrow line{stroke:currentColor}
.pf-arrow.warn{color:var(--warn)}
.pf-arrow.ok{color:var(--good)}
@keyframes pf-arrow-draw{
  0%{opacity:0;stroke-dashoffset:60}
  20%{opacity:1}
  100%{opacity:1;stroke-dashoffset:0}
}

/* P6 · Label */
.pf-label-t{fill:var(--fg);font:600 10px var(--font,system-ui);letter-spacing:0.06em;text-transform:uppercase}
.pf-label{opacity:0;animation:pf-fade-in 280ms ease-out forwards;animation-delay:var(--draw-delay,0ms)}
.pf-label.warn .pf-label-t{fill:var(--warn)}
.pf-label.ok .pf-label-t{fill:var(--good)}
.pf-label.dim .pf-label-t{fill:var(--fg-dim)}
@keyframes pf-fade-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}

/* P7 · Shape */
.pf-shape{fill:none;stroke:var(--accent-2);stroke-width:1.2;stroke-dasharray:200;stroke-dashoffset:200;animation:pf-shape-draw 600ms ease-out forwards;animation-delay:var(--draw-delay,0ms)}
.pf-shape.zone{fill:rgba(var(--accent-rgb),0.10);stroke:rgba(var(--accent-rgb),0.45);stroke-dasharray:none;stroke-dashoffset:0;opacity:0;animation:pf-fade-in 380ms ease-out forwards}
.pf-shape.zone.ok{fill:rgba(var(--good-rgb),0.10);stroke:rgba(var(--good-rgb),0.55)}
.pf-shape.zone.warn{fill:rgba(var(--warn-rgb),0.10);stroke:rgba(var(--warn-rgb),0.55)}
.pf-shape.warn{stroke:var(--warn)}
.pf-shape.ok{stroke:var(--good)}
@keyframes pf-shape-draw{
  0%{stroke-dashoffset:200}
  100%{stroke-dashoffset:0}
}

/* P8 · LineMA */
.pf-line line{stroke:var(--accent);stroke-width:1;fill:none}
.pf-line.ma line{stroke:var(--accent-2);stroke-dasharray:3 2}
.pf-line.support line{stroke:var(--good);stroke-width:1.4}
.pf-line.resistance line{stroke:var(--warn);stroke-width:1.4}
.pf-line.target line{stroke:var(--good);stroke-dasharray:4 3}
.pf-line.stop line{stroke:var(--bad);stroke-dasharray:4 3}
.pf-line.warn line{stroke:var(--warn)}
.pf-line.ok line{stroke:var(--good)}
.pf-line line{stroke-dasharray:120;stroke-dashoffset:120;animation:pf-line-draw 500ms ease-out forwards;animation-delay:var(--draw-delay,0ms)}
.pf-line.ma line,.pf-line.target line,.pf-line.stop line{stroke-dasharray:4 3;stroke-dashoffset:0;animation:pf-fade-in 380ms ease-out forwards;animation-delay:var(--draw-delay,0ms);opacity:0}
.pf-line.ma line{stroke-dasharray:3 2}
@keyframes pf-line-draw{to{stroke-dashoffset:0}}

/* P9 · Volume */
.pf-vol-bar{fill:rgba(var(--accent-rgb),0.45);transform-origin:bottom;transform:scaleY(0);animation:pf-vol-rise 280ms ease-out forwards}
.pf-vol-bar[data-i="0"]{animation-delay:calc(var(--draw-delay,0ms) + 0ms)}
.pf-vol-bar[data-i="1"]{animation-delay:calc(var(--draw-delay,0ms) + 60ms)}
.pf-vol-bar[data-i="2"]{animation-delay:calc(var(--draw-delay,0ms) + 120ms)}
.pf-vol-bar[data-i="3"]{animation-delay:calc(var(--draw-delay,0ms) + 180ms)}
.pf-vol-bar[data-i="4"]{animation-delay:calc(var(--draw-delay,0ms) + 240ms)}
.pf-vol-bar.up{fill:var(--good)}
.pf-vol-bar.down{fill:var(--bad)}
@keyframes pf-vol-rise{to{transform:scaleY(1)}}

/* P10 · Highlight */
.pf-hl{fill:none;stroke:var(--accent);stroke-width:1.4;opacity:0;animation:pf-hl-pulse 1.4s ease-in-out infinite;animation-delay:var(--draw-delay,0ms)}
.pf-hl.warn{stroke:var(--warn)}
.pf-hl.ok{stroke:var(--good)}
@keyframes pf-hl-pulse{
  0%,100%{opacity:0.25;filter:drop-shadow(0 0 0 currentColor)}
  50%{opacity:1;filter:drop-shadow(0 0 6px currentColor)}
}