/* Animasi ringan — CSS + Intersection Observer, tanpa library */

@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;
  }

  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── BOOT SEQUENCE OVERLAY ───────────────────────── */
.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.boot-overlay.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boot-terminal {
  width: min(92vw, 520px);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  line-height: 1.7;
  color: #34d399;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 0.5rem;
  background: rgba(15, 23, 42, 0.95);
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.15);
}

.boot-line {
  opacity: 0;
  animation: boot-line-in 0.25s ease forwards;
}

@keyframes boot-line-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes float-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(6px, -8px) rotate(0.5deg); }
  66% { transform: translate(-4px, -14px) rotate(-0.5deg); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.04); }
}

@keyframes blink-cursor {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes scanline {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.4s; }

/* Hero entrance */
.hero-enter {
  animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hero-enter-delay-1 { animation-delay: 0.12s; }
.hero-enter-delay-2 { animation-delay: 0.24s; }
.hero-enter-delay-3 { animation-delay: 0.36s; }
.hero-enter-delay-4 { animation-delay: 0.48s; }

/* Floating terminal cards */
.terminal-float {
  animation: float-drift 7s ease-in-out infinite;
}

.terminal-float-slow {
  animation: float-drift 9s ease-in-out infinite;
  animation-delay: -2s;
}

.terminal-float-fast {
  animation: float-drift 5.5s ease-in-out infinite;
  animation-delay: -4s;
}

.profile-float {
  animation: float-y 5s ease-in-out infinite;
}

.hero-glow-orb {
  animation: glow-pulse 6s ease-in-out infinite;
}

.hero-glow-orb-delay {
  animation: glow-pulse 7s ease-in-out infinite;
  animation-delay: -3s;
}

/* Typewriter cursor */
.typewriter-cursor::after {
  content: "▋";
  display: inline-block;
  margin-left: 2px;
  color: #06b6d4;
  animation: blink-cursor 1s step-end infinite;
  font-weight: 400;
}

/* Interactive cards */
.motion-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.motion-card:hover {
  transform: translateY(-4px);
}

/* Navbar scroll state */
#site-nav.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.dark #site-nav.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Terminal window chrome */
.terminal-window {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  backdrop-filter: blur(8px);
}

.terminal-tag {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.15), rgba(16, 185, 129, 0.1), rgba(6, 182, 212, 0.15));
  background-size: 200% auto;
}

.terminal-tag:hover {
  animation: shimmer 2.5s linear infinite;
}

/* Active nav link */
.nav-link.is-active {
  color: #0891b2;
}

.dark .nav-link.is-active {
  color: #22d3ee;
}

/* Tab transition & interactive utilities */
.tab-fade-in {
  animation: tabFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card animation on page/filter change - subtle, responsive */
.project-card-enter {
  animation: projectCardEnter 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes projectCardEnter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pagination button micro-interactions */
.pagination-btn {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
  transform: translateY(-1.5px);
}

.pagination-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.pagination-num {
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease;
}

.pagination-num:hover:not(.active) {
  transform: translateY(-1.5px);
}

.pagination-num:active {
  transform: scale(0.92);
}