/* =============================================================
   style.css — jjandy.com Portfolio
   Structure:
     1.  CSS Custom Properties (Design Tokens)
     2.  Reset & Base
     3.  Typography System
     4.  Layout Utilities
     5.  Buttons
     6.  Tags
     7.  Scroll Animations
     8.  Navigation
     9.  Hero Section
     10. Credibility Bar
     11. About Section
     12. Projects Section
     13. Capabilities Stack
     14. Credentials Section
     15. CTA Footer
     16. Responsive — Tablet (768px)
     17. Responsive — Mobile (480px)
   ============================================================= */


/* =============================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   All colours, fonts, spacing, and effects in one place.
   Change a variable here — it updates everywhere.
   ============================================================= */
:root {
  /* Colours */
  --color-bg:          #F9F7F4; /* Warm off-white — page background */
  --color-surface:     #FFFFFF; /* Cards and nav background */
  --color-primary:     #1A1A2E; /* Deep navy — headings, authority */
  --color-accent:      #2563EB; /* Electric blue — AI/tech signal */
  --color-accent-warm: #E8A838; /* Warm amber — personable warmth */
  --color-text:        #1A1A2E; /* Body text */
  --color-muted:       #6B7280; /* Secondary text, labels */
  --color-border:      #E5E7EB; /* Dividers and card borders */

  /* Typography */
  --font-display: 'Sora', sans-serif;        /* Headlines — geometric, modern */
  --font-body:    'DM Sans', sans-serif;     /* Body — warm, readable */
  --font-mono:    'JetBrains Mono', monospace; /* Tags, code, labels */

  /* Spacing scale */
  --space-xs: 0.5rem;   /*  8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 2rem;     /* 32px */
  --space-lg: 3rem;     /* 48px */
  --space-xl: 5.5rem;   /* 88px */

  /* Layout */
  --container-max: 1200px;
  --container-pad: 1.5rem;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.13);

  /* Transition timing — used on all interactive elements */
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =============================================================
   2. RESET & BASE
   ============================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}


/* =============================================================
   3. TYPOGRAPHY SYSTEM
   clamp() ensures fluid scaling across viewport widths.
   ============================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-primary);
}

p {
  line-height: 1.7;
}

code {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--color-muted);
}

/* Section headings */
.section-title {
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  letter-spacing: -0.5px;
  margin-bottom: var(--space-xs);
}

.section-subtitle {
  color: var(--color-muted);
  font-size: 1.05rem;
  max-width: 600px;
  margin-bottom: var(--space-md);
}


/* =============================================================
   4. LAYOUT UTILITIES
   ============================================================= */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

section {
  padding: var(--space-xl) 0;
}


/* =============================================================
   5. BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  line-height: 1;
}

/* Primary — blue fill */
.btn--primary {
  background: var(--color-accent);
  color: #fff;
}

.btn--primary:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Secondary — white with border */
.btn--secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Outline — for dark backgrounds (footer) */
.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
}

/* Small variant — used in nav */
.btn--small {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}


/* =============================================================
   6. TAGS
   Used on project cards, stack items, and cert badges.
   ============================================================= */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  padding: 0.25rem 0.6rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
}

/* Smaller variant for inline use (stack section) */
.tag--sm {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
}

/* Status indicator — in progress */
.tag--progress {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}

/* Status indicator — planned */
.tag--planned {
  background: #EDE9FE;
  border-color: #8B5CF6;
  color: #4C1D95;
}


/* =============================================================
   7. SCROLL ANIMATIONS
   Elements start hidden (opacity 0, shifted down).
   JS adds .visible when they enter the viewport.
   ============================================================= */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =============================================================
   8. NAVIGATION
   Fixed, glassmorphism-style, gets shadow on scroll.
   ============================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(249, 247, 244, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition);
}

/* Shadow added by JS when user scrolls past 50px */
.nav.scrolled {
  box-shadow: var(--shadow-sm);
}

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

/* Logo / wordmark */
.nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--color-primary);
  letter-spacing: -0.5px;
}

.nav__logo:hover {
  color: var(--color-accent);
}

/* Desktop nav links */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.nav__links a {
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-muted);
  transition: color var(--transition);
}

.nav__links a:hover {
  color: var(--color-primary);
}

/* Hamburger button — hidden on desktop */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: all var(--transition);
}


