/* =====================================================================
   EDCS CRM - sign-in page
   A CSS 3D scene (perspective + translate3d/rotate only, so it stays
   smooth on light laptops and tablets). No library, nothing loaded
   from outside the server.
   ===================================================================== */

.page-login { background: #FFF7F6; overflow-x: hidden; }
.page-login .ambient { display: none; }
.page-login .auth-wrap { position: relative; z-index: 2; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: none; }

/* ---------- the 3D scene ---------- */
.scene { position: fixed; inset: 0; z-index: 0; overflow: hidden; perspective: 900px; perspective-origin: 50% 42%;
         background:
           radial-gradient(120% 80% at 50% 120%, #FFB9B0 0%, rgba(255, 185, 176, 0) 62%),
           radial-gradient(70% 50% at 10% -10%, #FFF1EE 0%, rgba(255, 241, 238, 0) 70%),
           linear-gradient(180deg, #FFFFFF 0%, #FFF4F2 48%, #FFDCD6 100%); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                background: radial-gradient(75% 65% at 50% 45%, rgba(255, 255, 255, 0) 45%, rgba(126, 46, 38, .16) 100%); }
.stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg);
         transition: transform .6s cubic-bezier(.2, 0, 0, 1); will-change: transform; }

/* receding grid floor */
.floor { position: absolute; left: -60%; right: -60%; top: 56%; height: 150vh; transform-origin: top center; transform: rotateX(78deg);
         background-image:
           linear-gradient(to right, rgba(208, 16, 10, .3) 1px, transparent 1px),
           linear-gradient(to bottom, rgba(208, 16, 10, .26) 1px, transparent 1px);
         background-size: 84px 84px;
         -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .25) 42%, transparent 72%);
         mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .25) 42%, transparent 72%);
         animation: floorRun 9s linear infinite; }
@keyframes floorRun { from { background-position: 0 0; } to { background-position: 0 84px; } }

/* horizon light */
.vignette { position: absolute; inset: 0; background: radial-gradient(36% 34% at 50% 48%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 72%); }
.glow { position: absolute; left: 50%; top: 54%; width: 120vw; height: 42vh; transform: translate3d(-50%, -50%, -280px);
        background: radial-gradient(closest-side, rgba(255, 138, 128, .55), rgba(255, 138, 128, 0) 75%); filter: blur(30px);
        animation: pulse 7s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .55; } to { opacity: .95; } }

/* slowly turning rings */
.orbit { position: absolute; left: 50%; top: 46%; border-radius: 50%; border: 1px solid rgba(208, 16, 10, .3); border-top-color: rgba(208, 16, 10, .65); transform-style: preserve-3d; }
.orbit-1 { width: 620px; height: 620px; margin: -310px 0 0 -310px; animation: spin1 34s linear infinite; }
.orbit-2 { width: 880px; height: 880px; margin: -440px 0 0 -440px; border-color: rgba(106, 105, 103, .22); border-top-color: rgba(106, 105, 103, .5); border-style: dashed; animation: spin2 52s linear infinite; }
.orbit-3 { width: 380px; height: 380px; margin: -190px 0 0 -190px; border-color: rgba(208, 16, 10, .3); animation: spin3 24s linear infinite; }
@keyframes spin1 { from { transform: rotateX(72deg) rotateZ(0deg); } to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes spin2 { from { transform: rotateX(76deg) rotateZ(360deg); } to { transform: rotateX(76deg) rotateZ(0deg); } }
@keyframes spin3 { from { transform: rotateX(66deg) rotateZ(0deg) translateZ(60px); } to { transform: rotateX(66deg) rotateZ(360deg) translateZ(60px); } }

/* frosted panes drifting through depth */
.deck { position: absolute; inset: 0; transform-style: preserve-3d; }
.pane { position: absolute; left: 50%; top: 50%; width: 190px; height: 128px; margin: -64px 0 0 -95px; border-radius: 18px;
        background: linear-gradient(140deg, rgba(255, 255, 255, .96), rgba(255, 244, 242, .82));
        border: 1px solid rgba(255, 255, 255, .9);
        box-shadow: 0 22px 44px -14px rgba(150, 50, 40, .35);
        animation: float 18s ease-in-out infinite alternate; will-change: transform; }
.pane::after { content: ""; position: absolute; left: 14px; right: 14px; top: 18px; height: 8px; border-radius: 4px; background: rgba(208, 16, 10, .35); box-shadow: 0 18px 0 rgba(38, 34, 31, .1), 0 34px 0 rgba(38, 34, 31, .07); }
.p1 { transform: translate3d(-380px, -120px, -120px) rotateY(24deg) rotateX(8deg); animation-duration: 16s; }
.p2 { transform: translate3d(340px, -180px, -260px) rotateY(-26deg) rotateX(10deg); animation-duration: 21s; animation-delay: -4s; }
.p3 { transform: translate3d(-300px, 170px, -60px) rotateY(18deg) rotateX(-8deg); animation-duration: 19s; animation-delay: -8s; }
.p4 { transform: translate3d(420px, 130px, -180px) rotateY(-20deg) rotateX(-6deg); animation-duration: 23s; animation-delay: -2s; }
.p5 { transform: translate3d(-40px, -260px, -420px) rotateY(10deg) rotateX(14deg); animation-duration: 26s; animation-delay: -11s; opacity: .8; }
@keyframes float { from { translate: 0 0 0; } to { translate: 0 -34px 40px; } }

/* drifting light motes */
.motes i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgba(208, 16, 10, .45); filter: blur(1px); animation: drift 26s linear infinite; }
.motes i:nth-child(1) { left: 14%; top: 72%; animation-duration: 22s; }
.motes i:nth-child(2) { left: 28%; top: 84%; animation-duration: 30s; animation-delay: -6s; width: 5px; height: 5px; }
.motes i:nth-child(3) { left: 52%; top: 90%; animation-duration: 26s; animation-delay: -12s; }
.motes i:nth-child(4) { left: 68%; top: 78%; animation-duration: 34s; animation-delay: -18s; width: 6px; height: 6px; }
.motes i:nth-child(5) { left: 84%; top: 88%; animation-duration: 28s; animation-delay: -9s; }
.motes i:nth-child(6) { left: 42%; top: 76%; animation-duration: 38s; animation-delay: -22s; width: 4px; height: 4px; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); opacity: 0; } 12% { opacity: .8; } 80% { opacity: .5; } to { transform: translate3d(40px, -70vh, 220px) scale(1.4); opacity: 0; } }

