/* =====================================================================
   ground-sea.css — the look of sky/ground-sea.js.
   (it used to be written inside the script, as strings; same rules, now here)
   ===================================================================== */

.ground-sea {
    height: 30vh;
    min-height: 200px;
    /* (19 Oct) the sea darkens with the day: the waves, the dock and the ship (the artist's are bright), dimmer and
       greyer from golden hour on, darkest at night. sky.js sets --dusk and --night */
    --sea-dim: calc(1 - .5 * var(--dusk, 0) - .16 * var(--night, 0));
    --sea-sat: calc(1 - .4 * var(--dusk, 0));
}
/* (16 Oct) each wave its own layer: painted once, then only slid about as you scroll. without it the four full-width waves
   and their shadows were painted again every frame, and the sea ran at about 30 frames a second instead of 60 */
.ground-sea .wave-move {
    will-change: transform;
    transform-origin: 50% 100%;              /* (19 Oct) the waves squash from the sea's floor: ground-sea.js SQUASH */
}
/* (19 Oct) the wave itself fills its box; the box moves (ground-sea.js), the wave inside is painted once */
.ground-sea .wave {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.ground-sea .wave-1 {
    color: #56636f;
    filter: brightness(var(--sea-dim)) saturate(var(--sea-sat)) drop-shadow(0 -3px 5px rgba(0, 0, 0, .35));
}
.ground-sea .wave-2 {
    color: #45525e;
    filter: brightness(var(--sea-dim)) saturate(var(--sea-sat)) drop-shadow(0 -4px 6px rgba(0, 0, 0, .4));
}
.ground-sea .wave-3 {
    color: #36424d;
    filter: brightness(var(--sea-dim)) saturate(var(--sea-sat)) drop-shadow(0 -5px 7px rgba(0, 0, 0, .45));
}
.ground-sea .wave-4 {
    color: #28323b;
    filter: brightness(var(--sea-dim)) saturate(var(--sea-sat)) drop-shadow(0 -6px 9px rgba(0, 0, 0, .5));
}
.ground-sea .lines {
    fill: none;
    stroke: rgba(255, 255, 255, .13);
    stroke-width: 1.4;
    stroke-linecap: round;
}
.ground-sea .foam {
    fill: #e2d9c6;
}
.ground-sea::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(to top, #000 60%, transparent 100%);
    mask-image: linear-gradient(to top, #000 60%, transparent 100%);
}
.ground-sea .dock {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 -3px 5px rgba(0, 0, 0, .3));
}
.ground-sea .d-rope {
    fill: none;
    stroke: #c9b184;
    stroke-width: 2.4;
    stroke-linecap: round;
}
.ground-sea .d-flame {
    fill: #ffd98a;
}
.ground-sea .groove {
    z-index: auto;
}
.ground-sea .dock-board {
    position: absolute;
    width: 64px;
    display: none;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35));
}
.ground-sea .dock-board.show {
    display: block;
}
.ground-sea .dock-board .placeholder,
.ground-sea .dock-board>.art {
    display: block;
    width: 100%;
    height: auto;
}
.ground-sea .dock-board>.art:not(.glow-layer) {
    filter: brightness(calc(1 - .45 * var(--dusk)));
}
.ground-sea .dock-board:hover {
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .35)) drop-shadow(0 0 8px rgba(255, 230, 160, .8));
}
.ground-sea .dock-board .db-count {
    position: absolute;
    right: -6px;
    top: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: #3a2716;
    color: #f3e6c2;
    font: 12px/20px Georgia, serif;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
}
.ground-sea .dock-board .db-hint {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    white-space: nowrap;
    font-style: italic;
    font-size: .95rem;
    color: #f3e6c2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .7);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
.ground-sea .dock-board:hover .db-hint,
.ground-sea .dock-board:focus-visible .db-hint {
    opacity: 1;
}
@media (max-width: 620px) {
    .ground-sea .dock-board {
        width: 46px;
    }
}
.ground-sea .dock-crab {
    width: 44px;
}
.ground-sea .dock-gull {
    width: 36px;
}
@media (max-width: 620px) {
    .ground-sea .dock-crab {
        width: 32px;
    }
    .ground-sea .dock-gull {
        width: 27px;
    }
}
/* the waves glow at night (2 Nov): over each of the artist's waves, a copy of it through ground-sea.js's #sea-wave-glow (only its
   top, its crest, found from its own shape and fading out downwards, and a slight bloom of it), so the night's dimming lifts
   off the waves' tops. none by day (.sea-glow is on from late afternoon); it fades in with the dusk and is fullest at night.
   its own layer (will-change), so only its opacity changes as the evening goes on, and the filtered picture is drawn once */
.ground-sea.sea-glow .wave-move.wave-glows::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--wave-art) left bottom / auto 100% repeat-x;
    filter: var(--wave-glow, opacity(1)) var(--wave-dof, opacity(1));   /* (ground-sea.js glowFilter, and the wave's own depth of field) */
    opacity: calc(.2 * var(--dusk, 0) + .45 * var(--night, 0));
    will-change: opacity;
    pointer-events: none;
}
/* your own waves: a strip as tall as the sea that repeats sideways */
.ground-sea .wave.has-art {
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: auto 100%;
}
.ground-sea .wave.has-art path {
    display: none;
}
.ground-sea .dock .glow-layer,
.ship .glow-layer {
    opacity: var(--dusk);
}
.ship {
    position: absolute;
    left: 3vw;
    bottom: 30%;
    width: 230px;
    color: #cbbd9c;
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45));
    transform-origin: 50% 90%;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    transition: filter .2s;
}
.ship .hull {
    transform-box: fill-box;
    transform-origin: 50% 85%;
}
.ship {
    pointer-events: none !important;
}
.ship .hull,
.ship .hull * {
    pointer-events: visiblePainted;
}
.ship.held {
    cursor: grabbing;
    filter: drop-shadow(0 22px 16px rgba(0, 0, 0, .4));
}
.ship {
    overflow: visible;
}
.ship .ship-anchor {
    display: none;
    pointer-events: none;
}
.ship.anchored .ship-anchor {
    display: inline;
}
.ship.held .hull {
    animation: ship-shake .09s linear infinite alternate;
}
@keyframes ship-shake {
    from {
        transform: rotate(-3.5deg) translateX(-1.5px);
    }
    to {
        transform: rotate(3.5deg) translateX(1.5px);
    }
}
.ground-sea .sea-char {
    height: 70px;
    pointer-events: auto;
    transform-origin: 50% 100%;
    cursor: grab;
    touch-action: none;
    transition: opacity .25s;
}
/* night falls on them too: the traveller's own picture dims with the ship and the waves (11 Nov: at night they glowed
   against the dark sea). on the picture, not on them: their own filter is their shadow, and the toy camera's blur */
