/* =====================================================
    DASMIS EXECUTIVE WELCOME SCREEN
    CSS PART 1
===================================================== */


/* GLOBAL RESET */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #000;

    font-family:

    "Segoe UI",
    Arial,
    sans-serif;

}



/* =====================================================
   MAIN WELCOME SCREEN
===================================================== */


#welcomeScreen {

    position: relative;

    width: 100vw;

    height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    align-items: center;

    overflow: hidden;

    background:

    radial-gradient(

        circle at center,

        #1b1b1b 0%,

        #050505 45%,

        #000000 100%

    );

}



/* =====================================================
   BACKGROUND EFFECT
===================================================== */


.backgroundGlow {


    position: absolute;

    width: 700px;

    height: 700px;


    top: 50%;

    left: 50%;


    transform:

    translate(-50%, -50%);


    background:

    radial-gradient(

        circle,

        rgba(0,120,255,0.18),

        transparent 70%

    );


    filter: blur(50px);


    z-index: 0;


}



.backgroundOverlay {


    position: absolute;

    inset: 0;


    background:

    linear-gradient(

        180deg,

        rgba(0,0,0,0.3),

        rgba(0,0,0,0.85)

    );


    z-index: 1;


}



/* =====================================================
   HEADER / LOGO AREA
===================================================== */


.topHeader {


    position: relative;

    z-index: 5;


    margin-top: 35px;


    text-align: center;


}



.logoContainer {


    display: flex;

    justify-content: center;

    align-items: center;


}



#dasLogo {


    width: 110px;


    height: auto;


    animation:

    logoReveal 2s ease;


}



.systemTitle {


    margin-top: 15px;


    font-size: 42px;


    letter-spacing: 8px;


    color: #ffffff;


    font-weight: 700;


}



.systemSubtitle {


    margin-top: 8px;


    font-size: 16px;


    letter-spacing: 2px;


    line-height: 1.6;


    color: #cccccc;


    font-weight: 400;


}



/* =====================================================
   LOGO ANIMATION
===================================================== */


@keyframes logoReveal {


    from {

        opacity: 0;

        transform:

        scale(0.7);

    }


    to {

        opacity: 1;

        transform:

        scale(1);

    }


}

/* =====================================================
   SPORTS CAR DISPLAY
===================================================== */


.mainContent {

    position: relative;

    z-index: 5;

    flex: 1;

    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



/* CAR AREA */

.carDisplay {


    width: 75vw;

    max-width: 1100px;

    display: flex;

    justify-content: center;

    align-items: center;


}



#sportsCar {


    width: 100%;


    max-width: 950px;


    height: auto;


    object-fit: contain;


    filter:

    drop-shadow(

        0 30px 50px rgba(0,0,0,0.8)

    );


    animation:

    carReveal 2.5s ease;


}



/* CAR ENTRY ANIMATION */


@keyframes carReveal {


    from {


        opacity: 0;


        transform:

        translateY(80px)

        scale(0.9);


    }


    to {


        opacity: 1;


        transform:

        translateY(0)

        scale(1);


    }


}



/* =====================================================
   WELCOME MESSAGE
===================================================== */


.welcomeMessage {


    margin-top: 20px;


    text-align: center;


}



.welcomeMessage h3 {


    color: #ffffff;


    font-size: 28px;


    letter-spacing: 3px;


    font-weight: 600;


}



.welcomeMessage p {


    margin-top: 10px;


    color: #aaaaaa;


    font-size: 16px;


    letter-spacing: 2px;


}



/* =====================================================
   FOOTER
===================================================== */


.footerArea {


    position: relative;


    z-index: 5;


    width: 100%;


    padding: 18px 40px;


    display: flex;


    justify-content: space-between;


    align-items: center;


    color: #888888;


    font-size: 13px;


    letter-spacing: 1px;


}



.footerArea strong {


    color: #ffffff;


}



/* =====================================================
   VIDEO CONTAINER
===================================================== */


#videoContainer{

    position:fixed;
    inset:0;

    display:flex;

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

    background:#000;

    z-index:9999;

}

#introVideo{

    width:100%;
    height:100%;
    object-fit:contain;

}



/* =====================================================
   TRANSITION SCREEN
===================================================== */


