/* Сгенерировано tools/home-scene/build.py из web/bay.css: правила сцены Бухты для главного экрана.
   Не править руками. */
 не
   распространяется на пространство имён SVG (непостроенная лодка стояла на
   берегу), а свойство element.hidden определено только на HTML-элементах —
   присваивание node.hidden = false группе <g> меняет свойство в JS, но не
   трогает атрибут, и построенные мостки так и не появлялись. */
#homeArt .bay-built { display: none; }

#homeArt .bay-built.built { display: inline; }



/* ---------- сцена: палитра по времени суток ---------- */

/* Цвета лежат переменными на #homeArt, а не в разметке: смена времени суток
   — это один атрибут data-tod, без перекраски узлов. stop-color и fill в
   SVG задаются CSS-свойствами, так что классы вида .s-* работают на любом
   узле. Фильтров и mix-blend нет — Chrome 88 их не тянет на слабых Honor. */
#homeArt, #bayStage {
  --sky1: #5fa8e8; --sky2: #9bd0f5; --sky3: #dff1fb;
  --far: #7f9bb8; --mid: #5f7f8c; --pine: #2f5a46; --snow: #f2f7fb;
  --w1: #3f87b0; --w2: #1c4a68; --wave: #bfe3f5;
  --land1: #4f7d3a; --land2: #2f4a28; --grass: #6fa04a;
  --body: #fff3b8; --glow: #fff0a8; --cloud: #ffffff; --reed: #3f6a3a; --bird: #1a2430;
  --rk1: #8b94a1; --rk2: #4a525d; --rk3: #292d35; --rim: #d7dde6; --pad: #3f7a3a; --smokeop: 1; --pinelit: #4d8a66; --grasslit: #7fae58; --tuft: #5a8a40; --tuftlit: #6a9a4a; --bush: #3f6d33; --bushlit: #6a9a47; --faceop: 0.07;
  --stars: 0; --lit: 0; --cloudop: 0.85; --shop: 1;
  --bx: 252px; --by: 40px; --glintx: 252px; --gy: 172px; --shcol: #0c1c34; --shs: 1; --fk1: #6d8aa6; --fk2: #eaf2f8; --fkfin: #5a7691; --smfin: #8a5820; --sm1: #9a6322; --sm2: #c98d3d; --sm3: #e8bd72;
}

#homeArt[data-tod="dawn"], #bayStage[data-tod="dawn"] {
  --sky1: #5b6fa8; --sky2: #e49ab0; --sky3: #ffd9a8;
  --far: #7d6f95; --mid: #5f5a78; --pine: #2f4a46; --snow: #ffe6e0;
  --w1: #6a7fa8; --w2: #263a5a; --wave: #ffd9c4;
  --land1: #5b7a47; --land2: #34452f; --grass: #86a35a;
  --body: #ffe6a8; --glow: #ffc58a; --cloud: #ffd0d0; --reed: #4a6a3f; --bird: #2a2238;
  --rk1: #8f8396; --rk2: #51495f; --rk3: #2c2838; --rim: #ffe6e0; --pad: #4a7a40; --smokeop: 0.9; --pinelit: #5a7a72; --grasslit: #a3bf6c; --tuft: #6a8a4a; --tuftlit: #7a9a54; --bush: #4a6a3a; --bushlit: #8fae5a; --faceop: 0.08;
  --stars: 0.25; --lit: 0.5; --cloudop: 0.8; --shop: 0.85;
  --bx: 352px; --by: 76px; --glintx: 352px; --gy: 136px; --shcol: #2a1838; --shs: 1.9; --fk1: #8a86a8; --fk2: #f3dfe0; --fkfin: #77739a; --smfin: #7c5024; --sm1: #8a5a2a; --sm2: #c0813c; --sm3: #ebb078;
}

#homeArt[data-tod="dusk"], #bayStage[data-tod="dusk"] {
  --sky1: #3b3f7a; --sky2: #d9647a; --sky3: #ffb06a;
  --far: #6e5a7e; --mid: #4d4466; --pine: #27384a; --snow: #ffd7c4;
  --w1: #7a5b84; --w2: #25274d; --wave: #ffc79a;
  --land1: #5a6e3e; --land2: #2e3a2a; --grass: #8a9a4c;
  --body: #ffd27a; --glow: #ff9a52; --cloud: #ff9aa0; --reed: #4a5a35; --bird: #2a1f35;
  --rk1: #9a7f8e; --rk2: #52455a; --rk3: #2b2437; --rim: #ffc9a0; --pad: #4a6a3a; --smokeop: 0.75; --pinelit: #3f5e78; --grasslit: #a8b45a; --tuft: #667a40; --tuftlit: #7a8a48; --bush: #4a5a35; --bushlit: #a3a85a; --faceop: 0.1;
  --stars: 0.35; --lit: 0.8; --cloudop: 0.85; --shop: 0.8;
  --bx: 236px; --by: 80px; --glintx: 236px; --gy: 132px; --shcol: #1e1038; --shs: 1.9; --fk1: #7e7498; --fk2: #f0d2cc; --fkfin: #6a6086; --smfin: #744826; --sm1: #7f4f2a; --sm2: #b8763a; --sm3: #e3a05e;
}

#homeArt[data-tod="night"], #bayStage[data-tod="night"] {
  --sky1: #070b1c; --sky2: #111a3a; --sky3: #1f2d54;
  --far: #1d2a48; --mid: #17223c; --pine: #0d1730; --snow: #8fa3c8;
  --w1: #14284a; --w2: #070f22; --wave: #7f9fd0;
  --land1: #20301f; --land2: #0f1a12; --grass: #2f4a2c;
  --body: #eef2ff; --glow: #9db4ff; --cloud: #3a4a78; --reed: #1c2e22; --bird: #0a0f1c;
  --rk1: #4a5878; --rk2: #232b45; --rk3: #0e1325; --rim: #9db4ff; --pad: #20402e; --smokeop: 0.3; --pinelit: #22406a; --grasslit: #3f6a3c; --tuft: #2a4228; --tuftlit: #34523a; --bush: #1c3524; --bushlit: #35603a; --faceop: 0.03;
  --stars: 1; --lit: 1; --cloudop: 0.5; --shop: 0.55;
  --bx: 252px; --by: 34px; --glintx: 252px; --gy: 178px; --shcol: #02050e; --shs: 1.3; --fk1: #3a4c72; --fk2: #a4b4d8; --fkfin: #2c3a5c; --smfin: #30200f; --sm1: #3a2814; --sm2: #5e4020; --sm3: #8a6a3c;
}


#homeArt .s-sky1 { stop-color: var(--sky1); }

#homeArt .s-sky2 { stop-color: var(--sky2); }

#homeArt .s-sky3 { stop-color: var(--sky3); }

#homeArt .s-w1 { stop-color: var(--w1); }

#homeArt .s-w2 { stop-color: var(--w2); }

#homeArt .s-land1 { stop-color: var(--land1); }

#homeArt .s-land2 { stop-color: var(--land2); }

#homeArt .s-glow { stop-color: var(--glow); }

#homeArt .s-far { fill: var(--far); }

#homeArt .s-mid { fill: var(--mid); }

#homeArt .s-snow { fill: var(--snow); }

#homeArt .s-pine { fill: var(--pine); }

#homeArt .s-mist { stop-color: var(--far); }

#homeArt .sc-pines { opacity: 0.82; }

#homeArt .s-body { fill: var(--body); }

#homeArt .s-cloud { fill: var(--cloud); opacity: var(--cloudop); }

