:root {
  --background: 220 20% 6%;
  --foreground: 0 0% 98%;
  --card: 220 18% 10%;
  --card-foreground: 0 0% 98%;
  --popover: 220 18% 10%;
  --popover-foreground: 0 0% 98%;
  --primary: 174 100% 50%;
  --primary-foreground: 220 20% 6%;
  --secondary: 220 18% 14%;
  --secondary-foreground: 0 0% 98%;
  --muted: 220 15% 18%;
  --muted-foreground: 220 10% 55%;
  --accent: 280 100% 65%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 15% 20%;
  --input: 220 15% 18%;
  --ring: 174 100% 50%;

  --radius: 0.75rem;

  --gradient-primary: linear-gradient(135deg, hsl(174 100% 50%), hsl(200 100% 60%));
  --gradient-accent: linear-gradient(135deg, hsl(280 100% 65%), hsl(320 100% 60%));
  --gradient-card: linear-gradient(135deg, hsl(220 18% 12%), hsl(220 18% 8%));

  --shadow-glow: 0 0 60px hsl(174 100% 50% / 0.3);
  --shadow-glow-sm: 0 0 20px hsl(174 100% 50% / 0.2);
}

html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Outfit', sans-serif;
}

h1,h2,h3,h4,h5,h6 { font-family: 'Syne', sans-serif; }

.text-primary { color: hsl(var(--primary)); }
.text-accent { color: hsl(var(--accent)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-primary { background: hsl(var(--primary)); }
.bg-muted { background: hsl(var(--muted)); }
.bg-secondary { background: hsl(var(--secondary)); }
.bg-background { background: hsl(var(--background)); }
.border-border { border-color: hsl(var(--border)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.from-background { --tw-gradient-from: hsl(var(--background)); }

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

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

.glow-sm { box-shadow: var(--shadow-glow-sm); }

.glass {
  background: hsl(220 18% 10% / 0.8);
  backdrop-filter: blur(20px);
  border: 1px solid hsl(220 15% 20% / 0.5);
}

.scroll-indicator { animation: bob 2s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,10px);} }

.float-y { animation: floatY 3s ease-in-out infinite; }
.float-y-rev { animation: floatYrev 4s ease-in-out infinite; }
.float-x { animation: floatX 3.5s ease-in-out infinite; }
.float-x-rev { animation: floatXrev 3.2s ease-in-out infinite; }

@keyframes floatY { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
@keyframes floatYrev { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(10px);} }
@keyframes floatX { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(-10px);} }
@keyframes floatXrev { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(10px);} }

.animate-glow-pulse { animation: glowPulse 2s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{ opacity:.5;} 50%{ opacity:1;} }

/* Loading animations */
.loader-circle { stroke-dasharray: 300; stroke-dashoffset: 300; animation: dash 1.5s ease-in-out forwards; }
.loader-path { stroke-dasharray: 120; stroke-dashoffset: 120; animation: dash2 1s ease-in-out forwards .5s; }
.loader-bar { width: 0%; animation: bar 1.8s ease-in-out forwards; }
@keyframes dash { to { stroke-dashoffset: 0; } }
@keyframes dash2 { to { stroke-dashoffset: 0; } }
@keyframes bar { to { width: 100%; } }

/* Toast */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 60;
  max-width: 320px;
  padding: 16px 16px;
  border-radius: 16px;
  background: hsl(220 18% 10% / 0.9);
  border: 1px solid hsl(220 15% 20% / 0.7);
  backdrop-filter: blur(18px);
  box-shadow: 0 25px 50px -12px hsl(0 0% 0% / 0.5);
}
.toast-title { font-family: 'Syne', sans-serif; font-weight: 700; margin-bottom: 2px; }
.toast-desc { color: hsl(var(--muted-foreground)); font-size: 14px; }

.hidden { display: none; }

/* Active side dots */
.dot-active { background: hsl(var(--primary)) !important; width: 24px !important; }
.dot-label-active { color: hsl(var(--primary)) !important; opacity: 1 !important; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-indicator,
  .float-y,
  .float-y-rev,
  .float-x,
  .float-x-rev,
  .animate-glow-pulse,
  .loader-circle,
  .loader-path,
  .loader-bar { animation: none !important; }
}

/* Progress bar */
.progress {
  height: 10px;
  border-radius: 999px;
  background: hsl(var(--muted));
  overflow: hidden;
  position: relative;
}

.progress .progress-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-primary);
  border-radius: 999px;
  transition: width 900ms ease;
  box-shadow: var(--shadow-glow-sm);
}
.skill-bar {
  transition: width 1s ease;
}
.skill-bar {
  background: var(--gradient-accent);
  display: block;
}
.skill-bar { transition: width 1s ease; }

.skill-bar {
  height: 100%;
  width: 0%;
  background: var(--gradient-primary);
  border-radius: 999px;
  transition: width 1s ease;
}
/* Side dots – active label safe spacing */



#sideDots {
  max-width: 160px;
  z-index: 9999;
}

.dot-btn {
  position: relative;
  height: 20px;
}

.dot-label {
  margin-left: 8px;          /* bilo 12px */
  padding: 4px 8px;          /* bilo 6px 10px */
  font-size: 11px;           /* malo sitnije */
  border-radius: 999px;
  background: hsl(220 18% 12% / 0.9);
  border: 1px solid hsl(220 15% 20%);
  color: hsl(var(--muted-foreground));
  white-space: nowrap;

  opacity: 0;
  transform: translateX(-4px); /* bilo -6px */
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.dot-btn:hover .dot-label {
  opacity: 1;
  transform: translateX(0);
}

/* aktivna sekcija */
.dot-btn .dot-active ~ .dot-label {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.4);
  opacity: 1;
  transform: translateX(0);
}