@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');

/* ------------------------ SHARED ------------------------ */

:root {
    /* fonts */
    --font-serif: Palatino, 'Palatino Linotype', 'Book Antiqua', serif;     /* titles, boxes, buttons */
    --font-sans:  'Bricolage Grotesque', 'Helvetica Neue', Arial, Roboto, sans-serif; /* regular text */

    /* main page */
    --background: #FAFAFA;
    --text: #111;
    --box-border: rgba(0, 0, 0, 0.65);
    --glow: rgba(0, 0, 0, 0.25);
    --dot: rgba(0, 0, 0, 0.55);

    /* intro */
    --intro-background: #000;
    --intro-text: #fff;
    --intro-trail: rgba(213, 219, 255, 0.7);
    --intro-glow: rgba(255, 255, 255, 0.5);

    /* pages */
    --text-color: #1a1a1b;
    --home-text: var(--text);
    --home-border: var(--box-border);
    --home-glow: var(--glow);
    --title-top: clamp(8px, 4dvh, 40px); /* space between top of screen and topbar */
    --text-side: clamp(16px, 5vw, 32px); /* space between the sides of the screen and text */

    --text-lens-blur: 2.5px;  /* how blurred dots are behind text (same as LENS_BLUR in oval.js) */
    --text-fade: 16px;        /* how far text fades out at the top and bottom */
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text-color);
    font-family: var(--font-sans);
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100dvh;
    overflow: hidden;
}



/* ------------------------ INTRO ------------------------ */

/* intro animation */
#scene {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background: var(--intro-background);
    transition: background-color 900ms ease-in-out; /* same as TOPBAR_TIME in intro.js */
}
#scene.done {
    background-color: transparent;
}



/* ------------------------ HOME ------------------------ */

/* main page */
#home {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;

    /* draw when shown: boxes, then text */
    --box-draw: 800ms;
    --text-draw: 600ms;

    /* layout */
    --name-space: 80px;
    --box-font: clamp(14px, 1.6vw, 22px);
    --box-clear: calc(var(--box-font) * 2);
}

/* dots wandering background */
#dots {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* progress on a border being drawn */
@property --drawn {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* progress on text being written */
@property --written {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

/* scene moved by camera */
#world {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    padding-top: var(--name-space);
    display: grid;
    place-items: center;
    transform-origin: 0 0;
    transform: translate(0px, 0px) scale(1);
    will-change: transform;
}

/* ring of boxes */
.ring {
    --radius: min(24vw, 24vh, calc((100dvh - var(--name-space)) / 2 - var(--box-clear)));
    position: relative;
    width:  calc(var(--radius) * 2);
    height: calc(var(--radius) * 2);
}

/* each box */
.category {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0.9em 1.6em;
    border: 1px solid transparent;
    background: var(--background);
    color: var(--text);
    font: 200 var(--box-font) var(--font-serif);
    letter-spacing: 0.05em;
    white-space: nowrap;
    cursor: pointer;
    isolation: isolate;
    transition: box-shadow 300ms ease;
}
.category:hover,
.category:focus-visible {
    outline: none;
    box-shadow: 0 0 12px var(--glow);
}

/* border of box and background */
.category::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1px solid var(--box-border);
    mask: conic-gradient(#000 var(--drawn), transparent 0);
    transition: --drawn var(--box-draw) ease-in-out, border-color 300ms ease;
}
#home.shown .category::before {
    --drawn: 360deg;
}
.category:hover::before,
.category:focus-visible::before {
    border-color: var(--text);
}

/* text of box */
.category span {
    mask: linear-gradient(90deg, #000 calc(var(--written) - 10%), transparent var(--written));
    transition: --written var(--text-draw) ease-out calc(var(--box-draw) * 0.75);
}
#home.shown .category span {
    --written: 110%; /* past the end */
}



/* ------------------------ LIQUID ------------------------ */

.category.liquid::before,
.category.liquid span {
    visibility: hidden;
}
.category.liquid {
    box-shadow: none !important;
}

/* liquid shapes for subcategories */
#liquid-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* colors of liquid filter */
#liquid-filter .liquid-fill {
    flood-color: var(--background);
}

/* hover glow around subboxes */
#subbox-glow .glow-fill {
    flood-color: var(--glow);
}

/* clicked subbox grows to edges of screen */
.open-frame {
    position: fixed;
    z-index: 1002; /* over everything */
    box-sizing: border-box;
    display: grid;
    place-items: center;
    border: 1px solid var(--text);
    background: var(--background);
    color: var(--text);
    white-space: nowrap;
    pointer-events: none;
}
.open-label {
    position: relative;
}
.open-label-moving { /* moving to the page's title */
    position: fixed;
    transform: translate(-50%, -50%);
    line-height: 1.1; /* same as the page's title */
}
.open-label-bold {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 700;
    opacity: 0;
}

