/* =========================================================
   Single CSS - Prism in the Space
   標準投稿 Single 用
========================================================= */


/* =========================================================
   1. 宇宙空間と背景（front-page.css と一致）
========================================================= */
.galaxy-universe-root {
    position: fixed;
    inset: 0;
    z-index: 0;

    background-color: var(--bg-deep);
}

.galaxy-container {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    perspective: 1600px;
}

.galaxy-background {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        radial-gradient(circle at 20% 80%, rgba(0, 45, 30, 0.5) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 30, 90, 0.5) 0%, transparent 50%),
        radial-gradient(circle at center, rgba(0, 68, 255, 0.15) 0%, transparent 80%);
}


/* =========================================================
   2. 背景マニフェスト（front-page.css と一致）
========================================================= */
.galaxy-manifesto {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: grid;
    place-items: center;

    padding: 3vw;

    overflow: hidden;
    pointer-events: none;
}

.manifesto-line {
    width: min(92vw, 1600px);

    white-space: normal;
    text-align: center;

    font-size: clamp(16px, 2vw, 38px);
    line-height: 1.75;
    letter-spacing: 0.06em;

    color: rgba(180, 220, 255, 0.03);

    transform: rotate(-2deg);

    filter: blur(0.15px);

    text-shadow:
        0 0 4px rgba(0, 242, 255, 0.07),
        0 0 10px rgba(0, 120, 255, 0.05);
}


/* =========================================================
   3. 軌道（front-page.css と一致）
========================================================= */
.galaxy-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 20;

    border: 2.5px solid rgba(0, 242, 255, 0.18);
    border-radius: 50%;

    box-shadow:
        0 0 8px rgba(0, 242, 255, 0.15);

    transform-style: preserve-3d;
    pointer-events: none;
}

.orbit-shape {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    transform-style: preserve-3d;
}

.orbit-inner {
    width: 650px;
    height: 650px;

    animation: orbitSpinInner 95s linear infinite;
}

.orbit-inner .orbit-shape {
    animation: orbitBreatheInner 17s ease-in-out infinite;
}

.orbit-outer {
    width: 1050px;
    height: 1050px;

    animation: orbitSpinOuter 110s linear infinite;
}

.orbit-outer .orbit-shape {
    animation: orbitBreatheOuter 26s ease-in-out infinite;
}

@keyframes orbitSpinInner {
    0% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateY(45deg) rotateZ(0deg);
    }

    20% {
        transform: translate(-50%, -50%) rotateX(82deg) rotateY(10deg) rotateZ(70deg);
    }

    40% {
        transform: translate(-50%, -50%) rotateX(60deg) rotateY(-35deg) rotateZ(150deg);
    }

    60% {
        transform: translate(-50%, -50%) rotateX(78deg) rotateY(20deg) rotateZ(230deg);
    }

    80% {
        transform: translate(-50%, -50%) rotateX(72deg) rotateY(50deg) rotateZ(310deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateY(45deg) rotateZ(360deg);
    }
}

@keyframes orbitSpinOuter {
    0% {
        transform: translate(-50%, -50%) rotateX(65deg) rotateY(-45deg) rotateZ(0deg);
    }

    20% {
        transform: translate(-50%, -50%) rotateX(80deg) rotateY(-10deg) rotateZ(-80deg);
    }

    40% {
        transform: translate(-50%, -50%) rotateX(90deg) rotateY(15deg) rotateZ(-160deg);
    }

    60% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateY(-30deg) rotateZ(-240deg);
    }

    80% {
        transform: translate(-50%, -50%) rotateX(75deg) rotateY(-55deg) rotateZ(-320deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(65deg) rotateY(-45deg) rotateZ(-360deg);
    }
}

@keyframes orbitBreatheInner {
    0%,
    100% {
        transform: scaleX(1) scaleY(0.88);
    }

    25% {
        transform: scaleX(1.04) scaleY(0.84);
    }

    55% {
        transform: scaleX(0.94) scaleY(0.92);
    }

    80% {
        transform: scaleX(1.02) scaleY(0.86);
    }
}

