/* Minimal custom CSS beyond Tailwind utilities. */

:root {
  --sg-dark: #0B1218;
  --sg-dark-light: #131E29;
  --sg-purple: #776AF8;
  --sg-green: #21C277;
  --sg-blue: #2766F8;
}

html { color-scheme: dark; }

::selection { background: rgba(119, 106, 248, 0.35); color: #fff; }

/* Scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--sg-dark); }
*::-webkit-scrollbar-thumb { background: #2a3a4a; border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: #38495a; }

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--sg-purple);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reveal-on-scroll */
.sg-reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.sg-reveal.is-visible { opacity: 1; transform: none; }

/* Hero slider basics */
.sg-slide { opacity: 0; transition: opacity .8s ease; position: absolute; inset: 0; }
.sg-slide.is-active { opacity: 1; position: relative; }

@media (prefers-reduced-motion: reduce) {
  .sg-reveal { opacity: 1; transform: none; transition: none; }
  .sg-slide  { transition: none; }
  * { animation: none !important; }
}