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

body {
    background: #000;
    color: #fff;
    overflow-x: hidden;
}

/* Nav & Transition */
.achievements-nav {
    position: fixed;
    top: 30px;
    left: 40px;
    z-index: 100;
}

.btn-primary {
    font-family: 'Michroma', sans-serif;
    color: #fff;
    text-decoration: none;
    font-size: 0.7rem;
    border: 1px solid #333;
    padding: 10px 20px;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    transition: 0.3s;
}

.btn-primary:hover {
    background: #fff;
    color: #000;
}

.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.page-transition-overlay.active { transform: translateY(0); }

/* Sticky Visuals */
.sticky-image-container {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.image-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle, transparent 10%, #000 90%);
    z-index: 5;
}

/* ROV Layer */
.rov-visual.active {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Team Layer */
/* 1. Make the container wider */
.team-layer {
    position: absolute;
    right: 5%;      /* Closer to the edge to allow more width */
    top: 12%;       /* Keeps it high and away from the ROV center */
    width: 380px;   /* INCREASED from 280px to be wider */
    z-index: 10;
}

.team-frame {
    position: absolute;
    width: 100%;    /* Fills the 380px container */
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    background: #0a0a0f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px;   /* Thinner border for a sleeker look */
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2. Control the image shape */
.team-frame img {
    width: 100%;
    height: 160px;    /* FIXED SHORT HEIGHT to make it look wider */
    display: block;
    object-fit: cover; /* IMPORTANT: This crops the image so it doesn't stretch */
    object-position: center; /* Keeps faces in the middle */
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.8s ease;
}

/* 3. Reveal effect */
.team-frame.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.team-frame.active img {
    filter: grayscale(0%) contrast(1); /* Color pops when active */
}

/* Label Styling */
.frame-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 3px;
    color: #444;
    margin-top: 8px;
    text-align: right; /* Aligned right for a technical look */
    text-transform: uppercase;
}

/* Ensure the ROV stays centered but doesn't get too large */
.rov-visual {
    position: absolute;
    width: 50%; /* Slightly smaller to ensure no overlap */
    max-width: 600px;
    opacity: 0;
    transform: scale(1.2);
    filter: none;
    transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Scroll Content */
.scroll-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    padding-left: 10%;
    z-index: 20;
}

.content-box {
    max-width: 450px;
    opacity: 0;
    transform: translateX(-50px);
    transition: 0.8s ease-out;
}

.scroll-section.active .content-box {
    opacity: 1;
    transform: translateX(0);
}

.tag { font-family: 'JetBrains Mono', monospace; color: #555; font-size: 0.8rem; }
h1 { font-family: 'Michroma', sans-serif; font-size: 5rem; margin: 10px 0; letter-spacing: -2px; }
p { font-family: 'JetBrains Mono', monospace; line-height: 1.6; color: #aaa; }
.spec-list { margin-top: 20px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: #fff; }

/* Mobile Reset */
@media (max-width: 768px) {
    .scroll-section {
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: auto;
        padding: 20px 5%;
    }

    .rov-visual, .team-frame {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        opacity: 1 !important;
        transform: none !important;
        margin-bottom: 20px;
    }

    .rov-visual img, .team-frame img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .sticky-image-container {
        display: none !important; /* hide the sticky desktop version */
    }
}


@media (max-width: 768px) {
    .content-box {
        opacity: 1 !important;
        transform: none !important;
    }
}
@media (max-width: 768px) {
    .rov-visual,
    .team-frame img {
        filter: none !important;
    }
}


/* Base hidden state for mobile */
@media (max-width: 768px) {
    .scroll-section,
    .scroll-section .content-box,
    .rov-visual,
    .team-frame {
        opacity: 0;
        transform: translateY(40px); /* starts 40px below */
        transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease-out;
    }

    /* Active state: final position */
    .scroll-section.active,
    .scroll-section.active .content-box,
    .rov-visual.active,
    .team-frame.active {
        opacity: 1;
        transform: translateY(0);
    }
}
.btn-primary {
    font-size: 0.8rem;
    padding: 8px 16px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    border: 1px solid #555;
    transition: 0.3s;
}

.btn-primary:hover {
    background: #fff;
    color: #000;
}
/* Update this block in your achievements.css */
.achievements-nav {
    position: fixed !important;
    top: 30px;      /* Distance from top */
    right: 40px;    /* Changed from left to right */
    left: auto;     /* Ensures it doesn't stretch if 'left' was inherited */
    z-index: 10000; /* High z-index to stay above all layers */
}

/* Optional: Mobile adjustment to keep it from hitting the screen edge */
@media (max-width: 768px) {
    .achievements-nav {
        top: 20px;
        right: 20px;
    }
    
    .btn-primary {
        font-size: 0.6rem; /* Slightly smaller for mobile screens */
        padding: 8px 12px;
    }
}

.btn-primary {
    font-family: 'Michroma', sans-serif;
    letter-spacing: 2px; /* Adds that technical/industrial feel */
    text-transform: uppercase;
    /* ... your other styles ... */
}