/* ============================================================
   Proactive World — Prism Glass design system
   Shared component styles used across every page.
   ============================================================ */

:root {
  --ink: #111111;
  --soft-grey: #555555;
  --line: #E4E8EC;
  --surface: #fdf8f8;
  --brand-grad: linear-gradient(120deg, #0C7F40, #1B9DD9, #3B3FA0, #9B2D86, #E23127, #F5871F);
  --ease-prism: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background-color: var(--surface);
  color: var(--ink);
}

/* ---------- Glass surfaces ---------- */
.glass-panel {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.5);
  border-left: 0.5px solid rgba(255, 255, 255, 0.5);
  border-bottom: 0.5px solid rgba(17, 17, 17, 0.05);
  border-right: 0.5px solid rgba(17, 17, 17, 0.05);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.05),
    0 10px 15px -3px rgba(0, 0, 0, 0.02),
    0 40px 40px -10px rgba(17, 17, 17, 0.02);
}

.glass-panel-dark {
  background: rgba(17, 17, 17, 0.95);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-top: 0.5px solid rgba(255, 255, 255, 0.1);
  border-left: 0.5px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.5);
  border-right: 0.5px solid rgba(0, 0, 0, 0.5);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.3),
    0 4px 6px -2px rgba(0, 0, 0, 0.15);
}

/* ---------- Spectrum gradient devices ---------- */
.bg-brand-gradient { background-image: var(--brand-grad); }

.text-gradient {
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* 1px gradient stroke around any rounded element */
.spectrum-border { position: relative; }
.spectrum-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.55;
}

/* thin gradient rule along the bottom edge */
.spectrum-underline { position: relative; }
.spectrum-underline::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--brand-grad);
}

.brand-panel-gradient {
  background: var(--brand-grad);
  border-top: 0.5px solid rgba(255, 255, 255, 0.2);
  border-left: 0.5px solid rgba(255, 255, 255, 0.2);
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.3),
    0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

/* ---------- Motion ---------- */
.hover-lift { transition: all 0.3s var(--ease-prism); }
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.08),
    0 20px 25px -5px rgba(0, 0, 0, 0.04),
    0 50px 50px -12px rgba(17, 17, 17, 0.04);
}

.pulse-lock { animation: pulse-secure 2s infinite cubic-bezier(0.4, 0, 0.6, 1); }
@keyframes pulse-secure {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.95); }
}

@keyframes pw-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: pw-fade-up 0.7s var(--ease-prism) both; }
.fade-up-delay-1 { animation-delay: 0.1s; }
.fade-up-delay-2 { animation-delay: 0.2s; }
.fade-up-delay-3 { animation-delay: 0.3s; }

/* ---------- Utilities ---------- */
.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Toast notifications */
#pw-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, calc(100% + 48px));
  visibility: hidden;
  z-index: 100;
  transition: transform 0.4s var(--ease-prism), visibility 0s 0.4s;
  pointer-events: none;
}
#pw-toast.show {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform 0.4s var(--ease-prism);
}