/* Typefaces, the Monash palette and the site nav live in brand.css, which
   this page loads first. */

:root {
    /* palette */
    --abyss: #050E14;
    --deep: #0B1B26;
    --trench: #12303F;
    --current: #4E93A6;
    --mist: #8FA8B2;
    --foam: #FFFFFF;

    /* roles */
    --base-100: var(--monash-white);      /* text / light contrast */
    /* Page surface: the Monash web-accessible blue, which the Digital
       Guidelines (p.5) approve for white text overlay at WCAG AA. */
    --base-200: var(--monash-blue-aa);    /* page surface */
    --base-300: var(--abyss);             /* deepest surface (ASCII sections) */
    --site-footer-bg: var(--abyss);       /* reveal footer ground */

    color-scheme: dark;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: var(--base-200);
    color: var(--base-100);
}

/* Body text, 1em desktop / 0.9375em mobile (Digital Guidelines p.3-4).
   The guidelines name Helvetica Neue for this role; brand.css serves Roboto
   instead and explains why. Display roles override this below. */
body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--type-body);
    line-height: 1.5;
}

a {
    text-decoration: none;
}

h1,
h2,
p {
    font-weight: 400;
    line-height: 1.2;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100svh;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    background-color: var(--base-300);
    color: var(--base-100);
    will-change: clip-path;
    overflow: hidden;
    z-index: 4;
}

.preloader-header {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Banner heading: Roboto Condensed Regular, 4.7em/75px desktop,
   2em/32px mobile (Digital Guidelines p.3-4). */
.preloader-header h1 {
    font-family: var(--font-banner);
    font-size: var(--type-banner-heading);
    text-transform: uppercase;
    line-height: 0.85;
}

.preloader-counter {
    position: absolute;
    top: -1.5rem;
    left: calc(100% + 1.5rem);
    overflow: hidden;
}

.preloader-counter p {
    font-family: var(--font-banner);
    font-size: var(--type-body);
    color: var(--monash-white);
    line-height: 0.85;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* z-index 1 on every full-bleed section: they scroll over the fixed reveal
   footer, which sits at 0. Without it the footer shows through them. */
.slider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100svh;
    /* Solid surface rather than a photo: the ASCII hands on slide 01 need an
       unbusy ground, and without a photograph underneath the copy no longer
       depends on a veil to clear AA. */
    background-color: var(--base-300);
    overflow: hidden;
}

/* Zero-height flow marker used to drive the hand reveal. The slider is
   pinned, so it cannot reliably trigger anything but its own pin. */
.slider-revealer {
    position: relative;
    width: 100%;
    height: 0;
}

/* ------------------------------------------------------------------
   ASCII figures — reusable pair (used by the Categories slider)
   ------------------------------------------------------------------ */
.ascii-figures {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Hover is tracked on window, so the layer itself must not eat pointer
       events from the nav or the login link sitting above it. */
    pointer-events: none;
    z-index: 0;
}

.ascii-figure {
    position: relative;
    width: 40%;
    min-width: 200px;
    will-change: transform;
}

/* The <img> is a pixel source, not a picture: it is pulled out of flow so the
   canvas defines the wrapper's height. That matters because with fit:"subject"
   the canvas is a crop of the image and the two no longer share an aspect
   ratio. Also overrides the global `img { height: 100%; object-fit: cover }`. */
.ascii-figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: fill;
    opacity: 0;
    pointer-events: none;
}

.ascii-figure canvas {
    display: block;
    width: 100%;
    height: auto;
}

/* Perspective between the two aircraft. Both source frames are tight crops
   (the subject fills 96.6% of the F-16's frame and 83.7% of the F-14's), so at
   a shared 40% they render almost the same width — 1.15:1 — and the near
   aircraft stops reading as nearer. The reference composite puts them at about
   2.2:1, which needs the left wrapper ~1.9x the right:
       (0.63 x 0.966) / (0.33 x 0.837) = 2.23
   The pair also has to fit the row: 63 + 33 = 96% leaves room for the parallax
   overscan, where 77 + 40 pushed the F-14 226px off the right edge.
   Re-derive both numbers if the assets are re-exported at other sizes. */
/* Bottom-aligned rather than centred, to open up the top of the frame for the
   slide copy. */
.ascii-figures--jets {
    align-items: flex-end;
}

.ascii-figures--jets .ascii-figure:first-child {
    width: 63%;
    flex-shrink: 0;
}

