/* 槿榕 AI · Auth Generative Light Field
   A five-layer cinematic background shared by both themes. Motion lives in
   Canvas; material, depth and responsive fallbacks stay in CSS. */

:root[data-theme="light"] {
  --auth-bg-0: #f7f9fd;
  --auth-bg-1: #eef3f9;
  --auth-bg-2: #e8f0f5;
  --auth-ink: #16343b;
  --auth-muted: #647781;
  --auth-primary: #087a5b;
  --auth-primary-hover: #096f56;
  --auth-secondary: #249cb2;
  --auth-accent: #5577dc;
  --auth-card: rgba(255, 255, 255, .68);
  --auth-card-border: rgba(255, 255, 255, .84);
  --auth-card-highlight: rgba(255, 255, 255, .72);
  --auth-card-shadow: rgba(39, 72, 94, .17);
  --auth-input: rgba(247, 250, 252, .76);
  --auth-input-border: rgba(53, 91, 105, .19);
  --auth-frame: rgba(24, 135, 116, .29);
  --auth-frame-blue: rgba(68, 111, 187, .22);
  --auth-refraction: rgba(255, 255, 255, .44);
  --auth-vignette: rgba(35, 58, 74, .09);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --auth-bg-0: #101722;
  --auth-bg-1: #111b28;
  --auth-bg-2: #0c141e;
  --auth-ink: #eef7f5;
  --auth-muted: #aab9c5;
  --auth-primary: #42bf91;
  --auth-primary-hover: #52c99d;
  --auth-secondary: #56b6c8;
  --auth-accent: #7e96e8;
  --auth-card: rgba(17, 26, 38, .76);
  --auth-card-border: rgba(195, 222, 218, .18);
  --auth-card-highlight: rgba(232, 255, 249, .11);
  --auth-card-shadow: rgba(0, 6, 12, .48);
  --auth-input: rgba(11, 20, 31, .56);
  --auth-input-border: rgba(166, 200, 199, .17);
  --auth-frame: rgba(103, 211, 172, .24);
  --auth-frame-blue: rgba(111, 163, 225, .21);
  --auth-refraction: rgba(14, 24, 36, .58);
  --auth-vignette: rgba(0, 7, 14, .44);
  color-scheme: dark;
}

.gate {
  --auth-pointer-x: 50%;
  --auth-pointer-y: 50%;
  --auth-card-glow: .54;
  --auth-field-energy: 1;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(105% 96% at 50% 46%, transparent 42%, var(--auth-vignette) 100%),
    linear-gradient(145deg, var(--auth-bg-0), var(--auth-bg-1) 54%, var(--auth-bg-2)) !important;
  transition: background 420ms ease, color 320ms ease;
}

.gate::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 42% at var(--auth-pointer-x) var(--auth-pointer-y), rgba(255, 255, 255, .16), transparent 74%),
    linear-gradient(110deg, rgba(255, 255, 255, .18), transparent 32% 68%, rgba(255, 255, 255, .08));
  content: "";
  opacity: .9;
  transition: opacity 300ms ease;
}

:root[data-theme="dark"] .gate::before {
  background:
    radial-gradient(48% 44% at var(--auth-pointer-x) var(--auth-pointer-y), rgba(69, 183, 149, .075), transparent 76%),
    linear-gradient(110deg, rgba(125, 154, 197, .045), transparent 34% 66%, rgba(64, 160, 141, .045));
}

.gate-spatial,
.gate-ribbons,
.gate-frames,
.gate-flow,
.gate-refraction,
.gate-vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Layer 1 · pearl spatial background */
.gate-spatial {
  z-index: 0;
  overflow: hidden;
  opacity: .98;
  transition: opacity 420ms ease;
}

