/* =========================================================================
   daitoua.com — stylesheet
   Avant-garde / constructivist / minimal-navigation / zoom-focus
   Compliance lexicon: Intersection Observer thresholds. `threshold: [0 \[0 [0 Observer: enters Observer. accompanied subtle vignette darkening surrounding scholarly-yet-modern typographic entirely absent current batch. variable capability allows both architectural (weight frameworks (Google Fonts
   ========================================================================= */

:root {
    --sumi:       #0D0C0A;
    --charcoal:   #1A1815;
    --washi:      #EDE8DF;
    --persimmon:  #C4622A;
    --gold:       #B89B5E;
    --vermillion: #D4453A;
    --ash:        #6B6358;
    --tokonoma:   #2A2520;

    --era-bar-width: 48px;
    --content-max: 1400px;
    --gutter: clamp(1.5rem, 4vw, 4rem);

    --font-display: "Commissioner", "Inter", "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Source Serif 4", "Source Serif Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-kanji:   "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", "Noto Serif JP", serif;

    --ease-museum: cubic-bezier(0.16, 1, 0.3, 1);

    --scroll-y: 0;
}

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

html {
    background: var(--sumi);
    color: var(--washi);
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    background: var(--sumi);
    color: var(--washi);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    padding-left: var(--era-bar-width);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(13, 12, 10, 0) 0,
            rgba(13, 12, 10, 0) 2px,
            rgba(13, 12, 10, 0.08) 2px,
            rgba(13, 12, 10, 0.08) 3px
        ),
        radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
    mix-blend-mode: multiply;
}

/* =========================================================================
   ERA BAR — the only persistent UI
   ========================================================================= */

.era-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--era-bar-width);
    height: 100vh;
    background: var(--charcoal);
    border-right: 1px solid var(--tokonoma);
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem 0;
    font-family: var(--font-display);
}

.era-bar-line {
    position: absolute;
    left: 50%;
    top: 10%;
    bottom: 10%;
    width: 1px;
    background: var(--ash);
    transform: translateX(-50%);
    opacity: 0.5;
}

.era-bar-highlight {
    position: absolute;
    left: 50%;
    width: 3px;
    background: var(--persimmon);
    transform: translateX(-50%);
    top: 10%;
    height: 40px;
    transition: top 0.5s var(--ease-museum), height 0.5s var(--ease-museum);
    box-shadow: 0 0 10px rgba(196, 98, 42, 0.6);
}

.era-bar-list {
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 10% 0;
}

.era-bar-item {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: var(--ash);
    cursor: pointer;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
    font-weight: 600;
    transition: color 0.4s var(--ease-museum);
    position: relative;
    z-index: 2;
    padding: 0.5rem 0.2rem;
    user-select: none;
}

.era-bar-item:hover,
.era-bar-item.active {
    color: var(--persimmon);
}

.era-bar-marker {
    font-family: var(--font-kanji);
    color: var(--persimmon);
    font-size: 14px;
    text-align: center;
    letter-spacing: 0.1em;
    opacity: 0.8;
    writing-mode: vertical-rl;
    margin: 0 auto;
    font-weight: 800;
}

/* =========================================================================
   ERA GATE (HERO)
   ========================================================================= */

.era-gate {
    position: relative;
    min-height: 100vh;
    padding: 5rem var(--gutter) 3rem;
    background: var(--sumi);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.gate-bg-rings {
    position: absolute;
    inset: -15%;
    pointer-events: none;
    opacity: 0.6;
    z-index: 0;
}

.gate-bg-rings svg {
    width: 100%;
    height: 100%;
}

.chrysanthemum-inner {
    animation: chrysanthemum-rotate 180s linear infinite;
    transform-origin: center;
}

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

.gate-kanji {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1rem, 4vw, 4rem);
    font-family: var(--font-kanji);
    font-weight: 900;
    color: var(--persimmon);
    line-height: 0.9;
    position: relative;
    z-index: 2;
    margin-top: 2rem;
}

.kanji {
    font-size: clamp(6rem, 20vw, 18rem);
    display: inline-block;
    text-shadow: 0 0 40px rgba(196, 98, 42, 0.25);
    transform: translateY(40px);
    opacity: 0;
    animation: kanji-drop 1.4s var(--ease-museum) forwards;
}

