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

:root {
    --white: #fff;
    --gray: #31302f;
    --dark-black: #000000;
    --light-black: #1c1c1c;
    --blue-light: #6caef7;
    --blue-dark: #446482;

    --transition: all 240ms linear;
    --perspective: 2000px;
}

body {
    width: 100%;

    display: flex;
    justify-content: center;

    color: var(--white);
    transition: var(--transition);

    perspective: var(--perspective);
}

main {
    width: 100%;
    max-width: 1000px;

    display: grid;
    grid-template-columns: 1fr 160px 2fr;
    grid-template-rows: repeat(6, 400px);

    transition: var(--transition);
    background: var(--dark-black);
}

svg {
    width: 100%;
    height: 100%;

    grid-column: 2;
    grid-row: 1 / -1;
}

.gridSquare {
    display: flex;
    align-items: center;

    transition: var(--transition);
}

.col1 {
    grid-column: 1;
    justify-content: flex-end;
}

.col3 {
    grid-column: 3;
}

#bottomStraightLine {
    stroke: var(--gray);
}

#topStraightLine {
    /* why gradient can't be used for stroke: https://stackoverflow.com/questions/21638169/svg-line-with-gradient-stroke-wont-display-if-vertical-or-horizontal */
    stroke: var(--blue-dark);
    stroke-width: 2px;
}

#curveLine {
    stroke-width: 2px;
    fill: none;
}

#topStraightLineHead {
    stroke: var(--blue-light);
    stroke-width: 2px;
}

/* Demo --------------------------------- */
#demoSvg {
    transition: var(--transition);
}

#demoClipPathBodyRect,
#demoClipPathHeadRect {
    stroke-width: 2px;
    stroke: var(--white);
    stroke-dasharray: 2px;
    fill: none;
    opacity: 0;

    /* can't use variable because of scroll translate */
    transition: opacity 240ms linear;
}

#demoGradientRect {
    opacity: 0;
    transition: var(--transition);
}

body.explode {
    scale: 0.65;
    translate: 0 -15%;

    color: var(--white);
    background: none;

    main {
        transform-origin: 50% 50%;
        transform: rotate3d(0, 1, 0, -50deg);
        background: none;

        transform-style: preserve-3d;
        perspective: var(--perspective);

        .gridSquare {
            background: hsla(0, 0%, 100%, 0.1);
            scale: 0.94 0.98;
        }

        #demoSvg {
            transform: translate3d(0, 0, 30px);
        }

        #demoClipPathBodyRect,
        #demoClipPathHeadRect {
            stroke: var(--white);
        }
    }
}

body.clipPathBody {
    #demoClipPathBodyRect {
        opacity: 1;
    }

    #topStraightLineHead {
        opacity: 0;
    }
}

body.clipPathHead {
    #demoClipPathHeadRect {
        opacity: 1;
    }

    #topStraightLine,
    #curveLine {
        opacity: 0;
    }
}

body.showGradient {
    #demoGradientRect {
        opacity: 1;
    }
}