/* main css */
body {
    background-color: black;
    font-family: "Open Sans", sans-serif;
}

main,
section,
div,
img,
button {
    position: absolute;
}

main {
    width: 2250px;
    height: 1500px;
    background-image: linear-gradient(to top, #000000, #00095B);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

section {
    width: 100%;
    height: 100%;
    display: none;
}

#screen1 {
    display: block;
}

/* #start-btn{
    width: 100%;
    height: 100%;
    font-size: 40px;
    padding-top: 1200px;
    text-align: center;
    font-weight: 600;
    background-color: #00025c;
    /* video as background IMP */


#bg-video{
    height:1500px;
    mix-blend-mode: screen;
}

.start{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 9999;
    color: #fff;
    font-size: 120pt;
    font-weight: 800;
    mix-blend-mode: overlay;
}

/* ── Logo (top center) ── */
#logo {
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    z-index: 10;
}

/* ── Three panel buttons (behind car) ── */

.btn {
    height: auto;
    width: 320px;
    top: 400px;
}

#btn-beginning {
    left: 505px;
    width: 400px;
    z-index: 5;
}

#btn-icons {
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    z-index: 5;
}

#btn-future {
    left: 1345px;
    width: 400px;
    z-index: 5;
}

/* ── Car + shadow (one PNG, sits in front of panels) ── */
#car {
    left: 300px;
    top: 847px;
    width: 1658px;
    z-index: 20;
    pointer-events: none;
}

#carDark{
    left: 300px;
    top: 900px;
    width: 1658px;
    z-index: 2000;
}

/* ── Left: Title block ── */
#title-block {
    left: 50px;
    top: 754px;
    z-index: 25;
    pointer-events: none;
}

/* ── Right: Description text ── */
#desc-block {
    right: 50px;
    top: 754px;
    z-index: 25;
    pointer-events: none;
}

#screen2 {
    display: none;
}

#timeline-bg {
    width: 2250px;
    height: 1500px;
    top: 0;
    left: 0;
}

/* Position ellipses — adjust top values to match your stripe positions */
.ellipse {
    width: 80px;
    z-index: 10;
}

.left-ellipse {
    left: 990px;
}

.right-ellipse {
    right: 990px;
}

#ellipse1 { top: 320px; }
#ellipse2 { top: 650px; }
#ellipse3 { top: 980px; }
#ellipse4 { top: 320px; }
#ellipse5 { top: 650px; }
#ellipse6 { top: 980px; }

/* Cards stacked on top of each other */
.card {
    width: 700px;
    z-index: 5;
    display: none;
}

.left-card {
    left: 180px;
    top: 300px;
}

.right-card {
    right: 180px;
    top: 300px;
}

/* #back-btn2 {
    position: absolute;
    width: 70px;
    height: 130px;
    background-color: #00095B;
    border-radius: 0 10px 10px 0;
    color: #fff;
    font-size: 80px;
    font-weight: 600;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    z-index: 100;
    border: none;
} */

#screen3 {
    display: none;
}

#s3-bg {
    width: 2250px;
    height: 1500px;
    top: 0;
    left: 0;
}

/* Car name — behind car, hidden by default */
.car-name {
    display: none;
    position: absolute;
    bottom: 790px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

/* Car image */
.car-img {
    display: none;
    position: absolute;
    bottom: 320px;
    left: 50%;
    transform: translateX(-50%);
    width: 1600px;
    z-index: 10;
}

/* Info block — year / engine / top speed */
.car-info {
    display: none;
    position: absolute;
    top: 10%;
    left: 49.5%;
    width: 1975px;
    z-index: 15;
    transform: translate(-50%, -50%);
}

/* Filmstrip bar */
#filmstrip {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 2250px;
    z-index: 20;
}

/* Film cell thumbnails */
.film-cell {
    position: absolute;
    bottom: 28px;
    width: 360px;
    height: 240px;
    object-fit: cover;
    z-index: 25;
    opacity: 0.6;
    filter: grayscale(1);
    transition: opacity filter 0.3s;
}

.film-cell.active {
    opacity: 1;
    filter: grayscale(0);
}

#cell-gt40  { left: 90px;   }
#cell-mach1 { left: 510px;  }
#cell-tbird { left: 930px;  }
#cell-rs200 { left: 1350px; }
#cell-gt500 { left: 1770px; }

/* #back-btn3 {
    position: absolute;
    width: 70px;
    height: 130px;
    background-color: #00095B;
    border-radius: 0 10px 10px 0;
    color: #fff;
    font-size: 80px;
    font-weight: 600;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    z-index: 100;
    border: none;
} */

/* ////////////////////////////// screen4 */

#screen4 {
    display: none;
}

#s4-base {
    width: 2250px;
    height: 1500px;
    top: 0;
    left: 0;
    z-index: 1;
}

.s4-info {
    display: none;
    position: absolute;
    top: 0px;
    right: 0;
    width: 2000px;
    z-index: 5;
}

.s4-btn {
    position: absolute;
    z-index: 20;
    /* background: rgba(255,0,0,0.2); */
    bottom: 80px;
    height: 500px;
    width: 380px;
}

#s4-f150     { left: 140px; bottom: 150px; }
#s4-mustang  { left: 550px;  }
#s4-explorer { left: 960px; bottom: 150px;  }
#s4-mache    { left: 1360px; }
#s4-gt       { left: 1780px; bottom: 150px;}

/* #back-btn4 {
    position: absolute;
    width: 70px;
    height: 130px;
    background-color: #00095B;
    border-radius: 0 10px 10px 0;
    color: #fff;
    font-size: 80px;
    font-weight: 600;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    z-index: 100;
    border: none;
} */

.back-btn {
    width: 70px;
    height: 130px;
    background-color: #9d0801;
    border-radius: 0 10px 10px 0;
    color: #fff;
    font-size: 80px;
    line-height: 115px;
    font-weight: 600;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    z-index: 100;
}