/*
 * Atmosphere and interaction polish.
 *
 * Everything here is additive: it changes how the theme feels, not how it is
 * laid out. No rule in this file sets width, height, display, position on
 * content, or grid/flex structure - those were measured and verified in
 * eternal-page.css and are deliberately left alone.
 *
 * Three principles it follows.
 *
 *   Background depth is static. Continuous page-level motion was removed so
 *   navigation and long account sessions stay quiet and inexpensive.
 *
 *   Colour comes from tokens. Nothing here is a literal, so both palettes get
 *   the same treatment - see eternal-accent.css.
 *
 * The reduced-motion block in eternal-tokens.css also covers interaction
 * transitions and the retained online status pulse.
 */

:root {
    /*
     * One easing and three durations, used by everything. A shared curve is
     * most of what makes separate components feel like one interface.
     */
    --et-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --et-fast: 140ms;
    --et-base: 240ms;
    --et-slow: 420ms;

    /*
     * The skull, as a mask rather than an image, so it takes its colour from
     * whatever the accent currently is. fill-rule evenodd is what makes the
     * sockets and nasal cavity read as holes instead of blobs.
     */
    --et-skull: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' fill-rule='evenodd'%3E%3Cpath d='M12 2.6c-4.5 0-7.9 3.1-7.9 7.4 0 2.6 1.2 4.5 2.7 5.6.3.2.5.6.5 1v1.5c0 1 .8 1.9 1.9 1.9h5.6c1.1 0 1.9-.9 1.9-1.9v-1.5c0-.4.2-.8.5-1 1.5-1.1 2.7-3 2.7-5.6 0-4.3-3.4-7.4-7.9-7.4zM9 8.9a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4zm6 0a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4zm-3 5.1l1.2 2.4h-2.4z'/%3E%3C/svg%3E");
}

/* ---- 1. ambient background ----------------------------------------------- *
 * A single static element carries the wash and two sparse dust fields. The
 * layers remain inert and do not allocate compositor animation layers.
 */
.et-atmos {
    background:
        radial-gradient(120% 70% at 50% -10%, var(--et-air) 0%, transparent 65%),
        radial-gradient(90% 50% at 50% 110%, rgba(0, 0, 0, 0.55) 0%, transparent 60%);
    inset: 0;
    pointer-events: none;
    position: fixed;
    z-index: 0;
}

.et-atmos::before,
.et-atmos::after {
    content: '';
    inset: -12%;
    pointer-events: none;
    position: absolute;
}

.et-atmos::before {
    background-image:
        radial-gradient(circle at 30% 20%, rgba(var(--et-accent-rgb), 0.30) 0.6px, transparent 1.3px),
        radial-gradient(circle at 68% 74%, rgba(var(--et-accent-rgb), 0.18) 0.5px, transparent 1.1px);
    background-size: 137px 121px, 211px 173px;
    opacity: 0.55;
}

.et-atmos::after {
    background-image:
        radial-gradient(circle at 12% 62%, rgba(226, 236, 250, 0.16) 0.5px, transparent 1.1px),
        radial-gradient(circle at 82% 28%, rgba(226, 236, 250, 0.10) 0.4px, transparent 1px);
    background-size: 89px 167px, 251px 199px;
    opacity: 0.4;
}

/* The shell has to sit above the ambient layer, which is at z-index 0. */
.theme-supreme-eternal .wrapper,
.theme-supreme-eternal .topPanel,
.theme-supreme-eternal .et-hero,
.theme-supreme-eternal .et-nav,
.theme-supreme-eternal .et-main {
    position: relative;
    z-index: 1;
}

/* ---- 2. the shared transition -------------------------------------------- *
 * Named properties, never `all`: `all` makes the browser watch every computed
 * property on every element, and it also animates things like width when a
 * class changes, which is where janky-feeling interfaces come from.
 */
