/* ==========================================================
   CSS TABLE OF CONTENTS
   ==========================================================
   1. Reset & Base Styles
   2. Design Tokens (Colors, Fonts, Transitions)  <-- EDIT COLORS HERE
   3. Utility / Layout
   4. Navigation (desktop + mobile)
   5. Hero Section
   6. Animations & Motion
   7. Shared Section Styles
   8. About Section
   9. Portfolio Section (project cards)
   10. Experience Timeline
   11. Contact Section (form + links)
   12. Footer
   13. Divider
   14. Space Canvas Background
   ========================================================== */


/* ==========================================================
   1. RESET & BASE STYLES
   Normalizes default browser styles for consistency.
   ========================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* ==========================================================
   2. DESIGN TOKENS — COLORS, FONTS, TRANSITIONS
   ==========================================================
   THIS IS THE SINGLE PLACE TO CHANGE YOUR SITE'S LOOK & FEEL.

   ACCENT COLOR:
     Change --accent to any neon color you like:
       Cyan:    #00e5ff
       Magenta: #ff2d78
       Green:   #39ff14
       Purple:  #b347ff
     Then update --accent-glow to match (same RGB, 0.35 alpha).

   FONTS:
     --font-body:    Used for paragraphs and general text.
     --font-heading: Used for all headings and labels.
   ========================================================== */
:root {
  /* BACKGROUND COLORS */
  --bg: #000000;
  /* Main page background — pure void black */
  --bg-card: #0a0a0a;
  /* Project card background — very slightly lighter */

  /* TEXT COLORS */
  --text: #e0e0e0;
  /* Primary body text — soft white */
  --text-muted: #888888;
  /* Secondary/supporting text — medium gray */

  /* *** ACCENT COLOR — CHANGE THIS TO RETHEME THE ENTIRE SITE *** */
  --accent: #4dc3ff;
  /* Soft ice blue — easier on the eyes against black */
  --accent-glow: rgba(77, 195, 255, 0.35);
  /* Glow version of accent — match the RGB above */

  /* FONT FAMILIES */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;

  /* TRANSITION SPEEDS */
  --transition-fast: 200ms ease;
  /* Quick interactions (hover color changes) */
  --transition-base: 280ms ease;
  /* Standard interactions (borders, glows) */
}

html {
  scroll-behavior: smooth;
  /* Enables smooth anchor scrolling */
  -webkit-text-size-adjust: 100%;
  /* Prevents iOS text size inflation */
}

body {
  font-family: var(--font-body);
  background: transparent;
  /* Transparent so the starfield shows through */
  color: var(--text);
  /* Fluid font size: 15px on mobile → 17px on large screens */
  font-size: clamp(0.938rem, 0.85rem + 0.4vw, 1.063rem);
  line-height: 1.7;
  font-weight: 300;
  overflow-x: hidden;
  /* Prevents horizontal scroll on mobile */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ==========================================================
   3. UTILITY / LAYOUT
   .container — Centers content with responsive side padding.
   ========================================================== */
.container {
  width: 100%;
  max-width: 1100px;
  /* Max content width — increase for wider layouts */
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  /* Responsive horizontal padding */
}

/* Global link styles — accent color, white on hover */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: #ffffff;
}


/* ==========================================================
   FOCUS VISIBLE — Accessibility focus ring for keyboard users.
   Uses the accent color so it matches the site theme.
   ========================================================== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}


/* ==========================================================
   CUSTOM SCROLLBAR — Minimal dark scrollbar (WebKit only).
   ========================================================== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: #1a1a1a;
  border-radius: 3px;
}


/* ==========================================================
   4. NAVIGATION
   Fixed top bar. Becomes frosted-glass on scroll via JS.
   ========================================================== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  transition: background var(--transition-base), backdrop-filter var(--transition-base);
}

/* Applied by JS when page is scrolled past 40px */
.nav.scrolled {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* NAV LOGO — Space Being image in the top-left corner */
.nav__logo {
  display: flex;
  align-items: center;
  line-height: 0;
  /* Removes extra space below inline img */
}

.nav__logo-img {
  display: block;
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  border-radius: 50%;
  /* Circular crop */
  object-fit: cover;
  /* Fills the circle without distortion */
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.nav__logo:hover .nav__logo-img {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.45);
  transform: scale(1.08);
}

/* NAV LINKS — Desktop horizontal list */
.nav__links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
}

.nav__links a {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color var(--transition-fast);
  min-height: 44px;
  /* 44px touch target for accessibility */
  display: flex;
  align-items: center;
}

