/* ============================================
   yamato.quest — Cinematic Ukiyo-e Noir
   Five-epoch temporal voyage
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
    /* Color Palette */
    --void-black: #0A0A0F;
    --sumi-ink: #1A1A24;
    --vermillion-gate: #C23028;
    --gold-leaf: #C4A24E;
    --moonstone: #D4CFC4;
    --indigo-deep: #1B2D4F;
    --steel-horizon: #4A5568;
    --nebula-violet: #2D1B4E;
    --patina-green: #2A4A3A;
    --ash-white: #E8E4DC;

    /* Typography */
    --font-jp: 'Noto Serif JP', serif;
    --font-display: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --font-accent: 'Shippori Mincho', serif;

    /* Current era background (changed via JS) */
    --current-bg: #0A0A0F;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--moonstone);
    background-color: var(--current-bg);
    transition: background-color 400ms ease;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Persistent Torii Gate --- */
#torii-gate {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 6rem;
    z-index: 100;
    opacity: 0.15;
    transition: opacity 400ms ease;
    pointer-events: none;
}

#torii-gate.highlight {
    opacity: 0.6;
}

#torii-gate svg {
    width: 100%;
    height: auto;
}

/* --- Era Navigation --- */
#era-nav {
    position: fixed;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.era-dot {
    width: 2rem;
    height: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.3;
    transition: opacity 300ms ease, transform 300ms ease;
    padding: 0;
}

.era-dot.active {
    opacity: 1;
    transform: scale(1.2);
}

.era-dot svg {
    width: 100%;
    height: 100%;
}

/* --- Main Scroll Container --- */
#scroll-container {
    width: 100%;
}

/* --- Era Sections (shared) --- */
.era-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* --- Mon Watermarks --- */
.mon-watermark {
    position: absolute;
    width: 40vw;
    max-width: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.mon-watermark svg {
    width: 100%;
    height: auto;
}

/* --- Typography --- */
.era-title-jp {
    font-family: var(--font-jp);
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.1;
}

.era-title-en {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-top: 0.25em;
}

.era-subtitle {
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    color: var(--ash-white);
    opacity: 0.7;
    margin-top: 0.5em;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
}

/* ============================================
   ERA 1: KAMIYO (Age of Gods)
   ============================================ */
#kamiyo {
    background: var(--void-black);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.kamiyo-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    text-align: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem;
}

/* Central Brushstroke Animation */
.brushstroke-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 70vh;
    width: 40px;
    z-index: 0;
}

.central-brushstroke {
    height: 100%;
    width: 100%;
}

.brushstroke-path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: drawStroke 2.5s ease-out 0.6s forwards;
}

@keyframes drawStroke {
    to {
        stroke-dashoffset: 0;
    }
}

/* After stroke draws, extend to full height */
.brushstroke-container.extended {
    height: 100vh;
    transition: height 1.5s ease;
}

/* Domain Title */
.domain-title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--moonstone);
    position: relative;
    z-index: 2;
    margin-top: 1rem;
}

.domain-title .char {
    display: inline-block;
    opacity: 0;
    animation: charFadeIn 0.3s ease forwards;
}

/* Staggered character animation delays */
.domain-title .char:nth-child(1) { animation-delay: 2.4s; }
.domain-title .char:nth-child(2) { animation-delay: 2.44s; }
.domain-title .char:nth-child(3) { animation-delay: 2.48s; }
.domain-title .char:nth-child(4) { animation-delay: 2.52s; }
.domain-title .char:nth-child(5) { animation-delay: 2.56s; }
.domain-title .char:nth-child(6) { animation-delay: 2.6s; }
.domain-title .char:nth-child(7) { animation-delay: 2.64s; }
.domain-title .char:nth-child(8) { animation-delay: 2.68s; }
.domain-title .char:nth-child(9) { animation-delay: 2.72s; }
.domain-title .char:nth-child(10) { animation-delay: 2.76s; }
.domain-title .char:nth-child(11) { animation-delay: 2.8s; }
.domain-title .char:nth-child(12) { animation-delay: 2.84s; }

@keyframes charFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Subtitle */
.kamiyo-subtitle {
    font-family: var(--font-accent);
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: var(--moonstone);
    opacity: 0;
    animation: fadeIn 1s ease 3.2s forwards;
    margin-top: 1rem;
    letter-spacing: 0.08em;
    position: relative;
    z-index: 2;
    font-feature-settings: "palt";
}

