/* =====================================================================
   gulls.css — the look of sky/gulls.js: seagulls over the sea, far off and up close.
   Everything moves with translate / rotate / scale / opacity (the graphics card's work); a picture is only drawn
   again while a drawn gull's wings beat.
   ===================================================================== */

/* ---------------- far off: in the sea's layer (in front of the far wave, behind the city and the dock) ---------------- */
.ground-sea .sea-gulls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100% + 40vh);                   /* (up over the water and round the city's roofs) */
    pointer-events: none;
    /* by day all of them, at dusk fewer (the .early ones go first), at night none: they've gone to roost */
    opacity: clamp(0, calc(1 - 2.4 * var(--night, 0) - .25 * var(--dusk, 0)), 1);
    transition: opacity 3s ease;
}
.ground-sea .sea-gull.far {
    position: absolute;
    left: var(--gx, 50%);
    top: var(--gy, 30%);
    width: clamp(26px, 2.5vw, 48px);
    aspect-ratio: 100 / 46;
}
.ground-sea .sea-gull.early { opacity: clamp(0, calc(1 - 1.7 * var(--dusk, 0)), 1); transition: opacity 3s ease; }
.ground-sea .sea-gull .sg-body {
    filter: brightness(var(--sea-dim)) saturate(var(--sea-sat));   /* (the sea's own night dimming) */
}
.sea-gull .sg-body,
.sea-gull .sg-body > .placeholder,
.sea-gull .sg-body > .art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.sea-gull .sg-body { position: absolute; inset: 0; }

/* a slow loop: right and up, round, left and down, round again (an ellipse --gr wide, --gh tall), turning to face the way
   it's going at each end */
.ground-sea .sea-gull.wheel { animation: sg-wheel var(--gs, 18s) linear var(--gd, 0s) infinite; }
.ground-sea .sea-gull.wheel .sg-body { animation: sg-face var(--gs, 18s) linear var(--gd, 0s) infinite; }
@keyframes sg-wheel {
    0%    { translate: calc(-1 * var(--gr)) 0; }
    12.5% { translate: calc(-.707 * var(--gr)) calc(-.707 * var(--gh)); }
    25%   { translate: 0 calc(-1 * var(--gh)); }
    37.5% { translate: calc(.707 * var(--gr)) calc(-.707 * var(--gh)); }
    50%   { translate: var(--gr) 0; }
    62.5% { translate: calc(.707 * var(--gr)) calc(.707 * var(--gh)); }
    75%   { translate: 0 var(--gh); }
    87.5% { translate: calc(-.707 * var(--gr)) calc(.707 * var(--gh)); }
    100%  { translate: calc(-1 * var(--gr)) 0; }
}
@keyframes sg-face {
    0%, 44% { scale: 1 1; rotate: -4deg; }
    50%     { scale: .05 1; rotate: 0deg; }
    56%, 94% { scale: -1 1; rotate: 4deg; }
    100%    { scale: 1 1; rotate: -4deg; }
}

/* now and then one crossing the whole sea (gulls.js sets its height and how long it takes; leftward: the other way) */
.ground-sea .sea-gull.crossing { left: 0; top: var(--gy, 20%); opacity: 0; }
.ground-sea .sea-gull.crossing.going { animation: sg-cross var(--gc, 28s) linear forwards; }
.ground-sea .sea-gull.crossing.going.leftward { animation-direction: reverse; }
.ground-sea .sea-gull.crossing.leftward .sg-body { scale: -1 1; }
@keyframes sg-cross {
    0%   { translate: -8vw 0; opacity: 0; }
    3%   { opacity: 1; }
    30%  { translate: 30vw -1.6vh; }
    60%  { translate: 66vw .8vh; }
    97%  { opacity: 1; }
    100% { translate: 112vw -1vh; opacity: 0; }
}

/* the drawn gull's wings: a few beats, then a long glide (each gull at its own pace, --gf) */
.sea-gull .sg-wing { transform-box: view-box; }
.sea-gull .far-wing { transform-origin: 47px 26px; }
.sea-gull .near-wing { transform-origin: 51px 26px; }
.sea-gull.far .sg-wing { animation: sg-flap var(--gf, 2.2s) ease-in-out infinite; }
.sea-gull.far .near-wing { animation-delay: -.06s; }
@keyframes sg-flap {
    0%, 46% { transform: scaleY(1); }
    56%     { transform: scaleY(-.45); }
    66%     { transform: scaleY(1); }
    76%     { transform: scaleY(-.45); }
    86%, 100% { transform: scaleY(1); }
}

