/* apSpace v34 — responsive lock-screen composition and HD desktop banner */
.apspace-animated-banner-v34{
  position:relative;
  overflow:hidden;
  background:#05020b;
  background-image:url('../assets/images/hero.jpg');
  background-position:center;
  background-size:cover;
}
.apspace-banner-video-v34{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  background:#05020b;
}
.apspace-animated-banner-v34 .hero-shade{pointer-events:none}
[data-apspace-loop-video].apspace-video-paused-v34{filter:none}

/* The lock page uses a compact, uncropped 3:2 banner above the form. */
.login-shell{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:0;
  padding:max(10px,env(safe-area-inset-top)) 18px max(22px,env(safe-area-inset-bottom));
  background:#05020b;
  background-image:
    radial-gradient(circle at 50% 20%,rgba(53,21,108,.24),transparent 48%),
    linear-gradient(180deg,#05020b 0%,#090318 100%);
}
.login-banner-video-v34{
  position:relative;
  inset:auto;
  z-index:1;
  display:block;
  width:min(calc(100vw - 20px),720px);
  height:auto;
  aspect-ratio:3/2;
  flex:0 0 auto;
  object-fit:contain;
  object-position:center;
  background:#05020b;
  border-radius:18px;
  box-shadow:0 18px 54px rgba(0,0,0,.5),0 0 34px rgba(255,48,190,.12);
}
.login-backdrop{
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,transparent 0 24%,rgba(5,2,11,.18) 46%,rgba(5,2,11,.76) 78%,#05020b 100%),
    radial-gradient(circle at 50% 24%,transparent 0 22%,rgba(3,0,12,.12) 62%,rgba(3,0,12,.44) 100%);
}
.login-panel{
  position:relative;
  z-index:2;
  width:min(100%,430px);
  margin-top:-20px;
}

@media (min-width:700px) and (max-width:1099px){
  .login-shell{padding-top:24px}
  .login-banner-video-v34{width:min(72vw,760px)}
  .login-panel{margin-top:-34px}
}

@media (min-width:1100px){
  .login-shell{
    display:grid;
    grid-template-columns:minmax(0,820px) minmax(380px,430px);
    justify-content:center;
    align-items:center;
    gap:clamp(28px,4vw,64px);
    padding:42px clamp(34px,5vw,84px);
  }
  .login-banner-video-v34{
    width:100%;
    max-width:820px;
    border-radius:24px;
  }
  .login-panel{
    width:100%;
    margin:0;
  }
}

@media (max-height:720px) and (max-width:1099px){
  .login-shell{padding-top:8px}
  .login-banner-video-v34{width:min(calc(100vw - 34px),520px)}
  .login-panel{margin-top:-16px}
}

@media (prefers-reduced-motion:reduce){
  [data-apspace-loop-video]{animation:none!important}
}