/* ====================================================================
   Console design system — shared base for signin.html, register-key.html,
   and owner-dashboard.html. Ported from assets/css/main.css so the Owner
   Console matches index.html's current "rounded, glowing" revision.
   Load this BEFORE each page's own stylesheet so page CSS can still
   override layout specifics.
   ==================================================================== */

/* ---- Variables (canonical set — copied verbatim from main.css) ---- */
:root {
  /* base navy layers */
  --bg:        #070b12;
  --bg2:       #0b1220;
  --bg3:       #0e1828;
  --card:      #0f1e30;
  --card-h:    #142438;
  --border:    #173050;
  --border2:   #204468;

  /* accents */
  --cyan:      #00c2e0;
  --cyan-deep: #0092ad;
  --cyan-dim:  rgba(0,194,224,0.12);
  --cyan-glow: rgba(0,194,224,0.28);
  --orange:    #ff6535;
  --orange-deep: #d94b1f;
  --orange-glow: rgba(255,101,53,0.3);
  --green:     #00e07a;
  --purple:    #c47eff;

  --text:      #ddeaf8;
  --muted:     #86a2bd;
  --mono:      #3db8d8;

  --fd: 'Barlow Condensed', sans-serif;
  --fb: 'Manrope', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  /* radius scale */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-2xl:  36px;
  --r-full: 999px;

  /* elevation */
  --shadow-sm:     0 2px 10px rgba(2,6,12,0.35);
  --shadow-md:     0 12px 32px rgba(2,6,12,0.45);
  --shadow-lg:     0 24px 64px rgba(2,6,12,0.55);
  --shadow-cyan:   0 12px 40px rgba(0,194,224,0.16);
  --shadow-orange: 0 12px 40px rgba(255,101,53,0.16);

  /* glass */
  --glass:        rgba(13,24,40,0.6);
  --glass-border: rgba(255,255,255,0.07);

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index scale */
  --z-decor:   0;
  --z-content: 2;
  --z-sticky:  50;
  --z-nav:     100;
  --z-cursor:  200;
  --z-boot:    500;
}

/* ---- Base resets ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--fb); background: var(--bg); color: var(--text); }
button { cursor: pointer; font-family: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-full); }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ---- Cursor glow (desktop, fine-pointer only) ---- */
.cursor-glow {
  position: fixed; top: 0; left: 0; width: 420px; height: 420px;
  border-radius: 50%; pointer-events: none; z-index: var(--z-cursor);
  background: radial-gradient(circle, rgba(0,194,224,0.16) 0%, rgba(0,194,224,0.05) 35%, transparent 70%);
  mix-blend-mode: screen; opacity: 0; transition: opacity 0.4s ease;
  will-change: transform;
}
.cursor-glow.active { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

/* ---- Boot sequence ----
   Fully self-playing via CSS animation-delay; no JS dependency, so it can never
   get stuck open. Verbatim from main.css. Only included on pages that ship the
   #bootOverlay markup (signin.html, register-key.html — not owner-dashboard.html,
   which is loaded many times a day and shouldn't gate on a ~2.2s animation every time). */
.boot-overlay {
  position: fixed; inset: 0; z-index: var(--z-boot);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  clip-path: circle(150% at 50% 50%);
  animation: bootWipe 0.7s var(--ease) forwards 1.5s;
}
@keyframes bootWipe { to { clip-path: circle(0% at 50% 50%); visibility: hidden; pointer-events: none; } }
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; width: min(360px, 84vw); }
.boot-mark { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.boot-mark-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0,194,224,0.3);
  animation: radarSpin 3.2s linear infinite;
}
.boot-mark-ring-2 { inset: 10px; border-color: rgba(0,194,224,0.5); animation: radarSpinReverse 2s linear infinite; }
.boot-mark-dot {
  position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan), 0 0 32px var(--cyan-glow);
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.boot-log { width: 100%; display: flex; flex-direction: column; gap: 0.55rem; min-height: 7.5rem; }
.boot-line {
  font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  opacity: 0; transform: translateX(-8px);
  animation: bootLineIn 0.4s var(--ease) forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.16s);
}
.boot-line-status { color: var(--green); flex-shrink: 0; }
.boot-line.boot-line-final { color: var(--green); font-weight: 500; letter-spacing: 0.15em; }
@keyframes bootLineIn { to { opacity: 1; transform: translateX(0); } }
.boot-bar { width: 100%; height: 3px; border-radius: var(--r-full); background: var(--border); overflow: hidden; }
.boot-bar-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--cyan-deep));
  border-radius: var(--r-full); animation: bootBarFill 1.1s var(--ease) forwards 0.2s;
}
@keyframes bootBarFill { to { width: 100%; } }
@keyframes radarSpin { to { transform: rotate(360deg); } }
@keyframes radarSpinReverse { to { transform: rotate(-360deg); } }

