/* Nav edge-cast — global (NOT scoped) because the layer + glows are created by wwwroot/js/nav-cast.js and appended to , so they carry no Blazor scope attribute. The layer is a fixed overlay positioned over the sidebar (left/top/width/height set inline by JS); each glow hugs the right edge at its source element's height and refracts left into the nav. */ .nav-cast-layer { position: fixed; pointer-events: none; overflow: hidden; /* UNDER the sidebar (z-index 20): the glow shines through the nav's translucent glass and gets dimmed + blurred by its backdrop-filter — real refraction, and the nav content is never tinted */ z-index: 19; } .nav-cast-glow { position: absolute; right: 0; top: var(--cast-y, 50%); /* shallow — hugs the edge; depth scales with the source's size (--cast-strength 0.35–1, set by nav-cast.js from element height) */ width: calc(12% + 22% * var(--cast-strength, 1)); height: var(--cast-h, 160px); transform: translateY(-50%); opacity: 0; /* eases in/out in step with card hover glows (their --transition-slow) */ transition: opacity 0.5s ease; } /* the diffuse bloom — reflection hottest at the right edge, dying off left */ .nav-cast-glow::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to left, color-mix(in srgb, var(--cast-color, transparent) 42%, transparent) 0%, color-mix(in srgb, var(--cast-color, transparent) 17%, transparent) 22%, color-mix(in srgb, var(--cast-color, transparent) 6%, transparent) 52%, transparent 85% ); filter: blur(14px); opacity: var(--cast-strength, 1); /* long feather top/bottom so the bloom disperses softly */ -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 58%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 58%, transparent); } /* the highlight — a very thin line of the cast color on the edge itself (kept out of ::before so the big blur can't smear it away). Its own mask is a pure peak — brightest at the center, tapering continuously — so it reads as a glint, not a painted stripe; the slight blur melts it into the border rather than sitting on top of it. */ .nav-cast-glow::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: color-mix(in srgb, var(--cast-color, transparent) 62%, transparent); opacity: var(--cast-strength, 1); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 50%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 50%, transparent); filter: blur(0.5px); } /* ── top-edge mode — the source has scrolled above the nav, so the light catches the TOP rim of the glass and refracts across it, right → left, hottest at the corner nearest the content. Set by nav-cast.js when the caster's center passes the nav top; decays as it scrolls further up. ── */ .nav-cast-glow.top-edge { top: 0; right: 0; transform: none; width: calc(30% + 45% * var(--cast-strength, 1)); height: 42px; } /* bloom hangs below the rim, fading downward */ .nav-cast-glow.top-edge::before { -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); filter: blur(10px); } /* the rim highlight — a thin line along the top edge, tapering leftward */ .nav-cast-glow.top-edge::after { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; background: linear-gradient( to left, color-mix(in srgb, var(--cast-color, transparent) 62%, transparent) 0%, transparent 90% ); -webkit-mask-image: none; mask-image: none; } @media (prefers-reduced-motion: reduce) { .nav-cast-glow { transition: none; } }