/* ═══════════════════════════════════════════════════════════════════════
   geneius-lux.css — Shared luxury layer for geneius.net (2026)
   Glass morphism · Glow effects · Dopamine toasts · Micro-interactions
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables (extend page vars) ── */
:root {
  --gx-glow: rgba(13,148,136,.45);
  --gx-glow-dim: rgba(13,148,136,.12);
  --gx-glow-bright: rgba(94,234,212,.6);
  --gx-glass: rgba(15,23,42,.65);
  --gx-glass-border: rgba(148,163,184,.1);
  --gx-shimmer-speed: 2.2s;
  --gx-ease: cubic-bezier(.4,0,.2,1);
  --gx-ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --gx-ease-spring: cubic-bezier(.175,.885,.32,1.275);
}

/* ── Keyframes ── */
@keyframes gx-glow-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--gx-glow-dim), 0 0 40px rgba(13,148,136,.05); }
  50% { box-shadow: 0 0 20px var(--gx-glow), 0 0 60px rgba(13,148,136,.12); }
}
@keyframes gx-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes gx-border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes gx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes gx-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes gx-scale-in {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes gx-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes gx-ring-pulse {
  0% { box-shadow: 0 0 0 0 rgba(13,148,136,.35); }
  70% { box-shadow: 0 0 0 14px rgba(13,148,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(13,148,136,0); }
}
@keyframes gx-toast-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(16px) scale(.9); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes gx-toast-glow {
  0%, 100% { box-shadow: 0 4px 20px rgba(16,185,129,.15); }
  50% { box-shadow: 0 4px 30px rgba(16,185,129,.35), 0 0 60px rgba(16,185,129,.1); }
}
@keyframes gx-toast-glow-err {
  0%, 100% { box-shadow: 0 4px 20px rgba(239,68,68,.15); }
  50% { box-shadow: 0 4px 30px rgba(239,68,68,.35), 0 0 60px rgba(239,68,68,.1); }
}
@keyframes gx-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes gx-tilt-shine {
  0% { left: -60%; }
  100% { left: 160%; }
}

/* ── Glass Morphism ── */
.gx-glass {
  background: var(--gx-glass) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--gx-glass-border) !important;
}

/* ── Glow Card ── */
.gx-glow-card {
  position: relative;
  transition: transform .25s var(--gx-ease), box-shadow .3s var(--gx-ease);
}
.gx-glow-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(13,148,136,.15), 0 0 0 1px rgba(13,148,136,.2);
}
.gx-glow-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(13,148,136,.2), transparent 40%, transparent 60%, rgba(94,234,212,.15));
  opacity: 0;
  transition: opacity .3s var(--gx-ease);
  pointer-events: none;
  z-index: -1;
}
.gx-glow-card:hover::after { opacity: 1; }

/* ── Shimmer Border ── */
.gx-shimmer-border {
  position: relative;
  overflow: hidden;
}
.gx-shimmer-border::before {
  content: '';
  position: absolute;
  top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(94,234,212,.08), transparent);
  animation: gx-tilt-shine 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* ── Animated Gradient Border ── */
.gx-gradient-border {
  position: relative;
  border: none !important;
}
.gx-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #0D9488, #5EEAD4, #0D9488, #14B8A6);
  background-size: 300% 300%;
  animation: gx-border-flow 4s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Dopamine Toast (replaces basic toasts) ── */
.gx-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 40px);
}
.gx-toast.show {
  opacity: 1;
  animation: gx-toast-in .35s var(--gx-ease-bounce);
}
.gx-toast.ok {
  background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.35);
  color: #10B981;
  animation: gx-toast-in .35s var(--gx-ease-bounce), gx-toast-glow 2s ease-in-out;
}
.gx-toast.err {
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  color: #EF4444;
  animation: gx-toast-in .35s var(--gx-ease-bounce), gx-toast-glow-err 2s ease-in-out;
}
.gx-toast-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Glowing Button ── */
.gx-btn-glow {
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--gx-ease), box-shadow .3s var(--gx-ease);
}
.gx-btn-glow:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(13,148,136,.35), 0 0 0 1px rgba(13,148,136,.3);
}
.gx-btn-glow:active {
  transform: translateY(0) scale(.98);
}
.gx-btn-glow::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transition: width .4s var(--gx-ease), height .4s var(--gx-ease), top .4s, left .4s;
}
.gx-btn-glow:active::after {
  width: 300px; height: 300px;
  top: calc(50% - 150px); left: calc(50% - 150px);
  opacity: 0;
}

/* ── Input Focus Glow ── */
.gx-input-glow:focus {
  border-color: #0D9488 !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,.12), 0 0 16px rgba(13,148,136,.08) !important;
  outline: none;
}

