/* FILE: css/effects.css — modern UI + effects layer (loaded after styles.css) */

:root {
  --glow: 20, 184, 166;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

::selection { background: rgba(var(--glow), 0.3); }

/* ---------- Ambient background ---------- */
body { position: relative; }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 400px at 8% -5%, rgba(20,184,166,.14), transparent 60%),
    radial-gradient(500px 400px at 100% 10%, rgba(245,166,35,.10), transparent 60%),
    radial-gradient(700px 500px at 60% 110%, rgba(19,42,82,.08), transparent 60%);
}
html.dark body::before {
  background:
    radial-gradient(600px 400px at 8% -5%, rgba(20,184,166,.16), transparent 60%),
    radial-gradient(500px 400px at 100% 10%, rgba(99,102,241,.14), transparent 60%);
}

/* ---------- Scroll progress ---------- */
#fx-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 120;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #14B8A6, #F5A623, #14B8A6);
  background-size: 200% 100%; animation: flow 3s linear infinite;
  box-shadow: 0 0 10px rgba(var(--glow), .7);
}
@keyframes flow { to { background-position: 200% 0; } }

/* ---------- Aurora hero ---------- */
.hero-teal {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #0F766E, #14B8A6, #0EA5A0, #0F766E);
  background-size: 300% 300%; animation: aurora 14s ease infinite;
}
html.dark .hero-teal { background: linear-gradient(120deg, #0B4B45, #0D9488, #0A3F55, #0B4B45); background-size: 300% 300%; }
@keyframes aurora { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-teal > * { position: relative; z-index: 2; }
.fx-orb {
  position: absolute; border-radius: 999px; filter: blur(28px); opacity: .55; z-index: 1;
  animation: floaty 9s ease-in-out infinite; pointer-events: none;
}
.fx-orb.a { width: 160px; height: 160px; right: -30px; top: -50px; background: #5EEAD4; }
.fx-orb.b { width: 120px; height: 120px; left: 25%; bottom: -60px; background: #FAC24D; animation-delay: -3s; opacity: .4; }
.fx-orb.c { width: 90px; height: 90px; left: -20px; top: 10px; background: #99F6E4; animation-delay: -6s; opacity: .35; }
@keyframes floaty {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(18px,-14px) scale(1.12); }
  66% { transform: translate(-14px,10px) scale(.94); }
}

/* ---------- Glass stats card + cursor spotlight ---------- */
.stats-card, .card-hover {
  position: relative; overflow: hidden;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.stats-card { background: rgba(255,255,255,.86); border: 1px solid rgba(255,255,255,.7); }
html.dark .stats-card { background: rgba(19,27,44,.78); border-color: rgba(255,255,255,.06); }
.stats-card::after, .card-hover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(var(--glow), .16), transparent 65%);
  transition: opacity .25s ease;
}
.stats-card:hover::after, .card-hover:hover::after { opacity: 1; }
.card-hover:hover { border-color: rgba(var(--glow), .45) !important; box-shadow: 0 18px 40px -18px rgba(var(--glow), .45); }
.tilt { transition: transform .2s ease-out; will-change: transform; }

/* ---------- Gradient headline numbers ---------- */
#stat-total-sales, #stat-stock-value {
  background: linear-gradient(90deg, #0F766E, #14B8A6 60%, #D6860F);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons: shine + ripple ---------- */
button.bg-brand-600, button.bg-brand-500, a.bg-brand-600, a.bg-brand-500,
button.bg-brand-700, .bg-ink-900.text-white:is(button, a) {
  position: relative; overflow: hidden;
  background-image: linear-gradient(135deg, #14B8A6, #0F766E);
  box-shadow: 0 8px 20px -8px rgba(var(--glow), .7);
  transition: transform .15s var(--ease-spring), box-shadow .2s ease, filter .2s;
}
button.bg-brand-600:hover, button.bg-brand-500:hover, a.bg-brand-600:hover, a.bg-brand-500:hover {
  transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(var(--glow), .85); filter: brightness(1.05);
}
button.bg-brand-600::before, button.bg-brand-500::before, a.bg-brand-600::before, a.bg-brand-500::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events: none;
}
button.bg-brand-600:hover::before, button.bg-brand-500:hover::before,
a.bg-brand-600:hover::before, a.bg-brand-500:hover::before { left: 130%; }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,.45); transform: scale(0);
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- Inputs ---------- */
input, select, textarea { transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease; }
input:focus, select:focus, textarea:focus {
  outline: none !important; border-color: #14B8A6 !important;
  box-shadow: 0 0 0 4px rgba(var(--glow), .18), 0 6px 16px -8px rgba(var(--glow), .5);
}

/* ---------- Tables ---------- */
tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
tbody tr:hover { background: rgba(var(--glow), .06); box-shadow: inset 3px 0 0 #14B8A6; }
tbody tr { animation: rowIn .4s ease both; }
tbody tr:nth-child(2) { animation-delay: .03s; } tbody tr:nth-child(3) { animation-delay: .06s; }
tbody tr:nth-child(4) { animation-delay: .09s; } tbody tr:nth-child(5) { animation-delay: .12s; }
tbody tr:nth-child(n+6) { animation-delay: .15s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Page transition ---------- */
.page-enter { animation: pageIn .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px) scale(.99); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Modals ---------- */
.app-modal { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.app-modal .modal-panel {
  transform: translateY(24px) scale(.94);
  transition: transform .35s var(--ease-spring), opacity .25s ease;
  box-shadow: 0 30px 80px -20px rgba(2,8,23,.55);
}
.app-modal.modal-open .modal-panel { transform: none; }

/* ---------- Toasts ---------- */
#toast-root { top: calc(env(safe-area-inset-top, 0px) + 68px); left: 0; right: 0; padding: 0 14px; }
#toast-root > div {
  position: relative; overflow: hidden; pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px; max-width: min(92vw, 420px);
  padding: 10px 16px 10px 10px; border-radius: 999px !important; line-height: 1.3;
  box-shadow: 0 10px 28px -8px rgba(15,23,42,.45) !important;
}
.toast-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.toast-msg { min-width: 0; overflow-wrap: anywhere; }
#toast-root > div::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px;
  background: rgba(255,255,255,.55); transform-origin: left; animation: toastBar var(--td, 2s) linear forwards;
}
@keyframes toastBar { to { transform: scaleX(0); } }
.toast-enter { animation: toastIn .3s var(--ease-spring) !important; }

/* ---------- Navigation ---------- */
.nav-link { transition: background-color .2s ease, transform .2s var(--ease-spring), color .2s ease; }
.nav-link:hover { transform: translateX(3px); }
.nav-link.active::before { box-shadow: 0 0 12px rgba(var(--glow), .9); }
.nav-fab { transition: transform .2s var(--ease-spring); }
.nav-fab:active { transform: translateX(-50%) scale(.9); }

/* ---------- Quick tiles & pills ---------- */
.quick-tile { transition: transform .25s var(--ease-spring), box-shadow .25s ease; }
.quick-tile:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 14px 26px -12px rgba(var(--glow), .5); }
.pill-alert { animation: pillPulse 2.4s ease-in-out infinite; }
@keyframes pillPulse { 50% { box-shadow: 0 0 0 5px rgba(245,158,11,.12); } }

/* ---------- Login ---------- */
.bg-ink-900.relative > .absolute { animation: floaty 12s ease-in-out infinite; }

/* ---------- Confetti ---------- */
#fx-confetti { position: fixed; inset: 0; z-index: 130; pointer-events: none; }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: rgba(var(--glow), .5) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: linear-gradient(#14B8A6, #0F766E); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .hero-teal, .fx-orb, .pill-alert, tbody tr, .page-enter,
  #fx-progress, .bg-ink-900.relative > .absolute { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  #fx-confetti { display: none; }
}