/* ═══════════════════════════════════════════════════════════════════════════════
   Confirmation animation — shared by every screen that closes a submitted form.

   The markup for this (.sx-check with its burst, halo, disc and tick) was already
   pasted into several pages, but only the application form carried the styles, so
   everywhere else it rendered as a dead SVG. This file is the one copy.

   Whatever wraps it — .success-screen, .rs-success-screen, .success-msg — gets the
   class `show` when the confirmation is revealed, and that starts the sequence:
   the disc pops, a halo rings out, the tick strokes itself in, sparks fly outward,
   then the copy rises a beat behind it.
   ═══════════════════════════════════════════════════════════════════════════════ */

.sx-check{position:relative;width:132px;height:132px;margin:0 auto 18px;}
.sx-check svg{position:relative;width:100%;height:100%;overflow:visible;}
.sx-halo{fill:none;stroke:rgba(232,0,29,.18);stroke-width:4;
  transform-origin:60px 60px;transform:scale(.6);opacity:0;}
.sx-fill{fill:#E8001D;transform-origin:60px 60px;transform:scale(0);}
.sx-tick{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:70;stroke-dashoffset:70;}
.sx-burst{position:absolute;inset:0;}
.sx-burst i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;
  background:#E8001D;opacity:0;transform:rotate(var(--a)) translateY(0);}
.sx-burst i:nth-child(even){background:#F7979F;width:6px;height:6px;margin:-3px;}

.sx-eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:#E8001D;margin-bottom:8px;}

.success-screen.show .sx-fill,
.rs-success-screen.show .sx-fill,
.success-msg.show .sx-fill{animation:sxPop .55s cubic-bezier(.34,1.56,.64,1) .05s forwards;}
.success-screen.show .sx-halo,
.rs-success-screen.show .sx-halo,
.success-msg.show .sx-halo{animation:sxHalo 1.1s ease-out .35s forwards;}
.success-screen.show .sx-tick,
.rs-success-screen.show .sx-tick,
.success-msg.show .sx-tick{animation:sxTick .45s cubic-bezier(.65,0,.35,1) .45s forwards;}
.success-screen.show .sx-burst i,
.rs-success-screen.show .sx-burst i,
.success-msg.show .sx-burst i{animation:sxBurst .8s cubic-bezier(.16,1,.3,1) .5s forwards;}
.success-screen.show .sx-check,
.rs-success-screen.show .sx-check,
.success-msg.show .sx-check{animation:sxBob 3.4s ease-in-out 1.6s infinite;}

/* The copy follows the tick rather than arriving with it, so the eye lands on the
   confirmation first and reads the detail second. */
.success-screen.show .sx-eyebrow,.success-screen.show .success-title,
.success-screen.show p,.success-screen.show > a,
.rs-success-screen.show .sx-eyebrow,.rs-success-screen.show .success-title,
.rs-success-screen.show p,.rs-success-screen.show > a,
.success-msg.show .sx-eyebrow,.success-msg.show .success-title,
.success-msg.show .success-text,.success-msg.show p,
.success-msg.show .sx-steps li,.success-msg.show .sx-actions{
  opacity:0;animation:sxUp .6s cubic-bezier(.16,1,.3,1) forwards;}
.success-screen.show .sx-eyebrow,
.rs-success-screen.show .sx-eyebrow,
.success-msg.show .sx-eyebrow{animation-delay:.70s;}
.success-screen.show .success-title,
.rs-success-screen.show .success-title,
.success-msg.show .success-title{animation-delay:.78s;}
.success-screen.show p,
.rs-success-screen.show p,
.success-msg.show .success-text,.success-msg.show p{animation-delay:.88s;}
.success-msg.show .sx-steps li:nth-child(1){animation-delay:.98s;}
.success-msg.show .sx-steps li:nth-child(2){animation-delay:1.06s;}
.success-msg.show .sx-steps li:nth-child(3){animation-delay:1.14s;}
.success-screen.show > a,
.rs-success-screen.show > a,
.success-msg.show .sx-actions{animation-delay:1.20s;}

/* The confirmation number sits between the copy and the button on the booking pages. */
.success-screen.show .sx-conf,
.rs-success-screen.show .sx-conf{opacity:0;
  animation:sxUp .6s cubic-bezier(.16,1,.3,1) .98s forwards;}

@keyframes sxPop{to{transform:scale(1);}}
@keyframes sxHalo{0%{opacity:.9;transform:scale(.7);}100%{opacity:0;transform:scale(1.35);}}
@keyframes sxTick{to{stroke-dashoffset:0;}}
@keyframes sxBurst{0%{opacity:1;transform:rotate(var(--a)) translateY(0);}
                   100%{opacity:0;transform:rotate(var(--a)) translateY(-78px);}}
@keyframes sxBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes sxUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

@media(prefers-reduced-motion:reduce){
  .success-screen.show *,.rs-success-screen.show *,.success-msg.show *{
    animation-duration:.01s!important;animation-delay:0s!important;
    animation-iteration-count:1!important;}
}