/* ── Floating Action Button Glow ── */
.gx-fab-glow {
  animation: gx-ring-pulse 2.5s ease infinite;
  transition: transform .2s var(--gx-ease-spring), box-shadow .2s;
}
.gx-fab-glow:hover {
  transform: scale(1.08);
  animation: none;
  box-shadow: 0 6px 28px rgba(13,148,136,.45), 0 0 0 2px rgba(94,234,212,.2);
}

/* ── Stat Card Shimmer ── */
.gx-stat-shimmer {
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--gx-ease), border-color .3s;
}
.gx-stat-shimmer:hover {
  transform: translateY(-2px);
  border-color: rgba(13,148,136,.35) !important;
}
.gx-stat-shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(94,234,212,.04), transparent);
  animation: gx-shimmer var(--gx-shimmer-speed) ease-in-out infinite;
  pointer-events: none;
}

/* ── Table Row Hover ── */
.gx-table-glow tr:hover td {
  background: rgba(13,148,136,.04) !important;
  box-shadow: inset 3px 0 0 #0D9488;
}
.gx-table-glow tr {
  transition: background .15s;
}

/* ── Sidebar Active Glow ── */
.gx-sidebar-glow.active {
  background: rgba(13,148,136,.14) !important;
  box-shadow: inset 3px 0 0 #14B8A6, 0 0 20px rgba(13,148,136,.08);
}

/* ── Ambient Background Orbs ── */
.gx-ambient {
  position: fixed;
  pointer-events: none;
  z-index: -1;
}
.gx-ambient::before,
.gx-ambient::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .035;
  animation: gx-float 12s ease-in-out infinite;
}
.gx-ambient::before {
  width: 400px; height: 400px;
  top: 10%; left: 15%;
  background: radial-gradient(circle, #0D9488, transparent 70%);
}
.gx-ambient::after {
  width: 300px; height: 300px;
  bottom: 15%; right: 10%;
  background: radial-gradient(circle, #5EEAD4, transparent 70%);
  animation-delay: -6s;
}

/* ── Pill Glow ── */
.gx-pill-glow {
  transition: box-shadow .2s, transform .15s;
}
.gx-pill-glow:hover {
  box-shadow: 0 0 12px rgba(13,148,136,.2);
  transform: scale(1.05);
}

/* ── Progress Bar Glow ── */
.gx-progress-glow {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.gx-progress-glow .fill {
  box-shadow: 0 0 8px rgba(13,148,136,.4), 0 0 20px rgba(13,148,136,.15);
}

/* ── Smooth Page Transitions ── */
.gx-page-enter {
  animation: gx-fade-up .4s var(--gx-ease) both;
}

/* ── Hover 3D Tilt (light) ── */
.gx-tilt {
  transition: transform .25s var(--gx-ease), box-shadow .25s;
  transform-style: preserve-3d;
  perspective: 800px;
}
.gx-tilt:hover {
  transform: rotateX(-2deg) rotateY(2deg) translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.15), 0 0 0 1px rgba(13,148,136,.15);
}

/* ── Modal Backdrop ── */
.gx-modal-backdrop {
  background: rgba(0,0,0,.55) !important;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
}
.gx-modal-enter {
  animation: gx-scale-in .3s var(--gx-ease-spring);
}

/* ── Scrollbar Styling ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(13,148,136,.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(13,148,136,.35);
}

/* ── Selection Color ── */
::selection {
  background: rgba(13,148,136,.25);
  color: inherit;
}

/* ── Smooth Scroll ── */
html {
  scroll-behavior: smooth;
}

/* ── Focus Visible Ring ── */
:focus-visible {
  outline: 2px solid rgba(13,148,136,.5);
  outline-offset: 2px;
}

/* ── Mobile Readability Layer ── */
@media (max-width: 768px) {
  /* Ensure minimum readable font sizes */
  body { font-size: 14px; -webkit-text-size-adjust: 100%; }

  /* Touch-friendly targets */
  button, [role="button"], a, select, input, textarea {
    min-height: 40px;
  }
  
  /* Prevent horizontal scroll */
  body, html { overflow-x: hidden; max-width: 100vw; }
  
  /* Toast positioning for mobile */
  .gx-toast { bottom: 16px; font-size: 12px; padding: 10px 18px; border-radius: 12px; }
  
  /* Reduce heavy animations on mobile for performance */
  .gx-glow-card::after { display: none; }
  .gx-shimmer-border::before { display: none; }
  .gx-ambient::before, .gx-ambient::after { opacity: .02; filter: blur(60px); }
}

@media (max-width: 480px) {
  /* Ultra-compact mode */
  .gx-toast { max-width: calc(100vw - 24px); font-size: 11px; padding: 8px 14px; }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
  .gx-ambient::before, .gx-ambient::after { display: none; }
}