/* ============================================================================
   ПОГОДАФОН — система эмоциональных погодных сцен
   pogodafon-weather.css
   Слои фона, анимации персонажей и частиц, темы сцен.
   Лицензия: MIT. Без внешних шрифтов и изображений.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. ПАЛИТРА И ПЕРЕМЕННЫЕ СЦЕНЫ
   Каждая сцена задаёт набор токенов; фон и персонаж наследуют их через
   CSS-переменные на контейнере. Движок (JS) вешает класс .pf-scene--<name>.
   ---------------------------------------------------------------------------- */
:root {
  --pf-bg: #2b6cb0;
  --pf-sky-top: #4a90d9;
  --pf-sky-mid: #7db4ea;
  --pf-sky-bot: #cfe6fb;
  --pf-fog-color: rgba(210, 222, 235, 0.55);
  --pf-particle: #ffffff;
  --pf-aura: rgba(255, 255, 255, 0.35);
  --pf-dur-breathe: 5.2s;
  --pf-dur-blink: 8.4s;
}

/* --- Ясный день ----------------------------------------------------------- */
.pf-scene--sunny {
  --pf-bg: radial-gradient(120% 90% at 50% 0%, #3f8ee0 0%, #2f74c4 42%, #1f5aa6 100%);
  --pf-sky-top: #3f8ee0;
  --pf-sky-mid: #2f74c4;
  --pf-sky-bot: #1f5aa6;
  --pf-particle: #ffffff;
  --pf-aura: rgba(255, 214, 90, 0.28);
  --pf-fog-color: rgba(255, 255, 255, 0.10);
}

/* --- Ясная ночь ----------------------------------------------------------- */
.pf-scene--clear-night {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #1b2a5e 0%, #121b40 45%, #0a0f28 100%);
  --pf-sky-top: #1b2a5e;
  --pf-sky-mid: #121b40;
  --pf-sky-bot: #0a0f28;
  --pf-particle: #eaf2ff;
  --pf-aura: rgba(214, 226, 255, 0.20);
  --pf-fog-color: rgba(150, 170, 220, 0.12);
}

/* --- Переменная облачность / облачно ------------------------------------- */
.pf-scene--partly-cloudy,
.pf-scene--cloudy {
  --pf-bg: radial-gradient(120% 90% at 50% 0%, #6fa8de 0%, #89bce6 45%, #b9d8f2 100%);
  --pf-sky-top: #6fa8de;
  --pf-sky-mid: #89bce6;
  --pf-sky-bot: #b9d8f2;
  --pf-particle: #ffffff;
  --pf-aura: rgba(255, 255, 255, 0.30);
  --pf-fog-color: rgba(255, 255, 255, 0.28);
}

/* --- Пасмурно ------------------------------------------------------------- */
.pf-scene--overcast {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #7d8fa6 0%, #64788f 50%, #4d5f74 100%);
  --pf-sky-top: #7d8fa6;
  --pf-sky-mid: #64788f;
  --pf-sky-bot: #4d5f74;
  --pf-particle: #eef1f5;
  --pf-aura: rgba(230, 236, 244, 0.16);
  --pf-fog-color: rgba(200, 210, 224, 0.40);
}

/* --- Дождь (небольшой / сильный) ----------------------------------------- */
.pf-scene--rain,
.pf-scene--rain-heavy {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #4e6b8c 0%, #3b5474 50%, #2b3f5c 100%);
  --pf-sky-top: #4e6b8c;
  --pf-sky-mid: #3b5474;
  --pf-sky-bot: #2b3f5c;
  --pf-particle: #bcd6f2;
  --pf-aura: rgba(170, 200, 235, 0.16);
  --pf-fog-color: rgba(150, 170, 200, 0.30);
}

/* --- Гроза ---------------------------------------------------------------- */
.pf-scene--storm {
  --pf-bg: radial-gradient(130% 110% at 50% 0%, #4a4f70 0%, #343a58 50%, #232842 100%);
  --pf-sky-top: #4a4f70;
  --pf-sky-mid: #343a58;
  --pf-sky-bot: #232842;
  --pf-particle: #c3cfe9;
  --pf-aura: rgba(120, 140, 220, 0.20);
  --pf-fog-color: rgba(120, 130, 170, 0.30);
  --pf-flash: rgba(255, 244, 214, 0.85);
}

/* --- Снег / мокрый снег / метель / град ---------------------------------- */
.pf-scene--snow,
.pf-scene--sleet,
.pf-scene--blizzard,
.pf-scene--hail {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #7fa3c9 0%, #6a8fb8 50%, #547494 100%);
  --pf-sky-top: #7fa3c9;
  --pf-sky-mid: #6a8fb8;
  --pf-sky-bot: #547494;
  --pf-particle: #ffffff;
  --pf-aura: rgba(240, 248, 255, 0.26);
  --pf-fog-color: rgba(225, 236, 248, 0.35);
}

/* --- Туман ----------------------------------------------------------------- */
.pf-scene--fog {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #b8c5d2 0%, #a4b4c4 50%, #8ea0b0 100%);
  --pf-sky-top: #b8c5d2;
  --pf-sky-mid: #a4b4c4;
  --pf-sky-bot: #8ea0b0;
  --pf-particle: #ffffff;
  --pf-aura: rgba(255, 255, 255, 0.20);
  --pf-fog-color: rgba(235, 240, 246, 0.55);
}

/* --- Ветер ------------------------------------------------------------------ */
.pf-scene--wind {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #7c9cc0 0%, #6d8cb0 50%, #5b7699 100%);
  --pf-sky-top: #7c9cc0;
  --pf-sky-mid: #6d8cb0;
  --pf-sky-bot: #5b7699;
  --pf-particle: #eef5fd;
  --pf-aura: rgba(235, 245, 255, 0.22);
  --pf-fog-color: rgba(220, 232, 246, 0.30);
}

/* --- Мороз ------------------------------------------------------------------ */
.pf-scene--frost {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #9cc0e0 0%, #7fa8cd 50%, #5f88b0 100%);
  --pf-sky-top: #9cc0e0;
  --pf-sky-mid: #7fa8cd;
  --pf-sky-bot: #5f88b0;
  --pf-particle: #ffffff;
  --pf-aura: rgba(205, 230, 255, 0.26);
  --pf-fog-color: rgba(225, 240, 252, 0.35);
}

/* --- Жара ------------------------------------------------------------------- */
.pf-scene--heat {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #f5c86a 0%, #ef9d3f 48%, #df7d26 100%);
  --pf-sky-top: #f5c86a;
  --pf-sky-mid: #ef9d3f;
  --pf-sky-bot: #df7d26;
  --pf-particle: #ffe9b0;
  --pf-aura: rgba(255, 214, 120, 0.30);
  --pf-fog-color: rgba(255, 220, 150, 0.20);
}

/* --- Радуга ----------------------------------------------------------------- */
.pf-scene--rainbow {
  --pf-bg: radial-gradient(130% 100% at 50% 0%, #7fb0e0 0%, #8fc2ec 48%, #c4e2f8 100%);
  --pf-sky-top: #7fb0e0;
  --pf-sky-mid: #8fc2ec;
  --pf-sky-bot: #c4e2f8;
  --pf-particle: #ffffff;
  --pf-aura: rgba(255, 255, 255, 0.34);
  --pf-fog-color: rgba(255, 255, 255, 0.26);
}

/* ----------------------------------------------------------------------------
   2. КОНТЕЙНЕР СЦЕНЫ
   ---------------------------------------------------------------------------- */
.pf-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--pf-bg);
  background-color: #2f74c4;
  transition: background 900ms ease, --pf-bg 900ms ease;
  /* мягкий общий свет поверх сцены */
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.12);
  width: 100%;
  min-height: 100%;
}

/* Атмосферная дымка — общий градиент сверху вниз для глубины */
.pf-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 34%),
    radial-gradient(90% 60% at 50% 8%, var(--pf-aura) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Виньетка по краям для глубины и читаемости */
.pf-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 20%, rgba(0, 0, 0, 0) 55%, rgba(10, 20, 40, 0.22) 100%);
}

