/* ==========================================================================
   HALL OF FAME — page
   --------------------------------------------------------------------------
   Rebuilt on the language the landing page's Hall of Fame band uses.

   What went: the bordered "document" frame with its four corner brackets and
   top shimmer, the per-board red / blue / green identities, the framed winner
   card, and the population entries as boxes. The corner-bracket motif is the
   same one the owner had already removed from the manual, and the board colours
   are the ones the landing band dropped.

   What replaced it: a soft radial plate instead of a frame, the champion stated
   as a headline with its numbers as bars, and boards whose rank is carried by
   each row's leading edge so all three read as one block in one gold family.
   ========================================================================== */

/* Tuned so the whole round fits one 900px viewport without scrolling: the page
   was running 347px past the fold. */
.hofp {
    position: relative;
    isolation: isolate;
    max-width: 84rem;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 2rem;
}
@media (min-width: 768px)  { .hofp { padding: 1.75rem 2rem 1.25rem; } }
@media (min-width: 1100px) { .hofp { padding: 2rem 2.5rem 1rem; } }

/*
 * The plate, not a frame. Same device as .section-band::before on the landing:
 * a radial darkening focused behind the content and eased to nothing well
 * before any edge, so it never shows a boundary.
 */
/*
 * Fixed to the VIEWPORT, not to the content box.
 *
 * It used to be a radial confined to .hofp and centred at 38% of it, so it
 * faded out before the foot of the page and everything down there sat straight
 * on the artwork. The backdrop behind this page is itself fixed, so a fixed
 * veil tracks it exactly and the page keeps the same ground at any scroll
 * position and any page length.
 *
 * Measured against the brightest band of the artwork: 0.80 takes the body copy
 * to 7.2:1 and the board rows to 11:1.
 */
.hofp-plate {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(120% 85% at 50% 34%,
        rgba(14, 10, 4, 0.78) 0%,
        rgba(10, 7, 3, 0.85) 52%,
        rgba(6, 4, 2, 0.91) 100%);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.hofp-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 0.8rem;
}
.hofp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    /* The rule and the title were a full line apart. */
    margin-bottom: 0.2rem;
}
.hofp-eyebrow-line {
    width: 1.6rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), 0.7));
}
.hofp-eyebrow-line.is-flipped {
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.7), transparent);
}
@media (min-width: 768px) { .hofp-eyebrow-line { width: 2.75rem; } }
.hofp-eyebrow-glyph {
    display: inline-flex;
    color: rgba(var(--gold-rgb), 0.85);
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.3));
}
.hofp-eyebrow-text {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: rgba(var(--gold-rgb), 0.85);
}

/* Matches .hof-title and every other section heading on the landing page. */
.hofp-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 0.3rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF8DC 20%, #FFD700 45%, var(--gold-400) 70%, #9A7515 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@media (min-width: 768px)  { .hofp-title { font-size: 2.25rem; } }
@media (min-width: 1024px) { .hofp-title { font-size: 3rem; } }

.hofp-subtitle {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(210, 190, 145, 0.85);
}

.hofp-empty {
    margin: 2rem 0 0;
    text-align: center;
    font-size: 1rem;
    color: rgba(206, 186, 140, 0.9);
}

/* ─── Controls: realm tabs + round nav ───────────────────────────────────── */
/* One centred cluster. Pinned to opposite edges the two read as unrelated
   toolbars; together they read as what they are — pick a realm, then a round. */
.hofp-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1.75rem;
    margin-bottom: 0.85rem;
}
.hofp-controls::after {
    content: '';
    order: -1;
    flex-basis: 100%;
    height: 0;
}
@media (min-width: 720px) { .hofp-controls::after { display: none; } }

/* Tabs are type, not chrome: the active one is marked by a lit underline
   rather than by a filled capsule. */
.hofp-worlds { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hofp-world {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border: 0;
    border-radius: 0.4rem;
    background: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(203, 181, 132, 0.92);
    transition: color 0.2s ease, background 0.2s ease;
}
.hofp-world::after {
    content: '';
    position: absolute;
    right: 0.9rem;
    left: 0.9rem;
    bottom: 0.15rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.9), transparent);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.hofp-world:hover { color: rgba(226, 199, 133, 0.95); background: rgba(var(--gold-rgb), 0.06); }
.hofp-world.is-active { color: #F4E287; }
.hofp-world.is-active::after { opacity: 1; transform: scaleX(1); }
.hofp-world-count {
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 900;
    background: rgba(var(--gold-rgb), 0.16);
    color: rgba(226, 199, 133, 0.95);
}

.hofp-nav { display: flex; align-items: center; gap: 1rem; }
.hofp-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 0.5rem;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.14), rgba(var(--gold-rgb), 0.04));
    color: rgba(226, 199, 133, 0.9);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hofp-arrow:hover { background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.24), rgba(var(--gold-rgb), 0.08)); color: #FFD700; }