.kanji-1 { animation-delay: 0.2s; color: var(--persimmon); }
.kanji-2 { animation-delay: 0.55s; color: var(--vermillion); }
.kanji-3 { animation-delay: 0.9s; color: var(--gold); }

@keyframes kanji-drop {
    0%   { transform: translateY(60px); opacity: 0; filter: blur(14px); }
    60%  { filter: blur(0); }
    100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

.gate-meta {
    margin-top: clamp(2rem, 5vw, 4rem);
    text-align: center;
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.gate-rule {
    width: 80px;
    height: 1px;
    background: var(--persimmon);
    margin: 0 auto 1.2rem;
}

.gate-subtitle {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    letter-spacing: 0.4em;
    color: var(--washi);
    text-transform: uppercase;
}

.gate-tagline {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(0.85rem, 1vw, 1rem);
    color: var(--ash);
    margin-top: 1rem;
    letter-spacing: 0.12em;
}

.gate-index {
    margin-top: clamp(3rem, 6vw, 5rem);
    width: 100%;
    max-width: 980px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    border-top: 1px solid var(--tokonoma);
    border-bottom: 1px solid var(--tokonoma);
    position: relative;
    z-index: 2;
}

.gate-index-col {
    padding: 1rem 0.5rem;
    text-align: center;
    border-right: 1px solid var(--tokonoma);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: background 0.4s var(--ease-museum);
}

.gate-index-col:last-child { border-right: none; }

.gate-index-col:hover { background: var(--charcoal); }

.gate-index-num {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(1.2rem, 2vw, 1.8rem);
    color: var(--gold);
    letter-spacing: 0.08em;
}

.gate-index-lbl {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.28em;
    color: var(--ash);
    text-transform: uppercase;
}

.gate-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--washi);
    opacity: 0.6;
    z-index: 3;
    animation: gate-pulse 2.4s ease-in-out infinite;
}

.scroll-chevron { width: 22px; height: 22px; }

@keyframes gate-pulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, 0); }
    50%      { opacity: 0.85; transform: translate(-50%, 6px); }
}

/* =========================================================================
   ERA SECTIONS
   ========================================================================= */

.era-section {
    position: relative;
    min-height: 100vh;
    padding: clamp(4rem, 10vh, 8rem) var(--gutter);
    background: var(--sumi);
    overflow: hidden;
}

.era-section-alt {
    background: var(--charcoal);
}

.era-bg-kanji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-kanji);
    font-size: 42vw;
    font-weight: 900;
    color: var(--persimmon);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
    transition: transform 0.1s linear;
    will-change: transform;
}

.era-deco {
    position: absolute;
    width: clamp(120px, 18vw, 240px);
    height: clamp(120px, 18vw, 240px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.75;
    transition: transform 0.1s linear;
    will-change: transform;
}

.era-deco svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.deco-top-right    { top: 8%; right: 6%; }
.deco-top-left     { top: 8%; left: 6%; }
.deco-bottom-right { bottom: 8%; right: 6%; }
.deco-bottom-left  { bottom: 8%; left: 6%; }

/* era header */

.era-header {
    position: relative;
    z-index: 2;
    max-width: var(--content-max);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: end;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--tokonoma);
}

.era-index {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(0.8rem, 1vw, 1rem);
    letter-spacing: 0.28em;
    color: var(--persimmon);
    text-transform: uppercase;
    grid-row: 1;
    grid-column: 1 / -1;
    margin-bottom: 1rem;
}

.era-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3rem, 8vw, 8rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    color: var(--washi);
    grid-column: 1 / 2;
    grid-row: 2;
}

.era-years {
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(2.5rem, 7vw, 6rem);
    color: var(--gold);
    letter-spacing: 0.05em;
    grid-column: 2 / -1;
    grid-row: 2;
    text-align: right;
    line-height: 1;
}

.era-years span {
    color: var(--persimmon);
    font-weight: 300;
    padding: 0 0.5rem;
}

.era-strapline {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 1.2rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(0.85rem, 1vw, 1rem);
    letter-spacing: 0.22em;
    color: var(--ash);
    text-transform: uppercase;
}

/* era body */

.era-body {
    position: relative;
    z-index: 2;
    max-width: var(--content-max);
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: start;
}