#homeArt .s-wave { stroke: var(--wave); }

#homeArt .s-grass { fill: var(--grass); stroke: var(--grass); }

/* Только обводка: у открытого пути заливка по классу замыкала бы его хордой. */
#homeArt .s-grassline { fill: none; stroke: var(--grass); stroke-opacity: 0.8; }

#homeArt .s-reed { stroke: var(--reed); }

#homeArt .s-reedleaf { fill: var(--reed); opacity: 0.8; }

#homeArt .s-rk1 { stop-color: var(--rk1); }

#homeArt .s-rk2 { stop-color: var(--rk2); }

#homeArt .s-rk3 { stop-color: var(--rk3); }

#homeArt .s-rockrim { stroke: var(--rim); }

#homeArt .s-pinelit { fill: var(--pinelit); }

#homeArt .s-pinefoot { fill: #000; opacity: 0.22; }

#homeArt .s-grasslit { fill: var(--grasslit); }

/* Травинки на лужайке: тон почти как у самой лужайки, чтобы не торчали полосками. */
#homeArt .st-g, #homeArt .st-gl { fill: none; stroke-linecap: round; stroke-opacity: 0.85; }

#homeArt .st-g { stroke: var(--tuft); }

#homeArt .st-gl { stroke: var(--tuftlit); }

#homeArt .s-tuft { fill: var(--tuft); }

#homeArt .s-tuftlit { fill: var(--tuftlit); }

#homeArt .s-bush { fill: var(--bush); }

#homeArt .s-bushlit { fill: var(--bushlit); opacity: 0.85; }

/* Горы: тёмная грань слева, светлая справа, тонкие расщелины от гребня; снег
   следует форме вершины, его левая половина в тени. */
#homeArt .s-face-dark { fill: url(#gFaceD); }

#homeArt .s-face-lit { fill: url(#gFaceL); opacity: var(--faceop); }

#homeArt .s-gully { fill: none; stroke: #0b1226; stroke-opacity: 0.16; stroke-width: 1.1; stroke-linecap: round; }

#homeArt .s-snow-shade { fill: #6f86b0; opacity: 0.38; }

#homeArt .s-bodystop { stop-color: var(--body); }

#homeArt .s-pl { stop-color: var(--grasslit); }

/* Хребты гор — мягкие клинья, тающие вниз, а не линии. */
#homeArt .s-ridge { fill: url(#gFaceD); opacity: 0.6; }

#homeArt .s-pad { fill: var(--pad); }

/* Кувшинки качаются на воде: лист дрейфует вбок, поднимается и наклоняется
   вместе с волной (период близок к волнам ближних рядов), цветок
   раскрывается и покачивается на своём листе. */
#homeArt .pad { transform-box: fill-box; transform-origin: 50% 50%; animation: bayPad 5.2s ease-in-out infinite alternate; }

#homeArt .fl { transform-box: fill-box; transform-origin: 50% 70%; animation: bayFl 3.4s ease-in-out infinite alternate; }
 }

/* Тени: один класс на всю сцену, сила — от времени суток. */
#homeArt .sh { opacity: var(--shop); }


#homeArt .sc-stars { opacity: var(--stars); }

#homeArt .sc-stars circle { animation: bayTwinkle 3.4s ease-in-out infinite; }

#homeArt .sc-stars circle:nth-child(2n) { animation-delay: 0.9s; }

#homeArt .sc-stars circle:nth-child(3n) { animation-delay: 1.8s; }


#homeArt .sc-body { transform: translate(var(--bx), var(--by)) scale(var(--bs, 1)); }

#homeArt .sc-craters { display: none; }

#homeArt[data-tod="night"] .sc-craters { display: inline; }

/* Блики на воде: зеркальный образ светила лежит под горизонтом на такой же
   «высоте», на какой светило над ним (--gy = 2 × горизонт − y светила);
   рябь режет его на горизонтальные чешуйки. Вдоль дорожки — искры, шире
   книзу. Каждая мерцает со своей фазой. */
#homeArt .sc-glint-path { transform: translateX(var(--glintx)); }

#homeArt .sc-glint-disc { transform: translate(var(--glintx), var(--gy)); }

#homeArt .gd { transform-box: fill-box; transform-origin: 50% 50%; animation: bayGd 3s ease-in-out infinite alternate; }

#homeArt[data-tod="night"] .sc-glint-path, #homeArt[data-tod="night"] .sc-glint-disc { opacity: 0.85; }


/* Тени: цвет от неба (--shcol), длина от высоты светила (--shs). Фигуры
   нарисованы «вниз» от основания, наклон --k выставляет bay.js: направление
   от точки схода под светилом. Точка вращения (основание) — в разметке. */
#homeArt .s-shc { stop-color: var(--shcol); }

#homeArt .s-fin { fill: var(--fkfin); }

#homeArt .s-smfin { fill: var(--smfin); }

#homeArt .s-fk1 { stop-color: var(--fk1); }

#homeArt .s-fk2 { stop-color: var(--fk2); }

#homeArt .s-sm1 { stop-color: var(--sm1); }

#homeArt .s-sm2 { stop-color: var(--sm2); }

#homeArt .s-sm3 { stop-color: var(--sm3); }

/* Копчёная рыба на вешале чуть покачивается вокруг точки подвеса. */
#homeArt .swy { transform-box: view-box; animation: baySwy 4.4s ease-in-out infinite alternate; }

#homeArt .cs { transform-box: view-box; transform: matrix(1, 0, var(--k, 0), var(--shs, 1), 0, 0); }


#homeArt .sc-cloud { animation: bayCloud 46s ease-in-out infinite alternate; }

#homeArt .sc-cloud.c2 { animation-duration: 62s; animation-delay: -20s; }

#homeArt .sc-cloud.c3 { animation-duration: 38s; animation-delay: -8s; }


/* Чайки: пролёт через всю сцену — одно движение, взмахи крыльев — другое.
   Каждое крыло качается вокруг плеча (угол у тела), левое и правое —
   зеркально, поэтому птица именно машет, а не едет статичной галочкой. */
#homeArt .sc-gulls path, #homeArt .sc-gulls ellipse, #homeArt .sc-gulls circle { fill: var(--bird); }

#homeArt[data-tod="night"] .sc-gulls { display: none; }

#homeArt .gull { animation: bayGullFly 30s linear infinite; }

#homeArt .gb { animation: bayGullBob 0.9s ease-in-out infinite alternate; }

#homeArt .wl, #homeArt .wr { transform-box: fill-box; animation: bayFlap 0.5s ease-in-out infinite alternate; }

#homeArt .wr { transform-origin: 0% 70%; }

#homeArt .wl { transform-origin: 100% 70%; animation-name: bayFlapL; }


/* Волны: каждый ряд — отдельный длинный путь, выходящий за оба края кадра, и
   едет ровно на свой период, поэтому цикл не виден, а концы никогда не
   показываются. Ряды ближе к зрителю крупнее и медленнее. */
#homeArt .wv { animation: bayWv 9s linear infinite; }


/* Рыбки: две, каждая прыгает со своим периодом; место и сторону выбирает
   bay.js перед каждым прыжком. Рисунок смотрит вправо и летит головой
   вперёд; поверхность воды обрезает рыбку, поэтому она выходит из воды и
   ныряет в неё. На выходе и на входе — круг и брызги, всё по одной фазе. */
#homeArt .fsh.f1 { --jd: 7s; --jl: 1.5s; }

#homeArt .fsh.f2 { --jd: 10s; --jl: 5s; }

