/* Dynametica cinematic data layer */
.fx-field { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 72% 18%, rgba(21, 98, 174, .14), transparent 30%), radial-gradient(circle at 24% 82%, rgba(204, 20, 31, .08), transparent 28%); }
.fx-grid { position: absolute; left: -25%; right: -25%; bottom: -38%; height: 92%; background-image: linear-gradient(rgba(62, 156, 255, .105) 1px, transparent 1px), linear-gradient(90deg, rgba(62, 156, 255, .105) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.08) 9%, #000 76%); transform: perspective(520px) rotateX(64deg) scale(1.2); transform-origin: center bottom; animation: fx-grid-travel 12s linear infinite; }
.fx-grid::before { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 47%, rgba(241, 40, 50, .32) 50%, transparent 53%); content: ""; animation: fx-grid-pulse 7s ease-in-out infinite; }
.fx-orbit { position: absolute; border: 1px solid rgba(87, 164, 237, .13); border-radius: 50%; box-shadow: inset 0 0 45px rgba(44, 130, 214, .035), 0 0 35px rgba(44, 130, 214, .035); }
.fx-orbit::before, .fx-orbit::after { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #70baff; box-shadow: 0 0 14px 3px rgba(75, 164, 251, .55); content: ""; }
.fx-orbit::before { top: 11%; left: 27%; }
.fx-orbit::after { right: 8%; bottom: 31%; width: 4px; height: 4px; background: var(--red); box-shadow: 0 0 12px 3px rgba(241, 40, 50, .5); }
.fx-orbit--one { top: -280px; right: -170px; width: 680px; height: 680px; animation: fx-orbit-spin 34s linear infinite; }
.fx-orbit--two { left: -270px; bottom: -330px; width: 610px; height: 610px; border-style: dashed; animation: fx-orbit-spin 44s linear infinite reverse; }
.fx-beam { position: absolute; top: -18%; bottom: -18%; left: -25%; width: 18%; background: linear-gradient(90deg, transparent, rgba(55, 159, 255, .035), rgba(125, 200, 255, .12), rgba(55, 159, 255, .035), transparent); filter: blur(7px); transform: skewX(-16deg); animation: fx-beam-cross 9s cubic-bezier(.55,0,.45,1) infinite; }
.fx-signal { position: absolute; width: 7px; height: 7px; border: 1px solid rgba(137, 207, 255, .85); border-radius: 50%; box-shadow: 0 0 14px rgba(62, 156, 255, .9); }
.fx-signal::after { position: absolute; inset: -1px; border: 1px solid rgba(81, 169, 255, .65); border-radius: inherit; content: ""; animation: fx-signal-ring 2.6s ease-out infinite; }
.fx-signal--one { top: 18%; left: 14%; animation: fx-node-float 7s ease-in-out infinite; }
.fx-signal--two { top: 62%; right: 17%; width: 5px; height: 5px; animation: fx-node-float 9s ease-in-out -3s infinite; }
.fx-signal--three { top: 39%; right: 38%; width: 4px; height: 4px; border-color: rgba(255, 70, 80, .8); box-shadow: 0 0 14px rgba(241, 40, 50, .75); animation: fx-node-float 8s ease-in-out -5s infinite; }
.fx-noise { position: absolute; inset: 0; opacity: .18; background-image: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(255,255,255,.012) 4px); animation: fx-noise-shift .22s steps(2) infinite; }
.app-shell, .auth-shell { position: relative; z-index: 1; }

