/* 槿榕 AI · Spatial Film Stage auth skin
   Final visual layer for the approved cinematic login direction. Business
   behaviour remains in index.html and product-experience.js. */

:root[data-theme="light"] {
  --spatial-auth-stage: url("../../assets/auth-spatial-stage-light.jpg");
  --spatial-auth-ink: #172a2e;
  --spatial-auth-muted: #637377;
  --spatial-auth-card: rgba(248, 251, 251, .76);
  --spatial-auth-card-top: rgba(255, 255, 255, .58);
  --spatial-auth-card-border: rgba(255, 255, 255, .82);
  --spatial-auth-input: rgba(241, 246, 246, .7);
  --spatial-auth-input-border: rgba(29, 67, 71, .14);
  --spatial-auth-control: rgba(250, 252, 252, .64);
  --spatial-auth-shadow: rgba(54, 78, 84, .18);
  --spatial-auth-scrim: rgba(232, 242, 243, .04);
  --spatial-auth-vignette: rgba(42, 61, 65, .12);
}

:root[data-theme="dark"] {
  --spatial-auth-stage: url("../../assets/auth-spatial-stage-dark.jpg");
  --spatial-auth-ink: #f2f7f5;
  --spatial-auth-muted: #9aa9a9;
  --spatial-auth-card: rgba(13, 23, 27, .72);
  --spatial-auth-card-top: rgba(198, 238, 226, .07);
  --spatial-auth-card-border: rgba(197, 236, 225, .23);
  --spatial-auth-input: rgba(13, 26, 29, .64);
  --spatial-auth-input-border: rgba(190, 225, 216, .16);
  --spatial-auth-control: rgba(17, 30, 34, .58);
  --spatial-auth-shadow: rgba(0, 7, 10, .58);
  --spatial-auth-scrim: rgba(0, 9, 12, .08);
  --spatial-auth-vignette: rgba(0, 8, 12, .56);
}

.gate {
  min-height: 100dvh;
  padding:
    max(24px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left)) !important;
  color: var(--spatial-auth-ink);
  background: #071215 !important;
}