@keyframes orbitBreatheOuter {
    0%,
    100% {
        transform: scaleX(1) scaleY(0.86);
    }

    30% {
        transform: scaleX(0.93) scaleY(0.92);
    }

    60% {
        transform: scaleX(1.06) scaleY(0.82);
    }

    85% {
        transform: scaleX(0.97) scaleY(0.89);
    }
}


/* =========================================================
   4. 下層コンテンツ
========================================================= */
.page-shell {
    position: relative;
    z-index: 10;

    min-height: 100vh;

    display: flex;
    align-items: flex-start;

    padding-top: 80px;
    padding-bottom: 80px;
}

.page-container {
    width: min(760px, calc(100vw - 40px));
    max-width: 760px;
    box-sizing: border-box;

    margin: 0 auto;
    padding: 64px 32px;

    background: rgba(0, 15, 40, 0.26);
    border: 1px solid rgba(0, 242, 255, 0.16);

    backdrop-filter: none;

    box-shadow:
        0 0 18px rgba(0, 242, 255, 0.1),
        inset 0 0 20px rgba(0, 242, 255, 0.06);
}

.page-content {
    color: var(--text-light);
}

.page-content h1 {
    margin-top: 0;
    margin-bottom: 32px;

    line-height: 1.3;
}

.page-content p {
    margin-top: 0;
    margin-bottom: 1.4em;

    line-height: 1.9;
}


/* =========================================================
   5. Single Header
========================================================= */
.single-header {
    position: relative;

    margin-bottom: 80px;
}

.single-header h1 {
    position: relative;
    z-index: 2;

    max-width: 70%;
    margin: 0;
}

.single-en-title {
    position: absolute;
    right: 2%;
    top: 120%;

    font-family: var(--font-display);
    font-size: clamp(0.8rem, 1.4vw, 1.4rem);
    letter-spacing: 0.14em;

    color: rgba(255, 255, 255, 0.88);
    opacity: 0.85;

    transform: rotate(-5deg);
    animation: floatGold 7s ease-in-out infinite;

    text-shadow:
        0 0 6px rgba(197, 160, 89, 0.85),
        0 0 18px rgba(197, 160, 89, 0.55),
        0 0 36px rgba(197, 160, 89, 0.28);

    pointer-events: none;
}

@keyframes floatGold {
    0%,
    100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-6px) rotate(-4deg);
    }
}


/* =========================================================
   6. Single Body
========================================================= */
.single-body {
    margin-top: 24px;
}

.single-body h3 {
    position: relative;

    margin-top: 56px;
    margin-bottom: 20px;
    padding-left: 18px;

    font-size: clamp(19px, 1.65vw, 25px);
    font-weight: 500;
    line-height: 1.65;
    letter-spacing: 0.07em;

    color: rgba(244, 220, 158, 0.92);
}

.single-body h3::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0.42em;

    width: 2px;
    height: 1.45em;

    background:
        linear-gradient(
            to bottom,
            rgba(214, 178, 92, 0.78),
            rgba(214, 178, 92, 0.16)
        );
}

.single-date {
    margin-top: 40px;

    text-align: right;

    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.12em;

    color: rgba(224, 242, 255, 0.5);
    opacity: 0.6;
}

.single-body img {
    display: block;

    max-width: 100%;
    height: auto;

    margin: 20px auto 0;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 2px;

    box-shadow:
        0 0 24px rgba(0, 242, 255, 0.08);
}

.single-body p:has(img) {
    margin-bottom: 18px;
}

.single-body p a + br {
    display: none;
}

.single-body p a + br + a img {
    margin-top: 10px;
}

.single-body a img {
    transition:
        transform 0.7s ease,
        filter 0.45s ease,
        box-shadow 0.45s ease;
}

.single-body a:hover img {
    transform: scale(1.015);

    filter:
        saturate(1.04)
        brightness(1.02);

    box-shadow:
        0 0 18px rgba(0, 242, 255, 0.12),
        0 0 42px rgba(0, 120, 255, 0.08);
}


/* =========================================================
   7. Category Color Control
========================================================= */

/* Column / Insight 系 */
body.cat-2 .page-container,
body.category-insights .page-container,
body.category-momory .page-container,
body.category-truth .page-container,
body.category-cross-over .page-container {
    border-color: rgba(0, 242, 255, 0.28);
}

