/* Base layout */
    body {
      margin: 0;
      padding: 2rem;
      height: 100vh;
      background-color: #ffffff;
      color: #000000;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      font-family: sans-serif;
      text-align: left;
      overflow: hidden;
      position: relative;
    }

    #fade-text {
      font-size: 1.5rem;
      opacity: 0;
      transition: opacity 2.5s ease-in-out;
      z-index: 2;
      position: relative;
      max-width: 80vw;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    h1 {
      font-size: 2rem;
      margin-bottom: 1.5rem;
    }

    p,
    a,
    li {
      font-size: 1rem;
      line-height: 1.6;
    }

    .fade-link {
      font-size: 1.2rem;
    }

.site-footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-family: monospace;
  color: #777; /* soft gray */
  letter-spacing: 0px;
  word-spacing: 0.2rem;
  z-index: 3;
  pointer-events: none;
  text-align: center;
  padding: 0.3rem 0;
}

@keyframes terminalFlicker {
  0%, 100% { opacity: 1; }
  5%, 15%, 35%, 55%, 75%, 95% { opacity: 0.2; }
  10%, 30%, 50%, 70%, 90% { opacity: 1; }
}



.site-logo {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
  position: fixed;
  top: 25%;
  left: 0.5rem; /* nudges right */
  transform: rotate(-90deg) translateY(-50%);
  transform-origin: left top;
  font-size: 1rem;
  font-family: monospace;
  color: #3cb93c;
  z-index: 10;
  /* animation: terminalFlicker 2.5s infinite; */
}

.site-logo.visible {
  opacity: 1;
  /* animation: terminalFlicker 2.5s infinite; */
}

.site-logo.random-flicker {
  animation: terminalFlicker 2.5s infinite;
}



    .fade-links {
      position: absolute;
      top: 50%;
      left: 5%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 1.5s ease-in-out;
      z-index: 2;
      font-family: sans-serif;
      text-align: left;
    }


    .fade-link {
      font-size: 1.2rem;
      color: #000;
      text-decoration: none;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 1s ease-out, transform 1s ease-out;
    }

    .fade-link:nth-child(1) {
      transition-delay: 0.5s;
    }

    .fade-link:nth-child(2) {
      transition-delay: 1.5s;
    }

    .fade-link:nth-child(3) {
      transition-delay: 2.5s;
    }


    .background-fade {
      position: fixed;
      top: 0;
      left: 50%;
      width: 100vw;
      height: 100vh;
      background-image: url('images/Bust White.png');
      background-size: cover;
      background-position: center -150px;
      background-repeat: no-repeat;
      transform: translateX(-25%);
      color: #777; /* <-- soft gray color */
      opacity: 0;
      transition: opacity 2.5s ease-in-out;
      z-index: 1;
      pointer-events: none;

      /* Smooth fade on the left side */
      mask-image: linear-gradient(to right, transparent 0%, white 25%, white 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, white 25%, white 100%);
    }





    /* Tablet + Desktop: full background fade */
    @media (min-width: 1024px) {
      .background-fade {
        width: 100vw;
        background-position: center;
      }

      body {
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 4rem;
      }

      h1 {
        font-size: 3rem;
      }

      p,
      a,
      li {
        font-size: 2.2rem;
      }

      .site-logo {
        top: 50%;
        font-size: 3rem;
        left: 1.5rem;
      }

      .site-footer {
        font-size: 0.6rem !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        color: #777; /* <-- soft gray color */
      }

      #fade-text {
        font-size: 2.5rem;
        max-width: none;
      }

      .fade-links {
        top: 50%;
        bottom: auto;
        left: 33%;
        transform: translateY(-50%);
        text-align: left;
      }

      .fade-link {
        font-size: 1.9rem;
      }
    }

    @media (max-width: 940px) {
      .background-fade {
        transform: scale(1.3) translateX(-25%);
        background-position: center top;
      }

      p,
      a,
      li {
        font-size: 1.5rem;
      }

      .site-footer {
        font-size: 0.6rem;
        letter-spacing: 0;
        word-spacing: 0.1rem;
        color: #777; /* <-- soft gray color */
      }
    }

    @media (min-width: 900px) and (max-width: 1024px) {
      .fade-links {
        left: 20%;
      }

      .fade-link {
        font-size: 1.6rem;
      }

      p,
      a,
      li {
        font-size: 1.9rem;
      }

      .site-footer {
        .site-footer {
          font-size: 0.6rem !important;
          letter-spacing: 0 !important;
          word-spacing: 0 !important;
          color: #777; /* <-- soft gray color */
        }
      }
    }

    @media (min-width: 600px) {
      #fade-text {
        font-size: 2rem;
      }

      p,
      a,
      li {
        font-size: 1.5rem;
      }

      .site-footer {
        font-size: 0.6rem;
        letter-spacing: 0;
        word-spacing: 0.1rem;
        color: #777; /* <-- soft gray color */
      }
    }

    @media (max-width: 480px) {

      p,
      a,
      li {
        font-size: 1.5rem;
      }

      .background-fade {
        transform: scale(1.0) translateX(-1%);
        mask-image: linear-gradient(to right, transparent 0%, white 10%, white 100%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, white 10%, white 100%);
      }

      .site-footer {
        font-size: 0.6rem !important;
        letter-spacing: 0 !important;
        word-spacing: 0 !important;
        color: #777; /* <-- soft gray color */
      }
    }