#homeArt .fj, #homeArt .fr, #homeArt .fd { opacity: 0; animation-duration: var(--jd); animation-delay: var(--jl); animation-iteration-count: infinite; animation-timing-function: linear; }

#homeArt .fj { animation-name: bayJump; }

#homeArt .fr { fill: none; stroke: #fff; stroke-width: 0.6; transform-box: fill-box; transform-origin: 50% 50%; animation-timing-function: ease-out; }

#homeArt .fr1 { animation-name: bayJumpRingIn; }

#homeArt .fr2 { animation-name: bayJumpRingOut; }

#homeArt .fd { fill: #eaf6ff; }

#homeArt .fsd { opacity: 0; animation-name: bayJumpShadow; animation-duration: var(--jd); animation-delay: var(--jl); animation-iteration-count: infinite; animation-timing-function: linear; transform-box: fill-box; transform-origin: 50% 50%; }

#homeArt .fdIn { animation-name: bayDropIn; }

#homeArt .fdOut { animation-name: bayDropOut; }


/* Лодка качается вокруг ватерлинии. Корпус и отражение — две копии одной
   группы, отрезанные по общей линии воды (clip в разметке), качаются
   синхронно; отражение дрожит от волн. */
#homeArt .sc-bob { transform-box: view-box; transform-origin: 323px 171px; animation: bayBob 4.2s ease-in-out infinite; }

#homeArt .sc-refl { transform-box: view-box; transform-origin: 323px 171px; animation: bayRefl 3.4s ease-in-out infinite alternate; }


/* Круги по воде: от лодки, камней, свай, камышей и поплавка. Каждый круг
   рождается из ничего (прозрачный, малый), растёт, гаснет — и в конце цикла
   снова прозрачный и малый, поэтому нет ни скачка, ни обрыва. Круги идут со
   сдвигом фаз (отрицательные задержки), чтобы всегда был хоть один в пути. */
#homeArt .sc-ring, #homeArt .sc-ripple { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-name: bayRipple; }

#homeArt .sc-ring.a { animation-duration: 4.2s; }

#homeArt .sc-ring.b { animation-duration: 4.2s; animation-delay: -2.1s; }

#homeArt .sc-ripple { animation-duration: 3.2s; }

#homeArt .sc-ripple.r1 { animation-delay: 0s; }

#homeArt .sc-ripple.r2 { animation-delay: -1.07s; }

#homeArt .sc-ripple.r3 { animation-delay: -2.13s; }


/* Пена у свай и камней дышит, отражения под ними дрожат. */
#homeArt .pfoam, #homeArt .rbase { animation: bayPulse 3s ease-in-out infinite alternate; }

#homeArt .prefl { transform-box: fill-box; transform-origin: 50% 0%; animation: bayWob 2.6s ease-in-out infinite alternate; }


/* Прибой у берега: тонкая пена вдоль уреза дышит. */
#homeArt .sc-shorefoam { animation: bayShoreFoam 3.2s ease-in-out infinite alternate; stroke-opacity: 0.14; }

#homeArt .sc-rod { transform-box: view-box; transform-origin: 14.5px -25.6px; animation: bayRod 5s ease-in-out infinite; }

#homeArt .sc-bobber { animation: bayBobber 2.6s ease-in-out infinite; }


/* Огни: фонарь на мостках, окошко коптильни, иллюминатор лодки. */
#homeArt .sc-lit, #homeArt .sc-lit-core { opacity: var(--lit); }

#homeArt .sc-lit-core { animation: bayFlicker 2.8s ease-in-out infinite; }


/* Камыши: стебель и бархатка — одна группа, качаются вместе. Точка
   вращения (основание) задана на каждом стебле в разметке. */
#homeArt .rd { transform-box: view-box; animation: bayReed 4.6s ease-in-out infinite; }


@media (prefers-reduced-motion: reduce) {
  #homeArt * { animation: none !important; transition: none !important; }
  #homeArt .sc-ring, #homeArt .sc-ripple { opacity: 0.3; }
}


/* Построенные предметы сцены нажимаются. */
#homeArt .tappable { cursor: pointer; }


/* Рыбак ещё не закинул удочку: в воде нет поплавка и кругов от него. */
#homeArt.pre-cast .sc-line, #homeArt.pre-cast .sc-bobber, #homeArt.pre-cast .sc-ripple { visibility: hidden; }

/* Общее правило «svg на всю ширину» для сцены не должно раздувать иконку. */
#homeArt .bay-amb svg { display: block; flex: none; width: 16px; height: 16px; }


/* ---- Режимы эффектов сцены (bay.js: chooseFxMode) --------------------------
   Сцена — один большой SVG, и любая бесконечная анимация внутри него заставляет
   браузер на каждом кадре заново растрировать плитки под ней; сотня
   мерцающих искорок, волн, кругов и камышей по всей сцене — это постоянные
   100% кадров. На слабых телефонах (старый WebView в MAX) это и есть лаг.
   fx-full — как задумано; fx-lite — движутся только лодка, поплавок и рыбки,
   остальное стоит (включается в MAX и на старых движках); fx-off — стоит всё. fx-paused — пока партия открыта или
   сцена вне экрана, все анимации на паузе. */
#homeArt.fx-lite .wv, #homeArt.fx-lite .gd, #homeArt.fx-lite .sc-ring, #homeArt.fx-lite .sc-ripple,
#homeArt.fx-lite .pfoam, #homeArt.fx-lite .rbase, #homeArt.fx-lite .prefl, #homeArt.fx-lite .sc-shorefoam,
#homeArt.fx-lite .rd, #homeArt.fx-lite .swy, #homeArt.fx-lite .pad, #homeArt.fx-lite .fl,
#homeArt.fx-lite .sc-stars circle, #homeArt.fx-lite .sc-cloud, #homeArt.fx-lite .gb,
#homeArt.fx-lite .wl, #homeArt.fx-lite .wr, #homeArt.fx-lite .bay-smoke circle,
#homeArt.fx-lite .sc-lit-core, #homeArt.fx-lite .sc-refl { animation: none !important; }

#homeArt.fx-lite .gull, #homeArt.fx-lite .bay-smoke, #homeArt.fx-lite .fd, #homeArt.fx-lite .fr, #homeArt.fx-lite .fsd { display: none; }

/* В lite лодка, удочка и поплавок качаются «ступеньками» (5–7 кадров в секунду
   вместо 60): амплитуда — доли градуса и пиксель-два, на глаз почти то же
   самое, а браузеру перерисовывать в десять раз реже. */
#homeArt.fx-lite .sc-bob { animation-timing-function: steps(14, end) !important; }

#homeArt.fx-lite .sc-rod { animation-timing-function: steps(10, end) !important; }

#homeArt.fx-lite .sc-bobber { animation-timing-function: steps(6, end) !important; }

#homeArt.fx-off * { animation: none !important; }

#homeArt.fx-off .gull, #homeArt.fx-off .bay-smoke { display: none; }

#homeArt.fx-paused * { animation-play-state: paused !important; }


/* Звёзды днём не видны (группа с нулевой прозрачностью), но каждая мерцала —
   десять анимаций вхолостую. */
#homeArt[data-tod="day"] .sc-stars circle { animation: none; }


/* ===== Сцена по слоям (tools/bay-scene/layerize.mjs) ==========================
   Сцена разложена на слои: статичные срезы (svg на всю сцену, не двигаются и не
   перерисовываются) и анимированные части, у каждой — свой слой. Анимация идёт
   на transform/opacity обёртки, то есть двигается готовая текстура на видеокарте,
   а не перерисовывается svg: именно из-за перерисовки сцена лагала в MAX.
   --u — размер единицы svg в пикселях (ставит bay.js), чтобы смещения из
   прежних анимаций (в единицах svg) остались теми же. */
