/* main font */
@font-face {
    font-family: MainFont;
    src: url("fonts/PatrickHand-Regular.ttf");
}

/* animations */
/* ######################################################################################################## */

/* star twinkle animation */
@keyframes twinkle {
    from { opacity: 0.5; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1.2); }
}

/* 0% - 10% animation */
@keyframes o-l {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* 100% - 0% animation */
@keyframes l-o {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* choices show animation */
@keyframes optionShow {
    0% { opacity: 0; }
    100% { opacity: 1; top: 50%; transform: translate(0, -50%); }
}

/* choices hide animation */
@keyframes optionHide {
    0% { opacity: 1; top: 50%; transform: translate(0, -50%); }
    100% { opacity: 0; top: 100%; }
}

/* 0% - 50% animation */
@keyframes o-f {
    0% { 
        background-color: rgba(0, 0, 0, 0.7);
    }
    100% { 
        opacity: 1;
        backdrop-filter: blur(7px);
        background-color: rgba(0, 0, 0, 0.3);
    }
}

/* 50% - 0% animation */
@keyframes f-o {
    0% { opacity: 0.3; }
    100% { opacity: 0; }
}

/* 50% - 100% animation */
@keyframes f-l {
    0% { 
        opacity: 1;
        backdrop-filter: blur(7px);
        background-color: rgba(0, 0, 0, 0.3);
    }
    100% { 
        opacity: 1; 
        backdrop-filter: blur(0px);
        background-color: rgba(255, 255, 255, 1);
    }
}

/* 100% - 50% animation */
@keyframes l-f {
    0% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* animation classes so that they can be applied with js easily */
/* ######################################################################################################## */

/* small shake animation class */
.animation-smallShake {
    animation: smallShake 0.2s ease-in-out forwards;
}

/* normal shake animation class */
.animation-normalShake {
    animation: normalShake 0.2s ease-in-out forwards;
}

/* big shake animation class */
.animation-bigShake {
    animation: bigShake 0.2s ease-in-out forwards;
}

/* fader 0% - 100% animation class */
.animation-o-l {
    opacity: 1;
    backdrop-filter: blur(10.6px);
    animation: o-l 1s ease-out forwards;
}

/* fader 100% - 0% animation class */
.animation-l-o {
    opacity: 0;
    animation: l-o 1s ease-out forwards;
}

/* fader 0% - 100% animation class */
.animation-o-f {
    opacity: 1;
    animation: o-f 0.2s ease-out forwards;
}

/* fader 50% - 0% animation class */
.animation-f-o {
    opacity: 0;
    animation: f-o 1s ease-in forwards;
}

/* fader 50% - 100% animation class */
.animation-f-l {
    opacity: 1;
    animation: f-l 0.2s ease-out forwards;
}

/* fader 100% - 50% animation class */
.animation-l-f {
    opacity: 0.3;
    animation: l-f 0.2s ease-out forwards;
}

/* choices show animation class */
.animation-optionShow {
    animation: optionShow 1s ease-out forwards;
}

/* choices hide animation class */
.animation-optionHide {
    animation: optionHide 1s ease-in forwards;
}

/* ######################################################################################################## */

/* css variables */
:root {
    --main-color: blue;
    --secondary-color: purple;
    --tertiary-color1: pink;
    --tertiary-color2: blueviolet;
    
    --main-font: MainFont;
    
    --text-color: white;
}

/* root formating */
* {
    margin: 0;
    padding: 0;
}

/* page formatin */
html, body {
    display: flex;
    overflow: visible;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* stars container */
.star-content {
    display: flex;
    position: fixed;
    top: 0;
    height: 100vh;
    z-index: 1;
}

/* background stars container */
.stars {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(180deg,rgba(3, 3, 32, 1) 0%, rgba(17, 17, 75, 1) 65%, rgba(29, 29, 110, 1) 100%);
    display: flex;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 0;
}

/* background star div */
.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: twinkle 2s infinite ease-in-out alternate;
    z-index: 1;
}

/* this is useless */
.startDialog {
    display: flex;
}

/* the homepage text */
.startText {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* main content formating even tho its never referenced */
main {
    z-index: 100;
    align-items: center;
    display: flex;
    flex-direction: column;
    color: aliceblue;
    font-family: var(--main-font);
    font-weight: 100;
}

/* header 1 looks */
h1 {
    font-family: var(--main-font);
    font-weight: 100;
    font-size: 60px;
}

/* header 2 looks */
h2 {
    font-family: var(--main-font);
    font-weight: 50;
}

/* paragraph looks */
p {
    font-family: var(--main-font);
    font-weight: 50;
    text-align: center;
}

/* the story area */
.storyArea {
    font-family: var(--main-font);
    font-weight: 100;
    height: 70vh;
    width: 95vw;
    border-width: 0;
}

/* basic background */
.p1Bg {
    background-image: url("images/p1Bg.jpg");
    background-color: #cccccc;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 0;
    position: absolute;
}

/* a place holder class for the background image of a story choice */
.storyPageBackground {
    background-image: url("images/placeholder.jpg");
    background-color: #cccccc;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 0;
    position: absolute;
}

/* a class for invisable elements */
.invis {
    opacity: 0;
}

/* start button class  */
.startButton {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    border-radius: 16px;
    background: linear-gradient(135deg, #3a47d5, #a3a9ff);
    background-size: 250%;
    border: 2px solid #0c2756;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
    pointer-events: all;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--main-font);
    font-weight: 300;
    font-size: 22px;
    color: #ffffff;
    transition: all 0.3s ease-in-out;
    left: 50vw; 
    top: 50vh; 
    margin-left:-125px; 
    margin-top:-50px; 
    width: 250px; 
    height: 100px; 
    position: fixed;
}

/* startbutton on hover */
.startButton:hover {
    background-size: 100%;
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.35);
}

/* start button when active */
.startButton:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2);
}

/* the container with all the choice buttons */
#choices-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin: 10px;
}

/* the story choice button looks */
.storyButtons {
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(52, 52, 122, 0.6), rgba(133, 133, 133, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    margin: 8px;
    font-family: var(--main-font);
    font-weight: 500;
    font-size: 18px;
    color: #fff;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    background-size: 200% 200%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* the story choice button looks when hovered on */
.storyButtons:hover {
    background-position: right center;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

/* the story choice button looks when active */
.storyButtons:active {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* the div container for the animations */
.animation-container {
    height: 100vh; 
    width: 100vw;
    z-index: 0;
    position: fixed;
    pointer-events: none; 
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contentArea {
    position: fixed;
    width: auto;
    height: auto;
    top: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 25px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    z-index: 1000;
    transition: all 0.4s ease;
}

.fadder {
    height: 100vh;
    width: 100vw;
    opacity: 0;
    background-color: rgb(220, 220, 220);
    position: fixed;
    top: 0;
    pointer-events: none;
}

#cors-warning {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #ff4d4d;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-family: sans-serif;
    display: none;
    z-index: 9999;
}

#audio-warning {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: #ff4d4d;
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    font-family: sans-serif;
    display: none;
    z-index: 9999;
}