/* ===========================================================
   haskell.day — surreal dreamscape almanac
   palette: Pre-Dawn Tide
   =========================================================== */

:root {
    --abyssal-indigo: #0B1027;
    --pre-dawn:       #1F2A4A;
    --tide-slate:     #3B5784;
    --mist-cyan:      #7BA7C6;
    --reed-bone:      #D9C99B;
    --lambda-ember:   #E66B4A;
    --page-ivory:     #F4EEE0;
    --deep-pool:      #1A4D5C;

    --display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --prose:   'Cormorant Garamond', 'Inter', Georgia, serif;
    --mono:    'DM Mono', 'Inter', ui-monospace, monospace;
    --sans:    'Inter', system-ui, sans-serif;

    --hexlace-opacity: 0.6;
    --ember-x: -100px;
    --ember-y: -100px;
    --ember-scale: 1;
    --scroll-y: 0;
    --dolly-mid: 0;
    --dolly-bg:  0;
}

/* ----------------- reset / base ----------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: var(--abyssal-indigo);
    color: var(--reed-bone);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}
body {
    position: relative;
    font-family: var(--prose);
    font-size: 17.5px;
    line-height: 1.74;
    overflow-x: hidden;
    cursor: none;
    background:
        radial-gradient(ellipse at 50% 0%,   #1F2A4A 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, #0B1027 30%, transparent 70%),
        var(--abyssal-indigo);
    background-attachment: fixed;
}

@media (hover: none) and (pointer: coarse) {
    body { cursor: auto; }
    .ember { display: none; }
}

a { color: var(--mist-cyan); text-decoration: none; }

/* ----------------- strata: backgrounds ----------------- */
.stratum {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}
.stratum-bg {
    z-index: -3;
    transform: translate3d(0, calc(var(--dolly-bg) * 1px), 0);
}
.stratum-mid {
    z-index: -2;
    transform: translate3d(0, calc(var(--dolly-mid) * 1px), 0);
    opacity: 0.55;
}

.horizon-gradient {
    position: absolute;
    inset: -10vh -5vw -10vh -5vw;
    background:
        linear-gradient(180deg,
            #1F2A4A 0%,
            #1A4D5C 22%,
            #3B5784 42%,
            #1F2A4A 70%,
            #0B1027 100%);
    opacity: 0.35;
    filter: blur(0.5px);
}
.horizon-stars {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.7;
}

.hex-lattice, .hexlace {
    position: absolute;
    top: -10vh;
    left: -5vw;
    width: 110vw;
    height: 540vh;
}
.hex-lattice {
    fill: none;
    stroke: var(--tide-slate);
    stroke-width: 1.1;
    opacity: 0.95;
}
.hex-lattice .hex-cell {
    fill: rgba(31, 42, 74, 0.18);
    transform-box: fill-box;
    transform-origin: center;
    transition: fill 600ms ease, opacity 600ms ease;
}
.hex-lattice .hex-cell.satellite {
    fill: rgba(31, 42, 74, 0.10);
    stroke: var(--tide-slate);
    stroke-width: 0.6;
    opacity: 0.7;
}
.hexlace {
    fill: none;
    stroke: var(--mist-cyan);
    stroke-width: 0.6;
    opacity: var(--hexlace-opacity);
    pointer-events: none;
    transition: opacity 280ms linear;
}

/* ----------------- lambda glyph + radial menu ----------------- */
.lambda-glyph {
    position: fixed;
    top: 28px;
    left: 28px;
    z-index: 50;
    width: 64px;
    height: 64px;
    pointer-events: auto;
}
.lambda-button {
    background: rgba(11, 16, 39, 0.55);
    border: none;
    border-radius: 50%;
    padding: 6px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    cursor: none;
    backdrop-filter: blur(2px);
    transition: transform 600ms cubic-bezier(0.6, 0, 0.4, 1), background 400ms ease;
}
.lambda-button:hover { background: rgba(31, 42, 74, 0.7); transform: rotate(-12deg); }
.lambda-glyph[data-open="true"] .lambda-button { transform: rotate(60deg); background: rgba(230, 107, 74, 0.18); }
.lambda-hex { width: 56px; height: 56px; display: block; }

.radial-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}
.radial-item {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    transition:
        transform 700ms cubic-bezier(0.6, 0, 0.4, 1),
        opacity  500ms ease;
    font-family: var(--display);
    font-style: italic;
    font-size: 15px;
    color: var(--page-ivory);
    background: rgba(11, 16, 39, 0.78);
    border: 1px solid var(--tide-slate);
    padding: 8px 14px;
    border-radius: 999px;
    white-space: nowrap;
    pointer-events: none;
}
.radial-item:hover { color: var(--lambda-ember); border-color: var(--lambda-ember); }
.lambda-glyph[data-open="true"] .radial-menu { pointer-events: auto; }
.lambda-glyph[data-open="true"] .radial-item { opacity: 1; pointer-events: auto; }