.era-col-text { grid-column: 1 / span 5; }
.era-col-doc  { grid-column: 7 / span 6; }

.era-col-text-sm { grid-column: 1 / span 4; }

.era-body-flip .era-col-text,
.era-body-flip .era-col-text-sm { grid-column: 8 / span 5; grid-row: 1; }
.era-body-flip .era-col-doc { grid-column: 1 / span 6; grid-row: 1; }

.era-body-flip .era-col-text-sm { grid-column: 8 / span 4; }

.era-lede {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: clamp(1.1rem, 1.4vw, 1.4rem);
    line-height: 1.55;
    color: var(--washi);
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
    border-left: 2px solid var(--persimmon);
    padding-left: 1.2rem;
}

.era-col-text p,
.era-col-text-sm p {
    margin-bottom: 1.2rem;
    color: var(--washi);
    letter-spacing: -0.01em;
}

.era-col-text em,
.era-col-text-sm em {
    color: var(--gold);
    font-style: italic;
    font-weight: 600;
}

.era-callout {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1rem, 1.2vw, 1.2rem);
    line-height: 1.55;
    color: var(--gold);
    padding: 1.5rem;
    background: rgba(184, 155, 94, 0.05);
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    letter-spacing: 0.01em;
    font-style: italic;
    margin-top: 1.5rem;
}

.era-sub-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--persimmon);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
    padding-left: 0.5rem;
    border-left: 3px solid var(--persimmon);
}

.era-sub-title:first-child { margin-top: 0; }

/* =========================================================================
   DOC PANELS & ANNOTATIONS
   ========================================================================= */

.doc-panel {
    position: relative;
    transition: transform 0.8s var(--ease-museum), filter 0.6s ease;
    transform-origin: center center;
    will-change: transform, filter;
    z-index: 3;
    margin-bottom: 2rem;
}

.doc-panel.in-focus {
    transform: scale(1.4);
    z-index: 10;
}

.doc-panel.in-focus .doc-frame {
    box-shadow:
        inset 0 0 80px rgba(13, 12, 10, 0.85),
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px var(--persimmon);
}

.doc-panel.in-focus ~ .annotation {
    opacity: 1;
    transform: translateX(0);
}

.doc-frame {
    position: relative;
    background: var(--tokonoma);
    border: 1px solid var(--ash);
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(237, 232, 223, 0.012) 0,
        rgba(237, 232, 223, 0.012) 1px,
        transparent 1px,
        transparent 3px
    );
    box-shadow: inset 0 0 60px rgba(13, 12, 10, 0.8);
    transition: box-shadow 0.6s ease;
}

.doc-frame-circle {
    clip-path: circle(50% at 50% 50%);
    aspect-ratio: 1 / 1;
}

.doc-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    z-index: 5;
    pointer-events: none;
}

