/* Sub2API auth skin — additive overlay for /login & /register
   Safe: only applies under .ck-auth (tagged by auth-hero.js). If JS never runs, nothing changes. */

:root {
  --ck-cyan: #22d3ee;
  --ck-violet: #818cf8;
  --ck-rose: #fb7185;
  --ck-gold: #fbbf24;
}

/* ---------- background layers (override AuthLayout light gradient) ---------- */
.ck-auth > div.absolute.inset-0:first-child {
  background:
    radial-gradient(1200px 700px at 78% 18%, rgba(56, 89, 199, 0.35), transparent 60%),
    radial-gradient(900px 600px at 12% 82%, rgba(14, 116, 144, 0.35), transparent 60%),
    radial-gradient(700px 500px at 45% 45%, rgba(76, 29, 149, 0.28), transparent 65%),
    linear-gradient(160deg, #05070f 0%, #0a1024 45%, #070b18 100%) !important;
}
.ck-auth > div.absolute.inset-0.pointer-events-none > div {
  opacity: 0 !important;
}
.ck-auth > div.absolute.inset-0.pointer-events-none > div:last-child {
  opacity: 1 !important;
  background:
    linear-gradient(rgba(34, 211, 238, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.05) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: radial-gradient(ellipse at 70% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, black 30%, transparent 75%);
}

/* ---------- layout: push card to the right on wide screens ---------- */
@media (min-width: 1100px) {
  .ck-auth {
    justify-content: flex-end !important;
    padding-right: clamp(2.5rem, 8vw, 11rem) !important;
  }
}

/* ---------- hero stage (created by JS, aria-hidden decorative) ---------- */
.ck-hero {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: clamp(430px, 45vw, 800px);
  z-index: 1;
  overflow: hidden;
  display: none;
  border-right: 1px solid rgba(34, 211, 238, 0.14);
  box-shadow: 40px 0 120px -40px rgba(34, 211, 238, 0.25);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
@media (min-width: 1100px) { .ck-hero { display: block; } }

.ck-hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  filter: blur(14px) saturate(0.9);
  transition: opacity 1.1s ease, filter 1.1s ease, transform 8s ease;
  will-change: opacity, transform;
}
.ck-hero-img.ck-loaded { filter: blur(0) saturate(1.08); }
.ck-hero-img.ck-on {
  opacity: 1;
  transform: scale(1.1);
  animation: ckKenburns 9s ease-in-out infinite alternate;
}
@keyframes ckKenburns {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.2%, -1.6%); }
}

.ck-hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 7, 16, 0.55) 0%, rgba(4, 7, 16, 0.05) 30%, rgba(4, 7, 16, 0.10) 62%, rgba(4, 7, 16, 0.78) 100%),
    linear-gradient(90deg, rgba(4, 7, 16, 0.10) 0%, rgba(4, 7, 16, 0.55) 96%);
  pointer-events: none;
}
.ck-hero-scan {
  position: absolute; inset: -20% 0;
  background: linear-gradient(180deg, transparent 42%, rgba(34, 211, 238, 0.10) 50%, transparent 58%);
  animation: ckScan 7s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes ckScan {
  from { transform: translateY(-30%); }
  to   { transform: translateY(30%); }
}
.ck-hero-vignette {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 140px 30px rgba(2, 4, 10, 0.85);
  pointer-events: none;
}

/* hero parallax wrapper */
.ck-hero-track { position: absolute; inset: -3%; will-change: transform; }

/* speech bubble */
.ck-bubble {
  position: absolute;
  top: clamp(1.2rem, 6vh, 4rem);
  left: clamp(1rem, 4vw, 3rem);
  right: clamp(1rem, 4vw, 3rem);
  z-index: 5;
  pointer-events: none;
}
.ck-bubble-box {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  max-width: 100%;
  padding: 0.7rem 1.05rem;
  border-radius: 14px 14px 14px 4px;
  background: rgba(8, 13, 28, 0.62);
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45), 0 0 24px rgba(34, 211, 238, 0.12) inset;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #e2f4ff;
  font-size: clamp(0.82rem, 1.05vw, 0.98rem);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.ck-caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--ck-cyan);
  margin-left: 3px;
  vertical-align: -0.15em;
  animation: ckBlink 0.9s steps(1) infinite;
  box-shadow: 0 0 8px var(--ck-cyan);
}
@keyframes ckBlink { 50% { opacity: 0; } }

