/* ============================================================
   diplomatic.wiki v2 -- zen diplomatic knowledge scroll
   palette:
     Washi White  #FAF8F4 (background)
     Ink Sumi     #2A2A3A (text)
     Zen Stone    #A0A8B0 (lines, borders)
     Sakura Pink  #E8C0C8 (highlight, bubbles)
     Bamboo Green #A0C8A0 (nature accents)
     Sky Pastel   #C0D8E8 (washes)
   typography:
     Noto Sans JP  -- humanist headlines (700)
     Source Serif 4 -- scholarly body (400)
     Klee One       -- handwritten annotation (400)
   ============================================================ */

:root {
    --washi-white: #FAF8F4;
    --ink-sumi: #2A2A3A;
    --zen-stone: #A0A8B0;
    --sakura-pink: #E8C0C8;
    --bamboo-green: #A0C8A0;
    --sky-pastel: #C0D8E8;

    --panel-w: 100vw;
    --panel-h: 100vh;
    --rake-spacing: 32px;
    --rake-opacity: 0.20;
    --wash-opacity: 0.10;
    --wash-opacity-active: 0.15;

    --display-font: "Noto Sans JP", "Inter", system-ui, sans-serif;
    --body-font: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    --annotation-font: "Klee One", "Noto Sans JP", cursive;

    --spring-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html, body {
    width: 100%;
    height: 100%;
    background: var(--washi-white);
    color: var(--ink-sumi);
    font-family: var(--body-font);
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.85;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--washi-white);
    background-image:
        radial-gradient(ellipse at 30% 40%, rgba(232, 192, 200, 0.05) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(192, 216, 232, 0.04) 0%, transparent 70%);
}

/* ----- horizontal scroll container (emaki) ----- */

.scroll-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100vw;
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.panel {
    position: relative;
    flex: 0 0 var(--panel-w);
    width: var(--panel-w);
    height: var(--panel-h);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(48px, 6vw, 96px);
    transition: background-color 600ms ease;
}

/* ----- raked sand horizontal line texture ----- */

.rake-lines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent calc(var(--rake-spacing) - 1px),
        rgba(160, 168, 176, var(--rake-opacity)) calc(var(--rake-spacing) - 1px),
        rgba(160, 168, 176, var(--rake-opacity)) var(--rake-spacing)
    );
    opacity: 0;
    animation: rake-fade 800ms ease 300ms forwards;
}

@keyframes rake-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ----- panel index numeral ----- */

.panel-index {
    position: absolute;
    top: clamp(24px, 3vw, 40px);
    left: clamp(24px, 3vw, 40px);
    font-family: var(--annotation-font);
    font-size: 14px;
    color: var(--zen-stone);
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

/* ----- spring scroll indicator at right edge ----- */

.scroll-spring {
    position: absolute;
    right: clamp(24px, 3vw, 48px);
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--zen-stone);
    font-size: 22px;
    pointer-events: none;
    animation: spring-bounce 1.6s var(--spring-ease) infinite;
}
.spring-arrow {
    display: inline-block;
    font-family: var(--display-font);
}
@keyframes spring-bounce {
    0% { transform: translate(0, -50%); }
    50% { transform: translate(10px, -50%); }
    70% { transform: translate(-3px, -50%); }
    100% { transform: translate(0, -50%); }
}

/* ============================================================
   PANEL 1: garden gate
   ============================================================ */

.panel-gate {
    background: var(--washi-white);
    background-image:
        radial-gradient(circle at 50% 30%, rgba(232, 192, 200, 0.18), transparent 60%),
        radial-gradient(circle at 50% 70%, rgba(192, 216, 232, 0.10), transparent 70%);
}

.gate-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    max-width: 560px;
    z-index: 2;
}

.gate-title {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: clamp(36px, 5.4vw, 68px);
    letter-spacing: 0.01em;
    color: var(--ink-sumi);
    line-height: 1.1;
    opacity: 0;
    animation: gate-title-in 800ms ease 1400ms forwards;
}
@keyframes gate-title-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gate-sub {
    font-family: var(--annotation-font);
    font-size: 16px;
    color: var(--zen-stone);
    letter-spacing: 0.04em;
    opacity: 0;
    animation: gate-title-in 800ms ease 1700ms forwards;
}

.torii {
    width: clamp(220px, 26vw, 320px);
    height: auto;
    margin-top: 12px;
}
.torii-path {
    fill: none;
    stroke: var(--ink-sumi);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: torii-draw 1200ms ease 800ms forwards;
}
@keyframes torii-draw {
    from { stroke-dashoffset: 1200; }
    to   { stroke-dashoffset: 0; }
}