.nav__links a:hover,
.nav__links a:focus-visible {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

/* ---- MOBILE HAMBURGER MENU BUTTON ---- */
.nav__toggle {
  display: none;
  /* Hidden on desktop */
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  min-width: 44px;
  /* 44px touch target */
  min-height: 44px;
  position: relative;
  z-index: 110;
}

/* Three horizontal bars that form the hamburger icon */
.nav__toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

.nav__toggle span+span {
  margin-top: 6px;
}

/* Animate bars into an "X" when menu is open */
.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

/* ---- MOBILE BREAKPOINT (640px and below) ---- */
@media (max-width: 640px) {

  /* Show the hamburger button on mobile */
  .nav__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  /* Full-screen overlay menu on mobile */
  .nav__links {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.97);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  /* JS toggles this class to show/hide the menu */
  .nav__links.open {
    opacity: 1;
    visibility: visible;
  }

  .nav__links a {
    font-size: 1.1rem;
  }
}


/* ==========================================================
   5. HERO SECTION
   Full-viewport intro with name, tagline, and CTA button.
   ========================================================== */
.hero {
  min-height: 100dvh;
  /* Full dynamic viewport height */
  display: flex;
  align-items: center;
  position: relative;
}

.hero__content {
  width: 100%;
  padding: 6rem 0 4rem;
}

/* Small accent label above the main name */
.hero__label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  opacity: 0;
  /* Starts invisible — animated in via CSS */
}

/* The big name — this is the only <h1> on the page */
.hero__title {
  font-family: var(--font-heading);
  /* Fluid size: 40px on mobile → 88px on ultrawide */
  font-size: clamp(2.5rem, 2rem + 4vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  opacity: 0;
}

/* Subtitle / tagline below the name */
.hero__sub {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  color: var(--text-muted);
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  opacity: 0;
}

/* CTA button — outline style, glows accent on hover */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  padding: 0.9rem 2rem;
  cursor: pointer;
  transition: border-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
  min-height: 44px;
  opacity: 0;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  border-color: #ffd700;
  color: #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.35), inset 0 0 20px rgba(255, 215, 0, 0.05);
}

.hero__cta svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.hero__cta:hover svg {
  transform: translateY(2px);
}

/* Decorative animated line at the bottom of the hero */
.hero__scroll-line {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  opacity: 0;
}


/* ==========================================================
   6. ANIMATIONS & MOTION
   All animations are wrapped in prefers-reduced-motion so
   they are disabled for users who have turned off motion
   in their system settings.
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Staggered fade-up entrance for hero elements */
  .hero__label {
    animation: fadeUp 0.8s ease forwards 0.2s;
    /* Delay: 0.2s */
  }

  .hero__title {
    animation: fadeUp 0.8s ease forwards 0.45s;
    /* Delay: 0.45s */
  }

  .hero__sub {
    animation: fadeUp 0.8s ease forwards 0.65s;
    /* Delay: 0.65s */
  }

  .hero__cta {
    animation: fadeUp 0.8s ease forwards 0.85s;
    /* Delay: 0.85s */
  }

  .hero__scroll-line {
    animation: fadeIn 1s ease forwards 1.4s, pulse 2.5s ease-in-out infinite 2.4s;
  }

  /* Scroll-reveal: elements start invisible and slide up when
     they enter the viewport (triggered by IntersectionObserver in JS) */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

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

/* If user prefers reduced motion, show everything immediately */
@media (prefers-reduced-motion: reduce) {

  .hero__label,
  .hero__title,
  .hero__sub,
  .hero__cta,
  .hero__scroll-line {
    opacity: 1;
  }

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

/* Keyframe: fade in while sliding up 20px */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Keyframe: simple fade in to half opacity */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.5;
  }
}

/* Keyframe: gentle pulsing opacity */
@keyframes pulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.15;
  }
}


/* ==========================================================
   7. SHARED SECTION STYLES
   Used by About, Portfolio, and Contact sections.
   ========================================================== */
.section {
  padding: clamp(5rem, 8vw, 9rem) 0;
  /* Responsive vertical spacing */
}

.section__header {
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* Small accent label (e.g., "01 / About") */
.section__label {
  font-family: var(--font-heading);
  font-size: clamp(0.65rem, 0.6rem + 0.2vw, 0.75rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

/* Section heading (e.g., "Background", "Selected Projects") */
.section__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 1.5rem + 1.5vw, 2.75rem);
  font-weight: 600;
  color: #ffffff;
  letter-spacing: -0.01em;
}


/* ==========================================================
   8. ABOUT SECTION
   Two-column grid: bio text (left) + details sidebar (right).
   ========================================================== */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* Single column on mobile */
  gap: 3rem;
}

