/*
  ~~~
  AUTHOR: CODY WASHINGTON
  CREATED: 8.8.2025
  TITLE: A Portfolio: Cody Washington
  DESCRIPTION: Static portoflio website, showcasing several projects, my experience, and relevant skills
  ~~~
*/


:root {
  --x: 0vw;
  --y: 0vh;

  --background-color: rgb(15 23 42);
  --backdrop-color: rgb(6, 14, 34);
  --text-color: rgba(255, 255, 255, 0.65);
  --focus-color: rgba(255, 255, 249, 0.95);
  --select-color: rgb(212, 211, 223);
  --spotlight-color: rgba(6, 32, 104, 0.15);

  --element-dim: 35%;

  --line-height: 1.625;

  font-family: Inter, system-ui;
  font-feature-settings: 'liga' 1, 'calt' 1;

  background: rgba(rgb(6, 14, 34),1);
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif; 
  }
}

@keyframes blink-caret {
  from, to { 
    border-color: transparent; 
  }
  50% { 
    border-color: currentColor; 
  }
}

@keyframes fade-element {
  from {
    opacity: initial;
  } to {
    opacity: 0;
  }
}

@keyframes dim-element {
  from {
    opacity: initial;
  } to {
    opacity: --element-dim;
  }
}

a {
  color: var(--focus-color);

  text-decoration: none;
}

html {
  scroll-behavior: smooth;
  background-color: var(--backdrop-color);
}

body {
  height: auto;
  width: 100%;
  margin: 0;
  background-color: transparent;
}

main {
  width: 100%;
  min-height: 100vh;
  background-color: var(--background-color);
  display: flex;
  justify-content: center;
}

p, h1 {
  color: var(--text-color);

  text-align: justify;

  line-height: var(--line-height);
}

h1 {
  color: var(--focus-color);
}

p::selection, h1::selection, a::selection, b::selection {
  background-color: var(--select-color);
  color: var(--background-color)
}

#effect--spotlight {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;

  background:
    radial-gradient(
      circle 50em at var(--x) var(--y),
      var(--spotlight-color),
      transparent 80%
    );
}

#portfolio-container {
  min-height: 100vh; 
  width: 60%;

  display: grid;
  grid-template-areas: 
    "profile about"
    "profile experience"
    "profile projects"
    "profile interests";
  grid-template-columns: 40% 60%;  
}

.portfolio-section--header {
  background: rgba(var(--background-color), 0.3);
  backdrop-filter: blur(10px);

  z-index: 9998;

  font-size: 1em;
  padding: 1em;

  display: none;
}

#portfolio-profile {
  top: 0;

  position: sticky;
  align-self: start;
  justify-content: left;
  grid-area: profile;
}

#profile-title {
  padding: 0.85em;
}

#profile-title--name {
  margin-top: 2em;
  margin-bottom: 0;
}

#profile-title--tagline {
  color: var(--focus-color);

  border-right: 0.15em solid;

  margin-top: 0.5em;

  height: 1.45em;
  width: fit-content;

  white-space: nowrap;
  overflow: hidden;
  animation: blink-caret 0.75s step-end infinite;
}

#profile-title--short {
  text-align: left;
}

#profile-selector {
  list-style: none;
  padding: 0;
  width: 200px;
  height: 60%;
}

.profile-selector--item a {
  color: var(--text-color);

  font-weight: bold;
  font-size: smaller;
}

.profile-selector--item {
  padding: 10px 15px;
  border-radius: 12px; 

  transition: padding-left 0.3s ease, background-color 0.3s ease;

  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;  
}

.profile-selector--item::before {
  left: 0;
  top: 20%;
  height: 40%; 
  width: 0;

  content: "";
  position: absolute;
  transition: width 0.3s ease;  
}

.profile-selector--item:hover {
  padding-left: 1.5em;
}

.profile-selector--item:hover a {
  color: white;
}

#profile-contact {
  align-items: center;
}

.profile-contact--option {
  width: 27px;
  height: 27px;

  margin-left: 1em;

  fill: var(--text-color)
}

.profile-contact--option:hover {
  width: 27px;
  height: 27px;

  fill: var(--focus-color)
}

.portfolio-content {
  padding: 0 1em 1em 1em;
}

#portfolio-about {
  margin-top: 4em;

  grid-area: about;
}

.portfolio-tile {
  width: 100% auto;
  min-height: 150px;
  padding: 1em;      
  margin: 0 auto 1rem;
  border-radius: 0.45em;
  display: grid;
  grid-template-areas: 
    "period title"
    "period description";
  grid-template-columns: 30% 70%;
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.experience-tile {
  grid-template-areas: 
    "period title"
    "period description"
    "period skills";
}

#experience-resume, #project-more {
  color: var(--text-color);
  font-size: 0.7em;
}

#experience-resume:hover, #project-more:hover {
  color: white;
}

.project-tile {
    grid-template-areas: 
    "period title"
    "image description"
    "image skills";
}

.portfolio-tile:hover {
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  color: white;
}

.tile-period {
  font-weight: bold;

  text-align: left;

  margin-top: 1.5em;

  grid-area: period;
  font-size: 0.65em;
}

.tile-title {
  font-size: 0.80em;

  color: rgb(255, 255, 255);
  
  grid-area: title;
}

.tile-description {
  font-size: 0.7em;

  text-align: justify;
  grid-area: description;
}

.tile-skills {
  gap: 0.5em;  

  margin: 1em 0 1em 0;

  display: flex;    
  flex-wrap: wrap; 
}

.skills-title {
  margin: 0.1em;
  border-radius: 1em;
  font-size: 0.7em;
  padding: 0.15em 1em 0.15em 1em;

  width: fit-content;

  text-wrap: nowrap;

  color: rgb(248, 255, 223);
  background: rgba(255, 255, 0, 0.085);
}

.tile-image {
  grid-area: image;

  width: 105px;
  height: 65px;

  margin: 1em 0 1em 0;

  border-radius: 0.45em;
  border: var(--text-color) 1px;
}

#portfolio-experience {
  grid-area: experience;
}

#portfolio-projects {
  grid-area: projects;

  padding-bottom: 1em;
}

#portfolio-interests {
  grid-area: interests;
}

@media (max-width: 950px) {
  #effect--spotlight {
    display: none;
  }

  #profile-selector {
    display: none;
  }

  #portfolio-container {
    width: 100%;
    grid-template-areas: 
      "profile"
      "about"
      "experience"
      "projects"
      "interests";
    grid-template-columns: 100%;  
  }  

  .portfolio-section--header {
    top: 0;
    display: block;
    position: sticky;
  }

  #portfolio-profile {
    position: relative;
  }

  #profile-title--name {
    margin-top: 0.5em;
  }

  .experience-tile {
    grid-template-areas: 
      "period"
      "title"
      "description"
      "skills";
    grid-template-columns: 100%;
  }

  .project-tile {
    grid-template-areas: 
      "period"
      "title"
      "description"
      "image";
    grid-template-columns: 100%;
  }
}