/* Promise scenes (parts/promise-scene.php). po = carried card on a sky; dr = drone lifting a card from a drive. */
.prm .prm-stage { position: relative; height: 470px; margin-top: 28px; border-radius: 28px; overflow: hidden; }
.prm-po .prm-stage { background: linear-gradient(180deg, #F4F8FF 0%, #EAF2FF 78%, #DCE8FD 78%, #DCE8FD 100%); }
.prm-dr .prm-stage { background: radial-gradient(ellipse at 50% 110%, rgba(46, 224, 214, .22), transparent 55%), linear-gradient(180deg, #071A35, #0C2549); }

/* Sky: clouds (po) or stars (dr) drifting slowly. */
.prm-sky i { position: absolute; display: block; }
.prm-po .prm-sky i { width: 120px; height: 40px; border-radius: 40px; background: #fff; opacity: .9; animation: prmDrift 38s linear infinite; }
.prm-po .prm-sky i::before, .prm-po .prm-sky i::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.prm-po .prm-sky i::before { width: 56px; height: 56px; left: 18px; top: -28px; }
.prm-po .prm-sky i::after { width: 40px; height: 40px; left: 60px; top: -18px; }
.prm-po .c1 { top: 60px; left: -10%; } .prm-po .c2 { top: 120px; left: 30%; animation-delay: -12s; transform: scale(.7); }
.prm-po .c3 { top: 40px; left: 60%; animation-delay: -24s; } .prm-po .c4 { top: 160px; left: 85%; animation-delay: -6s; transform: scale(.6); }
@keyframes prmDrift { from { translate: -20vw 0; } to { translate: 120vw 0; } }
.prm-dr .prm-sky i { width: 3px; height: 3px; border-radius: 50%; background: #9FE8FF; box-shadow: 120px 40px #9FE8FF, 300px 90px #fff, 520px 30px #9FE8FF, 760px 110px #fff, 940px 60px #9FE8FF, 60px 200px #fff, 860px 220px #9FE8FF; animation: prmTwinkle 3s ease-in-out infinite; }
.prm-dr .c1 { top: 20px; left: 4%; } .prm-dr .c2 { top: 70px; left: 20%; animation-delay: -1s; } .prm-dr .c3 { top: 40px; left: 50%; animation-delay: -2s; } .prm-dr .c4 { display: none; }
@keyframes prmTwinkle { 50% { opacity: .3; } }

/* Card */
.prm-card { position: absolute; left: 50%; top: 70px; width: min(540px, 84%); translate: -50% 0; min-height: 240px; padding: 34px 36px 30px; border-radius: 18px; background: #fff; text-align: center; box-shadow: 0 24px 50px rgba(7, 26, 53, .16); z-index: 2; }
.prm-po .prm-card { animation: prmCarry 1.1s ease-in-out infinite; }
.prm-dr .prm-card { top: 150px; animation: prmHover 3.2s ease-in-out infinite; background: #fff; }
@keyframes prmCarry { 50% { translate: -50% -6px; } }
@keyframes prmHover { 50% { translate: -50% -12px; } }
.prm-mark { width: 46px; height: 46px; fill: none; stroke: var(--blue, #0866FF); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.prm-dr .prm-mark { stroke: #00A7C4; }
.prm-mark .tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: prmTick .7s .2s ease forwards; }
.prm-card.swap .prm-mark .tick { animation: none; }
@keyframes prmTick { to { stroke-dashoffset: 0; } }
.prm-slide h3 { font-family: Sora, sans-serif; font-size: 22px; margin: 10px 0 8px; color: #071A35; }
.prm-slide p { color: #4A5B76; line-height: 1.6; margin: 0 auto 12px; max-width: 420px; }
.prm-slide small { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #EEF4FF; color: #0B5BD3; font-weight: 700; font-size: 12px; }
.prm-dr .prm-slide small { background: #E3FAF8; color: #007C8F; }
.prm-slide.on { animation: prmIn .5s ease; }
@keyframes prmIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* po: walking people whose hands hold the card edges. */
.prm-person { position: absolute; top: 46px; width: 170px; height: 272px; z-index: 1; overflow: visible; }
.prm-person.left { left: calc(50% - min(270px, 42%) - 150px); }
.prm-person.right { left: calc(50% + min(270px, 42%) - 20px); }
.prm-person .leg { fill: none; stroke: #2B5BC0; stroke-width: 26; stroke-linecap: round; transform-box: view-box; transform-origin: 100px 190px; }
.prm-person .l1 { animation: prmStep 1.1s ease-in-out infinite; } .prm-person .l2 { animation: prmStep 1.1s ease-in-out infinite reverse; stroke: #3A6FD8; }
.prm-person.right .l1 { animation-delay: -.55s; } .prm-person.right .l2 { animation-delay: -.55s; }
@keyframes prmStep { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.prm-person .prm-body { animation: prmBob .55s ease-in-out infinite alternate; }
@keyframes prmBob { to { transform: translateY(-5px); } }
.prm-person .torso { fill: #3E7BE6; } .prm-person .head { fill: #F6C9A8; } .prm-person .hair { fill: #2A63D4; }
.prm-person .arm { fill: none; stroke: #5B92F0; stroke-width: 20; stroke-linecap: round; } .prm-person .hand { fill: #9EC0FF; }

/* dr: drone, beam with rising files, drive. */
.prm-drone { position: absolute; left: 50%; top: 22px; width: 260px; translate: -50% 0; z-index: 3; animation: prmHover 3.2s ease-in-out infinite; }
.prm-drone .rotor { fill: rgba(159, 232, 255, .7); transform-box: fill-box; transform-origin: center; animation: prmSpin .18s linear infinite; }
@keyframes prmSpin { 50% { transform: scaleX(.25); } }
.prm-drone .arm, .prm-drone .cable { stroke: #9FB3D3; stroke-width: 4; fill: none; stroke-linecap: round; }
.prm-drone .hull { fill: #1E5BB8; stroke: #2EE0D6; stroke-width: 2; } .prm-drone .eye { fill: #2EE0D6; animation: prmTwinkle 1.6s infinite; }
.prm-beam { position: absolute; left: 50%; bottom: 70px; width: 360px; height: 220px; translate: -50% 0; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); background: linear-gradient(0deg, rgba(46, 224, 214, .35), rgba(46, 224, 214, .02)); z-index: 1; }
.prm-beam .f { position: absolute; bottom: 0; width: 22px; height: 28px; border-radius: 4px; background: #fff; box-shadow: inset 0 -8px 0 rgba(11, 91, 211, .2); animation: prmRise 4s linear infinite; }
.prm-beam .f1 { left: 30%; } .prm-beam .f2 { left: 46%; animation-delay: -1s; background: #FFE08A; } .prm-beam .f3 { left: 58%; animation-delay: -2s; background: #B5F5EC; } .prm-beam .f4 { left: 70%; animation-delay: -3s; background: #FFC9D6; }
@keyframes prmRise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-200px) rotate(20deg); opacity: 0; } }
.prm-drive { position: absolute; left: 50%; bottom: 0; width: 320px; translate: -50% 0; z-index: 2; }
.prm-drive rect { fill: #13325F; stroke: #2EE0D6; stroke-width: 2; } .prm-drive .slot { fill: #0A1F3D; stroke: none; }
.prm-drive .led { fill: #3DDC84; animation: prmTwinkle .9s infinite; }

/* Nav */
.prm-nav { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; display: flex; align-items: center; gap: 10px; z-index: 4; }
.prm-nav button { border: 0; background: transparent; cursor: pointer; padding: 6px; color: #0B5BD3; }
.prm-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.prm-dot { width: 12px; height: 12px; padding: 0 !important; border-radius: 50%; border: 2px solid #0B5BD3 !important; }
.prm-dot.on { background: #0B5BD3 !important; }
.prm-dr .prm-nav button { color: #9FE8FF; } .prm-dr .prm-dot { border-color: #9FE8FF !important; } .prm-dr .prm-dot.on { background: #2EE0D6 !important; border-color: #2EE0D6 !important; }
.prm-dr .prm-stage { height: 570px; } .prm-dr .prm-nav { bottom: 100px; }

@media (max-width: 860px) {
	.prm-person { display: none; }
	.prm-po .prm-stage { height: 420px; }
	.prm-card { width: 90%; padding: 28px 20px; }
	.prm-dr .prm-drone { width: 200px; }
	.prm-dr .prm-card { top: 120px; }
}
@media (prefers-reduced-motion: reduce) {
	.prm *, .prm *::before, .prm *::after { animation: none !important; }
}