/*import fonts Diatype Mono & Altera Serif*/

@font-face {
    font-family: "Diatype Semi Mono";
    src: url("fonts/ABCDiatypeSemi-Mono-Regular-Trial.woff2") format("woff2"),
        url("fonts/ABCDiatypeSemi-Mono-Regular-Trial.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Diatype Semi Mono Italic";
    src: url("fonts/ABCDiatypeSemi-Mono-RegularItalic-Trial.woff2") format("woff2"),
        url("fonts/ABCDiatypeSemi-Mono-RegularItalic-Trial.woff") format("woff");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Diatype Semi Mono Medium";
    src: url("fonts/ABCDiatypeSemi-Mono-Medium-Trial.woff2") format("woff2"),
        url("fonts/ABCDiatypeSemi-Mono-Medium-Trial.woff") format("woff");
    font-weight: bold;
}

@font-face {
    font-family: "Diatype Mono";
    src: url("fonts/ABCDiatypeMonoVariable-Trial.woff2") format("woff2"),
        url("fonts/ABCDiatypeMonoVariable-Trial.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Altera Serif";
    src: url("fonts/PPAlteraSerif-Light.woff2") format("woff2"),
        url("fonts/PPAlteraSerif-Light.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

/*global reset*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
}

/*fix up for older browsers to draw the new semantic elements*/
header,
nav,
main,
aside,
article,
section,
footer,
figure,
figcaption {
    display: block;
}

/*all images to shrink if necessary to fit*/
img {
    max-width: 100%;
    height: auto;
}

/*basic text styling*/
/*PAGE TRANSITION: moving between index.html and main.html dissolves from
one page into the next instead of cutting (supported in current Chrome and
Safari - other browsers just switch pages as normal). change the fade's
length with animation-duration below*/
@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.8s;
}

html {
    /*0 = night, 1 = afternoon - set by script.js's updateDaylight() as the
    house section scrolls past. #sky-bg fades in with it, and text colours
    mix toward these darker inks so they stay readable on the light sky*/
    --daylight: 0;
    --day-ink: #001178;
    --day-title: #0031B8;
    --day-stamp: #1A2399;
    --day-bright: #003bde;
    background-color: #000000;
    color: color-mix(in srgb, #D0F0FF, var(--day-ink) calc(var(--daylight) * 100%));
    font-size: 12px;
    font-family: "Diatype Semi Mono", Courier, monospace;
    /*smooth scroll behaviour*/
    scroll-behavior: smooth;
}

body {
    cursor: url('img/cursor.png'), auto;
}

p,
li,
td {
    font-size: 1.4rem;
    padding: 0.8rem 0;
    list-style: none;
    font-weight: normal;
}

h1,
h2,
h3,
h4 {
    line-height: 1;
    font-weight: bold;
}

/*big title*/
h1 {
    font-size: 3.8rem;
    font-family: "Altera Serif", Times New Roman, serif;
    padding: 3vw 0;
    color: color-mix(in srgb, #25FFDE, var(--day-title) calc(var(--daylight) * 100%));
    text-align: center;
    text-transform: lowercase;
    /* letter-spacing: 0.05em; */
}

/*used for timestamps*/
h2 {
    font-size: 0.95rem;
    color: color-mix(in srgb, #9295e5, var(--day-stamp) calc(var(--daylight) * 100%));
    padding: 0 0 0 0;
    line-height: 1.3;
    text-transform: uppercase;
}

/*subheading, used for system messages subtext*/
h3 {
    color: color-mix(in srgb, #ACF2E8, var(--day-ink) calc(var(--daylight) * 100%));
    font-family: "Diatype Mono", Courier, monospace;
    font-size: 1.4rem;
    text-transform: uppercase;
    margin: 2rem 0 2rem 0;
    letter-spacing: 0.04em;
}

/*subheading 2, used for system messages main text*/
h4 {
    font-family: "Altera Serif", Times New Roman, serif;
    font-size: 2.2rem;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    padding: 0 0 2rem 0;
    color: color-mix(in srgb, #25FFDE, var(--day-ink) calc(var(--daylight) * 100%));
    line-height: 1.2;
}

h5 {
    font-family: "Diatype Semi Mono", Courier, monospace;
    color: color-mix(in srgb, #ACF2E8, var(--day-ink) calc(var(--daylight) * 100%));
    font-size: 1.1rem;
    text-transform: uppercase;
}

/*body text*/
p {
    font-size: 1.6rem;
}

#wrapper p {
    color: color-mix(in srgb, #FFC020, var(--day-ink) calc(var(--daylight) * 100%));
}

.narr-center {
    text-align: center;
    padding: 10rem 0 10rem 0;
}

.caption p {
    text-align: right;
    font-size: 1.0208em;
    text-transform: uppercase;
}

.footnote {
    font-size: 0.8958em;
    text-transform: lowercase;
}

.footnote li {
    text-align: left;
    text-transform: none;
    padding-left: 5vw;
}

.indent {
    padding-left: 5vw;
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
    font-family: "Diatype Semi Mono Italic", Courier, monospace;
}

/*styling for blue text*/
.systemteal {
    color: #25FFDE;
    transition-property: all;
    transition-duration: 0.8s;
}

.yellow {
    color: #FFC020;
    transition-property: all;
    transition-duration: 0.8s;
}

/*---------------------------------------------------------*/
/*---------------------- IMAGE STYLING --------------------*/
/*---------------------------------------------------------*/
/*---------------- IMAGE WHEEL  1 index) ----------------*/
/*#one-a-index's height is set by script.js from the number of images -
that extra height is the scroll room used to turn the wheel*/

/*pins to the screen while the section scrolls past; stretches left past
#wrapper's 2vw padding so the wheel runs off the true screen edge*/
.wheel-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    margin-left: -2vw;
    width: calc(100% + 2vw);
    overflow: hidden;
}

.wheel {
    /*image size on the wheel - change these to resize every image*/
    --wheel-item-width: 8vw;
    --wheel-item-height: auto;
    position: absolute;
    inset: 0;
    /*hidden while its photos load and the wheel lays itself out, then
    faded in once they're all in (script.js adds .is-ready) - so you never
    see it assembling itself*/
    opacity: 0;
    transition: opacity 1.2s ease;
}

.wheel-index.is-ready .wheel {
    opacity: 1;
}

/*image size for the 12 o'clock (house) wheel only*/
.wheel-index[data-focus="top"] .wheel {
    --wheel-item-width: 6vw;
}


/*each image is placed and rotated by script.js; it pivots from its
inner (left-centre) edge so it points outward like a spoke*/
.wheel img {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--wheel-item-width);
    height: var(--wheel-item-height);
    max-width: none;
    object-fit: cover;
    transform-origin: 0 50%;
    will-change: transform, opacity;
}

/*12 o'clock wheel (data-focus="top"): stage bleeds past both sides of
#wrapper's padding so the wheel is centred on the true screen, and each
image pivots from its bottom-centre so it stands upright at the top*/
.wheel-index[data-focus="top"] {
    /*how much of the screen the wheel takes up - change this to resize it.
    the stage is held still for the whole turn: the wheel fills this much
    at the bottom of the screen, #three-i-mothnarr3 the rest at the top*/
    --top-wheel-height: 70vh;
    /*where the stage is held, just clear of the fixed nav bar - the text at
    its top edge then reads straight on from the paragraph above with no
    gap, and stays readable once held (below about 11vh it slides under the nav)*/
    --moth-text-top: 1vh;
}

/*runs from just under the nav to the true bottom of the screen*/
.wheel-index[data-focus="top"] .wheel-stage {
    margin-right: -2vw;
    width: calc(100% + 4vw);
    top: var(--moth-text-top);
    height: calc(100vh - var(--moth-text-top));
}

/*the wheel only fills the bottom of the stage - script.js lays the images
out inside this box. it doesn't clip, so the images run off the true
bottom of the screen rather than stopping at a hard edge*/
.wheel-index[data-focus="top"] .wheel {
    top: auto;
    height: var(--top-wheel-height);
}

/*the text above the wheel. it repeats #wrapper's 8-column grid (the stage
spans the full screen, so 2vw padding brings the columns back in line) and
sits at the top edge of the stage, so it reads straight on from the
paragraphs above it in the same column*/
.wheel-index[data-focus="top"] #three-i-mothnarr3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(100% - var(--top-wheel-height));
    box-sizing: border-box;
    padding: 0 2vw;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    align-content: start;
}

/*same column as #three-i-mothnarr2*/
.wheel-index[data-focus="top"] #three-i-mothnarr3 p {
    grid-column: 4/6;
}

.wheel-index[data-focus="top"] .wheel img {
    transform-origin: 50% 100%;
}

/*faint year under the 12 o'clock image - an h2, so its font, size and
colour match the timestamps. script.js sets its text, its top (the base
of that image) and its opacity, which dips between clusters*/
.wheel-label {
    position: absolute;
    left: 0;
    right: 0;
    margin: 6rem 0 0 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.1rem;
    opacity: 0;
    z-index: 101;
    pointer-events: none;
}

/*link styling*/
a:link {
    color: color-mix(in srgb, #8692FF, var(--day-stamp) calc(var(--daylight) * 100%));
    text-decoration: none;
    cursor: url('img/cursor-teal.png'), pointer;
    transition-property: all;
    transition-duration: 0.8s;
}

/*default styling - same colour as default unclicked link*/
a:visited {
    color: #777dff;
}

a:hover {
    color: color-mix(in srgb, #25FFDE, var(--day-bright) calc(var(--daylight) * 100%));
    transition-property: all;
    transition-duration: 0.8s;
    font-weight: bold;
}

/*-------------------------------------------------------------------*/
/*------------------------ NAV BAR STYLING --------------------------*/
/*-------------------------------------------------------------------*/


nav {
    /*variables so nav text size/colour can be tweaked in one place*/
    font-family: "Diatype Mono", Courier, monospace;
    --nav-font-size: 1.05rem;
    --nav-color: color-mix(in srgb, #8692FF, var(--day-ink) calc(var(--daylight) * 100%));
    /*the chapter you're currently in (set by script.js's updateActiveChapter)*/
    /* --nav-active-color: #39ffb6;  */
    --nav-active-color: color-mix(in srgb, #ACF2E8, var(--day-bright) calc(var(--daylight) * 100%));
    /*how long nav text takes to fade between colours, on hover and as the
    active chapter changes*/
    --nav-fade: 0.8s;
    position: fixed;
    display: inline-grid;
    width: 100vw;
    width: clamp(40rem, 100vw, 200rem);
    margin: auto;
    padding: 4vh 2vw;
    justify-content: left;
    /*11 columns to match the rest of the site's grid (#wrapper)*/
    grid-template-columns: repeat(11, 1fr);
    grid-template-rows: auto;
    z-index: 20;
    grid-row-gap: 0.5rem;
}

.nav-item {
    display: flex;
    /*push the text to the right edge of its column box*/
    justify-content: flex-start;
    list-style: none;
    line-height: 1;
    text-transform: uppercase;
    font-weight: bold;
}

/*target the nav bar text specifically*/
.nav-item a {
    font-size: var(--nav-font-size);
    color: var(--nav-color);
    transition: color var(--nav-fade) ease;
    cursor: url('img/cursor-teal.png'), pointer;
}

/*active chapter marker - before :hover, so hovering it still shows the
hover colour*/
.nav-item a.is-active {
    color: var(--nav-active-color);
    cursor: url('img/cursor.png'), pointer;
    /* text-decoration: underline; */
}

.nav-item a:hover {
    --nav-color: color-mix(in srgb, #FFC020, var(--day-bright) calc(var(--daylight) * 100%));
}

.home-button {
    background-color: #2C21FF;
    border-radius: 50%;
    border: none;
    padding: 0.6rem;
    margin-top: 0;
    display: inline-block;
    /* margin: 4px 2px; */
    /*on the button itself, not just :hover, so it eases back smoothly when
    the cursor leaves as well as when it arrives*/
    transition: transform 0.8s ease, background-color 0.8s ease;
}

/*on the page it links to (index.html marks it aria-current="page"), it
takes the same colour as the active chapter's nav text - before :hover,
so hovering it still shows the hover colour*/
.home-button[aria-current="page"] {
    background-color: var(--nav-active-color);
}

.home-button:hover {
    background-color: color-mix(in srgb, #FFC020, var(--day-ink) calc(var(--daylight) * 100%));
    transform: scale(2);
    cursor: url('img/cursor-teal.png'), pointer;
}

/* FOR THE NAV ITEM, EACH NAV IS ALIGNED TO A 9-COL GRID */
/*home button: a flex box like the .nav-item links, with the circle centred
on the height of their line of text - as a plain block, the inline-block
circle sat on the text baseline like a letter, a little below the words*/
#part0 {
    /*shares #part1's columns, sitting at the start of them*/
    grid-column: 1/4;
    grid-row: 1/2;
    justify-self: start;
    display: flex;
    align-items: center;
    /*above #part1's box, which overlaps it - keeps the button clickable*/
    position: relative;
    z-index: 1;
}

/*"An Index of Memory": same columns as the home button, its text starting
just after it - the button's width (twice its 0.6rem padding) plus
--home-gap. still its own separate link*/
#part1 {
    --home-gap: 2rem;
    grid-column: 1/4;
    grid-row: 1/2;
    padding-left: calc(1.2rem + var(--home-gap));
}

/* I. AT THE BEACH */
#part2 {
    grid-column: 2/5;
    grid-row: 3/4;
}

/* II. THEN THE HOUSE */
#part3 {
    grid-column: 6/8;
    grid-row: 3/4;
}

/* III. THE WEIGHT? */
#part4 {
    grid-column: 11/12;
    grid-row: 3/4;
}

/*scroll progress bar: sits in the grid row right under the nav text,
and bleeds past nav's own left/right padding so it reaches the true screen edges*/
#progress-track {
    grid-column: 1/12;
    grid-row: 2/3;
    margin: 0 0 0.3rem 0;
    height: 1px;
}

/*width is set by JS as the page is scrolled - starts at 5px*/
#progress-fill {
    width: 5px;
    height: 1px;
    background-color: #2C21FF;
}

/*mute toggle for #bg-audio - small corner button, out of the nav grid so
it stays put regardless of that grid's own column tuning*/
/*everywhere except where it's styled as a .next-button (index.html), where
it takes that look instead and sits in the page*/
#audio-toggle:not(.next-button) {
    position: fixed;
    /* CHANGE THIS FOR SPACING FROM THE BOTTOM OF BOTH THE TIMESTAMPS & AUDIO TOGGLE */
    bottom: 45vh;
    right: 2vw;
    z-index: 20;
    background: none;
    border: none;
    font-family: "Diatype Semi Mono", Courier, monospace;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: color-mix(in srgb, #9295E5, var(--day-ink) calc(var(--daylight) * 100%));
    /* cursor: pointer; */
    cursor: url('img/cursor-teal.png'), pointer;
    padding: 0;
}

/*hovers yellow at night and --day-bright by day (wherever --daylight is up:
the daytime sky on index/credits, the afternoon in the house chapter), the
same as the other links*/
#audio-toggle:hover,
#audio-toggle:focus-visible {
    color: color-mix(in srgb, #FFC020, var(--day-bright) calc(var(--daylight) * 100%));
    transition-property: all;
    transition-duration: 0.8s;
}

/*timestamp text boxes: plain left-aligned text, all sharing the same
margin-left so every stamp sits at the same x position on the page -
vertical/column placement for each one is set by its own #stamp-* rule*/
.sticky-stamp {
    text-align: left;
    margin-left: 0;
}

/*sticky-release (see setupStickyStamps in script.js): each stamp's box is
made tall enough to reach the next stamp, and its lines stick inside it -
the browser holds them still and pushes them off when the box runs out.
kept above everything it scrolls over - chapter covers, videos, and the
house wheel's images, which go up to z-index 100*/
#wrapper .sticky-stamp {
    position: relative;
    z-index: 200;
    /*the tall box covers a long strip of the page's left columns - let
    clicks and hovers (e.g. the memory photos) pass through it*/
    pointer-events: none;
}

/*held in the bottom-left corner, level with the SOUND toggle - script.js
(updateStickyStamps) sets the exact top for each stamp*/
.stamp-lines {
    position: sticky;
}

/*-------------------------------------------------------------------*/
/*----------------------- LAYOUT STYLING ----------------------------*/
/*-------------------------------------------------------------------*/

/*overall div styling for vid & text overlay*/
#vid-container {
    /*create grid spanning viewport width & height at 1 row/column making it full height*/
    display: grid;
    grid-template-rows: 100vh;
    /*    overflow: hidden;*/
}

/*video background styling*/
.video-bg {
    /*grid area values are row-start / column-start / row-end / column-end*/
    /*grid-area: 1 / 1 / -1 / -1*/
    /*negative value means count position from end edge back*/
    grid-area: 1 / 1 / 2 / 2;
    /*resize video to cover full screen while mainting aspect ratio*/
    min-width: 100vw;
    min-height: 100vh;
    object-fit: cover;
    /*display video bg behind overlay; z-index is front to back stacking order*/
    z-index: -1;
    opacity: 0.9;
    position: fixed;
    transition: opacity 0.6s ease;
}

/*index.html's beach video, kept faint so the time-of-day sky shows through*/
#prologue-bg {
    opacity: 0.2;
}

/*fades out the ambient background video past part 1 - class is toggled by
script.js's updateVideoBgVisibility() once scroll passes #one-c-startfamiliar*/
body.video-bg-hidden .video-bg {
    opacity: 0;
}

/*div styling for element overlay on top of the video*/
.video-overlay {
    grid-area: 1 / 1 / 2 / 2;
    display: grid;
    /*center content*/
    justify-content: center;
}

.video-full {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
    /*breaks out to true edge-to-edge width regardless of the parent's
    own padding/offset - self-correcting, unlike a guessed negative margin*/
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/*contained video - scales to fit its own grid column, keeping its
natural aspect ratio (no breakout, no cropping)*/
.video-contained {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/*hide error message to view on a wider screen by default*/
#wider-screen {
    display: none;
}

/*prologue intro wrapper*/
#prologue {
    width: 75vw;
    /*clamp sets min width, ideal width & max width*/
    width: clamp(40rem, 75vw, 140rem);
    margin: auto;
    /*top right bottom left*/
    padding: 5rem 30vw 0 10vw;
    /*grid structure: 2 equal columns & auto rows*/
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    /*align text to left & bottom of container*/
    text-align: left;
}

#onboarding {
    width: 50vw;
    /*clamp sets min width, ideal width & max width*/
    width: clamp(40rem, 50vw, 140rem);
    padding-top: 6vh;
    margin: auto;
    /*grid structure: 2 equal columns & auto rows*/
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    text-align: center;
}