/* ---------------- up close: over the page, like the rock (fixed, behind everything you can press) ---------------- */
.sea-gulls-near {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .9s ease;
}
/* from the right: the whole flight mirrored about the middle of the screen (the gull facing the way it goes) */
.sea-gulls-near.from-right { scale: -1 1; }
body.scope-view .sea-gulls-near,
body.sky-view .sea-gulls-near { opacity: 0; }   /* (like the rock: not while looking up) */
.sea-gull.near {
    position: absolute;
    left: 0;
    top: var(--ny, 8vh);
    width: clamp(170px, 22vw, 440px);
    aspect-ratio: 100 / 46;
    opacity: 0;
    will-change: translate, opacity;
}
/* out of focus, and dimmed as the light goes, as the rock is (the blur's on the picture, so it's worked out once and
   then only moved about) */
.sea-gull.near .sg-body {
    filter: blur(7px) brightness(calc(.92 - .5 * var(--dusk, 0) - .14 * var(--night, 0))) saturate(calc(1 - .4 * var(--dusk, 0)));
}
/* a sweep across the top of the screen, a little rise and fall, two beats of the wings and then gliding. (31 Oct) the
   way it moves is on the gull, the way it banks on its body (in step: the same length and easing), so in resets 1 and 2
   its stick stays upright however it tips (below) */
.sea-gull.near.go-sweep { animation: sg-sweep 7s cubic-bezier(.35, .1, .65, .9) forwards; }
.sea-gull.near.go-sweep .sg-body { animation: sg-sweep-tilt 7s cubic-bezier(.35, .1, .65, .9) forwards; }
.sea-gull.near.go-sweep .sg-wing { animation: sg-flap-big 1.3s ease-in-out 2; }
@keyframes sg-sweep {
    0%   { translate: -32vw 5vh; opacity: 1; }
    45%  { translate: 40vw -2vh; }
    100% { translate: 112vw 4vh; opacity: 1; }
}
@keyframes sg-sweep-tilt {
    0%   { rotate: 5deg; }
    45%  { rotate: -3deg; }
    100% { rotate: 4deg; }
}
@keyframes sg-flap-big {
    0%, 100% { transform: scaleY(1); }
    45%      { transform: scaleY(-.5); }
}
/* hanging in the wind near the top-left corner: it glides in, holds there, nudged about by the gusts, and peels away */
.sea-gull.near.go-hang { animation: sg-hang 11s ease-in-out forwards; }
.sea-gull.near.go-hang .sg-body { animation: sg-hang-tilt 11s ease-in-out forwards; }
.sea-gull.near.go-hang .sg-wing { animation: sg-trim 2.4s ease-in-out infinite; }
@keyframes sg-hang {
    0%   { translate: -30vw -20vh; opacity: 1; }
    16%  { translate: 2vw 0; }
    27%  { translate: 3.4vw 1.4vh; }
    39%  { translate: 1.6vw -.6vh; }
    52%  { translate: 3.8vw .9vh; }
    65%  { translate: 2.2vw -.4vh; }
    78%  { translate: 3vw .7vh; }
    100% { translate: -26vw -30vh; opacity: 1; }
}
@keyframes sg-hang-tilt {
    0%   { rotate: 12deg; }
    16%  { rotate: -4deg; }
    27%  { rotate: 2deg; }
    39%  { rotate: -3deg; }
    52%  { rotate: 3deg; }
    65%  { rotate: -2deg; }
    78%  { rotate: 1deg; }
    100% { rotate: -16deg; }
}
@keyframes sg-trim {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(.86); }
}
@media (max-width: 620px) {
    .sea-gull.near { width: 46vw; }
    .sea-gull.near .sg-body { filter: blur(4px) brightness(calc(.92 - .5 * var(--dusk, 0) - .14 * var(--night, 0))); }
}

/* ---------------- resets 1 and 2: they're props too, on sticks from below (31 Oct) ----------------
   low along the horizon (about 40vh down their layer at any screen: the top of the sea), each pushed along its own track at
   a steady speed (linear), bobbing in an even sine wave (ease-in-out, back and forth), and turning sharply at each end, like
   the ducks in a shooting gallery. the stick runs down from its belly into the waves (the nearer waves hide it; the big one's
   goes off the bottom of the screen). gulls.js TRACK gives each its row (--sh), start (--sx), length (--sw), speed (--st)
   and bob (--sb, --sa). no swinging, no wheeling: a machine moves them */