/* power bar (fills while typing password) */
.ck-powerbar {
  margin-top: 0.55rem;
  width: min(240px, 60%);
  height: 5px;
  border-radius: 99px;
  background: rgba(148, 163, 184, 0.18);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.15);
}
.ck-powerbar > i {
  display: block; height: 100%; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--ck-cyan), var(--ck-violet), var(--ck-rose));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.7);
  transition: width 0.25s ease;
}
.ck-powerbar-label {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  color: rgba(148, 197, 255, 0.75);
  text-transform: uppercase;
}

/* hero bottom: dots + chips */
.ck-hero-foot {
  position: absolute;
  left: clamp(1rem, 3.5vw, 2.6rem);
  right: clamp(1rem, 3.5vw, 2.6rem);
  bottom: clamp(1.7rem, 5.5vh, 3.2rem);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  pointer-events: none;
}
.ck-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ck-chip {
  padding: 0.34rem 0.72rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: #d7ecff;
  border-radius: 99px;
  background: rgba(10, 17, 34, 0.55);
  border: 1px solid rgba(129, 140, 248, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  animation: ckChipFloat 5s ease-in-out infinite;
}
.ck-chip:nth-child(2) { animation-delay: -1.6s; }
.ck-chip:nth-child(3) { animation-delay: -3.2s; }
@keyframes ckChipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.ck-dots { display: flex; gap: 0.55rem; pointer-events: auto; }
.ck-dot {
  width: 26px; height: 6px;
  border-radius: 99px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(148, 163, 184, 0.35);
  transition: background 0.3s ease, box-shadow 0.3s ease, width 0.3s ease;
}
.ck-dot.ck-on {
  width: 40px;
  background: linear-gradient(90deg, var(--ck-cyan), var(--ck-violet));
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.8);
}

/* click burst */
.ck-burst {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 6;
  border: 2px solid rgba(34, 211, 238, 0.9);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.8), inset 0 0 12px rgba(34, 211, 238, 0.6);
  opacity: 0;
}
.ck-burst.ck-go { animation: ckBurst 0.65s ease-out forwards; }
@keyframes ckBurst {
  0%   { opacity: 0.95; transform: translate(-50%, -50%) scale(0.4); }
  100% { opacity: 0;     transform: translate(-50%, -50%) scale(26); }
}
.ck-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(148, 224, 255, 0.5), transparent 45%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  mix-blend-mode: screen;
}
.ck-flash.ck-go { animation: ckFlash 0.5s ease-out forwards; }
@keyframes ckFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* hero reacts to form state */
.ck-hero.ck-charge .ck-hero-img.ck-on { filter: blur(0) saturate(1.35) brightness(1.12); }
.ck-hero.ck-charge { box-shadow: 40px 0 160px -30px rgba(34, 211, 238, 0.55); }

/* particles canvas */
.ck-stars {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* ---------- glass card restyle ---------- */
.ck-auth .card-glass {
  position: relative;
  background: rgba(9, 14, 30, 0.58) !important;
  border: 1px solid rgba(148, 163, 184, 0.16) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(34, 211, 238, 0.06),
    0 0 44px rgba(56, 89, 199, 0.18) !important;
  overflow: hidden;
}
.ck-auth .card-glass::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ckang, 0deg),
    transparent 0deg, rgba(34, 211, 238, 0.7) 40deg, transparent 90deg,
    transparent 160deg, rgba(129, 140, 248, 0.7) 210deg, transparent 260deg,
    rgba(251, 113, 133, 0.45) 310deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: ckSpin 6s linear infinite;
}
@property --ckang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ckSpin { to { --ckang: 360deg; } }
@supports not (background: conic-gradient(from var(--ckang, 0deg), red, blue)) {
  .ck-auth .card-glass::before { animation: none; opacity: 0.5; }
}

