/* Ambient Slide-Show Mode — «Жива атмосфера» */

/* --- кнопки в шапке «Жива атмосфера» (нота) и «Анімація» (лапка) — круглые, как «день/ніч» (решение владельца 30.10.2026;
   раньше были ползунки, как в админке). Включено — значок красный на светло-красном круге --- */
.amb-btn { cursor: pointer; user-select: none; }
.amb-btn input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.amb-btn.is-on, .amb-btn:has(input:checked) { color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
.amb-btn:has(input:focus-visible) { outline: 2px solid var(--red); outline-offset: 2px; }

/* --- оверлей затемнения --- */
.amb-overlay {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(10, 14, 22, .86);   /* без размытия фона (backdrop-filter) — на слабых ноутбуках оно съедало кадры (30.10.2026) */
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease;
}
.amb-overlay.is-on { opacity: 1; pointer-events: auto; }

/* --- гирлянда по периметру: разноцветные шарики на проводе, яркое свечение --- */
.amb-garland { position: fixed; inset: 0; z-index: 8001; pointer-events: none; opacity: 0; transition: opacity .8s ease; }
.amb-garland.is-on { opacity: 1; }
.amb-garland .g-edge { position: absolute; display: flex; align-items: center; }
.amb-garland .g-edge::before { content: ''; position: absolute; background: rgba(40,40,40,.85); }  /* провод */
.amb-garland .g-top    { top: 0; left: 0; right: 0; height: 34px; flex-direction: row; justify-content: space-around; padding: 0 30px; }
.amb-garland .g-bottom { bottom: 0; left: 0; right: 0; height: 34px; flex-direction: row; justify-content: space-around; padding: 0 30px; }
.amb-garland .g-left   { top: 0; bottom: 0; left: 0; width: 34px; flex-direction: column; justify-content: space-around; padding: 30px 0; }
.amb-garland .g-right  { top: 0; bottom: 0; right: 0; width: 34px; flex-direction: column; justify-content: space-around; padding: 30px 0; }
.amb-garland .g-top::before, .amb-garland .g-bottom::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.amb-garland .g-left::before, .amb-garland .g-right::before { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; }

/* лампочка: свечение нарисовано один раз, мерцание — только прозрачность и размер (их браузер двигает без перерисовки,
   на видеокарте). Раньше мерцали тени с большим размытием — 74 лампочки перерисовывались каждый кадр, на ноутбуке
   оставалось 10 кадров в секунду, сдвиг фото шёл рывками и вспышки казались не в такт (30.10.2026) */
.amb-garland .bulb {
  position: relative; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, #fff 0 10%, var(--gc) 42%, color-mix(in srgb, var(--gc) 65%, #000) 100%);
  box-shadow: 0 0 7px 3px var(--gc), 0 0 20px 7px color-mix(in srgb, var(--gc) 60%, transparent);
  will-change: opacity, transform;
  animation: bulb-glow 1.6s ease-in-out infinite alternate;
}
/* вспышка в момент смены фото — белая сердцевина поверх лампочки (ambient.js, Web Animations по ::after) */
.amb-garland .bulb::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; opacity: 0; will-change: opacity;
  background: radial-gradient(circle, #fff 0 30%, color-mix(in srgb, var(--gc) 50%, #fff) 55%, transparent 72%);
}
@keyframes bulb-glow {
  0%   { opacity: .55; transform: scale(.9); }
  100% { opacity: 1; transform: scale(1.06); }
}

/* --- проектор: слайды --- */
.amb-projector {
  position: fixed; inset: 0; z-index: 8002; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .8s ease;
}
.amb-projector.is-on { opacity: 1; }
.amb-slide {
  position: absolute; inset: 5vh 5vw;  /* бегущая строка может заходить на фото (решение владельца 28.10.2026) */
  opacity: 0;
}
.amb-slide img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
/* фото обычные, непрозрачные; смена чёткая, в долю: новое появляется, старое исчезает в тот же кадр — разные по размеру
   фото не выглядывают одно из-под другого (решение владельца 30.10.2026; раньше новое проявлялось 0,6 с поверх старого) */
.amb-slide.is-active { opacity: 1; z-index: 2; }

/* --- кнопка закрытия поверх оверлея --- */
.amb-close {
  position: fixed; top: 16px; right: 16px; z-index: 8010;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.25);
  color: #fff; font-size: 22px; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: background .2s;
}
.amb-close:hover { background: rgba(255,255,255,.22); }
.amb-close.is-on { display: flex; }