/* ----------------------------------------------------------------------------
   2b. 3D-РЕЖИМ (Three.js фон)
   Canvas WebGL лежит в самом низу; поверх — атмосферные оверлеи ::before/::after,
   затем персонаж. Левая часть hero затеняется мягким градиентом для читаемости
   температуры и заголовка.
   ---------------------------------------------------------------------------- */
.pf-bg3d {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: none;
}

.pf-scene--3d { background: #2f74c4; }
.pf-scene--3d::before {
  background:
    linear-gradient(90deg, rgba(8, 18, 40, 0.38) 0%, rgba(8, 18, 40, 0.18) 38%, rgba(8, 18, 40, 0) 62%),
    linear-gradient(180deg, rgba(8, 18, 40, 0.20) 0%, rgba(8, 18, 40, 0) 30%);
}
.pf-scene--3d::after {
  background: radial-gradient(120% 100% at 60% 30%, rgba(0, 0, 0, 0) 55%, rgba(6, 12, 28, 0.30) 100%);
}
/* в светлых сценах затенение слабее */
.pf-scene--3d.pf-scene--sunny::before,
.pf-scene--3d.pf-scene--partly-cloudy::before,
.pf-scene--3d.pf-scene--rainbow::before,
.pf-scene--3d.pf-scene--heat::before {
  background:
    linear-gradient(90deg, rgba(8, 18, 40, 0.26) 0%, rgba(8, 18, 40, 0.10) 40%, rgba(8, 18, 40, 0) 62%);
}
.pf-scene--3d .pf-layers, .pf-scene--3d .pf-particles { display: none; }

/* ----------------------------------------------------------------------------
   3. СЛОИ ГЛУБИНЫ
   Слои лежат внутри .pf-scene с z-index от 1 до 8. Передние планы быстрее,
   дальние — медленнее и размыты. Осадки-частицы рисует лёгкий canvas.
   ---------------------------------------------------------------------------- */
.pf-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.pf-layer--far {
  z-index: 1;
  filter: blur(3px);
  opacity: 0.55;
  transform: scale(1.15);
}
.pf-layer--mid {
  z-index: 3;
  filter: blur(0.5px);
  opacity: 0.85;
}
.pf-layer--near {
  z-index: 5;
  filter: blur(0px);
  opacity: 1;
}
.pf-layer--fore {
  z-index: 8;
  filter: blur(1.5px);
  opacity: 0.9;
}

/* Отдельные облачные объекты */
.pf-cloud {
  position: absolute;
  display: block;
  animation: pf-drift linear infinite;
  opacity: 0.9;
}

/* SVG paint servers must remain in the render tree. `display:none` makes
   referenced gradients and filters disappear in Chromium. */
.pf-sprite-definitions {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   4. КАНВАС ЧАСТИЦ И ПЕРСОНАЖ
   ---------------------------------------------------------------------------- */
.pf-particles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.pf-character {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  /* база — движок корректирует left/top по брейкпоинтам */
  right: 5%;
  top: 14%;
  width: 46%;
  max-width: 460px;
  min-width: 180px;
  filter: drop-shadow(0 18px 28px rgba(10, 20, 45, 0.30));
}

.pf-character svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* ----------------------------------------------------------------------------
   5. АНИМАЦИИ ПЕРСОНАЖЕЙ
   Дыхание — плавное изменение объёма. transform-origin по центру низа,
   чтобы персонаж «дышал» от опоры.
   ---------------------------------------------------------------------------- */
@keyframes pf-breathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-1.5%) scale(1.025, 0.982); }
}
@keyframes pf-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.4%); }
}
@keyframes pf-sway {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

.pf-body {
  transform-origin: 50% 88%;
  animation: pf-breathe var(--pf-dur-breathe) ease-in-out infinite;
}
.pf-body--bob {
  animation:
    pf-breathe var(--pf-dur-breathe) ease-in-out infinite,
    pf-bob 9s ease-in-out infinite;
}
.pf-body--sway {
  animation:
    pf-breathe var(--pf-dur-breathe) ease-in-out infinite,
    pf-sway 7s ease-in-out infinite;
}

/* Лучи солнца — медленное вращение */
@keyframes pf-rays-spin {
  to { transform: rotate(360deg); }
}
.pf-rays {
  transform-origin: 50% 50%;
  transform-box: view-box;
  animation: pf-rays-spin 32s linear infinite;
}

/* Покачивание лучей-«лепестков» */
@keyframes pf-rays-pulse {
  0% { transform: scale(.88); opacity: .35; }
  45% { opacity: 1; }
  100% { transform: scale(1.14); opacity: .15; }
}
.pf-rays .pf-ray {
  transform-origin: 50% 50%;
  transform-box: view-box;
  animation: pf-rays-pulse var(--pf-ray-duration,3.6s) ease-out infinite;
}
.pf-rays .pf-ray:nth-child(odd) { animation-delay: -1.8s; }
@keyframes pf-solar-glow {
  0%,100% { transform:scale(.92); opacity:.45; }
  50% { transform:scale(1.22); opacity:.9; }
}
.pf-sun-glow { transform-box:view-box; animation:pf-solar-glow 4.8s ease-in-out infinite; }
@keyframes pf-moon-rock {
  0%,100% { transform:rotate(-3deg) translateY(0); }
  50% { transform:rotate(3deg) translateY(-3px); }
}
.pf-moon-sway { transform-box:fill-box; transform-origin:center; animation:pf-moon-rock 8s ease-in-out infinite; }
@keyframes pf-cloud-rock { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
.pf-cloud-bob { animation:pf-cloud-rock 6s ease-in-out infinite; }
.sizes svg { --pf-ray-duration:6s; }

/* --- Глаза: моргание ------------------------------------------------------ */
@keyframes pf-blink {
  0%, 46.5%, 53.5%, 100% { transform: scaleY(1); }
  49%, 51%                { transform: scaleY(0.08); }
}
.pf-eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-blink var(--pf-dur-blink) ease-in-out infinite;
}
.pf-eye--slow { animation: pf-blink 12s ease-in-out infinite; }
.pf-eye--left  { animation-delay: 0s; }
.pf-eye--right { animation-delay: 0.12s; }

/* Веки (полуприкрытые глаза) — лёгкое «сонное» движение */
@keyframes pf-lid-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(1.6px); }
}
.pf-lid {
  animation: pf-lid-drift 6.5s ease-in-out infinite;
}

