/* =========================================================
   heisei.boo — spectral time capsule
   Aurora-gradient palette through paper-aged textures
   ========================================================= */

:root {
    --deep-ground: #0d0b14;
    --midnight-violet: #1a1520;
    --spectral-cyan: #67e8f9;
    --aurora-green: #22d3a8;
    --aurora-magenta: #c471ed;
    --aged-paper: #f0e6d2;
    --washi-fiber: #d4c8b0;
    --rose-trace: #d4a0b9;
    --amber-memory: #e8a84c;
    --fallback-white: #ffffff;
}

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

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

html {
    /* scroll-behavior left default per DESIGN.md */
    background: var(--deep-ground);
}

body {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 400;
    color: var(--midnight-violet);
    line-height: 1.75;
    letter-spacing: 0.02em;
    font-feature-settings: 'onum' 1;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    background:
        linear-gradient(
            180deg,
            var(--aged-paper) 0%,
            var(--aged-paper) 8%,
            var(--rose-trace) 22%,
            var(--aurora-green) 36%,
            var(--aurora-magenta) 52%,
            var(--spectral-cyan) 66%,
            var(--amber-memory) 80%,
            var(--midnight-violet) 92%,
            var(--deep-ground) 100%
        );
    background-attachment: fixed;
    background-size: 100% 200vh;
    background-position: center 0;
    min-height: 100vh;
}

/* Hide scrollbars entirely */
::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { scrollbar-width: none; -ms-overflow-style: none; }

/* ---------------------------------------------------------
   OVERLAYS — fixed, full-viewport
   --------------------------------------------------------- */
.washi-overlay,
.scanline-overlay,
.fold-creases,
.foxing-spots,
.spectral-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    width: 100vw;
    height: 100vh;
    will-change: transform, opacity;
}

.washi-overlay {
    z-index: 40;
    mix-blend-mode: multiply;
    opacity: 0.85;
    transform-origin: 50% 50%;
    transition: transform 0.6s ease-out;
}

