/* Base */
body, html {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: #050505;
}

h1 {
    font-weight: 500;
    letter-spacing: 23px;
    animation: fadeIn 1s ease forwards;
    animation-delay: 2.5s;
    opacity: 0;
    margin: 0 0 0.75rem 0;
    padding: 0.75rem 0 0.75rem 23px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.02);
}

a {
    color: #FF9345;
    text-decoration: none;
    letter-spacing: 3px;
    margin-left: 2px;
    transition: all 0.5s ease;
    animation: fadeIn 1s ease forwards;
    animation-delay: 3.5s;
    opacity: 0;
}

a:hover {
    color: white;
}

p {
    font-size: 0.75rem;
    margin: 0;
}

/* Animations */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes shimmer {
    0%   {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Logo */
.logo {
    width: 45px;
    height: 19px;
    position: absolute;
    left: 50%;
    top: 6rem;
    transform: translateX(-50%);
}

.shimmer-mask {
    position: relative;
    width: 45px;
    height: 19px;
    background-image: url('assets/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    -webkit-mask-image: url('assets/logo.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url('assets/logo.png');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;

    overflow: hidden;
    animation: fadeIn 2s ease forwards;
    animation-delay: 1s;
    opacity: 0;
}

/* Shimmer Layer */
.shimmer-mask::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.3) 35%,
        rgba(255,255,255,0.7) 50%,
        rgba(255,255,255,0.3) 65%,
        rgba(255,255,255,0) 100%
    );
    transform: translateX(-100%);
    animation: shimmer 1.6s linear forwards;
    animation-delay: 1s;
    pointer-events: none;
    mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
    .shimmer-mask::before {
        animation: none;
        opacity: 0;
    }
}

/* Audio Toggle */
#audio-toggle {
    position: absolute;
    top: calc(6rem - 4px);
    right: 6rem;
    cursor: pointer;
    animation: fadeIn 1s ease forwards;
    animation-delay: 2s;
    opacity: 0;
}

#audio-toggle path {
    stroke: #FF9345;
    transition: all 0.5s ease;
}

#audio-toggle:hover path {
    stroke: white;
}

/* Video Background */
.video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}

/* Content */
.content {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 0.5rem;
    text-transform: uppercase;
}

.container {
    margin-top: auto;
    margin-bottom: auto;
    text-align: center;
}

/* Footer */
.footer {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    animation: fadeIn 1s ease forwards;
    animation-delay: 4.5s;
    opacity: 0;
}

.social-media-buttons {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.social-media-buttons a {
    width: 20px;
    height: 20px;
    display: block;
    text-decoration: none;
    text-indent: -9999px;
    overflow: hidden;
}

.social-media-buttons a#facebook {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_17_24)%22%3E%3Cpath%20d%3D%22M30%2015C30%206.7158%2023.2842%200%2015%200C6.7158%200%200%206.7158%200%2015C0%2022.0344%204.8432%2027.9372%2011.3766%2029.5584V19.584H8.2836V15H11.3766V13.0248C11.3766%207.9194%2013.6872%205.553%2018.6996%205.553C19.65%205.553%2021.2898%205.7396%2021.9606%205.9256V10.0806C21.6066%2010.0434%2020.9916%2010.0248%2020.2278%2010.0248C17.7684%2010.0248%2016.818%2010.9566%2016.818%2013.3788V15H21.7176L20.8758%2019.584H16.818V29.8902C24.2454%2028.9932%2030.0006%2022.6692%2030.0006%2015H30Z%22%20fill%3D%22%23FFA054%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_17_24%22%3E%3Crect%20width%3D%2230%22%20height%3D%2230%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
}


.social-media-buttons a#x {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M22.9079%202.37988H27.1247L17.9121%2012.9092L28.75%2027.2373H20.264L13.6175%2018.5474L6.01243%2027.2373H1.79304L11.6468%2015.975L1.25%202.37988H9.95139L15.9592%2010.3228L22.9079%202.37988ZM21.4279%2024.7134H23.7645L8.68174%204.7713H6.17433L21.4279%2024.7134Z%22%20fill%3D%22%23FFA054%22%2F%3E%3C%2Fsvg%3E');
}