/* deal positions per index */
.lambda-glyph[data-open="true"] .radial-item[data-i="0"] { transform: translate(40px, 70px)   scale(1); }
.lambda-glyph[data-open="true"] .radial-item[data-i="1"] { transform: translate(120px, 110px) scale(1); }
.lambda-glyph[data-open="true"] .radial-item[data-i="2"] { transform: translate(170px, 50px)  scale(1); }
.lambda-glyph[data-open="true"] .radial-item[data-i="3"] { transform: translate(140px, -30px) scale(1); }
.lambda-glyph[data-open="true"] .radial-item[data-i="4"] { transform: translate(70px, -80px)  scale(1); }
.lambda-glyph[data-open="true"] .radial-item[data-i="5"] { transform: translate(-20px, -60px) scale(1); }

/* ----------------- ember cursor ----------------- */
.ember {
    position: fixed;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--lambda-ember);
    pointer-events: none;
    z-index: 100;
    opacity: 0.7;
    transform:
        translate3d(var(--ember-x), var(--ember-y), 0)
        scale(var(--ember-scale));
    box-shadow: 0 0 18px 2px rgba(230, 107, 74, 0.45);
    transition: transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1), width 280ms ease, height 280ms ease;
    mix-blend-mode: screen;
}
.ember.dilated {
    width: 11px;
    height: 11px;
    box-shadow: 0 0 28px 6px rgba(230, 107, 74, 0.55);
}

/* ----------------- main flow ----------------- */
main {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 6vh 6vw 12vh;
}

/* ----------------- masthead ----------------- */
.masthead {
    min-height: 92vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 4vh 2vw 0;
    gap: 1.4rem;
    position: relative;
}
.masthead-eyebrow {
    font-family: var(--mono);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mist-cyan);
    margin: 0;
    opacity: 0.9;
}
.masthead-title {
    font-family: var(--display);
    font-weight: 600;
    font-style: normal;
    font-variation-settings: "SOFT" 30;
    color: var(--page-ivory);
    font-size: clamp(4.4rem, 12vw, 11rem);
    letter-spacing: -0.022em;
    line-height: 0.9;
    margin: 0;
}
.masthead-title em {
    font-style: italic;
    color: var(--lambda-ember);
    font-weight: 500;
}
.masthead-sub {
    font-family: var(--prose);
    font-size: 19px;
    line-height: 1.6;
    max-width: 38ch;
    color: var(--reed-bone);
    margin: 0;
}
.masthead-coords {
    font-family: var(--mono);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--tide-slate);
    margin-top: 1.4rem;
    opacity: 0.85;
}

/* ----------------- hours ----------------- */
.hour {
    position: relative;
    min-height: 96vh;
    padding: 12vh 0 8vh;
    display: flex;
    align-items: center;
}
.hour-frame {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-areas:
        "marker  motif"
        "title   motif"
        "body    motif"
        "margin  motif";
    gap: 1.6rem 4rem;
    padding: 0 2vw;
}
.hour-marker {
    grid-area: marker;
    font-family: var(--mono);
    font-style: italic;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tide-slate);
    margin: 0 0 0.4rem;
}
.hour-title {
    grid-area: title;
    font-family: var(--display);
    font-weight: 600;
    font-style: italic;
    font-variation-settings: "SOFT" 30;
    color: var(--page-ivory);
    font-size: clamp(3.2rem, 6.8vw, 6.4rem);
    letter-spacing: -0.018em;
    line-height: 0.92;
    margin: 0 0 1.6rem;
    overflow: hidden;
}
.hour-title .glyph {
    display: inline-block;
    transform: translateY(8px);
    opacity: 0;
    transition:
        transform 800ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity   800ms ease;
    transition-delay: calc(var(--i) * 22ms);
}
.hour-title.in-view .glyph {
    transform: translateY(0);
    opacity: 1;
}
.hour-title .glyph.space { width: 0.32em; }
.hour-body {
    grid-area: body;
    max-width: 36ch;
    font-size: 17.5px;
    line-height: 1.74;
    color: var(--reed-bone);
}
.hour-body .lede {
    font-family: var(--display);
    font-style: italic;
    font-size: 22px;
    line-height: 1.5;
    color: var(--page-ivory);
    margin: 0 0 1.4rem;
    max-width: 28ch;
}
.hour-body p { margin: 0 0 1.2rem; }
.hour-body em {
    font-style: italic;
    color: var(--page-ivory);
}
.hour-body code, code.legend {
    font-family: var(--mono);
    font-style: italic;
    font-size: 14.5px;
    color: var(--reed-bone);
    background: transparent;
}

