:root{
  --page-bg: #0f172a;
  --panel-bg: rgba(15, 23, 42, 0.9);
  --accent-1: #6c4bff;    /* purple */
  --accent-2: #5bd0ff;    /* cyan */
  --accent-3: #ff6fb3;    /* pink */
  --blob-blur: 72px;
  --animation-duration: 18s;
  --dot-opacity: 0.04;
  --panel-radius: 14px;
  --contrast-text: #ffffff;

  --tx: 0px;   /* primary blob translate X */
  --ty: 0px;   /* primary blob translate Y */
  --tx2: 0px;  /* secondary blob translate X */
  --ty2: 0px;  /* secondary blob translate Y */
  --hover-scale: 1;
  --hover-glow: 1;
}

html,body{height:100%;margin:0;background:var(--page-bg);font-family:Inter, system-ui, Roboto, Arial, sans-serif;}

.design-side#design-side {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-height: 420px;
  border-radius: var(--panel-radius) 0 0 var(--panel-radius);
  background: linear-gradient(180deg, rgba(6,10,21,0.55), rgba(6,10,21,0.15));
  isolation: isolate;
  transition: transform 450ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* animated blobs */
.design-side#design-side::before,
.design-side#design-side::after {
  content: "";
  position: absolute;
  inset: -20%;
  filter: blur(var(--blob-blur));
  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--hover-scale));
  will-change: transform, opacity, filter;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.95;
  transition: transform 650ms cubic-bezier(.2,.8,.2,1), filter 650ms ease, opacity 650ms ease;
}

/* primary blob (purple/blue) */
.design-side#design-side::before {
  background:
    radial-gradient(30% 30% at 20% 30%, var(--accent-1) 0%, rgba(108,75,255,0.62) 20%, transparent 45%),
    radial-gradient(20% 20% at 80% 70%, var(--accent-2) 0%, rgba(91,208,255,0.55) 30%, transparent 60%);
  animation: blob-move-1 var(--animation-duration) linear infinite;
  opacity: 0.95;
  transform-origin: center;
}

/* accent blob (pink/cyan) */
.design-side#design-side::after {
  background:
    radial-gradient(25% 25% at 75% 20%, var(--accent-3) 0%, rgba(255,111,179,0.62) 20%, transparent 45%),
    radial-gradient(18% 18% at 30% 80%, var(--accent-2) 0%, rgba(91,208,255,0.45) 30%, transparent 60%);
  animation: blob-move-2 calc(var(--animation-duration) * 0.85) ease-in-out infinite;
  opacity: 0.88;
  transform-origin: center;
  transform: translate3d(var(--tx2), var(--ty2), 0) scale(calc(var(--hover-scale) * 0.98));
}

@keyframes blob-move-1{
  0%   { transform: translate3d(var(--tx), var(--ty), 0) scale(1); }
  25%  { transform: translate3d(calc(var(--tx) * 0.25), calc(var(--ty) * -0.35), 0) scale(1.03); }
  50%  { transform: translate3d(calc(var(--tx) * -0.2), calc(var(--ty) * 0.18), 0) scale(1); }
  75%  { transform: translate3d(calc(var(--tx) * 0.35), calc(var(--ty) * 0.28), 0) scale(0.98); }
  100% { transform: translate3d(var(--tx), var(--ty), 0) scale(1); }
}
@keyframes blob-move-2{
  0%   { transform: translate3d(var(--tx2), var(--ty2), 0) scale(1); }
  25%  { transform: translate3d(calc(var(--tx2) * -0.3), calc(var(--ty2) * 0.4), 0) scale(1.05); }
  50%  { transform: translate3d(calc(var(--tx2) * 0.22), calc(var(--ty2) * -0.12), 0) scale(1); }
  75%  { transform: translate3d(calc(var(--tx2) * -0.12), calc(var(--ty2) * -0.28), 0) scale(0.98); }
  100% { transform: translate3d(var(--tx2), var(--ty2), 0) scale(1); }
}

.design-side#design-side .dots{
  position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,var(--dot-opacity)) 0.8px, transparent 1px);
  background-size: 6px 6px; mix-blend-mode: overlay; opacity:0.55;
}

.design-side#design-side .vignette{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.38) 100%);
  mix-blend-mode: multiply; opacity:0.9;
}

.design-content{
  position: relative; z-index:5; height:100%; display:flex; align-items:center; justify-content:center; padding:48px; box-sizing:border-box;
}

.brand-content{
  position: relative; z-index:6;
  max-width: 420px;
  width: min(86%, 420px);
  padding: 22px 20px;
  box-sizing:border-box;
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
}

.brand-content::before{
  content:"";
  position:absolute;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width: calc(100% + 36px);
  height: calc(100% + 28px);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 10px 40px rgba(2,6,23,0.55);
  z-index:-1; pointer-events:none;
  border: 1px solid rgba(255,255,255,0.04);
}

.brand-content h1{
  margin:0; color:var(--contrast-text); font-size: clamp(26px, 4.4vw, 44px);
  line-height:1.02; font-weight:700; letter-spacing:-0.6px;
  text-shadow: 0 8px 30px rgba(108,75,255,0.12);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), letter-spacing 420ms;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-content:hover {
  transform: translateY(-4px) scale(1.01);
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); */
  transition: all 0.4s ease-out;
}

.brand-content p{
  margin:0; color: rgba(255,255,255,0.86); font-size:14px;
}

.brand-content .accent {
  width: 64px;
  height: 6px;
  border-radius: 999px;
  margin-top: 14px;
  background: rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(108,75,255,0.12);
  align-self: center;
}

.brand-content .accent::after{
  content:"";
  position:absolute;
  left:-40%;
  top:0;
  bottom:0;
  width:40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-12deg);
  filter: blur(6px);
  animation: accent-shimmer 2.4s ease-in-out infinite;
}

@keyframes accent-shimmer{
  0%   { left:-40%; opacity:0; }
  10%  { opacity:1; }
  50%  { left:60%; opacity:1; }
  90%  { opacity:1; }
  100% { left:110%; opacity:0; }
}

.design-side#design-side:hover::before{
  filter: blur(calc(var(--blob-blur) + 8px));
  opacity: 1;
  --hover-scale: 1.03;
}
.design-side#design-side:hover::after{
  filter: blur(calc(var(--blob-blur) - 6px));
  opacity: 1;
}
.design-side#design-side:hover .brand-content h1{
  transform: translateY(-6px);
  letter-spacing: -0.2px;
}
/* .design-side#design-side:hover .brand-content .accent{
  transform: scaleX(1.06) translateX(4px);
  box-shadow: 0 14px 42px rgba(108,75,255,0.22);
} */

@media (hover: none) and (pointer: coarse){
  .design-side#design-side{ transition: none; }
  .design-side#design-side:active{ transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce){
  .design-side#design-side::before,
  .design-side#design-side::after {
    animation: none !important;
    transition: none !important;
  }
  .design-side#design-side,
  .brand-content h1,
  .brand-content .accent { transition: none !important; transform: none !important; }
}

.login-panel { background: var(--panel-bg); border-radius: 0 var(--panel-radius) var(--panel-radius) 0; box-shadow: 0 10px 30px rgba(2,6,23,0.5); border: 1px solid rgba(255,255,255,0.03); }