#homeArt.bay-layered { position: relative; --u: 1px; }

#homeArt.bay-layered::before { content: ""; display: block; padding-top: 60%; }

#homeArt .ly-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

#homeArt svg.ly { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }

#homeArt div.ly { position: absolute; pointer-events: none; }

#homeArt .ly-in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

#homeArt div.ly > svg, #homeArt .ly-in > svg { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }

#homeArt svg.ly-dyn, #homeArt svg.ly-fx { will-change: transform; }


/* анимированные слои: готовая текстура, меняется только transform/opacity */
#homeArt .ly-wv, #homeArt .ly-cloud, #homeArt .ly-gull, #homeArt .ly-pad, #homeArt .ly-fl, #homeArt .ly-rd,
#homeArt .ly-swy, #homeArt .ly-ring, #homeArt .ly-pfoam, #homeArt .ly-prefl, #homeArt .ly-shorefoam,
#homeArt .ly-smoke, #homeArt .ly-litcore, #homeArt .ly-bob, #homeArt .ly-refl, #homeArt .ly-star, #homeArt .ly-gd { will-change: transform, opacity; }


/* Анимации, которые раньше шли внутри svg по классам, у слоёв — на обёртке.
   Смещения для волн, облаков, чаек, кувшинок, дыма и лодки лежат в генерируемом
   блоке <style class="ly-kf"> (layerize.mjs): процентами от габаритов слоя и без
   var(), иначе браузер не отдаёт такую анимацию видеокарте. Здесь — только имя и
   длительность по умолчанию. */
#homeArt .ly svg .sc-stars circle, #homeArt .ly svg .bay-smoke circle { animation: none; }

#homeArt .ly svg .bay-smoke circle { opacity: 1; }

#homeArt .ly-shorefoam svg path { stroke-opacity: 0.2; }


#homeArt .ly-wv { animation: lyWv 9s linear infinite; }

#homeArt .ly-cloud { animation: lyCloud 46s ease-in-out infinite alternate; }

#homeArt .ly-gull { animation: lyGull 30s linear infinite; }

#homeArt .ly-pad { animation: lyPad 5.2s ease-in-out infinite alternate; }

#homeArt .ly-fl { animation: lyFl 3.4s ease-in-out infinite alternate; }

#homeArt .ly-rd { animation: lyRd 4.6s ease-in-out infinite; }

#homeArt .ly-swy { animation: lySwy 4.4s ease-in-out infinite alternate; }

#homeArt .ly-ring { opacity: 0; animation: lyRipple 4.2s ease-out infinite; }

#homeArt .ly-ring.m-b { animation-delay: -2.1s; }

#homeArt .ly-ring.m-r1, #homeArt .ly-ring.m-r2, #homeArt .ly-ring.m-r3 { animation-duration: 3.2s; }

#homeArt .ly-ring.m-r2 { animation-delay: -1.07s; }

#homeArt .ly-ring.m-r3 { animation-delay: -2.13s; }

#homeArt .ly-pfoam { animation: lyPulse 3s ease-in-out infinite alternate; }

#homeArt .ly-prefl { animation: lyWob 2.6s ease-in-out infinite alternate; }

#homeArt .ly-shorefoam { animation: lyShore 3.2s ease-in-out infinite alternate; }

#homeArt .ly-smoke { opacity: 0; animation: lySmoke 5s ease-out infinite; }

#homeArt .ly-smoke.m-n2 { animation-delay: 1.7s; }

#homeArt .ly-smoke.m-n3 { animation-delay: 3.4s; }

#homeArt .ly-litcore { opacity: var(--lit); animation: lyFlicker 2.8s ease-in-out infinite; }

#homeArt .ly-bob { animation: lyBob 4.2s ease-in-out infinite; }

#homeArt .ly-refl { animation: lyRefl 3.4s ease-in-out infinite alternate; }

#homeArt .ly-star { animation: lyTwinkle 3.4s ease-in-out infinite; }

#homeArt .ly-star.g1 { animation-delay: 0.9s; }

#homeArt .ly-star.g2 { animation-delay: 1.8s; }

#homeArt .ly-gd { animation: lyGd 2.4s ease-in-out infinite alternate; }

#homeArt .ly-gd.g1 { animation-duration: 2.7s; animation-delay: -0.9s; }

#homeArt .ly-gd.g2 { animation-duration: 3s; animation-delay: -1.8s; }

#homeArt[data-tod="day"] .ly-star { animation: none; }