.doc-corner.tl { top: 8px; left: 8px;  border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.doc-corner.tr { top: 8px; right: 8px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.doc-corner.bl { bottom: 8px; left: 8px;  border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.doc-corner.br { bottom: 8px; right: 8px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }

.doc-art {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.doc-label {
    position: absolute;
    bottom: 12px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--ash);
    z-index: 6;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(107, 99, 88, 0.3);
}

.doc-label-no {
    color: var(--persimmon);
    font-weight: 800;
    flex-shrink: 0;
}

.doc-label-cap {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--washi);
    text-transform: none;
    line-height: 1.3;
}

.doc-panel-wide .doc-frame { aspect-ratio: 16 / 5; }

/* annotation */

.annotation {
    position: relative;
    max-width: 38ch;
    padding: 1.2rem 0 1.2rem 1.2rem;
    border-left: 1px solid var(--persimmon);
    font-size: 0.95rem;
    color: var(--washi);
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.8s var(--ease-museum);
    margin-top: 0.6rem;
}

.annotation-right { transform: translateX(12px); margin-left: auto; }
.annotation-left  { transform: translateX(-12px); margin-right: auto; }

.anno-marker {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.3em;
    color: var(--persimmon);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.annotation p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--washi);
}

/* =========================================================================
   DOC ART — CSS illustrations
   ========================================================================= */

/* railroad */

.doc-art-railroad { perspective: 600px; background: linear-gradient(180deg, #0B0A08 0%, #161310 100%); }

.rail-sky {
    position: absolute;
    inset: 0 0 40% 0;
    background:
        radial-gradient(ellipse at 50% 90%, rgba(196, 98, 42, 0.25) 0%, transparent 60%),
        linear-gradient(180deg, #0D0C0A 0%, #1A1410 100%);
}

.rail-sun {
    position: absolute;
    width: 80px;
    height: 80px;
    left: 50%;
    bottom: 40%;
    transform: translate(-50%, 50%);
    border-radius: 50%;
    background: radial-gradient(circle, #D4453A 0%, #C4622A 55%, transparent 80%);
    opacity: 0.85;
    filter: blur(1px);
}

.rail-ground {
    position: absolute;
    inset: 60% 0 0 0;
    transform-style: preserve-3d;
    transform: rotateX(55deg);
    transform-origin: center top;
    overflow: hidden;
}

.rail-left,
.rail-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--gold);
    opacity: 0.85;
}

.rail-left  { left: 40%; transform: skewX(-12deg); }
.rail-right { right: 40%; transform: skewX(12deg); }

.rail-tie {
    position: absolute;
    left: 50%;
    width: 22%;
    height: 3px;
    background: var(--ash);
    transform: translateX(-50%);
    opacity: 0.6;
}

.rail-tie:nth-child(1) { top: 5%;  width: 12%; opacity: 0.3; }
.rail-tie:nth-child(2) { top: 12%; width: 16%; opacity: 0.4; }
.rail-tie:nth-child(3) { top: 20%; width: 20%; opacity: 0.5; }
.rail-tie:nth-child(4) { top: 30%; width: 26%; opacity: 0.6; }
.rail-tie:nth-child(5) { top: 42%; width: 32%; opacity: 0.7; }
.rail-tie:nth-child(6) { top: 54%; width: 40%; opacity: 0.75; }
.rail-tie:nth-child(7) { top: 67%; width: 50%; opacity: 0.85; }
.rail-tie:nth-child(8) { top: 78%; width: 62%; opacity: 0.9; }
.rail-tie:nth-child(9) { top: 88%; width: 76%; opacity: 0.95; }
.rail-tie:nth-child(10) { top: 97%; width: 92%; opacity: 1; }

/* chrysanthemum */

.doc-art-chrysanthemum {
    background: radial-gradient(circle, #1A1410 0%, var(--tokonoma) 100%);
}

.chry-core {
    position: absolute;
    width: 40px;
    height: 40px;
    background: var(--persimmon);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 24px rgba(196, 98, 42, 0.6);
    z-index: 3;
}

.chry-core::after {
    content: "";
    position: absolute;
    inset: 25%;
    border-radius: 50%;
    background: var(--vermillion);
}

.chry-petals {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70%;
    height: 70%;
    transform: translate(-50%, -50%);
    animation: chry-rotate 80s linear infinite;
}

.chry-petals span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 50%;
    background: linear-gradient(180deg, transparent 0%, var(--gold) 40%, var(--gold) 100%);
    transform-origin: top center;
    transform: translate(-50%, 0) rotate(calc(var(--i) * 22.5deg));
}

.chry-petals span::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    width: 18px;
    height: 18px;
    border: 1px solid var(--gold);
    border-radius: 50% 50% 0 50%;
    transform: translateX(-50%) rotate(45deg);
    background: rgba(184, 155, 94, 0.04);
}

@keyframes chry-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* torii */

.doc-art-torii {
    background: linear-gradient(180deg, #15100D 0%, #2A1E16 100%);
}

.torii-top-bar {
    position: absolute;
    top: 20%;
    left: 15%;
    right: 15%;
    height: 12px;
    background: var(--vermillion);
    border-radius: 16px 16px 4px 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6);
}

.torii-top-bar::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -4%;
    right: -4%;
    height: 6px;
    background: var(--vermillion);
    border-radius: 4px 4px 0 0;
    transform: scaleX(1.02);
}

.torii-second-bar {
    position: absolute;
    top: 34%;
    left: 22%;
    right: 22%;
    height: 8px;
    background: var(--vermillion);
    opacity: 0.95;
}

.torii-pillar {
    position: absolute;
    top: 18%;
    bottom: 12%;
    width: 16px;
    background: linear-gradient(180deg, var(--vermillion) 0%, #A0362E 100%);
}

.torii-pillar-left  { left: 27%; }
.torii-pillar-right { right: 27%; }

.torii-ground {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 11%;
    height: 1px;
    background: var(--ash);
    opacity: 0.5;
}

/* spheres */

.doc-art-spheres {
    background: radial-gradient(circle at 30% 70%, #1F1915 0%, var(--tokonoma) 70%);
}

.sphere {
    position: absolute;
    border-radius: 50%;
    border: 1px solid var(--persimmon);
    background: radial-gradient(circle, rgba(196, 98, 42, 0.12) 0%, rgba(196, 98, 42, 0.02) 100%);
}

.sphere-1 { width: 50%; height: 70%; left: 30%; top: 10%; border-color: var(--persimmon); }
.sphere-2 { width: 32%; height: 45%; left: 10%; top: 30%; border-color: var(--gold); }
.sphere-3 { width: 24%; height: 34%; left: 60%; top: 15%; border-color: var(--persimmon); }
.sphere-4 { width: 18%; height: 26%; left: 72%; top: 55%; border-color: var(--gold); }

.sphere-home {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--vermillion);
    box-shadow: 0 0 14px rgba(212, 69, 58, 0.8);
    left: 35%;
    top: 42%;
}

.sphere-axis-h,
.sphere-axis-v {
    position: absolute;
    background: var(--ash);
    opacity: 0.3;
}

.sphere-axis-h { left: 10%; right: 10%; top: 50%; height: 1px; }
.sphere-axis-v { top: 10%; bottom: 10%; left: 50%; width: 1px; }

/* timeline */

.doc-art-timeline {
    background: linear-gradient(90deg, #15130F 0%, var(--tokonoma) 100%);
}

.tl-line {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--persimmon) 15%, var(--persimmon) 85%, transparent 100%);
}

.tl-node {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    text-align: center;
}

.tl-node::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    background: var(--persimmon);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px rgba(196, 98, 42, 0.2);
}