/*-------- TIME-OF-DAY SKY (index.html, see setupTimeSky in script.js) --------*/
/*soft, blurred colours that slowly drift - the gradient is 4x the size of
the screen and its position eases back and forth. the layers overhang the
screen so the blur's soft edges stay out of sight*/
#time-sky {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
}

.time-sky-layer {
    position: absolute;
    inset: -10%;
    background-size: 400% 400%;
    /*how long one drift there and back takes*/
    animation: sky-drift 15s ease infinite;
    filter: blur(40px);
    opacity: 0;
}

/*how long a new sky takes to fade in when the time of day changes while the
page is open - only once the first sky is up (.sky-ready, see setupTimeSky),
so the page opens with its sky already there instead of fading up from black*/
html.sky-ready .time-sky-layer {
    transition: opacity 3s ease;
}

.time-sky-layer.is-shown {
    opacity: 0.9;
}

@keyframes sky-drift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/*index.html's text follows the sky. by day (dawn to dusk) script.js sets
--daylight to 1, so the title and paragraph take the same daylight inks as
the house chapter on main.html, and adds .sky-day to <html>, which turns
the buttons to that ink too. evening and night keep the original colours:
teal title and Start, light purple SOUND toggle*/
html.sky-day #onboarding .next-button,
html.sky-day #onboarding #audio-toggle.next-button {
    color: var(--day-ink);
}