/* lens: blur stuff behind it */
#lens {
    position: absolute;
    inset: 0;
    z-index: 5; /* over scene, under name */
    pointer-events: none;
}
/* same blur over the intro */
#intro-lens-blur {
    position: fixed;
    inset: 0;
    z-index: 1001; /* over the intro */
    pointer-events: none;
}
#lens div,
#intro-lens-blur div {
    position: absolute;
    inset: 0;
    -webkit-backdrop-filter: blur(var(--blur));
            backdrop-filter: blur(var(--blur));
    -webkit-mask: radial-gradient(ellipse var(--lens-width) var(--lens-height) at 50% 50%, transparent var(--start), #000 calc(var(--start) + 8%));
            mask: radial-gradient(ellipse var(--lens-width) var(--lens-height) at 50% 50%, transparent var(--start), #000 calc(var(--start) + 8%));
}

#name {
    position: absolute;
    z-index: 10;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
}
/* underline under the name */
#name::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--underline-top, calc(100% + 6px));
    height: 1px;
    background: var(--box-border);
    -webkit-mask: var(--underline-skips, none);
            mask: var(--underline-skips, none);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 400ms ease;
}
#name:focus-visible {
    outline: none;
}
#name:hover::after,
#name:focus-visible::after {
    clip-path: inset(0 0 0 0);
}

/* replay intro button */
#replay {
    position: fixed;
    left: clamp(12px, 3vw, 28px);
    top: 20px;
    z-index: 10;
    padding: 6px;
    border: 0;
    background: none;
    color: rgba(0, 0, 0, 0.5);
    font: 20px / 1 var(--font-serif);
    cursor: pointer;
}
#replay:hover,
#replay:focus-visible {
    outline: none;
    color: var(--text);
}



/* ------------------------ FOR PAGES ------------------------ */

/* dots wandering behind the whole page */
body > #dots {
    position: fixed;
    z-index: -1;
}

/* blur toward screen's edges */
body > #lens {
    position: fixed;
}

/* topbar */
.topbar {
    position: relative;
    z-index: 10; /* over lens blur */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    margin-top: var(--title-top);
    flex-shrink: 0;
}
.topbar-title {
    grid-column: 2;
    margin: 0;
    font: 700 clamp(1.5rem, 5vw, 2.2rem) / 1.1 var(--font-serif);
    letter-spacing: normal;
    text-align: center;
}

/* back button */
@property --drift-phase { /* how far it goes in one drift loop */
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
@property --drift { /* how far it drifts */
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@property --wind-up { /* how far right it goes before launching left */
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}
@keyframes back-drift {
    to { --drift-phase: 1; }
}
.back-button {
    display: block;
    width: fit-content;
    margin-left: clamp(8px, 3vw, 28px);
    padding: 0.5em 0.4em;
    font-size: clamp(15px, 4.2vw, 20px);

    /* drifts in a figure eight like the subboxes, only when --drift isn't 0 */
    translate:
        calc(var(--wind-up) + sin(var(--drift-phase) * 1turn) * var(--drift))
        calc(sin(var(--drift-phase) * 2turn) * var(--drift) / 2);
    animation: back-drift 3800ms linear infinite; /* same as SUSPEND_PERIOD in blob.js */

    transition: --drift 400ms ease, --wind-up 300ms ease;
}
/* pull back and drift */
.back-button:hover,
.back-button:focus-visible {
    outline: none;
    --drift: 1.5px;
    --wind-up: 4px;
}
/* launch left when clicked */
.back-button.launching {
    --drift: 0px;
    --wind-up: -60px;
    opacity: 0;
    transition: --drift 250ms ease, --wind-up 250ms cubic-bezier(0.5, 0, 1, 0.5), opacity 150ms ease-in 100ms; /* same as LAUNCH_TIME in back.js */
}

/* arrow */
.back-button::before {
    content: "";
    display: block;
    width: 1.6em;
    height: 1.6em;
    background: var(--home-text);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* text */
.text {
    position: relative;
    z-index: 10; /* over lens blur */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: clamp(24px, 6dvh, 64px); /* space between title and text */
    padding-bottom: calc(var(--text-fade) + 15dvh); /* scroll a little past the end */

    /* fades out at the top and bottom */
    -webkit-mask: linear-gradient(transparent, #000 var(--text-fade), #000 calc(100% - var(--text-fade)), transparent);
            mask: linear-gradient(transparent, #000 var(--text-fade), #000 calc(100% - var(--text-fade)), transparent);
}

.text p {
    box-sizing: border-box;
    width: 100%;
    max-width: 680px;
    padding: 0 var(--text-side);
}

/* blur dots behind text */
.text,
.topbar-title {
    -webkit-backdrop-filter: blur(var(--text-lens-blur));
            backdrop-filter: blur(var(--text-lens-blur));
}

/* links in text: draw underline on hover */
.text p a {
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    transition: background-size 400ms ease;
}
.text p a:visited {
    color: LinkText; /* not purple on visited */
}
.text p a:hover,
.text p a:focus-visible {
    outline: none;
    background-size: 100% 1px;
}