body {
     cursor: none;
     background-color: #050505;
     overflow-x: hidden;
     width: 100%;
 }

 body.loading {
     overflow: hidden;
     height: 100vh;
 }

 #cursor {
     position: fixed;
     top: 0;
     left: 0;
     width: 20px;
     height: 20px;
     border: 2px solid #eb0028;
     border-radius: 50%;
     pointer-events: none;
     z-index: 9999;
     transform: translate(-50%, -50%);
     transition: width 0.3s, height 0.3s, background-color 0.3s;
     mix-blend-mode: difference;
 }

 #cursor.hovered {
     width: 50px;
     height: 50px;
     background-color: rgba(235, 0, 40, 0.2);
     border-color: transparent;
 }

 .text-outline {
     -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
     color: transparent;
     transition: all 0.5s ease;
 }

 .reveal-text {
     clip-path: inset(0 100% 0 0);
     animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
     padding-bottom: 0.1em;
 }

 @keyframes reveal {
     0% {
         clip-path: inset(0 100% 0 0);
     }

     100% {
         clip-path: inset(0 -20% -20% 0);
     }
 }

 .reveal-on-scroll {
     opacity: 0;
     transform: translateY(50px);
     transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
     will-change: opacity, transform;
 }

 .reveal-on-scroll.is-visible {
     opacity: 1;
     transform: translateY(0);
 }


 @keyframes scroll-left {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 @keyframes scroll-right {
     0% {
         transform: translateX(-50%);
     }

     100% {
         transform: translateX(0);
     }
 }

 .animate-scroll-left {
     animation: scroll-left 40s linear infinite;
 }

 .animate-scroll-right {
     animation: scroll-right 40s linear infinite;
 }

 .marquee-container:hover .animate-scroll-left,
 .marquee-container:hover .animate-scroll-right {
     animation-play-state: paused;
 }

 #preloader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #050505;
     z-index: 10000;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity 0.5s ease-out;
 }

 #mobile-menu {
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s;
 }

 #mobile-menu.closed {
     opacity: 0;
     transform: translateY(-20px);
     visibility: hidden;
     pointer-events: none;
 }

 #mobile-menu.open {
     opacity: 1;
     transform: translateY(0);
     visibility: visible;
     pointer-events: auto;
 }

 .clip-tech-card {
     clip-path: polygon(0 0, 100% 0, 100% 85%, 90% 100%, 0 100%);
 }

 .bg-stripe-pattern {
     background-color: #050505;
     background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(235, 0, 40, 0.08) 20px, rgba(235, 0, 40, 0.08) 40px);
 }

 /* ================= LEGACY CARDS (CENTERED) ================= */

 #legacy .legacy-card {
     display: flex;
     flex-direction: column;
     align-items: center;
     /* horizontal centering */
     justify-content: center;
     /* vertical centering */

     min-height: 90px;
     /* ensures proper button height */
     padding: 1.25rem 1.5rem;

     background: rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(255, 255, 255, 0.2);

     font-family: "Playfair Display", serif;
     font-size: 1.875rem;
     /* text-3xl */
     font-weight: 700;
     color: #ffffff;
     text-align: center;

     transition: all 0.3s ease;
 }

 #legacy .legacy-card:hover {
     border-color: #eb0028;
     color: #eb0028;
 }

 /* Year label */
 #legacy .legacy-card::before {
     content: "Year";
     display: block;
     font-family: "Share Tech Mono", monospace;
     font-size: 0.65rem;
     letter-spacing: 0.15em;
     text-transform: uppercase;
     color: #9ca3af;
     margin-bottom: 0.25rem;
 }

 /* ================= LEGACY VERTICAL SCROLL ================= */

 #legacy .legacy-scroll {
     max-height: 420px;
     /* controls visible height */
     overflow-y: auto;
     padding-right: 0.5rem;
 }

 /* subtle scrollbar */
 #legacy .legacy-scroll::-webkit-scrollbar {
     width: 6px;
 }

 #legacy .legacy-scroll::-webkit-scrollbar-track {
     background: transparent;
 }

 #legacy .legacy-scroll::-webkit-scrollbar-thumb {
     background-color: rgba(235, 0, 40, 0.4);
     border-radius: 10px;
 }

 /* spacing between cards */
 #legacy .legacy-card {
     margin-bottom: 0.75rem;
 }

 /* ===== ORBIT SYSTEM ===== */

 /* Responsive Radius Calculation:
           To align perfectly on the "dashed line" (inset-4), we calculate:
           (ContainerWidth - (inset * 2)) / 2
           
           Mobile (w-64 = 256px) - 32px = 224px Dia => 112px Radius
           SM (w-80 = 320px) - 32px = 288px Dia => 144px Radius
           MD (w-96 = 384px) - 32px = 352px Dia => 176px Radius
        */
 :root {
     --orbit-radius: -112px;
 }

 @media (min-width: 640px) {
     :root {
         --orbit-radius: -144px;
     }
 }

 @media (min-width: 768px) {
     :root {
         --orbit-radius: -176px;
     }
 }

 .orbit-node {
     position: absolute;
     top: 50%;
     left: 50%;

     /* FIXED ALIGNMENT: 
               The node is 42px wide. To be dead-center on the line, 
               we must pull it back by half its size (21px).
            */
     margin-top: -21px;
     margin-left: -21px;

     width: 42px;
     height: 42px;

     display: flex;
     align-items: center;
     justify-content: center;

     background: #18181b;
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 9999px;
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);

     transform:
         rotate(var(--angle)) translateY(var(--orbit-radius)) rotate(calc(-1 * var(--angle)));

     z-index: 10;
 }

 .orbit-node i {
     color: #d1d5db;
     font-size: 0.85rem;
 }

 /* Counter-spin keeps icons upright while the ring spins */
 .animate-counter-spin {
     animation: spin-reverse 15s linear infinite;
 }

 @keyframes spin-reverse {
     100% {
         transform: rotate(-360deg);
     }
 }

 /* Nav bar */

 /* --- Final Monolith UI Styles --- */

 /* Deep Subtle Gradient Backdrop */
 .nav-gradient {
     background: linear-gradient(to bottom,
             rgba(0, 0, 0, 1) 0%,
             rgba(15, 15, 15, 0.9) 100%);
     backdrop-filter: blur(20px);
 }

 .subtle-link {
     position: relative;
     color: rgba(255, 255, 255, 0.45);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 /* Base Indicator Pip Logic */
 .subtle-link::before {
     content: '';
     position: absolute;
     top: -18px;
     left: 50%;
     width: 2px;
     height: 0;
     background: #eb0028;
     box-shadow: 0 0 12px #eb0028;
     transform: translateX(-50%);
     transition: height 0.3s ease;
 }

 /* Coordinate numbering */
 .subtle-link::after {
     content: attr(data-num);
     position: absolute;
     bottom: -15px;
     left: 50%;
     transform: translateX(-50%);
     font-family: 'Share Tech Mono', monospace;
     font-size: 7px;
     color: #eb0028;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 /* Hover States for all links */
 .subtle-link:hover {
     color: #ffffff;
     text-shadow: 0 0 10px rgba(235, 0, 40, 0.3);
 }

 .subtle-link:hover::before {
     height: 8px;
 }

 .subtle-link:hover::after {
     opacity: 0.7;
 }

 /* --- PERSISTENT RED GLOW FOR JOIN --- */
 .glow-red-persistent {
     color: #ffffff !important;
     text-shadow: 0 0 15px rgba(235, 0, 40, 0.8);
     font-weight: 900;
 }

 .glow-red-persistent::before {
     height: 10px !important;
     opacity: 1 !important;
 }

 .glow-red-persistent::after {
     opacity: 1 !important;
 }

 /* Mobile Link Styling */
 .mobile-subtle-link {
     font-family: 'Playfair Display', serif;
     font-size: 2.2rem;
     font-weight: 700;
     color: white;
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .mobile-subtle-link::before {
     content: attr(data-num);
     font-family: 'Share Tech Mono', monospace;
     font-size: 0.8rem;
     color: #eb0028;
 }

    /* --- END Final Monolith UI Styles --- */
    /* ================= New styles================= */


  /* New Stable Animation: Never scales below 110% to prevent gaps */
        @keyframes stableZoom {
            0% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1.3);
            }
        }

        /* Keyframes for the running border effect */
        @keyframes border-run-h {
            0% {
                transform: translateX(-100%);
            }

            100% {
                transform: translateX(100%);
            }
        }

        @keyframes border-run-h-rev {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        @keyframes border-run-v {
            0% {
                transform: translateY(-100%);
            }

            100% {
                transform: translateY(100%);
            }
        }

        @keyframes border-run-v-rev {
            0% {
                transform: translateY(100%);
            }

            100% {
                transform: translateY(-100%);
            }
        }

        /* Animation Triggers - Now running continuously */
        .border-run-h {
            animation: border-run-h 2s linear infinite;
        }

        .border-run-h-rev {
            animation: border-run-h-rev 2s linear infinite;
        }

        .border-run-v {
            animation: border-run-v 2s linear infinite;
        }

        .border-run-v-rev {
            animation: border-run-v-rev 2s linear infinite;
        }

        /* Subtle slowing down on hover for a technical 'focus' feel */
        .group:hover .border-run-h,
        .group:hover .border-run-h-rev,
        .group:hover .border-run-v,
        .group:hover .border-run-v-rev {
            animation-duration: 4s;
        }

        /* Vertical Text Utility */
        .vertical-text {
            writing-mode: vertical-rl;
            transform: rotate(180deg);
        }

        .cta-bold {
            font-weight: 1000;
        }

        /* Orbit Node Logic */
        .orbit-node {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 40px;
            height: 40px;
            margin: -20px;
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 14px;
            transform: rotate(var(--angle)) translate(150px) rotate(calc(-1 * var(--angle)));
            transition: all 0.5s ease;
        }

        @media (min-width: 768px) {
            .orbit-node {
                transform: rotate(var(--angle)) translate(200px) rotate(calc(-1 * var(--angle)));
            }
        }

        .orbit-node:hover {
            border-color: #eb0028;
            color: #eb0028;
            box-shadow: 0 0 15px rgba(235, 0, 40, 0.4);
        }

        .animate-spin-slow {
            animation: spin 20s linear infinite;
        }

        .animate-counter-spin {
            animation: spin 20s linear infinite reverse;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

         /* Slow Panning Background Animation */
        @keyframes subtlePan {
            from {
                transform: scale(1.1) translateX(-2%);
            }

            to {
                transform: scale(1.1) translateX(2%);
            }
        }
         @keyframes scan {
                    0% {
                        top: 0%;
                    }

                    100% {
                        top: 100%;
                    }
                }