/* ============================================================================
   Погода на базе «Беседа»
   style.css — все стили приложения.

   Как читать этот файл:
   1) ПЕРЕМЕННЫЕ   — цвета, радиусы, отступы (меняешь тут — меняется везде)
   2) ФОН          — фото базы, затемнение и анимация «дыхания»
   3) БАЗА         — шрифт, заголовки, сетка страницы (для телефона)
   4) КОМПОНЕНТЫ   — стеклянные окна, кольцо, полоски, кнопка
   5) НЕДЕЛЯ       — 7 окон с прогнозом
   6) ПЛАНШЕТ      — от 700 до 999 px
   7) ДЕСКТОП      — от 1000 px: раскладка в три колонки, всё в один экран
   ============================================================================ */


/* ============================================================================
   1. ПЕРЕМЕННЫЕ (дизайн-система)
   ============================================================================ */
:root {
  /* Фон и «стекло». Окна полупрозрачные — сквозь них видно фото базы */
  --bg:            #0b0d10;
  --glass:         rgba(255, 255, 255, 0.075);  /* заливка окна          */
  --glass-top:     rgba(255, 255, 255, 0.11);   /* блик в верхней части  */
  --glass-line:    rgba(255, 255, 255, 0.16);   /* рамка окна            */
  --track:         rgba(255, 255, 255, 0.16);   /* дорожка под полосками */

  /* Текст */
  --text:          #f1f3f4;
  --text-soft:     #cfd5d9;
  --muted:         #a3abb1;
  --cream:         #f6f3ec;

  /* Акценты: тёплое золото + холодный голубой */
  --gold:          #efc97e;
  --gold-soft:     #f3dca8;
  --blue:          #7cc2de;
  --blue-deep:     #4e93b4;
  --ink:           #1a1c1e;

  /* Геометрия */
  --radius:        20px;
  --gap:           18px;

  --shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.9),
            inset 0 1px 0 rgba(255, 255, 255, 0.14);
}


/* ============================================================================
   2. ФОН: фото базы
   ============================================================================ */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Этот слой двигается при прокрутке и от движения мыши */
.bg__parallax {
  position: absolute;
  inset: 0;
  will-change: transform;
  transition: transform 0.05s linear;
}

/* Само фото. Выше и ниже экрана на 20% — запас, чтобы при сдвиге
   (параллакс + «дыхание») по краям не показалась пустота */
.bg__img {
  position: absolute;
  left: 0;
  top: -20%;
  width: 100%;
  height: 140%;
  object-fit: cover;
  animation: heroFloat 8s ease-in-out infinite;
}

/* Та же анимация, что на termixpart.ru: фото медленно «дышит» */
@keyframes heroFloat {
  0%   { transform: scale(1.02) translateY(0px); }
  50%  { transform: scale(1.06) translateY(-10px); }
  100% { transform: scale(1.02) translateY(0px); }
}

/* Затемнение поверх фото: нужно, чтобы белый текст читался */
.bg__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(10, 12, 16, 0.22), transparent 65%),
    linear-gradient(180deg,
      rgba(8, 10, 13, 0.46) 0%,
      rgba(8, 10, 13, 0.58) 45%,
      rgba(8, 10, 13, 0.78) 100%);
}


/* ============================================================================
   3. БАЗА (телефон: две колонки, страница прокручивается)
   ============================================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background: var(--bg);
}

h1, h2, p { margin: 0; }

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(20px, 3.5vw, 40px) clamp(16px, 3vw, 28px) 44px;
}

/* --- Мелкие подписи: заглавные буквы с разрядкой --- */
.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Подписи в шапке («База отдыха · Рассказово», «Прогноз») — на шаг крупнее,
   чем подписи внутри окон: рядом с большим заголовком мелкий текст теряется.
   Через .head .label, чтобы подписи в карточках остались прежними. */
.head .label { font-size: 12px; }