/* App boot choreography */
.sidebar { overflow: hidden; animation: fx-sidebar-in .8s cubic-bezier(.18,.8,.22,1) both; backdrop-filter: blur(16px); }
.sidebar::after { position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; background: linear-gradient(transparent, rgba(150, 215, 255, 1), #ff414b, transparent) 0 -30vh / 100% 30% no-repeat; box-shadow: 0 0 15px rgba(79, 174, 255, .82); content: ""; pointer-events: none; animation: fx-sidebar-scan 5.5s ease-in-out 1s infinite; }
.brand img { animation: fx-logo-flicker 1.15s cubic-bezier(.17,.84,.3,1) both; }
.brand span { animation: fx-letter-track 1s cubic-bezier(.17,.84,.3,1) .15s both; }
.nav-link { animation: fx-nav-in .55s cubic-bezier(.16,.8,.22,1) both; }
.nav-link:nth-child(1) { animation-delay: .2s; }
.nav-link:nth-child(2) { animation-delay: .29s; }
.nav-link:nth-child(3) { animation-delay: .38s; }
.main-content > * { animation: fx-stage-in .72s cubic-bezier(.16,.82,.22,1) both; }
.main-content > *:nth-child(1) { animation-delay: .08s; }
.main-content > *:nth-child(2) { animation-delay: .16s; }
.main-content > *:nth-child(3) { animation-delay: .24s; }
.main-content > *:nth-child(4) { animation-delay: .32s; }
.stat-card { isolation: isolate; }
.stat-card::before, .panel::before, .form-section::before, .detail-section::before, .workflow-panel::before { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(112deg, transparent 15%, rgba(106, 193, 255, .055) 44%, transparent 65%); background-position: 130% 0; background-size: 230% 100%; content: ""; animation: fx-surface-sweep 1.35s ease-out both; }
.stat-card:nth-child(1)::before { animation-delay: .25s; }
.stat-card:nth-child(2)::before { animation-delay: .38s; }
.stat-card:nth-child(3)::before { animation-delay: .51s; }
.stat-card:nth-child(4)::before { animation-delay: .64s; }
.panel, .form-section, .detail-section, .workflow-panel { position: relative; isolation: isolate; }
.panel::before, .form-section::before, .detail-section::before, .workflow-panel::before { animation-delay: .45s; }
.stat-card:hover { border-color: rgba(77, 164, 250, .45); box-shadow: 0 16px 42px rgba(0, 0, 0, .4), inset 0 0 30px rgba(35, 132, 225, .045); }
.button--primary { position: relative; overflow: hidden; }
.button--primary::after { position: absolute; top: -60%; bottom: -60%; left: -40%; width: 26%; background: rgba(255,255,255,.28); filter: blur(5px); content: ""; transform: skewX(-20deg); transition: left .55s ease; }
.button--primary:hover::after { left: 120%; }
.project-table tbody tr { animation: fx-row-in .5s cubic-bezier(.16,.82,.22,1) both; }
.project-table tbody tr:nth-child(1) { animation-delay: .32s; }
.project-table tbody tr:nth-child(2) { animation-delay: .39s; }
.project-table tbody tr:nth-child(3) { animation-delay: .46s; }
.project-table tbody tr:nth-child(4) { animation-delay: .53s; }
.project-table tbody tr:nth-child(5) { animation-delay: .60s; }
.project-table tbody tr:nth-child(6) { animation-delay: .67s; }
.project-table tbody tr:nth-child(7) { animation-delay: .74s; }
.project-table tbody tr:nth-child(8) { animation-delay: .81s; }
.project-table tbody tr:nth-child(9) { animation-delay: .88s; }
.project-table tbody tr:nth-child(10) { animation-delay: .95s; }
.project-table tbody tr:nth-child(n+11) { animation-delay: 1.02s; }

/* Login boot and authentication sequence */
.fx-field--auth .fx-grid { opacity: .78; }
.fx-field--auth .fx-orbit--one { top: 50%; right: 50%; width: 760px; height: 760px; transform: translate(50%, -50%); animation-duration: 42s; }
.fx-field--auth .fx-orbit--two { left: 50%; bottom: auto; top: 50%; width: 530px; height: 530px; transform: translate(-50%, -50%); animation-duration: 31s; }
.login-panel { position: relative; overflow: hidden; isolation: isolate; animation: fx-login-build 1s cubic-bezier(.15,.8,.2,1) both; backdrop-filter: blur(20px); }
.login-panel::before { position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 12%, rgba(76, 171, 255, .08) 45%, transparent 66%); content: ""; transform: translateX(-130%); animation: fx-login-sweep 1.4s cubic-bezier(.2,.7,.2,1) .25s both; }
.login-panel::after { position: absolute; top: -20%; left: 0; right: 0; height: 18%; opacity: 0; background: linear-gradient(transparent, rgba(80, 179, 255, .15), rgba(135, 214, 255, .65), rgba(80, 179, 255, .15), transparent); filter: blur(4px); content: ""; }
.login-corner { position: absolute; z-index: 3; width: 22px; height: 22px; border-color: rgba(93, 182, 255, .6); pointer-events: none; animation: fx-corner-on .45s ease-out .75s both; }
.login-corner--tl { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
.login-corner--tr { top: 10px; right: 10px; border-top: 1px solid; border-right: 1px solid; }
.login-corner--bl { bottom: 10px; left: 10px; border-bottom: 1px solid; border-left: 1px solid; }
.login-corner--br { right: 10px; bottom: 10px; border-right: 1px solid; border-bottom: 1px solid; }
.login-logo { opacity: 0; filter: blur(8px) brightness(1.7); animation: fx-login-logo 1.05s cubic-bezier(.16,.86,.24,1) .22s forwards; }
.login-panel .form-alert, .login-panel .flash { opacity: 0; animation: fx-login-item .52s ease-out .66s forwards; }
.login-panel .field { opacity: 0; animation: fx-login-item .52s ease-out forwards; }
.login-panel .field:nth-of-type(1) { animation-delay: .76s; }
.login-panel .field:nth-of-type(2) { animation-delay: .88s; }
.login-panel [data-login-submit] { opacity: 0; animation: fx-login-item .52s ease-out 1s forwards; }
.auth-sequence { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; color: var(--accent-blue); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: max-height .35s ease, margin .35s ease, opacity .35s ease; }
.auth-sequence > span { display: flex; gap: 4px; }
.auth-sequence i { width: 5px; height: 5px; border-radius: 50%; background: #54adff; box-shadow: 0 0 9px rgba(84, 173, 255, .8); animation: fx-auth-dot .7s ease-in-out infinite alternate; }
.auth-sequence i:nth-child(2) { animation-delay: .15s; }
.auth-sequence i:nth-child(3) { animation-delay: .3s; }
.login-panel.is-authenticating { border-color: rgba(88, 180, 255, .7); box-shadow: 0 0 0 1px rgba(77, 164, 250, .2), 0 0 70px rgba(38, 133, 222, .2), 0 22px 70px rgba(0,0,0,.55); }
.login-panel.is-authenticating::after { opacity: 1; animation: fx-auth-scan 1.05s cubic-bezier(.4,0,.2,1) both; }
.login-panel.is-authenticating .field { opacity: .28 !important; filter: blur(1px); transition: opacity .25s ease, filter .25s ease; }
.login-panel.is-authenticating [data-login-submit] { border-color: #4ba7ff; background: linear-gradient(90deg, #12385d, #176db8, #12385d); background-size: 200% 100%; box-shadow: 0 0 24px rgba(62, 156, 255, .3); animation: fx-auth-button .8s linear infinite; }
.login-panel.is-authenticating .auth-sequence { max-height: 40px; margin-top: 16px; opacity: 1; }

@keyframes fx-grid-travel { from { background-position: 0 0, 0 0; } to { background-position: 0 58px, 58px 0; } }
@keyframes fx-grid-pulse { 0%,100% { transform: translateX(-60%); opacity: 0; } 45%,55% { opacity: 1; } 100% { transform: translateX(60%); } }
@keyframes fx-orbit-spin { to { rotate: 360deg; } }
@keyframes fx-beam-cross { 0%,15% { translate: 0; opacity: 0; } 25% { opacity: 1; } 65%,100% { translate: 850%; opacity: 0; } }
@keyframes fx-signal-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(7); opacity: 0; } }
@keyframes fx-node-float { 0%,100% { translate: 0 0; } 50% { translate: 10px -16px; } }
@keyframes fx-noise-shift { 0% { translate: 0 0; } 50% { translate: 0 1px; } 100% { translate: 0 -1px; } }
@keyframes fx-sidebar-in { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fx-sidebar-scan { 0%,12% { background-position: 0 -30vh; opacity: 0; } 24% { opacity: 1; } 65%,100% { background-position: 0 130vh; opacity: 0; } }
@keyframes fx-logo-flicker { 0% { opacity: 0; filter: blur(7px) brightness(2); transform: scale(.96); } 35% { opacity: .35; } 42% { opacity: .08; } 55% { opacity: .85; } 100% { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); } }
@keyframes fx-letter-track { from { opacity: 0; letter-spacing: .65em; } to { opacity: 1; letter-spacing: .24em; } }
@keyframes fx-nav-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fx-stage-in { from { opacity: 0; filter: blur(5px); transform: translateY(19px) scale(.992); } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes fx-surface-sweep { 0% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
@keyframes fx-row-in { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fx-login-build { 0% { opacity: 0; clip-path: inset(48% 0 48% 0); transform: scaleX(.82); } 50% { opacity: 1; clip-path: inset(48% 0 48% 0); transform: scaleX(1); } 100% { opacity: 1; clip-path: inset(0); transform: scaleX(1); } }
@keyframes fx-login-sweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes fx-corner-on { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
@keyframes fx-login-logo { 0% { opacity: 0; filter: blur(8px) brightness(1.7); transform: scale(.94); } 38% { opacity: .85; } 44% { opacity: .25; } 58% { opacity: 1; } 100% { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); } }
@keyframes fx-login-item { from { opacity: 0; filter: blur(4px); transform: translateY(12px); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
@keyframes fx-auth-scan { from { top: -20%; } to { top: 105%; } }
@keyframes fx-auth-dot { to { opacity: .25; transform: scale(.65); } }
@keyframes fx-auth-button { to { background-position: -200% 0; } }

@media (max-width: 720px) {
    .fx-grid { bottom: -22%; height: 75%; background-size: 42px 42px; }
    .fx-field--auth .fx-orbit--one { width: 520px; height: 520px; }
    .fx-field--auth .fx-orbit--two { width: 360px; height: 360px; }
    .login-panel { backdrop-filter: blur(14px); }
}