#transitionScreen {


    position: fixed;


    inset: 0;


    background: #000;


    display: none;


    justify-content: center;


    align-items: center;


    z-index: 200;


}



.transitionContent img {


    width: 130px;


    animation:

    transitionLogo 1.5s ease;



}



@keyframes transitionLogo {


    from {


        opacity: 0;


        transform:

        scale(0.5);


    }


    to {


        opacity: 1;


        transform:

        scale(1);


    }


}

/* =====================================================
   RESPONSIVE DESIGN
===================================================== */


/* LARGE DESKTOP */

@media (min-width: 1400px) {


    #sportsCar {

        max-width: 1050px;

    }


    .systemTitle {

        font-size: 48px;

    }


    .welcomeMessage h3 {

        font-size: 32px;

    }


}



/* LAPTOP SCREEN */

@media (max-width: 1366px) {


    .topHeader {

        margin-top: 25px;

    }



    #dasLogo {

        width: 90px;

    }



    .systemTitle {

        font-size: 36px;

    }



    .carDisplay {

        width: 70vw;

    }



    .welcomeMessage h3 {

        font-size: 24px;

    }


}



/* TABLET */


@media (max-width: 900px) {



    .systemTitle {


        font-size: 30px;


        letter-spacing: 5px;


    }



    .systemSubtitle {


        font-size: 14px;


    }



    .carDisplay {


        width: 85vw;


    }



    #sportsCar {


        max-width: 700px;


    }



    .footerArea {


        padding: 15px;


        font-size: 11px;


    }



}



/* MOBILE */


@media (max-width: 600px) {



    #welcomeScreen {


        justify-content: space-between;


    }



    .topHeader {


        margin-top: 20px;


    }



    #dasLogo {


        width: 70px;


    }



    .systemTitle {


        margin-top: 10px;


        font-size: 24px;


        letter-spacing: 3px;


    }



    .systemSubtitle {


        font-size: 11px;


        letter-spacing: 1px;


    }



    .mainContent {


        justify-content: center;


    }



    .carDisplay {


        width: 95vw;


    }



    #sportsCar {


        max-width: 450px;


    }



    .welcomeMessage {


        margin-top: 10px;


    }



    .welcomeMessage h3 {


        font-size: 18px;


        letter-spacing: 2px;


    }



    .welcomeMessage p {


        font-size: 12px;


    }



    .footerArea {


        flex-direction: column;


        gap: 8px;


        text-align: center;


        padding-bottom: 15px;


    }


}





/* =====================================================
   FADE EFFECTS
===================================================== */


.fadeOut {


    animation:

    fadeOut 1s forwards;


}



.fadeIn {


    animation:

    fadeIn 1s forwards;


}




@keyframes fadeOut {


    from {


        opacity: 1;


    }


    to {


        opacity: 0;


    }


}





@keyframes fadeIn {


    from {


        opacity: 0;


    }


    to {


        opacity: 1;


    }


}

#sportsCar {

    display:block !important;

    width:800px !important;

    max-width:90vw;

    height:auto;

    opacity:1 !important;

    visibility:visible !important;

}

/* ================================================= */
/* TICKER CONTAINER (SCROLLING LINE - FIXED & SLOW)  */
/* ================================================= */
.tickerContainer {
    width: 100%;
    max-width: 800px;
    margin: 15px auto 10px auto;
    overflow: hidden;
    background: rgba(0, 150, 255, 0.12);
    border-top: 1px solid rgba(56, 189, 248, 0.5);
    border-bottom: 1px solid rgba(56, 189, 248, 0.5);
    padding: 10px 0;
    box-shadow: 0 0 15px rgba(0, 150, 255, 0.25);
    border-radius: 6px;
    position: relative;
    z-index: 10; /* Ensures visibility over background glow */
    display: flex;
    align-items: center;
}

.tickerText {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    /* Speed slow karne ke liye 25 seconds set kar diya hai */
    animation: marquee 25s linear infinite; 
}

.tickerText span {
    font-size: 1rem;
    font-weight: 600;
    color: #38bdf8;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.8);
}

/* Smooth Scrolling Animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Pause scroll on hover */
.tickerContainer:hover .tickerText {
    animation-play-state: paused;
}