/* ========================================
   GLOBAL VARIABLES
   ========================================  s*/ 

:root {
  /* Color palette */
  --bg: #0f1724;
  --panel: #12141b;
  --text: #e9eef5;
  --muted: #aab4c3;
  --border: rgba(255,255,255,.08);
  
  /* Layout constants */
  --radius: 1.5rem;
  --max: 150rem;
  --profile-edge-gap: 2.25rem;
  --content-top-gap: 1.5vw;
  
  /* Spacing scale */
  --space-xs: 0.5625rem;
  --space-sm: 1rem;
  --space-md: 1.125rem;
  --space-lg: 1.6875rem;
  --space-xl: 2.625rem;
  --greeting-gap: clamp(0rem, 3vw, 4rem);
  
  /* Typography scale */
  --type-h1: 3.5rem;
  --type-h2: 3rem;
  --type-h3: 1.6875rem;
  --type-p1: 1.5rem;
  --type-p2: 1.7rem;
  --type-caption: 0.9375rem;
  
  /* Card styling */
  --card-box-shadow: 0 15px 45px rgba(0,0,0,.25);
  --card-backdrop: blur(15px);
  
  /* Professional cards (separate from project cards) */
  --professional-bg: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --professional-border: rgba(255,255,255,0.04);
  --professional-radius: var(--radius);
  --professional-box-shadow: 0 15px 45px rgba(0,0,0,.25);
  --professional-backdrop: blur(15px);
  --professional-meta-padding: 0;
  --professional-meta-padding-mobile: 0.875rem;
  --professional-h3-size: clamp(1.6rem, 3vw, 2.4rem);
  --professional-p-size: clamp(1.125rem, 2vw, 2rem);
  --professional-body-size: clamp(1rem, 2vw, 1.4rem);
  --professional-logo-margin: 2.34375rem 0 0 1.6875rem;
  --professional-bullet-color: #c8ced6;
  
  /* Visual effects */
  --text-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.02);
}

/* ========================================
   BASE & LAYOUT
   ======================================== */

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(9000px 1000px at 20% -10%, #243353 0%, transparent 60%),
    radial-gradient(900px 1000px at 80% 0%, #1b4a52 0%, transparent 80%),
    var(--bg);
  color: var(--text);
  line-height: 1.5;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

.site-scale {
  zoom: .75;
}

@supports not (zoom: 1) {
  .site-scale {
    zoom: 1;
  }
}

a { 
  color: inherit; 
  text-decoration: none; 
  opacity: .9; 
}

a:hover { 
  opacity: 1; 
  text-decoration: underline; 
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1vw clamp(2%, 1vw, 6%);
}

/* ========================================
   HEADER
   ======================================== */

.header {
  display: flex;
  gap: var(--space-lg);
  align-items: center;
  justify-content: space-between;
  min-height: 7.5rem;
  text-shadow: var(--text-shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.brand .brand-text { 
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  gap: 0.5rem;
}

.brand h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.2vw, var(--type-h2));
  letter-spacing: 0.2px;
  line-height: 1;
}

#brand-subtitle {
  margin: 0;
  font-size: clamp(1.3rem, 2.8vw, calc(var(--type-p2) + .4rem));
  line-height: 1;
  color: var(--muted);
}

.header-avatar {
  width: clamp(5rem, 6vw, 7rem);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  align-self: center;
  flex-shrink: 0;
}

.links {
  display: flex;
  gap: clamp(0.4rem, 1.6vw, 1.3125rem);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.links a { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
}

.links img.icon {
  width: clamp(1.3rem, 4.5vw, 3.25rem);
  height: auto;
  display: block;
  opacity: .95;
}

.links img.icon:hover { 
  opacity: 1; 
}

.resume-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.2rem, 1.2vw, 0.625rem);
  padding: clamp(0.3rem, 1.6vw, 1rem) clamp(0.75rem, 4.5vw, 1.6875rem);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.12);
  font-weight: 700;
  font-size: clamp(0.857rem, 1.8vw, 2rem);
  text-decoration: none;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease, border-color .15s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  min-height: clamp(.2rem, 3.5vw, 2.75rem);
}

.resume-btn:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-0.0625rem);
  box-shadow: 0 14px 36px rgba(0,0,0,.30);
  border-color: rgba(255,255,255,0.18);
  text-decoration: none;
}