.theme-supreme-eternal a,
.theme-supreme-eternal button,
.theme-supreme-eternal .et-panel,
.theme-supreme-eternal .et-cta,
.theme-supreme-eternal .menu__link,
.theme-supreme-eternal .et-nav a,
.theme-supreme-eternal .ember-game-feature,
.theme-supreme-eternal .ember-vote-guide-card,
.theme-supreme-eternal .ember-downloads-mirror,
.theme-supreme-eternal .ember-ranking-class-filter a,
.theme-supreme-eternal .langBlock-active,
.theme-supreme-eternal .langBlock-dropdown a,
.theme-supreme-eternal .et-chrome__btn {
    transition:
        background-color var(--et-base) var(--et-ease),
        border-color var(--et-base) var(--et-ease),
        box-shadow var(--et-slow) var(--et-ease),
        color var(--et-fast) var(--et-ease),
        opacity var(--et-base) var(--et-ease),
        transform var(--et-base) var(--et-ease);
}

/* ---- 3. panels ----------------------------------------------------------- *
 * A hairline of light along the top edge and a soft drop beneath. Together they
 * read as a panel sitting on the page rather than a rectangle drawn on it.
 */
.theme-supreme-eternal .et-panel {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 12px 28px -18px rgba(0, 0, 0, 0.9);
}

/*
 * Panel heads carry the skull, at 10px and a tenth of full strength. It should
 * be the kind of detail you notice on the second visit, not the first.
 */
.theme-supreme-eternal .et-panel__head {
    position: relative;
}

.theme-supreme-eternal .et-panel__head::after {
    background-color: var(--et-accent);
    content: '';
    height: 10px;
    -webkit-mask-image: var(--et-skull);
    mask-image: var(--et-skull);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: 0.14;
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity var(--et-slow) var(--et-ease);
    width: 10px;
}

.theme-supreme-eternal .et-panel:hover .et-panel__head::after {
    opacity: 0.32;
}

/* ---- 4. navigation ------------------------------------------------------- *
 * The underline grows from the centre rather than fading in, and the active
 * item gets a skull beneath it. scaleX on a pseudo-element keeps this on the
 * compositor - animating width here would relayout the bar on every hover.
 */
.theme-supreme-eternal .et-nav a {
    position: relative;
}

.theme-supreme-eternal .et-nav a::before {
    background: linear-gradient(180deg, var(--et-sheen), transparent);
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity var(--et-base) var(--et-ease);
}

.theme-supreme-eternal .et-nav a::after {
    background: linear-gradient(90deg, transparent, var(--et-accent), transparent);
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: transform var(--et-base) var(--et-ease);
}

.theme-supreme-eternal .et-nav a:hover::before,
.theme-supreme-eternal .et-nav a:focus-visible::before {
    opacity: 1;
}

.theme-supreme-eternal .et-nav a:hover::after,
.theme-supreme-eternal .et-nav a:focus-visible::after,
.theme-supreme-eternal .et-nav a.is-active::after {
    transform: scaleX(1);
}

.theme-supreme-eternal .et-nav a:hover,
.theme-supreme-eternal .et-nav a:focus-visible {
    color: var(--et-link-hover);
}

/* ---- 5. buttons ---------------------------------------------------------- */

.theme-supreme-eternal .et-cta,
.theme-supreme-eternal .btn-primary,
.theme-supreme-eternal .ember-nav-play,
.theme-supreme-eternal .ember-ranking-search button,
.theme-supreme-eternal .ember-wiki-button--primary,
.theme-supreme-eternal .ember-vote-panel-link {
    position: relative;
}

.theme-supreme-eternal .et-cta:hover,
.theme-supreme-eternal .btn-primary:hover,
.theme-supreme-eternal .ember-nav-play:hover,
.theme-supreme-eternal .ember-ranking-search button:hover,
.theme-supreme-eternal .ember-wiki-button--primary:hover,
.theme-supreme-eternal .ember-vote-panel-link:hover,
.theme-supreme-eternal .et-cta:focus-visible,
.theme-supreme-eternal .btn-primary:focus-visible,
.theme-supreme-eternal .ember-nav-play:focus-visible {
    border-color: var(--et-accent);
    box-shadow:
        inset 0 0 26px var(--et-glow-strong),
        0 6px 20px -10px rgba(var(--et-accent-rgb), 0.5);
    transform: translateY(-1px);
}

.theme-supreme-eternal .et-cta:active,
.theme-supreme-eternal .btn-primary:active,
.theme-supreme-eternal .ember-nav-play:active {
    transform: translateY(0);
    transition-duration: var(--et-fast);
}