/* Брови — редкое движение */
@keyframes pf-brow-lift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5px); }
}
.pf-brow {
  transform-origin: center;
  animation: pf-brow-lift 11s ease-in-out infinite;
}

/* Рот / улыбка — едва заметное изменение */
@keyframes pf-mouth-soft {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04, 0.96); }
}
.pf-mouth {
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-mouth-soft 9.5s ease-in-out infinite;
}

/* Зрачок — короткий взгляд в сторону (редко) */
@keyframes pf-glance {
  0%, 100% { transform: translateX(0); }
  78%      { transform: translateX(0); }
  82%      { transform: translateX(2.2px); }
  90%      { transform: translateX(0); }
}
.pf-pupil {
  animation: pf-glance 13s ease-in-out infinite;
}

/* Румянец / щёки — мягкое усиление */
@keyframes pf-blush {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}
.pf-blush {
  animation: pf-blush 7s ease-in-out infinite;
}

/* Блик — движение света по объёму */
@keyframes pf-glint {
  0%, 100% { opacity: 0.75; transform: translateX(0); }
  50%      { opacity: 0.95; transform: translateX(1.5%); }
}
.pf-glint {
  animation: pf-glint 8s ease-in-out infinite;
}

/* Холодная дрожь (мороз) — частое мелкое дрожание */
@keyframes pf-shiver {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%      { transform: translate(-1px, 0.4px) rotate(-0.5deg); }
  40%      { transform: translate(1px, -0.4px) rotate(0.5deg); }
  60%      { transform: translate(-0.8px, 0.3px) rotate(-0.4deg); }
  80%      { transform: translate(0.8px, -0.3px) rotate(0.4deg); }
}
.pf-shiver {
  animation: pf-shiver 0.85s linear infinite;
}

