/* =====================================================================
   v42 · page heads: the preloader's sky + the breadcrumb as a constellation
   switch: FEATURES["page_head_v42"] in build.py · behaviour: assets/js/crumbs42.js
   ===================================================================== */

/* ---- the sky (same as the preloader: pure black night, drawn on .fg-ph-sky) */
.fg-page-hero, .fg-ct-top { position: relative; overflow: hidden; background: #000; }
.fg-page-hero::before { content: none; }
.fg-ph-sky { position: absolute; left: 0; top: 0; z-index: 0; display: block; pointer-events: none; }
.fg-ph-fade { position: absolute; left: 0; right: 0; bottom: 0; height: min(34%, 240px); z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--fg-bg)); }
.fg-page-hero .fg-wrap, .fg-ct-top .fg-wrap { position: relative; z-index: 2; }
.fg-page-hero .fg-ph-floats { z-index: 2; }

/* ---- the constellation */
.fg-cst { position: relative; margin: 0 0 clamp(30px, 4vw, 46px); max-width: 100%; }
.fg-cst ol { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start;
    column-gap: clamp(34px, 5.2vw, 76px); row-gap: 26px; list-style: none; margin: 0; padding: 14px 0 0; }
.fg-cst li { position: relative; display: block; transform: translateY(var(--dy, 0px)); }
.fg-cst li:nth-child(2) { --dy: -11px; }
.fg-cst li:nth-child(3) { --dy: 5px; }
.fg-cst li:nth-child(4) { --dy: -7px; }
.fg-cst li:nth-child(5) { --dy: 3px; }
.fg-cst a, .fg-cst li > .st, .fg-cst li[aria-current] { color: inherit; }
.fg-cst a { display: block; text-decoration: none; }
.fg-cst .lines-pad { display: none; }

/* a step: the star on top, its designation and name below — as on a star chart */
.fg-cst .st {
    position: relative; display: block; width: 7px; height: 7px; margin: 0 0 15px 1px; border-radius: 50%;
    background: #f3f1ec; box-shadow: 0 0 6px 1px rgba(220, 230, 255, 0.55), 0 0 18px 3px rgba(200, 215, 255, 0.12);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s;
}
.fg-cst .st::after {                                   /* the flash when a star is lit / hit */
    content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; color: rgba(243, 241, 236, 0.8);
}
.fg-cst li.is-lit .st::after { animation: fgCstRing 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fgCstRing { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(4.2); opacity: 0; } }
.fg-cst .tag { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.fg-cst em { font-family: var(--fg-serif); font-style: italic; font-size: 15px; line-height: 1; color: rgba(243, 241, 236, 0.42); }
.fg-cst .lb { font-family: var(--fg-body); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1;
    color: rgba(243, 241, 236, 0.62); transition: color 0.35s; }
.fg-cst .lb .ch i { display: inline-block; font-style: normal; }
.fg-cst .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hover: the star swells and brightens, the name lights */
.fg-cst a:hover .st, .fg-cst a:focus-visible .st { transform: scale(1.7); box-shadow: 0 0 8px 2px rgba(235, 240, 255, 0.85), 0 0 26px 6px rgba(200, 215, 255, 0.22); }
.fg-cst a:hover .lb, .fg-cst a:focus-visible .lb { color: #f3f1ec; }
.fg-cst a:hover .lb .ch i { animation: fgCstWave 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.fg-cst a:hover .lb .ch i:nth-child(2n) { animation-delay: 0.03s; }
.fg-cst a:hover .lb .ch i:nth-child(3n) { animation-delay: 0.06s; }
@keyframes fgCstWave { 0% { transform: none; } 40% { transform: translateY(-3px); } 100% { transform: none; } }

/* you are here: the red star, flickering like the brightest stars of the sky */
.fg-cst li[aria-current] .st {
    width: 10px; height: 10px; margin: -1.5px 0 13.5px -0.5px; background: #ff5b5f;
    box-shadow: 0 0 8px 2px rgba(184, 32, 37, 0.9), 0 0 26px 8px rgba(184, 32, 37, 0.35);
}
.fg-cst.is-on li[aria-current] .st, .fg-cst.is-static li[aria-current] .st { animation: fgCstFlicker 3.7s linear infinite 1.6s; }
.fg-cst li[aria-current] .st::before {                 /* its slow halo */
    content: ""; position: absolute; inset: -10px; border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 32, 37, 0.35), rgba(184, 32, 37, 0) 70%); animation: fgCstHalo 4.6s ease-in-out infinite;
}
.fg-cst li[aria-current] .st::after { color: rgba(255, 91, 95, 0.9); }
.fg-cst li[aria-current].is-hit .st::after { animation: fgCstRing 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.fg-cst li[aria-current].is-hit .st { animation: fgCstFlicker 3.7s linear infinite, fgCstFlare 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.fg-cst li[aria-current] em { color: rgba(255, 91, 95, 0.85); font-size: 17px; }
.fg-cst li[aria-current] .lb { font-family: var(--fg-serif); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.5vw, 21px);
    letter-spacing: 0; text-transform: none; color: #f3f1ec; }
@keyframes fgCstFlicker {
    0%, 100% { opacity: 1; } 7% { opacity: 0.72; } 11% { opacity: 1; } 29% { opacity: 0.86; } 33% { opacity: 0.6; } 36% { opacity: 1; }
    58% { opacity: 0.9; } 61% { opacity: 0.68; } 64% { opacity: 1; } 82% { opacity: 0.8; } 85% { opacity: 1; }
}
@keyframes fgCstHalo { 0%, 100% { transform: scale(0.85); opacity: 0.7; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes fgCstFlare { 0% { transform: scale(1); } 30% { transform: scale(1.9); } 100% { transform: scale(1); } }

/* the lines and the comet (svg drawn by crumbs42.js) */
.fg-cst-lines { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.fg-cst-lines .seg { stroke: rgba(243, 241, 236, 0.3); stroke-width: 1; stroke-linecap: round; fill: none; transition: stroke 0.35s; }
.fg-cst-lines .seg.is-hot { stroke: rgba(243, 241, 236, 0.75); }
.fg-cst-lines .seg:last-of-type { stroke: rgba(255, 120, 124, 0.45); }
.fg-cst-lines .comet { fill: #fff; opacity: 0; }
.fg-cst-lines .comet-glow { fill: rgba(255, 210, 200, 0.22); opacity: 0; filter: blur(3px); }

/* before it plays: everything waits in the dark */
.fg-cst:not(.is-on):not(.is-static) .st,
.fg-cst:not(.is-on):not(.is-static) em,
.fg-cst:not(.is-on):not(.is-static) .ch i { opacity: 0; }

/* contact head: the constellation spans the grid */
.fg-ct-head .fg-cst { grid-column: 1 / -1; margin-bottom: 4px; }

@media (max-width: 575px) {
    .fg-cst ol { column-gap: 30px; row-gap: 22px; }
    .fg-cst .lb { font-size: 10.5px; letter-spacing: 0.13em; }
    .fg-cst em { font-size: 13px; }
    .fg-cst li[aria-current] .lb { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .fg-cst li[aria-current] .st, .fg-cst li[aria-current] .st::before { animation: none; }
}