body {
        background-color: #0c0c0b;
        color: #f0ebe1;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }

      /* Subtle Film Grain */
      .noise-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 50;
        opacity: 0.03;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
      }

      /* 1. Index Page Hero Background (Forest) */
      .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 110vh;
        background-image: url("../images/W.I.P. Environment.png");
        background-size: cover;
        background-position: center 20%;
        z-index: -2;
        -webkit-mask-image: linear-gradient(
          to bottom,
          black 40%,
          transparent 100%
        );
        mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
        opacity: 0.4;
        transform: scale(1.05);
        animation: slowPan 30s ease-in-out infinite alternate;
      }

      /* 2. About Page Hero Background (Skyscrapers - Fades to black exactly at 65vh) */
      .about-hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 65vh;
        background-image: url("../images/W.I.P. Environment.png");
        background-size: cover;
        background-position: center 30%;
        z-index: -2;
        -webkit-mask-image: linear-gradient(
          to bottom,
          black 0%,
          transparent 100%
        );
        mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
        opacity: 0.35;
      }

      @keyframes slowPan {
        0% {
          transform: scale(1.05) translateY(0);
        }
        100% {
          transform: scale(1.1) translateY(2%);
        }
      }

      /* Ambient Glow */
      .ambient-glow {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: radial-gradient(
          circle at 50% 30%,
          rgba(197, 160, 89, 0.08) 0%,
          transparent 60%
        );
        z-index: -1;
        pointer-events: none;
      }

      /* Physical Card Interactions */
      .card-transition {
        transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .card-hover:hover {
        transform: translateY(-10px);
        box-shadow:
          0 30px 60px -15px rgba(0, 0, 0, 0.9),
          0 0 0 1px rgba(197, 160, 89, 0.3);
      }

      .image-zoom {
        transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
      }

      .card-hover:hover .image-zoom {
        transform: scale(1.06);
      }

      /* Lazy Loading Scroll Reveal System */
      .reveal {
        opacity: 0;
        transform: translateY(40px);
        transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .reveal.active {
        opacity: 1;
        transform: translateY(0);
      }
      .delay-1 {
        transition-delay: 0.15s;
      }
      .delay-2 {
        transition-delay: 0.3s;
      }
      .delay-3 {
        transition-delay: 0.45s;
      }
      .delay-4 {
        transition-delay: 0.6s;
      }

      /* Scroll Indicator Animation */
      @keyframes scrollDrop {
        0% {
          transform: translateY(-10px);
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        100% {
          transform: translateY(15px);
          opacity: 0;
        }
      }
      .scroll-dot {
        animation: scrollDrop 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
      }

      /* Custom Scrollbar */
      ::-webkit-scrollbar {
        width: 8px;
      }
      ::-webkit-scrollbar-track {
        background: #0c0c0b;
      }
      ::-webkit-scrollbar-thumb {
        background: #1c1c1a;
        border-radius: 4px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: #8b7344;
      }