* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --header-height: 3.5rem;
  --project-tile-width: 18rem;
  --color-1: #121113;
  --color-1-alt: #032b43;
  --color-2: #f7f7f2;
  --color-2-alt: #fceade;
  --color-3: #7a1d1d;
  --color-3-alt: #D67A3C;
  --color-4: #99582a;
  --color-4-alt: #136f63;
  --color-5: #bb9457;
  --color-5-alt: #A4FC1E;
}

/* ============================================================
   PERFORMANCE: font-display overrides
   The Font Awesome CDN stylesheet does not declare font-display,
   which defaults to "block" — the browser hides icon text for up
   to 3 seconds while the woff2 downloads. "swap" makes it
   immediately visible in a fallback glyph.
   We declare our own @font-face for the brands subset with
   font-display: swap to override the CDN's default.
   ============================================================ */
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.woff2') format('woff2'),
    url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/webfonts/fa-brands-400.ttf') format('truetype');
}

/* ============================================================
   PERFORMANCE: System font fallback metrics
   When custom fonts swap in (font-display: swap), the text
   reflows because system fonts have different metrics than the
   custom font. size-adjust and ascent/descent overrides align
   the fallback font's metrics to Chakra Petch, minimising the
   Cumulative Layout Shift (CLS) caused by the font swap.
   ============================================================ */
@font-face {
  font-family: 'Chakra Petch Fallback';
  src: local('Arial');
  size-adjust: 96%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}


.noto-serif {
  font-family: "Noto Serif", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth"100;
}

.noto-serif-display {
  font-family: "Noto Serif Display", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings: "wdth"100;
}

.small-display,
.project-tile h3 {
  /* 'Chakra Petch Fallback' is a metrics-adjusted @font-face alias for Arial
     (defined above). It is used during the font-display swap period so the
     fallback text has near-identical metrics to Chakra Petch, reducing CLS. */
  font-family: "Chakra Petch", "Chakra Petch Fallback", sans-serif;
  font-weight: 400;
  font-style: italic;
}

html {
  font-size: 20px;
  background-color: var(--color-5-alt);
  color: var(--color-2);
  scroll-padding-top: var(--header-height);
  scroll-behavior: smooth;

  &:not(:has(#animation-on-off:checked)) {
    * {
      animation-name: none;
      transform: none !important;
    }

    #projects {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 1rem;

      & h2 {
        width: 100%;
        margin-bottom: 0;
      }

      & .project-tile {
        margin-bottom: 0;
      }
    }
  }
}

/* ============================================================
   ACCESSIBILITY: Keyboard focus styles
   Ensures all interactive elements are visually reachable
   by keyboard users (WCAG 2.4.7 - Focus Visible)
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--color-5-alt);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   ACCESSIBILITY: Respect system-level reduced-motion preference
   Complements the in-page animation toggle for users who have
   set "Reduce Motion" in their OS/browser settings
   (WCAG 2.3.3 - Animation from Interactions, AAA)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

header {
  background: linear-gradient(90deg, var(--color-4-alt), var(--color-1-alt));
  width: 100%;
  position: fixed;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 1.5rem;
  /* Ensure header renders above animated project tiles */
  z-index: 10;
}

#navbar ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;

  & a {
    color: var(--color-2);
    text-decoration: none;
    padding: 1rem;
    font-style: italic;
    display: inline-block;

    &:hover {
      background: linear-gradient(var(--color-2) 10%, var(--color-4-alt) 10% 90%, var(--color-2) 90%);
    }
  }
}

#ctrl-animation {
  margin-right: 1rem;

  & input {
    display: none;
  }

  & label {
    cursor: pointer;
    display: flex;
    line-height: 1.5rem;
    padding: 1rem 0;

    & #cool-checkbox {
      width: 1.5rem;
      height: 1.5rem;
      background-color: #d3d3d3;
      border-radius: 50%;
      margin-right: .5rem;
    }

    &:hover #cool-checkbox {
      background-color: var(--color-2);
    }
  }

  &:has(input:checked) {

    & #cool-checkbox {
      background-color: #0d0;

      &::after {
        content: "";
        height: .6rem;
        width: .3rem;
        display: block;
        transform: rotate(45deg);
        border: var(--color-2) solid;
        border-width: 0 .3rem .3rem 0;
        position: relative;
        left: .4rem;
        top: .25rem;
      }
    }

    &:hover #cool-checkbox {
      background-color: #0b0;
    }
  }
}