.hofp-arrow:active { transform: scale(0.94); }
/* The rounds are a timeline that stops at both ends (no wrap), so an end
   arrow says so instead of looking live and doing nothing. */
.hofp-arrow:disabled,
.hofp-arrow:disabled:hover {
    cursor: default;
    opacity: 0.4;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.14), rgba(var(--gold-rgb), 0.04));
    color: rgba(226, 199, 133, 0.9);
    transform: none;
}

.hofp-nav-centre { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 9rem; }
.hofp-counter {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(230, 201, 133, 0.95);
}
.hofp-counter .sep { font-weight: 400; color: rgba(190, 168, 120, 0.9); letter-spacing: 0.1em; }

/* Diamonds, matching the connectors between the landing's bands. */
.hofp-dots { display: flex; align-items: center; gap: 0.5rem; }
.hofp-dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    cursor: pointer;
    transform: rotate(45deg);
    background: rgba(var(--gold-rgb), 0.3);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hofp-dot:hover { background: rgba(var(--gold-rgb), 0.6); }
.hofp-dot.is-on {
    background: linear-gradient(135deg, #FFD700, var(--gold-400));
    box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5);
    transform: rotate(45deg) scale(1.35);
}

/* ─── Rounds ─────────────────────────────────────────────────────────────── */
/* One grid cell for every pane, so entering and leaving panes overlay instead
   of both sitting in flow and doubling the height mid-transition. */
.hofp-stack { display: grid; }
.hofp-pane  { grid-area: 1 / 1; }

.hofp-round {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 0.8rem;
}
.hofp-round-name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(240, 219, 165, 0.96);
}
@media (min-width: 768px) { .hofp-round-name { font-size: 1.375rem; } }
.hofp-round-meta {
    padding: 0.18rem 0.6rem;
    border-radius: 0.3rem;
    background: rgba(var(--gold-rgb), 0.12);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    color: rgba(219, 199, 152, 0.95);
}
/* The round's speed: the duration's chip with the value lit, because it is the
   figure that gives every other number on the pane its scale. */
.hofp-round-speed {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.6rem;
    border-radius: 0.3rem;
    background: rgba(var(--gold-rgb), 0.16);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
    color: rgba(219, 199, 152, 0.95);
}
.hofp-round-speed svg { color: #FFD700; filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.35)); }
.hofp-round-speed-val {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #F4E287;
}
.hofp-round-ended {
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    /* Brighter than it was in the champion header: rgba(170,147,98,.8)
       tops out at 4.43:1 however dark the plate behind it gets. */
    color: rgba(204, 182, 133, 0.95);
}
.hofp-round .hofp-eyebrow-line { flex: 0 1 4rem; }

/*
 * The champion leads, the boards follow. Side by side gave one winner a third of
 * the page and squeezed three leaderboards into the rest.
 *
 * Within the band: identity | art | numbers. The art was pinned to the far right
 * by space-between, 491px off the page centre and reading as an afterthought;
 * the outer columns share the remaining width equally, so it now sits dead
 * centre with real content either side of it.
 */
.hofp-crown {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1rem;
}
.hofp-crown > .hofp-art { order: -1; }
@media (min-width: 900px) {
    .hofp-crown {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        justify-items: stretch;
        gap: 2rem;
    }
    .hofp-crown > .hofp-art  { order: 0; }
    .hofp-crown > .hofp-champ-stats { order: 1; }
    .hofp-champion { min-width: 0; }
}

/* The same file the landing band uses: its edges are already faded to
   transparent, so it needs no frame and no mask here. */
/* Capped by HEIGHT, not width: at its natural ratio it stood 410px and set the
   whole band, 87px taller than the champion beside it. */
.hofp-art { height: 13rem; }
@media (min-width: 900px)  { .hofp-art { height: 17rem; } }
@media (min-width: 1100px) { .hofp-art { height: 17.75rem; } }
.hofp-art img { display: block; height: 100%; width: auto; }

/* ─── Champion ───────────────────────────────────────────────────────────── */
.hofp-champ-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 1.8rem;
    margin-bottom: 0.5rem;
}
.hofp-champ-crown {
    display: inline-flex;
    color: #F0CB55;
    filter: drop-shadow(0 0 7px rgba(255, 215, 0, 0.45));
}
.hofp-champ-eyebrow {
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    line-height: 1.2;
    color: rgba(230, 201, 133, 0.95);
}
/* The end date sits with the duration on the round line — see .hofp-round-ended.
   It used to live here, pushed to the far edge of the champion header, which
   split one fact about the round across two places. */

