/* genpatsu.quest -- surreal dreamscape on the nuclear question */

:root {
    --void-indigo: #0d0221;
    --twilight-purple: #2d1b69;
    --horizon-amber: #ff8f00;
    --soft-rose: #ffab91;
    --deep-crimson: #6d0000;
    --radiance-gold: #ffd54f;
    --dawn-blue: #1a237e;
    --ghost-white: #ede7f6;

    --bg-start: var(--void-indigo);
    --bg-end: var(--twilight-purple);

    --font-jp-display: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --font-jp-gothic: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
    --font-en: "Cormorant Garamond", "Times New Roman", serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

body {
    background: var(--void-indigo);
    color: var(--ghost-white);
    font-family: var(--font-en);
    line-height: 1.6;
    min-height: 100vh;
    overscroll-behavior-y: none;
}

/* ============================================================
   Atmosphere -- the scroll-linked aurora gradient
============================================================ */
.atmosphere {
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 213, 79, 0.06), transparent 55%),
        radial-gradient(ellipse at 70% 80%, rgba(45, 27, 105, 0.45), transparent 60%),
        linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
    transition: background 1.6s ease-out;
    will-change: background;
}

.aurora-veil {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 171, 145, 0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255, 213, 79, 0.05), transparent 45%);
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: veil-drift 28s ease-in-out infinite alternate;
}

@keyframes veil-drift {
    0%   { transform: translate3d(-2%, -1%, 0) scale(1.04); opacity: 0.55; }
    50%  { transform: translate3d(2%, 1%, 0) scale(1.08); opacity: 0.85; }
    100% { transform: translate3d(-1%, 2%, 0) scale(1.02); opacity: 0.6; }
}

/* ============================================================
   Journey container
============================================================ */
.journey {
    position: relative;
    z-index: 1;
}

.scene {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    padding: clamp(3rem, 8vh, 8rem) clamp(1.5rem, 6vw, 6rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Scene 1 -- The Question
============================================================ */
.scene--question {
    min-height: 100vh;
}

.hero-stage {
    text-align: center;
    position: relative;
    z-index: 2;
}

.hero-jp {
    font-family: var(--font-jp-display);
    font-weight: 900;
    font-size: clamp(3rem, 7vw, 6rem);
    letter-spacing: 0.18em;
    color: var(--ghost-white);
    line-height: 1.4;
    text-shadow: 0 0 40px rgba(237, 231, 246, 0.15);
}

.hero-jp .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1200ms ease-out, transform 1200ms ease-out;
    transition-delay: calc(var(--i, 0) * 80ms + 500ms);
}

.hero-jp.is-visible .char {
    opacity: 1;
    transform: translateY(0);
}

.hero-en {
    margin-top: clamp(1.5rem, 3vh, 3rem);
    font-family: var(--font-en);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.6rem);
    letter-spacing: 0.3em;
    color: var(--ghost-white);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 1400ms ease-out 1900ms, transform 1400ms ease-out 1900ms;
}

.hero-en.is-visible {
    opacity: 0.6;
    transform: translateY(0);
}

.chevron {
    position: absolute;
    bottom: clamp(2rem, 5vh, 4rem);
    left: 50%;
    transform: translateX(-50%);
    color: var(--ghost-white);
    opacity: 0;
    transition: opacity 1200ms ease-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    animation: chev-bounce 2s ease-in-out infinite;
}

.chevron.is-visible {
    opacity: 0.55;
    animation: chev-bounce 2s ease-in-out infinite, chev-pulse 2s ease-in-out infinite;
}

.chevron.is-hidden {
    opacity: 0 !important;
    pointer-events: none;
}

.chevron-label {
    font-family: var(--font-en);
    font-weight: 300;
    font-style: italic;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    text-transform: lowercase;
}

@keyframes chev-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, 8px); }
}

@keyframes chev-pulse {
    0%, 100% { opacity: 0.3; }
    50%      { opacity: 0.8; }
}

/* ============================================================
   Scene 2 -- The Atom
============================================================ */
.scene--atom {
    min-height: 120vh;
}

.atom-stage {
    position: relative;
    width: clamp(280px, 50vw, 520px);
    height: clamp(280px, 50vw, 520px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.atom-core {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--radiance-gold) 0%, rgba(255, 213, 79, 0.6) 50%, transparent 80%);
    box-shadow: 0 0 24px rgba(255, 213, 79, 0.7), 0 0 48px rgba(255, 213, 79, 0.35);
    animation: core-breath 6s ease-in-out infinite;
}

.atom-glow {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 213, 79, 0.18) 0%, transparent 65%);
    filter: blur(8px);
    animation: glow-pulse 8s ease-in-out infinite;
}

@keyframes core-breath {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.8; }
}

@keyframes glow-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.2); opacity: 1; }
}

.orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(237, 231, 246, 0.08);
    transform-style: preserve-3d;
}