.kamiyo-description {
    font-family: var(--font-body);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: var(--ash-white);
    opacity: 0;
    animation: fadeIn 1s ease 3.6s forwards;
    margin-top: 1rem;
    max-width: 36ch;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 2;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.6; }
}

/* Scroll Chevron */
.scroll-chevron {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    opacity: 0;
    animation: chevronPulse 2s ease-in-out 4s infinite, fadeInFull 0.5s ease 4s forwards;
    z-index: 2;
}

.scroll-chevron svg {
    width: 100%;
    height: auto;
}

@keyframes chevronPulse {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.6; }
    50% { transform: translateX(-50%) translateY(6px); opacity: 1; }
}

@keyframes fadeInFull {
    from { opacity: 0; }
    to { opacity: 0.6; }
}

/* ============================================
   WAVE TRANSITIONS
   ============================================ */
.wave-transition {
    position: relative;
    height: 15vh;
    min-height: 100px;
    overflow: hidden;
    background: linear-gradient(to bottom, var(--void-black), var(--sumi-ink));
}

.wave-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wave-path {
    animation: waveOscillate 6s ease-in-out infinite;
}

.wave-2 {
    animation-delay: -2s;
}

.wave-3 {
    animation-delay: -4s;
}

@keyframes waveOscillate {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(10px); }
}

/* ============================================
   ERA 2: MIYAKO (The Capital)
   ============================================ */
#miyako {
    background: var(--sumi-ink);
    min-height: 200vh;
    padding-top: 8vh;
}

.miyako-header {
    text-align: center;
    padding: 4rem 2rem 2rem;
    position: relative;
    z-index: 1;
}

.miyako-header .era-title-jp {
    color: var(--gold-leaf);
}

.miyako-header .era-title-en {
    color: var(--moonstone);
}

/* Horizontal Scroll Container */
.miyako-scroll-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-top: 2rem;
    padding-bottom: 4rem;
}

.miyako-scroll-container::-webkit-scrollbar {
    display: none;
}

.miyako-panels {
    display: flex;
    width: max-content;
}

.miyako-panel {
    width: 90vw;
    min-height: 50vh;
    scroll-snap-align: center;
    flex-shrink: 0;
    padding: 3rem 5vw;
    display: flex;
    align-items: flex-start;
    position: relative;
}

.gold-divider {
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: var(--gold-leaf);
    opacity: 0.4;
}

.miyako-panel:first-child .gold-divider {
    display: none;
}

.panel-content {
    display: flex;
    flex-direction: column;
    max-width: 60ch;
    margin-left: 30%;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.panel-content.visible {
    opacity: 1;
    transform: translateX(0);
}

.panel-heading {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    color: var(--gold-leaf);
    margin-bottom: 1.5rem;
    letter-spacing: 0.02em;
}

.panel-text {
    font-family: var(--font-body);
    color: var(--moonstone);
    margin-bottom: 1.2rem;
    max-width: 50ch;
}

/* Panel Dot Indicators */
.panel-dots {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.8rem;
    z-index: 10;
}

.panel-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--moonstone);
    opacity: 0.2;
    transition: opacity 300ms ease, transform 300ms ease;
}

.panel-dots .dot.active {
    opacity: 0.8;
    transform: scale(1.3);
}

/* ============================================
   ERA 3: SENGOKU (Warring States)
   ============================================ */
#sengoku {
    background: var(--indigo-deep);
    min-height: 200vh;
    padding: 8vh 5vw;
    position: relative;
}

/* Diagonal stripe pattern background */
#sengoku::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        #1B2D4F,
        #1B2D4F 2px,
        #1F3158 2px,
        #1F3158 4px
    );
    opacity: 0.4;
    z-index: 0;
}

.sengoku-strokes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.sengoku-slash {
    position: absolute;
    width: 60%;
}

.sengoku-slash.s1 {
    top: 20%;
    left: -5%;
    transform: rotate(-15deg);
}

.sengoku-slash.s2 {
    bottom: 30%;
    right: -10%;
    transform: rotate(12deg);
}

.sengoku-content {
    position: relative;
    z-index: 1;
}

.sengoku-header {
    text-align: center;
    padding: 4rem 0;
}

.sengoku-header .era-title-jp {
    color: var(--vermillion-gate);
}

.sengoku-header .era-title-en {
    color: var(--moonstone);
}

/* Fractured diagonal blocks */
.sengoku-blocks {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
}