.hofp-champ-name {
    margin: 0 0 0.45rem;
    font-family: var(--font-display);
    /* Cinzel renders lowercase as small caps, which is where the two-height
       look comes from — no transform needed. */
    font-size: clamp(1.9rem, 3.2vw, 2.5rem);
    font-weight: 900;
    line-height: 1.03;
    overflow-wrap: anywhere;
    background: linear-gradient(180deg, #FFF7DD 0%, #F3D68C 32%, #DCAE41 66%, #A87B18 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.55));
}

.hofp-champ-guild {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: 0 0 0.9rem;
    font-size: 0.9375rem;
}
.hofp-champ-guild-name {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: rgba(219, 195, 143, 0.95);
}
.hofp-champ-guild-name svg { color: rgba(var(--gold-rgb), 0.75); }
.hofp-champ-members { color: rgba(196, 174, 126, 0.92); }
.hofp-champ-members::before {
    content: '·';
    margin-inline-end: 0.55rem;
    color: rgba(160, 139, 95, 0.5);
}

/* Bars, not boxes: the fill starts at the label and is gone before it reaches
   the value, so the column reads as a chart rather than a stack of cards. */
.hofp-champ-stats { display: flex; flex-direction: column; gap: 0.4rem; width: 100%; }
@media (min-width: 900px) { .hofp-champ-stats { max-width: 24rem; margin-inline-start: auto; } }
.hofp-champ-stat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 1.1rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(var(--gold-rgb), 0.17) 0%,
        rgba(var(--gold-rgb), 0.085) 40%,
        rgba(var(--gold-rgb), 0.025) 72%,
        rgba(var(--gold-rgb), 0) 100%);
}
.hofp-champ-stat::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 213, 96, 0.9), rgba(var(--gold-rgb), 0.25));
}
.hofp-champ-stat-icon { display: inline-flex; color: rgba(var(--gold-rgb), 0.85); }
.hofp-champ-stat-label {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(230, 210, 160, 0.96);
}
.hofp-champ-stat-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #F7E6A8;
}

/* ─── Boards ─────────────────────────────────────────────────────────────── */
.hofp-boards { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) { .hofp-boards { gap: 1.75rem; } }
@media (min-width: 640px)  { .hofp-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .hofp-boards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }

.hofp-board-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.8rem;
    margin-bottom: 0.45rem;
}
.hofp-board-icon { display: inline-flex; color: rgba(var(--gold-rgb), 0.8); }
.hofp-board-label {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(216, 189, 126, 0.92);
}

.hofp-board-rows { display: flex; flex-direction: column; gap: 0.35rem; }

/*
 * Rank is the bar's leading edge and the numeral, not a filled medal chip. The
 * fill stays gold on every row so the three boards read as one block; only the
 * 3px edge changes, which is enough to place first from third at a glance.
 */
.hofp-row-item {
    --rank-rgb: 232, 193, 84;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.9rem;
    border-radius: 0.45rem;
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(var(--gold-rgb), 0.15) 0%,
        rgba(var(--gold-rgb), 0.07) 45%,
        rgba(var(--gold-rgb), 0.015) 78%,
        rgba(var(--gold-rgb), 0) 100%);
    transition: background 0.2s ease;
}
.hofp-row-item.r2 { --rank-rgb: 196, 199, 205; }
.hofp-row-item.r3 { --rank-rgb: 205, 138, 76; }
.hofp-row-item::before {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: rgb(var(--rank-rgb));
    box-shadow: 0 0 10px rgba(var(--rank-rgb), 0.45);
}
.hofp-row-item:hover {
    background: linear-gradient(90deg,
        rgba(var(--gold-rgb), 0.22) 0%,
        rgba(var(--gold-rgb), 0.1) 45%,
        rgba(var(--gold-rgb), 0.02) 78%,
        rgba(var(--gold-rgb), 0) 100%);
}
.hofp-rank {
    min-width: 0.9rem;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--rank-rgb));
    flex-shrink: 0;
}
.hofp-row-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(229, 212, 172, 0.95);
}
/* p_alliances.name is varchar(10) in this codebase — it IS the short tag, so
   this never needs truncating; a long player name gives up characters first. */
.hofp-row-tag {
    flex-shrink: 0;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(var(--gold-rgb), 0.16);
    border: 1px solid rgba(var(--gold-rgb), 0.28);
    color: rgba(226, 199, 133, 0.95);
}
.hofp-row-value {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #F3E1A4;
}

