/* =====================================================
   reiwa.day — Bauhaus + Japanese Scholarly Aesthetic
   Colors: #1B2F2B, #3D5A6E, #5B8F8F, #8FB8A0, #F0EDE3, #C5843A, #1A2130
   Font: Commissioner (variable)
   ===================================================== */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    background-color: #F0EDE3;
    color: #1B2F2B;
    line-height: 1.72;
    overflow-x: hidden;
    position: relative;
}

/* =====================================================
   SVG Filters (hidden)
   ===================================================== */

.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =====================================================
   Grain Overlay
   ===================================================== */

.grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
    opacity: 0.04;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px 256px;
}

/* =====================================================
   Moholy-Nagy Circle
   ===================================================== */

.moholy-circle {
    position: fixed;
    top: 50%;
    right: -20vw;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    border: 1px solid #1B2F2B;
    opacity: 0.08;
    z-index: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

/* =====================================================
   Diagonal Tension Lines (Kandinsky)
   ===================================================== */

.diagonal-line {
    position: fixed;
    width: 200vw;
    height: 0.5px;
    background-color: #3D5A6E;
    opacity: 0.08;
    z-index: 2;
    pointer-events: none;
    transform-origin: center center;
}

.diagonal-line-1 {
    top: 30%;
    left: -50%;
    transform: rotate(15deg);
}

.diagonal-line-2 {
    top: 60%;
    left: -50%;
    transform: rotate(-15deg);
}

.diagonal-line-3 {
    top: 80%;
    left: -50%;
    transform: rotate(30deg);
}

/* =====================================================
   Grid Intersection Dots
   ===================================================== */

.grid-dots {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.grid-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #8FB8A0;
    border: 0.5px solid #3D5A6E;
    opacity: 0.2;
}

/* =====================================================
   Folio Base Styles
   ===================================================== */

.folio {
    position: relative;
    min-height: 90vh;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 24px;
    padding: 0 48px;
    overflow: hidden;
}

.folio-bg-plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.folio-content-plane {
    position: relative;
    z-index: 10;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
}

.folio-accent-plane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

/* =====================================================
   Folio Numbers (ghostly background numerals)
   ===================================================== */

.folio-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Commissioner', sans-serif;
    font-weight: 800;
    font-size: clamp(6rem, 15vw, 12rem);
    color: #C5843A;
    opacity: 0.06;
    user-select: none;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* =====================================================
   Breathing Space
   ===================================================== */

.breathing-space {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    grid-column: 1 / -1;
}

.bamboo-leaf {
    width: 30px;
    height: 80px;
}

.bamboo-breathing-1 {
    animation: leaf-gentle-rotate 25s ease-in-out infinite;
}

.bamboo-breathing-2 {
    animation: leaf-gentle-rotate 32s ease-in-out infinite reverse;
}

.bamboo-breathing-3 {
    animation: leaf-gentle-rotate 28s ease-in-out infinite;
}

.bamboo-breathing-4 {
    animation: leaf-gentle-rotate 35s ease-in-out infinite reverse;
}

@keyframes leaf-gentle-rotate {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(8deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(12deg); }
}

/* =====================================================
   FOLIO 01: Title
   ===================================================== */

.folio-01 {
    min-height: 100vh;
    align-content: center;
}

.folio-01 .folio-content-plane {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 5%;
    grid-column: 1 / 7;
}

.site-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    letter-spacing: 0.04em;
    color: #C5843A;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.site-subtitle {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    max-width: 38em;
    color: #1B2F2B;
}

/* Ginkgo Leaves - Drifting Animation */

.ginkgo-leaf {
    position: absolute;
    width: 80px;
    height: 90px;
    opacity: 0.15;
}

.ginkgo-1 {
    top: 10%;
    right: 15%;
    animation: ginkgo-drift-1 45s ease-in-out infinite;
}

.ginkgo-2 {
    top: 25%;
    right: 30%;
    animation: ginkgo-drift-2 38s ease-in-out infinite;
    width: 60px;
    height: 68px;
}

.ginkgo-3 {
    top: 50%;
    right: 10%;
    animation: ginkgo-drift-3 52s ease-in-out infinite;
    width: 70px;
    height: 79px;
}