.gate-annotation {
    font-family: var(--annotation-font);
    font-size: 14px;
    color: var(--sakura-pink);
    margin-top: 12px;
    opacity: 0;
    animation: gate-title-in 800ms ease 2000ms forwards;
}

/* ============================================================
   PANELS: text entries
   ============================================================ */

.panel-text {
    background: var(--washi-white);
    background-image:
        radial-gradient(circle at 12% 20%, rgba(232, 192, 200, 0.06), transparent 50%),
        radial-gradient(circle at 90% 90%, rgba(160, 200, 160, 0.05), transparent 60%);
}
.panel-text-alt {
    background-image:
        radial-gradient(circle at 88% 18%, rgba(192, 216, 232, 0.07), transparent 55%),
        radial-gradient(circle at 12% 86%, rgba(232, 192, 200, 0.05), transparent 60%);
}

.entry {
    max-width: min(40%, 560px);
    margin-left: clamp(64px, 8vw, 160px);
    z-index: 2;
}

.entry-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 28px;
}

.entry-label {
    font-family: var(--annotation-font);
    font-size: 14px;
    color: var(--zen-stone);
    letter-spacing: 0.08em;
}

.entry-title {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 52px);
    color: var(--ink-sumi);
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.entry-kanji {
    font-family: var(--display-font);
    font-weight: 400;
    font-size: 18px;
    color: var(--sakura-pink);
    letter-spacing: 0.12em;
}

.entry-lede {
    font-family: var(--body-font);
    font-style: italic;
    font-size: clamp(16px, 1.18vw, 19px);
    color: var(--ink-sumi);
    line-height: 1.85;
    margin-bottom: 18px;
}

.entry-body {
    font-family: var(--body-font);
    font-size: clamp(15px, 1.05vw, 17px);
    color: var(--ink-sumi);
    line-height: 1.85;
    margin-bottom: 18px;
}

.entry-annotation {
    font-family: var(--annotation-font);
    font-size: 14px;
    color: var(--zen-stone);
    margin-top: 12px;
    letter-spacing: 0.04em;
}

/* ============================================================
   PANELS: visual entries (mixed media)
   ============================================================ */

.panel-visual {
    background: var(--washi-white);
    align-items: center;
    justify-content: center;
}

.watercolor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: var(--wash-opacity);
    transition: opacity 800ms ease;
}
.panel-visual.is-active .watercolor {
    opacity: var(--wash-opacity-active);
}

.watercolor-pink {
    background-image:
        radial-gradient(circle at 30% 40%, var(--sakura-pink) 0%, transparent 55%),
        radial-gradient(circle at 70% 65%, var(--sakura-pink) 0%, transparent 60%);
}
.watercolor-green {
    background-image:
        radial-gradient(circle at 35% 55%, var(--bamboo-green) 0%, transparent 55%),
        radial-gradient(circle at 75% 30%, var(--bamboo-green) 0%, transparent 60%);
}
.watercolor-sky {
    background-image:
        radial-gradient(circle at 40% 35%, var(--sky-pastel) 0%, transparent 55%),
        radial-gradient(circle at 70% 70%, var(--sky-pastel) 0%, transparent 60%);
}

.visual-stage {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 5vw, 96px);
    z-index: 2;
    width: 100%;
    max-width: 1100px;
}