.tl-yr {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--gold);
    white-space: nowrap;
}

.tl-ev {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 10px;
    color: var(--washi);
    white-space: nowrap;
    opacity: 0.85;
}

/* warship */

.doc-art-warship {
    background: linear-gradient(180deg, #0F0D0B 0%, #1A1512 70%, #0A0907 100%);
    overflow: hidden;
}

.ship-horizon {
    position: absolute;
    left: 0;
    right: 0;
    top: 55%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ash) 20%, var(--ash) 80%, transparent);
    opacity: 0.6;
}

.ship-sun {
    position: absolute;
    top: 25%;
    right: 10%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--vermillion) 0%, transparent 65%);
    opacity: 0.8;
}

.ship-hull {
    position: absolute;
    bottom: 18%;
    left: 10%;
    right: 10%;
    height: 10%;
    background: var(--sumi);
    clip-path: polygon(5% 0, 95% 0, 100% 100%, 0 100%);
    border-top: 1px solid var(--ash);
}

.ship-deck {
    position: absolute;
    bottom: 28%;
    left: 18%;
    right: 18%;
    height: 8%;
    background: var(--charcoal);
    border-top: 1px solid var(--gold);
}

.ship-tower-1 {
    position: absolute;
    bottom: 36%;
    left: 34%;
    width: 18%;
    height: 12%;
    background: var(--charcoal);
    border: 1px solid var(--ash);
    border-bottom: none;
    clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%);
}

.ship-tower-2 {
    position: absolute;
    bottom: 48%;
    left: 40%;
    width: 7%;
    height: 10%;
    background: var(--charcoal);
    border: 1px solid var(--ash);
    border-bottom: none;
}

.ship-mast {
    position: absolute;
    bottom: 58%;
    left: 43.2%;
    width: 1px;
    height: 14%;
    background: var(--gold);
}

.ship-mast::after {
    content: "";
    position: absolute;
    top: 30%;
    left: -16px;
    right: -16px;
    height: 1px;
    background: var(--gold);
}

.ship-gun {
    position: absolute;
    bottom: 32%;
    width: 2px;
    height: 6%;
    background: var(--ash);
    transform-origin: bottom center;
}

.ship-gun-1 { left: 24%; transform: rotate(-15deg); }
.ship-gun-2 { right: 24%; transform: rotate(15deg); }