@media (min-width: 768px) {
  .about__grid {
    grid-template-columns: 1fr 1fr;
    /* Two equal columns on desktop */
    gap: clamp(3rem, 5vw, 5rem);
  }
}

/* Bio text block — has a thin accent border on the left ("data log" style) */
.about__text {
  padding-left: 1.5rem;
  border-left: 1px solid var(--accent);
}

.about__text p {
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.about__text p:last-child {
  margin-bottom: 0;
}

/* Right-side details column (Location, Education, Interests) */
.about__details {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.about__detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.about__detail-label {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.about__detail-value {
  font-size: 1rem;
  color: #ffffff;
}

/* Interest tags — small bordered pills */
.about__interests {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.about__tag {
  font-size: 0.8rem;
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.35rem 0.85rem;
  letter-spacing: 0.02em;
}


/* ==========================================================
   9. PORTFOLIO SECTION — PROJECT CARDS
   Responsive grid: 1 col (mobile) → 2 col (desktop).
   ========================================================== */
.portfolio__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 equal columns on desktop */
  }
  
  /* Center the 3rd card under the first 2 for a "triangle" layout */
  .portfolio__grid > .project-card:nth-child(3):last-child {
    grid-column: 1 / -1;            /* Span full width */
    width: calc(50% - 0.75rem);     /* Equal to 1 column (50% minus half 1.5rem gap) */
    justify-self: center;           /* Center aligned horizontally */
  }
}

/* Individual project card — transparent border, glows accent on hover */
.project-card {
  background: var(--bg-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid transparent;
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  cursor: default;
}

.project-card:hover {
  border-color: #ffd700;
  background: #050505;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.08);
}

/* Card numbering (001, 002, etc.) */
.project-card__number {
  font-family: var(--font-heading);
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  margin-bottom: 1.25rem;
}

/* Card title */
.project-card__title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1rem + 0.3vw, 1.3rem);
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.35rem;
}

/* Card affiliation (e.g., "Wisconsin Racing — Formula SAE") */
.project-card__affiliation {
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

/* Card description text */
.project-card__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
  flex: 1;
  /* Pushes tech tags to the bottom */
}

/* Tech stack tags at the bottom of each card */
.project-card__tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.project-card__tech span {
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-weight: 500;
}


/* ==========================================================
   10. EXPERIENCE TIMELINE
   Grid layout: date on the left, details on the right.
   ========================================================== */
.experience {
  margin-top: clamp(5rem, 8vw, 9rem);
  /* Matches .section padding for uniform spacing */
}

.experience__item {
  display: grid;
  grid-template-columns: 1fr;
  /* Stacked on mobile */
  gap: 0.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

@media (min-width: 640px) {
  .experience__item {
    grid-template-columns: 180px 1fr;
    /* Date | Details on desktop */
    gap: 2rem;
  }
}

.experience__date {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.experience__role {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.25rem;
}

.experience__company {
  font-size: 0.9rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.experience__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}


/* ==========================================================
   11. CONTACT SECTION
   Centered layout for contact info and links.
   ========================================================== */
.contact__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.contact__info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact__info p {
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  max-width: 500px;
}

/* Horizontal list of contact links (email, GitHub, LinkedIn) */
.contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.contact__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  transition: color var(--transition-fast);
  padding: 0.35rem 0;
  /* Tight vertical padding — no dead zones */
  width: fit-content;
  /* Shrink-wrap to content width */
}

.contact__link:hover,
.contact__link:focus-visible {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}

.contact__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ==========================================================
   12. FOOTER
   Simple bottom bar with copyright and quick links.
   ========================================================== */
.footer {
  padding: 3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__copy {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.footer__links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.footer__links a {
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: color var(--transition-fast);
  min-height: 44px;
  display: flex;
  align-items: center;
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
}


/* ==========================================================
   13. DIVIDER
   Thin horizontal line used between sections.
   ========================================================== */
.divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.04);
}


/* ==========================================================
   14. SPACE CANVAS BACKGROUND
   Full-screen fixed HTML5 <canvas> rendered behind all
   content. Stars and comet are drawn via JavaScript.
   ========================================================== */
#space-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Behind everything */
  background: #000000;
  /* Deep space black */
  pointer-events: none;
  /* Clicks pass through */
}