/* ========================================
   SHOWREEL SECTION
   ======================================== */

.showreel {
  display: grid;
  grid-template-columns: minmax(28.125rem, 60%) minmax(22.5rem, 40%);
  gap: 1.875rem;
  align-items: start;
  width: 100%;
  margin: 0 0 2.625rem 0;
}

.showreel-media {
  position: relative;
  width: 100%;
}

.tagline {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.greeting {
  font-size: clamp(1.75rem, 5.2vw, calc(var(--type-h1) + .5rem));
  font-weight: 600;
  text-shadow: var(--text-shadow);
  margin: 0;
  opacity: 0;
  transform: translateY(0.75rem);
  will-change: transform, opacity;
  animation: fadeUp .6s ease forwards;
  animation-delay: var(--delay, 0s);
}

.showreel-text {
  font-size: clamp(1.125rem, 3.8vw, calc(var(--type-p1) + 1.6rem));
  margin: 0;
  margin-top: var(--greeting-gap);
  text-shadow: var(--text-shadow);
  opacity: 0;
  transform: translateY(0.75rem);
  will-change: transform, opacity;
  animation: fadeUp .6s ease forwards;
  animation-delay: var(--delay, 0s);
}

.showreel-gif {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
  min-height: 0;
  max-height: 80vh;
  display: block;
  object-fit: contain;
  border-radius: var(--radius);
  background: rgba(18, 20, 27, .85);
  border: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  overflow: hidden;
}

/* ========================================
   SECTION HEADINGS
   ======================================== */

.taglines {
  font-size: clamp(1.5rem, 4vw, calc(var(--type-p1) + 1.8rem));
  text-align: center;
  line-height: 1.2;
  margin: 2rem 0 0.375rem;
  font-weight: 400;
  opacity: 0;
  transform: translateY(0.75rem);
  will-change: transform, opacity;
  animation: fadeUp .6s ease forwards;
  animation-delay: var(--delay, 0s);
}

/* ========================================
   BRANDS SECTION
   ======================================== */

.card.brands {
  --edge-gap: 7.5rem;
  padding-top: 0;
  padding-bottom: 0.1875rem;
  margin: 1.125rem auto 1.875rem;
  box-sizing: border-box;
  width: calc(100% - (var(--edge-gap) * 1.15));
  max-width: 65.625rem;
  min-width: 18rem;
  min-height: 8.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
}

.brands-grid {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  margin: 0 0.375rem;
  flex-wrap: wrap;
}

.brand-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-xs) * 1) calc(var(--space-sm) * 1);
  border-radius: calc(var(--radius) * 1);
  background: transparent;
  border: none;
  min-width: clamp(1rem, 8vw, 15rem);
  min-height: clamp(4rem, 10vh, 7.125rem);
  flex: 0 0 auto;
}

.brand-item img {
  width: auto;
  height: clamp(2.5rem, 5vw, 4.21875rem);
  display: block;
  object-fit: contain;
}

.brand-item img.microsoft { 
  height: clamp(2.5rem, 4vw, 3.375rem); 
}

.brand-item img.hp { 
  height: clamp(3.5rem, 5.8vw, 4.875rem); 
}

.brand-item img.hyperx { 
  height: clamp(4.25rem, 6.8vw, 5.71875rem); 
}

/* ========================================
   PROJECTS SECTION
   ======================================== */

.card {
  background: rgba(18, 20, 27, .85);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: calc(var(--space-sm) * 1.6875);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  opacity: 0;
  transform: translateY(calc(var(--space-xs) * 2));
  will-change: transform, opacity;
  animation: fadeUp .6s ease forwards;
  animation-delay: var(--delay, 0s);
}

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--space-lg) * 1.8);
  margin: calc(var(--space-md) * 1.5) 0;
}

.projects-grid .project {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--space-lg) * 1.25);
  padding: 0;
  align-items: stretch;
  border-radius: calc(var(--radius) * 1.2);
}

/* Alternating media/text layout */
.projects-grid .project:nth-child(even) {
  direction: rtl;
}

.projects-grid .project:nth-child(even) > * {
  direction: ltr;
}

.projects-grid .project:nth-child(even) .meta {
  text-align: right;
}

.projects-grid .project:nth-child(even) .chips {
  justify-content: flex-end;
}