/* ─── Pane transitions ───────────────────────────────────────────────────── */
/*
 * The pane used to move as ONE rectangle: round line, champion, art, three
 * boards and twelve rows all sliding 12px together. A single block in motion
 * has no hierarchy, which is what made it read as cheap.
 *
 * Now the pane itself only fades, and its contents arrive in sequence — round
 * line, champion, numbers, then each board with its rows cascading. The whole
 * thing lands inside ~550ms, so it stays crisp.
 *
 * Direction comes from the carousel's own `direction`, which it had been
 * computing on every change and never reading. Forward, content enters from the
 * right; back, from the left.
 */
.hofp-carousel { --enter-x: 2.5rem; }
.hofp-carousel.is-back { --enter-x: -2.5rem; }

.hofp-in         { opacity: 0; }
.hofp-in-active  { transition: opacity 0.28s ease; }
.hofp-out        { opacity: 1; }
.hofp-out-active {
    transition: opacity 0.18s ease;
    opacity: 0;
    /* The leaving pane must not intercept clicks aimed at the arriving one. */
    pointer-events: none;
}

/*
 * The stagger. `display: none` -> block restarts a CSS animation, and x-show
 * toggles exactly that, so simply declaring these on the pane's children makes
 * them replay on every round change with no JavaScript involved.
 *
 * `backwards` fill matters: without it each item would flash at its final
 * position for the length of its own delay before starting.
 */
.hofp-pane > *,
.hofp-crown > *,
.hofp-boards > * {
    animation: hofp-item 0.44s cubic-bezier(0.16, 0.84, 0.28, 1) backwards;
}
.hofp-pane > .hofp-round { animation-delay: 0.02s; }
.hofp-crown > .hofp-champion    { animation-delay: 0.08s; }
.hofp-crown > .hofp-champ-stats { animation-delay: 0.16s; }
.hofp-boards > .hofp-board {
    /* --board is set per board in the markup, so the three cascade. */
    animation-delay: calc(0.2s + var(--board, 0) * 0.07s);
}

/*
 * The art is the SAME image on every round, so sliding it out and back would be
 * motion that communicates nothing. It holds its place and only settles.
 */
.hofp-crown > .hofp-art {
    animation-name: hofp-art-settle;
    animation-delay: 0.06s;
}

/* Rows wipe rather than fade: the coloured leading edge grows from nothing and
   the gold fill sweeps in behind it, which is the bar metaphor the design
   already uses everywhere else. */
.hofp-board-rows > .hofp-row-item {
    animation: hofp-row 0.4s cubic-bezier(0.16, 0.84, 0.28, 1) backwards;
    animation-delay: calc(0.26s + var(--board, 0) * 0.07s + var(--row, 1) * 0.05s);
}
.hofp-row-item::before {
    animation: hofp-edge 0.34s cubic-bezier(0.16, 0.84, 0.28, 1) backwards;
    animation-delay: calc(0.3s + var(--board, 0) * 0.07s + var(--row, 1) * 0.05s);
    transform-origin: 50% 0;
}

@keyframes hofp-item {
    from { opacity: 0; transform: translate3d(var(--enter-x, 2.5rem), 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes hofp-art-settle {
    from { opacity: 0; transform: scale(0.965); }
    to   { opacity: 1; transform: none; }
}
@keyframes hofp-row {
    from { opacity: 0; transform: translate3d(calc(var(--enter-x, 2.5rem) * 0.5), 0, 0); }
    to   { opacity: 1; transform: none; }
}
@keyframes hofp-edge {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* ─── Entrance ───────────────────────────────────────────────────────────── */
/*
 * Gated on .has-hero-rise, set by the inline script in <head> so it applies
 * before the first paint. Behind a deferred class the page would render at rest
 * and then snap to hidden — the flash the landing hero used to have.
 */
.has-hero-rise .hofp-head,
.has-hero-rise .hofp-controls,
.has-hero-rise .hofp-stack {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
    animation: hofp-rise 0.7s cubic-bezier(0.16, 0.84, 0.28, 1) forwards;
}
.has-hero-rise .hofp-head     { animation-delay: 0.08s; }
.has-hero-rise .hofp-controls { animation-delay: 0.24s; }
.has-hero-rise .hofp-stack    { animation-delay: 0.38s; }

@keyframes hofp-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .has-hero-rise .hofp-head,
    .has-hero-rise .hofp-controls,
    .has-hero-rise .hofp-stack { animation: none; opacity: 1; transform: none; }
    .hofp-in-active,
    .hofp-out-active { transition: none; }
    .hofp-pane > *,
    .hofp-crown > *,
    .hofp-boards > *,
    .hofp-board-rows > .hofp-row-item { animation: none; opacity: 1; transform: none; }
    .hofp-row-item::before { animation: none; transform: none; }
    .hofp-world::after,
    .hofp-dot,
    .hofp-arrow { transition: none; }
}