:root {
    --rex-orange: #ff6b15;
    --data-green: #2ecc71;
    --rex-red: #e74c3c;
    --bg-dark: #121212;
    --card-bg: #1e1e1e;
    --text-main: #f4f4f4;
    --text-muted: #888;
    --font-mono: 'Courier New', Courier, monospace;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-mono);
    margin: 0;
    line-height: 1.6;
}

/* Typography Hierarchy */
h1, h2, h3 { text-transform: uppercase; letter-spacing: 2px; text-align: center; }
.hero-title { font-size: 3.5rem; margin: 0; line-height: 1.1; text-transform: uppercase; }
.hero-subtitle { font-size: 1.3rem; color: var(--text-muted); margin-top: 25px; text-transform: uppercase; }

/* Layout Containers */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* Navigation Styling */
.main-nav {
    background: #000;
    border-bottom: 1px solid #222;
    padding: 20px 0;
    font-family: var(--font-mono);
}

.nav-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;             /* Added: Enables flexbox */
    justify-content: space-between; /* Added: Pushes logo left, links right */
    align-items: center;       /* Added: Vertically centers content */
}

.nav-logo { text-decoration: none; color: var(--rex-orange); font-size: 1.4rem; font-weight: bold; }

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.nav-links a:hover { color: var(--rex-orange); }

.member-badge {
    color: var(--data-green);
    font-size: 0.7rem;
    border: 1px solid var(--data-green);
    padding: 2px 6px;
    margin-left: 5px;
}

/* Signup Section Styling */
.signup-section {
    padding: 40px 0;
    background: #000;
    border-bottom: 1px solid #333;
}

.signup-flex {
    display: flex;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
    gap: 10px;
}

.signup-input {
    flex-grow: 1;
    padding: 15px;
    border: 1px solid #333;
    background: #111;
    color: #fff;
    font-family: var(--font-mono);
}

.btn-roar {
    background: var(--rex-orange);
    color: black;
    padding: 15px 30px;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    font-family: var(--font-mono);
}

