/* OATR · motion-fx.css
   
   Extracted verbatim from OTA.html. Loaded in cascade order. */

/* ---- motion layer (reel-inspired: count-up, live curve draw, pulse, flash, stagger) ---- */
@keyframes ot-rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes ot-draw{to{stroke-dashoffset:0}}
@keyframes ot-flash-up{0%{color:var(--up)}30%{color:var(--up)}100%{}}
@keyframes ot-flash-down{0%{color:var(--down)}30%{color:var(--down)}100%{}}
@keyframes ot-pulse-ring{0%{box-shadow:0 0 0 0 var(--down-soft)}70%{box-shadow:0 0 0 5px transparent}100%{box-shadow:0 0 0 0 transparent}}
/* headline numbers tick while counting */
.acct-v.counting,.port-bal.counting{font-variant-numeric:tabular-nums}
/* card stagger — only when board marks itself .stagger (port switch / first load), not on every keystroke */
.zone-grid.stagger>.card{animation:ot-rise .34s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i,0)*32ms)}
/* self-drawing line for any curveSVG polyline tagged .draw-line (pathLength normalised to 1) */
.draw-line{stroke-dasharray:1;stroke-dashoffset:1;animation:ot-draw 1.05s ease-out forwards}
/* reusable value-update flash */
.flash-up{animation:ot-flash-up .6s ease-out}
.flash-down{animation:ot-flash-down .6s ease-out}
/* live pulse ring on the Live tag dot */
.news-tag::before{box-shadow:0 0 0 0 var(--down-soft);animation:blink 1.4s infinite,ot-pulse-ring 1.8s ease-out infinite}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .draw-line{stroke-dashoffset:0!important}
  .zone-grid.stagger>.card{opacity:1!important;transform:none!important}
}
/* ---- cinematic FX layer (whale / bull / moon / profit) ---- */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:350;pointer-events:none}
.fx-palette{position:absolute;right:16px;bottom:16px;z-index:360;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.fx-toggle{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;font-size:21px;line-height:1;box-shadow:0 8px 24px rgba(0,0,0,.45);cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center}
.fx-toggle:hover{transform:scale(1.09);box-shadow:0 10px 30px rgba(59,130,246,.5)}
.fx-palette.open .fx-toggle{transform:rotate(20deg) scale(1.05)}
.fx-menu{display:none;flex-direction:column;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:7px;box-shadow:0 14px 40px rgba(0,0,0,.55);min-width:178px}
.fx-palette.open .fx-menu{display:flex;animation:ot-rise .2s ease-out both}
.fx-menu button{text-align:left;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:600;color:var(--text);background:transparent;border:none;cursor:pointer;transition:.12s;display:flex;gap:9px;align-items:center}
.fx-menu button:hover{background:var(--chip)}
.fx-auto{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2);padding:8px 12px 4px;border-top:1px solid var(--border);margin-top:4px;cursor:pointer}
.fx-auto input{accent-color:var(--accent);cursor:pointer}
/* card-synced glow + shake driven by the FX engine */
.card.fx-up{animation:fx-glow-up 1.5s ease-out!important}
.card.fx-down{animation:fx-glow-down 1.5s ease-out!important}
.card.fx-blue{animation:fx-glow-blue 1.5s ease-out!important}
.card.fx-gold{animation:fx-glow-gold 1.5s ease-out!important}
.card.fx-fire{animation:fx-glow-fire 1.5s ease-out!important}
.card.fx-shake{animation:fx-shake .6s ease-out!important}
@keyframes fx-glow-up{25%{box-shadow:0 0 22px 3px rgba(34,197,94,.55);border-color:#22c55e}100%{box-shadow:0 0 0 0 transparent}}
@keyframes fx-glow-down{25%{box-shadow:0 0 22px 3px rgba(239,68,68,.55);border-color:#ef4444}100%{box-shadow:0 0 0 0 transparent}}
@keyframes fx-glow-blue{25%{box-shadow:0 0 24px 3px rgba(59,130,246,.6);border-color:#3b82f6}100%{box-shadow:0 0 0 0 transparent}}
@keyframes fx-glow-gold{25%{box-shadow:0 0 24px 3px rgba(251,191,36,.6);border-color:#fbbf24}100%{box-shadow:0 0 0 0 transparent}}
@keyframes fx-glow-fire{25%{box-shadow:0 0 24px 3px rgba(249,115,22,.6);border-color:#f97316}100%{box-shadow:0 0 0 0 transparent}}
@keyframes fx-shake{0%,100%{transform:translateX(0)}15%{transform:translateX(-5px)}30%{transform:translateX(5px)}45%{transform:translateX(-4px)}60%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){.fx-canvas{display:none}}
/* ---- micro-interactions: flash-and-settle, skeleton, breaking news ---- */
@keyframes cellflash-up{0%{background:var(--up-soft)}100%{background:transparent}}
@keyframes cellflash-down{0%{background:var(--down-soft)}100%{background:transparent}}
.c-price-row{border-radius:6px}
.cell-flash-up{animation:cellflash-up .9s ease-out}
.cell-flash-down{animation:cellflash-down .9s ease-out}
@keyframes skelshimmer{100%{background-position:-200% 0}}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.skel-card{height:150px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(90deg,var(--surface) 0%,var(--chip) 50%,var(--surface) 100%);background-size:200% 100%;animation:skelshimmer 1.1s linear infinite}
.news-tick{position:relative}
.breaking{position:absolute;left:0;right:0;top:0;z-index:40;display:flex;align-items:center;gap:9px;height:38px;padding:0 13px;border-radius:9px;background:linear-gradient(100deg,#7f1d1d,#b91c1c);color:#fff;font-size:12.5px;font-weight:600;transform:translateY(-130%);transition:transform var(--dur-base) var(--ease-enter);box-shadow:0 8px 24px rgba(0,0,0,.4);overflow:hidden;white-space:nowrap}
.breaking.show{transform:translateY(0)}
.breaking .bk-tag{flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.06em;background:#fff;color:#b91c1c;padding:2px 7px;border-radius:5px;display:inline-flex;align-items:center;gap:5px}
.breaking .bk-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:#b91c1c;animation:blink 1s infinite}
.breaking span:last-child{overflow:hidden;text-overflow:ellipsis}
.news-track.paused{animation-play-state:paused}
/* responsible: persistent loss-rate disclosure */
.loss-badge{display:flex;align-items:flex-start;gap:6px;margin-top:9px;padding:7px 9px;border-radius:8px;background:var(--down-soft);border:1px solid rgba(239,68,68,.25);font-size:10.5px;line-height:1.35;color:var(--text-2)}
.loss-badge b{color:var(--down);font-weight:800}
.fx-switch #fxCalmBtn.active{background:linear-gradient(135deg,#0ea5e9,#22d3ee);color:#fff}
@media(prefers-reduced-motion:reduce){.skel-card,.breaking .bk-tag::before{animation:none!important}}