.orbit--1 { width: 160px; height: 160px; animation: spin 8s linear infinite; }
.orbit--2 { width: 280px; height: 280px; animation: spin 12s linear infinite reverse; }
.orbit--3 { width: 400px; height: 400px; animation: spin 18s linear infinite; }

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--radiance-gold) 0%, rgba(255, 213, 79, 0.3) 60%, transparent 100%);
    box-shadow: 0 0 12px rgba(255, 213, 79, 0.5);
    transition: opacity 1.6s ease-out, filter 1.6s ease-out;
}

.particle--a { width: 8px; height: 8px; top: 50%; left: 100%; transform: translate(-50%, -50%); opacity: 0.7; }
.particle--b { width: 10px; height: 10px; top: 0; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; }
.particle--c { width: 6px; height: 6px; top: 100%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; }
.particle--d { width: 12px; height: 12px; top: 50%; left: 0; transform: translate(-50%, -50%); opacity: 0.4; }
.particle--e { width: 5px; height: 5px; top: 14%; left: 86%; transform: translate(-50%, -50%); opacity: 0.5; }
.particle--f { width: 7px; height: 7px; top: 86%; left: 14%; transform: translate(-50%, -50%); opacity: 0.45; }

/* Agitated state propagated by JS to atom particles when entering shadow */
.scene--atom.is-agitated .particle {
    filter: brightness(1.4) blur(0.4px);
}

.scene--atom.is-agitated .orbit--1 { animation-duration: 3.5s; }
.scene--atom.is-agitated .orbit--2 { animation-duration: 5s; }
.scene--atom.is-agitated .orbit--3 { animation-duration: 7s; }

/* ============================================================
   Scene 3 -- The Promise
============================================================ */
.scene--promise {
    min-height: 130vh;
}

.drift-layer {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 80vh;
    will-change: transform;
}

.fragment {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.fragment--jp {
    font-family: var(--font-jp-display);
    font-weight: 700;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem);
    color: var(--soft-rose);
    letter-spacing: 0.18em;
}

.fragment--jp small {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-en);
    font-weight: 300;
    font-style: italic;
    font-size: 0.5em;
    color: var(--ghost-white);
    opacity: 0.7;
    letter-spacing: 0.2em;
}

.fragment--en {
    font-family: var(--font-en);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 1.7vw, 1.4rem);
    color: var(--ghost-white);
    opacity: 0.75;
    letter-spacing: 0.18em;
    max-width: 22ch;
    line-height: 2;
}

.sun-halo {
    position: absolute;
    bottom: -10vh;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    height: 90vw;
    max-width: 1200px;
    max-height: 1200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 143, 0, 0.22) 0%, rgba(255, 171, 145, 0.08) 40%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    animation: halo-drift 20s ease-in-out infinite alternate;
}

@keyframes halo-drift {
    0%   { transform: translate(-52%, 0) scale(1); opacity: 0.7; }
    100% { transform: translate(-48%, -3%) scale(1.05); opacity: 1; }
}

/* ============================================================
   Scene 4 -- The Shadow
============================================================ */
.scene--shadow {
    min-height: 130vh;
}

.shadow-stage {
    position: relative;
    width: clamp(280px, 45vw, 460px);
    height: clamp(280px, 45vw, 460px);
}

.orbit--chaos {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 143, 0, 0.18);
}

.orbit--c1 { width: 140px; height: 140px; margin: -70px 0 0 -70px; animation: spin 4s linear infinite; }
.orbit--c2 { width: 240px; height: 240px; margin: -120px 0 0 -120px; animation: spin 5.5s linear infinite reverse; }
.orbit--c3 { width: 360px; height: 360px; margin: -180px 0 0 -180px; animation: spin 7.5s linear infinite; }

.particle--chaos {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--horizon-amber) 0%, rgba(255, 143, 0, 0.4) 50%, transparent 100%);
    box-shadow: 0 0 16px rgba(255, 143, 0, 0.6);
    opacity: 0.85;
    animation: jitter 1.8s ease-in-out infinite;
}

.orbit--c1 .particle--chaos:nth-child(1) { top: 50%; left: 100%; transform: translate(-50%, -50%); }
.orbit--c2 .particle--chaos:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); animation-delay: -0.4s; }
.orbit--c2 .particle--chaos:nth-child(2) { top: 100%; left: 50%; transform: translate(-50%, -50%); animation-delay: -0.9s; }
.orbit--c3 .particle--chaos:nth-child(1) { top: 50%; left: 0; transform: translate(-50%, -50%); animation-delay: -0.2s; }
.orbit--c3 .particle--chaos:nth-child(2) { top: 14%; left: 86%; transform: translate(-50%, -50%); animation-delay: -1.1s; }
.orbit--c3 .particle--chaos:nth-child(3) { top: 86%; left: 14%; transform: translate(-50%, -50%); animation-delay: -0.6s; }

@keyframes jitter {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    25%      { transform: translate(-30%, -65%) scale(1.15); }
    50%      { transform: translate(-70%, -40%) scale(0.9); }
    75%      { transform: translate(-45%, -60%) scale(1.05); }
}

