/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
  --font-size-base: 16px;
  --font-size-h1: 1.9rem;
  --font-size-h2: 1.4rem;
  --font-size-body: 1.15rem;
  
  --line-height-tight: 1.2;
  --line-height-base: 1.6;
  
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4rem;
  
  /* Header heights */
  --header-height-full: 35vh;
  --header-height: 15vh;
  --content-gap: 2.5rem;
  --grid-gap: 2rem;
  
  --color-bg-header: #e8e8e8;
  --color-bg-body: #fffbf5;
  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-accent: #FF8800;
  --color-accent-glow: rgba(255, 136, 0, 0.15);
  
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  
  --divider-speed-idle: 28s;
  --divider-speed-active: 8s;
  --divider-opacity-idle: 0.25;
  --divider-opacity-active: 1;
}

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

/* Lenis smooth scroll support */
html.lenis, html.lenis body {
  height: auto;
}

html {
  font-size: var(--font-size-base);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-text);
  color: var(--color-bg-body);
  text-decoration: none;
  font-weight: 500;
  border-radius: 0 0 4px 4px;
  z-index: 1000;
  transition: top 150ms var(--ease-out-expo);
}

.skip-link:focus {
  top: 0;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================
   LAYOUT GRID
   ============================================ */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 0.2fr;
  gap: var(--grid-gap);
  width: 100%;
}

/* ============================================
   MASTHEAD / HEADER
   Tall header (35vh) that sticks with negative top
   so only bottom 15vh remains visible after scroll
   ============================================ */
.masthead {
  position: sticky;
  top: calc(-1 * (var(--header-height-full) - var(--header-height)));
  z-index: 100;
  background-color: var(--color-bg-header);
  height: var(--header-height-full);
}

.masthead-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 0.2fr;
  gap: var(--grid-gap);
  padding-bottom: 1rem;
}

.site-title {
  grid-column: 2;
  font-size: var(--font-size-h1);
  font-weight: 600;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.site-title-link {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 400ms var(--ease-out-expo);
}

.site-title-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180, 180, 180, 0.4) 15%,
    var(--color-accent) 50%,
    rgba(180, 180, 180, 0.4) 85%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  opacity: 0;
  transition: opacity 400ms var(--ease-out-expo);
}

.site-title-link:hover,
.site-title-link:focus-visible {
  color: var(--color-accent);
}

.site-title-link:hover::after,
.site-title-link:focus-visible::after {
  opacity: 1;
  animation: gradient-sweep 3s ease-in-out infinite;
}

.masthead-nav {
  grid-column: 3;
  display: flex;
  align-items: baseline;
  gap: var(--grid-gap);
}

/* ============================================
   NAV LINKS
   ============================================ */
.nav-link {
  font-size: var(--font-size-h1);
  font-weight: 400;
  line-height: var(--line-height-tight);
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  transition: color 400ms var(--ease-out-expo);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(180, 180, 180, 0.4) 15%,
    var(--color-accent) 50%,
    rgba(180, 180, 180, 0.4) 85%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  opacity: 0.5;
  transition: opacity 400ms var(--ease-out-expo);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-accent);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  opacity: 1;
  animation: gradient-sweep 3s ease-in-out infinite;
}