.projects-grid .project:nth-child(even) ul {
  padding-left: 0;
  padding-right: 1.5rem;
  list-style-type: none;
}


/* Media column */
.projects-grid .media {
  display: flex;
  overflow: hidden;
  border-radius: calc(var(--radius) * 1.2);
  padding: 0;
  min-height: 18.75rem;
  position: relative;
}

.projects-grid .media img,
.projects-grid .media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--radius) * 1.2);
}

/* Poster overlay that fades out when video is ready */
.showreel-media .media-poster,
.projects-grid .media .media-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 10ms ease-in-out;
  z-index: 1;
  border-radius: var(--radius);
}

#familiars-media video {
  min-height: clamp(30rem, 40vw, 60rem);
  height: auto;
}

#breakroom-media video {
  min-height: clamp(30rem, 30vw, 60rem);
  height: auto;
}

#surface-changer-media video {
  min-height: clamp(30rem, 30vw, 60rem);
  height: auto;
}

.projects-grid .mediaPlaceholder {
  height: 18.75rem;
  border-radius: calc(var(--radius) * 1.2);
  border: 1px dashed var(--border);
  display: grid;
  place-items: center;
  color: var(--muted);
}

/* Text column */
.projects-grid .meta {
  padding: 0 clamp(1rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
}

.project h3 {
  margin: calc(var(--space-xs) * 1.5) 0;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 500;
}

.project p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.125rem, 2vw, 2rem);
}

.project p a {
  font-weight: 500;
  text-decoration: underline;
}

.project ul {
  margin: 0;
  padding-top: 1.5rem;
  padding-left: 1.5rem;
  color: var(--muted);
  font-size: clamp(1.125rem, 2vw, 2rem);
  line-height: 1;
}

.project ul li {
  margin-bottom: 0.25rem;
}

#about-text {
  color: var(--muted);
  font-size: clamp(1.125rem, 2vw, 2rem);
}

/* Chips/tags */
.chips {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
  margin-top: auto;
}

.projects-grid .meta .chips {
  gap: clamp(0.3rem, 1vw, 0.85rem);
}

.chip {
  font-size: clamp(calc(var(--type-p2) - .5rem), 1.4vw, var(--type-p1));
  padding: calc(var(--space-xs) * 1.5) calc(var(--space-sm) * 1.5);
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  background: rgba(0,0,0,.2);
}

.projects-grid .meta .chip {
  font-size: clamp(0.75rem, 1.25vw, 2rem);
  padding: clamp(0.2rem, 0.8vw, 0.45rem) clamp(0.35rem, 1.1vw, 0.65rem);
}

/* ========================================
   WRITING SECTION
   ======================================== */

.writing-section {
  margin-top: 4.5rem;
}

/* Hide chips inside the writing/media section */
.writing-section .chips {
  display: none;
}

.writing-section .media {
  max-height: 35rem;
}

.writing-section .media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.writing-section .media img[src$="ARInsider-Logo.webp"] {
  border-radius: 0;
}

/* ========================================
   PROFESSIONAL EXPERIENCE SECTION
   ======================================== */

.professional-section { 
  text-align: center; 
  margin: 4.5rem 0 calc(var(--space-xl) * 1);
}

.professional-section .taglines { 
  margin-bottom: calc(var(--space-xs) * 1.5); 
}

.professional-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  margin: 1.125rem 0 2.25rem;
}

.card.professional {
  width: 100%;
  max-width: 100%;
  background: var(--professional-bg);
  border: 1px solid var(--professional-border);
  border-radius: var(--professional-radius);
  padding: 0;
  box-shadow: var(--professional-box-shadow);
  opacity: 0;
  transform: translateY(0.75rem);
  will-change: transform, opacity;
  animation: fadeUp .6s ease forwards;
  animation-delay: var(--delay, 0s);
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
}

.card.professional .professional-meta {
  text-align: left;
  padding: .5rem;
}

.card.professional h3 {
  margin: 0;
  font-size: var(--professional-h3-size);
}

.card.professional p { 
  margin: 0; 
  color: var(--muted); 
  font-size: var(--professional-p-size); 
}

.card.professional .professional-bullets {
  margin: calc(var(--space-xs) * 1.5) 0 0 0;
  padding-left: 1.25rem;
  color: var(--text);
}

