/* =====================================================================
   Suite-glas en aurora (gedeeld, oktober 2026)
   Identiek in life (public/), webapp en finance (public/css/) en website (css/). Wijzig je er een, kopieer naar alle vier.

   .hero-aurora: zachte, langzaam golvende banen cyaan, violet en een vleugje goud achter de hero.
   Markup: <div class="hero-aurora" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
   als eerste kind van een hero met position: relative.

   Glas: --glass-* tokens en .suite-glass voor panelen, .suite-glass-tile voor tegels erin.
   Overal dezelfde blur, rand en schaduw.
   ===================================================================== */
:root {
    --glass-bg: linear-gradient(150deg, rgba(22, 32, 62, 0.42), rgba(10, 18, 36, 0.26));
    --glass-line: rgba(214, 226, 240, 0.12);
    --glass-blur: blur(18px) saturate(150%);
    --glass-shadow: 0 40px 80px -48px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    --glass-radius: 24px;
    --glass-tile: rgba(236, 230, 214, 0.05);
    --glass-tile-line: rgba(214, 226, 240, 0.1);
}

.suite-glass {
    border-radius: var(--glass-radius);
    background: var(--glass-bg);
    border: 1px solid var(--glass-line);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}
.suite-glass-tile {
    border-radius: 16px;
    background: var(--glass-tile);
    border: 1px solid var(--glass-tile-line);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
}

.hero-aurora {
    position: absolute;
    inset: -10% -6% 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
    mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%);
}
/* Zachte randen komen uit de radiale verlopen zelf, niet uit filter: blur of mix-blend-mode.
   Zo verschuift de GPU alleen kant-en-klare lagen; een bewegende blur van 56px liet Finance en Timeline haperen. */
.hero-aurora span {
    position: absolute;
    display: block;
    will-change: transform, opacity;
}
/* cyaan golf links */
.hero-aurora span:nth-child(1) {
    left: -16%; top: 0; width: 70%; height: 46%;
    background: radial-gradient(closest-side, rgba(46, 196, 206, 0.34), rgba(52, 182, 214, 0.22) 38%, rgba(64, 160, 220, 0.09) 68%, transparent);
    transform: rotate(-12deg);
    animation: aurora-a 34s ease-in-out infinite alternate;
}
/* violet golf door het midden */
.hero-aurora span:nth-child(2) {
    left: 14%; top: 20%; width: 78%; height: 42%;
    background: radial-gradient(closest-side, rgba(128, 98, 230, 0.3), rgba(140, 104, 232, 0.19) 40%, rgba(158, 110, 236, 0.07) 70%, transparent);
    transform: rotate(8deg);
    animation: aurora-b 42s ease-in-out infinite alternate;
}
/* vleugje goud rechts */
.hero-aurora span:nth-child(3) {
    right: -14%; top: -2%; width: 44%; height: 38%;
    background: radial-gradient(closest-side, rgba(221, 178, 71, 0.22), rgba(221, 150, 84, 0.1) 50%, rgba(221, 140, 90, 0.03) 76%, transparent);
    animation: aurora-c 38s ease-in-out infinite alternate;
}
/* dunne cyaan sluier hoog in beeld */
.hero-aurora span:nth-child(4) {
    left: 26%; top: -12%; width: 62%; height: 30%;
    background: radial-gradient(closest-side, rgba(110, 226, 232, 0.2), rgba(126, 172, 236, 0.12) 46%, rgba(140, 120, 240, 0.04) 74%, transparent);
    transform: rotate(-4deg);
    animation: aurora-d 48s ease-in-out infinite alternate;
}
@keyframes aurora-a {
    0% { transform: translate3d(0, 0, 0) rotate(-12deg) scale(1, 1); opacity: 0.8; }
    50% { transform: translate3d(6%, 10%, 0) rotate(-4deg) scale(1.08, 0.86); opacity: 1; }
    100% { transform: translate3d(12%, -4%, 0) rotate(-16deg) scale(0.96, 1.12); opacity: 0.85; }
}
@keyframes aurora-b {
    0% { transform: translate3d(0, 0, 0) rotate(8deg) scale(1, 1); opacity: 1; }
    50% { transform: translate3d(-8%, -12%, 0) rotate(-2deg) scale(1.1, 0.9); opacity: 0.78; }
    100% { transform: translate3d(-3%, 8%, 0) rotate(12deg) scale(0.94, 1.1); opacity: 0.95; }
}
@keyframes aurora-c {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.8; }
    100% { transform: translate3d(-14%, 18%, 0) scale(1.2); opacity: 1; }
}
@keyframes aurora-d {
    0% { transform: translate3d(0, 0, 0) rotate(-4deg); opacity: 0.85; }
    100% { transform: translate3d(-18%, 14%, 0) rotate(6deg) scale(1.15, 1.3); opacity: 1; }
}
html.test-environment.test-view-on .hero-aurora span { filter: hue-rotate(35deg) saturate(0.85); }
@media (prefers-reduced-motion: reduce) {
    .hero-aurora, .hero-aurora span { animation: none; }
}