/* ---- 6. lists, cards and rows -------------------------------------------- */

/* The chevron in panel lists steps forward with its row. */
.theme-supreme-eternal .et-panel__list a::before {
    transition: transform var(--et-base) var(--et-ease), color var(--et-fast) var(--et-ease);
}

.theme-supreme-eternal .et-panel__list a:hover::before,
.theme-supreme-eternal .et-panel__list a:focus-visible::before {
    color: var(--et-accent);
    transform: translateX(3px);
}

.theme-supreme-eternal .et-panel__list a:hover,
.theme-supreme-eternal .et-panel__list a:focus-visible {
    color: var(--et-link-hover);
}

/* Content cards lift a hair and warm at the edge. */
.theme-supreme-eternal .ember-game-feature:hover,
.theme-supreme-eternal .ember-vote-guide-card:hover,
.theme-supreme-eternal .ember-downloads-mirror:hover {
    border-color: var(--et-accent-deep);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 14px 30px -20px rgba(0, 0, 0, 0.95);
    transform: translateY(-2px);
}

/*
 * Event rows get an accent edge that wipes in from the left. It is a scaled
 * pseudo-element rather than a border so the row's text never shifts.
 */
.theme-supreme-eternal .et-ev {
    position: relative;
    transition: background-color var(--et-base) var(--et-ease);
}

.theme-supreme-eternal .et-ev::before {
    background: var(--et-accent);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleY(0);
    transition: transform var(--et-base) var(--et-ease);
    width: 2px;
}

.theme-supreme-eternal .et-ev:hover::before,
.theme-supreme-eternal .et-ev.is-next::before {
    transform: scaleY(1);
}

.theme-supreme-eternal .et-ev:hover {
    background-color: rgba(var(--et-accent-rgb), 0.05);
}

/* Ranking class links */
.theme-supreme-eternal.theme-supreme-eternal #rank_by_class,
.theme-supreme-eternal.theme-supreme-eternal .ember-ranking-class-filter {
    gap: 16px;
    row-gap: 8px;
}

.theme-supreme-eternal.theme-supreme-eternal #rank_by_class a,
.theme-supreme-eternal.theme-supreme-eternal #rank_by_class button,
.theme-supreme-eternal.theme-supreme-eternal .ember-ranking-class-filter a,
.theme-supreme-eternal.theme-supreme-eternal .ember-ranking-class-filter button {
    -webkit-text-fill-color: currentColor;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--et-text-dim);
    min-height: 0;
    min-width: 0;
    padding: 2px 0;
    text-decoration: none;
}

.theme-supreme-eternal.theme-supreme-eternal #rank_by_class a:hover,
.theme-supreme-eternal.theme-supreme-eternal #rank_by_class a:focus-visible,
.theme-supreme-eternal.theme-supreme-eternal #rank_by_class a.is-active,
.theme-supreme-eternal.theme-supreme-eternal .ember-ranking-class-filter a:hover,
.theme-supreme-eternal.theme-supreme-eternal .ember-ranking-class-filter a:focus-visible,
.theme-supreme-eternal.theme-supreme-eternal .ember-ranking-class-filter a.is-active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--et-text-bright);
    text-decoration: none;
    text-shadow: 0 0 10px rgba(var(--et-accent-rgb), 0.24);
}

/* ---- 7. focus ------------------------------------------------------------ *
 * A visible ring that is not the browser default. Keyboard users get the same
 * accent the rest of the interface uses.
 */
.theme-supreme-eternal a:focus-visible,
.theme-supreme-eternal button:focus-visible,
.theme-supreme-eternal input:focus-visible,
.theme-supreme-eternal select:focus-visible,
.theme-supreme-eternal textarea:focus-visible {
    outline: 1px solid var(--et-accent);
    outline-offset: 2px;
}

.theme-supreme-eternal input:focus,
.theme-supreme-eternal textarea:focus {
    border-color: var(--et-accent-mid);
    box-shadow: 0 0 0 3px rgba(var(--et-accent-rgb), 0.10);
}

/* ---- 8. the utility strip ------------------------------------------------ */

