/* Motion for the Apple-style pages: the same moves as the RAAS page. Loaded after apple.css. */
.ap-hero::before { display: none; }
.ap-rise { animation: ap-rise .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes ap-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ap-motion [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.ap-motion [data-rv].is-in { opacity: 1; transform: none; }

/* Hero: drifting colour, and a glow that follows the pointer */
.ap-aura { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ap-aura i { position: absolute; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%; filter: blur(90px); opacity: .2; animation: ap-drift 18s ease-in-out infinite alternate; }
.ap-aura i:nth-child(1) { background: #0A84FF; left: -8%; top: -18%; }
.ap-aura i:nth-child(2) { background: #7D5CFF; right: -10%; top: 6%; animation-delay: -6s; }
.ap-aura i:nth-child(3) { background: #5AC8FA; left: 34%; bottom: -34%; opacity: .14; animation-delay: -12s; }
@keyframes ap-drift { to { transform: translate3d(6%, 8%, 0) scale(1.12); } }
.ap-hero::after { content: ""; position: absolute; z-index: -1; left: var(--mx, 50%); top: var(--my, 30%); width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(closest-side, rgba(125,92,255,.15), transparent); opacity: 0; transition: opacity .4s; pointer-events: none; }
.ap-hero.is-glow::after { opacity: 1; }

/* The animated path under the hero */
.ap-flow { width: min(100% - 24px, 1100px); margin: clamp(36px, 6vw, 64px) auto 0; }
.ap-flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.ap-flow-line { fill: none; stroke: #B9B4F5; stroke-width: 1.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.ap-node circle { fill: #fff; stroke: var(--hair); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ap-pop .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .15s + .4s); transition: transform .3s; }
.ap-node:hover circle { transform: scale(1.08); }
.ap-node:nth-of-type(1) circle { stroke: var(--b); } .ap-node:nth-of-type(2) circle { stroke: var(--v); }
.ap-node.is-end circle { fill: var(--v); stroke: var(--v); }
.ap-node text { text-anchor: middle; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; fill: var(--ink); }
@keyframes ap-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.ap-dot { fill: var(--b); offset-distance: 0%; animation: ap-travel 7s linear infinite; }
.ap-dot-2 { fill: var(--v); animation-delay: -2.33s; } .ap-dot-3 { fill: #5AC8FA; animation-delay: -4.66s; }
@keyframes ap-travel { 0% { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 640px) { .ap-node text { font-size: 30px; } .ap-node circle { r: 52px; } }

/* Tiles: an icon, and a soft light that follows the pointer */
.ap-tile { position: relative; overflow: hidden; }
.ap-tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgba(125,92,255,.13), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.ap-tile:hover::before { opacity: 1; }
.ap-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--b), var(--v)); box-shadow: 0 12px 24px -12px rgba(77,70,220,.7); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.ap-ico svg { stroke: currentColor; }
.ap-tile:hover .ap-ico { transform: rotate(-6deg) scale(1.08); }

/* The process: a rail that fills as you scroll, and a dot that lights for each stage you reach */
.ap-steps { position: relative; padding-left: 44px; }
.ap-steps::before { content: ""; position: absolute; left: 11px; top: 44px; bottom: 44px; width: 2px; background: var(--hair); }
.ap-steps::after { content: ""; position: absolute; left: 11px; top: 44px; width: 2px; height: calc((100% - 88px) * var(--p, 0)); background: linear-gradient(180deg, var(--b), var(--v)); }
.ap-steps > li { position: relative; }
.ap-steps > li::before { content: ""; position: absolute; left: -43px; top: 40px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--hair); box-sizing: border-box; transition: background .4s, border-color .4s, box-shadow .4s, transform .4s; z-index: 1; }
.ap-steps > li.is-on::before { background: var(--v); border-color: var(--v); box-shadow: 0 0 0 6px rgba(125,92,255,.16); transform: scale(1.15); }
.ap-steps > li.is-on .ap-step-h span { color: var(--v); }
.ap-steps .ap-get { transition: background .3s; } .ap-steps > li:hover .ap-get { background: #EFEDFF; }
@media (max-width: 780px) { .ap-steps { padding-left: 30px; } .ap-steps::before, .ap-steps::after { left: 6px; } .ap-steps > li::before { left: -30px; width: 12px; height: 12px; } }

/* Components borrowed from the RAAS page sit inside a .rl wrapper */
.rl.ap-rl { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .ap-rise, .ap-aura i, .ap-dot, .ap-node circle { animation: none !important; }
  .ap-dot { opacity: 0; } .ap-hero::after { display: none; }
  .ap-motion [data-rv] { opacity: 1; transform: none; transition: none; }
  .ap-tile::before, .ap-ico { transition: none; }
}

.rl-rail.four { grid-template-columns: repeat(4, 1fr); max-width: 760px; }
.rl-rail.four::before { left: 12.5%; right: 12.5%; }
@media (max-width: 640px) { .rl-rail.four { grid-template-columns: 1fr; } .rl-rail.four::before { left: 22px; right: auto; } }

/* Tiles: every card fills its row, so neighbours are always the same height */
.ap-tiles { align-items: stretch; }
.ap-tiles > li { display: flex; }
.ap-tiles > li > .ap-tile { flex: 1 1 auto; width: 100%; }
.ap-tile .ap-ico { margin-bottom: 4px; }
.ap-tile small { margin-top: 2px; }
.ap-tile p { flex: 0 0 auto; }
.ap-tile > span:last-child { margin-top: auto; }