/*
 * The front door.
 *
 * Above Act I (60) and Act III (70), because it is the first thing on screen and there is
 * nothing it should ever be behind. It is the second thing in this client allowed a ground
 * of its own — like the Attunement's, it floats rather than sitting on painted furniture,
 * and unbacked text over candlelight and ivy is close to unreadable.
 *
 * Sized in `cqh`/`cqw` like everything else on the stage, so it scales with the board
 * rather than with the viewport. A welcome laid out in `rem` looked right on the machine
 * it was written on and nowhere else.
 */

.welcome {
    --duration-welcome-fade: 420ms;

    position: absolute;
    inset: 0;
    z-index: 80;

    background:
        radial-gradient(ellipse at 50% 45%,
            color-mix(in srgb, var(--colour-table-deep) 86%, transparent) 0%,
            color-mix(in srgb, black 94%, transparent) 72%);
    backdrop-filter: blur(3px);

    opacity: 1;
    transition: opacity var(--duration-welcome-fade) ease;
}

/*
 * `[hidden]` is enforced with `!important` in reset.css precisely so nothing can leave a
 * hidden element on screen by accident, so the layout goes on a selector that only matches
 * while it is *not* hidden — the same trick the Attunement uses.
 */
.welcome:not([hidden]) {
    display: grid;
    place-items: center;
    padding: 2cqh 3cqw;
}

.welcome--closing {
    opacity: 0;
    pointer-events: none;
}

/*
 * One centred column, and every row `auto`.
 *
 * Not a page with a header and a footer: given `1fr` anywhere the three acts drift to the
 * middle of the screen and the button ends up at the bottom edge, which is the layout of a
 * settings dialog rather than of something being handed to you.
 */
.welcome__sheet {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 1.6cqh;
    max-width: 84cqw;
    text-align: center;
}

.welcome__eyebrow {
    font-family: var(--font-display);
    font-size: 1.4cqh;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--colour-gold) 60%, transparent);
}

/*
 * The name, in the board's own gold. Not the painted title — this is DOM text, so it is
 * selectable by a screen reader and it is the one on the page a crawler reads (the board's
 * is a raster).
 */
.welcome__title {
    font-family: var(--font-display);
    font-size: 6.4cqh;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--colour-gold-bright);
    text-shadow:
        0 0.2cqh 1.4cqh rgb(0 0 0 / 85%),
        0 0 3cqh color-mix(in srgb, var(--colour-gold) 45%, transparent);
    margin-block-end: -0.9cqh;
}

.welcome__tagline {
    font-family: var(--font-display);
    font-size: 1.7cqh;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--colour-gold) 82%, var(--colour-text));
}

/* Prose, in the body face, because everything around it is display type. */
.welcome__promise {
    max-width: 58cqw;
    font-family: var(--font-body);
    font-style: italic;
    font-size: 2.2cqh;
    line-height: 1.4;
    color: var(--colour-text);
    text-shadow: 0 0.2cqh 1cqh rgb(0 0 0 / 80%);
    margin-block-start: 0.4cqh;
}

/* --- The three acts ------------------------------------------------------ */

.welcome__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Aligns the three titles and the three paragraphs across the row whatever the copy
       does, so it reads as one table rather than as three stacks of different heights. */
    grid-template-rows: auto auto 1fr;
    gap: 0.9cqh 3cqw;
    max-width: 76cqw;
    margin-block-start: 1cqh;
    counter-reset: welcome-step;
}

.welcome__step {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    justify-items: center;
    gap: 0.9cqh;
}

/*
 * The cards for one act, fanned about their own centre.
 *
 * A fixed height and `position: relative` rather than a flex row: the cards overlap, and
 * they are placed by `--fan` — a signed index handed down from `WelcomeGate` — so two
 * cards, five cards or one all come out symmetrical with no rule per count.
 */
.welcome__figure {
    position: relative;
    display: block;
    height: 13cqh;
    /* Wide enough for the widest fan; the cards are absolutely placed, so this only has to
       reserve room for them. */
    width: 100%;
}