/*DAYTIME BUTTON HOVER (dawn to dusk) - yellow can't be read on the light
sky, so by day the buttons hover to --day-bright (set at the top of this
file, in html) instead. at night they still hover yellow*/
html.sky-day #onboarding .next-button:hover,
html.sky-day #onboarding .next-button:focus-visible,
html.sky-day #onboarding #audio-toggle.next-button:hover,
html.sky-day #onboarding #audio-toggle.next-button:focus-visible {
    color: var(--day-bright);
}

/*the text fades between day and night colours when the time of day changes
while the page is open (not on opening - it starts in the right colour);
the buttons keep their quicker hover fade*/
html.sky-ready #onboarding h3,
html.sky-ready #onboarding p {
    transition: color 2s ease;
}

#onboard-title {
    padding-bottom: 10vh;
}

/*-------- INTRO (index.html, every load - see setupIntro in script.js) --------*/
/*opening: only the title, in the middle of the screen, over the sky and
beach video (which are there from the start)*/
html.intro-playing #onboard-title {
    transform: translateY(var(--intro-shift, 0));
    opacity: 0;
}

html.intro-playing.intro-title-shown #onboard-title {
    opacity: 1;
    transition: opacity 1s ease;
}

html.intro-playing #onboard-body {
    opacity: 0;
}