@media (prefers-reduced-motion: reduce) { #homeArt .ly[class*="ly-"], #homeArt .ly-in { animation: none !important; } }


/* Рыбак выходит на мостки (раньше — соседний селектор #bPier.built ~ #bFisher). */
#homeArt.pier-built #bFisher { transform: translate(100px, -10px); }


/* Всплеск при появлении/улучшении постройки: точка опоры общая на все срезы. */
#homeArt [data-bid].bay-appear, #homeArt [data-bid].bay-pulse { transform-box: view-box; }

#homeArt [data-bid="bPier"].bay-appear, #homeArt [data-bid="bPier"].bay-pulse { transform-origin: 170px 176px; }

#homeArt [data-bid="bBoat"].bay-appear, #homeArt [data-bid="bBoat"].bay-pulse { transform-origin: 323px 172px; }

#homeArt [data-bid="bSmoke"].bay-appear, #homeArt [data-bid="bSmoke"].bay-pulse { transform-origin: 50px 172px; }


/* Режимы эффектов для слоёв: lite — только лодка, поплавок и рыбки. */
#homeArt.fx-lite .ly-wv, #homeArt.fx-lite .ly-gd, #homeArt.fx-lite .ly-ring, #homeArt.fx-lite .ly-pfoam,
#homeArt.fx-lite .ly-prefl, #homeArt.fx-lite .ly-shorefoam, #homeArt.fx-lite .ly-rd, #homeArt.fx-lite .ly-swy,
#homeArt.fx-lite .ly-pad, #homeArt.fx-lite .ly-fl, #homeArt.fx-lite .ly-star, #homeArt.fx-lite .ly-cloud,
#homeArt.fx-lite .ly-smoke, #homeArt.fx-lite .ly-litcore, #homeArt.fx-lite .ly-refl { animation: none !important; }

#homeArt.fx-lite .ly-ring, #homeArt.fx-lite .ly-smoke { opacity: 0; }

#homeArt.fx-lite .ly-gull { display: none; }

/* Слои, которые не двигаются (облегчённый режим, MAX), не держим отдельными текстурами: will-change заставлял телефон
   хранить сотню неподвижных слоёв в памяти видеокарты. Двигаются только слои рыбака, поплавка и рыбок. */
#homeArt.fx-lite .ly-wv, #homeArt.fx-lite .ly-cloud, #homeArt.fx-lite .ly-pad, #homeArt.fx-lite .ly-fl, #homeArt.fx-lite .ly-rd,
#homeArt.fx-lite .ly-swy, #homeArt.fx-lite .ly-ring, #homeArt.fx-lite .ly-pfoam, #homeArt.fx-lite .ly-prefl, #homeArt.fx-lite .ly-shorefoam,
#homeArt.fx-lite .ly-smoke, #homeArt.fx-lite .ly-litcore, #homeArt.fx-lite .ly-refl, #homeArt.fx-lite .ly-star, #homeArt.fx-lite .ly-gd,
#homeArt.fx-off .ly-wv, #homeArt.fx-off .ly-cloud, #homeArt.fx-off .ly-pad, #homeArt.fx-off .ly-fl, #homeArt.fx-off .ly-rd,
#homeArt.fx-off .ly-swy, #homeArt.fx-off .ly-ring, #homeArt.fx-off .ly-pfoam, #homeArt.fx-off .ly-prefl, #homeArt.fx-off .ly-shorefoam,
#homeArt.fx-off .ly-smoke, #homeArt.fx-off .ly-litcore, #homeArt.fx-off .ly-refl, #homeArt.fx-off .ly-star, #homeArt.fx-off .ly-gd { will-change: auto; }

#homeArt.fx-off .ly, #homeArt.fx-off .ly-in { animation: none !important; }

#homeArt.fx-off .ly-gull { display: none; }

#homeArt.fx-lite .ly-gd { opacity: 0.7; }

/* Плашки на сцене лежат внутри #homeArt, а ему задано «svg на всю ширину». */
#homeArt svg.sstar { display: inline-block; width: 1.05em; height: 1.05em; }

#homeArt[data-tod="night"] .bay-cat .cat-eyes-open { display: none; }

#homeArt[data-tod="night"] .bay-cat .cat-eyes-shut, #homeArt[data-tod="night"] .bay-cat .cat-z { display: inline; }

#homeArt[data-tod="night"] .bay-cat .cat-tail { animation-duration: 6s; }

#homeArt[data-tod="night"] .bay-cat .cat-z { animation: bayCatZ 3.2s ease-in-out infinite; }

#homeArt.fx-lite .bay-net, #homeArt.fx-off .bay-net { animation: none; }

#homeArt.fx-lite .bay-cat .cat-tail, #homeArt.fx-off .bay-cat .cat-tail { animation: none; }

#homeArt.fx-lite .bay-cat .cat-eye, #homeArt.fx-off .bay-cat .cat-eye { animation: none; }

#homeArt[data-tod="dusk"] .dp.glow { opacity: 0.8; }

#homeArt[data-tod="night"] .dp.glow { opacity: 1; }

#homeArt[data-tod="dawn"] .dp.glow { opacity: 0.45; }

#homeArt[data-tod="day"] .decor .gl-b circle:first-child { opacity: 0.08; }

#homeArt.fx-lite .fl-sw, #homeArt.fx-lite .bn-sw, #homeArt.fx-lite .gl-b, #homeArt.fx-lite .fire .flame, #homeArt.fx-lite .fire .sparks circle,
#homeArt.fx-lite .fire-glow, #homeArt.fx-lite .ln-bob, #homeArt.fx-lite .bh-btn .bird,
#homeArt.fx-off .fl-sw, #homeArt.fx-off .bn-sw, #homeArt.fx-off .gl-b, #homeArt.fx-off .fire .flame, #homeArt.fx-off .fire .sparks circle,
#homeArt.fx-off .fire-glow, #homeArt.fx-off .ln-bob, #homeArt.fx-off .bh-btn .bird { animation: none; }

#homeArt[data-tod="dusk"] .decor .jl-lit, #homeArt[data-tod="dawn"] .decor .jl-lit { opacity: 0.75; }

#homeArt[data-tod="night"] .decor .jl-lit { opacity: 1; animation: bayCandle 1.9s ease-in-out infinite alternate; }

#homeArt[data-tod="day"] .dp.ghost { opacity: 0.4; }

#homeArt.fx-lite .jl-lit, #homeArt.fx-off .jl-lit, #homeArt.fx-lite .spider, #homeArt.fx-off .spider, #homeArt.fx-lite .dp.bat, #homeArt.fx-off .dp.bat,
#homeArt.fx-lite .bat .wing, #homeArt.fx-off .bat .wing, #homeArt.fx-lite .dp.ghost, #homeArt.fx-off .dp.ghost { animation: none; }

#homeArt.fx-lite .dp.bat, #homeArt.fx-off .dp.bat { transform: translate(-50%, -100%); }

#homeArt.fx-lite .dp.ghost, #homeArt.fx-off .dp.ghost { transform: translate(-50%, -100%); }

#homeArt.fx-lite .bay-net .nr, #homeArt.fx-off .bay-net .nr { animation: none; }



/* ======== Хеллоуин: бухта в праздничном наряде (класс .hw ставит bay.js) ========
   Палитра по времени суток — те же переменные, что у обычной сцены, поэтому наряд
   не стоит ни кадра: это просто другие цвета. Пока праздник идёт, он на всех часах
   суток; кончился — класс снимается, и всё как раньше. */
#homeArt.hw[data-tod="day"] {
  --sky1: #5b5a8e; --sky2: #a58db6; --sky3: #f6c79a;
  --far: #8a80ab; --mid: #665c8c; --pine: #2a2845; --snow: #e9d9ee; --pinelit: #4a4a78;
  --w1: #44727f; --w2: #1c3a4e; --wave: #d4e6df;
  --land1: #8a7433; --land2: #46361c; --grass: #b08f2c; --grasslit: #c9a640; --tuft: #8a6c22; --tuftlit: #a0802c; --bush: #5a4a22; --bushlit: #8a6f2e;
  --body: #ffd9a2; --glow: #ffb870; --cloud: #cdbad9; --cloudop: 0.9; --reed: #6e5a2a; --bird: #1c1426;
  --rk1: #9890ad; --rk2: #5a5072; --rk3: #2c2640; --rim: #e2d4ec; --pad: #365a3a;
  --stars: 0; --bs: 1.2; --fogop: 0.3; --shcol: #1c1530;
}

#homeArt.hw[data-tod="dawn"] {
  --sky1: #35406f; --sky2: #9a78b0; --sky3: #ffc59c;
  --far: #766aa0; --mid: #584e7e; --pine: #232640; --snow: #f3dce6; --pinelit: #44487a;
  --w1: #5b6a9a; --w2: #232d52; --wave: #ffd6c4;
  --land1: #5f6a36; --land2: #343a22; --grass: #8f9a3c; --grasslit: #b2a948; --bush: #44502a; --bushlit: #83904a;
  --body: #ffd88a; --glow: #ffb38a; --cloud: #e2bcd0; --reed: #53502c; --bird: #1c1426;
  --rk1: #8d7f9e; --rk2: #4e4468; --rk3: #292338; --rim: #ffe0d0; --pad: #3a5a3a;
  --stars: 0.4; --bs: 1.35; --fogop: 0.45; --shcol: #241838;
}

#homeArt.hw[data-tod="dusk"] {
  --sky1: #1b0f3b; --sky2: #86285f; --sky3: #ff7a2c;
  --far: #5e3470; --mid: #3c2552; --pine: #1d1536; --snow: #ff9d68; --pinelit: #4a3068;
  --w1: #68307a; --w2: #1a0e36; --wave: #ff9660;
  --land1: #4f4326; --land2: #2a2218; --grass: #7a6a2c; --grasslit: #a88d36; --tuft: #5c5020; --tuftlit: #7a6a2a; --bush: #3c3420; --bushlit: #76622a;
  --body: #ff9330; --glow: #ff6a1e; --cloud: #ff6a52; --cloudop: 0.8; --reed: #43331e; --bird: #14091f;
  --rk1: #8a6a8c; --rk2: #4a3560; --rk3: #251a38; --rim: #ff9a68; --pad: #3a4a2c;
  --stars: 0.7; --bs: 1.75; --fogop: 0.4; --shcol: #1a0c30;
}

