/* NORA coming-soon page: the Agents banner with "Coming soon", two buttons and the workflow picture. Written by XWorld; no third-party code. */
.xw-nr-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: max(24vh, 190px) 24px 110px;
    overflow: hidden;
    background-color: #02040a;
    color: #fff;
    text-align: center;
}
.xw-nr-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(2, 4, 10, 0) 0%, #02040a 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        linear-gradient(rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.34)),
        var(--hero) center / cover no-repeat;
}
/* The picture fades from deep blue into the footer's dark, so there is no seam */
.xw-nr-hero::after {
    content: '';
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(260px, 32vw, 480px);
    background: linear-gradient(180deg, rgba(2, 4, 10, 0) 0%, rgba(4, 18, 48, 0.7) 30%, rgba(2, 8, 22, 0.95) 62%, #02040a 90%);
    pointer-events: none;
}
.xw-nr-hero__in { position: relative; z-index: 1; }
.xw-nr-hero h1 {
    margin: 0;
    font-size: clamp(2.75rem, 6vw, 5.125rem);
    font-weight: 600;
    line-height: 1;
    color: #fff;
    animation: xw-nr-rise .9s cubic-bezier(.2, .7, .2, 1) both;
}
.xw-nr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.xw-nr-actions { position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 36px; animation: xw-nr-rise .9s .5s cubic-bezier(.2, .7, .2, 1) both; }
.xw-nr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 189px;
    height: 53px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: transform .25s ease, filter .25s ease, background .25s ease;
}
.xw-nr-btn:hover { transform: translateY(-2px); }
.xw-nr-btn--blue { background: linear-gradient(180deg, #3093f6 0%, #044f9b 100%); }
.xw-nr-btn--blue:hover { filter: brightness(1.1); }
.xw-nr-btn--line { border-color: #fff; background: transparent; }
.xw-nr-btn--line:hover { background: rgba(255, 255, 255, 0.14); }

/* The Nora logo as a loader: it fills with the Nora colours from left to right, a light sweeps over it, a thin bar runs
   underneath. Nothing about the product is shown. */
.xw-nr-loader {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: min(680px, 100%);
    margin: clamp(44px, 6vw, 72px) auto 0;
    padding: clamp(40px, 6vw, 68px) clamp(24px, 6vw, 72px) clamp(34px, 5vw, 52px);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
    box-shadow: 0 30px 110px rgba(47, 155, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    animation: xw-nr-rise 1s .3s cubic-bezier(.2, .7, .2, 1) both;
}
.xw-nr-logo { display: block; width: 100%; height: auto; overflow: visible; animation: xw-nr-glow 3.4s ease-in-out infinite; }
.xw-nr-logo__base { fill: rgba(255, 255, 255, 0.16); }
.xw-nr-logo__fill { transform-box: fill-box; transform-origin: 0 50%; animation: xw-nr-fill 3.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.xw-nr-logo__sheen { animation: xw-nr-sheen 3.4s cubic-bezier(.65, 0, .35, 1) infinite; }
.xw-nr-bar { position: relative; display: block; width: min(220px, 60%); height: 3px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.xw-nr-bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #6fb0ff, #f6e0ea, transparent);
    animation: xw-nr-bar 1.5s ease-in-out infinite;
}

@keyframes xw-nr-fill {
    0% { transform: scaleX(0); opacity: 1; }
    62% { transform: scaleX(1); opacity: 1; }
    88% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
}
@keyframes xw-nr-sheen {
    0%, 6% { transform: translateX(0); opacity: 0; }
    10% { opacity: 1; }
    62% { transform: translateX(238px); opacity: 1; }
    68%, 100% { transform: translateX(238px); opacity: 0; }
}
@keyframes xw-nr-glow {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(31, 139, 255, 0.18)); }
    60%, 88% { filter: drop-shadow(0 0 22px rgba(111, 176, 255, 0.55)); }
}
@keyframes xw-nr-bar {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

@keyframes xw-nr-rise { from { opacity: 0; transform: translateY(18px); } }

/* Coming soon page for sign-in and accounts (pages/coming-soon.blade.php, shown while COMING_SOON is on).
   This banner has no logo card, so its title sits inside the dark fade at the bottom: lift the text above it. */
.xw-cs .xw-nr-hero__in { z-index: 3; }
.xw-cs-lead {
    max-width: 560px;
    margin: 22px auto 0;
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    animation: xw-nr-rise .9s .25s cubic-bezier(.2, .7, .2, 1) both;
}

@media (max-width: 600px) {
    .xw-nr-hero { padding-top: 150px; }
    .xw-nr-actions { flex-direction: column; align-items: stretch; }
    .xw-nr-btn { width: 100%; }
    .xw-nr-loader { border-radius: 20px; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .xw-nr-hero h1, .xw-nr-actions, .xw-nr-loader, .xw-cs-lead { animation: none; }
    /* less motion: the logo stands there complete, in its colours, and the bar is full */
    .xw-nr-logo, .xw-nr-logo__sheen { animation: none; }
    .xw-nr-logo__sheen { opacity: 0; }
    .xw-nr-logo__fill { animation: none; transform: none; opacity: 1; }
    .xw-nr-bar::after { animation: none; width: 100%; }
    .xw-nr-btn { transition: none; }
}