/*the hidden buttons can't be clicked until they've appeared*/
html.intro-playing #onboard-body {
    pointer-events: none;
}

/*into the full page: the title glides up as the text and buttons fade in a
moment behind it - the last to finish (0.6s delay + 1.6s = 2.2s) is kept in
step with INTRO_ENTER_MS in script.js*/
html.intro-ending #onboard-title {
    transition: transform 1.8s cubic-bezier(0.45, 0, 0.2, 1);
}

html.intro-ending #onboard-body {
    transition: opacity 1.6s ease 0.6s;
}

#onboarding p {
    font-size: 2.4rem;
}

#wrapper {
    display: inline-grid;
    width: 100vw;
    width: clamp(40rem, 100vw, 200rem);
    margin: auto;
    padding: 4vh 2vw;
    align-content: left;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: auto;
}

.blackout {
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    /*breaks out to true edge-to-edge width regardless of the parent's
    own padding/offset - self-correcting, unlike a guessed negative margin*/
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/*afternoon sky, fixed behind everything (below the page's z-index:-1
videos) and invisible until updateDaylight() fades it in over the black
html background - deeper blue at the top, paler toward the horizon*/
#sky-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: linear-gradient(to bottom, #7DB4E3 0%, #D6EAF8 100%);
    opacity: var(--sky-day, 0);
    pointer-events: none;
}

/*sunset glow for the middle of the night-to-afternoon change - deep reds
at the top warming to orange and a soft yellow at the horizon. it comes
after #sky-bg in the markup, so it sits over it; updateDaylight() fades it
in and back out again, strongest halfway (SUNSET_STRENGTH in script.js)*/
#sunset-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: linear-gradient(to bottom, #664000 0%, #c08621 50%, #fbeb90 100%);
    opacity: var(--sunset, 0);
    pointer-events: none;
}

/*deep blue night sky, laid over the afternoon one and faded in by
updateDaylight() as the wheel reaches the image marked data-nightfall -
a little lighter than the page's original black*/
#night-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-color: #000000;
    opacity: var(--nightfall, 0);
    pointer-events: none;
}

/*house video, fixed behind the page over the night sky from nightfall in the
house wheel to #theweight - updateHouseBgVideo() in script.js sets its
opacity from the scroll position (HOUSE_BG_OPACITY sets how strong)*/
#house-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -2;
    opacity: 0;
    pointer-events: none;
}

/*BUTTONS: the one look for everything clickable that moves the story on -
Next on index.html (a link) and IT'S LIKE... on main.html (a button).
where each one sits is set separately (#prologue-next, .unlock-button).
:link and :visited are listed so this beats the general a:link colour*/
.next-button,
.next-button:link,
.next-button:visited {
    display: inline-block;
    padding: 2rem 0;
    /*clears the browser's default button look*/
    background: none;
    border: none;
    font-family: "Diatype Mono", Courier, monospace;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #25FFDE;
    /* cursor: pointer; */
    cursor: url('img/cursor-teal.png'), pointer;
    transition: color 0.8s;
}

.next-button:hover,
.next-button:focus-visible,
.next-button.is-pressed {
    color: #FFC020;
}

/*the prologue's Next sits fixed on screen*/
#prologue-next {
    position: fixed;
    padding-top: 5rem;
    text-align: center;
}

/*index.html's sound toggle: on its own line, centred above Start, Start's
size but the toggle's usual light purple so it reads as a setting rather
than the way on - still yellow on hover*/
#onboarding-start #audio-toggle {
    display: block;
    font-family: "Diatype Semi Mono", Courier, monospace;
    margin: 0 auto;
    color: #9295E5;
    font-size: 1.1rem;
}

#onboarding-start #audio-toggle:hover,
#onboarding-start #audio-toggle:focus-visible {
    color: #FFC020;
}

#onboarding-start {
    padding-top: 4vh;
    text-align: center;
}

.system-box {
    /* border: color-mix(in srgb, #21DAFF, var(--day-ink) calc(var(--daylight) * 100%)) 1px solid; */
    width: fit-content;
    /*centers the box horizontally within its full-width parent*/
    margin: 0 auto;
    padding: 10px 40px 10px 40px;
    /* background-color: #0000A1; */
    text-align: center;
}

/*system box whose text morphs into a chapter title: while it's stuck on
screen it has to paint above the chapter cover scrolling up beneath it*/
.system-box:has(.morph-text) {
    position: relative;
    z-index: 3;
}

/*the words that morph - inline-block so script.js can scale them*/
.morph-text {
    display: inline-block;
    position: relative;
    white-space: nowrap;
    font-family: "Altera Serif", Times New Roman, serif;

}

/*the title's [ ] brackets, faded in by script.js during the morph -
positioned outside the words so they don't widen the box while hidden*/
.morph-text::before,
.morph-text::after {
    position: absolute;
    top: 0;
    opacity: var(--morph-brackets, 0);
}

.morph-text::before {
    content: "[\00a0";
    right: 100%;
}

.morph-text::after {
    content: "\00a0]";
    left: 100%;
}

main {}

footer {}

/*-----------------------------------------------------------*/
/*------------ STYLING FOR MAIN PAGE SECTIONS ---------------*/
/*-----------------------------------------------------------*/

/*section 1 heading - left column, one row below the wheel/intro row,
so it sits directly under the wheel on the left edge of the page*/
#stamp-one {
    grid-column: 1/3;
    grid-row: 3/4;
    /* background-color: green; */
    margin-bottom: 5rem;
}

#anindexofmemory {
    grid-column: 1/6;
    grid-row: 2/3;
}

#one-b-intro {
    /* background-color: red; */
    grid-column: 6/9;
    grid-row: 2/4;
    /*bottom-align the paragraph within this (taller) grid cell*/
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-top: 10rem;
}

#one-c-startfamiliar {
    grid-column: 1/9;
    grid-row: 4/5;
    text-align: center;
    margin: 30rem 0 10rem 0;
    /* background-color: #00a136; */
}

/*backdrop/stacking/title overlay all come from .chapter-cover*/
#atthebeach {
    grid-column: 1/9;
    grid-row: 5/6;
}

/*stamp-two: same left column as #stamp-one, sharing #one-d-narr's row*/
#stamp-two {
    grid-column: 1/3;
    grid-row: 6/7;
    z-index: 2;
    padding-top: 4rem;
}

#one-d-narr {
    grid-column: 1/9;
    grid-row: 6/7;
    text-align: center;
    margin: 5rem 0 10rem 0;
}

#one-e-beach-img1 {
    grid-column: 3/4;
    grid-row: 7/8;
    /* padding-top: 10rem; */
}

#one-e-beach-narr1 {
    grid-column: 5/8;
    grid-row: 7/8;
    padding: 8rem 0 8rem 0;
}

