/* This scene is isolated from the page layout. The phone is the supplied alpha PNG. */
.hero { overflow: clip; }
.payment-scene {
  --scene-duration: 16s;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: min(760px, 78vh);
  min-height: 580px;
  color: #f7f6ff;
}
.scene-art { position: absolute; inset: 0 0 48px; perspective: 1200px; }
.scene-aura { position: absolute; border-radius: 50%; pointer-events: none; animation: scene-breathe var(--scene-duration) ease-in-out infinite; }
.scene-aura-violet { width: 102%; height: 87%; left: -1%; top: 2%; background: radial-gradient(ellipse, #7540ff28, #793bff12 42%, transparent 69%); filter: blur(24px); }
.scene-aura-blue { width: 82%; height: 62%; left: 18%; top: 39%; background: radial-gradient(ellipse, #2775ff2b, transparent 69%); filter: blur(22px); animation-delay: -8s; }
.light-orbit { position: absolute; width: 97%; height: 80%; left: 2%; top: 9%; border-radius: 50%; border: 1px solid #b1a1ff24; transform: rotate(-30deg) scaleX(.91); box-shadow: inset 1px 0 0 #b6acff0d, 0 0 32px #634cff08; }
.light-orbit::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: conic-gradient(from 25deg, transparent 0deg 192deg, #596cff18 220deg, #b4a5ffb3 250deg, #eff8ff 254deg, transparent 264deg); padding: 1.5px; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: scene-orbit 20s linear infinite; }
.light-orbit-inner { inset: 14% auto auto 7%; width: 86%; height: 72%; transform: rotate(27deg) scaleX(.83); border-color: #7897ff12; }
.light-orbit-inner::before { opacity: .48; animation-duration: 28s; animation-direction: reverse; }
.device-parallax { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--pointer-y, 0deg)) rotateY(var(--pointer-x, 0deg)); transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.device-turn { position: absolute; inset: 0; transform-origin: 50% 52%; transform-style: preserve-3d; animation: scene-device var(--scene-duration) cubic-bezier(.45,0,.3,1) infinite; will-change: transform; }
.device-surface { position: absolute; left: 50%; top: -16%; height: 120%; aspect-ratio: 2903 / 6291; transform: translateX(-50%); }
.scene-phone { display: block; width: 100%; height: 100%; max-width: none; user-select: none; pointer-events: none; filter: drop-shadow(20px 28px 22px #0006); }
.balance-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.balance-amount { fill: #fafaff; font-family: Arial, sans-serif; font-size: 91px; font-weight: 700; letter-spacing: -3px; font-variant-numeric: tabular-nums; }
.balance-credit { fill: #82f2bd; font-family: Arial, sans-serif; font-size: 28px; font-weight: 600; opacity: 0; transform: translateY(12px); transition: opacity .4s, transform .7s cubic-bezier(.16,1,.3,1); }
.payment-scene[data-phase="paid"] .balance-credit { opacity: 1; transform: translateY(0); }
.scene-shadow { position: absolute; left: 24%; bottom: -3%; width: 60%; height: 5%; z-index: -1; background: radial-gradient(ellipse, #030109b3, transparent 72%); filter: blur(12px); animation: scene-shadow var(--scene-duration) ease-in-out infinite; }
.tap-badge { position: absolute; z-index: 3; top: 18%; right: -1%; display: flex; gap: 10px; align-items: center; padding: 13px 16px; border: 1px solid #b8bbff33; border-radius: 16px; background: linear-gradient(125deg,#232138d9,#111626b3); box-shadow: 0 14px 44px #0003, inset 0 1px 0 #fff1; backdrop-filter: blur(18px); font-size: 12px; font-weight: 600; letter-spacing: .015em; animation: scene-badge var(--scene-duration) ease-in-out infinite; }
.tap-symbol { font-family: system-ui, sans-serif; letter-spacing: -.11em; font-weight: 500; color: #c5ceff; transform: rotate(-14deg); font-size: 22px; margin-right: 4px; }
.tap-indicator { width: 5px; height: 5px; background: #8dffc4; border-radius: 50%; margin-left: 3px; box-shadow: 0 0 10px #6affbe88; }
.payment-notice { position: absolute; z-index: 4; width: 215px; left: -3%; bottom: 18%; padding: 18px 19px 15px; border: 1px solid #e7ddff38; border-radius: 22px; background: linear-gradient(120deg,#2c263edf,#171927e8); backdrop-filter: blur(26px); box-shadow: 0 25px 75px #0006, inset 0 1px 0 #ffffff12; animation: scene-notice var(--scene-duration) ease-in-out infinite; }
.notice-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.notice-brand { font-size: 11px; font-weight: 800; letter-spacing: .1em; color: #e1def1; }
.notice-demo { color: #a29aaf; font-size: 8px; letter-spacing: .14em; }
.notice-body { display: flex; align-items: center; gap: 13px; }
.notice-label { display: block; color: #bbb6cb; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.notice-body strong { display: block; font-size: 29px; line-height: 1.3; letter-spacing: -.05em; font-weight: 600; font-variant-numeric: tabular-nums; }
.notice-icon { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; color: #b8a7ff; background: #a58aff14; border: 1px solid #beaaff30; transition: background .7s, color .7s, border-color .7s; }
.notice-icon svg { width: 20px; height: 20px; opacity: 0; transform: scale(.6); transition: transform .5s, opacity .4s; }
.notice-spinner { position: absolute; inset: 10px; border-radius: 50%; border: 1.5px solid #c9bcff30; border-top-color: #c9bcff; }
.payment-scene[data-phase="processing"] .notice-spinner { animation: scene-orbit 1s linear infinite; }
.payment-scene[data-phase="paid"] .notice-icon { color: #85f3c3; background: #47ffb91a; border-color: #7affb844; box-shadow: 0 0 25px #74ffc40d; }
.payment-scene[data-phase="paid"] .notice-spinner { opacity: 0; }
.payment-scene[data-phase="paid"] .notice-icon svg { opacity: 1; transform: scale(1); }
.payment-scene[data-phase="paid"] .notice-label { color: #b8e5d2; }
.notice-track { height: 2px; border-radius: 2px; background: #ffffff0b; overflow: hidden; margin-top: 18px; }
.notice-track i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--progress,0)); background: linear-gradient(90deg,#8d77e0,#99beff); }
.payment-scene[data-phase="paid"] .notice-track i { background: linear-gradient(90deg,#679db5,#8defc7); }
.scene-stardust { position: absolute; inset: 0; }
.scene-stardust i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #c6ccff; box-shadow: 0 0 14px #9faeff; animation: scene-sparkle 6s ease-in-out infinite; }
.scene-stardust i:nth-child(1) { left: 8%; top: 35%; }
.scene-stardust i:nth-child(2) { right: 7%; top: 64%; animation-delay: -2s; }
.scene-stardust i:nth-child(3) { left: 26%; top: 5%; animation-delay: -4s; width: 2px; height: 2px; }
.scene-stardust i:nth-child(4) { right: 18%; bottom: 7%; animation-delay: -1s; width: 2px; height: 2px; }
.scene-stardust i:nth-child(5) { left: 1%; top: 61%; animation-delay: -3s; width: 2px; height: 2px; }
.scene-controls { position: absolute; bottom: -2px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 17px; }
.scene-caption { font-size: 11px; letter-spacing: .055em; color: #9690ae; }
.scene-toggle { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #ddd7ff26; border-radius: 50%; background: #12102055; color: #c6bedf; cursor: pointer; transition: background .2s, border-color .2s; }
.scene-toggle:hover { background: #3b2e6055; border-color: #ddd7ff66; }
.scene-toggle:focus-visible { outline: 2px solid #b29fff; outline-offset: 4px; }
.scene-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.scene-toggle .play-symbol { display: none; }
.scene-toggle[aria-pressed="true"] .pause-symbol { display: none; }
.scene-toggle[aria-pressed="true"] .play-symbol { display: block; }
.payment-scene.is-paused *, .payment-scene.is-paused *::before, .payment-scene.is-paused *::after,
.payment-scene.is-suspended *, .payment-scene.is-suspended *::before, .payment-scene.is-suspended *::after { animation-play-state: paused !important; }
@keyframes scene-device {
  0%,100% { transform: translate3d(10px,4px,0) rotateY(-26deg) rotateZ(-4deg) scale(.95); }
  48%,58% { transform: translate3d(-3px,-6px,24px) rotateY(7deg) rotateZ(1deg) scale(1); }
}
@keyframes scene-breathe { 50% { transform: scale(1.15) translateY(-2%); opacity: .65; } }
@keyframes scene-orbit { to { transform: rotate(360deg); } }
@keyframes scene-badge { 0%,100% { transform: translate3d(-3px,6px,0) rotate(2deg); } 50% { transform: translate3d(3px,-7px,0) rotate(-2deg); } }
@keyframes scene-notice { 0%,100% { transform: translate3d(0,8px,0) rotate(-3deg); } 50% { transform: translate3d(8px,-6px,0) rotate(1deg); } }
@keyframes scene-shadow { 50% { transform: scaleX(.84); opacity: .6; } }
@keyframes scene-sparkle { 0%,100% { opacity: .1; transform: translateY(5px); } 50% { opacity: .7; transform: translateY(-5px); } }
@media (max-width: 1100px) and (min-width: 901px) {
  .payment-notice { left: 0; width: 195px; padding: 15px; }
  .tap-badge { right: 0; }
}
@media (max-width: 900px) {
  .payment-scene { height: 650px; min-height: 0; width: min(550px,100%); margin: 16px auto 0; text-align: left; }
  .payment-notice { left: 0; }
  .tap-badge { right: 0; }
}
@media (max-width: 540px) {
  .payment-scene { height: 560px; margin-top: 22px; }
  .scene-art { inset: 0 -8px 52px; }
  .device-surface { height: 116%; top: -14%; }
  .payment-notice { width: 182px; padding: 13px 15px; bottom: 14%; left: 0; border-radius: 18px; }
  .notice-top { margin-bottom: 11px; }
  .notice-label { font-size: 10px; }
  .notice-body strong { font-size: 25px; }
  .notice-body { gap: 10px; }
  .notice-icon { width: 31px; height: 31px; }
  .notice-spinner { inset: 8px; }
  .notice-track { margin-top: 12px; }
  .tap-badge { top: 15%; right: 0; font-size: 10px; padding: 10px 12px; gap: 7px; }
  .tap-symbol { font-size: 19px; }
  .scene-caption { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .device-turn { transform: rotateY(0deg); }
  .device-parallax { transform: none; }
  .scene-toggle { display: none; }
}