.social-media-buttons a#instagram {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2030%2030%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_17_27)%22%3E%3Cpath%20d%3D%22M15%202.70117C19.0078%202.70117%2019.4824%202.71875%2021.0586%202.78906C22.5234%202.85352%2023.3145%203.09961%2023.8418%203.30469C24.5391%203.57422%2025.043%203.90234%2025.5645%204.42383C26.0918%204.95117%2026.4141%205.44922%2026.6836%206.14648C26.8887%206.67383%2027.1348%207.4707%2027.1992%208.92969C27.2695%2010.5117%2027.2871%2010.9863%2027.2871%2014.9883C27.2871%2018.9961%2027.2695%2019.4707%2027.1992%2021.0469C27.1348%2022.5117%2026.8887%2023.3027%2026.6836%2023.8301C26.4141%2024.5273%2026.0859%2025.0313%2025.5645%2025.5527C25.0371%2026.0801%2024.5391%2026.4023%2023.8418%2026.6719C23.3145%2026.877%2022.5176%2027.123%2021.0586%2027.1875C19.4766%2027.2578%2019.002%2027.2754%2015%2027.2754C10.9922%2027.2754%2010.5176%2027.2578%208.94141%2027.1875C7.47656%2027.123%206.68555%2026.877%206.1582%2026.6719C5.46094%2026.4023%204.95703%2026.0742%204.43555%2025.5527C3.9082%2025.0254%203.58594%2024.5273%203.31641%2023.8301C3.11133%2023.3027%202.86523%2022.5059%202.80078%2021.0469C2.73047%2019.4648%202.71289%2018.9902%202.71289%2014.9883C2.71289%2010.9805%202.73047%2010.5059%202.80078%208.92969C2.86523%207.46484%203.11133%206.67383%203.31641%206.14648C3.58594%205.44922%203.91406%204.94531%204.43555%204.42383C4.96289%203.89648%205.46094%203.57422%206.1582%203.30469C6.68555%203.09961%207.48242%202.85352%208.94141%202.78906C10.5176%202.71875%2010.9922%202.70117%2015%202.70117ZM15%200C10.9277%200%2010.418%200.0175781%208.81836%200.0878906C7.22461%200.158203%206.12891%200.416016%205.17969%200.785156C4.18945%201.17187%203.35156%201.68164%202.51953%202.51953C1.68164%203.35156%201.17188%204.18945%200.785156%205.17383C0.416016%206.12891%200.158203%207.21875%200.0878906%208.8125C0.0175781%2010.418%200%2010.9277%200%2015C0%2019.0723%200.0175781%2019.582%200.0878906%2021.1816C0.158203%2022.7754%200.416016%2023.8711%200.785156%2024.8203C1.17188%2025.8105%201.68164%2026.6484%202.51953%2027.4805C3.35156%2028.3125%204.18945%2028.8281%205.17383%2029.209C6.12891%2029.5781%207.21875%2029.8359%208.8125%2029.9062C10.4121%2029.9766%2010.9219%2029.9941%2014.9941%2029.9941C19.0664%2029.9941%2019.5762%2029.9766%2021.1758%2029.9062C22.7695%2029.8359%2023.8652%2029.5781%2024.8145%2029.209C25.7988%2028.8281%2026.6367%2028.3125%2027.4688%2027.4805C28.3008%2026.6484%2028.8164%2025.8105%2029.1973%2024.8262C29.5664%2023.8711%2029.8242%2022.7813%2029.8945%2021.1875C29.9648%2019.5879%2029.9824%2019.0781%2029.9824%2015.0059C29.9824%2010.9336%2029.9648%2010.4238%2029.8945%208.82422C29.8242%207.23047%2029.5664%206.13477%2029.1973%205.18555C28.8281%204.18945%2028.3184%203.35156%2027.4805%202.51953C26.6484%201.6875%2025.8105%201.17188%2024.8262%200.791016C23.8711%200.421875%2022.7813%200.164063%2021.1875%200.09375C19.582%200.0175781%2019.0723%200%2015%200Z%22%20fill%3D%22%23FFA054%22%2F%3E%3Cpath%20d%3D%22M15%207.29492C10.7461%207.29492%207.29492%2010.7461%207.29492%2015C7.29492%2019.2539%2010.7461%2022.7051%2015%2022.7051C19.2539%2022.7051%2022.7051%2019.2539%2022.7051%2015C22.7051%2010.7461%2019.2539%207.29492%2015%207.29492ZM15%2019.998C12.2402%2019.998%2010.002%2017.7598%2010.002%2015C10.002%2012.2402%2012.2402%2010.002%2015%2010.002C17.7598%2010.002%2019.998%2012.2402%2019.998%2015C19.998%2017.7598%2017.7598%2019.998%2015%2019.998Z%22%20fill%3D%22%23FFA054%22%2F%3E%3Cpath%20d%3D%22M24.8086%206.99025C24.8086%207.98635%2024%208.78908%2023.0098%208.78908C22.0137%208.78908%2021.2109%207.98049%2021.2109%206.99025C21.2109%205.99416%2022.0195%205.19142%2023.0098%205.19142C24%205.19142%2024.8086%206.00002%2024.8086%206.99025Z%22%20fill%3D%22%23FFA054%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_17_27%22%3E%3Crect%20width%3D%2230%22%20height%3D%2230%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E');
}

