/* Continuation only. Every artboard is the supplied SOT, with a camera and data overlays. */
.disney-transaction { position: absolute; inset: 0; z-index: 8; overflow: hidden; background: #03060c; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 240ms; }
.disney-transaction.is-visible { opacity: 1; visibility: visible; }
.transaction-view { position: absolute; inset: 27px 0 57px; overflow: hidden; }
.transaction-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 220ms; }
.transaction-shot.is-current { opacity: 1; }
.transaction-art { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.web-card .transaction-art img { position: absolute; inset: 0; max-width: none; border: 0; border-radius: 0; margin: 0; }
.transaction-phase { position: absolute; top: 9px; left: 14px; right: 14px; color: #b1c0c7; font: 9px/1 "JetBrains Mono",monospace; letter-spacing: .1em; }
.transaction-flow { position: absolute; bottom: 0; left: 0; right: 0; height: 57px; border-top: 1px solid #c1dae326; background: #080e13; display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 9px 14px; }
.transaction-money { color: #efc98b; font: 500 17px/1.3 Disney Manrope,sans-serif; white-space: nowrap; transition: transform 200ms; }
.transaction-flow small { display: block; font: 8px/1.7 "JetBrains Mono",monospace; color: #a5b8bf; }
.transaction-event { color: #c1e8ed; text-align: right; font: 9px/1.7 "JetBrains Mono",monospace; }
.transaction-field { position: absolute; background: #101526; color: #edf0f5; font: 15px/1 Disney Manrope,sans-serif; padding: 10px 0; white-space: nowrap; }
.transaction-field.card { left: 963px; top: 293px; width: 275px; height: 31px; }
.transaction-field.expiry { left: 963px; top: 380px; width: 211px; height: 30px; }
.transaction-field.cvc { left: 1227px; top: 380px; width: 149px; height: 30px; }
.transaction-field.name { left: 963px; top: 466px; width: 457px; height: 31px; }
.transaction-pay { position: absolute; left: 951px; top: 569px; width: 489px; height: 54px; border: 2px solid transparent; border-radius: 12px; }
.transaction-pay.is-pressed { border-color: #fff5d9; background: #ffffff25; box-shadow: 0 0 35px #efc98b90; transform: scale(.985); }
.transaction-sales { position: absolute; left: 868px; top: 284px; width: 146px; height: 44px; background: #081724; color: #eac18a; font: 500 40px/1 Disney Manrope,sans-serif; white-space: nowrap; }
.transaction-gain { position: absolute; left: 868px; top: 333px; width: 136px; height: 32px; background: #081724; color: #44e2bc; font: 500 20px/1.4 Disney Manrope,sans-serif; }
.web-card .experience-caption { position: relative; }
.web-card[data-transaction-phase] .experience-status { visibility: hidden; }
.transaction-pause { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); min-height: 44px; min-width: 44px; padding: 2px 5px; border: 0; background: transparent; color: #c1e8ed; cursor: pointer; font: 11px/1.4 "JetBrains Mono",monospace; }
.transaction-pause:focus-visible { outline: 1px solid #c1e8ed; outline-offset: -4px; border-radius: 5px; }
.transaction-pause[hidden] { display: none; }
.web-card .engine-route li.transaction-active { color: #ecfcff; background: #c1e8ed12; animation: engineAcknowledgement 700ms ease-out; }
.web-card .engine-route li.transaction-active .route-number { text-shadow: 0 0 12px #c1e8ed; }
.web-card .engine-route li.transaction-done em { opacity: 1; }
.web-card .engine-route li.transaction-done::before { border-color: #c1e8ed80; }
.web-card .engine-base .transaction-active, .web-card .engine-sources .transaction-active { color: #ecfcff; text-shadow: 0 0 12px #a1d7e6; }
.web-card[data-transaction-phase="success"] .portal-connection .r3-signal,
.web-card[data-transaction-phase="dashboard"] .portal-connection .r3-signal { animation: requestTransfer 700ms ease-in both; }
.transaction-summary { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media(prefers-reduced-motion:reduce) {
  .disney-transaction, .disney-transaction * { transition: none !important; animation: none !important; }
  .web-card[data-transaction-phase] .engine-route li, .web-card[data-transaction-phase] .r3-signal { transition: none !important; animation: none !important; }
}