#one-f-beach-img1 {
    grid-column: 5/7;
    grid-row: 8/9;
}

#one-f-beach-img2 {
    grid-column: 7/9;
    grid-row: 8/9;
}

#stamp-three {
    grid-column: 1/3;
    grid-row: 9/10;
    z-index: 2;
    padding-top: 4rem;
}

#one-g-beach-narr {
    grid-column: 6/8;
    grid-row: 9/10;
    padding: 6rem 0 6rem 0;
}

#one-h-beach-clip1 {
    grid-column: 1/5;
    grid-row: 10/11;
}

#one-h-beach-clip2 {
    grid-column: 5/9;
    grid-row: 10/11;
}

#one-i-beach-corrupt {
    grid-column: 1/9;
    grid-row: 11/12;
}

#one-j-beach-narr {
    grid-column: 3/7;
    grid-row: 12/13;
}

#one-k-beach-narr {
    grid-column: 2/8;
    grid-row: 13/14;
}

#one-l-sandbox {
    grid-column: 1/9;
    grid-row: 14/15;
    text-align: center;
    margin: 0 0 10rem 0;
}

/*sand gallery: one box across the page holding all 16 photos, 4 across
(2 across on screens under 800px - see the media query at the end)*/
#one-m-sand-img {
    grid-column: 1/9;
    grid-row: 15/16;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

/*block, not the default inline - an inline image leaves a few px under
itself for letter descenders, which showed as a black line between rows*/
#one-m-sand-img img {
    display: block;
    width: 100%;
}

#stamp-four {
    grid-column: 1/3;
    grid-row: 16/17;
    z-index: 2;
    padding-top: 4rem;
}

#one-n-sand-narr {
    grid-column: 2/8;
    grid-row: 16/17;
}

#one-o-sand-narr {
    grid-column: 2/8;
    grid-row: 17/18;
}

#two-a-earliestmemory {
    grid-column: 1/9;
    grid-row: 18/19;
}

/*the colour the "your earliest memory" text morphs into - script.js reads
it from here, so changing it here changes the morph too*/
#earliest-memory-title {
    color: #25FFDE;
    /*same typeface, case and spacing as the h4 words that morph into it, so
    nothing visibly changes at the hand-over (other chapter titles stay mono)*/
    font-family: "Altera Serif", Times New Roman, serif;
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

#two-b-earlymem-narr {
    grid-column: 3/7;
    grid-row: 19/20;
    padding: 0 4vw 0 4vw;
}

#two-c-earlymem-narr {
    grid-column: 1/9;
    grid-row: 20/21;
}

#stamp-five {
    grid-column: 1/3;
    grid-row: 20/21;
    z-index: 2;
    padding-top: 4rem;
}

#two-c-earlymem-img1 {
    grid-column: 1/4;
    grid-row: 21/22;
    padding: 1rem;
    float: center;
}

#two-c-earlymem-img2 {
    grid-column: 4/6;
    grid-row: 21/22;
    padding: 1rem;
}

#two-c-earlymem-img3 {
    grid-column: 6/9;
    grid-row: 21/22;
    padding: 1rem;
    float: center;
}

#two-d-unreliable-mem {
    grid-column: 2/5;
    grid-row: 22/23;
    padding: 10rem 6vw 0 0;
}

#two-e-unreliable-mem {
    grid-column: 3/6;
    grid-row: 23/24;
}

#two-f-dejavu-vid {
    grid-column: 1/9;
    grid-row: 24/25;
    padding-top: 20rem;
}

#two-g-dejavu-narr {
    grid-column: 1/9;
    grid-row: 24/25;
    padding-top: 30rem;
}

/*same row and padding as #two-f-dejavu-vid, so the house video sits
exactly over the beach video, ready to crossfade in when unlocked*/
#three-a-dejavu {
    grid-column: 1/9;
    grid-row: 24/25;
    padding-top: 20rem;
    /*it comes after #two-g-dejavu-narr in the markup, so without this its box
    would sit on top of the IT'S LIKE... button and swallow every click*/
    pointer-events: none;
}

/*top-right corner of the house video: same row and 20rem offset as
#three-a-dejavu (#wrapper's padding supplies the 2vw on the right). the
video's top edge sits at the top of the screen once unlocked, right under
the fixed nav bar, so the extra 12vh drops the stamp just below the nav*/
#stamp-six {
    grid-column: 1/3;
    grid-row: 24/25;
    align-self: start;
    z-index: 2;
    padding-top: calc(20rem + 12vh);
    pointer-events: none;
}

/*covers exactly the same box as the house video (same row, same 20rem
offset, one screen tall), split into thirds - the text sits at the top of
the bottom third*/
#three-a-dejavu-narr {
    grid-column: 1/9;
    grid-row: 24/25;
    box-sizing: border-box;
    height: calc(20rem + 100vh);
    padding-top: 20rem;
    display: grid;
    grid-template-rows: 2fr 1fr;
    text-align: center;
    /*comes after the IT'S LIKE... button in the markup - let clicks through*/
    pointer-events: none;
}

#three-a-dejavu-narr>p {
    grid-row: 2;
    align-self: start;
}

#three-b-wakeup1 {
    grid-column: 2/8;
    grid-row: 25/26;
    text-align: center;
}

#three-b-wakeup2 {
    grid-column: 5/8;
    grid-row: 26/27;
}

#three-c-beachhouse-vid1 {
    grid-column: 1/9;
    grid-row: 27/28;
}

#three-c-beachhouse-vid2 {
    grid-column: 2/5;
    grid-row: 28/29;
}

#stamp-seven {
    grid-column: 1/3;
    grid-row: 29/30;
    z-index: 2;
    padding-top: 26rem;
}

#three-d-dreamlike {
    grid-column: 5/9;
    grid-row: 29/30;
    padding-top: 30rem;
}

#three-d-house-idk {
    grid-column: 1/9;
    grid-row: 30/31;
    padding-top: 30rem;
}

#thenthehouse {
    grid-column: 1/9;
    grid-row: 31/32;
    text-align: center;
    /* margin: 0 0 10rem 0; */
    padding: 5rem 0 0 0;
}

#three-f-housevid {
    grid-column: 1/9;
    grid-row: 32/33;
    padding: 5rem 0 25rem 0;
}

#three-g-unfamiliarhouse {
    grid-column: 1/9;
    grid-row: 33/34;
    text-align: center;
    padding-bottom: 5rem;
}

#stamp-eight {
    grid-column: 1/3;
    grid-row: 34/35;
    z-index: 2;
    padding-top: 4rem;
}

#three-g-unfamiliarhousevid {
    grid-column: 1/9;
    grid-row: 34/35;
    padding-top: 10rem;
}

#three-h-moth {
    grid-column: 3/7;
    grid-row: 35/36;
    padding-top: 20rem;
}

#stamp-nine {
    grid-column: 1/3;
    grid-row: 36/37;
    z-index: 2;
    padding-top: 4rem;
}

#three-i-mothvid {
    grid-column: 3/7;
    grid-row: 36/37;
    padding: 10rem 0 10rem 0;
}