/* Mission Log 系 */
body.cat-3 .page-container,
body.category-mission-log .page-container {
    border-color: rgba(197, 160, 89, 0.35);
}


/* =========================================================
   8. Single Back Link
   PCでは画面固定 / SPではContainer内に自然配置
========================================================= */
.story-single-back {
    position: fixed;
    left: 42px;
    bottom: 96px;
    z-index: 80;
}

.story-single-back a {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    color: rgba(255, 220, 150, 0.72);

    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.24em;
    line-height: 1.4;

    text-transform: uppercase;
    text-decoration: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.story-single-back a::after {
    content: "";

    display: block;

    width: 96px;
    height: 1px;

    background:
        linear-gradient(
            to right,
            currentColor,
            transparent
        );

    opacity: 0.6;
}

.story-single-back a:hover {
    opacity: 0.72;

    transform:
        translateX(-4px);
}


/* =========================================================
   9. Single Pager
========================================================= */
.single-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

    margin-top: 56px;
    padding-top: 28px;

    border-top: 1px solid rgba(0, 242, 255, 0.14);
}

.single-pager-prev {
    text-align: left;
}

.single-pager-next {
    text-align: right;
}

.single-pager a {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    max-width: 100%;

    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    line-height: 1.4;

    color: rgba(224, 242, 255, 0.62);
    text-decoration: none;

    transition:
        opacity 0.3s ease,
        text-shadow 0.3s ease,
        transform 0.3s ease;
}

.single-pager a:hover {
    opacity: 0.9;

    text-shadow:
        0 0 8px rgba(0, 242, 255, 0.45),
        0 0 18px rgba(197, 160, 89, 0.28);
}

.single-pager-prev a:hover {
    transform: translateX(-4px);
}

.single-pager-next a:hover {
    transform: translateX(4px);
}

.pager-label {
    opacity: 0.45;
}

.pager-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.pager-mark {
    font-size: 0.9rem;

    color: rgba(197, 160, 89, 0.78);
}


/* =========================================================
   10. Responsive
========================================================= */
@media (min-width: 769px) {
    .galaxy-manifesto {
        padding: 2vw 4vw;
    }

    .manifesto-line {
        width: 96vw;
        max-width: none;

        font-size: clamp(20px, 1.75vw, 38px);
        line-height: 2.35;
        letter-spacing: 0.09em;
    }
}

@media (max-width: 768px) {
    .orbit-inner {
        width: 420px;
        height: 420px;
    }

    .orbit-outer {
        width: 680px;
        height: 680px;
    }

    .galaxy-manifesto {
        padding: 8vh 6vw;
        align-items: center;
    }

    .manifesto-line {
        width: 88vw;

        font-size: clamp(13px, 3.6vw, 18px);
        line-height: 2.15;
        letter-spacing: 0.04em;

        transform: rotate(-2deg);
    }

    .page-shell {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .page-container {
        width: calc(100vw - 32px);
        max-width: none;

        margin: 0 auto;
        padding: 80px 22px;
    }

    .single-header {
        margin-bottom: 36px;
    }

    .single-header h1 {
        max-width: 100%;

        margin-bottom: 24px;

        font-size: clamp(26px, 7.2vw, 36px);
    }

    .single-en-title {
        position: relative;
        right: auto;
        top: auto;

        display: block;

        margin-top: 0;
        margin-bottom: 0;

        font-size: 0.75rem;
        line-height: 1.4;
        letter-spacing: 0.12em;

        transform: none;
        animation: none;
    }

    .story-single-back {
        position: relative;
        left: auto;
        bottom: auto;

        width: 100%;
        max-width: none;

        margin: 34px auto 0;

        z-index: 80;
    }

    .story-single-back a {
        gap: 12px;

        font-size: 0.7rem;
        letter-spacing: 0.18em;
    }

    .story-single-back a::after {
        width: 54px;
    }

    .single-pager {
        grid-template-columns: 1fr;
        gap: 18px;

        margin-top: 40px;
        padding-top: 22px;
    }

    .single-pager-prev {
        text-align: left;
    }

    .single-pager-next {
        text-align: right;
    }

    .single-pager a {
        align-items: flex-start;

        font-size: 0.72rem;
        letter-spacing: 0.12em;
    }
}