#homeArt.hw[data-tod="night"] {
  --sky1: #03040f; --sky2: #0b1230; --sky3: #1a3a4c;
  --far: #19213f; --mid: #121a35; --pine: #0a1228; --snow: #7f93b8; --pinelit: #1f3a60;
  --w1: #0f2240; --w2: #040a1a; --wave: #7fdcc4;
  --land1: #1d2a1b; --land2: #0c140c; --grass: #2b4328; --grasslit: #3a5c36; --bush: #182f20; --bushlit: #2f5a38;
  --body: #f6f2cc; --glow: #b4e8d0; --cloud: #323f6e; --cloudop: 0.55; --reed: #162a1e; --bird: #05080f;
  --rk1: #44537a; --rk2: #212a48; --rk3: #0c1122; --rim: #a6c6ff; --pad: #1d3a2c;
  --stars: 1; --bs: 1.5; --fogop: 0.5; --shcol: #01030a;
}

/* фонарь на мостках — ведьминский, зелёный */
#homeArt.hw #gLamp stop { stop-color: #86ff86; }

#homeArt.hw .sc-lit-core { fill: #aaff9a; }

/* рыбак: соломенная шляпа уступает ведьминской (рисует bay.js) */
#homeArt.hw .sc-fisher [fill="url(#gHatCrown)"], #homeArt.hw .sc-fisher [fill="url(#gBrim)"], #homeArt.hw .sc-fisher [clip-path="url(#cHat)"] { display: none; }

#homeArt.fx-lite .hw-fog, #homeArt.fx-off .hw-fog { display: none; }

/* огонь под котлом — зелёный */
#homeArt.hw .fire-glow { background: radial-gradient(circle, rgba(120, 255, 130, 0.32) 0%, rgba(60, 220, 100, 0.12) 36%, rgba(40, 200, 90, 0) 64%); }

#homeArt.hw .ln-glow { background: radial-gradient(circle, rgba(255, 150, 50, 0.5) 0%, rgba(255, 120, 30, 0.18) 42%, rgba(255, 110, 30, 0) 70%); }

#homeArt.hw .gl-glow { background: radial-gradient(ellipse, rgba(255, 150, 60, 0.4) 0%, rgba(170, 100, 230, 0.14) 50%, rgba(170, 100, 230, 0) 72%); }

/* коптильня: красная кровля уступает чёрно-фиолетовой */
#homeArt.hw [data-bid="bSmoke"] [fill="#7b2f2a"] { fill: #3b2658; }

#homeArt.hw [data-bid="bSmoke"] [fill="#4d1c19"] { fill: #1e1230; }

#homeArt.hw [data-bid="bSmoke"] [stroke="#4d1c19"] { stroke: #1e1230; }


/* Свечения в праздничном наряде мягче и теснее: объекты читаются чётко, а не тонут в ореолах */
#homeArt.hw .dp.glow { transform: translate(-50%, -50%) scale(0.62); }

#homeArt.hw[data-tod="dusk"] .dp.glow { opacity: 0.42; }

#homeArt.hw[data-tod="night"] .dp.glow { opacity: 0.55; }

#homeArt.hw[data-tod="dawn"] .dp.glow { opacity: 0.25; }

#homeArt.hw .sc-lit[fill="url(#gLamp)"] { opacity: calc(var(--lit) * 0.5); }

#homeArt.hw .sc-body > circle:first-child { opacity: 0.55; }

#homeArt.hw .hw-inj .sc-lit { opacity: calc(var(--lit) * 0.55); }


/* Праздник: чаек нет, вместо них мыши летают через всю сцену */
#homeArt.hw .sc-gulls, #homeArt.hw .ly-gull, #homeArt.hw .gull { display: none; }

/* облегчённый режим: летят, но крылья внутри не машут (это перерисовка); «выкл» и reduced motion — стоят */
#homeArt.fx-lite .dp.bat.fly { animation-name: hwBatFly; animation-timing-function: linear; animation-iteration-count: infinite; }

#homeArt.fx-lite .dp.bat.fly.rev { animation-direction: reverse; }

#homeArt.fx-off .dp.bat.fly { left: var(--x, 20%); animation: none; }

/* слои построек поляны крупные: отдельную текстуру под каждый не держим, перерисовывается только их габарит */
#homeArt .bay-ext svg.ly-dyn { will-change: auto; }

#homeArt svg.ly-fxm { will-change: auto; }

/* мерцание огня: само значение прозрачности – переменная (ночью ярче), поэтому анимируем вложенный svg, а не слой */
#homeArt .ly-litcore { animation: none; }

#homeArt .ly-litcore > svg { animation: lyFlick2 2.8s ease-in-out infinite; }

#homeArt.fx-lite .ly-litcore > svg, #homeArt.fx-off .ly-litcore > svg { animation: none; }


/* ---------- уровни построек (tools/bay-scene/gen_levels.py) ----------
   Группа постройки несёт data-lv="N" (ставит bay.js); at2 at3 – «видно на этих уровнях». */
#homeArt .at0, #homeArt .at1, #homeArt .at2, #homeArt .at3, #homeArt .at4, #homeArt .at5 { display: none; }

#homeArt [data-lv="0"] .at0, #homeArt [data-lv="1"] .at1, #homeArt [data-lv="2"] .at2,
#homeArt [data-lv="3"] .at3, #homeArt [data-lv="4"] .at4, #homeArt [data-lv="5"] .at5 { display: inline; }

/* здание на поляне под стройкой: леса поверх, само бледнее */
#homeArt .scaffold { display: none; }

#homeArt .bld[data-build="1"] .scaffold { display: inline; }

#homeArt .bld[data-build="1"] .lv { opacity: 0.5; }

#homeArt .bld .hit { pointer-events: all; cursor: pointer; }

#homeArt .bld { -webkit-tap-highlight-color: transparent; }

/* стенд снастей: предмет виден, когда снасть есть; цвет – по ступени улучшения */
/* лодка ушла в плавание — у причала пусто */
#homeArt [data-bid="bBoat"].away, #homeArt #bBoat.away { display: none; }

#homeArt #bBottles .bt { display: none; }

#homeArt #bBottles .bt.on { display: inline; }

/* поляна не должна мешать тапам по сцене выше */
#homeArt #bMeadow { pointer-events: none; }


/* предметы стенда снастей: рисунок – материалами иконок (bi* из bay.html), цвет деталей по ступени (--gi) */
#homeArt .gi { display: none; --gi: #c9a06a; }

#homeArt .gi.on { display: inline; }

#homeArt .gi.t2 { --gi: #cfe0ee; }

#homeArt .gi.t3 { --gi: #f0cf5a; filter: drop-shadow(0 0 2px rgba(255, 215, 120, 0.9)); }

#homeArt .gi .v { fill: var(--gi); }

/* пока снасти нет — на её месте пунктирный контур */
#homeArt .gh * { fill: none !important; stroke: #2b1a0c !important; stroke-opacity: 0.4 !important; stroke-width: 0.8 !important; stroke-dasharray: 2 2; }


/* Усадьба рыбака: украшения из «Украшений» стоят в сцене, пока не куплены – скрыты */
#homeArt .yd { display: none; }

#homeArt .yd.on { display: inline; }

#homeArt .bee { animation: beeFly 3.4s ease-in-out infinite; }

#homeArt .bee.b1 { animation-delay: -.9s; animation-duration: 2.8s; }

#homeArt .bee.b2 { animation-delay: -1.7s; animation-duration: 3.9s; }