.sengoku-block {
    background: rgba(26, 26, 36, 0.6);
    padding: 2.5rem 3rem;
    position: relative;
    clip-path: polygon(2% 0%, 100% 1%, 98% 100%, 0% 98%);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.sengoku-block.visible {
    opacity: 1;
    transform: scale(1) rotate(var(--rotate));
}

.block-1 { --rotate: -2deg; }
.block-2 { --rotate: 3deg; }
.block-3 { --rotate: -1.5deg; }

.block-heading {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--vermillion-gate);
    margin-bottom: 1rem;
    letter-spacing: 0.02em;
}

.block-text {
    font-family: var(--font-body);
    color: var(--moonstone);
    max-width: 55ch;
}

/* ============================================
   ERA 4: SENKAN (The Battleship)
   ============================================ */
#senkan {
    background: var(--sumi-ink);
    min-height: 200vh;
    padding-top: 8vh;
    position: relative;
}

/* Waterline */
.waterline {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--steel-horizon);
    opacity: 0.3;
    z-index: 1;
}

.senkan-header {
    text-align: center;
    padding: 4rem 2rem 2rem;
    position: relative;
    z-index: 2;
}

.senkan-header .era-title-jp {
    color: var(--steel-horizon);
}

.senkan-header .era-title-en {
    color: var(--moonstone);
}

/* Horizontal bento grid scroll */
.senkan-scroll-container {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-top: 2rem;
    padding-bottom: 4rem;
    z-index: 2;
}

.senkan-scroll-container::-webkit-scrollbar {
    display: none;
}

.senkan-grid {
    display: flex;
    width: max-content;
    gap: 2px;
}

/* Bento cells */
.bento-cell {
    width: 90vw;
    min-height: 40vh;
    scroll-snap-align: center;
    flex-shrink: 0;
    border: 1px solid rgba(74, 85, 104, 0.3);
    padding: 3rem 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.bento-cell.visible {
    opacity: 1;
    transform: translateX(0);
}

.cell-label {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--steel-horizon);
    margin-bottom: 0.5rem;
}

.cell-value {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--ash-white);
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
}

.cell-text {
    font-family: var(--font-body);
    color: var(--moonstone);
    max-width: 50ch;
    opacity: 0.85;
}

/* Technical grid lines on cells */
.bento-cell::before {
    content: '';
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 20px;
    height: 20px;
    border-top: 1px solid var(--steel-horizon);
    border-right: 1px solid var(--steel-horizon);
    opacity: 0.3;
}

.bento-cell::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    width: 20px;
    height: 20px;
    border-bottom: 1px solid var(--steel-horizon);
    border-left: 1px solid var(--steel-horizon);
    opacity: 0.3;
}

/* ============================================
   ERA 5: UCHUU (The Cosmos)
   ============================================ */
#uchuu {
    background: var(--void-black);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* CSS-only star field */
