/* ---------------------------------------------------------------------------------------------------
   Relay splash screen
   Palette follows the Relay theme: purple #6d4bd8 -> blue #3b82f6 -> teal #4fd8b0, navy #22325a.
   Pure CSS + inline SVG so it animates before Angular has booted.
   --------------------------------------------------------------------------------------------------- */

body fuse-splash-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f8f6ff 100%) !important;
    z-index: 999999;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slow drifting aurora behind everything */
body fuse-splash-screen::before,
body fuse-splash-screen::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 760px;
    height: 760px;
    border-radius: 50%;
    pointer-events: none;
}

body fuse-splash-screen::before {
    margin: -470px 0 0 -550px;
    background: radial-gradient(closest-side, rgba(124, 92, 230, 0.14), rgba(124, 92, 230, 0) 100%);
    animation: rl-splash-drift-a 9s ease-in-out infinite alternate;
}

body fuse-splash-screen::after {
    margin: -270px 0 0 -210px;
    background: radial-gradient(closest-side, rgba(59, 130, 246, 0.12), rgba(79, 216, 176, 0.06) 60%, rgba(79, 216, 176, 0) 100%);
    animation: rl-splash-drift-b 11s ease-in-out infinite alternate;
}

body fuse-splash-screen .rl-splash {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---------------------------------------------------------------------------------------------------
   Orb
   --------------------------------------------------------------------------------------------------- */

body fuse-splash-screen .rl-splash__stage {
    position: relative;
    width: 140px;
    height: 140px;
}

/* Soft glow under the orb */
body fuse-splash-screen .rl-splash__stage::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(109, 75, 216, 0.2), rgba(59, 130, 246, 0.06) 60%, rgba(59, 130, 246, 0) 100%);
    animation: rl-splash-glow 3.2s ease-in-out infinite;
}

/* The glass disc the mark sits on */
body fuse-splash-screen .rl-splash__disc {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: 8px;
    left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #ffffff 0%, #faf8ff 55%, #f1edff 100%);
    box-shadow:
        0 18px 38px -14px rgba(109, 75, 216, 0.45),
        0 4px 12px -4px rgba(34, 50, 90, 0.12),
        0 0 0 1px rgba(109, 75, 216, 0.08),
        inset 0 -10px 22px rgba(109, 75, 216, 0.07),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
    animation: rl-splash-pop 700ms cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

body fuse-splash-screen .rl-splash__mark {
    width: 90px;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 4px 8px rgba(109, 75, 216, 0.22));
    animation: rl-splash-float 3.2s ease-in-out infinite;
}

/* Comet ring: faint track + a spinning gradient arc with a glowing head */
body fuse-splash-screen .rl-splash__orbit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    animation: rl-splash-spin 1.9s linear infinite;
}

body fuse-splash-screen .rl-splash__orbit::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 3px solid rgba(109, 75, 216, 0.09);
}