.welcome__card {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    height: 100%;
    aspect-ratio: var(--card-aspect);

    /* Half a card left to centre it, then out along the fan and turned with it. The
       rotation is deliberately small — these are cards resting on a table, not a hand
       held up. */
    /* `max(n, -n)` rather than `abs()`: the same number, and it has worked in every
       browser for years instead of only in the newest ones. */
    --fan-spread: max(var(--fan, 0), calc(var(--fan, 0) * -1));

    /*
     * The step is a little smaller than the card is wide (a 13cqh card is 8.7cqh across),
     * so consecutive cards overlap by about a third — enough to read as a stack that was
     * fanned, and not so much that the five in the middle figure become one card.
     */
    transform:
        translateX(-50%)
        translateX(calc(var(--fan, 0) * 6cqh))
        translateY(calc(var(--fan-spread) * 0.4cqh))
        rotate(calc(var(--fan, 0) * 4.5deg));
    filter: drop-shadow(0 0.5cqh 1.1cqh rgb(0 0 0 / 70%));
}

.welcome__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.welcome__step-title {
    font-family: var(--font-display);
    font-size: 1.8cqh;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--colour-gold-bright);
    text-shadow: 0 0.1cqh 0.8cqh rgb(0 0 0 / 90%);
}

.welcome__step-copy {
    max-width: 22cqw;
    font-family: var(--font-body);
    font-size: 1.55cqh;
    line-height: 1.45;
    color: var(--colour-text-muted);
    text-shadow: 0 0.1cqh 0.6cqh rgb(0 0 0 / 85%);
}

/* --- What you spend ------------------------------------------------------ */

/*
 * The three objects, drawn as themselves beside what they do.
 *
 * On its own ground, unlike the acts above it: this is a glossary rather than a step, and
 * without a rule under it the eye reads six rows of the same weight and stops sorting
 * them. A hairline is enough — anything heavier would be a table on a table.
 */
.welcome__tokens {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.8cqh 3cqw;
    max-width: 76cqw;
    margin-block-start: 0.6cqh;
    padding-block-start: 1.6cqh;
    border-block-start: 1px solid color-mix(in srgb, var(--colour-gold) 22%, transparent);
}

.welcome__token {
    display: flex;
    align-items: center;
    gap: 0.8cqw;
    font-family: var(--font-body);
    font-size: 1.5cqh;
    color: var(--colour-text-muted);
    text-align: start;
}

.welcome__token b {
    color: var(--colour-gold-bright);
    font-weight: 600;
}

.welcome__token-mark {
    display: block;
    flex: none;
    width: 3.2cqh;
    aspect-ratio: 1;
    filter: drop-shadow(0 0.25cqh 0.5cqh rgb(0 0 0 / 70%));
}

.welcome__token-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --- Sound, decided before anything makes one ---------------------------- */

/*
 * A switch drawn as an object on a plate, not a checkbox.
 *
 * Everything the player touches in this product is a thing — a coin out of a dish, a token
 * into a socket, a seal onto a card — so the one control that is genuinely a preference
 * still has to be made of the same material or it reads as a settings dialog that wandered
 * onto the table. Hence a gilded track with a disc that slides in it, in the board's own
 * palette, rather than a browser checkbox with a label beside it.
 *
 * Quiet at rest and gold when it matters, like the shelf's buttons: it sits directly above
 * `Take your seat` and must not compete with it.
 */
.sound-switch {
    display: flex;
    align-items: center;
    gap: 0.9cqw;
    margin-block-start: 0.9cqh;
    padding: 0.7cqh 1.4cqw;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--colour-gold) 30%, transparent);
    background: color-mix(in srgb, var(--colour-table-raised) 55%, transparent);
    cursor: pointer;

    font-family: var(--font-display);
    font-size: 1.35cqh;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--colour-gold) 72%, var(--colour-text));
    transition: border-color 180ms ease, color 180ms ease;
}

.sound-switch:hover,
.sound-switch:focus-visible {
    border-color: color-mix(in srgb, var(--colour-gold) 65%, transparent);
    color: var(--colour-gold-bright);
}

/* The slot the disc sits in — sunk rather than raised, like everything else set into
   this table. */
.sound-switch__track {
    position: relative;
    display: block;
    width: 5.4cqh;
    height: 2.4cqh;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--colour-gold) 34%, transparent);
    background: color-mix(in srgb, black 55%, var(--colour-table-deep));
    box-shadow: inset 0 0.2cqh 0.5cqh rgb(0 0 0 / 70%);
    transition: background 220ms ease;
}

/*
 * The disc. Lit gold on, spent and grey off — the same reading as a coin still in the
 * dish against one already gone.
 *
 * **On is to the RIGHT**, which is the side the word "on" is written on. It sat on the left
 * first and read as a switch pointing away from its own label, which is the one thing a
 * switch cannot do: the whole reason to draw a control as an object is that its position
 * says the state, and here the position was arguing with the text next to it.
 */
