/* credit : https://keithclark.co.uk/articles/pure-css-parallax-websites/ */
/* update 18th March:
 * change arrange the layouts (overlapping background and cover especially)
 * by grid.
 *
 * ref: https://css-tricks.com/snippets/css/complete-guide-grid/
 */

.css-parallax-toplevel { /* top-level means we can only have one perspective
                          * as we are going to scroll if overflowing vertically */
    height: 500px; /* fallback for older browsers */
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    overflow-y: auto;

    display: grid;
    grid-template-rows:
        [a-group-row-top] auto
        [a-group-row-bottom caption-row-top] auto
        [caption-row-bottom skirt-row-top] auto
        [skirt-row-bottom] auto
        [credit-row-top] auto
        [credit-row-bottom]
}

.css-parallax-group-orig {
    position: relative;
    height: 500px; /* fallback for older browsers */
    height: 100vh;
}


.css-parallax-group {
    grid-column: 1 / -1;
    grid-row: a-group-row-top / a-group-row-bottom;

    display: grid;
    /* setup only for how to arrange them vertically */
    grid-template-rows:
        [row-top background-row-top cover-row-top] 75vh
        [cover-row-bottom] 25vh
        [background-bottom] auto
        [row-bottom]
}

.css-parallax-layer-orig {
    /* common settings for an element under `css-parallax-group` */

    /* v workaround for Gnome Web
     *   where background disapears when div container is out of view */
    height: 100%;

    /* v fill the space of the container */
    top: 0; right: 0; bottom: 0; left: 0;

   /* v fix wrong calculation visual size of background
    *   on webkit based browsers.
    */
    transform-origin: center bottom;
    position: relative;
}

.css-parallax-layer {
    grid-column: 1 / -1; /* use whole columns */
    transform-origin: center bottom;
}

.css-parallax-layer.as-background-orig {
    position: relative;
}

.css-parallax-layer.as-background {
    grid-row: background-row-top / background-row-bottom;
}

/*
.css-parallax-toplevel > 
, .css-parallax-layer.as-base {
    position: relative;
} */
.css-parallax-layer.as-base {
    grid-row: cover-row-top / cover-row-bottom;
}

.css-parallax-toplevel > .background-skirt {
    grid-column: 1 / -1;
    grid-row: skirt-row-top / skirt-row-bottom;
}

.css-parallax-toplevel + div {
    /* credit: The Safari and iOS Caveat on https://orangeable.com/css/parallax-scroll */
    /* jeongoon: haven't tested. no iPad or Macbook :-/ */

    /* Safari / iOS issue with `overflow: hidden` is not working
     * in the `css-parallax-toplevel` */
    perspective: 101px;
}

.set-background-image {
    width: min(105%, 100vw); /* width: 100% has some minor issues */
    height: 100vh;

    background-image: url(background.jpg);
    background-repeat: repeat;
    background-size: cover;
    background-position: center;

}

@supports ((perspective: 1px)
           and (not (-webkit-overflow-scrolling: touch))) {
    body {
        transform: translateZ(0px);
        /* ^ Fix paint issues in Edge & Safari H/W accel */
    }

    .css-parallax-toplevel {
        perspective: 100px;
       /* v fix wrong calculation visual size(height) of background
        *   on webkit based browsers.
        */
       perspective-origin: center bottom;
    }

    .css-parallax-group {
        transform-style: preserve-3d;
        /* change grid layout to overlap background with cover and contents */
    }

    .css-parallax-layer.as-background {
        /* v pull out from the content flow */
        /*position: absolute;*/ /* no need */

        transform: translateZ(-400px) scale(5);
       -webkit-transform: translateZ(-400px) scale(5);

        /* jeongoon: I took different approach from original formulation
         * original apporach:
         *   set translateZ value -> make scale value
         * my approach:
         *   set scale value -> make translateZ value

         * Because more scale means less moving speed */

        /* h  : transformed height
         * h' : original height
         * p  : perspective value
         * z  : translated value on Z-axis

                h : h' = p : p + |z|

                      h'     (p+|z|)
             scale = ----  = -------
                      h         p

            |z| = p * scale - p = p * (scale - 1)

         *  therfore:
                z  = - p * (scale - 1)
       */
    }

    .css-parallax-toplevel > *
    , .css-parallax-layer.as-base {
        z-index: 1;
        /* prevents the browser flattening the `css-parallax-group` elements */
        transform-style: preserve-3d;

        /* v ensure Safari H/W acceleration */
        transform: translateZ(1e-12px);
       -webkit-transform: translateZ(1e-12px);
    }

    .css-parallax-toplevel > *:not(.css-parallax-group):first-child {
        /* NB: user required to setup default background color */
        background: white;
    }
}

/*
 * Other Settings
 */

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

html, body {
    /*overflow: hidden;*/
    /* please refer to
      https://jeongoon.github.io/posts/2022-0312-css-parallax-revised-0.html#bug-with-text-size-adjust-on-chrome-mobile
     */
    text-size-adjust: none;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

.line-height-1_5 {
    line-height: 1.5;
}

.flex-column-center-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.grid-cover {
    min-height: 15vh;
    width: 100%;
    display: grid;
    grid-template: auto / 1fr 2fr;
}

.grid-cover > * {
    height: 100%;
}

.margin-auto {
    margin: auto;
}

.on-background-title
, .credits
, .caption {
    color: hsl(300 50% 80%);
    background: hsla(300 50% 30% / 0.9);
}

.caption {
    grid-column: 1 / -1;
    grid-row: caption-row-top / caption-row-bottom;
}

.on-background-sub-title {
    color: hsla(300 50% 30% / 0.9);
    background:  hsla(300 50% 80% / 0.95);
}

.credits , .caption {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    text-align: center;
}

.border {
    border: 0.25rem solid hsla(300 50% 30% / 0.9);
    padding: 2rem;
}

.padding-1rem {
    padding: 1rem;
}

.background-white {
    background: hsla(300 5% 100% / 1);
}

/* navigation */
.navbar {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    margin: 0;
    padding: 0;
    background: hsla(300 50% 30% / 0.7);
    color: hsla(300 20% 80% / 1);
    decoration: none
}

.navbar a, .navbar a:visited {
    color: hsla(300 20% 80% / 1);
    font-weight: bold;
    text-decoration: none
}

.navbar > ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 0.5rem;
    list-style: none;
}


/* fix: meta ... viewport .. initial-scale: 1 */
/* don't use meta and change font-size according to device width */

 /* increase the font size on portrait mode on mobile */
@media only screen and (pointer: coarse) and (orientation: portrait)
       and (max-width: 992px) {
    html, body {
        font-size: 3.5vw;

    }
    .css-parallax-toplevel::after {
        position: fixed;
        bottom: 0;
        height: 1px;
        background: cyan;
   }

}

/* but increase slightly on landscape mode on mobile */
@media only screen and (pointer: coarse)  and (orientation: landscape)
       and (max-width: 992px) {
    html, body {
        font-size: 2vw;
    }
    .css-parallax-toplevel::after { /* top-level means we can only have one perspective
                              * as we are going to scroll if overflowing vertically */
        content: '';
        height: 15px;
        background: cyan;
        opacity: 0.01;
    }
}

*/