.star-field {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* Generate stars with individual positions and delays */
.star-field::before,
.star-field::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--moonstone);
    border-radius: 50%;
    box-shadow:
        /* Layer 1: 40 stars */
        calc(10vw) calc(15vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(25vw) calc(8vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(40vw) calc(22vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(55vw) calc(35vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(70vw) calc(12vh) 0 0 rgba(212, 207, 196, 0.7),
        calc(85vw) calc(45vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(15vw) calc(55vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(30vw) calc(68vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(50vw) calc(78vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(65vw) calc(85vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(80vw) calc(72vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(92vw) calc(28vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(5vw) calc(40vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(20vw) calc(90vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(45vw) calc(5vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(60vw) calc(60vh) 0 0 rgba(212, 207, 196, 0.7),
        calc(75vw) calc(50vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(90vw) calc(92vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(35vw) calc(42vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(8vw) calc(75vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(48vw) calc(52vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(62vw) calc(18vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(78vw) calc(32vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(88vw) calc(65vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(12vw) calc(28vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(33vw) calc(82vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(52vw) calc(92vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(68vw) calc(42vh) 0 0 rgba(212, 207, 196, 0.7),
        calc(82vw) calc(8vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(95vw) calc(55vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(3vw) calc(62vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(22vw) calc(48vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(42vw) calc(32vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(58vw) calc(88vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(72vw) calc(25vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(86vw) calc(78vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(18vw) calc(18vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(38vw) calc(58vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(56vw) calc(48vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(97vw) calc(38vh) 0 0 rgba(212, 207, 196, 0.7);
    animation: twinkle1 4s ease-in-out infinite;
}

.star-field::after {
    width: 1px;
    height: 1px;
    box-shadow:
        /* Layer 2: 40 more stars */
        calc(7vw) calc(20vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(17vw) calc(35vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(27vw) calc(12vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(37vw) calc(75vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(47vw) calc(28vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(57vw) calc(65vh) 0 0 rgba(212, 207, 196, 0.7),
        calc(67vw) calc(8vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(77vw) calc(55vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(87vw) calc(18vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(93vw) calc(82vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(2vw) calc(88vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(13vw) calc(45vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(23vw) calc(72vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(43vw) calc(15vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(53vw) calc(42vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(63vw) calc(95vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(73vw) calc(62vh) 0 0 rgba(212, 207, 196, 0.7),
        calc(83vw) calc(38vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(96vw) calc(48vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(9vw) calc(52vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(19vw) calc(5vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(29vw) calc(92vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(39vw) calc(22vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(49vw) calc(68vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(59vw) calc(15vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(69vw) calc(78vh) 0 0 rgba(212, 207, 196, 0.7),
        calc(79vw) calc(42vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(89vw) calc(85vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(4vw) calc(32vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(14vw) calc(65vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(24vw) calc(55vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(34vw) calc(8vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(44vw) calc(85vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(54vw) calc(25vh) 0 0 rgba(212, 207, 196, 0.6),
        calc(64vw) calc(72vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(74vw) calc(15vh) 0 0 rgba(212, 207, 196, 0.5),
        calc(84vw) calc(52vh) 0 0 rgba(212, 207, 196, 0.4),
        calc(94vw) calc(22vh) 0 0 rgba(212, 207, 196, 0.7),
        calc(11vw) calc(82vh) 0 0 rgba(212, 207, 196, 0.3),
        calc(31vw) calc(38vh) 0 0 rgba(212, 207, 196, 0.5);
    animation: twinkle2 5s ease-in-out infinite;
}

@keyframes twinkle1 {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes twinkle2 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Uchuu content - freeform positioning */
.uchuu-content {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 6rem 2rem;
    text-align: center;
}

.uchuu-title {
    color: var(--nebula-violet);
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.uchuu-title.visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.uchuu-title-en {
    color: var(--moonstone);
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    transition: opacity 0.8s ease 0.15s, transform 0.8s ease 0.15s;
}

.uchuu-title-en.visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.uchuu-subtitle {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease 0.3s, transform 0.8s ease 0.3s;
}

.uchuu-subtitle.visible {
    opacity: 0.7;
    transform: translateY(0);
}

.uchuu-text-block {
    max-width: 55ch;
    margin-top: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease 0.4s, transform 1s ease 0.4s;
}

.uchuu-text-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.uchuu-text {
    font-family: var(--font-body);
    color: var(--moonstone);
    margin-bottom: 1.5rem;
}

/* Enlarged torii in Uchuu */
.uchuu-torii {
    width: 30vw;
    max-width: 300px;
    margin-top: 4rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.6s, transform 1s ease 0.6s;
}

.uchuu-torii.visible {
    opacity: 0.15;
    transform: translateY(0);
}

.uchuu-torii svg {
    width: 100%;
    height: auto;
}

/* Final domain name */
.uchuu-final {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--vermillion-gate);
    margin-top: 4rem;
    letter-spacing: 0.1em;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease 0.8s, transform 1s ease 0.8s;
}

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

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    #era-nav {
        right: 0.8rem;
        gap: 0.8rem;
    }

    .era-dot {
        width: 1.5rem;
        height: 1.5rem;
    }

    #torii-gate {
        width: 4rem;
        bottom: 1rem;
    }

    .miyako-panel {
        width: 95vw;
        padding: 2rem 3vw;
    }

    .panel-content {
        margin-left: 5%;
    }

    .sengoku-block {
        padding: 2rem;
    }

    .bento-cell {
        width: 95vw;
        padding: 2rem 4vw;
    }

    .uchuu-torii {
        width: 50vw;
    }

    .brushstroke-container {
        height: 50vh;
    }
}

@media (max-width: 480px) {
    .domain-title {
        letter-spacing: 0.08em;
    }

    .sengoku-blocks {
        gap: 2rem;
    }

    .miyako-panel {
        width: 100vw;
    }

    .bento-cell {
        width: 100vw;
    }
}