.ginkgo-4 {
    top: 60%;
    right: 40%;
    animation: ginkgo-drift-1 40s ease-in-out infinite reverse;
    width: 50px;
    height: 56px;
}

.ginkgo-5 {
    top: 15%;
    right: 50%;
    animation: ginkgo-drift-2 55s ease-in-out infinite;
    width: 45px;
    height: 51px;
}

.ginkgo-6 {
    top: 75%;
    right: 25%;
    animation: ginkgo-drift-3 42s ease-in-out infinite reverse;
    width: 55px;
    height: 62px;
}

@keyframes ginkgo-drift-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -15px) rotate(5deg); }
    50% { transform: translate(-10px, 10px) rotate(-3deg); }
    75% { transform: translate(15px, 5px) rotate(8deg); }
}

@keyframes ginkgo-drift-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-15px, 20px) rotate(-7deg); }
    66% { transform: translate(10px, -10px) rotate(4deg); }
}

@keyframes ginkgo-drift-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(25px, 10px) rotate(10deg); }
    40% { transform: translate(-5px, -20px) rotate(-5deg); }
    60% { transform: translate(15px, 15px) rotate(15deg); }
    80% { transform: translate(-10px, 5px) rotate(-2deg); }
}

/* =====================================================
   FOLIO 02: Structure & Nature
   ===================================================== */

.folio-02 {
    min-height: 100vh;
}

.folio-02-content {
    display: grid;
    grid-template-columns: 5fr 4fr;
    gap: 48px;
    align-items: center;
    grid-column: 1 / -1;
}

.folio-02-text {
    padding-right: 24px;
}

.folio-heading {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    letter-spacing: 0.04em;
    color: #3D5A6E;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.folio-body {
    font-family: 'Commissioner', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    max-width: 38em;
    color: #1B2F2B;
    margin-bottom: 1.2rem;
}

.folio-body em {
    font-style: italic;
    font-weight: 300;
    color: #3D5A6E;
}

.folio-02-leaf {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.momiji-leaf {
    width: 100%;
    max-width: 320px;
    height: auto;
    animation: momiji-rotate 60s linear infinite;
    position: relative;
    z-index: 20;
}

@keyframes momiji-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Depth blur on Folio 02 background */
.folio-02::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(2px);
    z-index: -1;
    pointer-events: none;
}

/* =====================================================
   FOLIO 03: Magnetic Text
   ===================================================== */

.folio-03 {
    min-height: 100vh;
    align-content: center;
}

.folio-03-content {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5% 2%;
}

.magnetic-text {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-size: clamp(1.4rem, 3vw, 2.8rem);
    line-height: 1.6;
    color: #1B2F2B;
    max-width: 100%;
    text-align: center;
}

.mag-word {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
    padding: 0 0.15em;
}

.highlight-word {
    color: #8FB8A0;
}

/* =====================================================
   FOLIO 04: Palimpsest
   ===================================================== */

.folio-04 {
    min-height: 100vh;
    background-color: rgba(240, 237, 227, 0.95);
}

.folio-04-bg {
    opacity: 1;
}

.bamboo-grid {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.folio-04-accent {
    pointer-events: none;
}

.bauhaus-circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid #C5843A;
    opacity: 0.15;
}

.bauhaus-circle-1 {
    width: 200px;
    height: 200px;
    top: 20%;
    right: 15%;
}

.bauhaus-circle-2 {
    width: 120px;
    height: 120px;
    bottom: 25%;
    left: 10%;
}

.bauhaus-diagonal {
    position: absolute;
    width: 150%;
    height: 1px;
    background-color: #C5843A;
    opacity: 0.12;
    transform-origin: 0% 50%;
}

.bauhaus-diagonal-1 {
    top: 30%;
    left: 0;
    transform: rotate(15deg);
}

.bauhaus-diagonal-2 {
    bottom: 35%;
    left: 0;
    transform: rotate(-15deg);
}

.folio-04-content {
    grid-column: 3 / 8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 5% 0;
}

.folio-04-text {
    position: relative;
    z-index: 10;
}

