/* --------------------------------------------------------- */
/* --- RULES --- */
*{
box-sizing: border-box;
}
:root {
    /*Background Colors*/
    --bg-site-dark:     #272727;
    --bg-card-dark:     #1a1a1a;
    /*Font Colors*/
    --font-dark:        #ffffff;
    /*Other Colors*/
    --shadow:           rgba(0, 0, 0, 0.5);
}
/* --------------------------------------------------------- */
/* --- FONTS --- */
@font-face {
    font-family:    "Regular";
    src:            url('font/CreatoDisplay-Regular.otf');
}
@font-face {
    font-family:    "Black";
    src:            url('font/CreatoDisplay-Black.otf');
}
@font-face {
    font-family:    "Thin";
    src:            url('font/CreatoDisplay-Thin.otf');
}
@font-face {
    font-family:    "Light";
    src:            url('font/CreatoDisplay-Light.otf');
}
@font-face {
    font-family:    "Bold";
    src:            url('font/CreatoDisplay-Bold.otf');
}
/* --------------------------------------------------------- */
/* --- BODY --- */
/* --Body Main -- */
body {
    background-color:   var(--bg-site-dark);
    /*                  V       H*/
    margin:             0       20px;

    /*Font Styling*/
    font-family:        "Regular";
    font-size:          16px;
}
/* --------------------------------------------------------- */
/* --- HEADER --- */
/* -- Header Main -- */
.header-container {
    /*Size & Position*/
    /*                          Up      Rgt     Btm     Lft*/
    margin:                     0px     auto    0px     auto;
    max-width:                  1150px;
    min-width:                  800px;

    /*Alignment*/
    display:                    flex;
    align-items:                center;
    justify-content:            space-between;

    /*Appearance*/
    background-color:           var(--bg-card-dark);
    /*                          TLft    TRgt    BLft    BRgt*/
    border-radius:              0       0       15px    15px;
    /*                          V       H*/
    padding:                    5px     20px;
    /*                          H       V       Blur    Clr*/
    box-shadow:                 0px     0px     10px    var(--shadow);

    /*Entry Animation*/
    animation-name:             transformDown;
    animation-duration:         0.25s;
    animation-timing-function:  ease-out;
}
/* -- Header Contents -- */
/*Header Text*/
.header-text-group {
    display:                flex;
    color:                  var(--font-dark);
    align-items:            baseline;
    gap:                    10px;
}
.header-title {
    font-family:            "Bold";
    font-size:              1em;
}
.header-subtitle {
    font-family:            "Light";
    font-size:              1em;
}
.header-construction {
    font-family:            "Black";
    font-size:              1em;
    color:                  red;
}
/*Header Images*/
.header-image-group {
    display:                flex;
    align-items:            center;
    gap:                    10px;
    text-decoration:        none;

    /*Disable selection*/
    -webkit-user-select:    none;   /* Safari */
    -moz-user-select:       none;   /* Firefox */
    -ms-user-select:        none;   /* IE/Edge */
    user-select:            none;   /* Standard */
}
.header-image {
    width:                  25px;
    height:                 25px;
    object-fit:             cover;
    display:                block;
    /*                      Prpty       Lngth   Timing*/
    transition:             transform   0.25s   ease;
}
/* --------------------------------------------------------- */
/* --- COLUMN --- */
/* -- Column Container -- */
.column-container {
    /*Size & Position*/
    display:        flex;
    /*              V       H*/
    margin:         20px    auto;
    max-width:      1150px;
    min-width:      800px;
    height:         500px;
    gap:            20px;   /*Gap between columns*/
}
/* -- Column Main -- */
.column {
    display:                    flex;
    /*                          Grow    Shrink  Basis*/
    flex:                       1       1       25%;

    /*Appearance*/
    border-radius:              15px;
    background-size:            auto 100%;  /*Size of background image*/
    box-shadow:                 0px 0px 10px var(--shadow);
    overflow:                   hidden;     /*Hide overflowing text*/

    /*Animations*/
        /*Interaction*/
    /*                          Prpty       Lngth   Timing*/
    transition:                 transform   0.5s    ease,   /*Mouse hover*/
                                flex        0.5s    ease;   /*Widen column*/
    position:                   relative;                   /*Dimming effect position*/
        /*Page Load*/
    animation-name:             fadeIn;
    opacity:                    0;                          /*Frame 0 opacity*/
    animation-duration:         0.75s;
    animation-timing-function:  ease-out;
    animation-fill-mode:        forwards;                   /*Retain last keyframe value*/


    /*Text Styling & Alignment*/
    justify-content:            flex-start;
    align-items:                flex-start;
    text-decoration:            none;
    color:                      var(--font-dark);
    /*                          V       H*/
    padding:                    20px    20px;

    /*Disable selection*/
    -webkit-user-select:        none;   /* Safari */
    -moz-user-select:           none;   /* Firefox */
    -ms-user-select:            none;   /* IE/Edge */
    user-select:                none;   /* Standard */
}
/* -- Column Contents -- */
.column .column-text {
    position:       relative;               /*Dimming effect position*/
    z-index:        2;                      /*Dimming effect layer*/

    padding-top:    400px;                  /*Default padding*/
    transition:     padding-top 0.5s ease;  /*Padding animation to the top*/
}
/*Column Text Styling*/
.column-text span {                         /*Column header*/
    font-family:    "Light";
    font-size:      1.9em;
    display:        block;

    line-height:    1;
    text-shadow:    0px 0px 20px #000000;
    margin-bottom:  5px;
}
.column-text p {                            /*Column inactive paragraph*/
    font-family:    "Regular";
    font-size:      1em;
    margin:         0;

    text-shadow:    0px 0px 20px #000000;
    text-align:     justify;
}
.column-text .column-description-content {  /*Column active paragraph*/
    font-family:    "Regular";
    font-size:      1em;
    margin-bottom:  0px;
    transform:      translateY(-20px);      /*Funny bug fix because of mainy .column padding*/

    opacity:        0;
    visibility:     hidden;
    overflow:       hidden;
    max-height:     0;
    /*              Prpty       Lngth   Timing      Delay*/
    transition:     opacity     0.3s    ease-out    0.0s,   /*Descrition fadein duration/delay from active*/
                    visibility  0.3s    ease-out    0.0s,
                    max-height  0.3s    ease-out    0.0s;
}
/*Dimming Layer*/
.column::before {
    content: "";

    z-index: 1;                                     /*Dimming effect layer*/
    position:           absolute;                   /*Inherit parent*/
    top:                0;
    left:               0;
    right:              0;
    bottom:             0;

    background-color:   rgba(0, 0, 0, 0);           /*Dimming before column activation*/
    transition:         background-color 0.5s ease; /*Dimming duration*/

}