body fuse-splash-screen .rl-splash__arc {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(109, 75, 216, 0) 0deg,
        rgba(109, 75, 216, 0) 140deg,
        #7c4fe0 235deg,
        #3b82f6 310deg,
        #4fd8b0 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}

body fuse-splash-screen .rl-splash__dot {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: #4fd8b0;
    box-shadow: 0 0 10px 2px rgba(79, 216, 176, 0.6);
}

/* Signal ripples: start hidden behind the orb, then fade out as they spread */
body fuse-splash-screen .rl-splash__ring {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(109, 75, 216, 0.4);
    opacity: 0;
    animation: rl-splash-ripple 3s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
}

body fuse-splash-screen .rl-splash__ring:nth-child(2) {
    border-color: rgba(59, 130, 246, 0.35);
    animation-delay: 1.5s;
}

/* ---------------------------------------------------------------------------------------------------
   Mark: waveform bars + R
   --------------------------------------------------------------------------------------------------- */

/* Waveform bars: slide in, then dance like a live conversation */
body fuse-splash-screen .rl-splash__bars {
    animation: rl-splash-bars-in 600ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
}

body fuse-splash-screen .rl-splash__bars path {
    stroke-dasharray: 100 200;
    stroke-dashoffset: 0;
}

body fuse-splash-screen .rl-b1 {
    animation: rl-splash-eq-small 1.15s ease-in-out -0.2s infinite;
}

body fuse-splash-screen .rl-b2 {
    animation: rl-splash-eq 1.35s ease-in-out -0.7s infinite;
}

body fuse-splash-screen .rl-b3 {
    animation: rl-splash-eq 1s ease-in-out -0.45s infinite;
}

body fuse-splash-screen .rl-b4 {
    animation: rl-splash-eq-stem 1.8s ease-in-out -0.3s infinite;
}

/* The R draws itself: bowl first, then the leg */
body fuse-splash-screen .rl-splash__letter path {
    stroke-dasharray: 100 300;
    stroke-dashoffset: 0;
}

body fuse-splash-screen .rl-bowl {
    animation: rl-splash-draw 700ms cubic-bezier(0.65, 0, 0.35, 1) 250ms both;
}

body fuse-splash-screen .rl-leg {
    animation: rl-splash-draw 400ms cubic-bezier(0.65, 0, 0.35, 1) 850ms both;
}

/* Light that travels along the R (bowl -> leg) */
body fuse-splash-screen .rl-splash__glints path {
    stroke-dasharray: 12 300;
    stroke-dashoffset: 12;
    opacity: 0;
}

body fuse-splash-screen .rl-glint-bowl {
    animation: rl-splash-glint-bowl 3.2s ease-in-out 1.5s infinite;
}

body fuse-splash-screen .rl-glint-leg {
    stroke-dasharray: 22 300;
    stroke-dashoffset: 22;
    animation: rl-splash-glint-leg 3.2s ease-in-out 1.5s infinite;
}

/* ---------------------------------------------------------------------------------------------------
   Brand lockup
   --------------------------------------------------------------------------------------------------- */

body fuse-splash-screen .rl-splash__brand {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    font-family: 'Plus Jakarta Sans', 'Inter var', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
    animation: rl-splash-rise 700ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both;
}

body fuse-splash-screen .rl-splash__name {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #22325a;
}

/* Tagline with a light sweep passing through it */
body fuse-splash-screen .rl-splash__tag {
    margin-top: 9px;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    text-transform: uppercase;
    color: #8a91a5;
    background: linear-gradient(90deg, #8a91a5 0%, #8a91a5 38%, #6d4bd8 50%, #8a91a5 62%, #8a91a5 100%);
    background-size: 260% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rl-splash-sweep 2.6s linear 1s infinite;
}

/* ---------------------------------------------------------------------------------------------------
   Keyframes
   --------------------------------------------------------------------------------------------------- */

@keyframes rl-splash-drift-a {
    from {
        transform: translate(0, 0) scale(1);
    }
    to {
        transform: translate(90px, 50px) scale(1.12);
    }
}

@keyframes rl-splash-drift-b {
    from {
        transform: translate(0, 0) scale(1.05);
    }
    to {
        transform: translate(-80px, -40px) scale(0.92);
    }
}

@keyframes rl-splash-glow {
    0%, 100% {
        transform: scale(0.92);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes rl-splash-pop {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rl-splash-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rl-splash-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes rl-splash-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rl-splash-sweep {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0% 0;
    }
}

@keyframes rl-splash-bars-in {
    from {
        opacity: 0;
        transform: translateX(-90px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes rl-splash-draw {
    0% {
        opacity: 0;
        stroke-dashoffset: 100;
    }
    3% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

/* Bars are 100 path units long; a centred dash of length d shrinks/grows the bar around its middle */
@keyframes rl-splash-eq {
    0%, 100% {
        stroke-dasharray: 35 200;
        stroke-dashoffset: -32.5;
    }
    20% {
        stroke-dasharray: 100 200;
        stroke-dashoffset: 0;
    }
    40% {
        stroke-dasharray: 55 200;
        stroke-dashoffset: -22.5;
    }
    60% {
        stroke-dasharray: 90 200;
        stroke-dashoffset: -5;
    }
    80% {
        stroke-dasharray: 45 200;
        stroke-dashoffset: -27.5;
    }
}

@keyframes rl-splash-eq-small {
    0%, 100% {
        stroke-dasharray: 1 200;
        stroke-dashoffset: -49.5;
    }
    25% {
        stroke-dasharray: 100 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 40 200;
        stroke-dashoffset: -30;
    }
    75% {
        stroke-dasharray: 85 200;
        stroke-dashoffset: -7.5;
    }
}

/* The 4th bar is the stem of the R: it stays anchored to the baseline */
@keyframes rl-splash-eq-stem {
    0%, 100% {
        stroke-dasharray: 100 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 82 200;
        stroke-dashoffset: -18;
    }
}

@keyframes rl-splash-glint-bowl {
    0% {
        opacity: 0;
        stroke-dashoffset: 12;
    }
    4%, 40% {
        opacity: 0.85;
    }
    44%, 100% {
        opacity: 0;
        stroke-dashoffset: -100;
    }
}

@keyframes rl-splash-glint-leg {
    0%, 44% {
        opacity: 0;
        stroke-dashoffset: 22;
    }
    47%, 58% {
        opacity: 0.85;
    }
    62%, 100% {
        opacity: 0;
        stroke-dashoffset: -100;
    }
}

/* Rings fade out before they reach the wordmark below the orb */
@keyframes rl-splash-ripple {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    18% {
        opacity: 0.8;
    }
    65%, 100% {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* ---------------------------------------------------------------------------------------------------
   Reduced motion: keep the static mark, drop everything that moves
   --------------------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    body fuse-splash-screen::before,
    body fuse-splash-screen::after,
    body fuse-splash-screen .rl-splash__stage::before,
    body fuse-splash-screen .rl-splash__disc,
    body fuse-splash-screen .rl-splash__mark,
    body fuse-splash-screen .rl-splash__orbit,
    body fuse-splash-screen .rl-splash__ring,
    body fuse-splash-screen .rl-splash__bars,
    body fuse-splash-screen .rl-splash__bars path,
    body fuse-splash-screen .rl-splash__letter path,
    body fuse-splash-screen .rl-splash__glints path,
    body fuse-splash-screen .rl-splash__brand,
    body fuse-splash-screen .rl-splash__tag {
        animation: none !important;
    }

    body fuse-splash-screen .rl-splash__ring {
        display: none;
    }
}

/* ---------------------------------------------------------------------------------------------------
   Hide / show (toggled by FuseSplashScreenService)
   --------------------------------------------------------------------------------------------------- */

body:not(.fuse-splash-screen-hidden) {
    overflow: hidden;
}

body.fuse-splash-screen-hidden fuse-splash-screen {
    visibility: hidden;
    opacity: 0;
}