/* Зубы стучат */
@keyframes pf-teeth {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(1.2px); }
}
.pf-teeth {
  animation: pf-teeth 0.42s linear infinite;
}

/* Напряжённое сжатие перед молнией (гроза) */
@keyframes pf-tense {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(0.985, 1.012); }
}
.pf-tense {
  transform-origin: 50% 88%;
  animation: pf-tense 6.5s ease-in-out infinite;
}

/* Жара — волны горячего воздуха над персонажем */
@keyframes pf-heatwave {
  0%   { opacity: 0.15; transform: translateY(0) scaleX(0.9); }
  50%  { opacity: 0.5;  transform: translateY(-10px) scaleX(1.05); }
  100% { opacity: 0.1;  transform: translateY(-22px) scaleX(0.95); }
}
.pf-heatwave {
  transform-origin: center;
  animation: pf-heatwave 4s ease-in-out infinite;
}

/* Капли/снег внутри самого SVG-персонажа (связанная с погодой анимация) */
@keyframes pf-drop-fall {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateY(26px); opacity: 0; }
}
.pf-drop {
  animation: pf-drop-fall 2.4s ease-in infinite;
}
.pf-drop:nth-child(2n) { animation-delay: 1.2s; }
.pf-drop:nth-child(3n) { animation-delay: 0.6s; }

