/* ABOUTME: Styles for the landing page hero — video backdrop with the sun and castle layered over it */
/* ABOUTME: Every layer is sized off .hero-art, so the composition keeps its proportions at any viewport */

/* The landing page's own ground, behind and below the hero. */
body {
    background-color: var(--light-blue);
}

/* Positions the shared .grain layer inside the backdrop. */
.hero-grain {
    position: absolute;
    inset: 0;
}

/* Video, tint and grain fade out together at the bottom; masking them as one
   layer keeps the tint from carrying on as a flat blue band past the video. */
.hero-backdrop {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

/* isolate keeps the tint's multiply on the video instead of letting it reach
   the page behind the hero. */
.hero {
    position: relative;
    /* Taller than the viewport so the video runs past the fold and fades out.
       The art keeps its place because .hero-stage is offset in proportion. */
    height: 120vh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--light-blue);
}

.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

.hero-tint {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-color: #4141fc;
    mix-blend-mode: multiply;
    opacity: 0.8;
}


/* Bounding box of the whole composition. It carries the sun's aspect ratio, so
   the sun keeps its proportions at any inset and the other layers can be
   placed as a percentage of it. Wide viewports are capped by height, narrow
   ones by width, and .hero crops whatever spills. */
/* Above the geometric centre: the sun's rays reach higher than the castle
   hangs low, so an evenly centred box reads as sitting too far down. */
.hero-stage {
    position: absolute;
    top: 33.333%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(126vw, 240vh);
    aspect-ratio: 729.8 / 354.9;
}

/* Kept separate from .hero-stage because the intro animation rewrites this
   element's transform, baking any percentage in it down to a fixed pixel
   value that then no longer tracks the element's size. */
.hero-art {
    position: absolute;
    inset: 0;
    container-type: size;
}

/* Holds the sun mask; takes no space of its own. */
.hero-defs {
    position: absolute;
    width: 0;
    height: 0;
}

/* Inset proportionally, so the sun sits inside the art box and reads smaller
   than the castle without moving the disc or the castle off its centre. The
   uneven top and bottom drop it lower without changing its size. */
.hero-sun {
    position: absolute;
    top: 17.5%;
    right: 16.5%;
    bottom: 15.5%;
    left: 16.5%;
    filter: url('#hero-liquid');
}

/* The mask sits on the inner element and the filter on the outer one: CSS
   masks after it filters, so a filter here would leave the sun's edge crisp. */
.hero-sun-fill {
    position: absolute;
    inset: 0;
    background: url('https://media.varlak.eu/img/pattern/wave-pattern.svg?v=1') center / cover no-repeat;
    -webkit-mask-image: url('#hero-sun-mask');
    mask-image: url('#hero-sun-mask');
}

/* Disc, title and castle are sized in cqh — off the art's height rather than
   its width — so the sun can be as wide as it likes without inflating them. */
.hero-disc {
    position: absolute;
    left: 49%;
    top: 55%;
    width: 29.8cqh;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: #ff2966;
}

/* Anchored by its top edge, so widening a gap inside it pushes the lines below
   further down instead of recentring the whole block. Centred by text-align
   rather than a transform: a transform would make this a stacking context, and
   then the subtitle and buttons could not lift above the castle while the two
   big lines stay under it. */
.hero-title {
    position: absolute;
    left: 0;
    right: 0;
    /* Set so the name lands where it would with a full-size line above it:
       the tagline is small type now, and the block is anchored by its top. */
    top: 35.7%;
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    /* Capped against the viewport: at the art's own scale the longest line
       runs wider than the screen on anything under ~1600px and gets clipped. */
    font-size: min(10.4cqh, 5.85vw);
    line-height: 0.95;
    text-transform: uppercase;
    word-spacing: 0.14em;
    color: white;
    text-align: center;
    white-space: nowrap;
}

/* The name takes its type from the block, and has to be told to inherit it:
   the global h1 rule and the browser's own defaults outrank inheritance.
   Shrink-to-fit so the block still centres it, but the year inside sits flush
   under the name rather than centred against it. */
.hero-title-name {
    display: inline-block;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    word-spacing: inherit;
    text-align: left;
    /* On the name only — text-shadow inherits, and the small lines above and
       below it take none. In em so the halo scales with the type. */
    text-shadow:
        0 0 0.15em rgba(32, 29, 252, 0.55),
        0 0 0.45em rgba(32, 29, 252, 0.4);
}

/* Same size as the name above it; only the indent and its tighter leading
   set it apart. */
.hero-title-year {
    display: inline-block;
    margin-left: 1.9em;
    line-height: 0.85;
}

/* The two small lines frame the name, one above and one below, so they take
   the same type rather than the block's. Only their colour sets them apart. */
.hero-title-tagline,
.hero-subtitle {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 2.2cqh;
    line-height: 1.2;
    word-spacing: 0.35em;
}

/* White, and set close over the name it sits above. */
.hero-title-tagline {
    margin: 0 0 0.7cqh;
    color: white;
}

