/**
 * SysmoraCloud — visual enhancement layer
 * Purely additive: loaded after animations.css, no markup changes needed.
 */
:root {
  --sc-violet: 124, 58, 237;
  --sc-emerald: 16, 185, 129;
  --sc-blue: 59, 130, 246;
  --sc-ease: cubic-bezier(.16, 1, .3, 1);
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(var(--sc-violet), .55); color: #fff; }

/* ---------- Scrollbar ---------- */
html { scrollbar-width: thin; scrollbar-color: rgba(var(--sc-violet), .6) #0c0c14; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0c14; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(#7c3aed, #3b82f6); border-radius: 999px; border: 2px solid #0c0c14;
}

/* ---------- Keyboard focus ---------- */
:focus-visible { outline: 2px solid rgba(var(--sc-violet), .9); outline-offset: 3px; border-radius: 8px; }

/* ---------- HERO ---------- */
.hero-sticky::before {               /* slow drifting aurora */
  content: ""; position: absolute; inset: -20%; z-index: 1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(var(--sc-violet), .22), transparent 70%),
    radial-gradient(35% 40% at 80% 65%, rgba(var(--sc-blue), .18), transparent 70%),
    radial-gradient(30% 30% at 55% 15%, rgba(var(--sc-emerald), .14), transparent 70%);
  filter: blur(40px);
  animation: scAurora 18s ease-in-out infinite alternate;
}
@keyframes scAurora {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1); }
  100% { transform: translate3d(4%, 3%, 0) scale(1.12); }
}
.hero-sticky::after {                /* soft vignette for text legibility */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(7, 7, 11, .55) 100%);
}
.hero-slide h1 {
  letter-spacing: -.035em; line-height: 1.02;
  text-shadow: 0 8px 50px rgba(0, 0, 0, .55);
}
.hero-slide h1 .bg-clip-text {
  background-size: 200% auto;
  animation: scShine 6s linear infinite;
  filter: drop-shadow(0 0 22px rgba(var(--sc-violet), .35));
}
@keyframes scShine { to { background-position: 200% center; } }
.hero-slide p { text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }

/* Tabs: pill with live progress */
.hero-tabs {
  padding: .35rem; gap: .3rem;
  background: rgba(12, 12, 20, .62);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.hero-tab { padding: .65rem 1.25rem; font-size: .8rem; letter-spacing: .01em; transition: color .3s, background .3s, transform .3s var(--sc-ease); }
.hero-tab:hover { transform: translateY(-1px); }
.hero-tab.is-active {
  background: linear-gradient(135deg, rgba(var(--sc-violet), .35), rgba(var(--sc-blue), .25));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 6px 20px -6px rgba(var(--sc-violet), .6);
}
.hero-tab::after { height: 3px; bottom: 4px; background: linear-gradient(90deg, #a78bfa, #60a5fa); }

/* Badges */
.hero-badges > div {
  padding: .35rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(8px);
}

/* ---------- Buttons ---------- */
.btn-3d-brand, .btn-3d-cyan {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .25s var(--sc-ease), box-shadow .25s var(--sc-ease), filter .25s;
}
.btn-3d-brand::before, .btn-3d-cyan::before {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .7s var(--sc-ease);
}
.btn-3d-brand:hover::before, .btn-3d-cyan:hover::before { left: 130%; }
.btn-3d-brand:hover { filter: brightness(1.08); }

/* ---------- Cards ---------- */
.rounded-2xl[class*="border"], .rounded-3xl[class*="border"] {
  transition: transform .45s var(--sc-ease), border-color .35s, box-shadow .45s var(--sc-ease), background-color .35s;
}
.rounded-2xl[class*="border"]:hover, .rounded-3xl[class*="border"]:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--sc-violet), .45);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8), 0 0 40px -12px rgba(var(--sc-violet), .35);
}

/* ---------- Section titles ---------- */
section h2 { letter-spacing: -.025em; }
section h2.text-center::after, section .text-center > h2::after {
  content: ""; display: block; width: 56px; height: 3px; margin: 1rem auto 0; border-radius: 3px;
  background: linear-gradient(90deg, #7c3aed, #3b82f6, #22d3ee);
}

/* ---------- Images & links ---------- */
img { image-rendering: auto; }
main a:not([class*="btn"]):not([class*="rounded"]) { transition: color .25s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-sticky::before, .hero-slide h1 .bg-clip-text { animation: none; }
  .rounded-2xl[class*="border"]:hover, .rounded-3xl[class*="border"]:hover { transform: none; }
}