/* Page content that should hand off right as the boot overlay's iris wipe clears (~2.1s-2.2s) */
.boot-reveal { opacity: 0; animation: fadeUp 0.7s var(--ease) forwards 2.1s; }

/* ---- Ambient decorative blobs ---- */
.blob {
  position: absolute; border-radius: 50%; filter: blur(70px);
  pointer-events: none; z-index: var(--z-decor); will-change: transform;
}
.blob-cyan   { background: radial-gradient(circle, rgba(0,194,224,0.4) 0%, transparent 70%); }
.blob-orange { background: radial-gradient(circle, rgba(255,101,53,0.32) 0%, transparent 70%); }
.blob-violet { background: radial-gradient(circle, rgba(196,126,255,0.28) 0%, transparent 70%); }
.blob-green  { background: radial-gradient(circle, rgba(0,224,122,0.26) 0%, transparent 70%); }

@keyframes blobFloatA { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(70px,-85px) scale(1.22); } 66% { transform: translate(-55px,55px) scale(0.88); } }
@keyframes blobFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-85px,65px) scale(1.25); } }
@keyframes blobFloatC { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(60px,60px) scale(0.86); } 70% { transform: translate(-35px,-45px) scale(1.15); } }

/* ---- Glass nav/topbar treatment ----
   Generalized from main.css's floating-pill `nav`/`nav.scrolled` to a
   [data-glass-nav] attribute. Deliberately limited to the glass *surface*
   (background/blur/border/shadow) — NOT position/layout — since each
   console page's topbar keeps its own sticky/full-width layout; only the
   marketing nav is a floating inset pill. */
[data-glass-nav] {
  background: rgba(9,16,28,0.5); backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-color: var(--glass-border); box-shadow: var(--shadow-sm);
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
[data-glass-nav].scrolled {
  background: rgba(8,14,24,0.82);
  border-color: var(--border);
  box-shadow: var(--shadow-md);
}

/* ---- Spotlight + tilt cards ----
   .tilt-card has no dedicated CSS in main.css (it's a JS-only marker there,
   with the spotlight actually implemented per-component on .service-card).
   This is an authored, generalized version of that same effect: a default
   cyan spotlight via --accent-glow, overridable per-card. JS (console-motion.js)
   supplies the 3D tilt transform + --mx/--my mouse-position custom props;
   this CSS supplies the resting/hover shadow and the glow itself. */
.tilt-card, .glow-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.tilt-card::before, .glow-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 75%) var(--my, 20%), var(--accent-glow, rgba(0,194,224,0.32)) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none;
}
.tilt-card:hover, .glow-card:hover { border-color: var(--accent, var(--border2)); box-shadow: var(--shadow-lg); }
.tilt-card:hover::before, .glow-card:hover::before { opacity: 1; }

/* ---- Buttons ---- */
.btn-primary {
  font-family: var(--fm); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
  color: var(--bg); border: 1px solid transparent; border-radius: var(--r-full);
  padding: 0.95rem 2.2rem; box-shadow: var(--shadow-cyan);
  position: relative; overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease);
}
.btn-primary:hover { box-shadow: 0 16px 48px rgba(0,194,224,0.35); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  font-family: var(--fm); font-size: 0.75rem; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255,255,255,0.02);
  color: var(--muted); border: 1px solid var(--border2); border-radius: var(--r-full);
  padding: 0.95rem 2.2rem; transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--text); background: rgba(0,194,224,0.06); }
.btn-ghost:active { transform: scale(0.96); transition-duration: 0.12s; }

.btn-assessment {
  font-family: var(--fm); font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: linear-gradient(135deg, var(--orange), var(--orange-deep));
  color: var(--bg); border: 1px solid transparent; border-radius: var(--r-full);
  padding: 1rem 2.1rem; box-shadow: var(--shadow-orange);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); white-space: nowrap;
}
.btn-assessment:hover { box-shadow: 0 16px 48px rgba(255,101,53,0.35); }

/* ---- Status dot ---- */
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 4px var(--green), 0 0 8px var(--green); } 50% { box-shadow: 0 0 8px var(--green), 0 0 16px var(--green); } }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(38px); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ---- Shared animation keyframes ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .tilt-card, .glow-card, .boot-reveal { opacity: 1; transform: none; filter: none; }
  .boot-overlay { animation: none !important; clip-path: circle(0%) !important; visibility: hidden !important; pointer-events: none !important; }
  .cursor-glow { display: none; }
}