/* Home page: hero, server info cards, getting-started steps, news + widget sidebar. */

/* --- hero --- */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid var(--line);
    /* Glow and a darkening veil over the hero art (tools/generate-art.mjs) keep the title readable. */
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(143, 123, 255, 0.28), transparent 65%),
        radial-gradient(700px 300px at 85% 110%, rgba(95, 79, 224, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(16, 15, 26, 0.38) 0%, rgba(12, 11, 20, 0.55) 55%, rgba(9, 9, 14, 0.9) 100%),
        url("/img/brand/hero.jpg") center 40% / cover no-repeat,
        #09090e;
    box-shadow: var(--shadow);
    padding: 72px 24px 34px;
    text-align: center;
}

/* drifting mist layers: the "veil" */
.hero-veil,
.hero-veil::before,
.hero-veil::after {
    position: absolute;
    inset: -40% -20%;
    pointer-events: none;
}
.hero-veil {
    background:
        radial-gradient(40% 18% at 30% 52%, rgba(201, 192, 255, 0.10), transparent 70%),
        radial-gradient(35% 14% at 72% 44%, rgba(143, 123, 255, 0.12), transparent 70%);
    animation: veil-drift 22s ease-in-out infinite alternate;
}
.hero-veil::before {
    content: "";
    background: radial-gradient(30% 10% at 50% 60%, rgba(226, 220, 255, 0.07), transparent 70%);
    animation: veil-drift 30s ease-in-out infinite alternate-reverse;
}
.hero-veil::after {
    content: "";
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(7, 7, 11, 0.55));
}

@keyframes veil-drift {
    from { transform: translate3d(-4%, 0, 0) scale(1); }
    to   { transform: translate3d(4%, -3%, 0) scale(1.08); }
}

.hero-inner { position: relative; max-width: 760px; margin: 0 auto; }

/* Night of the Veil (Halloween). Exists only while the event runs (index.js renderSeason): the
   Halloween art with the same violet glow and darkening as the normal hero, plus an ember glow from
   the pumpkins' side, fades in over it once loaded. Orange joins the violet, it doesn't replace it. */
.hero-season {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(143, 123, 255, 0.26), transparent 65%),
        radial-gradient(620px 260px at 18% 105%, rgba(251, 146, 60, 0.14), transparent 62%),
        linear-gradient(180deg, rgba(16, 15, 26, 0.36) 0%, rgba(12, 11, 20, 0.55) 55%, rgba(9, 9, 14, 0.9) 100%),
        url("/img/brand/hero-halloween.jpg") center 40% / cover no-repeat,
        #09090e;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.hero.is-season .hero-season { opacity: 1; }

