/*
 * Homepage-only cinematic layout. This stylesheet is loaded by index.html
 * after the shared styles, so article and resource pages keep their design.
 * The intro overlay deliberately has no rules here.
 */

.home-cinematic {
    width: min(calc(100% - 40px), var(--page-width));
    height: calc(100svh - 178px);
    min-height: 530px;
    padding: 0;
}

.home-cinematic-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 330px);
    gap: clamp(36px, 7vw, 112px);
    width: 100%;
    height: 100%;
}

/* Open editorial copy in front of the video, not another glass card. */
.home-identity {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
    padding: clamp(68px, 12vh, 138px) 0 clamp(4px, 1.5vh, 18px);
}

.home-identity-copy {
    max-width: 650px;
    text-shadow: 0 3px 26px rgba(0, 13, 28, 0.58);
}

.home-identity h1 {
    margin: 0;
    color: #f0f8ff;
    font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
    font-size: clamp(68px, 8.2vw, 110px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.08em;
}

.home-identity-role {
    margin: clamp(16px, 2.2vh, 24px) 0 0;
    color: #d0efff;
    font-size: clamp(16px, 1.32vw, 20px);
    font-weight: 650;
    letter-spacing: 0.21em;
}

.home-identity-intro {
    max-width: 590px;
    margin: clamp(17px, 2.4vh, 26px) 0 0;
    color: #e0eaf3;
    font-size: clamp(14px, 1.08vw, 17px);
    font-weight: 500;
    line-height: 1.84;
    letter-spacing: 0.055em;
}

.home-identity-actions {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-top: clamp(26px, 4vh, 42px);
}

.home-read-action {
    min-width: 180px;
    min-height: 60px;
    padding: 0 28px;
    border-radius: 999px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.home-read-action svg {
    width: 20px;
    height: 20px;
    margin-left: 9px;
}

.home-social-action {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.home-social-action .profile-action-logo {
    width: 22px;
    height: 22px;
}

/* The radio is a compact control, not a second hero panel. */
.home-radio {
    position: relative;
    flex: 0 0 auto;
    width: min(100%, 500px);
    height: 100px;
    margin-top: 28px;
    padding: 10px 13px 10px 10px;
    border-radius: 28px;
    box-shadow: 0 18px 48px rgba(0, 10, 28, 0.25);
}

.home-radio.is-open {
    height: auto;
}

.home-cinematic:has(.home-radio.is-open) {
    height: auto;
    min-height: calc(100svh - 178px);
}

.home-cinematic:has(.home-radio.is-open) .home-cinematic-layout {
    height: auto;
    min-height: calc(100svh - 178px);
}

.home-radio.liquid-surface {
    overflow: visible;
}

.home-radio > .liquid-glass-layer {
    overflow: hidden;
    border-radius: inherit;
}

.home-radio .radio-head {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    gap: 15px;
    align-items: center;
    width: 100%;
    height: 78px;
    min-height: 0;
}

.home-radio .radio-cover {
    width: 78px;
    height: 78px;
    aspect-ratio: 1;
    border-radius: 17px;
}

.home-radio .radio-meta {
    min-width: 0;
}

.home-radio .radio-meta h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: 0.05em;
}

.home-radio-state {
    margin: 7px 0 0;
    color: #b8cce0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.09em;
}

.home-radio .radio-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    margin: 0;
}

.home-radio .radio-button {
    display: grid;
    place-items: center;
    width: 47px;
    height: 48px;
    min-height: 0;
    padding: 0;
    border-radius: 50%;
}

.home-radio .radio-button svg {
    width: 20px;
    height: 20px;
}

.home-radio .home-radio-play {
    cursor: not-allowed;
}

.home-radio .radio-toggle {
    width: 47px;
    margin-left: 7px;
    border-left: 1px solid rgba(220, 241, 255, 0.2);
    border-radius: 14px;
    background: transparent;
}

.home-radio .radio-toggle:hover {
    color: #fff;
    background: transparent;
}

.home-radio .radio-toggle:focus-visible,
.home-map-node:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

/* The explanation expands the card in document flow, so it never covers the
   primary actions or the content map. The default collapsed view stays slim. */
.home-radio .radio-panel {
    position: relative;
    max-height: 0;
    padding: 0 18px;
    overflow: hidden;
    border: 0 solid transparent;
    border-radius: 19px;
    background: rgba(5, 26, 40, 0.9);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.home-radio.is-open .radio-panel {
    max-height: 260px;
    margin-top: 10px;
    padding: 15px 18px;
    border-top: 1px solid rgba(185, 225, 235, 0.24);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

.home-radio .radio-empty-note,
.home-radio.is-empty .radio-empty-note {
    display: block;
    margin: 0;
    padding: 0;
    color: #d9e9ec;
    font-size: 12px;
    line-height: 1.7;
    border: 0;
    background: transparent;
}

/* One continuous asymmetric glass surface. A masked backdrop layer softens
   the route on the left while the same video remains visible on the right. */
.home-map {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    margin: clamp(24px, 4.6vh, 44px) 0 clamp(12px, 2.8vh, 28px);
    padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 27px);
    border-radius: 30px;
    box-shadow: 0 18px 48px rgba(0, 13, 26, 0.24);
}

.home-map::before,
.home-map::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.home-map::before {
    z-index: 1;
    backdrop-filter: blur(15px) saturate(1.12);
    -webkit-backdrop-filter: blur(15px) saturate(1.12);
    mask-image: linear-gradient(to right, #000 0%, #000 36%, rgba(0, 0, 0, 0.45) 51%, transparent 67%);
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 36%, rgba(0, 0, 0, 0.45) 51%, transparent 67%);
}

.home-map::after {
    z-index: 2;
    background: linear-gradient(90deg, rgba(3, 29, 44, 0.72) 0%, rgba(3, 29, 44, 0.48) 44%, rgba(3, 29, 44, 0.12) 67%, transparent 100%);
}

.home-map .liquid-glass-cover {
    background: transparent;
    backdrop-filter: brightness(1.3) saturate(1.12);
    -webkit-backdrop-filter: brightness(1.3) saturate(1.12);
    mask-image: linear-gradient(to right, transparent 46%, #000 79%);
    -webkit-mask-image: linear-gradient(to right, transparent 46%, #000 79%);
}

.home-map .liquid-glass-reflect {
    z-index: 4;
}

.home-map .liquid-glass-sharp {
    z-index: 6;
    box-shadow: inset 1px 1px 0 rgba(223, 255, 255, 0.37), inset -1px -1px 0 rgba(216, 245, 255, 0.24);
}

.home-map-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(213, 240, 245, 0.25);
}

.home-map-heading h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(25px, 2.15vw, 31px);
    font-weight: 600;
    letter-spacing: 0.035em;
    line-height: 1.15;
}

.home-map-compass {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border: 1px solid rgba(142, 228, 247, 0.78);
    border-radius: 50%;
}

.home-map-compass::before,
.home-map-compass::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.home-map-compass::before {
    width: 5px;
    height: 5px;
    background: #a7f4ff;
    box-shadow: 0 0 10px rgba(148, 241, 255, 0.8);
}

.home-map-compass::after {
    width: 2px;
    height: 35px;
    background: linear-gradient(180deg, transparent, rgba(151, 231, 246, 0.45), transparent);
}

.home-map-path {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
    min-height: 0;
    margin-top: 16px;
    padding: 2px 0 0;
}

.home-map-path::before {
    content: "";
    position: absolute;
    top: 9px;
    bottom: 24px;
    left: 11px;
    width: 1px;
    background: linear-gradient(180deg, rgba(137, 242, 254, 0.9), rgba(190, 221, 233, 0.74) 56%, rgba(167, 204, 217, 0.38));
    box-shadow: 0 0 9px rgba(92, 222, 242, 0.44);
    pointer-events: none;
}

.home-map .home-map-node {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 24px;
    justify-items: stretch;
    align-items: start;
    width: 100%;
    min-height: 49px;
    padding: 0;
    color: #eef9ff;
    text-align: left;
    border-radius: 10px;
    background: transparent;
    transition: transform 0.32s var(--spring), filter 0.26s ease, opacity 0.26s ease;
}

.home-map .home-map-node:hover,
.home-map .home-map-node:focus-visible {
    background: transparent;
    transform: translateX(3px);
    filter: brightness(1.16);
}

.home-map .home-map-node .star-dot {
    position: relative;
    z-index: 1;
    width: 17px;
    height: 17px;
    margin: 4px 0 0 3px;
    border: 2px solid #b6e5f3;
    border-radius: 50%;
    background: #295a70;
    box-shadow: 0 0 0 3px rgba(14, 65, 78, 0.7), 0 0 12px rgba(115, 224, 247, 0.55);
}

.home-map .home-map-node.is-featured .star-dot {
    border-color: #d7fbff;
    background: #edfaff;
    box-shadow: 0 0 0 4px rgba(17, 99, 117, 0.66), 0 0 21px rgba(130, 246, 255, 0.94);
}

.home-map .home-map-node:hover .star-dot,
.home-map .home-map-node:focus-visible .star-dot,
.home-map .home-map-node.is-active .star-dot {
    transform: scale(1.16);
    box-shadow: 0 0 0 4px rgba(17, 99, 117, 0.66), 0 0 24px rgba(130, 246, 255, 0.96);
}

.home-map-copy {
    display: block;
    min-width: 0;
}

.home-map .star-label {
    display: block;
    color: #f2fbff;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(18px, 1.52vw, 22px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.04em;
}

.home-node-arrow {
    display: inline-block;
    margin-left: 5px;
    color: #a9edff;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: 400;
    transition: transform 0.3s var(--spring);
}

.home-map-node:hover .home-node-arrow,
.home-map-node:focus-visible .home-node-arrow {
    transform: translateX(4px);
}

.home-map-description {
    display: block;
    margin-top: 10px;
    color: #c0d2db;
    font-size: clamp(10px, 0.85vw, 12px);
    font-weight: 600;
    line-height: 1.62;
    letter-spacing: 0.025em;
}

.home-map .home-map-node.is-pending {
    opacity: 0.57;
    cursor: default;
    pointer-events: none;
}

.home-map .home-map-node.is-pending .star-dot {
    border-color: rgba(170, 205, 220, 0.65);
    background: rgba(51, 86, 103, 0.65);
    box-shadow: 0 0 0 3px rgba(16, 46, 57, 0.55);
}

.home-map .home-map-node.is-pending .star-label {
    color: #c8d4db;
}

.home-map .home-map-node.is-pending .home-map-description {
    margin-top: 5px;
    color: #b7c4cc;
}

/* Match the wide reference composition: generous open center, a narrower
   route on the far right, and the player resting above the footer. */
@media (min-width: 1400px) and (min-height: 800px) {
    .home-cinematic-layout {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .home-identity {
        position: relative;
        top: 12px;
        left: -15px;
        padding-top: clamp(140px, 16vh, 160px);
        padding-bottom: clamp(40px, 6.5vh, 60px);
    }

    .home-map {
        margin-top: 47px;
        margin-bottom: 37px;
        top: 14px;
        left: 60px;
    }
}

@media (max-width: 1000px) {
    .home-cinematic-layout {
        gap: 36px;
    }

    .home-identity h1 {
        font-size: clamp(68px, 8vw, 89px);
    }

    .home-identity-role {
        letter-spacing: 0.12em;
    }
}

@media (min-width: 801px) and (max-width: 999px) {
    /* The shared page bottom padding was sized for the old long homepage.
       Trim it here so the fixed dock stays collapsed and clear of the radio. */
    body.video-bg:has(.home-cinematic) {
        padding-bottom: 70px;
    }
}

@media (max-width: 800px) {
    .home-cinematic {
        height: auto;
        min-height: 0;
        padding-bottom: 38px;
    }

    .home-cinematic-layout {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .home-identity {
        min-height: 530px;
        padding: clamp(75px, 13vh, 125px) 0 0;
    }

    .home-identity-copy {
        max-width: 600px;
    }

    .home-map {
        width: min(100%, 560px);
        min-height: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 560px) {
    .home-cinematic {
        width: min(calc(100% - 32px), var(--page-width));
    }

    .home-identity {
        min-height: 465px;
        padding-top: 68px;
    }

    .home-identity h1 {
        font-size: clamp(60px, 15vw, 78px);
    }

    .home-identity-role {
        font-size: 13px;
        letter-spacing: 0.06em;
    }

    .home-identity-intro {
        font-size: 13px;
    }

    .home-desktop-break {
        display: none;
    }

    .home-identity-actions {
        gap: 11px;
    }

    .home-read-action {
        min-width: 150px;
        min-height: 53px;
        padding-inline: 20px;
        font-size: 15px;
    }

    .home-social-action {
        width: 52px;
        height: 52px;
    }

    .home-radio {
        height: 92px;
        margin-top: 25px;
    }

    .home-radio .radio-head {
        grid-template-columns: 68px minmax(0, 1fr) auto;
        gap: 10px;
        height: 68px;
    }

    .home-radio .radio-cover {
        width: 68px;
        height: 68px;
    }

    .home-radio .radio-meta h2 {
        font-size: 18px;
    }

    .home-radio .radio-button {
        width: 35px;
        height: 42px;
    }

    .home-radio .radio-toggle {
        width: 32px;
        margin-left: 2px;
    }

    .home-map {
        min-height: 590px;
        padding: 24px 21px;
    }

    .home-map .star-label {
        font-size: 20px;
    }

    .home-map-description {
        font-size: 12px;
    }
}

@media (max-height: 690px) and (min-width: 801px) {
    .home-cinematic {
        min-height: 590px;
        height: auto;
    }

    .home-map {
        min-height: 520px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-map-node,
    .home-map .star-dot,
    .home-node-arrow {
        transition: none !important;
    }
}