.theme-supreme-eternal .topPanel {
    backdrop-filter: blur(6px);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25)),
        var(--et-panel-deep);
    border-bottom: 1px solid var(--et-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* ---- 9. language selector ------------------------------------------------ *
 * Was an unstyled flag and a plain list. Now a control: a bordered trigger that
 * lights on hover, and a panel that lifts in rather than appearing.
 */
.theme-supreme-eternal .langBlock {
    position: relative;
}

.theme-supreme-eternal .langBlock-active {
    align-items: center;
    background: var(--et-panel-blue);
    border: 1px solid var(--et-line-panel);
    cursor: pointer;
    display: flex;
    gap: 6px;
    padding: 3px 8px;
}

.theme-supreme-eternal .langBlock-active:hover,
.theme-supreme-eternal .langBlock-active:focus-visible {
    background: var(--et-panel-lit);
    border-color: var(--et-accent-deep);
}

.theme-supreme-eternal .langBlock-active img {
    border: 1px solid var(--et-line-soft);
    display: block;
    height: 14px;
    object-fit: cover;
    width: 20px;
}

/* The caret. An empty span in the markup, given a shape here. */
.theme-supreme-eternal .langBlock-active > span {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid var(--et-text-label);
    display: block;
    transition: border-top-color var(--et-fast) var(--et-ease), transform var(--et-base) var(--et-ease);
}

.theme-supreme-eternal .langBlock-active > span::after {
    content: none;
}

.theme-supreme-eternal .langBlock-active:hover > span {
    border-top-color: var(--et-accent);
}

.theme-supreme-eternal .langBlock.is-open .langBlock-active > span {
    transform: rotate(180deg);
}

.theme-supreme-eternal .langBlock-dropdown {
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, var(--et-panel-lit), var(--et-panel-deep));
    border: 1px solid var(--et-line-panel);
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.95);
    list-style: none;
    margin: 0;
    min-width: 168px;
    padding: 4px;
}

.theme-supreme-eternal .langBlock-dropdown a {
    align-items: center;
    color: var(--et-text-dim);
    display: flex;
    font: 500 var(--et-size-base) / 1 var(--et-body);
    gap: 8px;
    padding: 7px 9px;
    position: relative;
}

/* Accent edge on the hovered row, wiping in from the left like the event rows. */
.theme-supreme-eternal .langBlock-dropdown a::after {
    background: var(--et-accent);
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    top: 0;
    transform: scaleY(0);
    transition: transform var(--et-base) var(--et-ease);
    width: 2px;
}

.theme-supreme-eternal .langBlock-dropdown a:hover,
.theme-supreme-eternal .langBlock-dropdown a:focus-visible {
    background: rgba(var(--et-accent-rgb), 0.07);
    color: var(--et-text-bright);
}

.theme-supreme-eternal .langBlock-dropdown a:hover::after,
.theme-supreme-eternal .langBlock-dropdown a:focus-visible::after {
    transform: scaleY(1);
}

/* ---- 10. strip controls -------------------------------------------------- *
 * The ambient toggle and the palette switch. Same trigger treatment as the
 * language control so the three read as one row of controls.
 */
.theme-supreme-eternal .et-chrome {
    align-items: center;
    display: flex;
    gap: 6px;
}

.theme-supreme-eternal .et-chrome__btn {
    align-items: center;
    background: var(--et-panel-blue);
    border: 1px solid var(--et-line-panel);
    color: var(--et-text-label);
    cursor: pointer;
    display: flex;
    gap: 5px;
    height: 22px;
    justify-content: center;
    padding: 0 7px;
}

.theme-supreme-eternal .et-chrome__btn:hover,
.theme-supreme-eternal .et-chrome__btn:focus-visible {
    background: var(--et-panel-lit);
    border-color: var(--et-accent-deep);
    color: var(--et-text-soft);
}

/* --- ambient toggle --- */

/*
 * Four bars. Paused they sit as a flat, even row; playing, each rises on its
 * own cycle. The stagger comes from different durations rather than delays, so
 * the four never fall back into step with each other.
 */
.theme-supreme-eternal .et-eq {
    align-items: flex-end;
    display: flex;
    gap: 2px;
    height: 11px;
}