.card.professional .professional-bullets li {
  margin-bottom: 0.75rem;
  line-height: 1.2;
  font-size: var(--professional-body-size);
  color: var(--professional-bullet-color);
}

.card.professional .professional-bullets li::marker {
  color: var(--text);
}

.card.professional .professional-bullets .subtext {
  margin: 0.375rem 0 0 0;
  color: var(--muted);
  font-size: var(--professional-body-size);
  margin-left: 0.125rem;
}

/* Unity logo for game projects */
.card.professional .professional-bullets li.with-logo {
  display: flex;
  align-items: flex-start;
  gap: 1.6875rem;
  list-style: none;
  padding-left: 0;
}

.card.professional .professional-bullets li.with-logo .game-text { 
  flex: 1; 
  font-size: var(--professional-body-size); 
}

.card.professional .unity-logo {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
  margin-top: 0;
  flex: 0 0 4.5rem;
  background: rgba(255,255,255,0);
  padding: 0.5625rem;
  border-radius: calc(var(--radius) * 0.5);
  display: inline-block;
  box-shadow: none;
  filter: none;
}

.professional-logo {
  width: clamp(5rem, 8vw, 6rem);
  height: clamp(5rem, 8vw, 6rem);
  object-fit: contain;
  margin: var(--professional-logo-margin);
  flex: 0 0 clamp(5rem, 8vw, 8rem);
}

/* ========================================
   SKILLS SECTION
   ======================================== */

.skills {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9375rem;
}

.skills li {
  padding: 0.45rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  font-size: clamp(0.75rem, 1.2vw, 1.4rem);
}

.skills-grid {
  display: block;
  margin: 1.125rem 0 2.25rem 0;
}

.skills-column { 
  min-width: 0; 
  margin-bottom: 1.6875rem; 
}

.skill-heading {
  margin: 0 0 0.625rem 0;
  font-weight: 700;
  color: var(--text);
  font-size: clamp(1.3125rem, 1.6vw, var(--type-h3));
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  padding-bottom: 4rem;
  color: var(--muted);
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeUp {
  from { 
    opacity: 0; 
    transform: translateY(0.75rem); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Desktop large (900px+) */
@media (min-width: 900px) {
  .card.professional { 
    max-width: 84.375rem; 
  }
}

/* Tablet & smaller (900px) */
@media (max-width: 900px) {
  body { 
    background-attachment: scroll; 
  }
  
  .showreel {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 1.125rem;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
  
  .links {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: clamp(0.75rem, 1.6vw, 1.3125rem);
    justify-content: end;
    align-items: center;
  }
  
  .links > .resume-btn { 
    grid-column: 1 / -1; 
    justify-self: center; 
  }
}

/* Medium (980px) */
@media (max-width: 980px) {
  .projects-grid .project {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .projects-grid .mediaPlaceholder { 
    height: 13.75rem; 
  }
}

/* Small (620px) */
@media (max-width: 620px) {
  .card.professional { 
    flex-direction: column; 
    align-items: stretch; 
  }
  
  .professional-logo { 
    width: clamp(4.5rem, 12vw, 6rem); 
    height: clamp(4.5rem, 12vw, 6rem); 
    margin: 1.3125rem auto 0 auto; 
    flex: 0 0 auto; 
  }
  
  .card.professional .professional-meta { 
    padding: var(--professional-meta-padding-mobile); 
  }
  
  .card.professional .unity-logo { 
    width: 3.1875rem; 
    height: 3.1875rem; 
    flex: 0 0 3.1875rem; 
    padding: 0.5625rem; 
  }
  
  .card.professional .professional-bullets li.with-logo { 
    gap: 1.125rem; 
  }
}

/* Small (600px) */
@media (max-width: 600px) {
  .writing-section { 
    margin-top: 28px; 
  }
  
  .professional-section { 
    margin-top: 28px; 
  }
}

/* Mobile (560px) */
@media (max-width: 560px) {
  .resume-btn { 
    padding: clamp(0.6rem, 2.5vw, 0.9375rem) clamp(0.75rem, 6vw, 1.3125rem); 
    font-size: clamp(0.875rem, 1.6vw, 1rem); 
  }
  
  .links {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .links > a { 
    justify-self: center; 
  }
  
  .links > .resume-btn { 
    grid-column: 1 / -1; 
    justify-self: center; 
  }
}