.ground-sea .sea-char > .art,
.ground-sea .sea-char > .pose {
    filter: brightness(var(--sea-dim)) saturate(var(--sea-sat));
}
.ground-sea .sea-char.held {
    cursor: grabbing;
    filter: drop-shadow(0 16px 10px rgba(0, 0, 0, .35));
    z-index: 5;
}
.ground-sea .sea-char.held .placeholder,
.ground-sea .sea-char.held .art {
    animation: ship-shake .09s linear infinite alternate;
}
.ground-sea .sea-char.under {
    opacity: 0;
    pointer-events: none;
}
/* startled: the ship's leaving without them. a jump, a double-take, a shiver */
.ground-sea .sea-char.startled>.placeholder,
.ground-sea .sea-char.startled>.art,
.ground-sea .sea-char.startled>.pose {
    animation: mate-startle 1.3s ease-out both;
}
@keyframes mate-startle {
    0% {
        translate: 0 0;
        rotate: 0deg;
    }
    14% {
        translate: 0 -24px;
        rotate: 9deg;
    }
    30% {
        translate: 0 0;
        rotate: 0deg;
    }
    40% {
        translate: -4px 0;
    }
    48% {
        translate: 4px 0;
    }
    56% {
        translate: -4px 0;
    }
    64% {
        translate: 4px 0;
    }
    72%,
    100% {
        translate: 0 0;
        rotate: 0deg;
    }
}
.ground-sea .sea-char .bubble.shout {
    --bub: #f3e8cc;
    background: var(--bub);
    font-style: normal;
    font-weight: bold;
    color: #9a3b1f;
    white-space: nowrap;
    max-width: none;
    transition: opacity .25s ease, transform .25s ease, background-color .3s, color .3s, font-size .2s;
}
.ground-sea .sea-char .bubble.shout::after {
    border-top-color: var(--bub);
}
/* angrier and angrier: the bubble reddens and shakes harder */
.ground-sea .sea-char .bubble.shout[data-anger="1"] {
    --bub: #f2d6bd;
    --amp: .6px;
    animation: bubble-rage .2s linear infinite;
}
.ground-sea .sea-char .bubble.shout[data-anger="2"] {
    --bub: #efb89c;
    color: #7a200e;
    --amp: 1.3px;
    animation: bubble-rage .14s linear infinite;
    letter-spacing: .03em;
}
.ground-sea .sea-char .bubble.shout[data-anger="3"] {
    --bub: #e0785c;
    color: #3f0a04;
    --amp: 2.2px;
    animation: bubble-rage .1s linear infinite;
    font-size: 1.08rem;
}
.ground-sea .sea-char .bubble.shout[data-anger="4"] {
    --bub: #c2311d;
    color: #fff1dc;
    --amp: 3.4px;
    animation: bubble-rage .07s linear infinite;
    font-size: 1.16rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .3), 0 0 14px rgba(220, 60, 30, .55);
}
@keyframes bubble-rage {
    0% {
        translate: 0 0;
    }
    25% {
        translate: calc(var(--amp) * -1) calc(var(--amp) * .6);
    }
    50% {
        translate: var(--amp) calc(var(--amp) * -.4);
    }
    75% {
        translate: calc(var(--amp) * -.5) calc(var(--amp) * -.8);
    }
    100% {
        translate: 0 0;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ground-sea .sea-char .bubble.shout {
        animation: none !important;
    }
}
.ground-sea .sea-char.talking .bubble.pop {
    animation: bubble-pop .32s ease-out;
}
@keyframes bubble-pop {
    0% {
        transform: translate(-50%, 4px) scale(.7);
    }
    60% {
        transform: translate(-50%, 0) scale(1.1);
    }
    100% {
        transform: translate(-50%, 0) scale(1);
    }
}
@media (prefers-reduced-motion: reduce) {
    .ground-sea .sea-char.startled>*,
    .ground-sea .sea-char .bubble.pop {
        animation: none;
    }
}
@media (max-width: 620px) {
    .ground-sea .sea-char {
        height: 46px;
    }
}
.splash-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.splash-layer .drop {
    position: absolute;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.splash-layer .ring {
    position: absolute;
    border: 3px solid #e2d9c6;
    border-radius: 50%;
}
@media (max-width: 620px) {
    .ship {
        width: 140px;
    }
}

/* ================= (19 Oct) the slow drift, the rock, the port city ================= */
/* the slow drift: the whole sea is a little wider than the screen (--sea-pan, set by ground-sea.js) and slides one way
   over --sea-pan-s seconds, then back. the far waves move a little less than the sea, the near ones more, and the rock
   in front most of all, so it feels like looking along the shore. all of it with the translate property (not transform:
   sky.css moves the ground that way for the telescope and the rooms, and ground-sea.js rocks each wave with it) */
html.sea-pan .ground-sea {
    right: calc(-1 * var(--sea-pan));
    animation: sea-pan var(--sea-pan-s) ease-in-out infinite alternate;
}
@keyframes sea-pan { from { translate: 0 0; } to { translate: calc(-1 * var(--sea-pan)) 0; } }
html.sea-pan .ground-sea .layer.wave-move {
    left: -10%;
    width: 120%;
    animation: sea-wave var(--sea-pan-s) ease-in-out infinite alternate;
}
html.sea-pan .ground-sea .wave-move-1 { --wave-pan: 2.2vw; }
html.sea-pan .ground-sea .wave-move-2 { --wave-pan: -.6vw; }
html.sea-pan .ground-sea .wave-move-3 { --wave-pan: -1.6vw; }
html.sea-pan .ground-sea .wave-move-4 { --wave-pan: -3vw; }
@keyframes sea-wave { from { translate: 0 0; } to { translate: var(--wave-pan, 0) 0; } }
/* the sign drifts with its post on the dock (big screens: there's no post on smaller ones) */
@media (min-width: 1101px) {
    html.sea-pan body[data-page="home"] .signpost { animation: sea-pan var(--sea-pan-s) ease-in-out infinite alternate; }
}

/* the ship lit from below by the waves' glowing tops at night (ground-sea.js shipLit): as strong as the waves' glow, less the
   higher it's lifted off the water (--ship-near), none by day */
.ship .ship-lit-g {
    display: none;
    pointer-events: none;
}
.ground-sea.sea-glow .ship .ship-lit-g {
    display: inline;
    opacity: calc((.2 * var(--dusk, 0) + .45 * var(--night, 0)) * var(--ship-near, 1));
}

/* the artist's dock and ship darken with the sea (their -glow twins don't) */
.ground-sea .dock .art:not(.glow-layer),
.ship .art:not(.glow-layer) {
    filter: brightness(var(--sea-dim)) saturate(var(--sea-sat));
}

/* the rocks in the foreground, out of focus: the big one's right-hand edge from a quarter of the way in to near the very
   edge, framing the scene at the end of each drift, a middling one just to its right. assets/sea/rock: one picture of both
   (about 1.86 : 1, the big one in its left 64%), see-through round them, standing on its bottom edge */
.sea-rock {
    position: fixed;
    left: 0;
    bottom: -3vh;
    z-index: 2;
    width: 47vw;
    height: 42vh;
    pointer-events: none;
    translate: -17vw 0;
    filter: blur(7px) brightness(calc(.86 - .5 * var(--dusk, 0) - .14 * var(--night, 0))) saturate(calc(1 - .4 * var(--dusk, 0)));
    transition: opacity .9s ease;
}
html.sea-pan .sea-rock { animation: sea-rock var(--sea-pan-s) ease-in-out infinite alternate; }
@keyframes sea-rock { from { translate: -5vw 0; } to { translate: -17vw 0; } }
@keyframes sea-rock-phone { from { translate: -25vw 0; } to { translate: -37vw 0; } }
/* (24 Oct) on the asset manager's map (and so in the drawing table's guide) it stands where the drift starts, as far in as it
   ever comes, so as much of it as anyone will see is on the screen to draw over */
html.dav-map .sea-rock { translate: -5vw 0; }
@media (max-width: 620px) { html.dav-map .sea-rock { translate: -25vw 0; } }
.sea-rock .placeholder,
.sea-rock > .art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;
}
body.scope-view .sea-rock,
body.sky-view .sea-rock { opacity: 0; }  /* (it stays while leaving: framing the scene till the next page) */
@media (max-width: 620px) {
    .sea-rock { width: 78vw; height: 30vh; translate: -37vw 0; animation-name: sea-rock-phone !important; filter: blur(4px) brightness(calc(.86 - .5 * var(--dusk, 0) - .14 * var(--night, 0))); }
}

/* the port city behind the dock: on the sea's floor, so the far waves there are hidden behind its quay and the near ones
   lap in front. ground-sea.js sets its left (just left of the dock); it runs to the right-hand edge */
.ground-sea .sea-city {
    position: absolute;
    right: 0;
    bottom: 0;
    height: calc(100% + 34vh);              /* (19 Oct: up past the sign) */
    pointer-events: none;
}
.ground-sea .sea-city .placeholder,
.ground-sea .sea-city > .art {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left bottom;
}
/* the city is far off, so it stays where it is while the sea drifts: it slides back exactly as far as the sea slides on,
   and ends at the screen's right-hand edge (19 Oct) */
html.sea-pan .ground-sea .sea-city {
    right: var(--sea-pan);
    animation: sea-still var(--sea-pan-s) ease-in-out infinite alternate;
}
@keyframes sea-still { from { translate: 0 0; } to { translate: var(--sea-pan) 0; } }
/* by day as it is, then dimmer and bluer-grey as night comes (the lights don't dim: they come on) */
.ground-sea .sea-city .cb,
.ground-sea .sea-city > .art:not(.glow-layer) {
    filter: brightness(calc(1 - .55 * var(--dusk, 0) - .15 * var(--night, 0))) saturate(calc(1 - .45 * var(--dusk, 0)));
}
.ground-sea .sea-city .c1 { fill: #c9b08a; }
.ground-sea .sea-city .c2 { fill: #b49a74; }
.ground-sea .sea-city .c3 { fill: #d3c09c; }
.ground-sea .sea-city .c4 { fill: #e4dccb; }
.ground-sea .sea-city .c5 { fill: #9a3b1f; }
.ground-sea .sea-city .cr { fill: #7e4a32; }
.ground-sea .sea-city .cq { fill: #8a7f6c; }
.ground-sea .sea-city .ca { fill: #4c453b; }
.ground-sea .sea-city .cw { fill: #5d5246; }
.ground-sea .sea-city .c6 { fill: #ddd0b4; }
.ground-sea .sea-city .c7 { fill: #d2bf9b; }
.ground-sea .sea-city .cr2 { fill: #a0705a; }
.ground-sea .sea-city .ch { fill: #9c9a76; }
/* the lights: warm, coming on through dusk (the stand-in's windows and lamps, or the artist's city-glow) */
.ground-sea .sea-city .cl {
    fill: #ffcf7e;
    opacity: var(--dusk, 0);
    filter: drop-shadow(0 0 3px rgba(255, 176, 80, .95)) drop-shadow(0 0 9px rgba(255, 140, 50, .6));
}
.ground-sea .sea-city > .glow-layer { opacity: var(--dusk, 0); }
/* and the warm haze the lit city throws up into the night */
.ground-sea .sea-city::after {
    content: "";
    position: absolute;
    inset: 10% -10% 0 -10%;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 55% 85%, rgba(255, 160, 70, .5), rgba(255, 140, 60, 0) 70%);
    mix-blend-mode: screen;
    opacity: calc(var(--dusk, 0) * .8);
}
@media (prefers-reduced-motion: reduce) {
    .sea-rock { animation: none !important; }
}

/* the credit used to wait at the very end of the scroll; with no scrolling it would hang in the sky, so it's only at the
   foot of the letters now (sky/letters.js puts a copy there) */
body[data-page="home"] > .credit { display: none; }

/* on a phone the city is lower (it stands on the right-hand half of the dock: ground-sea.js) */
@media (max-width: 620px) {
    .ground-sea .sea-city { height: calc(100% + 14vh); }
}