.gate-spatial::before,
.gate-spatial::after,
.gate-spatial-light {
  position: absolute;
  border-radius: 50%;
  content: "";
  filter: blur(72px);
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

.gate-spatial::before {
  top: -34%;
  left: -18%;
  width: 76%;
  height: 86%;
  background: radial-gradient(ellipse, rgba(85, 119, 220, .16), rgba(85, 119, 220, .04) 52%, transparent 74%);
  animation: authSpatialDriftA 29s ease-in-out infinite alternate;
}

.gate-spatial::after {
  right: -20%;
  bottom: -38%;
  width: 82%;
  height: 92%;
  background: radial-gradient(ellipse, rgba(36, 156, 178, .16), rgba(8, 122, 91, .045) 56%, transparent 76%);
  animation: authSpatialDriftB 34s ease-in-out infinite alternate;
}

.gate-spatial-light-a {
  top: 34%;
  left: -18%;
  width: 58%;
  height: 44%;
  background: radial-gradient(ellipse, rgba(28, 143, 123, .13), transparent 72%);
  animation: authSpatialDriftC 23s ease-in-out infinite alternate;
}

.gate-spatial-light-b {
  top: 4%;
  right: 3%;
  width: 34%;
  height: 52%;
  background: radial-gradient(ellipse, rgba(72, 132, 203, .11), transparent 74%);
  animation: authSpatialDriftD 31s ease-in-out infinite alternate;
}

.gate-spatial-light-c {
  left: 30%;
  bottom: -23%;
  width: 48%;
  height: 56%;
  background: radial-gradient(ellipse, rgba(35, 159, 160, .12), transparent 72%);
  animation: authSpatialDriftA 26s ease-in-out -8s infinite alternate-reverse;
}

:root[data-theme="dark"] .gate-spatial { opacity: .76; }
:root[data-theme="dark"] .gate-spatial::before { background: radial-gradient(ellipse, rgba(79, 103, 196, .20), rgba(79, 103, 196, .045) 55%, transparent 76%); }
:root[data-theme="dark"] .gate-spatial::after { background: radial-gradient(ellipse, rgba(37, 160, 173, .14), rgba(22, 109, 82, .055) 58%, transparent 77%); }
:root[data-theme="dark"] .gate-spatial-light-a { background: radial-gradient(ellipse, rgba(26, 128, 96, .15), transparent 74%); }
:root[data-theme="dark"] .gate-spatial-light-b { background: radial-gradient(ellipse, rgba(68, 111, 181, .14), transparent 75%); }

@keyframes authSpatialDriftA {
  from { transform: translate3d(-2%, -1%, 0) scale(.98) rotate(-2deg); }
  to { transform: translate3d(6%, 5%, 0) scale(1.12) rotate(2deg); }
}

@keyframes authSpatialDriftB {
  from { transform: translate3d(3%, 4%, 0) scale(1.02) rotate(1deg); }
  to { transform: translate3d(-7%, -3%, 0) scale(1.14) rotate(-3deg); }
}

@keyframes authSpatialDriftC {
  from { transform: translate3d(-4%, 2%, 0) scale(1.03); opacity: .72; }
  to { transform: translate3d(8%, -5%, 0) scale(1.16); opacity: 1; }
}

@keyframes authSpatialDriftD {
  from { transform: translate3d(4%, -5%, 0) scale(.96); opacity: .64; }
  to { transform: translate3d(-6%, 7%, 0) scale(1.12); opacity: .94; }
}

/* Layer 2 · Canvas volumetric ribbons */
.gate-ribbons {
  z-index: 1;
  opacity: .96;
  transition: opacity 420ms ease, filter 420ms ease;
}

:root[data-theme="dark"] .gate-ribbons { opacity: .82; }

/* Layer 3 · frames intentionally composed around the form */
.gate-frames {
  z-index: 2;
  perspective: 1100px;
  overflow: hidden;
  transition: opacity 420ms ease;
}

.gate-frame {
  --frame-parallax-x: 0px;
  --frame-parallax-y: 0px;
  position: absolute;
  display: block;
  border-radius: clamp(18px, 2.1vw, 36px);
  background:
    linear-gradient(90deg, var(--auth-frame), transparent 34% 66%, var(--auth-frame-blue)) top / 100% 1px no-repeat,
    linear-gradient(90deg, var(--auth-frame-blue), transparent 40% 70%, var(--auth-frame)) bottom / 100% 1px no-repeat,
    linear-gradient(180deg, var(--auth-frame), transparent 35% 70%, var(--auth-frame-blue)) left / 1px 100% no-repeat,
    linear-gradient(180deg, var(--auth-frame-blue), transparent 28% 67%, var(--auth-frame)) right / 1px 100% no-repeat,
    radial-gradient(ellipse at 28% 30%, rgba(255,255,255,.19), transparent 58%);
  box-shadow: inset 0 0 38px rgba(255,255,255,.05), 0 18px 70px rgba(41, 91, 110, .07);
  opacity: 0;
  transform: translate3d(var(--frame-parallax-x), var(--frame-parallax-y), 0) rotateX(var(--frame-rx, 0deg)) rotateY(var(--frame-ry, 0deg)) rotateZ(var(--frame-rz, 0deg));
  animation: authFrameLife var(--frame-duration, 15s) cubic-bezier(.42, 0, .24, 1) var(--frame-delay, 0s) infinite;
  will-change: transform, opacity;
}

.gate-frame::before,
.gate-frame::after,
.gate-frame > i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  content: "";
}