/* Lifted over the castle, unlike the lines above it. */
.hero-subtitle {
    position: relative;
    z-index: 1;
    margin: 20cqh 0 0;
    color: #c5c5ff;
}

/* Sits low on the castle, and above it: an image painted later would take the
   clicks as well as cover the buttons. */
.hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1cqh;
}

.hero-castle {
    position: absolute;
    left: 50%;
    bottom: -3.5%;
    width: 116.6cqh;
    height: auto;
    transform: translateX(-50%);
}

/* Mobile (nagy): 480px – 767px
 *
 * A phone screen is tall and narrow, so a composition sized to fit inside it
 * sits small in the middle with the screen empty above and below. It takes
 * close to twice the width here and runs well off both edges. */
@media (max-width: 767px) {
    .hero-stage {
        /* The height cap is what a short, wide phone runs into: at 230vw its
           art plus the text under it will not fit between the navbar and the
           bottom of the screen. On a 375- or 320-wide screen the width is
           still the smaller of the two and nothing about them changes. */
        width: min(230vw, 110vh);
        /* A little lower than the third it sits at elsewhere, but not so low
           that the buttons crowd the bottom of the screen. */
        top: 37%;
    }

    /* At this size the castle would swallow the two big lines, so the whole
       text block lifts clear of the art rather than only the subtitle and the
       buttons. Nothing is left to be read through a drawing.
     *
     * The cap rises to 8.2vw, which is what the two long lines allow once the
     * sizes below set them against each other: the tagline runs 13.4 times its
     * own type size and the name 9.2, so at 0.82 and 1.18 they come out within
     * a few pixels of one another, and neither runs off a screen it must not
     * be clipped by. */
    .hero-title {
        z-index: 2;
        top: 17%;
        font-size: min(10.4cqh, 8.2vw);
    }

    /* Bigger than it is elsewhere, but still the folklore line's type, so the
       name has the same small line above it as below. Set straight on the name
       rather than a gap off it: the three lines read as one block here. */
    .hero-title-tagline {
        margin-bottom: 0;
        font-size: 3.4cqh;
        /* Haloed like the name between them: at this size a flat edge reads as
           faded against the art rather than as quieter than it. */
        text-shadow:
            0 0 0.15em rgba(32, 29, 252, 0.55),
            0 0 0.45em rgba(32, 29, 252, 0.4);
    }

    /* Centred rather than set flush left with the year indented under it:
       three lines down the middle of a narrow screen read as one block. */
    .hero-title-name {
        font-size: 1.18em;
        text-align: center;
    }

    .hero-title-year {
        margin-left: 0;
    }

    /* The type does not grow with the art — the viewport cap on .hero-title
       holds it where it is — so this gap, which is measured off the art's
       height, has to be reset by hand. Left alone the subtitle and the buttons
       ride up the castle instead of sitting low on it. */
    .hero-subtitle {
        /* Raised with the block above it, so this grows by what that lost and
           the line stays where it was. */
        margin-top: 63.5cqh;
        font-size: 3.4cqh;
        /* White, and haloed like the lines above: at this size the tint and
           the flat edge it takes elsewhere both read as faded against the art
           rather than as quieter than them. */
        color: white;
        text-shadow:
            0 0 0.15em rgba(32, 29, 252, 0.55),
            0 0 0.45em rgba(32, 29, 252, 0.4);
        /* The block above sets nowrap for its own two lines; this one is held
           to a measure it breaks over instead of running the art's full width. */
        white-space: normal;
        max-width: 55vw;
        margin-left: auto;
        margin-right: auto;
    }

    /* The castle drawing fills its own box edge to edge, so centring the box
       centres the file but not the picture: its ink sits 4.9% right of centre,
       the left of it being the low gatehouse and the right the keep. Off a
       screen this narrow that reads as skewed, so the extra 4.9% pulls what
       the eye weighs onto the middle. */
    .hero-castle {
        transform: translateX(-54.9%);
        /* Hangs a little lower than elsewhere, enough to leave the disc
           behind it standing clear without pushing the text off the screen. */
        bottom: -6%;
    }

    /* Sun and disc grow past the castle here — it is already as wide as the
       screen, and they are what fills the space around it. */
    .hero-disc {
        width: 40cqh;
        top: 49%;
    }

    /* Both rise, the sun by more than the disc, which opens the space the
       castle drops into. Their insets still add to the same totals, so
       neither changes size doing it. */
    .hero-sun {
        top: -5%;
        right: 8.1%;
        bottom: 21.2%;
        left: 8.1%;
    }

    /* One under the other and the width of the screen — side by side they are
       two small targets, and their row is measured against the art, which is
       twice the screen wide. Hence the width in vw rather than a percentage. */
    .hero-actions {
        flex-direction: column;
        gap: 0.5rem;
        width: calc(100vw - 2.5rem);
        margin-left: auto;
        margin-right: auto;
    }

    .hero-actions .button {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Continuous background motion is worth dropping for anyone who asks the OS
   for less of it; the sun keeps its shape, it just stops flowing. */
@media (prefers-reduced-motion: reduce) {
    #hero-liquid animate {
        display: none;
    }
}