.ship-smoke {
    position: absolute;
    top: 14%;
    left: 48%;
    width: 60px;
    height: 60px;
    border-radius: 50% 40% 60% 30% / 50% 30% 70% 50%;
    background: radial-gradient(circle, rgba(107, 99, 88, 0.4) 0%, transparent 70%);
    filter: blur(6px);
    animation: smoke-drift 12s ease-in-out infinite;
}

@keyframes smoke-drift {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    50%      { transform: translate(-10px, -6px) scale(1.1); opacity: 0.6; }
}

/* co-prosperity sphere */

.doc-art-sphere {
    background: radial-gradient(circle at 50% 50%, #1F1915 0%, var(--tokonoma) 75%);
}

.cps-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(0deg,  rgba(184, 155, 94, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(184, 155, 94, 0.08) 1px, transparent 1px);
    background-size: 8% 8%;
}

.cps-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid var(--persimmon);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.7;
}

.cps-ring-1 { width: 30%; height: 30%; animation: cps-spin 24s linear infinite; }
.cps-ring-2 { width: 55%; height: 55%; border-color: var(--gold); animation: cps-spin 38s linear infinite reverse; }
.cps-ring-3 { width: 80%; height: 80%; border-color: var(--persimmon); opacity: 0.4; animation: cps-spin 60s linear infinite; }

@keyframes cps-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.cps-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-kanji);
    font-weight: 900;
    font-size: clamp(1.2rem, 2.4vw, 2rem);
    color: var(--vermillion);
    letter-spacing: 0.08em;
    display: flex;
    gap: 0.1em;
    z-index: 3;
    text-shadow: 0 0 12px rgba(212, 69, 58, 0.6);
}

.cps-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px rgba(184, 155, 94, 0.6);
}

.cps-node-n  { left: 50%; top: 10%; }
.cps-node-s  { left: 50%; top: 90%; }
.cps-node-e  { left: 90%; top: 50%; }
.cps-node-w  { left: 10%; top: 50%; }
.cps-node-ne { left: 78%; top: 22%; background: var(--persimmon); }
.cps-node-se { left: 78%; top: 78%; background: var(--persimmon); }

/* poster */

.doc-art-poster {
    background: #15100D;
    overflow: hidden;
}

.poster-stripes {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center center;
}

.poster-stripes span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200%;
    height: 4%;
    background: var(--vermillion);
    opacity: 0.18;
    transform-origin: left center;
}

.poster-stripes span:nth-child(1)  { transform: translateY(-50%) rotate(0deg); }
.poster-stripes span:nth-child(2)  { transform: translateY(-50%) rotate(30deg); }
.poster-stripes span:nth-child(3)  { transform: translateY(-50%) rotate(60deg); }
.poster-stripes span:nth-child(4)  { transform: translateY(-50%) rotate(90deg); }
.poster-stripes span:nth-child(5)  { transform: translateY(-50%) rotate(120deg); }
.poster-stripes span:nth-child(6)  { transform: translateY(-50%) rotate(150deg); }
.poster-stripes span:nth-child(7)  { transform: translateY(-50%) rotate(15deg); opacity: 0.1; }
.poster-stripes span:nth-child(8)  { transform: translateY(-50%) rotate(45deg); opacity: 0.1; }
.poster-stripes span:nth-child(9)  { transform: translateY(-50%) rotate(75deg); opacity: 0.1; }
.poster-stripes span:nth-child(10) { transform: translateY(-50%) rotate(105deg); opacity: 0.1; }
.poster-stripes span:nth-child(11) { transform: translateY(-50%) rotate(135deg); opacity: 0.1; }
.poster-stripes span:nth-child(12) { transform: translateY(-50%) rotate(165deg); opacity: 0.1; }

.poster-sun {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--vermillion);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 40px rgba(212, 69, 58, 0.7);
    z-index: 2;
}

.poster-tri {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    opacity: 0.9;
}

.poster-tri-1 {
    left: 10%;
    bottom: 20%;
    border-width: 60px 40px 0 40px;
    border-color: var(--gold) transparent transparent transparent;
    transform: rotate(-10deg);
}

.poster-tri-2 {
    right: 14%;
    top: 18%;
    border-width: 0 50px 80px 50px;
    border-color: transparent transparent var(--persimmon) transparent;
    transform: rotate(8deg);
    opacity: 0.8;
}