#three-i-mothnarr1 {
    grid-column: 3/7;
    grid-row: 37/38;
}

#three-i-mothnarr2 {
    grid-column: 4/7;
    grid-row: 38/39;
}

#three-i-mothnarr3 {
    grid-column: 4/7;
    grid-row: 39/40;
    padding-bottom: 10rem;
}

#stamp-ten {
    grid-column: 1/3;
    grid-row: 40/41;
    z-index: 2;
    padding-top: 20rem;
}

#three-j-systemhome {
    grid-column: 1/9;
    grid-row: 40/41;
    text-align: center;
    padding: 10rem 0 10rem 0;
}

#three-j-houseindex {
    grid-column: 1/9;
    grid-row: 41/42;
}

/*the row straight after the wheel, so the narrative carries on once the
last image has turned past*/

#stamp-eleven {
    grid-column: 1/3;
    grid-row: 42/43;
    z-index: 2;
    padding-top: 20rem;
}

#three-k-emptyhouse1 {
    grid-column: 2/3;
    grid-row: 42/43;
    padding-top: 20rem;
}

#three-k-emptyhouse2 {
    grid-column: 5/6;
    grid-row: 42/43;
    padding-top: 20rem;
}

#three-k-emptyhouse3 {
    grid-column: 3/4;
    grid-row: 43/44;
    padding-top: 10rem;

}

#three-k-emptyhouse4 {
    padding-top: 10rem;
    grid-column: 6/8;
    grid-row: 43/44;
}

#three-k-narr {
    grid-column: 3/6;
    grid-row: 44/45;
    padding-top: 20rem;
}

#three-l-whitehouse {
    grid-column: 4/7;
    grid-row: 45/46;
    padding: 20rem 0 20rem 0;
}

#stamp-twelve {
    grid-column: 1/3;
    grid-row: 46/47;
    z-index: 2;
    padding-bottom: 8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#three-m-narr1 {
    grid-column: 3/7;
    grid-row: 46/47;
    /* padding-top: 10rem; */
    text-align: center;
}

#three-m-narr2 {
    grid-column: 4/7;
    grid-row: 47/48;
    padding-top: 10rem;
    text-align: right;
}

#three-n-system {
    grid-column: 3/7;
    grid-row: 48/49;
    padding: 15rem 10rem 0 10rem;
    text-align: center;
}

#three-n-systempush {
    grid-column: 5/7;
    grid-row: 49/50;
    padding-top: 15rem;
    text-align: right;
}

#three-o-fakehouse1 {
    grid-column: 4/6;
    grid-row: 50/51;
    padding-top: 8rem;
    margin: 10rem;
}

#three-o-fakehouse1 img {
    outline: 1px solid #25FFDE;
    margin-top: 10rem;
}

#three-o-fakenarr {
    grid-column: 5/7;
    grid-row: 51/52;
    padding-top: 8rem;
    text-align: right;
}

#three-o-systemnarr {
    grid-column: 3/7;
    grid-row: 52/53;
    text-align: center;
    padding: 15rem 10rem 0 10rem;
}

#three-o-fakenarr2 {
    grid-column: 5/7;
    grid-row: 53/54;
    padding-top: 15rem;
    text-align: right;
}

#three-o-fakeretrieve {
    grid-column: 3/7;
    grid-row: 54/55;
    padding-top: 15rem;
    margin-left: 10rem;
}

#three-o-fakehouse2 {
    grid-column: 3/5;
    grid-row: 54/55;
    padding-top: 20rem;
    margin: 10rem;
}

#three-o-fakehouse3 {
    grid-column: 5/7;
    grid-row: 54/55;
    padding-top: 20rem;
    margin: 10rem;
}

#three-o-fakehouse2 img {
    outline: 1px solid #25FFDE;
}

#three-o-fakehouse3 img {
    outline: 1px solid #25FFDE;
}

#three-o-fakenarr3 {
    grid-column: 3/7;
    grid-row: 55/56;
    padding: 15rem 10vw 0 10vw;
    text-align: center;
}

#three-o-fakenarr4 {
    grid-column: 5/7;
    grid-row: 56/57;
    padding-top: 5rem;
    text-align: right;
}

#three-o-systemnarr2 {
    grid-column: 4/6;
    grid-row: 56/57;
    text-align: center;
    padding: 25rem 0 20rem 0;
}

#three-p-distrustnarr1 {
    grid-column: 2/4;
    grid-row: 57/58;
}

#three-p-distrustnarr2 {
    grid-column: 3/5;
    grid-row: 58/59;
}

#three-p-system1 {
    grid-column: 3/7;
    grid-row: 59/60;
    padding: 20rem 6rem 0 6rem;
    text-align: center;
}

#three-p-distrustnarr3 {
    grid-column: 3/7;
    grid-row: 60/61;
    padding-top: 15rem;
    text-align: center;
}

#three-q-reject {
    grid-column: 5/7;
    grid-row: 61/62;
    padding: 10rem 0 20rem 0;
}

#theweight {
    grid-column: 1/9;
    grid-row: 62/63;
    text-align: center;
    padding: 5rem 0 5rem 0;
}

#four-b-theweight-vid {
    grid-column: 1/9;
    grid-row: 63/64;
}

#four-c-pool-narr1 {
    grid-column: 4/6;
    grid-row: 64/65;
    padding-top: 20rem;
    text-align: center;
}

#four-c-pool-narr2 {
    grid-column: 5/7;
    grid-row: 65/66;
    padding-top: 15rem;
}

#four-c-pool-narr3 {
    grid-column: 6/8;
    grid-row: 66/67;
}

#four-c-pool-narr4 {
    grid-column: 5/8;
    grid-row: 67/68;
    padding-top: 15rem;
    padding-right: 8vw;
    /* text-align: center; */
}

#four-d-weight {
    grid-column: 3/7;
    grid-row: 68/69;
    padding: 10rem 0 25rem 0;
}

#four-d-weight img {
    margin: auto;
    padding: 0 10vw 0 10vw;
}

#four-e-letgo-narr1 {
    grid-column: 3/5;
    grid-row: 69/70;
}

#four-e-letgo-narr2 {
    grid-column: 4/7;
    grid-row: 70/71;
    padding: 15rem 0 0 5rem;
}

#four-e-letgo-narr3 {
    grid-column: 3/7;
    grid-row: 71/72;
    padding-top: 20rem;
    padding-bottom: 40rem;
    text-align: right;
}

#gotocredits {
    grid-column: 1/9;
    grid-row: 72/73;
    text-align: center;
    padding-bottom: 40vh;
}

/* CREDITS PAGE STYLING */
/* 6 COLUMN GRID */

#credits-title {
    grid-column: 1/7;
    /* grid-row: 1/2; */
    text-align: center;
    margin-top: 41.5vh;
}

