/* ============================================================================
   СЕЗОННЫЙ ФОН — ОДИН ЯЗЫК НА ВСЮ ПЛОЩАДКУ.                          v1

   ЧТО ЭТО. Декоративный слой, который встаёт в крупные блоки-приветствия
   всех трёх кабинетов — донишҷӯ, устода и маъмура — и говорит на одном
   языке: один сезон, одни цвета, одно движение. Отличаться может только
   размах внутри конкретного блока, но не смысл.

   ЛЕТО — ГЛАВНОЕ. Вместо прежних жёлтых точек-пыльцы идут плавные световые
   волны: две-четыре широкие мягкие полосы, которые медленно перетекают.
   Основной вес справа и снизу — там, где нет текста.

   ОСТАЛЬНЫЕ СЕЗОНЫ — ТОТ ЖЕ ДВИЖОК, ДРУГАЯ РЕЧЬ. Волны остаются приёмом
   лета; весна говорит тонкими дугами роста, осень — приглушёнными полосами
   жнивья, зима — морозными отсветами. Один слой, четыре выражения.

   ЧЕГО ЭТОТ СЛОЙ НЕ ДЕЛАЕТ — И ЭТО ГЛАВНОЕ ОБЕЩАНИЕ:

     • не занимает места. Он position:absolute внутри своего блока и
       обрезает себя сам, поэтому не добавляет ни пикселя высоты, не двигает
       карточки и не создаёт полосу прокрутки;
     • не меняет геометрию при смене сезона. Меняются только цвета,
       прозрачность и рисунок — ни ширин, ни отступов, ни размеров шрифта;
     • не перехватывает мышь (pointer-events:none) и не читается голосом
       (aria-hidden ставит скрипт).

   ДВИЖЕНИЕ. Анимируются только transform и opacity — то, что браузер
   считает на видеокарте. Ни width, ни height, ни top/left. Все переходы
   идут через alternate: конец совпадает с началом по построению, поэтому
   стыка не видно никогда.
   ========================================================================= */

/* ---------------------------------------------------------------- токены --
   Единый набор --season-*, которым пользуются все кабинеты. Значения не
   дублируются числами: где возможно, они ссылаются на уже существующие
   переменные ФАСЛ. Два набора чисел неизбежно разошлись бы, и сезон в одном
   кабинете отличался бы от сезона в другом на пол-тона. */