.ascii-figures--jets .ascii-figure:last-child {
    width: 33%;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Split pairs — one image cut in half, not a facing pair.
   The halves are cut to meet: the left is flush to its right edge (165px of
   transparent margin on the outside), the right flush to its left (136px
   outside). So they are centred to butt together rather than pushed to
   opposite edges.
   ------------------------------------------------------------------ */
.ascii-figures--split {
    justify-content: center;
}

/* The parallax overscan (scale 1.2) is applied per figure. Scaling each half
   about its own centre would push their inner edges past each other and
   double the artwork across the seam by 20% of a half-width, so each scales
   away from the join instead. */
.ascii-figures--split .ascii-figure:first-child {
    transform-origin: right center;
}

.ascii-figures--split .ascii-figure:last-child {
    transform-origin: left center;
}


/* Intro text: Roboto Condensed Regular, 1.5em/24px desktop,
   1.125em/18px mobile. */
.slider-title h1 {
    font-family: var(--font-banner);
    font-size: var(--type-intro-text);
    line-height: 1.35;
}

/* H2 intro heading: Century Schoolbook Regular, 2.625em/42px desktop,
   1.5em/24px mobile. The serif is what separates the section label from the
   Roboto Condensed copy under it. */
.slider-title .slider-subtitle {
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-size: var(--type-intro-heading);
    line-height: 1.1;
    color: var(--monash-white);
}

.outro {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100svh;
    padding: 2rem;
    display: flex;
    align-items: center;
    background-color: var(--base-200);
    color: var(--base-100);
}

/* Sits high rather than centred: the ASCII figures occupy the middle and lower
   half of the frame, and centred copy landed on top of the aircraft. */
.slider-title {
    position: absolute;
    top: 24%;
    left: 2rem;
    transform: translateY(-50%);
    width: 50%;
    color: var(--monash-white);
    /* Above .ascii-figures, which is z-index 0. */
    z-index: 1;
}

/* Intro text, and the "Where ideas meet industry" section that had no rules
   of its own. */
.outro h2,
.abouttheexpo h2 {
    font-family: var(--font-banner);
    font-size: var(--type-intro-text);
    line-height: 1.35;
    color: var(--monash-white);
}

/* H2 intro heading. */
.abouttheexpo h1 {
    margin-bottom: 0.75rem;
    font-family: var(--font-heading);
    font-size: var(--type-intro-heading);
    line-height: 1.1;
    color: var(--monash-white);
}

.abouttheexpo {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100svh;
    padding: 2rem;
    background-color: var(--base-200);
}

.aboutcontext {
    max-width: 60ch;
}

.slider-indicator {
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    z-index: 1;
}

.slider-indices {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

/* Body text (Roboto — see brand.css). */
.slider-indices p {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-body);
    font-size: var(--type-body);
    /* Foam rather than mist: these sit on the lightest part of the veil, and
       mist only reached 2.2:1 there. Inactive ones are still stepped back,
       by opacity in landing_page.js. */
    color: var(--monash-white);
}

.index {
    position: relative;
    width: 1.25rem;
    display: flex;
    justify-content: flex-end;
    will-change: opacity;
}

.marker {
    position: relative;
    width: 0.75rem;
    height: 1px;
    background-color: var(--current);
    transform-origin: right;
    will-change: transform;
    transform: scaleX(0);
}

.slider-progress-bar {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: rgba(143, 168, 178, 0.3);
}

.slider-progress {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    width: 3px;
    height: 100%;
    background-color: var(--current);
    transform-origin: top;
    will-change: transform;
}

.hero {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100svh;
    background-color: var(--base-200);
    color: var(--base-100);
    overflow: hidden;
}

.header {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
    transform: translate(-50%, -50%);
    width: 100%;
    height: max-content;
    overflow: hidden;
}

/* Banner heading. */
.header h1 {
    font-family: var(--font-banner);
    font-size: var(--type-banner-heading);
    text-transform: uppercase;
    line-height: 0.9;
}

.hero-footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.preloader-counter p {
    transform: translateY(100%);
    will-change: transform;
}

.preloader-header h1,
.header h1,
.nav-links a,
.nav-brand,
.hero-footer p {
    visibility: hidden;
}

@media (max-width: 1000px) {
    .preloader-counter {
        top: -1.5rem;
        left: calc(100% + 0.5rem);
    }

    .nav-links {
        flex-direction: column;
        gap: 0;
        text-align: right;
    }
}