:root[data-theme="light"] .gate { background: #eaf1f3 !important; }
:root[data-theme="dark"] .gate { background: #071215 !important; }

/* The approved still is a real art asset, not reconstructed UI decoration. */
.gate::after {
  position: absolute;
  z-index: 0;
  inset: -2.5%;
  pointer-events: none;
  background-image: var(--spatial-auth-stage);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  filter: saturate(.96) contrast(1.02);
  transform: scale(1.035);
  animation: spatialAuthStageBreath 24s ease-in-out infinite alternate;
  will-change: transform;
}

:root[data-theme="light"] .gate::after {
  filter: saturate(.82) contrast(.98) brightness(1.02);
}

/* Existing pointer coordinates remain useful as a restrained optical field. */
.gate::before {
  z-index: 1 !important;
  background:
    radial-gradient(38% 34% at var(--auth-pointer-x) var(--auth-pointer-y), rgba(115, 224, 193, .1), transparent 76%),
    linear-gradient(180deg, var(--spatial-auth-scrim), transparent 36%, rgba(3, 19, 21, .08)) !important;
  opacity: 1 !important;
  transition: background 420ms ease, opacity 320ms ease !important;
}

:root[data-theme="light"] .gate::before {
  background:
    radial-gradient(38% 34% at var(--auth-pointer-x) var(--auth-pointer-y), rgba(41, 158, 128, .075), transparent 76%),
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 38%, rgba(53, 93, 97, .055)) !important;
}

/* Retire the prior topology/frame treatment; keep only a very quiet flow veil. */
.gate-spatial,
.gate-ribbons,
.gate-frames,
.gate-refraction {
  display: none !important;
}

.gate-flow {
  z-index: 2 !important;
  opacity: .15 !important;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse 86% 82% at 50% 50%, #000 0 54%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 86% 82% at 50% 50%, #000 0 54%, transparent 92%);
}

:root[data-theme="light"] .gate-flow {
  opacity: .055 !important;
  mix-blend-mode: multiply;
}

.gate-vignette {
  z-index: 3 !important;
  display: block !important;
  background:
    radial-gradient(ellipse 42% 52% at 50% 50%, transparent 46%, rgba(0, 13, 16, .025) 100%),
    linear-gradient(90deg, var(--spatial-auth-vignette), transparent 22% 78%, var(--spatial-auth-vignette)) !important;
  opacity: .86 !important;
}

:root[data-theme="light"] .gate-vignette {
  background:
    radial-gradient(ellipse 42% 52% at 50% 50%, rgba(255,255,255,.08) 32%, transparent 70%),
    linear-gradient(90deg, rgba(76, 99, 104, .08), transparent 21% 79%, rgba(76, 99, 104, .08)) !important;
}

.gate-icp-footer {
  position: absolute;
  z-index: 7;
  right: 18px;
  bottom: max(10px, env(safe-area-inset-bottom));
  left: 18px;
  color: color-mix(in srgb, var(--spatial-auth-ink) 58%, transparent);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
  pointer-events: auto;
}

.gate-icp-footer a {
  color: inherit;
  text-decoration: none;
}

.gate-icp-footer a:hover,
.gate-icp-footer a:focus-visible {
  color: var(--spatial-auth-ink);
  text-decoration: underline;
}

.gate-card {
  --card-spec-x: 50%;
  --card-spec-y: 10%;
  z-index: 6 !important;
  width: min(100%, 398px) !important;
  max-width: 398px !important;
  min-height: 0;
  padding: 30px 30px 25px !important;
  overflow: hidden;
  border: 1px solid var(--spatial-auth-card-border) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(152deg, var(--spatial-auth-card-top), transparent 42%),
    var(--spatial-auth-card) !important;
  box-shadow:
    0 38px 94px var(--spatial-auth-shadow),
    0 8px 24px rgba(0, 11, 14, .12),
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 -1px 0 rgba(1, 28, 27, .1) !important;
  backdrop-filter: blur(30px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.16) !important;
  transition:
    border-color 300ms ease,
    background 420ms ease,
    box-shadow 300ms ease,
    transform 250ms cubic-bezier(.2,.8,.2,1) !important;
  animation-duration: 620ms !important;
}

:root[data-theme="light"] .gate-card,
:root[data-theme="dark"] .gate-card {
  background:
    linear-gradient(152deg, var(--spatial-auth-card-top), transparent 42%),
    var(--spatial-auth-card) !important;
}

.gate-card::before {
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 0 !important;
  background:
    linear-gradient(128deg, rgba(235,255,249,.36), transparent 28% 70%, rgba(39,166,131,.12)) !important;
  opacity: .72 !important;
  -webkit-mask: none !important;
  mask: none !important;
}

:root[data-theme="light"] .gate-card::before {
  background:
    linear-gradient(128deg, rgba(255,255,255,.74), transparent 28% 70%, rgba(23,130,106,.055)) !important;
}

.gate-card::after { display: none !important; }

.gate-card-specular {
  z-index: 0 !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background:
    radial-gradient(ellipse 58% 32% at var(--card-spec-x) var(--card-spec-y), rgba(214,255,243,.24), transparent 72%),
    linear-gradient(118deg, transparent 22%, rgba(255,255,255,.07), transparent 58%) !important;
  opacity: .74 !important;
  mix-blend-mode: screen !important;
}

:root[data-theme="light"] .gate-card-specular {
  background:
    radial-gradient(ellipse 58% 32% at var(--card-spec-x) var(--card-spec-y), rgba(255,255,255,.64), transparent 72%),
    linear-gradient(118deg, transparent 22%, rgba(255,255,255,.18), transparent 58%) !important;
  mix-blend-mode: soft-light !important;
}

.gate-card > :not(.gate-card-specular) {
  position: relative;
  z-index: 1;
}

.gate-logo-ring {
  width: 70px !important;
  height: 70px !important;
  margin: 6px auto 21px !important;
}

.gate-logo-ring::before {
  inset: -8px !important;
  background: conic-gradient(from 16deg, transparent 8%, rgba(125,236,204,.72), transparent 56%, rgba(71,170,145,.24), transparent 84%) !important;
  filter: blur(3px) !important;
  opacity: .78 !important;
  animation-duration: 12s !important;
}

.gate-logo-ring::after {
  inset: -5px !important;
  border-radius: 24px !important;
  box-shadow:
    0 0 0 1px rgba(190, 242, 226, .16),
    0 0 38px rgba(74, 211, 169, .32),
    0 12px 34px rgba(2, 25, 23, .18) !important;
}

.gate-logo {
  width: 70px !important;
  height: 70px !important;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 20px !important;
  box-shadow: 0 14px 34px rgba(0, 16, 17, .28) !important;
  animation: none !important;
}

.gate-card h1 {
  margin: 0 0 24px !important;
  color: var(--spatial-auth-ink) !important;
  font-size: 24px !important;
  font-weight: 720 !important;
  letter-spacing: -.025em !important;
  line-height: 1.25 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  animation: stgUp 500ms var(--ease) 120ms both !important;
}

.gate-card .sub {
  display: none !important;
}

.gate-input,
.gate-input.cred {
  display: block;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 0 12px !important;
  padding: 0 15px !important;
  border: 1px solid var(--spatial-auth-input-border) !important;
  border-radius: 13px !important;
  background: var(--spatial-auth-input) !important;
  color: var(--spatial-auth-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(0,12,13,.04) !important;
  font-size: 16px !important;
  font-weight: 540 !important;
  letter-spacing: .02em !important;
  line-height: 48px !important;
  text-align: left !important;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 180ms ease !important;
}

.gate-input::placeholder,
.gate-input.cred::placeholder {
  color: var(--spatial-auth-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: .04em !important;
  opacity: .88;
}

.gate-input:hover:not(:focus) {
  border-color: color-mix(in srgb, #168267 34%, var(--spatial-auth-input-border)) !important;
}

.gate-input:focus {
  border-color: rgba(23, 142, 109, .62) !important;
  background: color-mix(in srgb, var(--spatial-auth-input) 86%, white 14%) !important;
  box-shadow: 0 0 0 4px rgba(19, 139, 105, .13), inset 0 1px 0 rgba(255,255,255,.16) !important;
  transform: translateY(-1px) !important;
}

:root[data-theme="dark"] .gate-input:focus {
  background: rgba(12, 27, 30, .84) !important;
}

.gate .btn-primary {
  width: 100%;
  height: 48px !important;
  min-height: 48px !important;
  margin: 4px 0 0 !important;
  padding: 0 18px !important;
  border: 1px solid rgba(213, 255, 243, .2) !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #14916e 0%, #087a5b 100%) !important;
  color: #fff !important;
  box-shadow:
    0 14px 28px rgba(5, 94, 70, .24),
    inset 0 1px 0 rgba(255, 255, 255, .34) !important;
  font-size: 15px !important;
  font-weight: 690 !important;
  letter-spacing: .12em !important;
}

.gate .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #1b9c79 0%, #0b8061 100%) !important;
  box-shadow: 0 17px 34px rgba(5,94,70,.3), inset 0 1px 0 rgba(255,255,255,.4) !important;
  transform: translateY(-1px) !important;
}

.gate .btn-primary:active:not(:disabled) {
  transform: scale(.982) !important;
}

.gate-err {
  min-height: 17px !important;
  margin: 10px 0 0 !important;
  color: #dc5a5a !important;
  font-size: 12px !important;
  line-height: 17px;
}

:root[data-theme="dark"] .gate-err { color: #ff9b9b !important; }

.gate-foot {
  min-height: 17px;
  margin: 5px 0 0 !important;
  color: var(--spatial-auth-muted) !important;
  font-size: 12px !important;
  letter-spacing: .015em !important;
}

.gate-lang-toggle,
.jr-gate-theme-toggle {
  position: absolute !important;
  z-index: 4 !important;
  top: 16px !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 1px solid var(--spatial-auth-card-border) !important;
  border-radius: 50% !important;
  background: var(--spatial-auth-control) !important;
  color: var(--spatial-auth-muted) !important;
  box-shadow: 0 8px 22px rgba(0,18,20,.09), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1;
}

.jr-gate-theme-toggle { left: 16px !important; }
.gate-lang-toggle { right: 16px !important; left: auto !important; }

.jr-gate-theme-toggle svg {
  width: 16px;
  height: 16px;
}

.gate-lang-toggle:hover,
.jr-gate-theme-toggle:hover {
  color: #118b6c !important;
  transform: translateY(-1px) !important;
}

.gate .gate-lang-toggle:focus-visible,
.gate .jr-gate-theme-toggle:focus-visible {
  outline: 2px solid rgba(20, 145, 109, .78) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 0 0 6px rgba(20, 145, 109, .12),
    0 8px 22px rgba(0,18,20,.09),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.gate .stg { animation-duration: 500ms !important; }
.gate .stg-1 { animation-delay: 80ms !important; }
.gate .stg-3 { animation-delay: 150ms !important; }
.gate .stg-4 { animation-delay: 200ms !important; }
.gate .stg-5 { animation-delay: 280ms !important; }
.gate .stg-6 { animation-delay: 350ms !important; }

@keyframes spatialAuthStageBreath {
  from { transform: scale(1.035) translate3d(-.25%, -.15%, 0); }
  to { transform: scale(1.065) translate3d(.3%, .2%, 0); }
}

@media (max-width: 700px) {
  .gate {
    align-items: center !important;
    padding:
      max(18px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left)) !important;
  }

  .gate::after {
    inset: -1%;
    background-position: 50% center;
    transform: scale(1.02);
    animation-duration: 28s;
  }

  .gate-flow { opacity: .075 !important; }
  :root[data-theme="light"] .gate-flow { opacity: .028 !important; }

  .gate-card {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    padding: 26px 20px 22px !important;
    border-radius: 25px !important;
    backdrop-filter: blur(24px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.1) !important;
  }

  .gate-logo-ring {
    width: 62px !important;
    height: 62px !important;
    margin: 10px auto 19px !important;
  }

  .gate-logo {
    width: 62px !important;
    height: 62px !important;
    border-radius: 18px !important;
  }

  .gate-card h1 {
    margin-bottom: 22px !important;
    font-size: 22px !important;
  }

  .gate-input,
  .gate-input.cred {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 16px !important;
  }

  .gate-card-specular { display: block !important; }
}

@media (max-height: 640px) {
  .gate-card {
    padding-top: 22px !important;
    padding-bottom: 18px !important;
  }
  .gate-logo-ring {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 14px !important;
  }
  .gate-logo {
    width: 54px !important;
    height: 54px !important;
    border-radius: 16px !important;
  }
  .gate-card h1 { margin-bottom: 16px !important; }
  .gate-foot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gate::after { animation: none !important; }
  .gate-flow { display: none !important; }
  .gate-card { transform: none !important; }
}

@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="light"] .gate-card { background: rgba(248,251,251,.96) !important; }
  :root[data-theme="dark"] .gate-card { background: rgba(13,23,27,.96) !important; }
  .gate-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  :root[data-theme="light"] .gate-card { background: rgba(248,251,251,.97) !important; }
  :root[data-theme="dark"] .gate-card { background: rgba(13,23,27,.97) !important; }
}