.btn-roar:hover { background: #fff; }

.status-msg {
    text-align: center;
    color: var(--rex-orange);
    margin-top: 20px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* --- Hero Branding Updated --- */
.hero-mascot-wrapper {
    text-align: center;
    padding: 80px 0 40px;
}

/* --- Mascot Breathing Animation --- */
@keyframes rex-breathe {
    0% {
        transform: scale(1);
        box-shadow: 0 0 50px rgba(255, 107, 21, 0.3);
    }
    50% {
        transform: scale(1.03); /* Subtle 3% expansion */
        box-shadow: 0 0 70px rgba(255, 107, 21, 0.5); /* Slight glow pulse */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 50px rgba(255, 107, 21, 0.3);
    }
}

.mascot-glow {
    width: 450px;
    height: auto;
    border-radius: 50%;
    border: 6px solid var(--rex-orange);
    box-shadow: 0 0 60px rgba(255, 107, 21, 0.4);
    cursor: pointer;
    
    /* Apply the breathing animation */
    animation: rex-breathe 4s ease-in-out infinite;
    
    /* Keep the transition for the manual hover pop-out */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Ensure the hover effect still overrides the animation */
/*.mascot-glow:hover {
    animation-play-state: paused; /* Optional: pauses breath while hovering */
    /*transform: scale(1.1);
    box-shadow: 0 0 80px rgba(255, 107, 21, 0.6);
} */


.lab-report-link {
    text-decoration: none;
    color: var(--data-green);
    border: 2px solid var(--data-green);
    padding: 12px 24px;
    font-family: var(--font-mono);
    font-weight: bold;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: 0.3s;
    display: inline-block;
    margin-top: 40px;
}

.lab-report-link:hover {
    background: var(--data-green);
    color: #000;
}

/* --- Pro Shop Product Scaling --- */
.pro-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 50px;
    justify-items: center;
}

.product-card {
    background: #111;
    padding: 20px;
    border: 1px solid #333;
    width: 250px;
    text-align: center;
    /* Move transition to the fade-in-section to avoid conflicts */
}

.pro-shop-section {
    padding: 100px 20px;
    text-align: center;
    background: #1a1a1a;
}

/* --- Hover Effects: Only for Unlocked Items --- */
.product-card:not(.locked-gear):hover {
    border-color: var(--rex-orange);
    box-shadow: 0 0 20px rgba(255, 107, 21, 0.4); /* The Glow */
    transform: translateY(-5px) !important; /* Lifts the card slightly */
    cursor: pointer;
}

/* --- Locked Gear Specific Style --- */
.locked-gear:hover {
    cursor: not-allowed;
    border-color: #222; /* Keep it dark so they know it's locked */
}

.product-thumb {
    width: 150px;
    height: 250px;
    object-fit: contain;
    background: #000;
    margin-bottom: 15px;
    border: 1px solid #222;
    transition: transform 0.3s ease;
}

/* Zoom the shirt slightly on hover if unlocked */
.product-card:not(.locked-gear):hover .product-thumb {
    transform: scale(1.05);
}

/* --- Scroll Animation Styles (The Fix) --- */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    /* WE ADD BORDER-COLOR AND BOX-SHADOW TO THE TRANSITION LIST HERE */
    transition: 
        opacity 0.8s ease-out, 
        transform 0.5s ease-out, 
        border-color 0.3s ease, 
        box-shadow 0.3s ease;
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.shopify-buy-button-wrapper {
    background: #111;
    padding: 20px;
    border: 1px solid #333;
}


/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
    /* 1. Header & Nav */
    .nav-container {
        flex-direction: column; /* Stacks logo and links vertically */
        gap: 15px;
    }
    .nav-links {
        gap: 15px;
        flex-wrap: wrap; /* Wraps links if they are too wide */
        justify-content: center;
    }

    /* 2. Signup Form */
    .signup-flex {
        flex-direction: column; /* Stacks email input and button */
        width: 100%;
        gap: 10px;
    }
    .signup-input {
        width: 100%;
        box-sizing: border-box;
    }
    .btn-roar {
        width: 100%; /* Full width button for easier tapping */
    }

    /* 3. Hero Section Typography */
    .hero-title {
        font-size: 2.8rem; /* Scales down massive headlines */
    }
    .hero-subtitle {
        font-size: 1rem;
        padding: 0 10px;
    }

    /* 4. Mascot Scaling */
    .mascot-glow {
        width: 80%; /* Shrinks Rex to fit mobile screens */
        max-width: 300px;
    }

    /* 5. Pro Shop Grid */
    .pro-shop-grid {
        grid-template-columns: 1fr; /* Single column layout for products */
        gap: 20px;
    }
    .product-card {
        width: 90%; /* Center the card on the screen */
    }
}

/* 1. Custom Text Selection - Matches the brand */
::selection {
    background: var(--rex-orange);
    color: #000;
}

/* 2. Custom Scrollbar for Chrome/Safari/Edge */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--rex-orange);
}

/* 3. Input Focus State - Removes the default blue 'glow' */
.signup-input:focus {
    outline: none;
    border-color: var(--rex-orange);
    box-shadow: 0 0 10px rgba(255, 107, 21, 0.2);
}

/* 4. Smooth Scrolling - Essential for the #pro-shop and #signup anchors */
html {
    scroll-behavior: smooth;
}

/* 5. Utility: Rex Glow Text - For special callouts */
.text-glow {
    text-shadow: 0 0 10px var(--rex-orange);
}

/* Gated Apparel Styling */
.locked-gear {
    position: relative;
    border: 1px dashed #222 !important;
    overflow: hidden;
}

.lock-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: var(--rex-orange);
    font-family: var(--font-mono);
    text-align: center;
    width: 100%;
}

.btn-locked {
    background: #222;
    color: #444;
    padding: 10px;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Subtle pulse for unlocked items to make them feel special */
.product-card:not(.locked-gear) {
    border: 1px solid #333;
}