/* reiwa.day - Mid-Century Modern meets Japanese Minimal */

:root {
    --washi-paper: #f5f0e8;
    --tatami: #e8ddd0;
    --persimmon: #b86e4a;
    --urushi: #3a2a1a;
    --dawn-skin: #e8c8b0;
    --sumi: #2a1a0a;
    --kintsugi: #c8a050;
    --joint: #d0c4b4;
}

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

body {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    color: var(--sumi);
    background-color: var(--washi-paper);
    overflow-x: hidden;
    line-height: 1.9;
    font-size: clamp(0.9rem, 1vw, 1.1rem);
}

/* Paper grain overlay */
#paper-grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.02;
    pointer-events: none;
    z-index: 1000;
}

/* Section 1: Date Stamp */
#date-stamp {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--washi-paper);
    padding-top: 23.6vh; /* golden ratio offset from top: 61.8% down */
    padding-bottom: 38.2vh;
    position: relative;
}

.day-count {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: clamp(12rem, 20vw, 22rem);
    color: var(--sumi);
    line-height: 0.85;
    opacity: 0;
    animation: fadeInCount 0.8s ease 0.5s forwards;
    letter-spacing: -0.02em;
}

.divider-line {
    width: 0;
    height: 1px;
    background-color: var(--sumi);
    margin: 1.5rem 0 1rem;
    animation: lineExpand 0.6s ease-out 0.8s forwards;
}

.gregorian-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--sumi);
    opacity: 0;
    animation: fadeInCount 0.4s ease 1.2s forwards;
    letter-spacing: 0.1em;
}

@keyframes fadeInCount {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lineExpand {
    from { width: 0; }
    to { width: 40vw; }
}

/* Section 2: Bento Grid */
#bento-grid {
    min-height: 150vh;
    padding: 5vh 5vw;
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "kanji    timeline  timeline"
        "emperor  season    year"
        "poem     poem      year";
    gap: 2px;
    max-width: 1200px;
    margin: 0 auto;
}

#kintsugi-crack {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

#kintsugi-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2s ease-in-out;
}

#kintsugi-path.drawn {
    stroke-dashoffset: 0;
}

.bento-cell {
    padding: 2rem 2.5rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.bento-cell.from-right {
    transform: translateX(20px);
}

.bento-cell.from-right.visible {
    transform: translateX(0);
}

.cell-kanji {
    grid-area: kanji;
    background-color: var(--tatami);
    position: relative;
}

.cell-timeline {
    grid-area: timeline;
    background-color: var(--dawn-skin);
}

.cell-emperor {
    grid-area: emperor;
    background-color: var(--washi-paper);
    border: 2px solid var(--joint);
}

.cell-season {
    grid-area: season;
    background-color: var(--tatami);
}

.cell-year {
    grid-area: year;
    background-color: var(--dawn-skin);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cell-poem {
    grid-area: poem;
    background-color: var(--washi-paper);
    border: 2px solid var(--joint);
}

.cell-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--persimmon);
    margin-bottom: 1rem;
}

.cell-body {
    line-height: 1.9;
}

.brush-annotation {
    width: 120px;
    height: 40px;
    margin-top: 1rem;
    display: block;
}

/* Timeline */
.timeline-list {
    list-style: none;
}

.timeline-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--joint);
    font-size: 0.9rem;
}

.timeline-list li:last-child {
    border-bottom: none;
}

.timeline-date {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--persimmon);
    margin-right: 0.75rem;
}

/* Emperor age */
.emperor-age {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 5rem);
    color: var(--sumi);
    margin-top: 0.5rem;
}

/* Season */
.season-name {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.micro-season {
    font-size: 1rem;
    opacity: 0.7;
}

/* Reiwa Year */
.reiwa-year {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 8vw, 8rem);
    color: var(--sumi);
    line-height: 1;
}

/* Poem */
.poem-text {
    font-style: italic;
    line-height: 2.2;
    max-width: 40ch;
}

/* Section 3: Diagonal Transition */
#diagonal-transition {
    position: relative;
    min-height: 50vh;
}

.diagonal-clip {
    height: 15vh;
    background-color: var(--washi-paper);
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
}

.terracotta-band {
    background-color: var(--persimmon);
    min-height: 35vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 10vw;
}

.time-quote {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    color: var(--washi-paper);
    text-align: center;
    line-height: 2;
    max-width: 50ch;
    border: none;
    quotes: none;
}

/* Section 4: Evening Count */
#evening-count {
    min-height: 80vh;
    background-color: var(--urushi);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10vh 5vw;
}

.evening-day-count {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(7rem, 12vw, 13rem);
    color: var(--dawn-skin);
    opacity: 0.5;
    line-height: 0.85;
}

.fractional-counter {
    font-family: 'Space Mono', monospace;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--dawn-skin);
    opacity: 0.7;
    margin-top: 1rem;
}

.sunset-time {
    font-family: 'Space Mono', monospace;
    font-size: 0.8rem;
    color: var(--dawn-skin);
    opacity: 0.4;
    margin-top: 3rem;
    letter-spacing: 0.1em;
}

/* Responsive */
@media (max-width: 768px) {
    #bento-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "kanji    kanji"
            "timeline timeline"
            "emperor  season"
            "year     year"
            "poem     poem";
        padding: 3vh 3vw;
    }

    .bento-cell {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    #bento-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "kanji"
            "timeline"
            "emperor"
            "season"
            "year"
            "poem";
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .day-count,
    .divider-line,
    .gregorian-date,
    .bento-cell {
        opacity: 1 !important;
        transform: none !important;
    }

    .divider-line {
        width: 40vw !important;
    }

    #kintsugi-path {
        stroke-dashoffset: 0 !important;
    }
}