html.stage-strings .ground-sea .sea-gull.far {
    top: calc(40vh - var(--sh, 2vh));
    left: var(--sx, 20%);
}
html.stage-strings .ground-sea .sea-gull.wheel { animation: sg-track var(--st, 16s) linear var(--gd, 0s) infinite alternate; }
html.stage-strings .ground-sea .sea-gull.wheel .sg-body {
    animation: sg-bob var(--sb, 1.2s) ease-in-out infinite alternate,
               sg-turn calc(var(--st, 16s) * 2) steps(1) var(--gd, 0s) infinite;
}
@keyframes sg-track {
    from { translate: 0 0; }
    to   { translate: var(--sw, 30vw) 0; }
}
@keyframes sg-bob {
    from { translate: 0 calc(-1 * var(--sa, .7vh)); }
    to   { translate: 0 var(--sa, .7vh); }
}
@keyframes sg-turn {
    0%  { scale: 1 1; }
    50% { scale: -1 1; }
}
/* the one crossing the whole sea: the same, on the lowest row, straight across */
html.stage-strings .ground-sea .sea-gull.crossing { --sh: 3.2vh; left: 0; }
html.stage-strings .ground-sea .sea-gull.crossing.going { animation: sg-cross-track var(--gc, 28s) linear forwards; }
html.stage-strings .ground-sea .sea-gull.crossing.going.leftward { animation-direction: reverse; }
html.stage-strings .ground-sea .sea-gull.crossing .sg-body { animation: sg-bob 1s ease-in-out infinite alternate; }
@keyframes sg-cross-track {
    0%   { translate: -8vw 0; opacity: 0; }
    2%   { opacity: 1; }
    98%  { opacity: 1; }
    100% { translate: 112vw 0; opacity: 0; }
}
/* the drawn wings beat evenly, like clockwork */
html.stage-strings .ground-sea .sea-gull.far .sg-wing { animation: sg-tick .45s ease-in-out infinite alternate; }
@keyframes sg-tick {
    from { transform: scaleY(1); }
    to   { transform: scaleY(-.4); }
}
/* the stick: from its belly down, out of sight behind the waves (it's inside the gull's body, so it dims, and for the near one
   blurs, with it). (31 Oct, the artist: "look more like metal/aluminium", then "darker, like an oxidized aluminum almost and
   slightly thinner") a weathered aluminium rod: dull dark greys shaded round, only a soft, chalky sheen where the light
   catches it, faint blotches of oxide along its length.
   the artist's own stick: none yet (a slot can come later) */
html.stage-strings .sea-gull .sg-body::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 52%;
    width: var(--stick-w, 1.5px);
    height: 100vh;
    margin-left: calc(var(--stick-w, 1.5px) / -2);
    pointer-events: none;
    background:
        repeating-linear-gradient(180deg, rgba(196, 200, 190, 0) 0 23px, rgba(196, 200, 190, .14) 23px 31px, rgba(196, 200, 190, 0) 31px 57px,
                                          rgba(40, 42, 40, .18) 57px 64px, rgba(40, 42, 40, 0) 64px 97px),
        linear-gradient(90deg,
            #2f3337 0%, #4a4f54 16%, #6e7376 32%, #8b8f8e 40%, #6a6f72 52%,
            #4f5458 68%, #5c6164 82%, #3a3e42 94%, #2a2d30 100%);
}
/* the big one's rod meets its belly in a little clamp: a ring of darker metal with a screw */
html.stage-strings .sea-gull.near .sg-body::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: calc(var(--stick-w, 10px) * 2.1);
    height: calc(var(--stick-w, 10px) * 1.5);
    margin-left: calc(var(--stick-w, 10px) * -1.05);
    border-radius: 3px;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 50%, #1f2225 0 14%, transparent 16%),
        linear-gradient(90deg, #2c3034, #5a5f63 30%, #7f8483 42%, #4e5356 64%, #2d3134);
}
/* the big one past the camera: a puppet on a stick, pushed across lower down, steadily, bobbing; its stick runs off the
   bottom of the screen */
html.stage-strings .sea-gull.near { --stick-w: clamp(5px, .8vw, 12px); top: 34vh; }
html.stage-strings .sea-gull.near.go-sweep { animation: sg-push 9s linear forwards; }
html.stage-strings .sea-gull.near.go-sweep .sg-body { animation: sg-bob .9s ease-in-out infinite alternate; --sa: 1.6vh; }
html.stage-strings .sea-gull.near.go-sweep .sg-wing { animation: sg-tick .5s ease-in-out infinite alternate; }
@keyframes sg-push {
    0%   { translate: -32vw 0; opacity: 1; }
    100% { translate: 112vw 0; opacity: 1; }
}
@media (max-width: 620px) {
    html.stage-strings .sea-gull.near { --stick-w: 6px; top: 40vh; }
}

/* ---------------- the asset manager's map: all still and showing (one big one parked top left) ---------------- */
html.dav-map .sea-gull,
html.dav-map .sea-gull * { animation: none !important; }
html.dav-map .sea-gull.near.parked { opacity: 1; translate: 3vw 2vh; }
html.dav-map .ground-sea .sea-gulls { opacity: 1; }

/* ---------------- those who'd rather nothing moved: the far ones still, the near one never comes ---------------- */
@media (prefers-reduced-motion: reduce) {
    .sea-gull,
    .sea-gull * { animation: none !important; }
}