/* =============================================================
   SDI TEKNOLOGI — base.css
   Design tokens, resets, typography, dan global utilities.
   ============================================================= */

/* ─────────────────────────────────────────────
   0. CSS CUSTOM PROPERTIES (Design Tokens)
───────────────────────────────────────────── */
:root {
  --clr-brand-bg:      #170529;
  --clr-brand-card:    #2b1055;
  --clr-accent:        #d902ee;
  --clr-accent-2:      #7c3aed;
  --clr-accent-glow:   rgba(217, 2, 238, 0.35);
  --clr-neon:          #a855f7;
  --clr-light-bg:      #f8f9fa;
  --clr-light-card:    #ffffff;
  --clr-light-text:    #111827;
  --nav-height: 4rem;
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   600ms;
  --dur-xslow: 1200ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────
   1. BASE RESETS & GLOBAL
───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1.5rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible {
  outline: 2px solid var(--clr-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

::selection { background: var(--clr-accent); color: #fff; }

::-webkit-scrollbar          { width: 6px; }
::-webkit-scrollbar-track    { background: var(--clr-brand-bg); }
::-webkit-scrollbar-thumb    { background: var(--clr-brand-card); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-accent); }

html:not(.dark) body { background-color: var(--clr-light-bg); color: var(--clr-light-text); }
html:not(.dark) ::-webkit-scrollbar-track { background: #e5e7eb; }
html:not(.dark) ::-webkit-scrollbar-thumb { background: #d1d5db; }

/* ─────────────────────────────────────────────
   2. TYPOGRAPHY
───────────────────────────────────────────── */
.gradient-text {
  display: inline-block;
  padding-bottom: 0.14em;
  padding-right: 0.04em;
  line-height: 1.22;
  background: linear-gradient(135deg, var(--clr-accent) 0%, var(--clr-neon) 50%, var(--clr-accent-2) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradientShift 4s linear infinite;
}
@keyframes textGradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ─────────────────────────────────────────────
   3. SCROLL REVEAL ANIMATIONS
───────────────────────────────────────────── */
.reveal-element {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth);
}
.reveal-element.is-visible { opacity: 1; transform: translateY(0); }
.reveal-element:nth-child(2) { transition-delay: 80ms; }
.reveal-element:nth-child(3) { transition-delay: 160ms; }
.reveal-element:nth-child(4) { transition-delay: 240ms; }

/* ─────────────────────────────────────────────
   4. UTILITY ANIMATIONS & KEYFRAMES
───────────────────────────────────────────── */
@keyframes float      { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
@keyframes fadeUp     { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blink      { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes shimmer    { 0% { background-position: -200% center; } 100% { background-position: 200% center; } }
@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseGlow  {
  0%, 100% { box-shadow: 0 0 20px var(--clr-accent-glow), 0 4px 15px rgba(0,0,0,0.3); }
  50%       { box-shadow: 0 0 35px rgba(217,2,238,0.55), 0 4px 15px rgba(0,0,0,0.3); }
}

#typing-cursor { animation: blink 1s step-end infinite; }
body           { animation: pageFadeIn 0.5s ease-out forwards; }

/* ─────────────────────────────────────────────
   5. RESPONSIVE TWEAKS
───────────────────────────────────────────── */
@media (max-width: 640px) {
  .stat-card              { padding: 1.5rem 1rem; }
  .stat-card .stat-number { font-size: 2.5rem; }
}

/* ─────────────────────────────────────────────
   6. PRINT
───────────────────────────────────────────── */
@media print {
  .glass-nav, #theme-toggle, #mobile-menu-btn,
  .animate-float, .cyber-grid, .orb-1, .orb-2, .orb-3 { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ─────────────────────────────────────────────
   7. SPLASH SCREEN (FIRST TIME VISITOR)
───────────────────────────────────────────── */
.splash-skip #splash-screen {
  display: none !important;
}
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0b0014;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.6s ease;
}
#splash-screen.fade-out {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}