/* =============================================================
   9. HERO SECTION
   Full-viewport height, two-column layout.
   ============================================================= */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 64px; /* offset for fixed nav */
  overflow: hidden;
}

/* Animated dot grid — pure CSS, no JS needed */
.hero__bg-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--color-border) 1.2px, transparent 1.2px);
  background-size: 32px 32px;
  opacity: 0.7;
  animation: grid-drift 35s linear infinite;
}

@keyframes grid-drift {
  0%   { background-position: 0 0; }
  100% { background-position: 32px 32px; }
}

/* Two-column grid: content | visual */
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Location label above the name */
.hero__eyebrow {
  display: flex;
  gap: var(--space-sm);
}

.hero__location {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* Main name — largest text on the page */
.hero__name {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  letter-spacing: -1.5px;
  color: var(--color-primary);
  line-height: 1.05;
}

/* Job title with arrow accent */
.hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--color-muted);
}

.hero__arrow {
  color: var(--color-accent);
  margin: 0 0.3rem;
}

/* One-liner tagline */
.hero__tagline {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  color: var(--color-text);
  max-width: 480px;
  line-height: 1.7;
  margin-top: var(--space-xs);
}

/* CTA button group */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Right column — photo wrapper */
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__photo-wrapper {
  position: relative;
  width: 360px;
  height: 360px;
}

/* Circular profile photo */
.hero__photo {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 4px solid var(--color-accent-warm);
  /* Layered glow: warm ring + depth shadow */
  box-shadow:
    0 0 0 10px rgba(232, 168, 56, 0.12),
    var(--shadow-lg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---- Floating credential badges ---- */
.badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-primary);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  /* Each badge gets a unique float animation delay via modifier classes */
  animation: badge-float 4s ease-in-out infinite;
}

.badge__icon {
  font-size: 1rem;
}

/* Badge positions — four corners around the photo */
.badge--tl { top: 20px;  left: -10px;  animation-delay: 0s;    animation-duration: 4.5s; }
.badge--tr { top: 30px;  right: -5px;  animation-delay: 1s;    animation-duration: 4.0s; }
.badge--bl { bottom: 40px; left: -20px; animation-delay: 2s;   animation-duration: 5.0s; }
.badge--br { bottom: 20px; right: -10px; animation-delay: 0.5s; animation-duration: 4.2s; }

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


/* =============================================================
   10. CREDIBILITY BAR
   Infinite scrolling marquee on all sizes.
   Fades out at edges with a CSS mask.
   ============================================================= */
#credibility {
  padding: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}

/* Fade-out mask at left and right edges */
.credibility__inner {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

/* The scrolling track — two sets of items for seamless loop */
.credibility__track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

/* Pause on hover — allows reading */
.credibility__track:hover {
  animation-play-state: paused;
}

.credibility__items {
  display: flex;
  align-items: center;
  padding: 1rem 0;
}

.credibility__item {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-muted);
  white-space: nowrap;
  letter-spacing: 0.03em;
  padding: 0 2.5rem;
  /* Dot separator using border */
  border-right: 1px solid var(--color-border);
}

.credibility__item:last-child {
  border-right: none;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* =============================================================
   11. ABOUT SECTION
   Two-column: bio on left, differentiator cards on right.
   ============================================================= */
#about {
  background: var(--color-bg);
}

.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.about__text {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--color-text);
  margin-top: var(--space-sm);
}

.about__differentiators {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Differentiator card */
.diff-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: transform var(--transition), box-shadow var(--transition);
}

.diff-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.diff-card__icon {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}

.diff-card__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--color-primary);
}

.diff-card__text {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.65;
}


/* =============================================================
   12. PROJECTS SECTION
   2-column card grid. Each card lifts on hover.
   ============================================================= */
#projects {
  background: var(--color-surface);
}

.projects__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.project-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.project-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}

.project-card__header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.project-card__title {
  font-size: 1.15rem;
  font-weight: 700;
}

.project-card__desc {
  font-size: 0.92rem;
  color: var(--color-muted);
  line-height: 1.65;
  flex: 1; /* pushes footer to bottom */
}

.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.project-card__footer {
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
}

/* Project type badge (coloured pill) */
.project-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.04em;
}