/* function-name ember spans */
.fn { position: relative; cursor: none; }
.fn code {
    color: var(--lambda-ember);
    font-style: italic;
    font-weight: 500;
    transition: color 320ms ease;
    position: relative;
}
.fn code::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 1px;
    background: var(--lambda-ember);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 460ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fn.illuminated code { color: var(--page-ivory); }
.fn.illuminated code::after { transform: scaleX(1); }
.fn::after {
    content: attr(data-aphorism);
    position: absolute;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    width: 18ch;
    font-family: var(--prose);
    font-style: italic;
    font-size: 14px;
    line-height: 1.45;
    color: var(--reed-bone);
    background: rgba(11, 16, 39, 0.85);
    border-left: 1px solid var(--lambda-ember);
    padding: 6px 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 360ms ease, transform 360ms ease;
    z-index: 10;
    white-space: normal;
}
.fn.illuminated::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* hour motif column */
.motif {
    grid-area: motif;
    margin: 0;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: 480px;
    padding: 1.5rem;
    position: relative;
    background: rgba(11, 16, 39, 0.45);
    border: 1px solid rgba(59, 87, 132, 0.35);
    border-radius: 4px;
}
.motif svg { width: 100%; height: auto; display: block; }
.motif-caption {
    margin-top: 0.8rem;
    font-family: var(--prose);
    font-style: italic;
    font-size: 13px;
    color: var(--tide-slate);
    text-align: center;
}
.motif-caption em {
    color: var(--reed-bone);
    font-style: italic;
}

.marginalia {
    grid-area: margin;
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(59, 87, 132, 0.45);
    max-width: 38ch;
}
.marginalia-text {
    font-family: var(--prose);
    font-style: italic;
    font-size: 14px;
    color: var(--tide-slate);
    margin: 0 0 0.4rem;
}
.marginalia-code {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--mist-cyan);
    margin: 0;
    opacity: 0.85;
}
.marginalia-code code { color: var(--mist-cyan); font-style: normal; }

/* per-hour broken-grid offsets */
#dawn       .hour-body { transform: translateY(0); }
#first-tide .hour-body { transform: translateY(28px); }
#high-sun   .hour-body { transform: translateY(-12px); }
#low-sun    .hour-body { transform: translateY(40px); }
#twilight   .hour-body { transform: translateY(8px); }
#night      .hour-body { transform: translateY(-20px); }

/* alternate motif sides for visual variety */
#first-tide .hour-frame,
#low-sun    .hour-frame,
#night      .hour-frame {
    grid-template-columns: 0.95fr 1.05fr;
    grid-template-areas:
        "motif marker"
        "motif title"
        "motif body"
        "motif margin";
}

/* ----------------- motifs: heron ----------------- */
.motif-heron .heron-svg { max-width: 360px; margin: 0 auto; }
.heron-leg {
    transform-origin: 186px 180px;
    animation: heron-step 22s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}