/* --- Крупный заголовок: serif, тёплый кремовый цвет --- */
.display {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(26px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cream);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.display--sm { font-size: clamp(19px, 2.4vw, 30px); }

/* --- Крупные числа --- */
.value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text);
}

.unit { font-size: 13px; font-weight: 500; color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); }
.ico { display: block; }


/* ============================================================================
   4. КОМПОНЕНТЫ
   ============================================================================ */

/* --- Шапка: название базы, блок «Прогноз», кнопка --- */
.head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 24px;
}
.head__text { display: flex; flex-direction: column; gap: 9px; }

/* «Прогноз · На ближайшую неделю» — одной строкой, подпись мелким шрифтом */
.head__forecast {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.head__sub { font-size: 14.5px; color: var(--text-soft); }

/* На телефоне и планшете пояснительная строка не нужна — она занимает
   две строки и отодвигает погоду вниз. Остаются только «Прогноз · На ближайшую неделю» */
@media (max-width: 999px) {
  .head__sub { display: none; }
}

/* --- Кнопка --- */
.btn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(239, 201, 126, 0.75);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.btn:hover    { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active   { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

/* --- Сообщение об ошибке --- */
.notice {
  margin: 0 0 var(--gap);
  padding: 13px 17px;
  font-size: 13px;
  color: var(--gold-soft);
  background: rgba(239, 201, 126, 0.12);
  border: 1px solid rgba(239, 201, 126, 0.28);
  border-radius: 14px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- Раскладка окон ---
   Телефон: две колонки. Крупные окна занимают обе, мелкие встают парами. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
.hero      { grid-column: span 2; }
.side      { grid-column: span 2; }
.tile--sun { grid-column: span 2; }

/* --- СТЕКЛЯННОЕ ОКНО ---------------------------------------------------------
   Полупрозрачная заливка + размытие того, что под ней (backdrop-filter).
   Именно из-за размытия фото за окном выглядит мягким, а текст остаётся читаемым.
   --------------------------------------------------------------------------- */
.card {
  padding: clamp(16px, 2vw, 22px);
  background: linear-gradient(180deg, var(--glass-top), var(--glass));
  border: 1px solid var(--glass-line);
  border-radius: var(--radius);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow);
}

/* Если браузер не умеет размывать фон — делаем окна плотнее */
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .card { background: rgba(18, 21, 25, 0.9); }
}

/* --- Окно с кольцом --- */
.hero {
  display: flex;
  flex-direction: column-reverse;   /* на телефоне кольцо сверху, подпись снизу */
  align-items: center;
  text-align: center;
  gap: 18px;
}
.hero__info { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hero__cond { font-size: clamp(18px, 2.2vw, 23px); font-weight: 500; }
.hero__meta { font-size: 12px; color: var(--muted); }

/* --- Кольцо-индикатор --- */
.gauge {
  position: relative;
  flex: 0 0 auto;
  width: min(220px, 56vw);
  aspect-ratio: 1 / 1;
}
.gauge__svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.gauge__track { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 10; }

.gauge__value {
  fill: none;
  stroke: url(#gaugeGrad);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 540;      /* 2 × π × 86 ≈ 540 — полная длина окружности */
  stroke-dashoffset: 540;     /* 540 = пусто, 0 = кольцо замкнулось */
  transition: stroke-dashoffset 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gauge__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.gauge__icon { color: var(--gold); }
.gauge__temp {
  font-size: clamp(36px, 7vw, 52px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.gauge__unit { font-size: 12px; color: var(--muted); }

/* --- Окно «ощущается / сегодня» --- */
.side { display: flex; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.split__item { display: flex; flex-direction: column; gap: 7px; }
.split__item + .split__item {
  padding-left: 18px;
  border-left: 1px solid var(--glass-line);
}

/* --- Окна показателей --- */
.tile__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.tile__icon { color: var(--gold); display: flex; }

/* --- Тонкая полоска-прогресс --- */
.bar {
  height: 5px;
  margin: 12px 0 8px;
  background: var(--track);
  border-radius: 99px;
  overflow: hidden;
}
.bar__fill {
  height: 100%;
  width: 0;                    /* ширину задаёт JavaScript */
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bar__fill--blue { background: linear-gradient(90deg, var(--blue-deep), var(--blue)); }

/* --- Окно «Солнце» --- */
.sun__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sun__time { display: flex; flex-direction: column; gap: 3px; }
.sun__time--right { text-align: right; align-items: flex-end; }
.sun__arc { width: 100%; max-width: 190px; height: auto; }


/* ============================================================================
   5. НЕДЕЛЯ: 7 окон с прогнозом
   ============================================================================ */

.week-section { margin-top: 24px; }

.week {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Одно окно = один день.
   Окно вытянуто по вертикали (как на макете): содержимое распределяется
   по высоте через space-between, а min-height задаёт саму вытянутость. */
.day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-height: 215px;
  padding: 16px 8px;
  text-align: center;
  animation: riseIn 0.6s ease both;
}

/* Появление окна: снизу вверх.
   В анимации меняется ТОЛЬКО сдвиг, без прозрачности: если анимация почему-то
   не отработает (экономия батареи, отключённые эффекты), окно всё равно видно.
   Ставить здесь opacity: 0 нельзя — карточка осталась бы невидимой навсегда. */
@keyframes riseIn {
  from { transform: translateY(16px); }
  to   { transform: translateY(0); }
}

.day__name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.day__date { font-size: 11.5px; color: var(--muted); }
.day__icon { margin: 5px 0 2px; color: var(--gold); }

.day__temp {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.day__min { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.day__text { font-size: 11.5px; color: var(--text-soft); }
.day__precip {
  font-size: 11px;
  font-weight: 500;
  color: var(--blue);
  min-height: 15px;          /* место зарезервировано, чтобы окна были одной высоты */
}


/* ============================================================================
   6. ПЛАНШЕТ (700–999 px): неделя в четыре окна
   ============================================================================ */

@media (min-width: 700px) and (max-width: 999px) {
  .week { grid-template-columns: repeat(4, 1fr); }
}


/* ============================================================================
   7. ДЕСКТОП (от 1000 px): раскладка в три колонки, всё в один экран

   Как расставлены окна:

     +----------------+----------+----------+----------------+
     |                |  ВЕТЕР   | ВЛАЖНОСТЬ|   ОЩУЩАЕТСЯ    |
     |   КОЛЬЦО       |          |          |   / СЕГОДНЯ    |
     |   (на всю      +----------+----------+----------------+
     |    высоту)     | ДАВЛЕНИЕ |  ОСАДКИ  |    СОЛНЦЕ      |
     +----------------+----------+----------+----------------+
     |            СЕМЬ ОКОН НЕДЕЛИ НА ВСЮ ШИРИНУ             |
     +-------------------------------------------------------+

   Сетка — 4 колонки и 2 ряда. Каждое окно получает своё место явно,
   поэтому ряды совпадают по высоте и ничего не «пляшет».
   ============================================================================ */

@media (min-width: 1000px) and (min-height: 600px) {

  /* Прокрутка выключается совсем */
  html, body { height: 100%; overflow: hidden; }

  :root {
    --gap: clamp(9px, 1.1vh, 16px);
    --radius: clamp(14px, 1.7vh, 20px);
  }

  .app {
    height: 100vh;
    max-width: 1500px;
    display: flex;
    flex-direction: column;
    /* Блок не растягивается на всю высоту, а стоит по центру экрана:
       так на большом мониторе не появляется пустота внутри окон */
    justify-content: center;
    gap: clamp(9px, 1.2vh, 16px);
    padding: clamp(12px, 1.7vh, 26px) clamp(18px, 2.2vw, 40px);
  }

  /* --- Шапка в одну строку: название | прогноз | кнопка --- */
  .head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: clamp(16px, 2vw, 32px);
    margin-bottom: 0;
  }
  .head__text { flex: 0 0 auto; gap: 3px; }
  .head .label { font-size: 12.5px; }

  /* Размеры заголовка взяты с образца: он должен читаться как главный
     элемент страницы. Растёт вместе с высотой экрана (vh), но min() не
     даёт ему раздуться на узких мониторах, где строка шапки короткая.
     Первая строка — запасной вариант для браузеров без min() внутри clamp(). */
  .display {
    font-size: clamp(25px, 5.5vh, 46px);
    font-size: clamp(25px, min(5.5vh, 3.4vw), 46px);
  }

  .head__forecast {
    flex: 1 1 auto;
    padding-left: clamp(16px, 2vw, 30px);
    border-left: 1px solid var(--glass-line);   /* разделитель, как на макете */
  }
  .display--sm {
    font-size: clamp(19px, 3.8vh, 32px);
    font-size: clamp(19px, min(3.8vh, 2.3vw), 32px);
  }
  .head__sub { font-size: 14.5px; }

  .btn { padding: 9px 20px; flex: 0 0 auto; }

  /* --- Расстановка окон --- */
  .grid {
    flex: 0 1 auto;
    min-height: 0;
    grid-template-columns: 1fr 0.78fr 0.78fr 1.32fr;
    grid-template-rows: auto auto;
  }

  .hero           { grid-column: 1; grid-row: 1 / 3; }   /* на всю высоту */
  .tile--wind     { grid-column: 2; grid-row: 1; }
  .tile--humidity { grid-column: 3; grid-row: 1; }
  .tile--pressure { grid-column: 2; grid-row: 2; }
  .tile--precip   { grid-column: 3; grid-row: 2; }
  .side           { grid-column: 4; grid-row: 1; }
  .tile--sun      { grid-column: 4; grid-row: 2; }

  /* Кольцо: подпись сверху, кольцо под ней по центру — как на макете */
  .hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    justify-content: space-between;
    gap: clamp(8px, 1.4vh, 18px);
  }
  .hero__info { align-items: flex-start; gap: clamp(2px, 0.6vh, 8px); }
  .hero__cond { font-size: clamp(15px, 2vh, 21px); }
  .gauge { align-self: center; width: min(210px, 25vh, 20vw); }
  .gauge__temp { font-size: clamp(28px, 4.2vh, 44px); }

  /* --- Размеры, привязанные к высоте окна --- */
  .card { padding: clamp(11px, 1.5vh, 20px); }
  .value { font-size: clamp(18px, 2.4vh, 26px); }
  .tile__head { margin-bottom: clamp(6px, 1vh, 14px); }
  .bar { margin: clamp(7px, 1.1vh, 13px) 0 clamp(4px, 0.7vh, 9px); }
  .sun__arc { max-width: min(170px, 14vw); }

  /* --- Неделя на всю ширину --- */
  .week-section { margin-top: 0; flex: 0 0 auto; }
  .week { grid-template-columns: repeat(7, 1fr); gap: clamp(6px, 0.7vw, 11px); }

  /* Вытянутые окна дней: высота привязана к высоте экрана, поэтому
     они остаются заметно выше, чем шире, на любом мониторе */
  .day {
    min-height: clamp(180px, 34vh, 260px);
    padding: clamp(9px, 1.3vh, 16px) 7px;
    gap: clamp(1px, 0.4vh, 5px);
  }
  .day__icon { margin: clamp(2px, 0.5vh, 6px) 0 1px; }
  .day__temp { font-size: clamp(15px, 2vh, 19px); }
  .day__min { font-size: clamp(11px, 1.5vh, 14px); }
  .day__precip { min-height: clamp(12px, 1.6vh, 15px); }
}

/* Уважаем настройку «меньше анимаций» в системе */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}