/* =====================================================================
   Register dialog motion: onboarding questions, registration steps, success screen
   ===================================================================== */
:root { --rg-out: cubic-bezier(.2, .7, .2, 1); --rg-spring: cubic-bezier(.34, 1.5, .5, 1); }

@keyframes rgIn { from { opacity: 0; transform: translate(var(--dx, 18px), 14px); } to { opacity: 1; transform: none; } }
@keyframes rgPop { from { opacity: 0; transform: scale(.55) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes rgShake { 0%, 100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes rgBounce { 0% { transform: scale(1); } 40% { transform: scale(.96); } 70% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes rgTick { from { opacity: 0; transform: scale(0) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes rgSweep { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }

/* every step enters as a staggered, direction-aware slide */
.rg__body[data-dir="back"] { --dx: -18px; }
.rg-a { animation: rgIn .5s var(--rg-out) both; animation-delay: calc(min(var(--i, 0), 9) * 55ms); }
.rg-a--pop { animation: rgPop .45s var(--rg-spring) both; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
.is-shake { animation: rgShake .5s cubic-bezier(.36, .07, .19, .97); }

/* progress bar: fill glides, with a light sweep along it */
.rg__track { position: relative; }
.rg__track i { position: relative; overflow: hidden; }
.rg__track i::after { content: ""; position: absolute; inset: 0; width: 35%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); animation: rgSweep 2.6s ease-in-out .8s infinite; }
.rg__prog.is-done .rg__track i::after { display: none; }

/* choices: lift on hover, bounce + tick when chosen */
.rg__opt { position: relative; }
.rg__opt:hover { transform: translateY(-2px); }
.rg__opt[aria-pressed="true"] { animation: rgBounce .35s var(--rg-spring); }
.rg__opt[aria-pressed="true"]:not(.rg__opt--chip)::after { content: ""; position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: #0079fd url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27m6.5 12.5 3.5 3.5 7.5-8%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%272.6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / 16px no-repeat; animation: rgTick .35s var(--rg-spring); }
.rg__cta:not(:disabled):hover { transform: translateY(-1px); }
.rg__cta:not(:disabled):active { transform: scale(.98); }
.rg__input:focus, .rg__phone:focus-within, .rg__otp input:focus { transform: translateY(-1px); }

/* ---------------- success screen ---------------- */
.rg__dialog--ok { padding: 0 28px 26px; }
.rg__dialog--ok .rg__prog { display: none; }
.rg__dialog--ok .rg__x { z-index: 5; background: #fff; box-shadow: 0 0 0 1px rgba(10, 52, 140, .08), 0 2px 8px rgba(10, 52, 140, .12); }
.ok { position: relative; text-align: center; }
.ok__rays { position: absolute; left: -28px; right: -28px; top: 0; height: 200px; overflow: hidden; pointer-events: none; transform-origin: 50% 0; animation: okRays 1.1s var(--rg-out) both; }
.ok__rays img { width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 0; }
@keyframes okRays { from { opacity: 0; transform: scaleY(.3) scaleX(.85); } to { opacity: 1; transform: none; } }
.ok__badge { position: relative; z-index: 1; width: 84px; height: 84px; margin: 38px auto 0; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 10px 28px -6px rgba(10, 52, 140, .28); animation: okBadge .8s var(--rg-spring) .12s both; }
.ok__badge::before, .ok__badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #2cc491; opacity: 0; animation: okRing 1.5s ease-out .55s 2; }
.ok__badge::after { animation-delay: .9s; }
@keyframes okBadge { from { opacity: 0; transform: scale(.2) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes okRing { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.ok__badge svg { overflow: visible; }
.ok__c { fill: none; stroke: #2cc491; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 208; stroke-dashoffset: 208; transform: rotate(-90deg); transform-origin: 40px 40px; animation: rgdraw .7s ease-out .3s forwards; }
.ok__p { fill: none; stroke: #2cc491; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: rgdraw .45s ease-out .85s forwards; }
.ok__burst { position: absolute; left: 50%; top: 80px; width: 0; height: 0; z-index: 3; pointer-events: none; }
.ok__burst i { position: absolute; left: 0; top: 0; border-radius: 2px; opacity: 0; animation: okConf calc(1.5s + var(--d, .3s)) cubic-bezier(.15, .7, .3, 1) 1s both; }
@keyframes okConf { 0% { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0); } 45% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 90px)) scale(.9) rotate(calc(var(--r) * 1.6)); } }
.ok__title { margin: 20px 0 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: #0b1440; animation: rgIn .6s var(--rg-out) .7s both; --dx: 0px; }
.ok__sub { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: #4a5266; animation: rgIn .6s var(--rg-out) .8s both; --dx: 0px; }
.ok__sub--2 { margin-top: 2px; animation-delay: .88s; }
.ok__id { display: inline-flex; gap: 8px; align-items: baseline; margin: 14px 0 0; padding: 7px 14px; border-radius: 999px; background: #f1f8ff; border: 1px solid #d8e8fb; font-size: 12.5px; color: #4a5266; animation: rgPop .5s var(--rg-spring) 1s both; }
.ok__id b { font-size: 13.5px; font-weight: 800; color: #0b1440; letter-spacing: .02em; }
.ok__dates { display: grid; gap: 10px; margin: 20px 0 0; padding: 12px; border-radius: 20px; background: #ebf6ff; text-align: left; list-style: none; }
.ok__dates li { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 14px; border-radius: 14px; background: #fff; animation: rgIn .55s var(--rg-out) both; animation-delay: calc(1.05s + var(--n, 0) * 110ms); --dx: -26px; }
.ok__dates li:nth-child(2) { --n: 1; }
.ok__dates li:nth-child(3) { --n: 2; }
.ok__dates li:nth-child(4) { --n: 3; }
.ok__ic { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #e8f5ff; }
.ok__ic img { width: 34px; height: 34px; filter: drop-shadow(0 3px 4px rgba(10, 52, 140, .2)); animation: rgPop .5s var(--rg-spring) both; animation-delay: calc(1.25s + var(--n, 0) * 110ms); }
.ok__dates time { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: #008dff; }
.ok__dates h3 { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 800; color: #0b1440; }
.ok__head { display: flex; align-items: center; gap: 14px; margin: 22px 0 14px; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .5); animation: rgIn .5s var(--rg-out) 1.55s both; --dx: 0px; }
.ok__head::before, .ok__head::after { content: ""; flex: 1; height: 1px; background: #e0e0e0; }
.ok__social { display: flex; justify-content: center; gap: 22px; }
.ok__s { display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; text-decoration: none; font-family: inherit; font-size: 12px; font-weight: 600; color: #4a5266; cursor: pointer; animation: rgPop .5s var(--rg-spring) both; animation-delay: calc(1.65s + var(--n, 0) * 90ms); }
.ok__s svg { box-sizing: content-box; width: 26px; height: 26px; padding: 15px; border-radius: 50%; transition: transform .2s var(--rg-spring); }
.ok__s:hover svg { transform: translateY(-3px) scale(1.06); }
.ok__s--wa svg { background: #25d366; }
.ok__s--tg { --n: 1; }
.ok__s--tg svg { background: #229ed9; }
.ok__s--cp { --n: 2; }
.ok__s--cp svg { background: #e8f1fd; width: 24px; height: 24px; padding: 16px; }
.ok__msg { min-height: 1.3em; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: #0a8f5c; }
.ok__cta { position: relative; overflow: hidden; margin-top: 8px; gap: 10px; animation: rgIn .55s var(--rg-out) 1.95s both; --dx: 0px; }
.ok__cta::after { content: ""; position: absolute; inset: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); animation: rgSweep 1.4s ease-in-out 2.9s 1; pointer-events: none; }
.ok__later { margin-top: 6px; padding: 12px 18px; border: 0; background: none; font-family: inherit; font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .6); cursor: pointer; animation: rgIn .5s ease 2.1s both; --dx: 0px; }
.ok__later:hover { color: #0b1440; }
@media (max-height: 990px) {
  .ok__badge { margin-top: 30px; width: 76px; height: 76px; }
  .ok__title { margin-top: 14px; font-size: 26px; }
  .ok__dates { gap: 8px; margin-top: 14px; padding: 10px; }
  .ok__dates li { height: 54px; }
  .ok__head { margin: 14px 0 8px; }
  .ok__s svg { padding: 12px; }
  .ok__cta { height: 52px; }
  .ok__sub { font-size: 15px; }
  .ok__id { margin-top: 10px; }
  .ok__msg { min-height: 0; margin: 4px 0 0; }
  .ok__later { margin-top: 2px; padding: 8px 18px; }
}
@media (max-width: 559.98px) { .rg__dialog--ok { padding: 0 20px 22px; } .ok__rays { left: -20px; right: -20px; } }

@media (prefers-reduced-motion: reduce) {
  .rg-a, .rg-a--pop, .ok__rays, .ok__badge, .ok__title, .ok__sub, .ok__id, .ok__dates li, .ok__ic img, .ok__head, .ok__s, .ok__cta, .ok__later, .rg__opt[aria-pressed="true"], .rg__opt[aria-pressed="true"]::after, .is-shake { animation: none !important; }
  .ok__badge::before, .ok__badge::after, .ok__burst, .rg__track i::after, .ok__cta::after { display: none; }
  .ok__c, .ok__p { animation: none; stroke-dashoffset: 0; }
}