/* ============================================================
   demodemodatte.com — generative tide-pool
   Coastal Blend palette · Libre Baskerville · Z-pattern
   ============================================================ */

:root {
    --c-paper:     #F2EEE4; /* Sea-Salt Paper */
    --c-tide:      #1F3340; /* Deep Tide */
    --c-aqua:      #7DA8B5; /* Tideline Aqua */
    --c-seafoam:   #B8D4D1; /* Seafoam Wash */
    --c-driftwood: #D9C7A8; /* Driftwood Sand */
    --c-pewter:    #90A8A4; /* Mist Pewter */
    --c-storm:     #3D5A66; /* Storm Glass */

    --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
    --mono:  "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--c-paper);
    color: var(--c-tide);
    font-family: var(--serif);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden;
}

/* ---------- Noise-texture paper grain ---------- */
.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.045;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' seed='3' stitchTiles='stitch'/><feDisplacementMap in='SourceGraphic' scale='0.6'/><feColorMatrix type='matrix' values='0 0 0 0 0.564  0 0 0 0 0.658  0 0 0 0 0.643  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
}

/* ---------- Tide deck (vertical stack of screens) ---------- */
.tide-deck {
    display: block;
}

.tide-screen {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    padding: 4vh 14vw 4vh 5vw; /* over-large right margin */
    overflow: hidden;
}

/* Screens 2–5 start translated down, revealed by JS */
.tide-screen--2,
.tide-screen--3,
.tide-screen--4,
.tide-screen--5 {
    transform: translateY(100vh);
    opacity: 0;
    transition: transform 4.2s cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 3.2s ease;
    will-change: transform, opacity;
}
.tide-screen.revealed {
    transform: translateY(0);
    opacity: 1;
}

/* Progressively cooler weighting */
.tide-screen--2 { background: #F0EDE3; }
.tide-screen--3 { background: #EDECE4; }
.tide-screen--4 { background: #E8ECEA; }
.tide-screen--5 { background: #E2EAEA; }

/* ---------- Z-pattern grid ---------- */
.zgrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: clamp(1.2rem, 3vh, 3rem) clamp(0.6rem, 1.4vw, 1.4rem);
    min-height: calc(100vh - 8vh);
    align-items: start;
}

.region {
    position: relative;
    clip-path: inset(-12% -8% -12% -8%);
}

/* Top-left anchor: wordmark */
.region--wordmark {
    grid-column: 1 / 7;
    grid-row: 1;
    align-self: start;
}

/* Top-right horizon */
.region--horizon {
    grid-column: 8 / 13;
    grid-row: 1;
    align-self: center;
    height: clamp(80px, 22vh, 200px);
}

/* Diagonal sweep: essay */
.region--essay {
    grid-column: 3 / 11;
    grid-row: 2;
    max-width: 46rem;
    margin: clamp(1rem, 4vh, 3rem) auto;
}

/* Bottom-left return: bubbles */
.region--bubbles {
    grid-column: 1 / 9;
    grid-row: 3;
    min-height: 38vh;
    align-self: end;
}

/* Bottom-right exit: footnote */
.region--footnote {
    grid-column: 9 / 13;
    grid-row: 3;
    align-self: end;
    text-align: right;
    padding-bottom: 1vh;
}

/* ---------- Wordmark ---------- */
.wordmark {
    margin: 0;
    line-height: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1em 0.05em;
    cursor: pointer;
    user-select: none;
}
.wm-tile {
    display: inline-block;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(2.6rem, 5.4vw, 5.4rem);
    letter-spacing: -0.012em;
    font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
    padding: 0.4em 0.6em;
    border-bottom: 0.6px solid var(--c-driftwood);
    transform: scale(1);
    transition: transform 420ms ease-out, text-shadow 420ms ease-out, color 420ms ease;
}
.wm-tile:hover {
    transform: scale(1.045);
    text-shadow: 0 1px 0 rgba(31, 51, 64, 0.04);
    color: var(--c-storm);
}

.wordmark-sub {
    margin: 1.4em 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem);
    color: var(--c-storm);
    letter-spacing: 0.01em;
}

/* Secondary screen titles */
.screen-title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.6vw, 4.4rem);
    letter-spacing: -0.012em;
    color: var(--c-tide);
}
.tide-screen--4 .screen-title,
.tide-screen--5 .screen-title { color: var(--c-storm); }

/* ---------- Horizon SVG ---------- */
.region--horizon { display: flex; align-items: center; }
.horizon-svg {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-0.3deg);
    overflow: visible;
}
.horizon-svg path {
    stroke: var(--c-aqua);
    stroke-width: 0.8;
    fill: none;
    vector-effect: non-scaling-stroke;
}

/* ---------- Essay ---------- */
.region--essay article,
article.region--essay { /* noop */ }

.essay-para {
    margin: 0 0 1.4em;
    font-family: var(--serif);
    font-size: clamp(1.05rem, 1.4vw, 1.2rem);
    line-height: 1.78;
    text-align: justify;
    hanging-punctuation: first last;
    color: var(--c-tide);
}
.essay-para + .essay-para:not(.essay-para--first) { text-indent: 1.6em; }
/* paragraphs 2 & 3 get first-line indent; paragraph 1 (drop-cap) does not */
.essay-para--first { text-indent: 0; }

.essay-para--first::first-letter {
    float: left;
    font-family: var(--serif);
    font-weight: 700;
    color: var(--c-aqua);
    font-size: 4.6em;
    line-height: 0.86;
    padding: 0.04em 0.12em 0 0;
}

.essay-quote {
    margin: 2.4em 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(0.98rem, 1.25vw, 1.1rem);
    line-height: 1.7;
    color: var(--c-storm);
    text-align: left;
    padding-left: 1.4em;
    border-left: 0.6px solid var(--c-driftwood);
}

/* ---------- Bubble canvas ---------- */
.region--bubbles canvas,
#bubble-canvas,
.bubble-canvas-secondary {
    display: block;
    width: 100%;
    min-height: 38vh;
    height: 100%;
    mix-blend-mode: multiply;
}

/* hiragana ghost */
.hiragana-ghost {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%) scale(0.96);
    font-family: "Klee One", "Hiragino Mincho ProN", serif;
    font-size: 240px;
    color: var(--c-storm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.6s ease;
    line-height: 1;
    z-index: 5;
}
.hiragana-ghost.show { opacity: 0.12; }

/* ---------- Footnote & metadata ---------- */
.footnote {
    margin: 0 0 1.2em;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    color: var(--c-storm);
}
.meta-strip {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--c-pewter);
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    align-items: flex-end;
}
.meta-item { white-space: nowrap; }
#meta-tide { color: var(--c-driftwood); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
    .tide-screen { padding: 4vh 8vw; }
    .zgrid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 2.4rem;
    }
    .region--wordmark,
    .region--horizon,
    .region--essay,
    .region--bubbles,
    .region--footnote {
        grid-column: 1 / -1;
        grid-row: auto;
        max-width: none;
    }
    .region--horizon { height: 90px; }
    .region--footnote { text-align: left; }
    .meta-strip { align-items: flex-start; }
    .hiragana-ghost { font-size: 140px; }
    .essay-para { text-align: left; }
}