.line-art {
    width: clamp(280px, 32vw, 440px);
    height: auto;
    transition: filter 600ms ease, transform 600ms ease;
}
.panel-visual:hover .line-art {
    filter: drop-shadow(0 4px 12px rgba(232, 192, 200, 0.35));
}
.line-stroke {
    fill: none;
    stroke: var(--ink-sumi);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.rake-curve {
    fill: none;
    stroke: var(--zen-stone);
    stroke-width: 1;
    stroke-linecap: round;
    opacity: 0.6;
}
.blossom {
    fill: var(--sakura-pink);
    stroke: var(--ink-sumi);
    stroke-width: 0.8;
}
.blossom-sky {
    fill: var(--sky-pastel);
    stroke: var(--ink-sumi);
    stroke-width: 0.8;
}

.visual-caption {
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.visual-caption .entry-title {
    font-size: clamp(24px, 3vw, 36px);
}
.visual-caption .entry-body {
    font-size: clamp(14px, 1vw, 16px);
}

/* ============================================================
   PANEL: bubble garden
   ============================================================ */

.panel-bubbles {
    background: var(--washi-white);
    background-image:
        radial-gradient(circle at 50% 100%, rgba(192, 216, 232, 0.10), transparent 60%);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: clamp(80px, 10vh, 140px);
}

.bubble-head {
    text-align: center;
    margin-bottom: 32px;
    z-index: 3;
}
.bubble-head .entry-title {
    font-size: clamp(26px, 3.4vw, 44px);
}

.bubble-field {
    position: relative;
    flex: 1;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

.bubble {
    position: absolute;
    bottom: -120px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid rgba(42, 42, 58, 0.18);
    color: var(--ink-sumi);
    font-family: var(--annotation-font);
    font-size: clamp(11px, 1vw, 14px);
    cursor: pointer;
    background: rgba(232, 192, 200, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.5),
                0 2px 4px rgba(42, 42, 58, 0.05);
    animation: bubble-rise var(--dur, 6s) ease-in-out var(--delay, 0s) infinite;
    transition: transform 200ms ease, opacity 200ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4px;
    will-change: transform, opacity;
}
.bubble span {
    pointer-events: none;
    line-height: 1.1;
}
.bubble-pink { background: rgba(232, 192, 200, 0.45); }
.bubble-green { background: rgba(160, 200, 160, 0.45); }
.bubble-sky { background: rgba(192, 216, 232, 0.50); }
.bubble:hover {
    transform: scale(1.08);
}
.bubble.is-popping {
    animation: none;
    transform: scale(1.5);
    opacity: 0;
    transition: transform 200ms ease-out, opacity 200ms ease-out;
    pointer-events: none;
}

@keyframes bubble-rise {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    10%  { opacity: 0.55; }
    50%  { transform: translateY(-50vh) translateX(8px); opacity: 0.65; }
    90%  { opacity: 0.45; }
    100% { transform: translateY(-110vh) translateX(-6px); opacity: 0; }
}

/* ============================================================
   PANEL: scroll end
   ============================================================ */

.panel-end {
    background: var(--washi-white);
    background-image:
        radial-gradient(circle at 50% 50%, rgba(232, 192, 200, 0.12), transparent 60%);
}

.end-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    max-width: 520px;
    z-index: 2;
}

.end-title {
    font-family: var(--display-font);
    font-weight: 700;
    font-size: clamp(28px, 4vw, 52px);
    color: var(--ink-sumi);
    letter-spacing: 0.01em;
    line-height: 1.2;
}
.end-body {
    font-family: var(--body-font);
    font-size: clamp(15px, 1.05vw, 17px);
    color: var(--ink-sumi);
    line-height: 1.85;
    margin-bottom: 12px;
}

.return-button {
    margin-top: 12px;
    padding: 14px 28px;
    background: transparent;
    border: 1px solid var(--zen-stone);
    border-radius: 999px;
    color: var(--ink-sumi);
    font-family: var(--annotation-font);
    font-size: 15px;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background 300ms ease, border-color 300ms ease, transform 600ms var(--spring-ease);
    animation: return-bounce 2.4s var(--spring-ease) infinite;
}
.return-button:hover {
    background: rgba(232, 192, 200, 0.18);
    border-color: var(--sakura-pink);
}
.return-arrow {
    font-family: var(--display-font);
    font-size: 18px;
}
@keyframes return-bounce {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-8px); }
    40%  { transform: translateX(3px); }
    55%  { transform: translateX(-1px); }
    100% { transform: translateX(0); }
}

/* ============================================================
   horizontal progress bar at bottom of viewport
   ============================================================ */

.progress-track {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(160, 168, 176, 0.35);
    z-index: 50;
    pointer-events: auto;
}
.progress-fill {
    width: 0%;
    height: 100%;
    background: var(--sakura-pink);
    transition: width 120ms linear, box-shadow 200ms ease;
    will-change: width;
}
.progress-track:hover .progress-fill {
    box-shadow: 0 0 12px rgba(232, 192, 200, 0.7);
}

/* ============================================================
   bubble pop ripple stage
   ============================================================ */

.ripple-stage {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 40;
}
.ripple {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--sakura-pink);
    transform: translate(-50%, -50%) scale(1);
    animation: ripple-out 600ms ease-out forwards;
    pointer-events: none;
}
@keyframes ripple-out {
    from { transform: translate(-50%, -50%) scale(1); opacity: 0.7; }
    to   { transform: translate(-50%, -50%) scale(6); opacity: 0; }
}

/* ============================================================
   responsive small-screen tweaks
   ============================================================ */

@media (max-width: 720px) {
    .visual-stage {
        flex-direction: column;
        gap: 24px;
    }
    .entry {
        max-width: 80%;
        margin-left: clamp(24px, 6vw, 56px);
    }
    .panel { padding: clamp(32px, 6vw, 56px); }
    .scroll-spring { right: 14px; }
}