/* card inner text — force readable on dark glass */
.ck-auth .card-glass :is(h1, h2, h3, .text-gray-900) { color: #f1f5f9 !important; }
.ck-auth .card-glass :is(.text-gray-700, .text-gray-600) { color: #cbd5e1 !important; }
.ck-auth .card-glass :is(.text-gray-500, .text-gray-400) { color: #8ea0b8 !important; }
.ck-auth .card-glass .h-px.bg-gray-200 { background: rgba(148, 163, 184, 0.22) !important; }

/* title block above card */
.ck-auth h1.text-gradient {
  background: linear-gradient(92deg, #67e8f9 0%, #a5b4fc 45%, #f0abfc 80%, #67e8f9 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ckShimmer 5s linear infinite;
  filter: drop-shadow(0 2px 14px rgba(56, 189, 248, 0.35));
}
@keyframes ckShimmer { to { background-position: 220% 0; } }
.ck-auth .relative.z-10 > .mb-8 .text-sm,
.ck-auth .relative.z-10 > .mt-6,
.ck-auth .relative.z-10 > .mt-8 { color: #7d90ac !important; }
.ck-auth .relative.z-10 > .mt-6 a { color: #67e8f9 !important; }
.ck-auth .relative.z-10 > .mb-8 > div:first-child {
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.25), 0 0 34px rgba(34, 211, 238, 0.45) !important;
  animation: ckLogoPulse 3.2s ease-in-out infinite;
}
@keyframes ckLogoPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.22), 0 0 26px rgba(34, 211, 238, 0.35); }
  50%      { box-shadow: 0 0 0 5px rgba(129, 140, 248, 0.3), 0 0 44px rgba(129, 140, 248, 0.55); }
}

/* inputs */
.ck-auth .card-glass input[type="email"],
.ck-auth .card-glass input[type="password"],
.ck-auth .card-glass input[type="text"] {
  background: rgba(6, 11, 24, 0.6) !important;
  border: 1px solid rgba(148, 163, 184, 0.24) !important;
  color: #eef4ff !important;
  caret-color: var(--ck-cyan);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}
.ck-auth .card-glass input::placeholder { color: #5c6d88 !important; }
.ck-auth .card-glass input[type="email"]:focus,
.ck-auth .card-glass input[type="password"]:focus,
.ck-auth .card-glass input[type="text"]:focus {
  border-color: rgba(34, 211, 238, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16), 0 0 22px rgba(34, 211, 238, 0.28) !important;
  background: rgba(8, 15, 32, 0.75) !important;
  outline: none !important;
}
.ck-auth .card-glass input:-webkit-autofill {
  -webkit-text-fill-color: #eef4ff !important;
  -webkit-box-shadow: 0 0 0 60px #0b1328 inset !important;
  transition: background-color 99999s ease-out;
}

/* labels */
.ck-auth .card-glass .input-label,
.ck-auth .card-glass label { color: #aebdd6 !important; }

/* primary button — energy style */
.ck-auth .card-glass .btn.btn-primary {
  position: relative;
  overflow: hidden;
  border: 0 !important;
  background: linear-gradient(135deg, #0891b2 0%, #2563eb 55%, #4f46e5 100%) !important;
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(103, 232, 249, 0.25) inset !important;
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease !important;
}
.ck-auth .card-glass .btn.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: none;
}
.ck-auth .card-glass .btn.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.12);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.55), 0 0 30px rgba(34, 211, 238, 0.35) !important;
}
.ck-auth .card-glass .btn.btn-primary:hover:not(:disabled)::after {
  left: 130%;
  transition: left 0.7s ease;
}
.ck-auth .card-glass .btn.btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.985); }
.ck-auth .card-glass .btn.btn-primary:disabled { opacity: 0.65; }

/* secondary button */
.ck-auth .card-glass .btn.btn-secondary {
  background: rgba(15, 23, 42, 0.55) !important;
  border: 1px solid rgba(129, 140, 248, 0.4) !important;
  color: #c7d2fe !important;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.18s ease !important;
}
.ck-auth .card-glass .btn.btn-secondary:hover:not(:disabled) {
  border-color: rgba(129, 140, 248, 0.85) !important;
  box-shadow: 0 0 22px rgba(129, 140, 248, 0.3) !important;
  transform: translateY(-1px);
}

/* card tilt (JS moves --rx/--ry) */
.ck-auth .relative.z-10.w-full {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.35s ease;
  transform-style: preserve-3d;
}
.ck-auth.ck-tilting .relative.z-10.w-full { transition: transform 0.06s linear; }

/* error / notice boxes inside card stay readable */
.ck-auth .card-glass [class*="bg-red-50"], .ck-auth .card-glass [class*="bg-green-50"] {
  background: rgba(30, 12, 20, 0.5) !important;
}

/* reduced motion: calm everything */
@media (prefers-reduced-motion: reduce) {
  .ck-hero-img.ck-on { animation: none; }
  .ck-hero-scan, .ck-chip, .ck-auth h1.text-gradient,
  .ck-auth .relative.z-10 > .mb-8 > div:first-child,
  .ck-auth .card-glass::before { animation: none !important; }
  .ck-auth .relative.z-10.w-full { transform: none !important; }
}