@keyframes gradient-sweep {
  0% { background-position: 100% 0; }
  50% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

.nav-link:not(:hover)::after {
  animation: none;
  background-position: 100% 0;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.page-content {
  padding-top: var(--content-gap);
  padding-bottom: 6.5vh;
  position: relative;
}

/* Fade mask - content fades as it approaches header */
.page-content::before {
  content: '';
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(
    to bottom,
    var(--color-bg-body) 0%,
    rgba(255, 251, 245, 0.8) 30%,
    rgba(255, 251, 245, 0) 100%
  );
  pointer-events: none;
  z-index: 50;
}

.content-section {
  background-color: var(--color-bg-body);
}

.content-section + .content-section {
  margin-top: calc(var(--font-size-h1) * var(--line-height-tight));
}

.content-section.has-divider {
  padding-bottom: calc(var(--font-size-h1) * var(--line-height-tight) * 1.8);
}

.content-section.has-divider + .content-section {
  margin-top: calc(var(--font-size-h1) * var(--line-height-tight) * 1.8);
}

.content-left {
  grid-column: 2;
}

.content-right {
  grid-column: 3;
}

/* ============================================
   SECTION HEADINGS
   ============================================ */
.section-heading {
  font-size: var(--font-size-h2);
  font-weight: 500;
  line-height: var(--line-height-tight);
  color: var(--color-text-muted);
  position: sticky;
  top: calc(var(--header-height) + var(--content-gap));
}

.arrow {
  display: inline-block;
  margin-left: 0.35em;
  transition: transform 300ms var(--ease-out-expo), color 300ms var(--ease-out-expo);
}

.section-heading:hover .arrow {
  transform: translateX(4px);
  color: var(--color-accent);
}

/* ============================================
   BODY TEXT & LINKS
   ============================================ */
.section-text {
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.section-text + .section-text {
  margin-top: var(--space-sm);
}

.section-text a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
  transition: border-color 300ms var(--ease-out-expo);
}

.section-text a:hover,
.section-text a:focus {
  border-color: var(--color-accent);
  background: linear-gradient(90deg, var(--color-text) 0%, var(--color-accent) 50%, var(--color-text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-gradient-sweep 3s ease-in-out infinite;
}

@keyframes text-gradient-sweep {
  0% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* ============================================
   KINETIC FLOW DIVIDER
   ============================================ */
.divider-line {
  grid-column: 1 / -1;
  margin-top: calc(var(--font-size-h1) * var(--line-height-tight) * 1.8);
  height: 3px;
  display: grid;
  grid-template-columns: 1fr 2fr 4fr 0.2fr;
  gap: var(--grid-gap);
}

.divider-line::before,
.divider-line::after {
  content: '';
  height: 3px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    rgba(200, 200, 200, 0) 0%,
    rgba(180, 180, 180, 0.3) 10%,
    rgba(160, 160, 160, 0.5) 25%,
    var(--color-accent) 50%,
    rgba(160, 160, 160, 0.5) 75%,
    rgba(180, 180, 180, 0.3) 90%,
    rgba(200, 200, 200, 0) 100%
  );
  background-size: 300% 100%;
  opacity: var(--divider-opacity-idle);
  transition: opacity 800ms ease-in-out, filter 800ms ease-in-out;
}

.divider-line::before {
  grid-column: 2;
  animation: kinetic-flow-left var(--divider-speed-idle) ease-in-out infinite;
}

.divider-line::after {
  grid-column: 3;
  animation: kinetic-flow-right calc(var(--divider-speed-idle) * 1.15) ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes kinetic-flow-left {
  0% { background-position: 100% 0; }
  25% { background-position: 60% 0; }
  50% { background-position: 0% 0; }
  75% { background-position: 40% 0; }
  100% { background-position: 100% 0; }
}

@keyframes kinetic-flow-right {
  0% { background-position: 0% 0; }
  30% { background-position: 50% 0; }
  50% { background-position: 100% 0; }
  70% { background-position: 50% 0; }
  100% { background-position: 0% 0; }
}

.has-divider { --divider-intensity: 0; }

.has-divider.in-view .divider-line::before,
.has-divider.in-view .divider-line::after {
  opacity: calc(var(--divider-opacity-idle) + (var(--divider-opacity-active) - var(--divider-opacity-idle)) * var(--divider-intensity, 0.5));
  filter: drop-shadow(0 0 calc(4px * var(--divider-intensity, 0)) var(--color-accent-glow));
}

.has-divider.in-view .divider-line::before { animation-duration: var(--divider-speed-active); }
.has-divider.in-view .divider-line::after { animation-duration: calc(var(--divider-speed-active) * 1.15); }

.section-divider { padding: var(--space-lg) 0; }
.section-divider .divider-line { margin-top: 0; }

/* ============================================
   SPOTIFY ARTISTS
   ============================================ */
.spotify-artists {
  font-size: var(--font-size-body);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.loading-text { color: var(--color-text-muted); font-style: italic; }
.error-text { color: var(--color-text-muted); }

.spotify-artist-link {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-text);
}

.spotify-artist-link:hover,
.spotify-artist-link:focus {
  background: linear-gradient(90deg, var(--color-text) 0%, var(--color-accent) 50%, var(--color-text) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-gradient-sweep 3s ease-in-out infinite;
}

.artist-separator { color: var(--color-text); margin: 0 0.15em; user-select: none; }

/* ============================================
   CV PAGE STYLES
   ============================================ */
.cv-items { display: flex; flex-direction: column; gap: var(--space-md); }
.cv-item { display: flex; flex-direction: column; gap: 0.25em; }
.cv-item-title { font-size: var(--font-size-body); font-weight: 600; line-height: var(--line-height-tight); color: var(--color-text); margin: 0; }
.cv-item-meta { font-size: var(--font-size-body); line-height: var(--line-height-base); color: var(--color-text-muted); margin: 0; }

.cv-item-meta a, .cv-company a { color: var(--color-text-muted); text-decoration: none; border-bottom: 1px solid var(--color-text-muted); }
.cv-item-meta a:hover, .cv-item-meta a:focus, .cv-company a:hover, .cv-company a:focus {
  background: linear-gradient(90deg, var(--color-text-muted) 0%, var(--color-accent) 50%, var(--color-text-muted) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-gradient-sweep 3s ease-in-out infinite;
}

.cv-experience { display: flex; flex-direction: column; gap: 0.25em; }
.cv-role { font-size: var(--font-size-body); font-weight: 600; line-height: var(--line-height-tight); color: var(--color-text); margin: 0; }
.cv-company { font-size: var(--font-size-body); line-height: var(--line-height-base); color: var(--color-text-muted); margin: 0 0 0.5em 0; }
.cv-description { display: flex; flex-direction: column; gap: 0.5em; }
.cv-description p { font-size: var(--font-size-body); line-height: var(--line-height-base); color: var(--color-text); margin: 0; padding-left: 1.5em; position: relative; }
.cv-description p::before { content: '→'; position: absolute; left: 0; color: var(--color-accent); }

/* Tech stack line - extra spacing, inline bold label */
.cv-description .cv-tech-stack { margin-top: 0.75em; }
.cv-description .cv-tech-stack strong { font-weight: 600; }

/* Role intro - no arrow, extra spacing below */
.cv-description .cv-role-intro { padding-left: 0; margin-bottom: 0.75em; }
.cv-description .cv-role-intro::before { display: none; }

.cv-skills-grid { display: flex; flex-direction: column; gap: var(--space-md); }
.cv-skill-category { display: flex; flex-direction: column; gap: 0.25em; }
.cv-skill-heading { font-size: var(--font-size-body); font-weight: 600; line-height: var(--line-height-tight); color: var(--color-text); margin: 0; }
.cv-skill-items { font-size: var(--font-size-body); line-height: var(--line-height-base); color: var(--color-text-muted); margin: 0; }

/* ============================================
   PROJECT CARDS
   ============================================ */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, 325px); gap: var(--space-md); }

.project-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-header);
  text-decoration: none;
  color: var(--color-text);
  overflow: hidden;
  width: 325px;
  transition: transform 400ms var(--ease-out-expo);
}

.project-card:hover { transform: translateY(-3px); }

.project-image { width: 100%; aspect-ratio: 10 / 3; position: relative; overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out-expo); }
.project-card:hover .project-image img { transform: scale(1.03); }

.project-info { padding: var(--space-sm); display: flex; flex-direction: column; gap: var(--space-xs); flex: 1; }
.project-title { font-size: var(--font-size-h2); font-weight: 500; line-height: var(--line-height-tight); color: var(--color-text); margin: 0; }
.project-description { font-size: var(--font-size-body); line-height: var(--line-height-base); color: var(--color-text); margin: 0; }

.project-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-body);
  font-weight: 500;
  color: var(--color-accent);
  margin-top: auto;
  padding-top: var(--space-xs);
  position: relative;
  width: fit-content;
}

