/* Drift Landing — Custom Styles (Light theme) */

.nav-blur {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

html { scroll-behavior: smooth; }
body { color-scheme: light; }
::selection { background: rgba(59, 130, 246, 0.22); color: #0a0a0a; }

/* Scroll reveal */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}
.grid > .reveal-on-scroll:nth-child(2) { transition-delay: 0.08s; }
.grid > .reveal-on-scroll:nth-child(3) { transition-delay: 0.16s; }
.grid > .reveal-on-scroll:nth-child(4) { transition-delay: 0.24s; }
.grid > .reveal-on-scroll:nth-child(5) { transition-delay: 0.32s; }
.grid > .reveal-on-scroll:nth-child(6) { transition-delay: 0.40s; }
.grid > .reveal-on-scroll:nth-child(7) { transition-delay: 0.48s; }
.grid > .reveal-on-scroll:nth-child(8) { transition-delay: 0.56s; }

/* Screenshot hover lift */
img.block { transition: transform 0.3s ease, filter 0.3s ease; }
.relative:hover > img.block { transform: translateY(-2px); }

/* Code block */
pre code { tab-size: 2; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.26); }

/* Mobile order flip — restore visual reading order on small screens */
@media (max-width: 1023px) {
  .grid.lg\:grid-cols-2 > .order-2.lg\:order-1 { order: 2; }
  .grid.lg\:grid-cols-2 > .order-1.lg\:order-2 { order: 1; }
}