@keyframes pf-snow-inner {
  0%   { transform: translate(-4px, -12px); opacity: 0; }
  15%  { opacity: 1; }
  55%  { transform: translate(5px, 12px); opacity: 1; }
  100% { transform: translate(-2px, 34px); opacity: 0; }
}
.pf-snowflake {
  animation: pf-snow-inner 3.8s linear infinite;
}
.pf-snowflake:nth-child(2n) { animation-delay: 2.5s; }
.pf-snowflake:nth-child(3n) { animation-delay: 1.3s; }

/* Молния: короткая вспышка, редкая и мягкая (фото-безопасность) */
@keyframes pf-lightning {
  0%, 25%, 100% { opacity: .25; }
  8% { opacity: 1; }
  18% { opacity: .7; }
}
.pf-bolt {
  animation: pf-lightning 9s ease-in-out infinite;
  animation-delay: -1s;
}

/* Вспышка, подсвечивающая облако */
@keyframes pf-cloud-flash {
  0%, 25%, 100% { opacity: 0; }
  8% { opacity: .5; }
  18% { opacity: .15; }
}
.pf-cloud-flash {
  animation: pf-cloud-flash 9s ease-in-out infinite;
  animation-delay: -1s;
}

/* ----------------------------------------------------------------------------
   6. АНИМАЦИИ ФОНА
   ---------------------------------------------------------------------------- */

/* Горизонтальный дрейф облаков. Направление ветра движок задаёт через
   CSS-переменную --pf-wind (1 или -1), скорость — через --pf-drift-dur. */
@keyframes pf-drift {
  from { transform: translateX(calc(-10% * var(--pf-wind, 1))); }
  to   { transform: translateX(calc(110% * var(--pf-wind, 1))); }
}
.pf-cloud {
  animation-name: pf-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Мерцание звёзд (мягкое, без резких вспышек) */
@keyframes pf-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}
.pf-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-twinkle 6s ease-in-out infinite;
}
.pf-star:nth-child(2n) { animation-delay: -3s; animation-duration: 8s; }
.pf-star:nth-child(3n) { animation-delay: -1.5s; animation-duration: 5s; }