/*Dimming Effect & Text Animation*/
.column-description-preview {
    /*          Prpty       Lngth   Timing      Delay*/
    transition: opacity     0.3s    ease-out    0.3s,   /*Preview fadein duration/delay from active*/
                visibility  0.3s    ease-out    0.3s;
}
body.content-mode .column.active .column-description-preview {
    opacity:    0;
    visibility: hidden;
    /*          Prpty       Lngth   Timing      Delay*/
    transition: opacity     0.3s    ease-out    0.0s,   /*Preview fadeout duration/delay from inactive*/
                visibility  0.3s    ease-out    0.0s;
}
body.content-mode .column.active::before {
    background-color:       rgba(0, 0, 0, 0.6);         /*Dimming ammountafter column activation*/
}
body.content-mode .column.active .column-text {
    padding-top:            0;                          /*Top padding after column activation*/
}
body.content-mode .column.active .column-description-content {
    opacity: 1;
    visibility: visible;
    max-height: 1000px;
    /*          Prpty       Lngth   Timing      Delay*/
    transition: opacity     0.3s    ease-out    0.3s,   /*Descrition fadein duration/delay from active*/
                visibility  0.3s    ease-out    0.3s,
                max-height  0.3s    ease-out    0.3s;
}

/* -- Individual Columns -- */
.column:nth-child(1) {
    background-image:   url("media/lens.jpg");
    animation-delay:    0.1s;
}
.column:nth-child(2) {
    background-image:   url("media/mix.jpg");
    animation-delay:    0.15s;
}
.column:nth-child(3) {
    background-image:   url("media/drums.jpg");
    animation-delay:    0.2s;
}
.column:nth-child(4) {
     background-image:  url("media/about.jpg");
    animation-delay:    0.25s;
}
/* --------------------------------------------------------- */
/* --- CONTENT DISPLAY --- */
/* -- Content Display Main -- */
.content-display {
    max-width:          1150px;
    min-width:          800px;
    /*                  Up      Rgt     Btm     Lft*/
    margin:             20px    auto    0       auto;
}
/*Hide Content Panels By Default*/
.content-panel {
    display:            none;
    padding:            20px;
    text-align:         justify;
    background-color:   var(--bg-card-dark);
    color:              var(--font-dark);
    border-radius:      15px;
    /*                  H       V       Blur    Clr*/
    box-shadow:         0px     0px     10px    var(--shadow);

    /*                  Prpty   Lngth   Timing*/
    animation:          fadeIn  0.5s    ease-out;   /*Content display fade inanimation*/
}
/* -- Content Display Contents -- */
/*Content Text Styling*/
.content-text span {    /*Content text heading*/
    font-family:    "Light";
    font-size:      2em;
    display:        block;
    line-height:    1;
}
.content-text p {       /*Content text paragraph*/
    font-family:    "Regular";
    font-size:      1em;
    /*              Up      Rgt     Btm     Lft*/
    margin:         5px     0       0       0;
}
/* -- JavaScript Integration -- */
.content-panel.active {
    display: block;
}
/* --------------------------------------------------------- */
/* --- ANIMATIONS --- */
/* -- Interaction Animations -- */
/*Column Animations*/
.column:hover {         /*On hover*/
    transform: translateY(-5px) scale(1.0);
}
.column:active {        /*On click*/
    transform: translateY(-5px) scale(0.98);
    transition-duration: 0.1s;
}
/*Header Image Animations*/
.header-image:hover {   /*On hover*/
    transform: scale(1.15);
}
.header-image:active{   /*On click*/
    transform: scale(1.05);
}
/* -- Content Mode Animations -- */
body.content-mode .column {
    /*              Grow  Shrink  Basis*/
    flex:           1     1       250px;    /*Minimum passive column size*/
}
body.content-mode .column.active {
    /*              Grow  Shrink  Basis*/
    flex:           10    1       50%;
    align-items:    flex-start;             /*Align active column items to the top*/
}


/* --------------------------------------------------------- */
/* --- KEYFRAMES --- */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes transformDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0px);
        opacity: 1;
    }
}