.heron-group {
    transform-origin: 160px 200px;
    animation: heron-sway 7s ease-in-out infinite alternate;
}
.heron-eye text {
    animation: heron-blink 4540ms steps(1, end) infinite;
}
@keyframes heron-step {
    0%, 70%, 100% { transform: rotate(0deg) translateY(0); }
    78% { transform: rotate(-22deg) translateY(-6px); }
    86% { transform: rotate(-18deg) translateY(-10px); }
    94% { transform: rotate(0deg) translateY(0); }
}
@keyframes heron-sway {
    0%   { transform: rotate(-0.4deg); }
    100% { transform: rotate( 0.4deg); }
}
@keyframes heron-blink {
    0%, 96% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

/* ----------------- motifs: fold ----------------- */
.motif-fold .fold-ribbon {
    animation: fold-drift 18s ease-in-out infinite alternate;
    transform-origin: center;
}
@keyframes fold-drift {
    0%   { transform: translateX(-8px) translateY(-2px); }
    100% { transform: translateX( 8px) translateY( 2px); }
}

/* ----------------- motifs: glacier ----------------- */
.motif-glacier .glacier-svg { max-width: 540px; margin: 0 auto; }
#glacier-wedge { transition: transform 240ms linear; }

/* ----------------- motifs: jar ----------------- */
.motif-jar .jar-svg { max-width: 240px; margin: 0 auto; }
#jar-lid {
    transform-origin: 120px 66px;
    animation: jar-rock 19s ease-in-out infinite;
}
@keyframes jar-rock {
    0%, 100% { transform: rotate(-0.6deg); }
    50%      { transform: rotate( 0.6deg); }
}

/* ----------------- motifs: starfish ----------------- */
.motif-starfish .starfish-svg { max-width: 280px; margin: 0 auto; }
.starfish-svg g { animation: starfish-drift 21s ease-in-out infinite alternate; }
@keyframes starfish-drift {
    0%   { transform: translate(160px, 160px) rotate(-1.2deg); }
    100% { transform: translate(160px, 160px) rotate( 1.2deg); }
}

/* ----------------- motifs: starmap ----------------- */
.motif-stars .starmap-svg { max-width: 720px; margin: 0 auto; }
.starmap-stars .star { cursor: none; transition: transform 300ms ease; }
.starmap-stars .star circle {
    fill: var(--mist-cyan);
    transition: r 280ms ease, fill 280ms ease;
}
.starmap-stars .star text {
    fill: var(--reed-bone);
    font-family: var(--mono);
    font-style: italic;
    font-size: 9px;
    text-anchor: middle;
    transform: translate(0, -8px);
    opacity: 0.65;
    transition: opacity 300ms ease, fill 300ms ease;
}
.starmap-stars .star.glow circle { r: 3.6; fill: var(--page-ivory); }
.starmap-stars .star.glow text   { opacity: 1; fill: var(--lambda-ember); }
.starmap-lines {
    transition: stroke 320ms ease, opacity 320ms ease;
}

/* ----------------- footer / horizon ----------------- */
.horizon-footer {
    margin-top: 8vh;
    padding: 4vh 0;
    border-top: 1px solid rgba(59, 87, 132, 0.4);
    text-align: center;
}
.horizon-line {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--page-ivory);
    margin: 0 0 0.6rem;
}
.horizon-meta {
    font-family: var(--mono);
    font-style: italic;
    font-size: 11px;
    color: var(--tide-slate);
    letter-spacing: 0.04em;
    margin: 0;
}

/* ----------------- responsive ----------------- */
@media (max-width: 880px) {
    .hour-frame,
    #first-tide .hour-frame,
    #low-sun    .hour-frame,
    #night      .hour-frame {
        grid-template-columns: 1fr;
        grid-template-areas:
            "marker"
            "title"
            "motif"
            "body"
            "margin";
        gap: 1.2rem 0;
    }
    .motif { max-width: 420px; }
    .fn::after {
        position: static;
        display: block;
        width: auto;
        max-width: 28ch;
        margin-top: 6px;
        transform: none;
        opacity: 0;
        transition: opacity 360ms ease;
    }
    .fn.illuminated::after { opacity: 1; transform: none; }
    .lambda-glyph { top: 14px; left: 14px; }
    main { padding: 4vh 5vw 8vh; }
    .masthead { min-height: 88vh; }
    .hour { min-height: auto; padding: 8vh 0 4vh; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .stratum-bg, .stratum-mid { transform: none !important; }
    .stratum-mid { opacity: 0.4; }
    .hexlace { opacity: 0.4 !important; }
    .heron-leg, .heron-group, .heron-eye text,
    .fold-ribbon, .starfish-svg g, #jar-lid {
        animation: none !important;
    }
    .hour-title .glyph { transform: none; opacity: 1; transition: none; }
}