/* Colour per badge type */
.project-badge--internal  { background: #EFF6FF; color: #1D4ED8; border: 1px solid #BFDBFE; }
.project-badge--automation { background: #F0FDF4; color: #15803D; border: 1px solid #BBF7D0; }
.project-badge--agents    { background: #FDF4FF; color: #7E22CE; border: 1px solid #E9D5FF; }
.project-badge--n8n       { background: #FFF7ED; color: #C2410C; border: 1px solid #FED7AA; }

/* "Demo on request" link style */
.project-link {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--color-muted);
}

.project-link--demo::before {
  content: '→ ';
  color: var(--color-accent);
}


/* =============================================================
   13. CAPABILITIES STACK
   2-column grid of grouped skill cards.
   ============================================================= */
#stack {
  background: var(--color-bg);
}

.stack__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.stack-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

/* Group heading — mono, small caps style */
.stack-group__title {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
}

.stack-group__items {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.stack-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.93rem;
  color: var(--color-text);
}

.stack-item__icon {
  font-size: 1.1rem;
  width: 1.5rem;
  text-align: center;
  flex-shrink: 0;
}


/* =============================================================
   14. CREDENTIALS SECTION
   3-column grid. In-progress cards styled with dashed border.
   ============================================================= */
#credentials {
  background: var(--color-surface);
}

.creds__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.cred-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: transform var(--transition), box-shadow var(--transition);
}

.cred-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* Issuer name — small, mono, accent colour */
.cred-card__issuer {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-accent);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Certification name */
.cred-card__name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-primary);
  line-height: 1.35;
}

/* Date + credential ID */
.cred-card__meta {
  font-size: 0.78rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
}

/* In-progress certification — dashed amber border */
.cred-card--in-progress {
  border: 1.5px dashed #F59E0B;
  background: #FFFBEB;
}

/* "In Progress" pill label */
.cred-card__badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #92400E;
  background: #FEF3C7;
  border: 1px solid #F59E0B;
  border-radius: var(--radius-sm);
  padding: 0.1rem 0.45rem;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.2rem;
}


/* =============================================================
   15. CTA FOOTER
   Dark navy background, centred, confident close.
   ============================================================= */
#cta {
  background: var(--color-primary);
  padding: var(--space-xl) 0;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.footer__headline {
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  max-width: 680px;
  line-height: 1.35;
}

.footer__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

.footer__copy {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.35);
  margin-top: var(--space-sm);
}


/* =============================================================
   16. RESPONSIVE — TABLET (max-width: 768px)
   ============================================================= */
@media (max-width: 768px) {
  :root {
    --space-xl: 4rem;
    --space-lg: 2.5rem;
  }

  /* Nav — show hamburger, hide links by default */
  .nav__links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: var(--space-sm);
    gap: var(--space-sm);
    box-shadow: var(--shadow-md);
    z-index: 99;
  }

  /* JS adds .open to show mobile menu */
  .nav__links.open {
    display: flex;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Hero — stack vertically, photo on top */
  .hero__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-md);
  }

  .hero__visual {
    order: -1; /* photo appears above text on mobile */
  }

  .hero__photo-wrapper {
    width: 280px;
    height: 280px;
  }

  .hero__photo {
    width: 230px;
    height: 230px;
  }

  /* Pull badges in slightly on smaller screens */
  .badge--tl { left: 0; }
  .badge--bl { left: -5px; }
  .badge--tr { right: 0; }
  .badge--br { right: 0; }

  .hero__tagline {
    margin: 0 auto;
  }

  .hero__ctas {
    justify-content: center;
  }

  /* About — single column */
  .about__inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Projects — single column */
  .projects__grid {
    grid-template-columns: 1fr;
  }

  /* Stack — single column */
  .stack__grid {
    grid-template-columns: 1fr;
  }

  /* Credentials — 2 columns */
  .creds__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================
   17. RESPONSIVE — MOBILE (max-width: 480px)
   ============================================================= */
@media (max-width: 480px) {
  :root {
    --container-pad: 1rem;
    --space-xl: 3rem;
    --space-md: 1.5rem;
  }

  .hero__photo-wrapper {
    width: 230px;
    height: 230px;
  }

  .hero__photo {
    width: 190px;
    height: 190px;
  }

  /* Slightly smaller badge text on very small screens */
  .badge {
    font-size: 0.7rem;
    padding: 0.3rem 0.6rem;
  }

  /* Credentials — single column on very small screens */
  .creds__grid {
    grid-template-columns: 1fr;
  }

  .footer__headline {
    font-size: 1.4rem;
  }

  .section-subtitle {
    font-size: 0.95rem;
  }
}