.project-link .arrow { margin-left: 0.35em; transition: transform 400ms var(--ease-out-expo); }

.project-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent) 65%, var(--color-bg-header) 100%);
  opacity: 0.8;
  transition: opacity 400ms var(--ease-out-expo);
}

.project-card:hover .project-link .arrow { transform: translateX(5px); }
.project-card:hover .project-link::after {
  background: linear-gradient(90deg, rgba(200,200,200,0) 0%, rgba(180,180,180,0.3) 10%, var(--color-accent) 50%, rgba(180,180,180,0.3) 90%, rgba(200,200,200,0) 100%);
  background-size: 300% 100%;
  opacity: 1;
  animation: kinetic-flow-left var(--divider-speed-active) ease-in-out infinite;
}

.project-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ============================================
   RESPONSIVE: TABLET
   ============================================ */
@media (max-width: 991px) {
  :root {
    --font-size-h1: 1.625rem;
    --font-size-h2: 1.25rem;
    --font-size-body: 1.1rem;
    --header-height-full: 28vh;
    --header-height: 12vh;
    --content-gap: 2rem;
    --grid-gap: 1.5rem;
  }
}

/* ============================================
   RESPONSIVE: MOBILE
   ============================================ */
@media (max-width: 767px) {
  :root {
    --font-size-h1: 1.5rem;
    --font-size-h2: 1.2rem;
    --font-size-body: 1.05rem;
    --header-height-full: 25svh;
    --header-height: 15svh;
    --content-gap: 1.5rem;
    --grid-gap: 1rem;
    --space-sm: 1.25rem; /* More horizontal padding on mobile */
  }
  
  .grid-container {
    grid-template-columns: 1fr;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  }
  
  .masthead-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 var(--space-sm);
    padding-bottom: 1rem;
    gap: var(--space-sm);
  }
  
  .site-title { white-space: nowrap; flex-shrink: 0; }
  .masthead-nav { display: flex; flex-direction: row; gap: var(--space-md); flex-shrink: 0; }
  .content-left, .content-right { grid-column: 1; }
  
  /* Smaller fade mask on mobile */
  .page-content::before {
    height: 40px;
  }
  
  .divider-line { display: block; margin-top: var(--space-lg); padding: 0 var(--space-sm); }
  .divider-line::before { display: block; width: 100%; }
  .divider-line::after { display: none; }
  
  .section-heading { position: static; margin-bottom: var(--space-xs); }
  
  .content-section + .content-section { margin-top: var(--space-lg); }
  .content-section.has-divider { padding-bottom: var(--space-lg); }
  .content-section.has-divider + .content-section { margin-top: var(--space-lg); }
  
  .project-grid { grid-template-columns: 1fr; }
  .project-card { width: 100%; }
}

/* ============================================
   RESPONSIVE: SMALL MOBILE
   ============================================ */
@media (max-width: 479px) {
  :root {
    --font-size-h1: 1.25rem;
    --font-size-h2: 1.1rem;
    --font-size-body: 1rem;
    --header-height-full: 22svh;
    --header-height: 14svh;
    --content-gap: 1.25rem;
    --space-sm: 1rem; /* Keep decent padding on small screens */
  }
  
  .masthead-nav { gap: var(--space-sm); }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  .masthead { position: static; height: auto; background: none; }
  .hero-spacer { display: none; }
  .page-content { padding-top: 0; }
  .skip-link { display: none; }
  .divider-line::before, .divider-line::after { animation: none; background: var(--color-text-muted); }
}