.sound-switch__disc {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.25cqh;
    width: 1.8cqh;
    aspect-ratio: 1;
    border-radius: 50%;

    background:
        radial-gradient(circle at 34% 30%,
            var(--colour-gold-bright) 0%,
            var(--colour-gold) 46%,
            var(--colour-gold-deep) 100%);
    box-shadow: 0 0.1cqh 0.35cqh rgb(0 0 0 / 70%);

    /* Across the track, less its own width and both end gaps. */
    transform: translateY(-50%) translateX(calc(5.4cqh - 1.8cqh - 0.9cqh));
    transition: transform 220ms var(--ease-lift), background 220ms ease, box-shadow 220ms ease;
}

.sound-switch[aria-checked='false'] .sound-switch__track {
    background: color-mix(in srgb, black 72%, var(--colour-table-deep));
}

.sound-switch[aria-checked='false'] .sound-switch__disc {
    transform: translateY(-50%);
    background: radial-gradient(circle at 34% 30%, #6d6a63 0%, #46433d 60%, #2b2925 100%);
    box-shadow: 0 0.1cqh 0.3cqh rgb(0 0 0 / 60%);
}

.sound-switch__state {
    min-width: 3.2cqh;
    text-align: start;
    color: color-mix(in srgb, var(--colour-gold) 82%, var(--colour-text));
}

.sound-switch[aria-checked='false'] .sound-switch__state {
    color: var(--colour-text-muted);
}

/* --- The way in ---------------------------------------------------------- */

/*
 * Gilded at rest, and it is the one control in this product allowed to be.
 *
 * The shelf's buttons are quiet until the pointer finds them, because the board is edged
 * in gold everywhere and four gold buttons in a row stop announcing themselves. Here there
 * is exactly one thing to press on an otherwise still screen, so it can be the brightest
 * thing on it without competing with anything.
 */
.welcome__begin {
    margin-block-start: 1.4cqh;
    padding: 1.3cqh 3.4cqw;
    border-radius: 0.4rem;
    border: 1px solid var(--colour-gold);
    background: color-mix(in srgb, var(--colour-gold) 16%, transparent);
    color: var(--colour-gold-bright);
    cursor: pointer;

    font-family: var(--font-display);
    font-size: 2.1cqh;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 0 2.4cqh color-mix(in srgb, var(--colour-gold) 22%, transparent);
    transition: background 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

.welcome__begin:hover,
.welcome__begin:focus-visible {
    background: color-mix(in srgb, var(--colour-gold) 30%, transparent);
    border-color: var(--colour-gold-bright);
    box-shadow: 0 0 3.4cqh color-mix(in srgb, var(--colour-gold) 40%, transparent);
}

.welcome__aside {
    font-family: var(--font-body);
    font-size: 1.4cqh;
    color: color-mix(in srgb, var(--colour-text-muted) 88%, transparent);
}

.welcome__aside b {
    color: color-mix(in srgb, var(--colour-gold) 78%, var(--colour-text));
    font-weight: 600;
}

/* --- The corner it can be reopened from ---------------------------------- */

/*
 * Bottom-left, stacked over the status line and sharing its corner.
 *
 * The status element used to place itself; it is in this column now, because two small
 * legible things in one corner that each position themselves independently will sooner or
 * later be placed on top of one another.
 */
.footnote {
    position: absolute;
    /* Clear of THE DECK's nameplate, which the status line used to sit hard against. */
    inset-block-end: 2.15cqh;
    inset-inline-start: 2.1cqw;
    max-width: 26cqw;
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6cqh;
}

/*
 * Quiet on purpose. This is a way back to something already read, sitting on a board where
 * the loud things are the ones that deal cards — so it is small print with a ground, not a
 * button competing with the shelf.
 */
.footnote__help {
    padding: 0.5cqh 0.9cqh;
    border-radius: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--colour-gold) 22%, transparent);
    background: color-mix(in srgb, var(--colour-table-deep) 88%, black);
    cursor: pointer;

    font-family: var(--font-display);
    font-size: 1.25cqh;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--colour-gold) 70%, var(--colour-text));
    transition: color 180ms ease, border-color 180ms ease;
}

.footnote__help:hover,
.footnote__help:focus-visible {
    color: var(--colour-gold-bright);
    border-color: color-mix(in srgb, var(--colour-gold) 60%, transparent);
}