/* ALL */
:root {
    /* --margin-y: 4.375rem; */
    --y: 70px;

    --margin-y: var(--y);
    --margin-y6: calc(var(--y) / 6);
    --margin-y4: calc(var(--y) / 4);
    --margin-y2: calc(var(--y) / 2);
    --margin-2y: calc(var(--y) * 2);
    --margin-3y: calc(var(--y) * 3);

    --width-4y: calc(var(--y) * 4);
    --width-8y: calc(var(--y) * 8);
    --width-12y: calc(var(--y) * 12);
    --width-16y: calc(var(--y) * 16);

    /* --padding-page: 2.5rem; */
    --padding-page: 30px;
}

/* MOBILE */
@media only screen and (max-width: 768px) {
    :root {
        /* --padding-page: 1.25rem; */
        --padding-page: 20px;
    }
}    

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    transition: 
        padding 0.5s;
}

html {
    /* prevent bounce on ios */
    overscroll-behavior: none;
}

body {
    font-family: 'Circular Std', sans-serif;
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
}


nav#page-slide-nav {
    z-index: 99999;
    position: relative;
}

nav#page-slide-nav .page-slide-nav-container {
    width: calc(50% - var(--width-4y));
    top: 0;
    bottom: 0;
    position: fixed;
    pointer-events: none;
}
nav#page-slide-nav .page-slide-nav-container#Left {
    left: 0;
}
nav#page-slide-nav .page-slide-nav-container#Right {
    right: 0;
    transform: scaleX(-1); /* flip container */
}

nav#page-slide-nav .page-slide-nav-container svg {
    width: 100%;
    height: 100%;
}
nav#page-slide-nav .page-slide-nav-container svg image {
    width: auto;
    height: 100vh;
    pointer-events: all;
}


nav#nav {
    position: fixed;
    z-index: 999999;

    width: 100%;
    padding-left: var(--padding-page);
    padding-right: var(--padding-page);
    padding-top: var(--padding-page);

    /* nav#nav hide / show on scroll */
    top: 0;
    transition: top 0.5s;
}
nav#nav > * {
    transition:
        width 0.5s,
        height 0.5s;
}
nav#nav ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
}
nav#nav .contents {
    justify-self: flex-start;
    height: 2.5rem;
}
nav#nav .HUWD {
    justify-self: center;
    height: 3rem;
}
nav#nav .account {
    justify-self: flex-end;
    height: 2.5rem;
}

nav#nav img {
    height: 100%;
}

@media only screen and (max-width: 768px) {
    nav#nav .contents {
        justify-self: flex-start;
        height: 1.6rem;
    }
    nav#nav .HUWD {
        justify-self: center;
        height: 2rem;
    }
    nav#nav .account {
        justify-self: flex-end;
        height: 1.6rem;
    }
}


:root {
    --circle-size: 300vh;
    --blending: hard-light;
}

header .gradient-container {
    position: absolute;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    width: 100%;
    height: 120%;
    top: 0;
    left: 0;
}

.gradient-container svg {
    display: none;
}

.gradients {
    width: 100%;
    height: 100%;
    filter: url(#goo) blur(40px);
    transform: translate(0, 0);
}

.gradients > * {
    position: absolute;
    mix-blend-mode: var(--blending);

    width: var(--circle-size);
    height: var(--circle-size);
    top: calc(var(--circle-size) / -2);
    left: calc(50% - (var(--circle-size) / 2));

    opacity: 1;
}



header .g1 {
    transform-origin: center center;
    animation: moveHorizontal 10s ease infinite;
}
header .g2 {
    transform-origin: calc(50% - 10rem);
    animation: moveInCircle 40s reverse infinite;
}
header .g3 {
    transform-origin: calc(50% + 5rem);
    animation: moveInCircle 10s linear infinite;
}

main {
    min-height: calc(100svh - 10rem);
}



p a,
p a:active {
    text-decoration: underline;
}
p a:hover {
    text-decoration: none;
}

/* Text scroll animations */
.text h2,
.text h3,
.text p,
article h2,
article h3,
article p,
article ul,
article figure,
form,
.advert,
.hidden {
    opacity: 0;
    transition: 
        opacity 1s,
        transform 1s;
}
.text h2.show,
.text h3.show,
.text p.show,
article h2.show,
article h3.show,
article p.show,
article ul.show,
article figure.show,
form.show,
.advert.show,
.hidden.show {
    opacity: 1;
    transform: translateY(0);
}
.up {
    transform: translateY(-5rem);
}
.down {
    transform: translateY(5rem);
}


a:has(+.pill) {
    display: block; /* prevents grid taking width of pill with display:inline on .pill */
}
.pill {
    outline: none;
    border: none;
    border-radius: 3rem;
    padding: 0.5rem 1.25rem;

    width: 100%;
    max-width: 100%;
    display: inline;
}
@media only screen and (max-width: 768px) {
    .pill {
        /* text overflow hack from style.css */
        inline-size: calc(100vw - (var(--padding-page)*2));
        overflow-x: scroll;
        /* hide scroll bar */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
    /* Chrome, safari, opera */
    .pill::-webkit-scrollbar {
        display: none;
    }
}



footer {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
    padding: var(--padding-page);
    padding-top: 6rem;

    position: relative;
    z-index: 10;
}

footer ul {
    display: grid;
    grid-template-columns: 1fr 3rem 1fr;
    align-items: center;
}
footer ul ol:first-of-type {
    justify-self: flex-start;
}
footer ul ol:last-of-type {
    justify-self: flex-end;
}

footer a:hover {
    text-decoration: underline;
}

footer img {
    height: 3rem;
}

@media screen and (max-width: 768px) {
    footer ul {
        grid-template-columns: 1fr 1fr;
        gap: var(--padding-page);
    }

    footer ul ol#center {
        grid-row: 1;
    }
    
    footer ul ol#left ,
    footer ul ol#right {
        grid-row: 2;
        align-self: start;
    }
}


/* Login form */
::placeholder {
    opacity: 0.3;
}

form input {
    font-size: inherit;
    line-height: inherit;
    outline: none;
    border: none;
    border-radius: 3rem;
    padding: 0.5rem 1.25rem;
    margin-bottom: var(--margin-y4);
    background-color: var(--color-sherbet);

    width: 100%;
    max-width: 100%;
    overflow-x: scroll;
}
form input:last-of-type {
    margin-bottom: var(--margin-y2);
}
form input::placeholder {
    color: var(--color-black);
}

form button[type=submit] {
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    text-transform: uppercase;
    /* Reset pill width */
    width: auto;
    padding-left: 1.25rem;
}
form button[type=submit]:hover {
    text-decoration: underline;
}



/* Site wide animations */

@keyframes gradientPulse {
   0% {
    transform: scale(1);
   } 
   50% {
    transform: scale(0.7);
   } 
   100% {
    transform: scale(1);
   } 
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}
@keyframes slideRight {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Gradient animations */
@keyframes moveInCircle {
   0% {
    transform: rotate(0deg);
   } 
   50% {
    transform: rotate(180deg);
   } 
   100% {
    transform: rotate(360deg);
   } 
}

@keyframes moveVertical {
   0% {
    transform: translateY(-50%);
   } 
   50% {
    transform: translateY(50%);
   } 
   100% {
    transform: translateY(-50%);
   } 
}

@keyframes moveHorizontal {
   0% {
    transform: translateX(-50%) translateY(-10%);
   } 
   50% {
    transform: translateX(50%) translateY(10%);
   } 
   100% {
    transform: translateX(-50%) translateY(-10%);
   } 
}