/* =====================================================
   FOLIO 05: Closing
   ===================================================== */

.folio-05 {
    min-height: 100vh;
    background-color: #1A2130;
    transition: background-color 0.5s ease;
    align-content: center;
}

.folio-05 .folio-number {
    color: #C5843A;
    opacity: 0.04;
}

.folio-05-content {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    position: relative;
}

.converging-leaves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.converge-leaf {
    position: absolute;
    opacity: 0.2;
}

.converge-leaf-1 {
    width: 60px;
    height: 68px;
    top: 10%;
    left: 10%;
    animation: converge-1 30s ease-in-out infinite;
}

.converge-leaf-2 {
    width: 80px;
    height: 80px;
    top: 15%;
    right: 15%;
    animation: converge-2 30s ease-in-out infinite;
}

.converge-leaf-3 {
    width: 25px;
    height: 65px;
    bottom: 20%;
    left: 20%;
    animation: converge-3 30s ease-in-out infinite;
}

.converge-leaf-4 {
    width: 50px;
    height: 56px;
    bottom: 15%;
    right: 10%;
    animation: converge-4 30s ease-in-out infinite;
}

.converge-leaf-5 {
    width: 20px;
    height: 55px;
    top: 50%;
    left: 5%;
    animation: converge-5 30s ease-in-out infinite;
}

@keyframes converge-1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(calc(50vw - 10vw - 30px), calc(50vh - 10vh - 34px)) rotate(180deg); }
}

@keyframes converge-2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(calc(-50vw + 15vw + 40px), calc(50vh - 15vh - 40px)) rotate(-180deg); }
}

@keyframes converge-3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(calc(50vw - 20vw - 12px), calc(-50vh + 20vh + 32px)) rotate(120deg); }
}

@keyframes converge-4 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(calc(-50vw + 10vw + 25px), calc(-50vh + 15vh + 28px)) rotate(-120deg); }
}

@keyframes converge-5 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(calc(50vw - 5vw - 10px), calc(0vh)) rotate(90deg); }
}

.closing-text {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.closing-title {
    font-family: 'Commissioner', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: #F0EDE3;
}

.closing-date {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 0.85rem;
    color: #8FB8A0;
}

.closing-caption {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 0.85rem;
    color: #5B8F8F;
    margin-top: 1rem;
}

/* =====================================================
   Annotations / Captions
   ===================================================== */

.annotation {
    font-family: 'Commissioner', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 0.85rem;
    color: #5B8F8F;
    position: absolute;
}

/* =====================================================
   Depth Plane Opacity Transitions
   ===================================================== */

.folio-bg-plane {
    opacity: 0.6;
    will-change: opacity;
    transition: opacity 0.8s ease;
}

.folio-content-plane {
    will-change: opacity;
    transition: opacity 0.8s ease;
}

.folio-accent-plane {
    will-change: opacity;
    transition: opacity 0.8s ease;
}

/* =====================================================
   Responsive (below 768px)
   ===================================================== */

@media (max-width: 768px) {
    .folio {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        padding: 0 24px;
        min-height: auto;
        padding-top: 10vh;
        padding-bottom: 5vh;
    }

    .folio-01 {
        min-height: 100vh;
        padding-top: 0;
    }

    .folio-01 .folio-content-plane {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .folio-02-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .folio-02-leaf {
        order: -1;
    }

    .momiji-leaf {
        max-width: 200px;
    }

    .folio-04-content {
        grid-column: 1 / -1;
        padding: 5% 0;
    }

    .magnetic-text {
        font-size: clamp(1.2rem, 5vw, 1.8rem);
    }

    .ginkgo-leaf {
        width: 48px;
        height: 54px;
        opacity: 0.1;
    }

    .folio-number {
        font-size: clamp(4rem, 12vw, 8rem);
    }

    .moholy-circle {
        display: none;
    }

    .breathing-space {
        height: 6vh;
    }

    .converge-leaf {
        opacity: 0.12;
    }

    .folio-05-content {
        min-height: 60vh;
    }

    .bauhaus-circle-1 {
        width: 120px;
        height: 120px;
    }

    .bauhaus-circle-2 {
        width: 80px;
        height: 80px;
    }
}