#homeArt .bee.b3 { animation-delay: -2.4s; animation-duration: 3.1s; }

#homeArt .dog-tail { transform-box: fill-box; transform-origin: 0 100%; animation: tailWag .5s ease-in-out infinite alternate; }

#homeArt .blades { animation: millSpin 14s linear infinite; }

#homeArt.fx-lite .bee, #homeArt.fx-lite .dog-tail, #homeArt.fx-lite .blades { animation: none; }


/* Мастера на лесах: пока идёт стройка, молоток стучит, пила пилит */
#homeArt .wk-sw { transform-box: fill-box; transform-origin: 50% 100%; animation: wkHam .56s ease-in infinite; }

#homeArt .wk-sa { animation: wkSaw .46s ease-in-out infinite alternate; }

#homeArt.fx-lite .wk-sw, #homeArt.fx-lite .wk-sa { animation: none; }

@media (prefers-reduced-motion: reduce) { #homeArt .wk-sw, #homeArt .wk-sa { animation: none; } }


@keyframes baySmoke {
  0%   { transform: translate(0, 4px) scale(0.5); opacity: 0; }
  20%  { opacity: 0.9; }
  100% { transform: translate(16px, -34px) scale(1.8); opacity: 0; }
}


@keyframes bayStarBump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  70%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}


@keyframes bayAppear {
  0%   { transform: translateY(10px) scale(0.86); opacity: 0; }
  60%  { transform: translateY(-2px) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bayPad { from { transform: translate(-1.8px, -0.6px) rotate(-3deg); } to { transform: translate(1.8px, 0.7px) rotate(3deg); } }

@keyframes bayFl { from { transform: scale(0.88) rotate(-7deg); } to { transform: scale(1.12) rotate(7deg); } }

@keyframes bayTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@keyframes bayGd { from { transform: scaleX(0.6); opacity: 0.35; } to { transform: scaleX(1.15); opacity: 1; } }

@keyframes baySwy { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }

@keyframes bayCloud { from { transform: translateX(-16px); } to { transform: translateX(28px); } }

@keyframes bayGullFly {
  0%   { transform: translate(-40px, 0); }
  50%  { transform: translate(200px, -14px); }
  100% { transform: translate(440px, 4px); }
}

@keyframes bayGullBob { from { transform: translateY(-0.8px); } to { transform: translateY(1px); } }

@keyframes bayFlap  { from { transform: rotate(-34deg); } to { transform: rotate(28deg); } }

@keyframes bayFlapL { from { transform: rotate(34deg); }  to { transform: rotate(-28deg); } }

@keyframes bayWv { from { transform: translateX(0); } to { transform: translateX(var(--wd)); } }

@keyframes bayJump {
  0%, 79.9% { opacity: 0; transform: translate(0px, 14px) rotate(-75deg); }
  80.00% { opacity: 1; transform: translate(0.0px, 14.0px) rotate(-74deg); }
  80.88% { opacity: 1; transform: translate(1.9px, 7.7px) rotate(-72deg); }
  81.75% { opacity: 1; transform: translate(3.8px, 2.2px) rotate(-70deg); }
  82.62% { opacity: 1; transform: translate(5.6px, -2.5px) rotate(-66deg); }
  83.50% { opacity: 1; transform: translate(7.5px, -6.2px) rotate(-61deg); }
  84.38% { opacity: 1; transform: translate(9.4px, -9.2px) rotate(-53deg); }
  85.25% { opacity: 1; transform: translate(11.2px, -11.3px) rotate(-42deg); }
  86.12% { opacity: 1; transform: translate(13.1px, -12.6px) rotate(-24deg); }
  87.00% { opacity: 1; transform: translate(15.0px, -13.0px) rotate(-0deg); }
  87.88% { opacity: 1; transform: translate(16.9px, -12.6px) rotate(24deg); }
  88.75% { opacity: 1; transform: translate(18.8px, -11.3px) rotate(42deg); }
  89.62% { opacity: 1; transform: translate(20.6px, -9.2px) rotate(53deg); }
  90.50% { opacity: 1; transform: translate(22.5px, -6.2px) rotate(61deg); }
  91.38% { opacity: 1; transform: translate(24.4px, -2.5px) rotate(66deg); }
  92.25% { opacity: 1; transform: translate(26.2px, 2.2px) rotate(70deg); }
  93.12% { opacity: 1; transform: translate(28.1px, 7.7px) rotate(72deg); }
  94.00% { opacity: 1; transform: translate(30.0px, 14.0px) rotate(74deg); }
  94.1%, 100% { opacity: 0; transform: translate(30px, 14px) rotate(75deg); }
}

@keyframes bayJumpShadow {
  0%, 82% { opacity: 0.00; transform: translate(0px, 1px) scale(0.5, 0.5); }
  80.00% { opacity: 0.00; transform: translate(0.0px, 1.0px) scale(0.50, 0.50); }
  80.88% { opacity: 0.00; transform: translate(1.9px, 1.0px) scale(0.50, 0.50); }
  81.75% { opacity: 0.00; transform: translate(3.8px, 1.0px) scale(0.50, 0.50); }
  82.62% { opacity: 0.20; transform: translate(4.8px, 1.1px) scale(0.60, 0.60); }
  83.50% { opacity: 0.41; transform: translate(5.3px, 1.2px) scale(0.76, 0.76); }
  84.38% { opacity: 0.41; transform: translate(6.2px, 1.4px) scale(0.89, 0.89); }
  85.25% { opacity: 0.41; transform: translate(7.3px, 1.5px) scale(0.98, 0.98); }
  86.12% { opacity: 0.41; transform: translate(8.7px, 1.5px) scale(1.03, 1.03); }
  87.00% { opacity: 0.41; transform: translate(10.4px, 1.5px) scale(1.05, 1.05); }
  87.88% { opacity: 0.41; transform: translate(12.5px, 1.5px) scale(1.03, 1.03); }
  88.75% { opacity: 0.41; transform: translate(14.8px, 1.5px) scale(0.98, 0.98); }
  89.62% { opacity: 0.41; transform: translate(17.4px, 1.4px) scale(0.89, 0.89); }
  90.50% { opacity: 0.41; transform: translate(20.3px, 1.2px) scale(0.76, 0.76); }
  91.38% { opacity: 0.20; transform: translate(23.5px, 1.1px) scale(0.60, 0.60); }
  92.25% { opacity: 0.00; transform: translate(26.2px, 1.0px) scale(0.50, 0.50); }
  93.12% { opacity: 0.00; transform: translate(28.1px, 1.0px) scale(0.50, 0.50); }
  94.00% { opacity: 0.00; transform: translate(30.0px, 1.0px) scale(0.50, 0.50); }
  94.1%, 100% { opacity: 0.00; transform: translate(30px, 1px) scale(0.5, 0.5); }
}

@keyframes bayJumpRingIn {
  0%, 81% { opacity: 0; transform: scale(0.35); }
  83%     { opacity: 0.6; }
  93%, 100% { opacity: 0; transform: scale(2.2); }
}

@keyframes bayJumpRingOut {
  0%, 91% { opacity: 0; transform: scale(0.35); }
  93%     { opacity: 0.6; }
  100%    { opacity: 0; transform: scale(2.2); }
}

@keyframes bayDropOut {
  0%, 91.5% { opacity: 0; transform: translate(0, 0); }
  92%   { opacity: 1; transform: translate(0, 0); }
  94.5% { opacity: 1; transform: translate(calc(var(--dx) * 0.55), var(--dy)); }
  97.5% { opacity: 1; transform: translate(var(--dx), calc(var(--dy) * 0.18)); }
  99%   { opacity: 0; transform: translate(calc(var(--dx) * 1.2), 2px); }
  100%  { opacity: 0; }
}

@keyframes bayBob {
  0%, 100% { transform: translateY(-0.4px) rotate(-1.1deg); }
  50%      { transform: translateY(1.2px) rotate(1.1deg); }
}

@keyframes bayRefl { from { transform: skewX(-1.6deg) scaleY(0.98); } to { transform: skewX(1.6deg) scaleY(1.02); } }

@keyframes bayRipple {
  0%   { transform: scale(0.35); opacity: 0; }
  14%  { opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes bayPulse { from { opacity: 0.55; } to { opacity: 1; } }

@keyframes bayWob { from { transform: scaleX(0.7) scaleY(0.9); } to { transform: scaleX(1.25) scaleY(1.1); } }

@keyframes bayShoreFoam { from { stroke-opacity: 0.08; } to { stroke-opacity: 0.2; } }

@keyframes bayRod { 0%, 100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.7deg); } }

@keyframes bayBobber { 0%, 100% { transform: translateY(-0.5px); } 50% { transform: translateY(0.9px); } }

@keyframes bayFlicker { 0%, 100% { opacity: var(--lit); } 45% { opacity: calc(var(--lit) * 0.8); } 60% { opacity: var(--lit); } }

@keyframes bayReed { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(3.2deg); } }

@keyframes bayFlash {
  0%   { box-shadow: 0 0 0 0 rgba(181, 159, 59, 0.9); border-color: var(--present, #b59f3b); }
  100% { box-shadow: 0 0 0 10px rgba(181, 159, 59, 0); }
}

@keyframes bayMark { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }

@keyframes bayToast {
  0%   { opacity: 0; transform: translate(-50%, -14px) scale(0.9); }
  12%  { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  20%  { transform: translate(-50%, 0) scale(1); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1); }
}

@keyframes bayPulse2 {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.045) translateY(-1px); }
  100% { transform: scale(1); }
}

@keyframes bayAmbWave { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

@keyframes lyFl { from { transform: scale(0.88) rotate(-7deg); } to { transform: scale(1.12) rotate(7deg); } }

@keyframes lyRd { 0%, 100% { transform: rotate(-2.6deg); } 50% { transform: rotate(3.2deg); } }

@keyframes lySwy { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } }

@keyframes lyRipple {
  0%   { transform: scale(0.35); opacity: 0; }
  14%  { opacity: 0.55; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes lyPulse { from { opacity: 0.55; } to { opacity: 1; } }

@keyframes lyWob { from { transform: scaleX(0.7) scaleY(0.9); } to { transform: scaleX(1.25) scaleY(1.1); } }

@keyframes lyShore { from { opacity: 0.4; } to { opacity: 1; } }

@keyframes lyFlicker { 0%, 100% { opacity: var(--lit); } 45% { opacity: calc(var(--lit) * 0.8); } 60% { opacity: var(--lit); } }

@keyframes lyRefl { from { transform: skewX(-1.6deg) scaleY(0.98); } to { transform: skewX(1.6deg) scaleY(1.02); } }

@keyframes lyTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@keyframes lyGd { from { opacity: 0.35; } to { opacity: 1; } }

@keyframes bayTremble { from { transform: translateY(-0.6px); } to { transform: translateY(0.6px); } }

@keyframes bayNetBob { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% + 2px)); } }