/* ---------- sign-in card ---------- */
.page-login .auth-card { position: relative; z-index: 2; width: 100%; max-width: 400px; padding: 34px 32px 26px; border-radius: 26px;
                         background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
                         border: 1px solid rgba(255, 255, 255, .85);
                         box-shadow: 0 40px 80px -26px rgba(120, 40, 34, .55), 0 6px 18px -8px rgba(120, 40, 34, .2), inset 0 1px 0 rgba(255, 255, 255, .95);
                         animation: cardIn .7s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translate3d(0, 26px, -80px); } to { opacity: 1; transform: none; } }
.page-login .auth-logo { width: 176px; margin-bottom: 20px; }
.page-login .auth-card h1 { font-size: 30px; margin-bottom: 4px; }
.page-login .auth-card form { gap: 14px; }
.page-login .auth-card input { background: rgba(255, 255, 255, .9); border-radius: 12px; min-height: 46px; }
.page-login .btn-block { width: 100%; justify-content: center; padding: 0 18px; }
.page-login .flash { border-radius: 12px; }
.motion-toggle { display: block; margin: 14px auto 0; background: none; border: 0; padding: 8px 10px; border-radius: 999px; color: var(--muted); font: 500 12.5px var(--body); cursor: pointer; }
.motion-toggle:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }

/* motion off: the scene stays as a still 3D image */
.page-login.motion-off .floor, .page-login.motion-off .glow, .page-login.motion-off .ring,
.page-login.motion-off .pane, .page-login.motion-off .motes i, .page-login.motion-off .auth-card { animation: none !important; }
.page-login.motion-off .stage { transition: none; transform: none !important; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .page-login .auth-card { background: rgba(255, 255, 255, .95); }
}

@media (max-width: 900px) {
  .scene { perspective: 700px; }
  .pane { width: 150px; height: 104px; margin: -52px 0 0 -75px; }
  .p1 { transform: translate3d(-180px, -140px, -140px) rotateY(24deg) rotateX(8deg); }
  .p2 { transform: translate3d(170px, -200px, -240px) rotateY(-26deg) rotateX(10deg); }
  .p3 { transform: translate3d(-160px, 190px, -80px) rotateY(18deg) rotateX(-8deg); }
  .p4 { transform: translate3d(190px, 150px, -200px) rotateY(-20deg) rotateX(-6deg); }
  .p5 { display: none; }
  .orbit-2 { display: none; }
}
@media (max-width: 560px) {
  .page-login .auth-card { padding: 26px 20px 20px; border-radius: 22px; }
  .page-login .auth-logo { width: 150px; }
  .motes i:nth-child(n+4) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .floor, .glow, .ring, .pane, .motes i, .page-login .auth-card { animation: none !important; }
  .stage { transition: none; }
  .motion-toggle { display: none; }
}