/* daitoua.com — watercolor cosmography
 * A centered, contemplative seven-plate broadside.
 * Palette: Bone Paper #F5EFE2, Deep Navy #1B2A4E, Telescope Cobalt #3F6F8A,
 *          Sea-Glass #7FA9B6, Cadmium Sun #C77C54, Madder Star #9E5A8A,
 *          Ochre Marginalia #D9C57A, Sumi #2A2018.
 */

:root {
    --bone:        #F5EFE2;
    --deep-navy:   #1B2A4E;
    --cobalt:      #3F6F8A;
    --sea-glass:   #7FA9B6;
    --cadmium:     #C77C54;
    --madder:      #9E5A8A;
    --ochre:       #D9C57A;
    --sumi:        #2A2018;
    --slate:       #4E5A78;

    --display: "Fraunces", "Cormorant Garamond", Georgia, serif;
    --body:    "Cormorant Garamond", Georgia, serif;
    --hand:    "Caveat", "Bradley Hand", cursive;
    --mono:    "IBM Plex Mono", ui-monospace, "Menlo", monospace;
}

* { box-sizing: border-box; }

html {
    background: var(--bone);
    color: var(--deep-navy);
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--body);
    background: var(--bone);
    color: var(--deep-navy);
    cursor: none;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Hidden defs */
.defs-only {
    position: absolute !important;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Paper-grain overlay */
.paper-grain {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 4;
    opacity: 0.55;
    mix-blend-mode: multiply;
}

/* Cursor wash-trail canvas */
#wash-trail {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: multiply;
}

/* Border-animate frame */
#border-frame {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 6;
    overflow: visible;
}

#border-rect {
    fill: none;
    stroke: var(--sumi);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

#border-sigil {
    transition: opacity 1200ms ease-out;
}

/* Main scroll container */
main {
    position: relative;
    width: 100%;
    z-index: 1;
}

/* Plate base */
.plate {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: grid;
    place-items: center;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    padding: 64px 48px;
}

/* Watercolor backdrop SVG fills the plate */
.wash-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Lens-flare layers */
.lens-flare {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
}

.lens-flare .flare-chain {
    transform-origin: 500px 400px;
    transform-box: view-box;
    animation: drift 360s linear infinite;
}

@keyframes drift {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.lens-flare.is-paused .flare-chain { animation-play-state: paused; }

/* Centered typographic stack */
.stack {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: auto auto auto;
    place-items: center;
    text-align: center;
    width: 100%;
    max-width: 70ch;
    height: 100%;
    align-content: center;
    gap: clamp(18px, 2.4vh, 36px);
    padding: 18vh 0 22vh;
}

.stack-tight { padding: 8vh 0 12vh; }
.stack-bottom { padding: 12vh 0 8vh; }

.title {
    font-family: var(--display);
    font-weight: 800;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-feature-settings: "ss01" on, "liga" on;
    font-size: clamp(3.6rem, 8vw, 7.4rem);
    letter-spacing: -0.01em;
    line-height: 1.0;
    color: var(--deep-navy);
    margin: 0;
    text-shadow: 0 0 18px rgba(27,42,78,0.08), 0 0 4px rgba(199,124,84,0.06);
    /* Initial state for type-bleed-in */
    opacity: 0;
    filter: blur(12px);
    transform: scale(0.985);
    transition:
        opacity 1800ms cubic-bezier(0.16, 1, 0.3, 1),
        filter  1800ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 1800ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, filter, transform;
}

.plate.is-visible .title {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.lede {
    font-family: var(--hand);
    font-weight: 500;
    font-size: clamp(1.0rem, 1.4vw, 1.25rem);
    color: var(--cobalt);
    margin: 0;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1400ms ease 220ms, transform 1400ms ease 220ms;
}

.lede.italic { font-style: italic; }

.plate.is-visible .lede {
    opacity: 0.9;
    transform: translateY(0);
}

.body {
    font-family: var(--body);
    font-weight: 400;
    font-size: clamp(1.05rem, 1.45vw, 1.2rem);
    line-height: 1.7;
    color: var(--deep-navy);
    max-width: 56ch;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1600ms ease 380ms, transform 1600ms ease 380ms;
}

.body.italic { font-style: italic; }

.plate.is-visible .body {
    opacity: 0.92;
    transform: translateY(0);
}

.footnote {
    font-family: var(--hand);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--slate);
    margin: 0;
    opacity: 0;
    transition: opacity 1600ms ease 800ms;
}

.plate.is-visible .footnote { opacity: 0.7; }

/* Folio (page numbers) */
.folio {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--hand);
    font-size: 11px;
    color: var(--slate);
    letter-spacing: 0;
    opacity: 0.6;
    z-index: 2;
}