/* Туман — медленные пересекающиеся горизонтальные слои */
@keyframes pf-fog-slide {
  0%   { transform: translateX(-8%); }
  100% { transform: translateX(8%); }
}
.pf-fog {
  animation: pf-fog-slide 22s ease-in-out infinite alternate;
}

/* Воздушные линии ветра */
@keyframes pf-wind-line {
  0%   { transform: translateX(-15%) scaleX(0.4); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translateX(115%) scaleX(1); opacity: 0; }
}
.pf-windline {
  transform-origin: left center;
  animation: pf-wind-line 3.2s linear infinite;
}
.pf-windline:nth-child(2n) { animation-delay: 1.6s; animation-duration: 4.1s; }
.pf-windline:nth-child(3n) { animation-delay: 0.8s; animation-duration: 2.7s; }

/* Листья / частицы, летящие по ветру */
@keyframes pf-debris {
  0%   { transform: translate(-10%, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.9; }
  100% { transform: translate(110%, -30px) rotate(720deg); opacity: 0; }
}
.pf-debris {
  animation: pf-debris 5s linear infinite;
}

/* Морозные кристаллы по краям — слабое холодное сияние */
@keyframes pf-frost-glow {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.6; }
}
.pf-frost-rim {
  animation: pf-frost-glow 9s ease-in-out infinite;
}

/* Радуга — появление и мягкое свечение */
@keyframes pf-rainbow-in {
  0%   { opacity: 0; transform: scale(0.85); }
  100% { opacity: 0.8; transform: scale(1); }
}
.pf-rainbow {
  transform-origin: bottom center;
  animation: pf-rainbow-in 2.4s ease-out both, pf-breathe 10s ease-in-out infinite;
}

/* Мягкая вспышка фона при грозе (фото-безопасная, низкая частота) */
@keyframes pf-bg-flash {
  0%, 100% { opacity: 0; }
  3%       { opacity: 0.14; }
  6%       { opacity: 0.03; }
  9%       { opacity: 0.10; }
  14%      { opacity: 0; }
}
.pf-scene--storm::before {
  animation: pf-bg-flash 9s ease-in-out infinite;
  animation-delay: 3.4s;
}

/* ----------------------------------------------------------------------------
   7. ОТЗЫВЧИВОСТЬ
   ---------------------------------------------------------------------------- */

/* Крупные десктопы — персонаж крупнее и правее */
@media (min-width: 1280px) {
  .pf-character { width: 38%; max-width: 520px; right: 8%; top: 10%; }
}

/* Планшеты */
@media (min-width: 768px) and (max-width: 1279px) {
  .pf-character { width: 42%; right: 5%; top: 14%; }
}

/* Мобильные — персонаж над карточкой, чуть левее, не закрывает текст */
@media (max-width: 767px) {
  .pf-character { width: 62%; max-width: 260px; right: 4%; top: 8%; }
}

/* Очень узкие экраны (320px) */
@media (max-width: 360px) {
  .pf-character { width: 58%; right: 3%; top: 7%; }
}

/* Не допускаем горизонтального скролла */
.pf-scene, .pf-layer, .pf-particles, .pf-character { max-width: 100vw; }

/* ----------------------------------------------------------------------------
   8. ДОСТУПНОСТЬ: снижение движения и фоточувствительность
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pf-sprite-definitions * { animation: none !important; }
  .pf-scene *,
  .pf-scene *::before,
  .pf-scene *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Вспышки полностью отключаем */
  .pf-cloud-flash, .pf-scene--storm::before { display: none !important; }
  .pf-bolt { animation: none !important; opacity: 1; }
}

/* Фоточувствительность: принудительно гасим вспышки молний */
@media (prefers-contrast: more) {
  .pf-bolt { animation: none; opacity: 1; }
  .pf-cloud-flash { animation: none; opacity: 0; }
  .pf-scene--storm::before { animation: none; opacity: 0; }
}