/* digitalisasi.net — base styles, keyframes, marquee, reveal system */

/* ============ 1. Base ============ */

section[id],
[id] {
  scroll-margin-top: 5rem;
}

body {
  overflow-x: hidden;
}

::selection {
  background: rgba(139, 233, 253, 0.3);
}

/* Terminal-style scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1e1f29;
}

::-webkit-scrollbar-thumb {
  background: #44475a;
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #6272a4;
}

/* ============ 2. Keyframes ============ */

@keyframes blink {
  50% {
    opacity: 0;
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* ============ 3. Marquee ============ */

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  animation: marquee 30s linear infinite;
}

/* ============ 4. Reveal system ============ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal.d-1 {
  transition-delay: 100ms;
}

.reveal.d-2 {
  transition-delay: 200ms;
}

.reveal.d-3 {
  transition-delay: 300ms;
}

.reveal.d-4 {
  transition-delay: 400ms;
}

/* ============ 5. Focus visibility ============ */

:focus-visible {
  outline: 2px solid #8be9fd;
  outline-offset: 2px;
}

/* ============ 7. Hero extras (source parity) ============ */

.grid-bg {
  background-image:
    linear-gradient(90deg, rgba(68, 71, 90, 0.35) 1px, rgba(0, 0, 0, 0) 0),
    linear-gradient(rgba(68, 71, 90, 0.35) 1px, rgba(0, 0, 0, 0) 0);
  background-size: 46px 46px;
}

.glow-green {
  box-shadow: 0 0 24px 0 rgba(80, 250, 123, 0.25);
}

.glow-cyan {
  box-shadow: 0 0 24px 0 rgba(139, 233, 253, 0.25);
}

/* ============ 8. Reduced motion ============ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee-group {
    /* product decision: the tech marquee always scrolls, even with reduced
       motion; everything else below still respects the preference */
    animation: marquee 30s linear infinite !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}