/* "Night of the Veil has begun": in the hero's top margin, so it moves nothing when it appears. */
.season-badge {
    position: absolute;
    top: 18px;
    left: 50%;
    z-index: 1;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 24px);
    padding: 3px 14px 3px 5px;
    border-radius: 999px;
    border: 1px solid rgba(251, 146, 60, 0.42);
    background: rgba(12, 10, 20, 0.74);
    box-shadow: 0 0 22px rgba(251, 146, 60, 0.16), inset 0 0 0 1px rgba(143, 123, 255, 0.14);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #ffe9d6;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    animation: season-badge-in 0.6s ease both;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.season-badge img {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.55));
}
.season-badge .season-until { color: #c9c3d9; font-weight: 500; }
.season-badge .season-arrow { color: #fdba74; }
.season-badge:hover,
.season-badge:focus-visible {
    color: #fff;
    text-decoration: none;
    border-color: rgba(251, 146, 60, 0.75);
    box-shadow: 0 0 26px rgba(251, 146, 60, 0.28), inset 0 0 0 1px rgba(143, 123, 255, 0.22);
}

@keyframes season-badge-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.hero-title {
    margin: 12px 0 6px;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.8rem, 9vw, 5.6rem);
    line-height: 1;
    letter-spacing: 0.28em;
    padding-left: 0.28em;   /* balances the trailing letter-spacing */
    text-transform: uppercase;
    color: transparent;
    /* The first layer is a band of light, parked right of the title; it crosses the letters
       once after load (hero-sheen) and never again. Motion: docs/branding.md. */
    background:
        linear-gradient(100deg, transparent 42%, #fff 50%, transparent 58%) 0 0 / 300% 100% no-repeat,
        linear-gradient(180deg, #ffffff 0%, #e4dfff 45%, #9d8cff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 28px rgba(143, 123, 255, 0.45));
    animation: hero-sheen 1.8s 0.6s ease-in-out 1 both;
}

/* One sweep on a single element, so its few repaints are a one-off (the only animation of the
   site that isn't transform or opacity: a gradient clipped to text can't be moved otherwise). */
@keyframes hero-sheen {
    from { background-position: 100% 0, 0 0; }
    to   { background-position: 0 0, 0 0; }
}

.hero-tagline {
    margin: 0;
    font-family: var(--font-head);
    font-size: clamp(1rem, 2.6vw, 1.35rem);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--accent-hi);
}

.hero-text {
    margin: 18px auto 0;
    max-width: 580px;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.65;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
}

.hero-live {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 26px;
    margin-top: 34px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
}
.live-item { display: inline-flex; align-items: center; gap: 8px; }
.live-item b { color: #fff; font-variant-numeric: tabular-nums; }
.live-item b.ok { color: var(--ok); }
.live-item b.bad { color: var(--bad); }
.live-item .ev-count { color: var(--accent-hi); font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- server info cards --- */
.rates { margin-top: 18px; }
.rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.rate-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 8px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(15, 15, 22, 0.7);
    text-align: center;
    color: inherit;
}
a.rate-card:hover { border-color: var(--accent-line); text-decoration: none; }
.rate-value {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
}
.rate-label {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

/* --- getting started --- */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 20px 0;
}
.step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 18px 18px 92px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(15, 15, 22, 0.7);
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
.step:hover { border-color: var(--accent-line); transform: translateY(-2px); text-decoration: none; }
/* generated icon (tools/generate-art.mjs, icon-*) with the step number as a badge on it */
.step-ico {
    position: absolute;
    left: 16px;
    top: 14px;
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 0 12px rgba(143, 123, 255, 0.35));
    transition: transform 0.2s;
}
.step:hover .step-ico { transform: scale(1.06); }
.step-no {
    position: absolute;
    left: 58px;
    top: 52px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #0b0a10;
    font-size: 0.75rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #9f8dff, #5f4fe0);
    box-shadow: 0 0 16px var(--accent-glow);
}
.step-title { font-weight: 600; color: #fff; }
.step-text { font-size: 0.85rem; color: var(--muted); }

/* --- news + sidebar --- */
/* Wide screens: news, with the class showcase under it, beside the (taller) widget column.
   One column: news, widgets, showcase, so the next events stay above the showcase on phones. */
.home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    grid-template-areas: "main side" "paths side";
    grid-template-rows: auto 1fr;
    gap: 20px;
    align-items: start;
}
.home-main { grid-area: main; }
.home-side { grid-area: side; }
.home-grid > .paths { grid-area: paths; }
.home-side { display: flex; flex-direction: column; gap: 20px; }
.home-side .panel + .panel { margin-top: 0; }
.widget { padding: 1.4rem; }

.news-list { display: flex; flex-direction: column; }
.news-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
.news-item:first-child { padding-top: 0; }
.news-item:last-child { border-bottom: none; padding-bottom: 0; }
.news-meta { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--faint); }
.news-title { margin: 8px 0 4px; font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: #fff; }
.news-body { margin: 0; color: var(--muted); line-height: 1.65; }

.mini-list.ranked li { gap: 8px; }
.rank-medal {
    display: inline-grid;
    place-items: center;
    width: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}
.mini-list .ev-name { color: var(--text); }
.mini-list .ev-count { margin-left: auto; color: var(--accent-hi); font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- "Seven paths": the seven classes, with our own portraits (img/brand/class-*.jpg) ---
   Tabs pick a class (js/index.js); the portraits crossfade and the shown one zooms in slowly. */
.paths { container-type: inline-size; }
.paths-layout {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}
.paths-stage {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 16px;
    background: #0b0a10;
    box-shadow: 0 0 0 1px var(--accent-line), 0 18px 46px rgba(0, 0, 0, 0.5), 0 0 42px rgba(143, 123, 255, 0.16);
}
.paths-stage::after {
    /* static vignette: the portrait melts into the dark at its edges */
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 95% at 50% 32%, transparent 58%, rgba(7, 7, 11, 0.55)),
        linear-gradient(180deg, transparent 62%, rgba(7, 7, 11, 0.45));
}
.paths-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    opacity: 0;
    transform-origin: 46% 32%;
    transition: opacity 0.9s ease;
}
.paths-img:nth-child(even) { transform-origin: 56% 30%; }
.paths-img.is-active { opacity: 1; }
.paths-img.is-active,
.paths-img.is-leaving { animation: paths-zoom 9s ease-out both; }
/* the zoom only moves while the section is on screen (js/index.js sets .in-view) */
.paths-img.is-leaving,
.paths:not(.in-view) .paths-img,
.paths.is-paused .paths-img { animation-play-state: paused; }
@keyframes paths-zoom {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}

.paths-toggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: rgba(8, 8, 12, 0.62);
    box-shadow: none;
    color: var(--accent-hi);
}
.paths-toggle:hover { transform: none; filter: none; box-shadow: none; border-color: var(--accent-line); }
.paths-toggle::before {
    /* pause: two bars */
    content: "";
    width: 10px;
    height: 12px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
.paths-toggle[aria-pressed="true"]::before {
    /* paused: a play triangle */
    width: 0;
    height: 0;
    margin-left: 3px;
    border-left: 10px solid currentColor;
    border-right: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

.paths-title {
    text-align: left;
    margin: 6px 0 16px;
    font-size: 1.5rem;
}

.paths-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
}
.paths-tab {
    flex: 0 1 52px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    color: var(--faint);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    transition: color 0.25s;
}
.paths-tab:hover { transform: none; filter: none; box-shadow: none; color: var(--muted); }
.paths-tab img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: 50% 25%;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    opacity: 0.55;
    transition: opacity 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.paths-tab:hover img { opacity: 0.85; }
.paths-tab[aria-selected="true"] { color: var(--accent-hi); }
.paths-tab[aria-selected="true"] img {
    opacity: 1;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(143, 123, 255, 0.22), 0 0 16px var(--accent-glow);
}

.paths-panel:focus-visible { outline-offset: 6px; border-radius: 6px; }
.paths-panel:not([hidden]) { animation: paths-in 0.5s ease both; }
@keyframes paths-in {
    from { opacity: 0; translate: 0 6px; }
}
.paths-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-head);
    font-size: 1.45rem;
    font-weight: 600;
    color: #fff;
}
.paths-role {
    margin-top: 2px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-hi);
}
.paths-line {
    margin: 10px 0 0;
    max-width: 34em;
    color: var(--muted);
    line-height: 1.65;
}

@container (max-width: 560px) {
    .paths-layout { grid-template-columns: 1fr; gap: 18px; }
    .paths-stage { aspect-ratio: 4 / 3; }
    .paths-img { object-position: 50% 26%; }
}

@media (max-width: 900px) {
    .home-grid {
        grid-template-columns: 1fr;
        grid-template-areas: "main" "side" "paths";
        grid-template-rows: auto;
    }
    .steps { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .hero { padding: 48px 16px 26px; border-radius: 18px; }
    .hero-title { letter-spacing: 0.18em; padding-left: 0.18em; }
    .hero-ctas .btn { width: 100%; }
    .rates-grid { grid-template-columns: repeat(2, 1fr); }
    /* the gate and the moon sit left of the centre of the Halloween art */
    .hero-season { background-position: 30% 40%; }
    .season-badge { top: 10px; font-size: 0.76rem; }
    .season-badge .season-until { display: none; }
}

/* Step 1 when the visitor is already signed in. */
.step.step-done .step-no {
    background: rgba(52, 211, 153, 0.16);
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.45);
}