/*CREDITS (credits.html): film-style sections - a centred heading over two
columns of lines, the left column's text aligned left and the right
column's aligned right. change any of these settings freely*/
#credits {
    width: 50vw;
    /*clamp sets min width, ideal width & max width*/
    width: clamp(40rem, 50vw, 140rem);
    /*centred, 10vh down from the title*/
    margin: auto;
    margin-top: 20vh;
    margin-bottom: 40vh;
    /*space between the two columns*/
    --credits-gutter: 2rem;
    /*space between lines within a section*/
    --credits-line-gap: -0.5rem;
    /*space between the heading and its first line*/
    --credits-heading-gap: 1.6rem;
    /*space between one section and the next*/
    --credits-section-gap: 7rem;
}

#credits-footer {
    padding-bottom: 15vh;
}

#credits-footer p {
    font-size: 1.05rem;
    text-align: center;
    margin: auto;
}

.credits-section {
    margin-bottom: var(--credits-section-gap);
}

.credits-section h3 {
    text-align: center;
    margin: 0 0 var(--credits-heading-gap) 0;
}

.credits-body {
    text-align: center;
    padding-bottom: 2rem;
    width: 80%;
    margin: 0 auto;
}

.credits-body p {
    font-size: 1.2rem;
}

/*one line of credits: two equal columns with the gutter between them -
change 1fr 1fr to e.g. 1fr 2fr to make the right column wider*/
.credits-line {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--credits-gutter);
    margin-bottom: var(--credits-line-gap);
}

.credits-line> :first-child {
    text-align: right;
}

.credits-line> :last-child {
    text-align: left;
}

.credits-line p {
    font-size: 1.1rem;
}

.credits-img {
    grid-column: 1/3;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 1rem 10vw 4rem 10vw;
}

/*all three photos the same shape, so they sit at the same height - the
first is slightly taller, so cover trims a little off its top and bottom*/
.credits-img img {
    display: block;
    width: 100%;
    aspect-ratio: 710 / 506;
    object-fit: cover;
}

.bold {
    font-family: "Diatype Semi Mono Medium";
    font-weight: bold;
}

#credits a {
    color: color-mix(in srgb, #ACF2E8, var(--day-ink) calc(var(--daylight) * 100%));
    /* text-decoration: underline; */
}

#credits a:hover {
    color: color-mix(in srgb, #ACF2E8, var(--day-bright) calc(var(--daylight) * 100%));
    transition-property: all;
    transition-duration: 0.8s;
}

/*-------- PAGE LOCK (see setupPageLock in script.js) --------*/
/*the "IT'S LIKE..." button - looks like every .next-button; this only
centres it under the text above*/
.unlock-button {
    display: block;
    margin: 0 auto;
}

/*the video revealed on unlock starts invisible. once unlocked, script.js
sets its opacity - and the text and button's - from the scroll position*/
[data-unlock-reveal] {
    opacity: 0;
}

/*the first crossfade, right after the button is pressed, is timed - these
only apply for those first 2 seconds; after that the fade follows the
scroll directly, with no lag*/
body.is-unlocking [data-unlock-reveal] {
    transition: opacity 2s ease-in-out;
}

body.is-unlocking [data-unlock-hide] {
    transition: opacity 1s ease-in-out, visibility 0s 1s;
}

/*memory reveal: the empty and full photos share one grid cell, with the
full one on top and invisible until hovered (or tapped - see script.js)*/
.memory-reveal {
    display: grid;
    cursor: url('img/cursor-teal.png'), pointer;
}

.memory-reveal>img {
    grid-area: 1 / 1 / 2 / 2;
    transition: opacity 0.8s ease-in-out;
}

.memory-full {
    opacity: 0;
}

/*the full photo replaces the empty one: one fades in as the other fades
out. only on devices with a real hover, so a tap on a phone doesn't leave
the photo stuck half-revealed*/
@media (hover: hover) {
    .memory-reveal:hover .memory-full {
        opacity: 1;
    }

    .memory-reveal:hover>img:not(.memory-full) {
        opacity: 0;
    }
}

.memory-reveal.is-revealed .memory-full {
    opacity: 1;
}

.memory-reveal.is-revealed>img:not(.memory-full) {
    opacity: 0;
}

/* NOT IN USE RIGHT NOW */
#one-o-index {
    grid-column: 1/9;
    grid-row: 18/19;
}

/*chapter cover: a full-bleed video or image with its chapter title laid over
the top. the asset and the title share a single grid cell, so the title sits
over the asset without absolute positioning - which would escape the section
entirely any time that section isn't position:relative*/
.chapter-cover {
    /*how far down the cover the title sits - override this on an individual
    section if its asset isn't the usual full screen height*/
    --chapter-title-top: 5vh;
    display: grid;
    /*opaque backdrop so the page's ambient background video doesn't show through*/
    background-color: #000000;
    /*keeps the asset's z-index:-1 scoped to this section (above the black
    background) rather than escaping to the document root*/
    position: relative;
    z-index: 0;
}

/*stacks every child - asset and title - in the same cell*/
.chapter-cover>* {
    grid-area: 1 / 1 / 2 / 2;
}

/*horizontal centring comes from the global h1 text-align*/
.chapter-title {
    align-self: start;
    margin-top: var(--chapter-title-top);
    z-index: 1;
}

/*pinned cover video (video with data-pin-until - script.js adds is-pinned
once the cover reaches the top of the screen). the cover drops its backdrop
and stacking context so the pinned video sits behind the rest of the page,
like the opening background video, and keeps its full-screen height so
the page below doesn't jump up when the video leaves the flow*/
.chapter-cover.is-pinned {
    min-height: 100vh;
    background-color: transparent;
    z-index: auto;
}

.chapter-cover.is-pinned>video {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    margin: 0;
}



/*-----------------------------------------------------------*/
/*------------------------ ANIMATIONS -----------------------*/
/*-----------------------------------------------------------*/

/* ----------------------------------------------
 * Sourced from CSS-Tricks 2024-12-18
 * Author: Geoff Graham on Jul 21, 2022
 * css-tricks.com/snippets/css/typewriter-effect
 * ---------------------------------------------- */

/*TYPEWRITER EFFECT*/
.line1 {
    top: 20%;
    /*keeps the space above and below that the h3's padding used to give,
without stretching the caret*/
    margin: 2rem 0;
    border-right: 2px solid rgba(44, 33, 255);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    /* transform: translateY(-30%); */
}

/*caret height: the box is only as tall as this heading. its margin has to
go too - .line1's overflow:hidden keeps an h3's margins inside the box,
where they'd stretch the caret*/
.line1 h3 {
    margin: 0;
    padding: 0;
    /*how tall the caret is - 1 = the height of the letters, bigger = taller*/
    line-height: 1.8;
}

.anim-typewriter {
    animation: typewriter 4s steps(12) 1s 1 normal both,
        blinkTextCursor 500ms steps(12) infinite normal;
}

@keyframes typewriter {
    from {
        width: 0;
    }

    to {
        /*change this to adjust where it stops typing*/
        width: 11em;
    }
}

@keyframes blinkTextCursor {
    from {
        border-right-color: rgba(44, 33, 255);
    }

    to {
        border-right-color: transparent;
    }
}

@keyframes typing {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: orange;
    }
}

/*ANIMISTA CSS ANIMATIONS*/
/*used in nav bar block text*/
.focus-in-expand {
    -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.focus-in-reverse {
    -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
    animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) reverse both;
}