@keyframes bayNetBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

@keyframes bayCatTail { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(14deg); } }

@keyframes bayCatBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }

@keyframes bayCatNuzzle { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-9deg) translateY(1px); } 70% { transform: rotate(6deg); } }

@keyframes bayCatHop { 0% { transform: translate(-50%, -100%); } 40% { transform: translate(-50%, calc(-100% - 5px)); } 100% { transform: translate(-50%, -100%); } }

@keyframes bayCatZ { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

@keyframes bayFlSway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

@keyframes bayBnSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }

@keyframes bayTwinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@keyframes bayFlame { from { transform: scale(1, 1) rotate(-2deg); } to { transform: scale(0.93, 1.08) rotate(2deg); } }

@keyframes baySpark { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(6px, -22px); opacity: 0; } }

@keyframes bayGlowPulse { from { filter: none; } to { filter: brightness(1.12); } }

@keyframes bayLnBob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(1.8px) rotate(3deg); } }

@keyframes bayBird { 0%, 80%, 100% { transform: translateY(0); } 85% { transform: translateY(-1.6px) rotate(-6deg); } 92% { transform: translateY(0) rotate(4deg); } }

@keyframes bayBirdChirp { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px) rotate(-8deg); } 60% { transform: translateY(-1px) rotate(6deg); } }

@keyframes bayPkBreath { 0%, 100% { transform: scale(1) translateY(0); } 50% { transform: scale(1.025, 1.03) translateY(-1.5px); } }

@keyframes bayPkGlowIn { from { opacity: 0; } to { opacity: 0.8; } }

@keyframes bayPkFlicker { from { opacity: 0.45; } to { opacity: 0.9; } }

@keyframes bayCandle { from { opacity: 0.82; } to { opacity: 1; } }

@keyframes baySpider { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(5px) rotate(3deg); } }

@keyframes bayBatDrift { from { transform: translate(-50%, -100%) translate(-14px, 3px); } to { transform: translate(-50%, -100%) translate(16px, -5px); } }

@keyframes bayBatFlap { from { transform: scaleY(1) rotate(0); } to { transform: scaleY(0.4) rotate(8deg); } }

@keyframes bayGhost { from { transform: translate(-50%, -100%) translateY(2px); opacity: 0.62; } to { transform: translate(-50%, -100%) translateY(-6px); opacity: 0.9; } }

@keyframes bayNetRing { 0% { transform: scale(0.55); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }

@keyframes hwFogDrift { from { transform: translateX(-28px); } to { transform: translateX(28px); } }

@keyframes hwBatFly {
  0%   { transform: translate(-50%, -100%) translate(calc(var(--fx, 360px) * -0.12), 0); }
  20%  { transform: translate(-50%, -100%) translate(calc(var(--fx, 360px) * 0.2), -14px); }
  40%  { transform: translate(-50%, -100%) translate(calc(var(--fx, 360px) * 0.45), 12px); }
  60%  { transform: translate(-50%, -100%) translate(calc(var(--fx, 360px) * 0.7), -16px); }
  80%  { transform: translate(-50%, -100%) translate(calc(var(--fx, 360px) * 0.92), 8px); }
  100% { transform: translate(-50%, -100%) translate(calc(var(--fx, 360px) * 1.12), -4px); }
}

@keyframes evReady { from { transform: translateY(0); } to { transform: translateY(-3px); } }

@keyframes evrBob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-6px) rotate(2deg); } }

@keyframes lyFlick2 { 0%, 100% { opacity: 1; } 45% { opacity: 0.8; } 60% { opacity: 1; } }

@keyframes beeFly { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(7px, -5px); } 50% { transform: translate(-3px, -9px); } 75% { transform: translate(-8px, -2px); } }

@keyframes tailWag { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }

@keyframes millSpin { to { transform: rotate(360deg); } }

@keyframes wkHam { 0% { transform: rotate(-52deg); } 46% { transform: rotate(14deg); } 54% { transform: rotate(8deg); } 100% { transform: rotate(-52deg); } }

@keyframes wkSaw { to { transform: translateX(7px); } }