/* --- внизу: бегущая строка «надішліть фото свого улюбленця» + кнопка (решение владельца 28.10.2026) --- */
.amb-info {
  position: fixed; left: 44px; right: 44px; bottom: 40px; z-index: 8010;
  display: none; align-items: center; gap: 12px; padding: 8px 8px 8px 16px;
  color: #fff; background: rgba(0,0,0,.8);
  border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.amb-info.is-on { display: flex; animation: amb-bar-in .6s ease-out; }
@keyframes amb-bar-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.amb-info .amb-note-icon { font-size: 18px; flex: none; }
.amb-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
/* строку двигает ambient.js (въезжает справа через 5 с после включения); жёлтый крупный текст — заметно */
.amb-marquee-track { display: inline-flex; will-change: transform; }
.amb-marquee-track span { font: 700 20px/1.25 var(--font-h); color: #ffd84a; text-shadow: 0 1px 2px rgba(0,0,0,.6); padding-right: 40px; }
.amb-send { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  background: #229ed9; color: #fff; font: 700 14px/1 var(--font-h); text-decoration: none; white-space: nowrap; }   /* цвет Telegram (кнопка ведёт туда, 29.10.2026) */
.amb-send:hover { background: #1b87bb; color: #fff; }

/* мобилка */
@media (max-width: 640px) {
  .amb-slide { inset: 8vh 2vw; }
  .amb-garland .bulb { width: 14px; height: 14px; }
  .amb-garland .g-top, .amb-garland .g-bottom { height: 26px; padding: 0 22px; }
  .amb-garland .g-left, .amb-garland .g-right { width: 26px; padding: 22px 0; }
  /* телефон: бегущая строка — отдельной полосой во всю ширину, кнопка — под ней */
  .amb-info { left: 30px; right: 30px; bottom: 32px; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 18px; }
  .amb-marquee { flex: 0 0 100%; }
  .amb-marquee-track span { font-size: 17px; }
  .amb-send { padding: 8px 11px; font-size: 12.5px; }
  .amb-info .amb-note-icon { display: none; }
}

/* «Атмосферу» человек включает сам — в ней всё движется даже при «уменьшении движения» в телефоне
   (иначе общее правило в style.css останавливает гирлянду и смену фото; решение владельца 28.10.2026) */
@media (prefers-reduced-motion: reduce) {
  .amb-garland .bulb { animation: bulb-glow 1.6s ease-in-out infinite alternate !important; }
  .amb-info.is-on { animation: amb-bar-in .6s ease-out !important; }
  .amb-overlay, .amb-garland, .amb-projector { transition: opacity .8s ease !important; }
}

/* телефон: вместо бегущей строки — окошко вверху с текстом целиком и кнопкой; фото ниже окошка, не перекрывается */
.amb-static { display: none; }
.amb-info.is-measure { display: flex; visibility: hidden; animation: none; }
@media (max-width: 640px) {
  .amb-info { top: 70px; bottom: auto; left: 16px; right: 16px; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; border-radius: 16px; }
  .amb-info .amb-marquee { display: none; }
  .amb-static { display: block; text-align: center; }
  .amb-static b { display: block; font: 700 16.5px/1.35 var(--font-h); color: #ffd84a; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
  .amb-static small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.35; color: rgba(255,255,255,.75); }
  .amb-send { align-self: center; padding: 10px 18px; font-size: 14px; }
  .amb-slide, .amb-slide { top: var(--amb-top, 8vh); bottom: 36px; left: 2vw; right: 2vw; transition: top .5s ease; }
}
/* строка прошла 3 раза / окошко отпоказывалось — плавно исчезает (решение владельца 29.10.2026) */
.amb-info.is-hiding { animation: amb-bar-out .4s ease-in forwards; }
@keyframes amb-bar-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .amb-info.is-hiding { animation: amb-bar-out .4s ease-in forwards !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  .amb-slide { transition: top .5s ease !important; }
  .amb-info.is-hiding { animation: amb-bar-out .4s ease-in forwards !important; }
}


/* --- плеер «Атмосферы»: пауза, громкость, выбор музыки, своя песня, свои фото, сохранить (решения владельца 30.10.2026) --- */
.amb-projector { overflow: hidden; }   /* фото уезжают за край при сдвиге — без полос прокрутки */
.amb-player {
  position: fixed; top: 16px; left: 16px; z-index: 8010; max-width: calc(100vw - 92px);
  display: none; align-items: center; gap: 8px; padding: 5px 8px 5px 5px;
  color: #fff; background: rgba(0,0,0,.78);
  border: 1.5px solid rgba(255,255,255,.18); border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.35);
  font: 600 13px/1.2 var(--font-h);
}
.amb-player.is-on { display: flex; }
.amb-player button, .amb-player select { flex: none; border: 0; cursor: pointer; color: #fff; font: inherit; }
.amb-pp { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 15px !important; line-height: 1; }
.amb-pp:hover { background: rgba(255,255,255,.28); }
.amb-vol { display: flex; align-items: center; gap: 4px; flex: none; }
.amb-vol input { width: 90px; accent-color: #ffd84a; cursor: pointer; }
.amb-track { padding: 8px 10px; border-radius: 999px; background: #ffd84a; color: #1d1b3a !important; max-width: 190px; }
.amb-track option { color: #1d1b3a; background: #fff; }
.amb-btn { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.16); white-space: nowrap; }
.amb-btn:hover { background: rgba(255,255,255,.28); }
.amb-player.is-rec .amb-save { background: #e5243b; animation: amb-rec 1s ease-in-out infinite alternate; }
@keyframes amb-rec { from { box-shadow: 0 0 0 0 rgba(229,36,59,.7); } to { box-shadow: 0 0 0 6px rgba(229,36,59,0); } }
.amb-player.is-rec .amb-track, .amb-player.is-rec .amb-photos { opacity: .45; pointer-events: none; }
.amb-pl-status { min-width: 0; max-width: 240px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #ffd84a; font-weight: 600; }
.amb-pl-status:empty { display: none; }
.amb-pl-status.is-err { color: #ff9b9b; white-space: normal; }
.amb-help {
  position: fixed; top: 66px; left: 16px; z-index: 8011; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 90px); overflow: auto;
  padding: 16px 18px; border-radius: 16px; color: #fff; background: rgba(18,20,30,.95);
  border: 1.5px solid rgba(255,255,255,.18); box-shadow: 0 10px 34px rgba(0,0,0,.5);
  font: 400 14px/1.45 var(--font);
}
.amb-help[hidden] { display: none; }
.amb-help-h { display: block; margin-bottom: 8px; font: 700 16px/1.3 var(--font-h); color: #ffd84a; }
.amb-help p { margin: 0 0 8px; }
.amb-help-warn { padding: 8px 10px; border-radius: 10px; background: rgba(255,216,74,.12); color: #ffe9a8; font-weight: 600; }
.amb-help-note { font-size: 12.5px; color: rgba(255,255,255,.72); }
.amb-help-note a { color: #9fd8ff; }
.amb-help-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.amb-pick { position: relative; display: inline-flex; align-items: center; padding: 10px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #ffd84a; color: #1d1b3a; font: 700 14px/1 var(--font-h); }
.amb-pick:hover { background: #ffe37a; }
.amb-pick input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.amb-help-x, .amb-help-shop { padding: 10px 16px; border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; background: none; color: #fff;
  font: 600 14px/1 var(--font-h); cursor: pointer; }
.amb-help-shop[hidden] { display: none; }
.amb-rec-ready { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 6px; font-weight: 700; color: #b9f5c4; }
.amb-rec-ready[hidden] { display: none; }
/* телефон: плеер — внизу (под большим пальцем), фото над ним; надписи кнопок — только значки */
@media (max-width: 640px) {
  .amb-player { top: auto; bottom: 30px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 24px); gap: 6px; padding: 4px 6px 4px 4px; font-size: 12.5px; }
  .amb-player .amb-word, .amb-vol span { display: none; }
  .amb-vol input { width: 60px; }
  .amb-track { padding: 7px 8px; max-width: 128px; }
  .amb-btn { padding: 7px 10px; }
  .amb-pl-status { position: fixed; left: 12px; right: 12px; bottom: 76px; max-width: none; text-align: center; text-shadow: 0 1px 3px #000; }
  .amb-help { top: auto; bottom: 80px; left: 12px; right: 12px; width: auto; max-height: calc(100vh - 170px); }
  .amb-slide, .amb-slide { bottom: 84px; left: 30px; right: 30px; }   /* вертикальные фото не закрывают боковую гирлянду */
}

/* пока «Атмосфера» включена, сайт под затемнением не рисуется (он почти не виден, а анимации страницы отнимали кадры
   у сдвига фото и вспышек на слабых ноутбуках — 30.10.2026) */
html.amb-on body > :not(.amb-overlay):not(.amb-garland):not(.amb-projector):not(.amb-close):not(.amb-info):not(.amb-player):not(.amb-help) { visibility: hidden; }
/* в витринах «Затишний» / «Яскравий» у кнопок шапки свой фон — включённая кнопка всё равно заметна */
html .header .actions .act.amb-btn.is-on { background: color-mix(in srgb, var(--red) 14%, var(--card, #fff)); color: var(--red); }