/* #region BRAIN SCAN PAGE */


/* #region brain scan page setup */

/* ==================================================
brain scan page setup
================================================== */

/*
basic setup for brain scan page

[margin: 0] = removes default browser space
[min-height] = allows page to fill browser window
*/

html,
body {
    min-height: 100%;

    margin: 0;
}


.brain-scan-page {
    min-height: 100vh;

    color: white;

    background-color: black;
}

/* #endregion */


/* #region brain scan layout */

/* ==================================================
brain scan layout
================================================== */

/*
main container holding brain image + text

[display: flex] = places image and text beside each other
[justify-content] = centers everything horizontally
[align-items] = centers everything vertically
[gap] = space between image and text
*/

.brain-scan-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;

    width: 100%;
    min-height: 100vh;

    padding: 40px;

    box-sizing: border-box;
}

/* #endregion */


/* #region brain scan image */

/* ==================================================
brain scan image
================================================== */

/*
brain scan picture

[width] = image takes available space
[max-width] = stops image from getting too large

starts tiny and invisible,
then grows into place when page loads
*/

.brain-scan-image {
    display: block;

    width: 45%;
    max-width: 600px;

    height: auto;

    opacity: 0;

    transform: scale(0.1);

    animation: brain-scan-grow 0.2s ease-out forwards;
}


/* brain scan entrance animation */

@keyframes brain-scan-grow {

    from {
        opacity: 0;

        transform: scale(0.1);
    }

    to {
        opacity: 1;

        transform: scale(1);
    }
}

/* #endregion */


/* #region brain scan text */

/* ==================================================
brain scan text
================================================== */

/*
text area beside brain scan

[width] = gives text its own side of layout
[max-width] = stops lines from becoming too long
*/

.brain-scan-text {
    width: 45%;
    max-width: 600px;
}


/* brain scan title */

.brain-scan-text h1 {
    margin-top: 0;

    font-size: 40px;

    animation: title-twitch 2.8s infinite;
}


/* tweaker brein */

@keyframes title-twitch {

    0%,
    92%,
    100% {
        transform: translate(0, 0) rotate(0);
    }

    93% {
        transform: translate(-2px, 1px) rotate(-0.4deg);
    }

    94% {
        transform: translate(2px, -1px) rotate(0.4deg);
    }

    95% {
        transform: translate(-1px, 0) rotate(-0.2deg);
    }

    96% {
        transform: translate(1px, 1px) rotate(0.2deg);
    }
}


/* brain scan paragraphs */

.brain-scan-text p {
    font-size: 20px;
    line-height: 1.5;
}

/* #endregion */


/* #region MOBILE BRAIN SCAN PAGE */

/* ==================================================
mobile brain scan page
================================================== */

/*
changes brain scan layout on smaller screens

@media = these rules only apply when browser
is 768px wide or smaller

desktop version stays exactly the same
*/

@media (max-width: 768px) {


    /* #region mobile brain scan layout */

    /* ==================================================
    mobile brain scan layout
    ================================================== */

    /*
    stacks image above text instead of beside it

    [flex-direction: column] = puts items vertically
    [gap] = controls space between image and text
    [padding] = keeps content away from screen edges
    */

    .brain-scan-layout {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;

        width: 100%;
        min-height: 100vh;

        padding: 30px 20px;

        box-sizing: border-box;
    }

    /* #endregion */




    /* #region mobile brain scan image */

    /* ==================================================
    mobile brain scan image
    ================================================== */

    /*
    lets brain scan use most of phone width

    removes desktop 45% width so image
    has enough room on narrow screens
    */

    .brain-scan-image {
        width: 90%;
        max-width: 450px;

        height: auto;
    }

    /* #endregion */




    /* #region mobile brain scan text */

    /* ==================================================
    mobile brain scan text
    ================================================== */

    /*
    text uses full phone width underneath image
    */

    .brain-scan-text {
        width: 100%;
        max-width: 500px;

        text-align: center;
    }


    /* brain scan title */

    .brain-scan-text h1 {
        margin-top: 0;

        font-size: 28px;
        line-height: 1.1;
    }


    /* brain scan paragraphs */

    .brain-scan-text p {
        font-size: 16px;
        line-height: 1.4;
    }

    /* #endregion */


}

/* #endregion */

/* #endregion */