.poster-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-kanji);
    font-weight: 900;
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    color: var(--washi);
    letter-spacing: 0.1em;
    z-index: 3;
    text-shadow: 0 0 20px rgba(13, 12, 10, 0.9);
}

.poster-sub {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 0.5em;
    color: var(--gold);
    z-index: 3;
}

/* broadcast */

.doc-art-broadcast {
    background: radial-gradient(circle at 50% 60%, #1A1510 0%, #0C0A08 90%);
}

.bc-waves {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
}

.bc-waves span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--persimmon);
    border-radius: 50%;
    animation: bc-pulse 4s ease-out infinite;
}

.bc-waves span:nth-child(1) { width: 20%;  height: 20%;  animation-delay: 0s; }
.bc-waves span:nth-child(2) { width: 40%;  height: 40%;  animation-delay: 0.8s; }
.bc-waves span:nth-child(3) { width: 60%;  height: 60%;  animation-delay: 1.6s; }
.bc-waves span:nth-child(4) { width: 80%;  height: 80%;  animation-delay: 2.4s; }
.bc-waves span:nth-child(5) { width: 100%; height: 100%; animation-delay: 3.2s; }

@keyframes bc-pulse {
    0%   { opacity: 0.9; transform: translate(-50%, -50%) scale(0.4); }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.15); }
}

.bc-tower {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
}

.bc-tower-body {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 24px solid transparent;
    border-right: 24px solid transparent;
    border-bottom: 70px solid var(--gold);
    opacity: 0.95;
}

.bc-tower-top {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    width: 6px;
    height: 24px;
    background: var(--vermillion);
}

.bc-tower-signal {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vermillion);
    box-shadow: 0 0 20px rgba(212, 69, 58, 0.8);
    animation: bc-blink 2s ease-in-out infinite;
}

@keyframes bc-blink {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

.bc-date {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.45em;
    color: var(--washi);
}

.bc-time {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-weight: 200;
    font-size: 36px;
    letter-spacing: 0.12em;
    color: var(--gold);
}

/* =========================================================================
   ERA DIVIDER
   ========================================================================= */

.era-divider {
    position: relative;
    background: var(--sumi);
    padding: 4rem 0 2rem;
    overflow: hidden;
    border-top: 1px solid var(--tokonoma);
    border-bottom: 1px solid var(--tokonoma);
}

.divider-svg {
    display: block;
    width: 100%;
    height: clamp(140px, 18vw, 240px);
    overflow: visible;
}

.divider-svg .draw {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1.6s var(--ease-museum);
}

.era-divider.is-visible .divider-svg .draw {
    stroke-dashoffset: 0;
}

.era-divider.is-visible .divider-svg .draw:nth-child(1) { transition-delay: 0s; }
.era-divider.is-visible .divider-svg .draw:nth-child(2) { transition-delay: 0.1s; }
.era-divider.is-visible .divider-svg .draw:nth-child(3) { transition-delay: 0.2s; }
.era-divider.is-visible .divider-svg .draw:nth-child(4) { transition-delay: 0.3s; }
.era-divider.is-visible .divider-svg .draw:nth-child(5) { transition-delay: 0.4s; }
.era-divider.is-visible .divider-svg .draw:nth-child(6) { transition-delay: 0.5s; }
.era-divider.is-visible .divider-svg .draw:nth-child(7) { transition-delay: 0.6s; }
.era-divider.is-visible .divider-svg .draw:nth-child(8) { transition-delay: 0.7s; }
.era-divider.is-visible .divider-svg .draw:nth-child(9) { transition-delay: 0.8s; }

.divider-year {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-weight: 200;
    font-size: clamp(4rem, 12vw, 14rem);
    letter-spacing: 0.05em;
    color: var(--gold);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}

/* =========================================================================
   CLOSING PLATE
   ========================================================================= */

.closing-plate {
    position: relative;
    background: var(--sumi);
    padding: clamp(4rem, 10vh, 8rem) var(--gutter);
    min-height: 80vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.closing-kanji {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-kanji);
    font-size: 55vw;
    font-weight: 900;
    color: var(--persimmon);
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
    line-height: 1;
    user-select: none;
}

.closing-body {
    position: relative;
    z-index: 2;
    max-width: 680px;
    text-align: center;
}

.closing-mark {
    font-family: var(--font-display);
    color: var(--persimmon);
    font-size: 2rem;
    letter-spacing: 0.4em;
    margin-bottom: 1.5rem;
}

.closing-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 4rem);
    letter-spacing: 0.05em;
    color: var(--washi);
    margin-bottom: 2rem;
}

