@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@font-face {
    font-family: 'Philia';
    src: url('../fonts/phillia.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
:root {
    /*--text-primary: #815F2C;*//* ORI TERRACOTTA */
    --text-primary: #513B1B; /* ADAPTED TERRACOTTA */
    /*--text-secondary: #FBEACD;*//* CREAM */
    --text-secondary: #FFFFFF; /* WHITE */
}
/* Keep content for SEO and screen readers but hide it visually */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}
video {
    object-fit: cover;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    filter: brightness(125%) hue-rotate(-10deg) sepia(25%);
}
video::-webkit-media-controls,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-moz-media-controls,
video::-moz-media-controls-play-button,
video::-webkit-media-controls-start-playback-button{
    display: none;
}
/*video:not(.active) {*/
/*    display: none;*/
/*}*/

html, body {
    height: 100%;
}
html {
    font-family: 'Montserrat', sans-serif;
    font-size: 150%;
    line-height: 1.4;
    /*background-color: var(--bg-ref)*/
}
body {
    margin: 0;
}

.viewport-header {
    position: relative;
    height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    font-family: 'Philia';
    color: var(--text-primary);
    text-transform: capitalize;
    line-height: 1.2;
    font-size: 2rem;
    text-align: center;
}
h2 {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 100;
    text-shadow: 1px 1px 7px #000;
    font-size: 1.1rem;
}

/*
    Text reveal animations
    source: Cascade AI
*/
@keyframes text-reveal {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


h1 {
    opacity: 0;
    transform: translateX(-60px);
    animation: text-reveal 1.5s ease-out forwards;
}

h1 {
    animation-delay: 1.5s;
}

h1 {
    animation-delay: 1.5s;
}
h2 {
    animation: fade-in 1.5s 3s ease-out forwards;
}

/* Typewriter-1 animation
    source: https://codepen.io/frankeno/pen/QWmmxQb
*/
@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}
.typewriter-1 {
    white-space: nowrap;
    overflow: hidden;
    transform: translateY(-50%);
    animation: typewriter 10s steps(100) 5s 1 normal both;
}

/* Typewriter animation
    source: https://codepen.io/alvaromontoro/pen/rNwVpdd
*/
@keyframes typing {
    0% { content: ""; }
    8.33% { content: "c"; }
    16.66% { content: "co"; }
    24.99% { content: "com"; }
    33.32% { content: "comi"; }
    41.65% { content: "comin"; }
    49.98% { content: "coming"; }
    58.31% { content: "coming "; }
    66.64% { content: "coming s"; }
    74.97% { content: "coming so"; }
    83.3% { content: "coming soo"; }
    91.63% { content: "coming soon"; }
    100% { content: "coming soon."; }
}
/* i18n animation
    61 steps
    x 167 ms
  = 28.7 seconds
*/
@keyframes typing-i18n {
    /* English */
    0.0000%, 40.2975% { content: ""; }
    1.4925%, 38.805% { content: "c"; }
    2.985%, 37.3125% { content: "co"; }
    4.4775%, 35.82% { content: "com"; }
    5.97%, 34.3275% { content: "comi"; }
    7.4625%, 32.835% { content: "comin"; }
    8.955%, 31.3425% { content: "coming"; }
    10.4475%, 29.85% { content: "coming "; }
    11.94%, 28.3575% { content: "coming s"; }
    13.4325%, 26.865% { content: "coming so"; }
    14.925%, 25.3725% { content: "coming soo"; }
    16.4175%, 23.88% { content: "coming soon"; }
    17.91%, 22.3875% { content: "coming soon."; }

    /* French */
    43.2825%, 89.55% { content: ""; }
    44.775%, 88.0575% { content: "p"; }
    46.2675%, 86.565% { content: "pr"; }
    47.76%, 85.0725% { content: "pro"; }
    49.2525%, 83.58% { content: "proc"; }
    50.745%, 82.0875% { content: "proch"; }
    52.2375%, 80.595% { content: "procha"; }
    53.73%, 79.1025% { content: "prochai"; }
    55.2225%, 77.61% { content: "prochain"; }
    56.715%, 76.1175% { content: "prochaine"; }
    58.2075%, 74.625% { content: "prochainem"; }
    59.7%, 73.1325% { content: "prochaineme"; }
    61.1925%, 71.64% { content: "prochainemen"; }
    62.685%, 70.1475% { content: "prochainement"; }
    64.1775%, 68.655% { content: "prochainement."; }
}
/* i18n animation - fadeout
       26 steps
   x  167 ms
   +    5 steps
   x 1000 mx
  = 9.4 seconds
*/
@keyframes typing-i18n-fadeout {
    /* English - 2s + 1s fadeout + 1s pause */
    0.0000% {
        content: "";
        opacity: 1;
    }
    1.777% { content: "c"; } /* 167ms */
    3.554% { content: "co"; } /* 167ms */
    5.331% { content: "com"; } /* 167ms */
    7.108% { content: "comi"; } /* 167ms */
    8.885% { content: "comin"; } /* 167ms */
    10.662% { content: "coming"; } /* 167ms */
    12.439% { content: "coming "; } /* 167ms */
    14.216% { content: "coming s"; } /* 167ms */
    16.993% { content: "coming so"; } /* 167ms */
    17.77% { content: "coming soo"; } /* 167ms */
    19.547% { content: "coming soon"; } /* 167ms */
    21.324% {
        content: "coming soon.";
        opacity: 1;
    } /* 167ms */

    /* French - 2.3s + 1s fadeout + 1s pause */
    42.6% {
        content: "";
        opacity: 0;
    } /* 2000ms */
    53.238% {
        content: "";
        opacity: 1;
    } /* 1000ms */
    55.015% {
        content: "p";
        opacity: 1;
    } /* 167ms */
    56.792% { content: "pr"; } /* 167ms */
    58.569% { content: "pro"; } /* 167ms */
    60.346% { content: "proc"; } /* 167ms */
    62.123% { content: "proch"; } /* 167ms */
    63.9% { content: "procha"; } /* 167ms */
    65.677% { content: "prochai"; } /* 167ms */
    67.454% { content: "prochain"; } /* 167ms */
    69.231% { content: "prochaine"; } /* 167ms */
    71.008% { content: "prochainem"; } /* 167ms */
    72.785% { content: "prochaineme"; } /* 167ms */
    74.562% { content: "prochainemen"; } /* 167ms */
    76.339% { content: "prochainement"; } /* 167ms */
    78.116% {
        content: "prochainement.";
        opacity: 1;
    } /* 167ms */
    100% {
        content: "";
        opacity: 0;
    } /* 2000ms */
}
@keyframes typing-i18n-fadeout-up {
    /* English - 2s + 1s fadeout + 1s pause */
    0.0000% {
        content: "";
        opacity: 1;
    }
    1.777% { content: "*c"; } /* 167ms */
    3.554% { content: "*co"; } /* 167ms */
    5.331% { content: "*com"; } /* 167ms */
    7.108% { content: "*comi"; } /* 167ms */
    8.885% { content: "*comin"; } /* 167ms */
    10.662% { content: "*coming"; } /* 167ms */
    12.439% { content: "*coming "; } /* 167ms */
    14.216% { content: "*coming s"; } /* 167ms */
    16.993% { content: "*coming so"; } /* 167ms */
    17.77% { content: "*coming soo"; } /* 167ms */
    19.547% { content: "*coming soon"; } /* 167ms */
    21.324% {
        content: "*coming soon.";
        opacity: 1;
    } /* 167ms */

    /* French - 2.3s + 1s fadeout + 1s pause */
    42.6% {
        content: "";
        opacity: 0;
    } /* 2000ms */
    53.238% {
        content: "";
        opacity: 1;
    } /* 1000ms */
    55.015% {
        content: "*p";
        opacity: 1;
    } /* 167ms */
    56.792% { content: "*pr"; } /* 167ms */
    58.569% { content: "*pro"; } /* 167ms */
    60.346% { content: "*proc"; } /* 167ms */
    62.123% { content: "*proch"; } /* 167ms */
    63.9% { content: "*procha"; } /* 167ms */
    65.677% { content: "*prochai"; } /* 167ms */
    67.454% { content: "*prochain"; } /* 167ms */
    69.231% { content: "*prochaine"; } /* 167ms */
    71.008% { content: "*prochainem"; } /* 167ms */
    72.785% { content: "*prochaineme"; } /* 167ms */
    74.562% { content: "*prochainemen"; } /* 167ms */
    76.339% { content: "*prochainement"; } /* 167ms */
    78.116% {
        content: "*prochainement.";
        opacity: 1;
    } /* 167ms */
    100% {
        content: "";
        opacity: 0;
    } /* 2000ms */
}

@keyframes blink {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
.typewriter {
    display: flex;
    flex-direction: row;
}
.typewriter::before {
    content: "";
    /*animation: typing 2s steps(10, end) 3s 1 normal forwards;*/
    /*animation: typing-i18n 10.2s steps(61, end) 3s infinite normal forwards;*/
    animation: typing-i18n-fadeout 8.5s steps(30, end) 3s infinite normal forwards;
}

.typewriter::after {
    content: "\00a0\00a0";
    opacity: 0;
    margin-left: 2px;
    border-bottom: 1px solid currentColor;
    height: 83%;
    display: block;
    /*animation: blink 0.5s steps(1, end) 3s 4 forwards;*/
    animation: blink 0.5s steps(1, end) 3s infinite forwards;
}

@media (prefers-reduced-motion) {
    .typewriter::after {
        animation: none;
    }

    @keyframes sequencePopup {
        0%, 100% { content: "developer"; }
        25% { content: "writer"; }
        50% { content: "reader"; }
        75% { content: "human"; }
    }

    .typewriter::before {
        content: "developer";
        animation: sequencePopup 12s linear infinite;
    }
}

.video-controls {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 0.3rem;
    row-gap: 0.6rem;
    flex-wrap: wrap;
}
.video-controls button {
    --pico-background-color: var(--text-primary);
    --pico-border-color: var(--text-primary);
    --pico-primary-focus: transparent;
    padding: 0.3rem 0.6rem;
    font-size: 1rem;
    font-weight: 100;
    background: rgba(129, 95, 44, 0.3);
}
.video-controls button.active {
    background: rgba(129, 95, 44, 0.7);
}


main {
    display: none;
    width: 80vw;
    left: 10%;
    height: 40vh;
    overflow: auto;
    background: rgba(0, 0, 0, 0.66);
    color: white;
    position: relative;
    padding: 1rem;
}

@media screen and (min-width: 768px) {

}