@keyframes greeting-write {
    from { clip-path: var(--reveal-hidden); }
    to { clip-path: var(--reveal-shown); }
}

@keyframes caret-retire {
    0%, 92% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes plate-breathe {
    0%, 100% { transform: none; }
    50% { transform: var(--breathe-peak); }
}

.subjects:has(.subject[data-mark]) .subject-top {
    grid-template-columns:
        var(--bar-accent) var(--space-five) var(--s48) minmax(0, 1fr) auto;
    align-items: center;
}

.subjects:has(.subject[data-mark]) .subject-head { grid-column: var(--track-four); }
.subjects:has(.subject[data-mark]) .chevron { grid-column: var(--track-five); }

.subject[data-mark] .subject-top > canvas {
    grid-column: var(--track-three);
    grid-row: 1;
    width: var(--s48);
    height: var(--s48);
    margin-block: max(0px, calc((var(--space-five) - var(--s48)) / var(--pair)));
    pointer-events: none;
}

@media (max-width: 77.9375rem) {
    .subjects:has(.subject[data-mark]) .subject-top {
        grid-template-columns:
            var(--bar-accent) var(--space-five) var(--space-seven) minmax(0, 1fr) auto;
    }

    .subject[data-mark] .subject-top > canvas {
        width: var(--space-seven);
        height: var(--space-seven);
        margin-block: max(0px, calc((var(--space-five) - var(--space-seven)) / var(--pair)));
    }
}

.plate > canvas {
    display: block;
    width: var(--fill);
    height: var(--fill);
    pointer-events: none;
}

@supports (inline-size: calc(1px / 1px * 1px)) {
    .plate {
        inline-size: calc(
            clamp(
                0px,
                (var(--fill) - var(--plate-gap) - var(--plate-floor-w)) * var(--floor-gain),
                1px)
            / 1px
            * min(var(--plate-w), calc(var(--fill) - var(--plate-gap))));
    }
}

:root[data-art] .plate {
    visibility: visible;
    animation: var(--breathe-anim);
}

:root[data-ready] .intro h1 { animation: var(--greeting-anim); }

:root[data-ready] .intro h1::after {
    content: "";
    display: inline-block;
    width: var(--rule-accent);
    height: var(--caret-h);
    margin-inline-start: var(--caret-gap);
    translate: 0 var(--caret-drop);
    background-color: var(--accent-strong);
    animation: var(--caret-anim);
}

@media (max-width: 22.9375rem) {
    .plate { display: none; }
}

@media (forced-colors: active) {
    .plate { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-art] .plate,
    :root[data-ready] .intro h1,
    :root[data-ready] .intro h1::after { animation: none; }

    :root[data-ready] .intro h1::after { display: none; }
}