.vibrate {
    -webkit-animation: vibrate-1 0.9s linear infinite both;
    animation: vibrate-1 0.9s linear infinite both;
}

.vibrate-fast {
    -webkit-animation: vibrate-3 0.5s linear infinite both;
    animation: vibrate-3 0.5s linear infinite both;
}

.text-focus-in {
    -webkit-animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 5s both;
    animation: text-focus-in 2s cubic-bezier(0.550, 0.085, 0.680, 0.530) 5s both;
}

.text-focus-in-faster {
    -webkit-animation: text-focus-in 1.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: text-focus-in 1.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.blink {
    -webkit-animation: blink-1 1.2s ease-out infinite both;
    animation: blink-1 1.2s ease-out infinite both;
}

.flicker {
    -webkit-animation: flicker-3 2.5s linear infinite both;
    animation: flicker-3 2.5s linear infinite both;
}

.shake-horizontal {
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
}

/* ----------------------------------------------
 * Generated by Animista on 2024-12-18 14:52:25
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation focus-in-expand
 * ----------------------------------------
 */
@-webkit-keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes focus-in-expand {
    0% {
        letter-spacing: -0.5em;
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation vibrate-1
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

@keyframes vibrate-1 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    20% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    40% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    60% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    80% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

/**
 * ----------------------------------------
 * animation vibrate-3
 * ----------------------------------------
 */
@-webkit-keyframes vibrate-3 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    10% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    30% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    50% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    60% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    70% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    90% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}

@keyframes vibrate-3 {
    0% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }

    10% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    20% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    30% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    40% {
        -webkit-transform: translate(2px, 2px);
        transform: translate(2px, 2px);
    }

    50% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    60% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    70% {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    80% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    90% {
        -webkit-transform: translate(2px, -2px);
        transform: translate(2px, -2px);
    }

    100% {
        -webkit-transform: translate(0);
        transform: translate(0);
    }
}


/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

@keyframes text-focus-in {
    0% {
        -webkit-filter: blur(12px);
        filter: blur(12px);
        opacity: 0;
    }

    100% {
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation blink-1
 * ----------------------------------------
 */
@-webkit-keyframes blink-1 {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes blink-1 {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * animation puff-out-center
 * ----------------------------------------
 */
@-webkit-keyframes puff-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
}

@keyframes puff-out-center {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
    }
}

/**
 * ----------------------------------------
 * animation flicker-3
 * ----------------------------------------
 */
@-webkit-keyframes flicker-3 {

    0%,
    100% {
        opacity: 1;
    }

    32.98% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    34% {
        opacity: 0;
    }

    34.02% {
        opacity: 1;
    }

    34.98% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    35.9% {
        opacity: 0;
    }

    35.92% {
        opacity: 1;
    }

    38.98% {
        opacity: 1;
    }

    39% {
        opacity: 0;
    }

    39.8% {
        opacity: 0;
    }

    39.82% {
        opacity: 1;
    }

    83.98% {
        opacity: 1;
    }

    84% {
        opacity: 0;
    }

    84.9% {
        opacity: 0;
    }

    84.92% {
        opacity: 1;
    }
}

@keyframes flicker-3 {

    0%,
    100% {
        opacity: 1;
    }

    32.98% {
        opacity: 1;
    }

    33% {
        opacity: 0;
    }

    34% {
        opacity: 0;
    }

    34.02% {
        opacity: 1;
    }

    34.98% {
        opacity: 1;
    }

    35% {
        opacity: 0;
    }

    35.9% {
        opacity: 0;
    }

    35.92% {
        opacity: 1;
    }

    38.98% {
        opacity: 1;
    }

    39% {
        opacity: 0;
    }

    39.8% {
        opacity: 0;
    }

    39.82% {
        opacity: 1;
    }

    83.98% {
        opacity: 1;
    }

    84% {
        opacity: 0;
    }

    84.9% {
        opacity: 0;
    }

    84.92% {
        opacity: 1;
    }
}

/**
 * ----------------------------------------
 * animation shake-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes shake-horizontal {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}

@keyframes shake-horizontal {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px);
    }

    20%,
    40%,
    60% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
    }

    80% {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    90% {
        -webkit-transform: translateX(-8px);
        transform: translateX(-8px);
    }
}


/*-----------------------------------------------------------*/
/*------------- MEDIA QUERY FOR SMALLER SCREENS -------------*/
/*error message popup for index page as the typing animation requires a large screen to work properly*/

/* @media only screen and (max-width: 600px) {

    #prologue,
    header,
    #experiment {
        display: none;
    }

    #wider-screen {
        background-color: rgba(128, 37, 40, 0.43);
        width: 100vw;
        height: 100vh;
        display: block;
        margin: auto;
        text-align: center;
        align-content: center;
        padding: 0 10vw;
    }
} */

/*-----------------------------------------------------------*/
/*-------------- screens smaller than 800px -----------------*/

@media only screen and (max-width:800px) {

    /*sand gallery: 2 photos across instead of 4*/
    #one-m-sand-img {
        grid-template-columns: repeat(2, 1fr);
    }

    #wrapper {
        /*testing bg colour*/
        /* background-color: firebrick; */
        display: grid;
        width: 100%;
        margin: auto;
        padding: 10vh 8vw;
        align-content: center;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto;
    }

    /*section 1 heading*/
    #one-profile {
        grid-column: 1/9;
        grid-row: 1/2;
    }

    #one-psycho {
        grid-column: 2/3;
        grid-row: 2/5;
    }

    #one-description1 {
        grid-column: 4/9;
        grid-row: 4/5;
    }

    #one-description2 {
        grid-column: 4/9;
        grid-row: 5/6;
    }

    #one-description3 {
        grid-column: 4/9;
        grid-row: 6/7;
    }

    /*section 2 heading*/
    #two-psycho {
        grid-column: 1/9;
        grid-row: 7/8;
    }

    #two-intro {
        grid-column: 2/9;
        grid-row: 8/9;
    }

    #two-passage {
        grid-column: 1/9;
        grid-row: 9/10;
        padding: 0 10vw;
    }

    #two-passage-caption {
        grid-column: 2/9;
        grid-row: 10/11;
    }

    /*section 3 heading*/
    #three-popcult {
        grid-column: 1/9;
        grid-row: 11/12;
    }

    #three-images {
        grid-column: 1/9;
        grid-row: 12/13;
        padding: 10vw 0;
    }

    /*section 4 heading*/
    #four-concept {
        grid-column: 1/9;
        grid-row: 13/14;
    }

    #four-bodytext {
        grid-column: 3/9;
        grid-row: 14/15;
    }

    #four-conclusion {
        grid-column: 1/7;
        grid-row: 15/16;
    }

    #go-to-credits {
        grid-column: 1/9;
        grid-row: 16/17;
    }

    /*change image grid to 2 columns to fit smaller screens*/
    #face-images {
        grid-template-columns: repeat(3, 1fr);
    }

    .landscape {
        grid-column: auto;
    }

    .large-2,
    .small {
        transform: scale(1.2);
    }
}