/* ==========================================================================
   ROBS Engineering — custom design layer
   Complements the Tailwind CDN utility classes with the pieces Tailwind's
   runtime build can't generate: CSS variables, keyframes, pseudo-elements,
   and the bespoke "glass" component classes used throughout the original
   design.
   ========================================================================== */

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
}

html.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
}

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

/* Glass surfaces ---------------------------------------------------------- */
.glass {
  background-color: rgb(255 255 255 / 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.2);
}
html.dark .glass {
  background-color: rgb(10 15 28 / 0.7);
  border-color: rgb(255 255 255 / 0.1);
}

.glass-card {
  background-color: rgb(255 255 255 / 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(229 231 235 / 1);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.04);
}
html.dark .glass-card {
  background-color: rgb(17 24 39 / 0.8);
  border-color: rgb(255 255 255 / 0.05);
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.1);
}

.text-gradient {
  background-image: linear-gradient(to right, var(--tw-gradient-from, #0b5fff), var(--tw-gradient-to, #ff6b00));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Header shell -------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: all .3s ease;
  padding: 24px 0;
  background: transparent;
}
.site-header.is-scrolled {
  padding: 16px 0;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.site-header.is-scrolled:not(.is-scrolled-off) {}

/* Mobile nav collapse */
.mobile-menu { display: none; }
.mobile-menu.is-open { display: block; }

/* Reveal-on-scroll (replaces framer-motion whileInView) --------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left { transform: translateX(-30px); }
.reveal-left.reveal-visible { transform: translateX(0); }
.reveal-right { transform: translateX(30px); }
.reveal-right.reveal-visible { transform: translateX(0); }
.reveal-scale { transform: scale(.92); }
.reveal-scale.reveal-visible { transform: scale(1); }

/* Floating badges on hero image ------------------------------------------- */
@keyframes float-up-down {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(10px); }
}
@keyframes float-down-up {
  0%, 100% { transform: translateY(10px); }
  50% { transform: translateY(-10px); }
}
.float-a { animation: float-up-down 4s ease-in-out infinite; }
.float-b { animation: float-down-up 5s ease-in-out infinite; }

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* Skill progress ring ------------------------------------------------------- */
.skill-ring-progress {
  transition: stroke-dashoffset 1s ease 0.1s;
}

/* Hero grid backdrop -------------------------------------------------------- */
.hero-grid-light {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgc3Ryb2tlPSIjY2JkNWUxIiBzdHJva2Utd2lkdGg9IjAuNSIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTAgNjBoNjBNNjAgMGY2MCA2MCIgb3BhY2l0eT0iMC4yIi8+PC9nPjwvc3ZnPg==");
  -webkit-mask-image: linear-gradient(to bottom, white, transparent);
  mask-image: linear-gradient(to bottom, white, transparent);
}
html.dark .hero-grid-light {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgc3Ryb2tlPSIjZmZmZmZmIiBzdHJva2Utd2lkdGg9IjAuNSIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTAgNjBoNjBNNjAgMGY2MCA2MCIgb3BhY2l0eT0iMC4wNSIvPjwvZz48L3N2Zz4=");
}

/* Experience timeline -------------------------------------------------------- */
.timeline-line {
  position: absolute;
  left: 0;
  top: 0; bottom: 0;
  width: 2px;
  background-color: rgb(229 231 235 / 1);
}
html.dark .timeline-line { background-color: rgb(255 255 255 / 0.1); }
@media (min-width: 768px) {
  .timeline-line { left: 50%; transform: translateX(-50%); }
}
.timeline-dot {
  position: absolute;
  left: 0;
  transform: translateX(-11px);
  top: 0;
  width: 24px; height: 24px;
  border-radius: 9999px;
  background-color: #0b5fff;
  border: 4px solid #f9fafb;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
}
html.dark .timeline-dot { border-color: #111827; }
@media (min-width: 768px) {
  .timeline-dot { left: 50%; transform: translateX(-50%); }
}

/* Utility: line clamp fallback (Tailwind CDN includes this, kept for safety) */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Lucide icon sizing default (matches inline size props used across markup) */
[data-lucide] { width: 1em; height: 1em; }

/* Print styles for the Resume page ------------------------------------------ */
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .glass-card { box-shadow: none !important; border: 1px solid #ddd !important; backdrop-filter: none !important; background: #fff !important; }
}