.ghost-warning {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-jp-display);
    font-weight: 900;
    font-size: clamp(6rem, 18vw, 16rem);
    color: var(--deep-crimson);
    letter-spacing: 0.1em;
    pointer-events: none;
    opacity: 0;
    text-shadow: 0 0 60px rgba(109, 0, 0, 0.6);
    mix-blend-mode: screen;
    transition: opacity 2.4s ease-out;
    z-index: 2;
}

.ghost-warning.is-visible {
    animation: ghost-haunt 6s ease-in-out infinite;
}

@keyframes ghost-haunt {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    30%  { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
    60%  { opacity: 0.25; transform: translate(-50%, -50%) scale(1.04); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}

/* ============================================================
   Floating words (atom + shadow scenes)
============================================================ */
.floating-words {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.word {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    transform: translate(-50%, -50%);
    font-family: var(--font-jp-gothic);
    font-weight: 400;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    color: var(--ghost-white);
    opacity: 0.55;
}

.word--jp { font-family: var(--font-jp-gothic); }
.word--en { font-family: var(--font-en); font-style: italic; font-weight: 300; }

.word.lg { font-size: clamp(1.2rem, 2.6vw, 2rem); opacity: 0.65; }
.word.md { font-size: clamp(1rem, 1.8vw, 1.4rem); opacity: 0.55; }
.word.sm { font-size: clamp(0.85rem, 1.2vw, 1rem); opacity: 0.5; }
.word.xs { font-size: clamp(0.7rem, 1vw, 0.85rem); opacity: 0.4; }

.word small {
    display: block;
    margin-top: 0.3rem;
    font-family: var(--font-en);
    font-style: italic;
    font-weight: 300;
    font-size: 0.55em;
    letter-spacing: 0.25em;
    opacity: 0.7;
}

/* ============================================================
   Scene 5 -- The Choice
============================================================ */
.scene--choice {
    min-height: 110vh;
    flex-direction: column;
    gap: clamp(2rem, 6vh, 5rem);
    padding-top: clamp(4rem, 12vh, 10rem);
    padding-bottom: clamp(4rem, 10vh, 8rem);
}

.divider {
    position: absolute;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 60vh;
    z-index: 1;
}

.choice-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 8vw, 6rem);
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.choice-col {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vh, 2rem);
}

.choice-col--risk {
    text-align: right;
    padding-right: clamp(1rem, 3vw, 3rem);
}

.choice-col--benefit {
    text-align: left;
    padding-left: clamp(1rem, 3vw, 3rem);
}

.choice-jp {
    font-family: var(--font-jp-display);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    color: var(--ghost-white);
    letter-spacing: 0.18em;
}

.choice-jp small {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--font-en);
    font-style: italic;
    font-weight: 300;
    font-size: 0.32em;
    letter-spacing: 0.4em;
    opacity: 0.6;
}

.choice-line {
    font-family: var(--font-jp-gothic);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    color: var(--ghost-white);
    opacity: 0.7;
    letter-spacing: 0.18em;
    line-height: 2;
}

.choice-en {
    margin-top: clamp(1rem, 2vh, 1.6rem);
    font-family: var(--font-en);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(0.95rem, 1.3vw, 1.2rem);
    color: var(--ghost-white);
    opacity: 0.55;
    letter-spacing: 0.2em;
    line-height: 2;
    max-width: 28ch;
}

.choice-col--risk .choice-en { margin-left: auto; }
.choice-col--benefit .choice-en { margin-right: auto; }

.final-question {
    position: relative;
    z-index: 3;
    text-align: center;
    margin-top: clamp(2rem, 6vh, 5rem);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1800ms ease-out, transform 1800ms ease-out;
}

.final-question.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.final-jp {
    font-family: var(--font-jp-display);
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--ghost-white);
    letter-spacing: 0.22em;
    line-height: 1.5;
    text-shadow: 0 0 40px rgba(237, 231, 246, 0.2);
}

.final-en {
    margin-top: clamp(1rem, 2.5vh, 2rem);
    font-family: var(--font-en);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    color: var(--ghost-white);
    opacity: 0.6;
    letter-spacing: 0.4em;
}

.signature {
    position: relative;
    z-index: 2;
    margin-top: clamp(3rem, 8vh, 6rem);
    text-align: center;
    font-family: var(--font-en);
    font-weight: 300;
    font-style: italic;
    font-size: 0.8rem;
    letter-spacing: 0.5em;
    color: var(--ghost-white);
    opacity: 0.3;
    text-transform: lowercase;
}

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 720px) {
    .scene { padding: 4rem 1.25rem; }
    .choice-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .choice-col--risk, .choice-col--benefit {
        text-align: center;
        padding: 0;
    }
    .choice-col--risk .choice-en, .choice-col--benefit .choice-en {
        margin: 1rem auto 0;
    }
    .divider { display: none; }
    .orbit--3, .orbit--c3 { display: none; }
}