:root{
  --season-bg:        var(--s-page, #F7F5ED);
  --season-surface:   #FFFFFF;
  --season-primary:   var(--s-i2, #5B8C3E);
  --season-secondary: var(--s-i3, #A7C957);
  --season-accent:    var(--s-acc, #5B8C3E);
  --season-border:    #E7E3D6;
  --season-text:      #22301F;
  /* Волна и свечение — своё у каждого сезона, задаются ниже. */
  --season-wave:      var(--s-soft, #EAF1E2);
  --season-glow:      var(--s-acc, #5B8C3E);
}

html[data-season='bahor']{
  --season-wave:#CFE6B4;
  --season-glow:#9CCB6A;
}
html[data-season='tobiston']{
  --season-wave:#F3D9A6;
  --season-glow:#F5C86A;
}
html[data-season='tiramoh']{
  --season-wave:#E6C9A8;
  --season-glow:#D79A5B;
}
html[data-season='zimiston']{
  --season-wave:#D8E4EC;
  --season-glow:#AFC6D6;
}

/* ------------------------------------------------------------- сам слой --
   border-radius:inherit — чтобы слой обрезался по скруглению блока, в
   который встал, а не торчал прямыми углами из-под его края. */
.sbg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
  border-radius:inherit;
}
/* Содержимое блока обязано лежать НАД слоем. Свой z-index ему не назначаем —
   достаточно поднять прямых детей блока, которые не являются слоем. */
.sbg ~ *{position:relative;z-index:1}

.sbg i{
  position:absolute;
  display:block;
  will-change:transform, opacity;
}
/* Летняя декорация лежит в слое всегда, но видна только летом. Переключаем
   ПРОЗРАЧНОСТЬЮ, а не display:none: скрытое через display не умеет плавно
   появляться, и смена сезона выглядела бы рывком. Полторы секунды — столько
   же, сколько уходит на смену цветов в остальном оформлении. */
.sbg .sbw,
.sbg .sbwheat,
.sbg .sbsun{
  opacity:0;
  transition:opacity 1.3s ease;
  pointer-events:none;
}
.sbg i{ transition:opacity 1.3s ease }

/* ============================== ЛЕТО ======================================
   ПШЕНИЧНОЕ ПОЛЕ.

   Три части: колосья в нижнем правом углу, две-три мягкие линии горизонта
   под ними и одно тёплое пятно света справа сверху. Ни кружков, ни точек:
   круг как отдельный предмет здесь запрещён — именно он и читался «жёлтой
   точкой», от которой уходим.

   Золото приглушённое, шампанское — не неон и не оранжевый. У нижних
   колосьев зерно чуть зеленее: поле созревает неровно, и одинаковый цвет у
   всех сразу выдаёт рисунок.
   ------------------------------------------------------------------------ */

/* Частиц летом нет вовсе — ни одной. Правило явное, а не «само собой»:
   сейчас эти узлы пусты и ничего не рисуют, но стоит когда-нибудь дать
   общему правилу .sbg i размер или фон — и точки вернутся молча. */
html[data-season='tobiston'] .sbg i{ display:none }

/* --- контур поля: линии горизонта --- */
html[data-season='tobiston'] .sbw{
  opacity:1;
  position:absolute;
  left:-10%;
  bottom:-4%;
  width:120%;
  height:70%;
  overflow:visible;
  fill:none;
  stroke-linecap:round;
  /* Слева чисто: там имя и подпись. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 30%, #000 100%);
}
html[data-season='tobiston'] .sbw path{
  vector-effect:non-scaling-stroke;
  stroke:#C9A961;
}
/* Видимость в пределах 0.08–0.16: линии должны угадываться, а не читаться. */
html[data-season='tobiston'] .sbw .w1{ stroke-width:1.4; opacity:.16 }
html[data-season='tobiston'] .sbw .w2{ stroke-width:1.2; opacity:.12 }
html[data-season='tobiston'] .sbw .w3{ stroke-width:1.2; opacity:.08 }

/* --- колосья --- */
html[data-season='tobiston'] .sbwheat{
  opacity:1;
  position:absolute;
  right:2%;
  bottom:0;
  width:min(46%, 320px);
  height:78%;
  overflow:visible;
}
html[data-season='tobiston'] .sbwheat .st{
  fill:none;
  stroke:#B08F4E;
  stroke-width:1.5;
  stroke-linecap:round;
  opacity:.55;
}
html[data-season='tobiston'] .sbwheat .gr{
  fill:#D9B769;
  opacity:.5;
}
/* Ближние колосья плотнее, дальние бледнее — так группа получает глубину,
   не прибавляя ни одной линии. */
html[data-season='tobiston'] .sbwheat .e1 .gr{ fill:#AFAF6E; opacity:.42 }
html[data-season='tobiston'] .sbwheat .e2 .gr{ opacity:.46 }
html[data-season='tobiston'] .sbwheat .e4 .gr{ opacity:.58 }
html[data-season='tobiston'] .sbwheat .e5 .gr{ fill:#C9A961; opacity:.4 }
/* Качаются от основания стебля, а не от середины: колос растёт из земли. */
html[data-season='tobiston'] .sbwheat .ear{
  transform-box:fill-box;
  transform-origin:50% 100%;
}

/* --- свет --- */
html[data-season='tobiston'] .sbsun{
  opacity:1;
  position:absolute;
  right:-8%;
  top:-40%;
  width:58%;
  height:150%;
  background:radial-gradient(closest-side,
    rgba(255, 219, 150, .55) 0%,
    rgba(255, 226, 170, .22) 45%,
    rgba(255, 226, 170, 0) 72%);
  /* Размытие поверх градиента: без него у пятна на светлом фоне всё-таки
     угадывается край — то есть круг, которого здесь быть не должно. */
  filter:blur(10px);
}

/* --- покой и наведение --------------------------------------------------
   В покое колосья стоят. Движение — только когда человек навёл курсор на
   блок: один короткий наклон и возврат. Не бесконечное качание: блок с
   вечно шевелящейся травой отвлекает от того, ради чего человек пришёл. */
@media (hover:hover) and (pointer:fine){
  html[data-season='tobiston'] .sd-hero:hover .sbwheat .ear,
  html[data-season='tobiston'] .tc-hero:hover .sbwheat .ear,
  html[data-season='tobiston'] .om-hero:hover .sbwheat .ear{
    animation:sbSway 1.5s cubic-bezier(.36,.07,.28,1) 1 both;
  }
  html[data-season='tobiston'] .sbwheat .e2{ animation-delay:.08s }
  html[data-season='tobiston'] .sbwheat .e3{ animation-delay:.16s }
  html[data-season='tobiston'] .sbwheat .e4{ animation-delay:.24s }
  html[data-season='tobiston'] .sbwheat .e5{ animation-delay:.32s }

  /* Тёплый блик проходит понизу — как солнце по полю. */
  html[data-season='tobiston'] .sd-hero:hover .sbsun,
  html[data-season='tobiston'] .tc-hero:hover .sbsun,
  html[data-season='tobiston'] .om-hero:hover .sbsun{
    animation:sbSunSweep 1.6s ease-in-out 1 both;
  }
}

/* Наклон на три градуса и подъём на три пикселя — и обратно в ноль.
   Больше выглядит ветром, а не летним днём. */
@keyframes sbSway{
  0%   { transform:rotate(0deg) translateY(0) }
  35%  { transform:rotate(-3deg) translateY(-3px) }
  70%  { transform:rotate(3deg) translateY(-1px) }
  100% { transform:rotate(0deg) translateY(0) }
}
@keyframes sbSunSweep{
  0%   { transform:translateX(0) }
  50%  { transform:translateX(-6%) }
  100% { transform:translateX(0) }
}

/* --- узкий экран ---
   Колосьев меньше и они бледнее: на телефоне композиция занимает большую
   долю блока, и та же плотность читается зарослями. */
@media (max-width:700px){
  html[data-season='tobiston'] .sbwheat{ width:min(58%, 220px); height:64% }
  html[data-season='tobiston'] .sbwheat .e1,
  html[data-season='tobiston'] .sbwheat .e5{ display:none }
  html[data-season='tobiston'] .sbwheat .gr{ opacity:.38 }
  html[data-season='tobiston'] .sbsun{ opacity:.7 }
}

/* ============================== ВЕСНА =====================================
   Не волны — рост. Тонкие дуги, будто молодой побег тянется вверх. Приём
   намеренно другой: лето обязано оставаться узнаваемым сезоном, а не
   «тем же самым, только зеленее». */
html[data-season='bahor'] .sbg i{
  right:-10%;
  width:70%;
  height:150%;
  border:2px solid var(--season-wave);
  border-color:var(--season-wave) transparent transparent transparent;
  border-radius:50%;
  background:none;
  filter:blur(1px);
  animation:sbgRise var(--sbg-d, 18s) ease-in-out infinite alternate;
  animation-delay:var(--sbg-delay, 0s);
}
html[data-season='bahor'] .sbg i:nth-child(1){ top:-40%; opacity:.50; --sbg-d:14s; --sbg-delay:-3s }
html[data-season='bahor'] .sbg i:nth-child(2){ top:-22%; opacity:.38; --sbg-d:17s; --sbg-delay:-7s }
html[data-season='bahor'] .sbg i:nth-child(3){ top:-4%;  opacity:.26; --sbg-d:20s; --sbg-delay:-11s }
html[data-season='bahor'] .sbg i:nth-child(4){ top:14%;  opacity:.18; --sbg-d:23s; --sbg-delay:-15s }

@keyframes sbgRise{
  0%   { transform:translate3d(0, 3%, 0) rotate(-2deg) }
  100% { transform:translate3d(0, -3%, 0) rotate(2deg) }
}

/* ============================== ОСЕНЬ =====================================
   Полосы жнивья: те же мягкие ленты, что летом, но глуше, реже и почти без
   свечения. Оранжевого перегруза здесь нет намеренно — цвет берётся из
   осенней палитры ФАСЛ, а она приглушённая. */
html[data-season='tiramoh'] .sbg i{
  left:-20%;
  width:130%;
  height:44%;
  border-radius:48% 52% 50% 50% / 58% 52% 48% 42%;
  background:linear-gradient(96deg, transparent 0%, var(--season-wave) 62%, transparent 100%);
  filter:blur(30px);
  animation:sbgFlow var(--sbg-d, 20s) ease-in-out infinite alternate;
  animation-delay:var(--sbg-delay, 0s);
}
html[data-season='tiramoh'] .sbg i:nth-child(1){ top:44%; opacity:.34; --sbg-d:17s; --sbg-delay:-4s }
html[data-season='tiramoh'] .sbg i:nth-child(2){ top:62%; opacity:.24; --sbg-d:21s; --sbg-delay:-9s }
html[data-season='tiramoh'] .sbg i:nth-child(3){ top:76%; opacity:.16; --sbg-d:24s; --sbg-delay:-14s }
html[data-season='tiramoh'] .sbg i:nth-child(4){ display:none }

/* ============================== ЗИМА ======================================
   Морозные отсветы: широкие холодные пятна с сильным размытием, почти
   неподвижные. Синим заливать весь кабинет нельзя — это только отсвет. */
html[data-season='zimiston'] .sbg i{
  left:-15%;
  width:120%;
  height:70%;
  border-radius:50%;
  background:radial-gradient(60% 70% at 70% 40%, var(--season-wave) 0%, transparent 70%);
  filter:blur(34px);
  animation:sbgDrift var(--sbg-d, 26s) ease-in-out infinite alternate;
  animation-delay:var(--sbg-delay, 0s);
}
html[data-season='zimiston'] .sbg i:nth-child(1){ top:10%; opacity:.46; --sbg-d:22s; --sbg-delay:-5s }
html[data-season='zimiston'] .sbg i:nth-child(2){ top:40%; opacity:.30; --sbg-d:26s; --sbg-delay:-11s }
html[data-season='zimiston'] .sbg i:nth-child(3){ display:none }
html[data-season='zimiston'] .sbg i:nth-child(4){ display:none }

@keyframes sbgDrift{
  0%   { transform:translate3d(-4%, 0, 0) }
  100% { transform:translate3d( 4%, 2%, 0) }
}

/* --------------------------------------------------------- узкие экраны --
   Волн становится меньше, а движение — спокойнее: на телефоне слой занимает
   больше доли экрана, и то же движение читается суетой. Прячем лишние слои,
   а не уменьшаем их: полупрозрачные полосы поверх друг друга на маленьком
   экране просто мутят фон. */
@media (max-width:900px){
  .sbg i:nth-child(4){ display:none }
}
@media (max-width:600px){
  .sbg i:nth-child(3){ display:none }
  .sbg i{ animation-duration:calc(var(--sbg-d, 18s) * 1.4) !important; filter:blur(20px) }
  html[data-season='bahor'] .sbg i{ filter:blur(1px) }
}

/* ------------------------------------------------- спокойное движение ----
   Человек, попросивший систему уменьшить анимацию, просит об этом всерьёз.
   Слой остаётся — он часть оформления, — но замирает. */
@media (prefers-reduced-motion: reduce){
  .sbg i{ animation:none !important; transform:none !important }
}

/* Строки, гасившей летние точки, здесь больше нет: точки удалены в самих
   слоях, которые их рисовали (stud-dash.js, omor-dash.js, fasl.css).
   Прятать чужое из своего файла — значит оставить причину на месте. */