.theme-supreme-eternal .et-eq i {
    background: currentColor;
    display: block;
    height: 3px;
    transition: height var(--et-base) var(--et-ease);
    width: 2px;
}

.theme-supreme-eternal .et-chrome__btn.is-playing {
    border-color: var(--et-accent-deep);
    color: var(--et-accent);
}

.theme-supreme-eternal .et-chrome__btn.is-playing .et-eq i {
    animation: et-eq 900ms var(--et-ease) infinite alternate;
    height: 11px;
    transform-origin: 50% 100%;
}

.theme-supreme-eternal .et-chrome__btn.is-playing .et-eq i:nth-child(1) { animation-duration: 760ms; }
.theme-supreme-eternal .et-chrome__btn.is-playing .et-eq i:nth-child(2) { animation-duration: 1120ms; }
.theme-supreme-eternal .et-chrome__btn.is-playing .et-eq i:nth-child(3) { animation-duration: 890ms; }
.theme-supreme-eternal .et-chrome__btn.is-playing .et-eq i:nth-child(4) { animation-duration: 1310ms; }

@keyframes et-eq {
    from { transform: scaleY(0.28); }
    to   { transform: scaleY(1); }
}

/* --- palette switch --- */

.theme-supreme-eternal .et-chrome__btn[data-accent-target] {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    width: 18px;
}

.theme-supreme-eternal .et-chrome__btn[data-accent-target]:hover,
.theme-supreme-eternal .et-chrome__btn[data-accent-target]:focus-visible,
.theme-supreme-eternal .et-chrome__btn[data-accent-target].is-current {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.theme-supreme-eternal .et-swatch {
    background: var(--et-swatch, #7cb2e8);
    border: 0;
    border-radius: 50%;
    display: block;
    height: 9px;
    transition: box-shadow var(--et-fast) var(--et-ease), transform var(--et-base) var(--et-ease);
    width: 9px;
}

.theme-supreme-eternal .et-chrome__btn:hover .et-swatch {
    transform: scale(1.15);
}

.theme-supreme-eternal .et-chrome__btn[data-accent-target='azure'] { --et-swatch: #7cb2e8; }
.theme-supreme-eternal .et-chrome__btn[data-accent-target='crimson'] { --et-swatch: #d4454f; }

.theme-supreme-eternal .et-chrome__btn[data-accent-target].is-current .et-swatch {
    box-shadow: 0 0 8px var(--et-swatch);
    transform: scale(1.15);
}

.theme-supreme-eternal .et-chrome__btn[data-accent-target]:focus-visible .et-swatch {
    box-shadow: 0 0 0 2px var(--et-panel-deep), 0 0 0 3px var(--et-accent-mid);
}

/* ---- 11. section ornament ------------------------------------------------ *
 * A hairline rule broken by a skull at its centre, for the seam between the
 * hero and the nav. One per page - this is the one place the motif is allowed
 * to be seen rather than sensed.
 */
.theme-supreme-eternal .et-rule {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 0 2px;
}

.theme-supreme-eternal .et-rule::before,
.theme-supreme-eternal .et-rule::after {
    background: linear-gradient(90deg, transparent, var(--et-line-strong), transparent);
    content: '';
    flex: 1 1 auto;
    height: 1px;
}

.theme-supreme-eternal .et-rule i {
    background-color: var(--et-accent);
    display: block;
    height: 12px;
    -webkit-mask-image: var(--et-skull);
    mask-image: var(--et-skull);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: 0.4;
    width: 12px;
}

/* ---- 12. state transition ------------------------------------------------ *
 * When the palette switches, the surfaces cross-fade instead of snapping. The
 * class is added for the duration of the swap and then removed, so this cost is
 * never paid during ordinary browsing.
 */
.theme-supreme-eternal.is-accent-switching,
.theme-supreme-eternal.is-accent-switching .et-panel,
.theme-supreme-eternal.is-accent-switching .topPanel,
.theme-supreme-eternal.is-accent-switching .et-hero,
.theme-supreme-eternal.is-accent-switching .et-nav {
    transition: background-color var(--et-slow) var(--et-ease), border-color var(--et-slow) var(--et-ease), color var(--et-slow) var(--et-ease);
}