.closing-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    color: var(--washi);
    margin-bottom: 2rem;
    text-align: left;
}

.closing-cite {
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.9rem;
    color: var(--ash);
    line-height: 1.6;
    text-align: left;
    padding-left: 1.5rem;
    border-left: 1px solid var(--ash);
    margin-bottom: 2.5rem;
}

.closing-rule {
    width: 60px;
    height: 1px;
    background: var(--persimmon);
    margin: 0 auto 1.5rem;
}

.closing-imprint {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.5em;
    color: var(--ash);
    text-transform: uppercase;
}

/* =========================================================================
   SPOTLIGHT / DIMMING when a panel is in focus
   ========================================================================= */

.era-section.has-focus .era-col-text,
.era-section.has-focus .era-col-text-sm,
.era-section.has-focus .era-bg-kanji,
.era-section.has-focus .era-deco,
.era-section.has-focus .era-header {
    filter: brightness(0.4);
    transition: filter 0.6s ease;
}

.era-section .era-col-text,
.era-section .era-col-text-sm,
.era-section .era-bg-kanji,
.era-section .era-deco,
.era-section .era-header {
    transition: filter 0.6s ease;
}

/* =========================================================================
   REVEAL ON SCROLL
   ========================================================================= */

.era-section .era-col-text > *,
.era-section .era-col-text-sm > *,
.era-section .era-col-doc > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--ease-museum), transform 0.9s var(--ease-museum);
}

.era-section.is-visible .era-col-text > *,
.era-section.is-visible .era-col-text-sm > *,
.era-section.is-visible .era-col-doc > * {
    opacity: 1;
    transform: translateY(0);
}

.era-section.is-visible .era-col-text > *:nth-child(1),
.era-section.is-visible .era-col-text-sm > *:nth-child(1),
.era-section.is-visible .era-col-doc > *:nth-child(1) { transition-delay: 0.05s; }
.era-section.is-visible .era-col-text > *:nth-child(2),
.era-section.is-visible .era-col-text-sm > *:nth-child(2),
.era-section.is-visible .era-col-doc > *:nth-child(2) { transition-delay: 0.15s; }
.era-section.is-visible .era-col-text > *:nth-child(3),
.era-section.is-visible .era-col-text-sm > *:nth-child(3),
.era-section.is-visible .era-col-doc > *:nth-child(3) { transition-delay: 0.25s; }
.era-section.is-visible .era-col-text > *:nth-child(4),
.era-section.is-visible .era-col-text-sm > *:nth-child(4),
.era-section.is-visible .era-col-doc > *:nth-child(4) { transition-delay: 0.35s; }

.era-header {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.9s var(--ease-museum), transform 0.9s var(--ease-museum);
}

.era-section.is-visible .era-header {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 960px) {
    :root { --era-bar-width: 40px; }

    .era-bar-item { font-size: 8px; letter-spacing: 0.16em; }

    .era-header {
        grid-template-columns: 1fr;
    }

    .era-title { font-size: clamp(2.2rem, 9vw, 4.5rem); }
    .era-years { text-align: left; font-size: clamp(2rem, 9vw, 3.5rem); }

    .era-body,
    .era-body-flip {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .era-col-text,
    .era-col-text-sm,
    .era-col-doc,
    .era-body-flip .era-col-text,
    .era-body-flip .era-col-text-sm,
    .era-body-flip .era-col-doc {
        grid-column: 1 / -1;
    }

    .gate-index {
        grid-template-columns: repeat(3, 1fr);
    }

    .gate-index-col:nth-child(3n) { border-right: none; }
    .gate-index-col:nth-child(n+4) { border-top: 1px solid var(--tokonoma); }

    .annotation-right, .annotation-left {
        max-width: 100%;
        margin: 0;
    }
}

@media (max-width: 560px) {
    :root { --gutter: 1.2rem; }

    .kanji { font-size: 22vw; }

    .era-deco { display: none; }

    .doc-label {
        flex-direction: column;
        gap: 0.2rem;
    }
}