/* @import url('https://unpkg.com/normalize.css') layer(normalize); */
@import './main.css';

@layer base {
    :root {
        --color-midnight: #251d29;
        --color-white: #fff;
        --projects-gap: 8px;
        --base: clamp(2rem, 8cqi, 80px);
        --easing: linear;
        --speed: .04s;
        
        /* Individual element speeds for fine control */
        --grid-speed: var(--speed);           /* Grid column transitions */
        --content-speed: calc(var(--speed) * 1.2);  /* Content opacity */
        --image-speed: calc(var(--speed) * 1.2);    /* Image effects */
        --delay-speed: calc(var(--speed) * 0.25);   /* Transition delays */
        
        /* 12 Column Grid Configuration */
        --grid-columns-default: 10fr 1fr 1fr;  /* Default: 3 columns */
        --grid-columns-first: 8fr 1fr 1fr 1fr;    /* First section: 4 columns */
        --grid-columns-second: 5fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; /* Second section: 8 columns */
    }
}

.projects-grid li :is(a, p, .project-footer) {
  opacity: 0;
  transition: opacity var(--content-speed) var(--easing);
  width: fit-content;
}

.projects-grid li img {
  filter: grayscale(1) brightness(1.5);
  scale: 1.1;
  transition-property: filter, scale;
  transition-duration: var(--image-speed);
  transition-timing-function: var(--easing);
}

.projects-grid li video {
  object-fit: cover;
  filter: grayscale(1) brightness(1.5);
  object-position: 50% 50%;
  opacity: .4;
  position: absolute;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  mask: radial-gradient(100% 100% at 100% 0, white, transparent);
}

.projects-grid [data-active='true'] video {
  filter: grayscale(0) brightness(1);
  scale: 1;
  opacity: var(--opacity, 1);
}

.projects-grid [data-active='true'] :is(a, p, h3, svg, .project-footer) {
  opacity: var(--opacity, 1);
}

.projects-grid [data-active='true'] :is(a, p, .project-footer) {
  transition-delay: var(--delay-speed);
  z-index: 1;
}

.projects-grid [data-active='true'] img {
  filter: grayscale(0) brightness(1);
  scale: 1;
  transition-delay: var(--delay-speed);
}

.projects-grid article svg {
  stroke: var(--color-white);
  width: 1em;
  fill: none;
}

.light .projects-grid article svg {
  stroke: var(--color-midnight);
}

.projects-grid article {
  height: 100%;
  position: absolute;
  font-family: var(--font-family-heading);
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--gap);
  padding-inline: calc(var(--base) * 0.5 - 9px);
  padding-bottom: 1rem;
  overflow: hidden;
}

.projects-grid h5 {
  color: var(--color-white);
  font-size: 1.2em;
  font-weight: 400;
  position: absolute;
  top: 1rem;
  left: calc(var(--base) * 0.5);
  transform-origin: 0 50%;
  rotate: 90deg;
  width: 150%;
  z-index: 1;
}

.projects-grid [data-active="false"] h5 {
  width: 200%;
}

.light .projects-grid h5 {
  color: var(--color-midnight);
  width: 150%;
}

.projects-grid p {
  color: var(--color-white);
  font-size: 1em;
  text-wrap: balance;
  line-height: 1.45;
  --opacity: 0.8;
}

.light .projects-grid p {
  color: var(--color-midnight);
  line-height: 1.45;
}

.light .projects-grid a {
  color: var(--color-midnight);
  line-height: 1;
}

.projects-grid a {
  position: absolute;
  bottom: 1.4rem;
  left: calc(var(--base) * 0.5 - 9px + 2em); /* Position next to emoji */
  height: 1em;
  line-height: 1;
  color: light-dark(var(--color-white), var(--color-midnight));
}

.projects-grid a:is(:focus-visible, :hover) span {
  color: light-dark(var(--color-midnight, var(--color-white)));
  padding: .1em .25em;
}

.projects-grid span {
  display: inline;
  padding: .1em .25em;
  text-underline-offset: 4px;
  translate: calc(var(--base) * 0.5);
  font-weight: 500;
}

.projects-grid span.emoji {
  margin-left: -4px;
}

.projects-grid img {
  position: absolute;
  pointer-events: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mask: radial-gradient(100% 100% at 100% 0, white, transparent);
}

.projects-grid ul {
  display: grid;
  container-type: inline-size;
  grid-template-columns: var(--grid-columns-default);
  gap: var(--projects-gap);
  list-style-type: none;
  justify-content: center;
  padding: 0;
  height: clamp(300px, 40dvh, 474px);
  margin: 0 auto;
  max-width: calc(100% - .25rem);
  transition: grid-template-columns var(--grid-speed) var(--easing);
  transition-property: grid-template-columns;
  transition-duration: var(--grid-speed);
  transition-timing-function: var(--easing);
}

h2#projects-heading-1, h2#projects-heading-2, h2#notes-heading {
  margin-bottom: 1.5rem;
}

/* First projects section: "What I'm Working On" */
section[aria-labelledby="projects-heading-1"] .projects-grid ul {
  grid-template-columns: var(--grid-columns-first);
}

/* Second projects section: "Recent Projects" */
section[aria-labelledby="projects-heading-2"] .projects-grid ul {
  grid-template-columns: var(--grid-columns-second);
}

.projects-grid li {
  position: relative;
  overflow: hidden;
  min-width: var(--base);
  border-radius: .5rem;
  border: 1px solid color-mix(in hsl, canvas, canvasText 50%);
}

/* Responsive design for projects grid */
@media (max-width: 768px) {
  :root {
    --base: clamp(1.5rem, 6cqi, 60px);
    --projects-gap: 6px;
    --grid-columns-default: 1fr;
    --grid-columns-first: 1fr;
    --grid-columns-second: 1fr;
  }
  
  .projects-grid ul {
    height: auto;
    gap: 1rem;
    max-width: 100%;
  }
  
  .projects-grid li {
    min-height: 200px;
  }
  
  .projects-grid article {
    padding-inline: 1rem;
    padding-bottom: 1rem;
  }

  .projects-grid h5 {
    z-index: 1;
    position: static;
    rotate: 0deg;
    width: 100%;
    top: auto;
    left: auto;
    margin-bottom: 0.5rem;
    font-size: 1.1em;
  }
  
  .projects-grid p {
    font-size: 14px;
    margin-bottom: 0.5rem;
  }
  
  .projects-grid a {
    position: static;
    margin-top: 0.5rem;
    left: auto;
    bottom: auto;
  }
  
  .projects-grid span {
    translate: 0;
  }
  
  .projects-grid img {
    mask: none;
    opacity: 0.3;
  }
  
  .projects-grid [data-active='true'] img {
    opacity: 0.4;
    z-index: -1;
  }
  
  /* Mobile: all items are always "active" to show content */
  .projects-grid li :is(a, p, h3, svg, .project-footer) {
    opacity: 1 !important;
  }
}

@media (max-width: 480px) {
  .projects-grid {
    width: 100%;
  }

  .projects-grid ul {
    gap: 0.5rem;
  }
  
  .projects-grid li {
    min-height: 180px;
    width: 80%;
  }
  
  .projects-grid article {
    padding-inline: 0.75rem;
  }
  
  .projects-grid h5 {
    font-size: 1em;
  }
  
  .projects-grid p {
    font-size: 13px;
  }
}