@import 'fonts/ruddy.css';
@import 'fonts/poppins.css';

:root {
    --color_red: #e32;
    --color_purple: #325;
    --color_beige: #eb6;
    --color_turq: #5dc;
    --color_dark: #113;
    --color_light: #eee;
    --font_body: Poppins, 'Open Sans', Helvetica, Arial, sans-serif;
    --font_display: Ruddy, Jokerman, 'Comic Sans', sans-serif;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font_display);
}

h1 {
    max-width: 35ch;
    margin-top: 0;
}

p, li {
    font-family: var(--font_body);
    max-width: 60ch;
}

:not(header, footer) a {
    color: inherit;
    text-decoration-color: var(--color_red);
    text-decoration-thickness: 3px;
    transition-duration: 250ms;
}

:not(header, footer) a:hover,
:not(header, footer) a:focus {
    text-decoration-color: var(--color_turq);
}

:not(header, footer) a:visited {
    text-decoration-color: var(--color_purple);
}

body {
    box-sizing: border-box;
    margin: 0;
    color: var(--color_dark);
}

header {
    position: -webkit-sticky;
    position: sticky;
    padding: 1rem;
    background-color: var(--color_purple);
    z-index: 10;
}

header nav {
    position: relative;
    display: flex;
    align-items: center;
    /* height: auto; */
    height: 2rem;
}

header > nav a {
    text-decoration: none;
}

header > nav > a#logo {
    display: block;
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -0.5rem;
    left: -0.5rem;
}

a#logo > img {
    width: 100%;
    height: auto;
}

header > nav > ul {
    display: flex;
    gap: 1.5rem;
    position: absolute;
    height: fit-content;
    right: 0;
    padding: 0.5rem 0;
    list-style-type: none;
}

header > nav > ul > li > a {
    display: inline-block;
    text-transform: uppercase;
    color: var(--color_light);
    font-weight: 600;
    letter-spacing: 0.1rem;
    transition-duration: 200ms;

    text-shadow: var(--a-x) var(--a-y) var(--color_beige),
    calc(var(--a-x) * 2) calc(var(--a-y) * 2) var(--color_turq);

    --a-x: 0px;
    --a-y: 0px;
    --angle: 3deg;
}

header > nav > ul > li > a:is(:hover, :focus) {
    --a-y: 4px;
    --a-x: 0px;
    transform: translate(calc(var(--a-x) * -2), calc(var(--a-y) * -2));
}

header nav ul li:nth-child(2) a {
    --angle: -1.5deg;
}

header nav ul li:nth-child(3) a {
    --angle: 1.5deg;
}

header nav ul li:nth-child(4) a {
    --angle: -3deg;
}

header > nav > ul#nav-main > li:has(a#hamburger-icon) {
    display: none;
}

header > nav > ul#nav-main > li > a#hamburger-icon {
    position: relative;
    height: 1rem;
    width: 1rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

    transform-origin: top;
    --angle: 0deg;
}

a#hamburger-icon:is(:hover, :focus) {
    /* clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%) !important; */
    transform: scale(1.2);
}

a#hamburger-icon.open {
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0 100%) !important;
}

a#hamburger-icon > div {
    position: absolute;
    height: 0.2rem;
    width: 100%;
    background-color: var(--color_light);
}

a#hamburger-icon > div:nth-child(1) {
    top: 0;
}

a#hamburger-icon > div:nth-child(2) {
    top: 0.4rem;
}

a#hamburger-icon > div:nth-child(3) {
    bottom: 0;
}

header > nav > ul#nav-hamburger {
    display: none;

    position: absolute;
    top: 100%;
    left: -1rem;
    right: -1rem;
    padding: 1rem 1.5rem;
    flex-direction: column;
    align-items: end;
    text-align: right;
    background-color: var(--color_purple);
    transition-duration: 400ms;

    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

header > nav:has(a#hamburger-icon.open) > ul#nav-hamburger {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

header > nav > ul#nav-hamburger > a:is(:hover, :focus) {
    padding-right: 1rem;
}

section {
    padding: calc(1.5rem + 3vw);
}

/*---------- HERO ----------*/

section#hero {
    display: flex;
    align-items: center;
    position: relative;
    height: 70vh;
    background:linear-gradient(to bottom,
    rgba(0, 0, 0, 0.5),
    transparent 15%),
     linear-gradient(to right,
    black,
    rgba(0, 0, 0, 0.5),
    transparent,
    transparent,
    transparent);
    background-size: cover;
    background-position-y: center;
}

#hero > article {
    position: relative;
    max-width: 60%;
    padding: 0;

    z-index: 0;
}

#hero > article::before {
    content: '';
    position: absolute;
    inset: -3rem;
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
    border-radius: 4rem;
    filter: blur(3rem);
    opacity: 0.75;

    z-index: -1;
}