.social-media-buttons a#steam {
    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%20256%20259%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20preserveAspectRatio%3D%22xMidYMid%22%3E%3Cpath%20d%3D%22M127.779%200C60.42%200%205.24%2052.412%200%20119.014l68.724%2028.674a35.812%2035.812%200%200%201%2020.426-6.366c.682%200%201.356.019%202.02.056l30.566-44.71v-.626c0-26.903%2021.69-48.796%2048.353-48.796%2026.662%200%2048.352%2021.893%2048.352%2048.796%200%2026.902-21.69%2048.804-48.352%2048.804-.37%200-.73-.009-1.098-.018l-43.593%2031.377c.028.582.046%201.163.046%201.735%200%2020.204-16.283%2036.636-36.294%2036.636-17.566%200-32.263-12.658-35.584-29.412L4.41%20164.654c15.223%2054.313%2064.673%2094.132%20123.369%2094.132%2070.818%200%20128.221-57.938%20128.221-129.393C256%2057.93%20198.597%200%20127.779%200zM80.352%20196.332l-15.749-6.568c2.787%205.867%207.621%2010.775%2014.033%2013.47%2013.857%205.83%2029.836-.803%2035.612-14.799a27.555%2027.555%200%200%200.046-21.035c-2.768-6.79-7.999-12.086-14.706-14.909-6.67-2.795-13.811-2.694-20.085-.304l16.275%206.79c10.222%204.3%2015.056%2016.145%2010.794%2026.46-4.253%2010.314-15.998%2015.195-26.22%2010.895zm121.957-100.29c0-17.925-14.457-32.52-32.217-32.52-17.769%200-32.226%2014.595-32.226%2032.52%200%2017.926%2014.457%2032.512%2032.226%2032.512%2017.76%200%2032.217-14.586%2032.217-32.512zm-56.37-.055c0-13.488%2010.84-24.42%2024.2-24.42%2013.368%200%2024.208%2010.932%2024.208%2024.42%200%2013.488-10.84%2024.421-24.209%2024.421-13.359%200-24.2-10.933-24.2-24.42z%22%20fill%3D%22%23FFA054%22%2F%3E%3C%2Fsvg%3E');

}

.social-media-buttons a#facebook,
.social-media-buttons a#x,
.social-media-buttons a#instagram,
.social-media-buttons a#steam {
    transition: filter 0.3s ease; /* Lägger till en övergång på filter */
}

.social-media-buttons a#facebook:hover,
.social-media-buttons a#x:hover,
.social-media-buttons a#instagram:hover,
.social-media-buttons a#steam:hover {
    filter: brightness(0) invert(1); /* Gör ikonerna vita vid hover */
}

/* Media Queries */
@media (max-width: 768px) {
    #audio-toggle {
        display: none;
    }
}