.gate-frame::before {
  background:
    linear-gradient(90deg, transparent, rgba(29, 155, 133, .32), transparent) 0 16% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 12%, rgba(72, 124, 196, .19), transparent 82%) 0 72% / 100% 1px no-repeat,
    linear-gradient(90deg, rgba(8,122,91,.24), transparent 26%) 0 0 / 42% 2px no-repeat,
    linear-gradient(180deg, rgba(36,156,178,.22), transparent 24%) 0 0 / 2px 44% no-repeat;
  opacity: .82;
  animation: authFrameScan 8.5s ease-in-out infinite alternate;
}

.gate-frame::after {
  inset: 10% 8%;
  background:
    radial-gradient(ellipse at 72% 34%, rgba(36, 156, 178, .11), transparent 54%),
    linear-gradient(112deg, transparent 22%, rgba(255,255,255,.09) 48%, transparent 72%);
  filter: blur(8px);
}

.gate-frame > i {
  inset: auto 10% 12%;
  width: 54%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(8,122,91,.42), rgba(85,119,220,.21), transparent);
  box-shadow: 0 0 12px rgba(36,156,178,.18);
  animation: authFrameTrace 6.8s ease-in-out infinite;
}

.gate-frame-1 { top: 9%; left: -4%; width: 31vw; height: 27vh; --frame-rx: 2deg; --frame-ry: 13deg; --frame-rz: -4deg; --frame-duration: 16.8s; --frame-delay: -8.4s; }
.gate-frame-2 { top: 48%; left: 5%; width: 23vw; height: 31vh; --frame-rx: -5deg; --frame-ry: 10deg; --frame-rz: 5deg; --frame-duration: 13.6s; --frame-delay: -2.2s; }
.gate-frame-3 { right: -5%; top: 5%; width: 36vw; height: 25vh; --frame-rx: 3deg; --frame-ry: -12deg; --frame-rz: 3deg; --frame-duration: 18s; --frame-delay: -11.3s; }
.gate-frame-4 { right: 5%; top: 43%; width: 25vw; height: 34vh; --frame-rx: -4deg; --frame-ry: -9deg; --frame-rz: -5deg; --frame-duration: 14.2s; --frame-delay: -6.7s; }
.gate-frame-5 { left: 19%; bottom: -16%; width: 26vw; height: 29vh; --frame-rx: 8deg; --frame-ry: 7deg; --frame-rz: -7deg; --frame-duration: 17.3s; --frame-delay: -12.5s; }
.gate-frame-6 { right: 23%; bottom: -13%; width: 27vw; height: 23vh; --frame-rx: 7deg; --frame-ry: -7deg; --frame-rz: 6deg; --frame-duration: 15.5s; --frame-delay: -4.1s; }

@keyframes authFrameLife {
  0%, 100% { opacity: .05; filter: blur(2px); }
  12% { opacity: .42; filter: blur(.5px); }
  26%, 70% { opacity: .8; filter: blur(0); }
  87% { opacity: .3; filter: blur(1px); }
}

@keyframes authFrameScan {
  from { transform: translate3d(-2%, -3%, 0); opacity: .4; }
  to { transform: translate3d(3%, 4%, 0); opacity: .9; }
}

@keyframes authFrameTrace {
  0%, 100% { transform: translateX(-12%) scaleX(.48); opacity: .25; }
  48% { transform: translateX(72%) scaleX(1.1); opacity: .88; }
  70% { opacity: .16; }
}

/* Layer 4 · Canvas flow particles */
.gate-flow {
  z-index: 3;
  opacity: .94;
  transition: opacity 360ms ease, filter 360ms ease;
}

.gate[data-auth-visual-state="inputFocused"] .gate-flow { opacity: .72; }
.gate[data-auth-visual-state="buttonHovered"] .gate-flow,
.gate[data-auth-visual-state="submitting"] .gate-flow { opacity: 1; }