#hero > article > h1 {
    font-size: calc(2rem + 2vw);
    color: var(--color_beige);
    text-shadow:
    4px 4px var(--color_red),
    0 0 64px rgba(0, 0, 0, 0.25);
}

#hero > article > p {
    font-size: 1.2rem;
    color: var(--color_light);
    text-shadow: 0 0 32px rgba(0, 0, 0, 0.5);
}

#hero > #hero-slideshow {
    --fallback-image: url(img/hero/pahki_hero_1.jpg);
    --x-position: 80%;

    position: absolute;
    inset: 0;
    background: var(--fallback-image);
    background-size: cover;
    background-position: var(--x-position) 75%;
    z-index: -3;
}

#hero-slideshow > div {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: right;
    animation-name: fade, move-x;
    animation-duration: calc(5000ms * 4), calc(5000ms * 4);
    animation-delay: calc(5000ms * var(--order)), calc(5000ms * var(--order));
    animation-iteration-count: infinite, infinite;
    animation-timing-function: linear, linear;

    z-index: calc(var(--order) * -1);
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    23% {
        opacity: 1;
    }
    27% {
        opacity: 0;
    }
    96% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes move-x {
    0% {
        background-position-x: var(--x-position);
    }
    27% {
        background-position-x: calc(100% - var(--x-position));
    }
    96% {
        background-position-x: var(--x-position);
    }
    100% {
        background-position-x: var(--x-position);
    }

}

/* ---------- SECTIONS AFTER HERO ---------- */

main > section:not(#hero) > h1 {
    font-size: calc(2rem + 1vw);
    color: var(--color_purple);
    text-shadow: 3px 3px var(--color_light);
}

/*---------- AJANKOHTAISTA ----------*/

main > section#ajankohtaista {
    background-color: var(--color_beige);
    color: var(--color_dark);
}

/* ---------- MIKÄ PAHKISPEKSI? ---------- */

main > section#mika-pahkispeksi {
    background-color: var(--color_dark);
}

main > section#mika-pahkispeksi > h1 {
    color: var(--color_beige);
    text-shadow: 3px 3px var(--color_red);
}

main > section#mika-pahkispeksi :is(h2, p, li) {
    color: var(--color_light);
}

/* ---------- TUOTANNOT ---------- */

main > section#tuotannot {
    background-color: var(--color_beige);
}

/*---------- FOOTER ----------*/

footer {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas:
    'socials sponsors'
    'credits sponsors';
    padding: 1.5rem;
    background-color: var(--color_purple);
    color: var(--color_light);
    font-weight: 500;
}

footer p {
    font-size: 0.75rem
}

footer > .socials {
    grid-area: socials;
}

footer > .socials > ul {
    list-style-type: none;
    padding-left: 0;
}

footer > .socials > ul > li > a {
    color: var(--color_light);
    text-decoration: none;
    font-size: 1.25rem;
    transition-duration: 250ms;
}

footer > .socials > ul > li > a > svg {
    fill: var(--color_light);
    height: 1.5rem;
    width: auto;
    margin-bottom: -0.3rem;
    transition-duration: 250ms;
}

footer > .socials > ul > li > a:is(:hover, :focus) {
    color: var(--color_beige);
}

footer > .socials > ul > li > a:is(:hover, :focus) > svg {
    fill: var(--color_beige);
}

footer > .sponsors {
    grid-area: sponsors;
    align-self: center;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

footer > .sponsors > ul {
    display: flex;
    flex-direction: column;
    box-sizing: content-box;
    width: 170px;
    list-style-type: none;
    padding: 2rem;
    background-color: white;
}

footer > .sponsors > ul img {
    max-width: 170px;
    height: auto;
}

footer > .credits {
    grid-area: credits;
}

/*---------- MEDIA QUERIES ----------*/

@media screen and (max-width: 850px) {
    header nav ul#nav-main li {
        display: none;
    }

    header nav ul#nav-main li:has(a#hamburger-icon) {
        display: list-item;
    }

    header nav ul#nav-hamburger {
        display: flex;
    }

    header nav ul#nav-hamburger li a:is(:hover, :focus) {
        --a-x: 2px;
        --a-y: 0px;
    }
}

@media screen and (max-width: 480px) {
    #hero > article {
        max-width: 80%;
    }

    #hero > article > h1 {
        font-size: calc(1.5rem + 2vw);
        margin-bottom: 2rem;
    }
    
    #hero > article > p {
        font-size: 1rem;
    }

    #hero > #hero-slideshow{
        --x-position: 75%;
    }

    footer > .sponsors > ul {
        width: 100px;
    }

    footer > .sponsors > ul img {
        max-width: 100px;
    }
}