/* base.css — базовые сбросы и контейнер сцены */
:root{
  /* тёмный кадр страницы = цвет «полосы», чтобы сливалась с краем фото (подход В) */
  --bg:#05070d;
  /* высота заливки; изначально 100vh, дальше fullscreen.js фиксирует в px по screen.height */
  --fill-h:100vh;
  /* толщина всех рамок (управляется отсюда). 0 = рамки выключены */
  --bw:0;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  width:100%;
  height:100%;
  background:var(--bg);
  overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
  touch-action:none;
}
/* Контейнер всей сцены: прижат к верху, ширина по вьюпорту (не «плывёт»),
   высота — заблокированный максимум, без bottom:0 (не ловим откат вьюпорта). */
#stage{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:var(--fill-h);
  background:var(--bg);
  overflow:hidden;
}
.layer{
  position:absolute;
  inset:0;
  z-index:0;
  background-color:var(--bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 1.6s ease-in-out;
  will-change:opacity;
}
.layer.show{opacity:1;}
/* Затемнение обоев (scrim): декоративный оверлей поверх фона, под интерфейсом.
   Градиент сверху/снизу от прозрачного к чёрному (~18%) — читаемость текста/иконок
   на любых обоях. Не ловит тачи (pointer-events:none). */
#scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(0,0,0,.42) 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,0) 30%,
      rgba(0,0,0,0) 70%, rgba(0,0,0,.12) 86%, rgba(0,0,0,.42) 100%);
}
::-webkit-scrollbar{display:none;}

/* ---- Плавный fade смены сторон: анимируем КАРТОЧКИ, а не родителя ----
   Родитель (.main-block/.aux-block) НЕ получает opacity/transform/will-change
   (иначе в Safari ломается backdrop-filter вложенных карточек).
   Скрытое состояние: карточки opacity:0 + blur(0) + visibility:hidden.
   .active на родителе => карточки плавно проявляются вместе с матовым стеклом. */
.weather-block, .calendar-block, .notif-block {
  opacity:0;
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  visibility:hidden;
  transition:opacity .6s ease-in-out, backdrop-filter .6s ease-in-out, -webkit-backdrop-filter .6s ease-in-out, visibility .6s ease-in-out;
}
.main-block.active .weather-block,
.aux-block.active .weather-block,
.main-block.active .calendar-block,
.aux-block.active .calendar-block,
.main-block.active .notif-block,
.aux-block.active .notif-block {
  opacity:1;
  backdrop-filter:blur(var(--glass-blur,18px));
  -webkit-backdrop-filter:blur(var(--glass-blur,18px));
  visibility:visible;
}
/* Часы (main-block) — нет backdrop-filter, но тоже плавно через opacity */
.mb-clock {
  opacity:0;
  visibility:hidden;
  transition:opacity .6s ease-in-out, visibility .6s ease-in-out;
}
.main-block.active .mb-clock { opacity:1; visibility:visible; }