/* Layer 5 · card-safe refraction and depth */
.gate-refraction {
  z-index: 4;
  background:
    radial-gradient(ellipse min(34vw, 500px) min(48vh, 460px) at 50% 50%, var(--auth-refraction) 0%, rgba(255,255,255,.08) 48%, transparent 78%),
    radial-gradient(ellipse 44% 60% at 50% 51%, transparent 52%, rgba(30, 104, 95, .035) 100%);
  filter: blur(12px);
  opacity: .92;
  transition: opacity 320ms ease, filter 320ms ease;
}

:root[data-theme="dark"] .gate-refraction {
  background:
    radial-gradient(ellipse min(36vw, 520px) min(50vh, 480px) at 50% 50%, var(--auth-refraction) 0%, rgba(12, 21, 32, .22) 52%, transparent 80%),
    radial-gradient(ellipse 46% 64% at 50% 51%, transparent 50%, rgba(73, 172, 145, .025) 100%);
}

.gate-vignette {
  z-index: 4;
  background: radial-gradient(ellipse 66% 72% at 50% 49%, transparent 38%, var(--auth-vignette) 100%) !important;
  opacity: .8;
}

.gate[data-auth-visual-state="inputFocused"] { --auth-card-glow: .74; --auth-field-energy: .82; }
.gate[data-auth-visual-state="buttonHovered"] { --auth-card-glow: .82; --auth-field-energy: 1.1; }
.gate[data-auth-visual-state="submitting"] { --auth-card-glow: .94; --auth-field-energy: 1.24; }
.gate[data-auth-visual-state="success"] { --auth-card-glow: 1; --auth-field-energy: 1.38; }

.gate[data-auth-visual-state="inputFocused"] .gate-refraction { opacity: 1; filter: blur(16px); }
.gate[data-auth-visual-state="buttonHovered"] .gate-ribbons,
.gate[data-auth-visual-state="submitting"] .gate-ribbons { filter: saturate(1.08); }

/* Auth glass card and a restrained environment-driven reflection */
.gate-card {
  --card-spec-x: 50%;
  --card-spec-y: 18%;
  z-index: 6;
  border: 1px solid var(--auth-card-border) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.23), transparent 38%, rgba(36,156,178,.028) 72%, rgba(8,122,91,.045)),
    var(--auth-card) !important;
  box-shadow:
    0 36px 92px var(--auth-card-shadow),
    0 10px 26px rgba(31, 74, 88, .075),
    0 0 0 1px rgba(255,255,255,.18),
    inset 0 1px 0 var(--auth-card-highlight),
    inset 0 -1px 0 rgba(39, 96, 94, .07) !important;
  backdrop-filter: blur(34px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.22) !important;
  transition: border-color 320ms ease, background 420ms ease, box-shadow 320ms ease, transform 250ms cubic-bezier(.2,.8,.2,1);
}

:root[data-theme="dark"] .gate-card {
  background:
    linear-gradient(145deg, rgba(208,242,232,.055), transparent 38%, rgba(36,156,178,.035) 72%, rgba(8,122,91,.045)),
    var(--auth-card) !important;
}

.gate-card::before {
  z-index: 0 !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.46), transparent 34%, rgba(35,156,178,.075) 76%, rgba(8,122,91,.08)) !important;
  opacity: calc(.42 + var(--auth-card-glow) * .25) !important;
  pointer-events: none;
}

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

.gate-card-specular {
  position: absolute !important;
  z-index: 0 !important;
  inset: -1px !important;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 54% 34% at var(--card-spec-x) var(--card-spec-y), rgba(255,255,255,.42), rgba(255,255,255,.08) 46%, transparent 74%),
    linear-gradient(120deg, transparent 16%, rgba(255,255,255,.08), transparent 58%);
  opacity: calc(.16 + var(--auth-card-glow) * .28);
  mix-blend-mode: soft-light;
  transition: opacity 260ms ease;
}

:root[data-theme="dark"] .gate-card-specular {
  background:
    radial-gradient(ellipse 54% 34% at var(--card-spec-x) var(--card-spec-y), rgba(185,242,225,.16), rgba(134,196,191,.035) 48%, transparent 74%),
    linear-gradient(120deg, transparent 16%, rgba(136,202,190,.045), transparent 58%);
  mix-blend-mode: screen;
}

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