.folio.on-dark { color: var(--bone); opacity: 0.7; }

/* Plate 1 — paper field */
#plate-1 { background: var(--bone); }

/* Plate 2 — sextant */
#plate-2 { background: var(--bone); }

.sextant-wrap {
    position: relative;
    width: min(640px, 80vw);
    margin: 8px auto 0;
}

.sextant {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 0 6px rgba(42,32,24,0.04));
}

.sextant-readout {
    margin-top: 10px;
    text-align: center;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--slate);
    letter-spacing: 0.04em;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.readout-label {
    font-family: var(--hand);
    font-size: 12px;
    color: var(--cobalt);
    opacity: 0.7;
}

.readout-value {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--slate);
}

#sun-blob {
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

#sextant-arm {
    transform-origin: 0 0;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Plate 3 — tide chart */
#plate-3 { background: var(--bone); }

/* Plate 4 — constellation */
#plate-4 { background: #d9d2c4; }

.constellation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(900px, 90vw);
    height: auto;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1800ms ease 200ms;
}

.plate.is-visible .constellation { opacity: 0.92; }

#plate-4 .stack { position: relative; z-index: 3; }
#plate-4 .title { color: var(--bone); text-shadow: 0 0 22px rgba(27,42,78,0.45), 0 0 6px rgba(0,0,0,0.25); }
#plate-4 .lede  { color: var(--ochre); opacity: 0.95; }
#plate-4 .body  { color: var(--bone); opacity: 0.85; }
#plate-4 .folio { color: var(--bone); opacity: 0.7; }

/* Plate 5 — lens flare */
#plate-5 { background: var(--deep-navy); }

#plate-5 .title { color: var(--bone); text-shadow: 0 0 22px rgba(199,124,84,0.35), 0 0 4px rgba(255,255,255,0.15); }
#plate-5 .lede  { color: var(--cadmium); opacity: 0.95; }
#plate-5 .body  { color: var(--bone); opacity: 0.85; }
#plate-5 .folio { color: var(--bone); opacity: 0.6; }
#plate-5 .stack.on-dark { color: var(--bone); }

/* Plate 6 — gantry */
#plate-6 { background: var(--bone); }

.gantry {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(540px, 70vw);
    height: auto;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1800ms ease 200ms;
}

.plate.is-visible .gantry { opacity: 0.95; }

#plate-6 .stack { position: relative; z-index: 3; }

/* Plate 7 — far ocean */
#plate-7 { background: var(--bone); }

#plate-7 .title {
    font-style: italic;
    font-weight: 800;
    font-variation-settings: "opsz" 144, "SOFT" 30;
    color: var(--cobalt);
}

#plate-7 .lede {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    color: var(--cobalt);
    opacity: 0.9;
}

/* Underline accents (used by JS) */
.star-underline {
    fill: none;
    stroke: var(--ochre);
    stroke-width: 0.6;
    opacity: 0.7;
}

/* Custom watercolor cursor */
.brush-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63,111,138,0.65) 0%, rgba(63,111,138,0.0) 70%);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: multiply;
    transition: width 200ms ease, height 200ms ease;
    will-change: transform;
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
    .lens-flare .flare-chain { animation: none; }
    html { scroll-behavior: auto; }
}

/* Smaller viewports — relax centered max-widths so content does not collide with frame */
@media (max-width: 720px) {
    .plate { padding: 44px 28px; }
    .stack { padding: 12vh 0 14vh; }
    .stack-tight { padding: 4vh 0 8vh; }
    .folio { bottom: 42px; }
    .sextant-wrap { width: 92vw; }
    .constellation { width: 96vw; }
    .gantry { width: 78vw; }
}