/* JcDesigner AI / Cyber Visual Layer - performance safe and accessibility aware */
:root {
  --jcd-ai-cyan: #00d4ff;
  --jcd-ai-blue: #246bfe;
  --jcd-ai-violet: #8b5cf6;
  --jcd-ai-pink: #ff006e;
}

body.jcd-ai-ready {
  isolation: isolate;
  overflow-x: hidden;
}

body.jcd-ai-ready > *:not(#jcd-ai-canvas):not(.jcd-ai-grid):not(.jcd-cursor-aura):not(.jcd-scan-beam) {
  position: relative;
  z-index: 1;
}

#jcd-ai-canvas,
.jcd-ai-grid,
.jcd-cursor-aura,
.jcd-scan-beam {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#jcd-ai-canvas {
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: .44;
  mix-blend-mode: screen;
}

.jcd-ai-grid {
  z-index: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(0, 212, 255, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, .11) 1px, transparent 1px),
    radial-gradient(circle at 50% 10%, rgba(36, 107, 254, .15), transparent 48%);
  background-size: 54px 54px, 54px 54px, 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.2) 75%, transparent);
  animation: jcdGridDrift 24s linear infinite;
}

.jcd-scan-beam {
  z-index: 2;
  height: 18vh;
  top: -20vh;
  background: linear-gradient(to bottom, transparent, rgba(0,212,255,.035), rgba(0,212,255,.12), transparent);
  filter: blur(2px);
  animation: jcdScan 12s ease-in-out infinite;
}

.jcd-cursor-aura {
  z-index: 0;
  width: 360px;
  height: 360px;
  inset: auto;
  left: var(--jcd-pointer-x, 50vw);
  top: var(--jcd-pointer-y, 30vh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,.15), rgba(139,92,246,.06) 38%, transparent 70%);
  filter: blur(12px);
  transition: left .08s linear, top .08s linear;
}

.jcd-cyber-card {
  --jcd-tilt-x: 0deg;
  --jcd-tilt-y: 0deg;
  transform: perspective(1100px) rotateX(var(--jcd-tilt-x)) rotateY(var(--jcd-tilt-y));
  transform-style: preserve-3d;
  will-change: transform;
}

.jcd-cyber-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 15%, rgba(255,255,255,.10) 43%, rgba(0,212,255,.15) 50%, transparent 62%);
  transform: translateX(-40%);
  transition: opacity .35s ease, transform .65s ease;
}

.jcd-cyber-card:hover::after {
  opacity: 1;
  transform: translateX(34%);
}

.jcd-reveal {
  opacity: 0;
  transform: translateY(24px) scale(.985);
  filter: blur(7px);
  transition: opacity .75s cubic-bezier(.2,.8,.2,1), transform .75s cubic-bezier(.2,.8,.2,1), filter .75s ease;
}

.jcd-reveal.jcd-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.jcd-neural-line {
  position: relative;
}

.jcd-neural-line::before {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--jcd-ai-cyan), var(--jcd-ai-violet), transparent);
  opacity: .35;
  filter: drop-shadow(0 0 7px var(--jcd-ai-cyan));
  background-size: 200% 100%;
  animation: jcdDataPulse 5s linear infinite;
}

.mobile-auth-controls {
  width: min(340px, calc(100vw - 48px));
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 212, 255, .18);
}

.mobile-auth-button,
.mobile-dashboard-link,
.mobile-logout-button {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(0, 212, 255, .32);
  border-radius: 12px;
  background: rgba(0, 212, 255, .08);
  color: var(--color-accent-primary, #00d4ff);
  font: 700 .82rem var(--font-heading, 'Orbitron', sans-serif);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
}

.mobile-auth-button:hover,
.mobile-dashboard-link:hover,
.mobile-logout-button:hover {
  background: rgba(0, 212, 255, .16);
  box-shadow: 0 0 24px rgba(0, 212, 255, .18);
}

.mobile-user-menu {
  display: grid;
  gap: 10px;
}


.mobile-auth-dock {
  display: none;
  position: fixed;
  left: 16px;
  bottom: 18px;
  z-index: 9800 !important;
  width: min(250px, calc(100vw - 96px));
  padding: 0;
  border-top: 0;
}

.mobile-auth-dock .mobile-auth-button,
.mobile-auth-dock .mobile-dashboard-link,
.mobile-auth-dock .mobile-logout-button {
  min-height: 46px;
  backdrop-filter: blur(18px);
  background: rgba(5, 8, 20, .88);
}

@keyframes jcdGridDrift { to { background-position: 54px 54px, 54px 54px, 0 0; } }
@keyframes jcdScan { 0%, 12% { transform: translateY(-5vh); opacity: 0; } 30% { opacity: 1; } 72% { opacity: .7; } 100% { transform: translateY(125vh); opacity: 0; } }
@keyframes jcdDataPulse { to { background-position: -200% 0; } }

@media (max-width: 900px), (pointer: coarse) {
  .mobile-auth-dock { display: grid; }
  .jcd-cursor-aura { display: none; }
  #jcd-ai-canvas { opacity: .28; }
  .jcd-ai-grid { background-size: 72px 72px, 72px 72px, 100% 100%; opacity: .12; }
  .jcd-cyber-card { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .jcd-ai-grid, .jcd-scan-beam, .jcd-neural-line::before { animation: none !important; }
  .jcd-reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .jcd-cyber-card { transform: none !important; }
}

.jcd-nav-auth-btn {
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid rgba(0, 212, 255, .3);
  border-radius: 9px;
  background: rgba(0, 212, 255, .07);
  color: #00D4FF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 700 .72rem 'Orbitron', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.jcd-nav-auth-btn:hover { background: rgba(0, 212, 255, .15); box-shadow: 0 0 18px rgba(0, 212, 255, .15); }
.jcd-nav-user-menu { display: flex; align-items: center; gap: 8px; }

.jcd-auth-desktop-dock {
  position: fixed;
  top: 88px;
  right: 18px;
  z-index: 9700 !important;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(0, 212, 255, .16);
  border-radius: 12px;
  background: rgba(5, 8, 20, .78);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}
@media (max-width: 900px) { .jcd-auth-desktop-dock { display: none !important; } }