#welcome-section {
  height: 100vh;
  padding: 2rem;
  background-color: var(--color-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;

  & h1 {
    font-size: 4rem;
  }

  & p {
    font-size: 2.5rem;
  }
}

#projects {
  background-color: var(--color-3);
  padding: 1rem;
  text-align: center;

  /* container-type enables 100cqi (container query inline size) in child animations,
     which lets translateX reference the parent width — required for the composited
     animation fix below. */
  container-type: inline-size;

  & h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-5-alt);
  }

  &:has(.project-tile:hover) {
    animation-play-state: paused;
  }
}

/* ============================================================
   PERFORMANCE: GPU-composited slide animations
   The original code animated `margin-left`, which is a layout
   property — it forces the browser to recalculate layout on
   every frame (non-composited), causing jank and CLS.
   `transform: translateX` runs entirely on the GPU compositor
   thread and does not trigger layout or paint.
   100cqi = 100% of the #projects container's inline (width) size.
   We subtract the tile width and the container's 2×1rem padding
   to get the maximum right-edge offset.
   ============================================================ */
@keyframes slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(100cqi - var(--project-tile-width)));
  }
}

.wide {
  --project-tile-width: 27rem;
}

.project-tile {
  width: var(--project-tile-width);
  padding: .5rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  background-color: var(--color-5);

  &:last-child {
    margin-bottom: 0;
  }

  /* Odd tiles: slide from left → right → left (alternate) */
  &:nth-of-type(odd) {
    animation: alternate 10s infinite linear slide;
    animation-play-state: inherit;
  }

  /* Even tiles: start from the right edge, slide right → left → right.
     alternate-reverse begins at the 100% keyframe (right) and
     plays backward, replacing the old margin-left: offset trick. */
  &:nth-of-type(even) {
    animation: alternate-reverse 10s infinite linear slide;
    animation-play-state: inherit;
  }

  & a {
    text-decoration: none;
  }

  & img {
    /* A light grey box appears while the image downloads */
    background-color: #f0f0f0;
    width: 100%;
    /* height: auto ensures the explicit width/height HTML attributes
       set the correct aspect ratio while CSS controls the rendered size */
    height: auto;
    display: block;
    border-radius: .5rem .5rem 0 0;
    max-height: 16rem;
    object-fit: cover;
  }

  & h3 {
    text-transform: capitalize;
    background: linear-gradient(90deg, var(--color-2), var(--color-2-alt));
    color: var(--color-1);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    padding: .5rem;
    border-radius: 0 0 .5rem .5rem;
    margin-top: .5rem;
  }
}

#profiles {
  height: calc(100vh - var(--header-height));
  background-color: var(--color-3-alt);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;

  /* ACCESSIBILITY: --color-5-alt (#A4FC1E) on --color-3-alt (#D67A3C) = ~2.4:1 contrast,
     which fails WCAG AA (requires 3:1 for large text, 4.5:1 for normal text).
     Switched to --color-1 (#121113) which yields ~6.4:1 — passes AA and AAA for large text. */
  & h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-1);
  }
}

#logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
}

#logo-container a {
  transition: transform 0.3s ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 6rem;
  height: 6rem;
  font-size: 4rem;
  border-radius: .5rem;
  text-decoration: none;
}

#logo-container a:hover {
  transform: scale(1.2);
}

footer {
  background-color: var(--color-3);
  color: var(--color-2-alt);
  text-align: center;
  padding: .5rem;
  font-size: 2rem;
}

/* Small phones */
@media (max-width: 480px) {
  html {
    font-size: 10px;
  }

  #logo-container a {
    width: 4rem;
    height: 4rem;
    font-size: 3rem;
  }
}

/* Tablets and larger phones (portrait) */
@media (min-width: 480px) and (max-width: 768px) {
  html {
    font-size: 12px;
  }

  #logo-container a {
    width: 5rem;
    height: 5rem;
    font-size: 3rem;
  }
}