.scanline-overlay {
    z-index: 45;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.fold-creases {
    z-index: 42;
    mix-blend-mode: multiply;
    opacity: 0.6;
}

.foxing-spots {
    z-index: 41;
    mix-blend-mode: multiply;
    opacity: 0.7;
    background-image:
        radial-gradient(circle at 13% 21%, rgba(139,115,85,0.10) 0%, transparent 60%),
        radial-gradient(circle at 71% 13%, rgba(139,115,85,0.08) 0%, transparent 55%),
        radial-gradient(circle at 37% 83%, rgba(139,115,85,0.09) 0%, transparent 50%),
        radial-gradient(circle at 89% 57%, rgba(139,115,85,0.07) 0%, transparent 60%),
        radial-gradient(circle at 23% 61%, rgba(139,115,85,0.06) 0%, transparent 45%),
        radial-gradient(circle at 47% 37%, rgba(139,115,85,0.05) 0%, transparent 50%),
        radial-gradient(circle at 5% 93%, rgba(139,115,85,0.08) 0%, transparent 55%);
    background-size: 600px 600px, 480px 480px, 720px 720px, 540px 540px, 360px 360px, 420px 420px, 300px 300px;
}

/* ---------------------------------------------------------
   SPECTRAL LAYER — morphing blob ghosts
   --------------------------------------------------------- */
.spectral-layer {
    z-index: 30;
    overflow: hidden;
}

.spectral-blob {
    position: absolute;
    width: 40vw;
    max-width: 560px;
    min-width: 240px;
    aspect-ratio: 1 / 1;
    height: auto;
    mix-blend-mode: screen;
    filter: blur(18px);
    will-change: transform, opacity;
    opacity: 0.35;
}

@keyframes drift-up {
    0%   { transform: translateY(110vh) translateX(0) scale(1); }
    100% { transform: translateY(-120vh) translateX(0) scale(1.1); }
}

@keyframes drift-up-sway {
    0%   { transform: translateY(110vh) translateX(-4vw) scale(0.95); }
    50%  { transform: translateY(0vh)   translateX(3vw)  scale(1.05); }
    100% { transform: translateY(-120vh) translateX(-2vw) scale(1.0); }
}

@keyframes drift-up-sway2 {
    0%   { transform: translateY(110vh) translateX(3vw)  scale(1.0); }
    50%  { transform: translateY(0vh)   translateX(-4vw) scale(1.08); }
    100% { transform: translateY(-120vh) translateX(2vw) scale(0.96); }
}

.blob-1 { left: 8%;  animation: drift-up-sway 78s linear infinite; animation-delay: 0s;  }
.blob-2 { left: 62%; animation: drift-up      92s linear infinite; animation-delay: -17s; }
.blob-3 { left: 28%; animation: drift-up-sway2 104s linear infinite; animation-delay: -11s; }
.blob-4 { left: 78%; animation: drift-up-sway 86s linear infinite; animation-delay: -29s; }
.blob-5 { left: 12%; animation: drift-up      112s linear infinite; animation-delay: -43s; }
.blob-6 { left: 48%; animation: drift-up-sway 98s linear infinite; animation-delay: -7s;  }
.blob-7 { left: 72%; animation: drift-up-sway2 82s linear infinite; animation-delay: -53s; }
.blob-8 { left: 38%; animation: drift-up      120s linear infinite; animation-delay: -67s; }

/* ---------------------------------------------------------
   DESCENT — main container
   --------------------------------------------------------- */
.descent {
    position: relative;
    z-index: 10;
    width: 100vw;
    min-height: 1050vh;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------------
   STRATUM — each temporal layer
   --------------------------------------------------------- */
.stratum {
    position: relative;
    width: 100%;
    min-height: 150vh;
    padding: 18vh 6vw;
    margin-bottom: -50vh; /* 50vh overlap */
    contain: layout style paint;
    isolation: isolate;
}

.stratum:first-child { padding-top: 0; }
.stratum:last-child  { margin-bottom: 0; padding-bottom: 22vh; }

.stratum__backdrop {
    position: absolute;
    inset: -20vh -4vw;
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
    transform: scale(1.05);
    filter: blur(1px);
    opacity: 0.6;
    mix-blend-mode: multiply;
    transition: transform 0.2s linear;
}

.stratum__content {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-height: 150vh;
    z-index: 2;
}

/* Per-stratum backdrops (aurora layer visible through washi) */
.stratum--surface .stratum__backdrop {
    background:
        radial-gradient(ellipse at 50% 30%, rgba(240,230,210,0.0) 0%, rgba(240,230,210,0.45) 60%, rgba(240,230,210,0.9) 100%),
        linear-gradient(180deg, #f0e6d2 0%, #ead9bc 100%);
}

.stratum--late-heisei .stratum__backdrop {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(212,160,185,0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(103,232,249,0.18) 0%, transparent 55%),
        linear-gradient(180deg, #e0cfb4 0%, #bfb6c2 100%);
    mix-blend-mode: multiply;
}

.stratum--mid-heisei .stratum__backdrop {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(34,211,168,0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 60%, rgba(103,232,249,0.22) 0%, transparent 55%),
        linear-gradient(180deg, #b2b4a8 0%, #88a89e 100%);
    mix-blend-mode: multiply;
}

.stratum--aftermath .stratum__backdrop {
    background:
        radial-gradient(ellipse at 70% 30%, rgba(232,168,76,0.32) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 80%, rgba(212,160,185,0.25) 0%, transparent 50%),
        linear-gradient(180deg, #a79b88 0%, #9c7f6a 100%);
    mix-blend-mode: multiply;
}

.stratum--lost-decade .stratum__backdrop {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(196,113,237,0.42) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 60%, rgba(103,232,249,0.30) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 90%, rgba(232,168,76,0.22) 0%, transparent 55%),
        linear-gradient(180deg, #8c6d8a 0%, #5a4a72 100%);
    mix-blend-mode: multiply;
}

.stratum--bubble-peak .stratum__backdrop {
    background:
        radial-gradient(ellipse at 40% 30%, rgba(232,168,76,0.45) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 70%, rgba(212,160,185,0.35) 0%, transparent 55%),
        linear-gradient(180deg, #6e5a6a 0%, #402a3a 100%);
    mix-blend-mode: multiply;
}

.stratum--threshold .stratum__backdrop {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(103,232,249,0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 80%, rgba(196,113,237,0.14) 0%, transparent 60%),
        linear-gradient(180deg, #241a2c 0%, var(--deep-ground) 100%);
    mix-blend-mode: normal;
}

/* ---------------------------------------------------------
   HERO — opening sequence, stratum 1
   --------------------------------------------------------- */
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 4vh;
}

.hero__title {
    font-family: 'Shippori Mincho', 'Times New Roman', serif;
    font-weight: 800;
    font-size: clamp(5rem, 18vw, 14rem);
    letter-spacing: 0.15em;
    color: var(--midnight-violet);
    opacity: 0;
    transform: translateY(24px);
    animation: hero-title-in 1.5s 0.8s ease-out forwards;
    line-height: 1;
    text-shadow: 0 0 40px rgba(26,21,32,0.08);
}

.hero__subtitle {
    font-family: 'Overpass Mono', 'Courier New', monospace;
    font-weight: 300;
    font-size: clamp(0.75rem, 1vw, 0.95rem);
    letter-spacing: 0.32em;
    color: var(--rose-trace);
    margin-top: 2.5rem;
    opacity: 0;
    animation: hero-fade-in 1s 2.3s ease-out forwards;
    text-transform: uppercase;
}

.hero__era {
    font-family: 'Shippori Mincho', 'Times New Roman', serif;
    font-weight: 500;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    letter-spacing: 0.22em;
    color: var(--midnight-violet);
    margin-top: 1.8rem;
    opacity: 0;
    animation: hero-fade-in 1s 2.9s ease-out forwards;
}

.hero__line {
    margin-top: 5rem;
    width: 1px;
    height: 18vh;
    background: linear-gradient(180deg, var(--washi-fiber) 0%, rgba(212,200,176,0.2) 100%);
    transform: scaleY(0);
    transform-origin: top center;
    animation: line-descend 2s 3.7s ease-out forwards;
}

@keyframes hero-title-in {
    0%   { opacity: 0; transform: translateY(24px); filter: blur(6px); }
    100% { opacity: 1; transform: translateY(0);    filter: blur(0);  }
}
@keyframes hero-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes line-descend {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* ---------------------------------------------------------
   STRATUM MARKERS
   --------------------------------------------------------- */
.stratum__marker {
    position: relative;
    width: fit-content;
    margin: 8vh auto 14vh;
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.stratum.is-visible .stratum__marker {
    opacity: 1;
    transform: translateY(0);
}

.marker__kanji {
    font-family: 'Shippori Mincho', 'Times New Roman', serif;
    font-weight: 800;
    font-size: clamp(4rem, 10vw, 9rem);
    letter-spacing: 0.15em;
    line-height: 1;
}

.marker__range {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 600;
    font-style: italic;
    font-size: clamp(1.4rem, 2.6vw, 2.2rem);
    letter-spacing: 0.08em;
    margin-top: 1.2rem;
    opacity: 0.88;
}

.marker__tag {
    font-family: 'Overpass Mono', 'Courier New', monospace;
    font-weight: 300;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.32em;
    margin-top: 1rem;
    text-transform: uppercase;
}

/* Per-stratum marker colors */
.stratum--late-heisei .marker__kanji { color: var(--midnight-violet); }
.stratum--late-heisei .marker__range { color: var(--midnight-violet); }
.stratum--late-heisei .marker__tag   { color: var(--spectral-cyan); }

.stratum--mid-heisei .marker__kanji { color: #0e2e28; }
.stratum--mid-heisei .marker__range { color: #0e2e28; }
.stratum--mid-heisei .marker__tag   { color: var(--aurora-green); }

.stratum--aftermath .marker__kanji { color: #2a1a0d; }
.stratum--aftermath .marker__range { color: #2a1a0d; }
.stratum--aftermath .marker__tag   { color: var(--amber-memory); }

.stratum--lost-decade .marker__kanji { color: #f0e6d2; }
.stratum--lost-decade .marker__range { color: #f0e6d2; }
.stratum--lost-decade .marker__tag   { color: var(--aurora-magenta); }

.stratum--bubble-peak .marker__kanji { color: var(--amber-memory); }
.stratum--bubble-peak .marker__range { color: var(--rose-trace); }
.stratum--bubble-peak .marker__tag   { color: var(--amber-memory); }

.stratum--threshold .marker__kanji { color: var(--spectral-cyan); }
.stratum--threshold .marker__range { color: var(--spectral-cyan); }
.stratum--threshold .marker__tag   { color: var(--spectral-cyan); }

/* ---------------------------------------------------------
   TEXT BLOCKS — golden-ratio spiral positioning
   --------------------------------------------------------- */
.block {
    position: relative;
    max-width: 42ch;
    margin: 6vh 0;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.6s ease-out, transform 1.6s ease-out;
    padding: 0.4rem 0;
}

.stratum.is-visible .block,
.stratum.is-active .block {
    opacity: 1;
    transform: translateY(0);
}

/* Golden-ratio spiral-like offsets within each stratum */
.block--pos-1 {
    margin-left: 12vw;
    margin-right: auto;
}

.block--pos-2 {
    margin-left: auto;
    margin-right: 10vw;
    transform: translateY(40px) translateX(-2vw);
}

.stratum.is-visible .block--pos-2 {
    transform: translateY(0) translateX(0);
}

.block--pos-3 {
    margin-left: 28vw;
    margin-right: auto;
}

.block__meta {
    font-family: 'Overpass Mono', 'Courier New', monospace;
    font-weight: 300;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.28em;
    color: var(--spectral-cyan);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    opacity: 0.8;
}

.stratum--surface .block__meta,
.stratum--late-heisei .block__meta {
    color: var(--rose-trace);
}

.stratum--threshold .block__meta {
    color: var(--spectral-cyan);
}

.block__heading {
    font-family: 'Shippori Mincho', 'Times New Roman', serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3.4vw, 2.8rem);
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-bottom: 1.4rem;
    color: var(--midnight-violet);
}

.block__body {
    font-family: 'Crimson Pro', Georgia, serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    line-height: 1.8;
    letter-spacing: 0.015em;
    color: var(--midnight-violet);
    font-feature-settings: 'onum' 1;
}

.block__body em {
    font-style: italic;
    font-weight: 600;
    color: var(--aurora-magenta);
}

/* Block color shifts by stratum */
.stratum--lost-decade .block__heading,
.stratum--lost-decade .block__body {
    color: #f4ecde;
}

.stratum--lost-decade .block__body em {
    color: var(--amber-memory);
}

.stratum--bubble-peak .block__heading {
    color: var(--amber-memory);
}

.stratum--bubble-peak .block__body {
    color: #f0e6d2;
}

.stratum--bubble-peak .block__body em {
    color: var(--rose-trace);
}

.stratum--aftermath .block__heading {
    color: #2a1a0d;
}

.stratum--aftermath .block__body {
    color: #2a1a0d;
}

.stratum--aftermath .block__body em {
    color: #6a3d18;
}

.stratum--mid-heisei .block__heading {
    color: #0e2e28;
}

.stratum--mid-heisei .block__body {
    color: #0e2e28;
}

.stratum--mid-heisei .block__body em {
    color: #0a4a3c;
}

.stratum--threshold .block__heading {
    color: var(--spectral-cyan);
    text-shadow: 0 0 28px rgba(103,232,249,0.35);
}

.stratum--threshold .block__body {
    color: #cde9ee;
}

.stratum--threshold .block__body em {
    color: var(--aurora-magenta);
}

/* ---------------------------------------------------------
   THRESHOLD CLOSE
   --------------------------------------------------------- */
.threshold-close {
    width: 100%;
    text-align: center;
    margin-top: 18vh;
    margin-bottom: 6vh;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 2s ease-out, transform 2s ease-out;
}

.stratum.is-visible .threshold-close {
    opacity: 1;
    transform: translateY(0);
}

.threshold-close__kanji {
    font-family: 'Shippori Mincho', 'Times New Roman', serif;
    font-weight: 800;
    font-size: clamp(5rem, 14vw, 12rem);
    color: var(--spectral-cyan);
    letter-spacing: 0.1em;
    text-shadow: 0 0 40px rgba(103,232,249,0.4);
    line-height: 1;
}

.threshold-close__meta {
    font-family: 'Overpass Mono', 'Courier New', monospace;
    font-weight: 300;
    font-size: clamp(0.7rem, 1vw, 0.85rem);
    letter-spacing: 0.48em;
    color: var(--rose-trace);
    margin-top: 2rem;
    text-transform: uppercase;
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 900px) {
    .stratum { padding: 14vh 4vw; }
    .block--pos-1 { margin-left: 2vw; }
    .block--pos-2 { margin-right: 2vw; }
    .block--pos-3 { margin-left: 8vw; }
    .hero__title  { font-size: clamp(4rem, 22vw, 9rem); }
}

@media (max-width: 560px) {
    .stratum { padding: 10vh 5vw; }
    .block--pos-1,
    .block--pos-2,
    .block--pos-3 { margin-left: 0; margin-right: 0; }
    .hero__subtitle { letter-spacing: 0.24em; }
    .spectral-blob { filter: blur(12px); opacity: 0.3; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.1s !important;
    }
    .hero__title,
    .hero__subtitle,
    .hero__era,
    .hero__line,
    .block,
    .stratum__marker,
    .threshold-close {
        opacity: 1 !important;
        transform: none !important;
    }
}