.gate-card h1 {
  color: var(--auth-ink) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}

.gate-card .sub,
.gate-foot { color: var(--auth-muted) !important; }

.gate-input,
.gate-input.cred {
  border-color: var(--auth-input-border) !important;
  background: var(--auth-input) !important;
  color: var(--auth-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 2px rgba(24,59,71,.035) !important;
}

.gate-input::placeholder,
.gate-input.cred::placeholder { color: color-mix(in srgb, var(--auth-muted) 82%, transparent) !important; }

.gate-input:hover:not(:focus) { border-color: color-mix(in srgb, var(--auth-secondary) 42%, transparent) !important; }

.gate-input:focus {
  border-color: color-mix(in srgb, var(--auth-primary) 68%, transparent) !important;
  background: color-mix(in srgb, var(--auth-input) 72%, white 28%) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-primary) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

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

.gate .btn-primary {
  border: 1px solid rgba(255,255,255,.22) !important;
  background: linear-gradient(180deg, #118a69 0%, #087a5b 100%) !important;
  color: #fff !important;
  box-shadow: 0 16px 32px rgba(8,122,91,.25), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

.gate .btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #159372 0%, #096f56 100%) !important;
  box-shadow: 0 18px 38px rgba(8,122,91,.29), inset 0 1px 0 rgba(255,255,255,.4) !important;
}

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

.gate .btn-primary:disabled {
  background: linear-gradient(180deg, rgba(17,138,105,.78), rgba(8,122,91,.72)) !important;
  color: rgba(255,255,255,.9) !important;
}

.gate-lang-toggle,
.jr-gate-theme-toggle {
  border-color: color-mix(in srgb, var(--auth-primary) 20%, transparent) !important;
  background: color-mix(in srgb, var(--auth-card) 82%, transparent) !important;
  color: var(--auth-muted) !important;
  box-shadow: 0 8px 20px rgba(27,67,81,.08), inset 0 1px 0 rgba(255,255,255,.18) !important;
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}

.gate-lang-toggle:hover,
.jr-gate-theme-toggle:hover {
  border-color: color-mix(in srgb, var(--auth-primary) 38%, transparent) !important;
  color: var(--auth-primary) !important;
}

@media (max-width: 1100px) {
  .gate-frame-1 { width: 38vw; left: -10%; }
  .gate-frame-2 { width: 31vw; left: 1%; }
  .gate-frame-3 { width: 42vw; right: -12%; }
  .gate-frame-4 { width: 31vw; right: 0; }
  .gate-frame-5, .gate-frame-6 { opacity: .55; }
}

@media (max-width: 700px) {
  .gate-spatial::before,
  .gate-spatial::after,
  .gate-spatial-light { filter: blur(48px); }
  .gate-frame-1 { top: 3%; left: -28%; width: 72vw; height: 21vh; }
  .gate-frame-2 { left: -30%; top: 66%; width: 68vw; height: 24vh; }
  .gate-frame-3 { right: -32%; top: 7%; width: 74vw; height: 22vh; }
  .gate-frame-4 { right: -31%; top: 66%; width: 67vw; height: 25vh; }
  .gate-frame-5,
  .gate-frame-6 { display: none; }
  .gate-refraction {
    background: radial-gradient(ellipse 86vw 62vh at 50% 50%, var(--auth-refraction) 0%, rgba(255,255,255,.06) 58%, transparent 84%);
  }
  .gate-card {
    backdrop-filter: blur(24px) saturate(1.14) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.14) !important;
  }
  .gate-card-specular { display: none; }
}

@media (max-height: 720px) and (min-width: 701px) {
  .gate-frame-2, .gate-frame-4 { opacity: .42; }
  .gate-refraction { filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .gate-spatial::before,
  .gate-spatial::after,
  .gate-spatial-light,
  .gate-frame,
  .gate-frame::before,
  .gate-frame > i { animation: none !important; }
  .gate-frame { opacity: .48; }
  .gate-frame-1, .gate-frame-3, .gate-frame-4, .gate-frame-5 { opacity: .56; }
  .gate-card,
  .gate-card-specular,
  .gate-ribbons,
  .gate-flow { transition-duration: .01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="light"] .gate-card { background: #f7fafc !important; }
  :root[data-theme="dark"] .gate-card { background: #152130 !important; }
  .gate-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .gate-card-specular { display: none; }
}

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