/* ==========================================================================
   Полянка пушистых хомяков — визуальный слой
   Один источник света (солнце сверху справа): всё тёплое справа, всё
   холодное и мягкое слева. Глубина строится атмосферной перспективой:
   дальние планы светлее, менее насыщенные и ближе к цвету неба.
   ========================================================================== */

:root {
  /* небо */
  --sky-zenith: #46afe6;
  --sky-mid:    #90d8f2;
  --sky-low:    #d7f0f6;
  --sky-horizon:#f5f3dd;

  /* свет */
  --sun-core: #fffbe8;
  --sun:      #ffd76b;
  --sun-edge: #f8ad49;
  --sun-x: 80%;
  --sun-y: 15%;
  --rim:   rgba(255, 248, 216, .62);
  --glow:  rgba(255, 214, 120, .38);

  /* зелень: от дальнего плана к ближнему */
  --g-far:   #c6dd9f;
  --g-far2:  #a8cf80;
  --g-mid:   #86c263;
  --g-mid2:  #64a94a;
  --g-near:  #4c9440;
  --g-deep:  #37772f;
  --g-shade: #2b6028;

  /* бумага и чернила */
  --paper:   #fdf5e4;
  --paper-2: #f5e8cf;
  --ink:       #3d2b1c;
  --ink-soft:  #7b6549;
  --ink-faint: #ab937a;

  /* акценты */
  --petal:   #ff9ab5;
  --petal-2: #bfa6ff;
  --petal-3: #fffdf6;

  --on-sky: #235618;
  --shade:  rgba(40, 70, 30, .22);

  /* Comfortaa и Nunito выбраны в том числе потому, что у обоих есть
     кириллица — иначе заголовок молча уезжал бы в системный шрифт. */
  --font-display: "Comfortaa", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-text: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  --veil: 0;              /* плотность вечерней вуали */
}

/* Вечер: тот же мир на закате. Меняются только токены. */
@media (prefers-color-scheme: dark) {
  :root {
    --sky-zenith: #24386a;
    --sky-mid:    #6a6aa2;
    --sky-low:    #d08d7c;
    --sky-horizon:#f6c586;

    --sun-core: #fff1cf;
    --sun:      #ffb257;
    --sun-edge: #ef6f3d;
    --sun-y: 26%;
    --rim:  rgba(255, 216, 160, .55);
    --glow: rgba(255, 150, 80, .34);

    --g-far:   #8ba586;
    --g-far2:  #759274;
    --g-mid:   #5c8560;
    --g-mid2:  #486d4e;
    --g-near:  #37583e;
    --g-deep:  #29422f;
    --g-shade: #1e3224;

    --paper:   #2b2219;
    --paper-2: #221a13;
    --ink:       #f5e8d2;
    --ink-soft:  #cbb89e;
    --ink-faint: #9c8871;

    --on-sky: #fdf0d6;
    --shade: rgba(10, 14, 20, .42);
    --veil: .32;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper-2);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.sprite { position: absolute; }

.ico {
  width: 1em; height: 1em;
  flex: none;
  vertical-align: -.14em;
}

/* ==========================  СЦЕНА  ====================================== */

.scene {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg,
      var(--sky-zenith) 0%,
      var(--sky-mid)   38%,
      var(--sky-low)   68%,
      var(--sky-horizon) 100%);
}

/* вечерняя вуаль поверх всей сцены, включая SVG-хомяков */
.scene::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: var(--veil);
  background: linear-gradient(180deg, #2a2c5e 0%, #7c4a5c 55%, #c9743c 100%);
  mix-blend-mode: multiply;
}

.sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* --- солнце --------------------------------------------------------------- */

.sunlight {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--sun-x) var(--sun-y),
    var(--glow) 0%, rgba(255, 214, 120, .12) 34%, transparent 62%);
}

.sun {
  position: absolute;
  left: var(--sun-x); top: var(--sun-y);
  width: clamp(110px, 12vw, 168px);
  aspect-ratio: 1;
  translate: -50% calc(-50% + var(--sy, 0) * .10px);
}
.sun .disc,
.sun .corona { position: absolute; inset: 0; border-radius: 50%; }

.sun .disc {
  background: radial-gradient(circle at 34% 32%, var(--sun-core) 0%, var(--sun) 58%, var(--sun-edge) 100%);
  box-shadow: 0 0 48px 18px rgba(255, 215, 110, .5), 0 0 120px 60px rgba(255, 210, 110, .22);
  animation: breathe 7s ease-in-out infinite;
}
.sun .corona {
  inset: -52%;
  background: repeating-conic-gradient(from 0deg,
    var(--rim) 0deg 2.4deg, transparent 2.4deg 26deg);
  -webkit-mask: radial-gradient(circle, transparent 47%, #000 50%, transparent 92%);
          mask: radial-gradient(circle, transparent 47%, #000 50%, transparent 92%);
  animation: spin 90s linear infinite;
  opacity: .8;
}

/* --- облака: три доли, подсвеченные сверху справа ------------------------- */

.clouds { position: absolute; inset: 0; translate: 0 calc(var(--sy, 0) * .05px); }

.cloud {
  position: absolute;
  width: 210px; height: 56px;
  animation: drift linear infinite;
  filter: drop-shadow(0 10px 16px rgba(110, 160, 190, .22));
}
.cloud i {
  position: absolute; bottom: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 62% 26%, #fff 0%, #fff 58%, #e4eef6 100%);
}
.cloud i:nth-child(1) { left: 0;   width: 108px; height: 108px; }
.cloud i:nth-child(2) { left: 62px; width: 148px; height: 148px; }
.cloud i:nth-child(3) { right: 0;  width: 96px;  height: 96px; }

.cloud.c1 { top: 11vh; left: -240px; animation-duration: 104s; opacity: .92; }
.cloud.c2 { top: 21vh; left: -280px; scale: .66; animation-duration: 138s; animation-delay: -34s; opacity: .8; }
.cloud.c3 { top:  4vh; left: -320px; scale: 1.2;  animation-duration: 170s; animation-delay: -92s; opacity: .62; }
.cloud.c4 { top: 29vh; left: -260px; scale: .48; animation-duration: 190s; animation-delay: -140s; opacity: .5; }

/* --- птицы и бабочки ------------------------------------------------------ */

.birds { position: absolute; inset: 0; color: rgba(60, 80, 96, .42); }
.bird {
  position: absolute;
  width: 34px; height: 12px;
  animation: glide linear infinite, flap 1.6s ease-in-out infinite;
}
.bird.b1 { top: 16vh; animation-duration: 58s, 1.6s; animation-delay: -6s, 0s; }
.bird.b2 { top: 20vh; width: 24px; animation-duration: 74s, 2.1s; animation-delay: -30s, -.5s; opacity: .7; }

.butterfly {
  position: absolute;
  width: 22px; height: 18px;
  animation: flutter 26s linear infinite;
}
.butterfly i {
  position: absolute; top: 0;
  width: 11px; height: 18px;
  border-radius: 62% 38% 50% 50%;
  background: var(--petal-2);
  animation: wing .26s ease-in-out infinite alternate;
}
.butterfly i:first-child { left: 0; transform-origin: right center; }
.butterfly i:last-child  { right: 0; transform-origin: left center; background: var(--petal); }
.butterfly.f1 { top: 44vh; animation-delay: -5s; }
.butterfly.f2 { top: 58vh; scale: .78; animation-delay: -17s; animation-duration: 34s; }

/* --- холмы (SVG генерирует script.js) ------------------------------------ */

.ridges { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ridge {
  position: absolute; left: 0; bottom: 0;
  width: 100%;
  display: block;
}
.ridge.r1 { translate: 0 calc(var(--sy, 0) *  .03px); }
.ridge.r2 { translate: 0 calc(var(--sy, 0) * -.02px); }
.ridge.r3 { translate: 0 calc(var(--sy, 0) * -.05px); }
.ridge.r4 { translate: 0 calc(var(--sy, 0) * -.09px); }

/* дымка у горизонта — то, что делает дальние холмы дальними */
.haze {
  position: absolute; left: 0; right: 0;
  bottom: 22vh; height: 34vh;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sky-horizon) 72%, transparent) 0%,
    transparent 100%);
}

/* ==========================  ЗАГОЛОВОК  ================================== */

.masthead {
  position: relative;
  z-index: 4;
  grid-row: 1;
  text-align: center;
  padding: clamp(2.6rem, 9vh, 6.5rem) 6vw 0;
}

h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.2rem + 5.6vw, 5rem);
  line-height: .96;
  letter-spacing: -.02em;
  color: var(--paper);
  text-shadow:
    0 2px 0 rgba(120, 90, 50, .22),
    0 6px 0 rgba(60, 110, 45, .28),
    0 18px 34px rgba(30, 70, 25, .3);
}

.lede {
  margin: clamp(.9rem, 2vh, 1.4rem) auto 0;
  max-width: 30ch;
  font-size: clamp(1rem, .94rem + .5vw, 1.35rem);
  font-weight: 600;
  color: var(--on-sky);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 0 18px rgba(255, 255, 255, .55);
}

/* ==========================  ХОМЯКИ  ===================================== */

.troupe {
  position: relative;
  z-index: 4;
  grid-row: 2;
  align-self: end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0rem, 2vw, 3rem);
  padding: 0 3vw clamp(6rem, 17vh, 12rem);
  /* двигается вместе с ближним холмом, иначе хомяки «отъезжают» от травы */
  translate: 0 calc(var(--sy, 0) * -.09px);
}

.hamster {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  position: relative;
  display: block;
  width: calc(clamp(112px, 15.5vw, 196px) * var(--scale, 1));
  translate: 0 calc(var(--lift, 0) * 1px);
  z-index: var(--z, 1);
  transform-origin: bottom center;
  animation: idle 3.6s ease-in-out infinite;
  animation-delay: var(--beat, 0s);
  /* дальние планы чуть теряют насыщенность — атмосферная перспектива */
  filter: saturate(var(--sat, 1)) brightness(var(--bri, 1));
  transition: filter .25s ease;
}
.hamster:hover { filter: saturate(calc(var(--sat, 1) + .04)) brightness(calc(var(--bri, 1) + .04)); }
.hamster:active { animation-play-state: paused; }
.hamster:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 8px;
  border-radius: 28px;
}
.hamster svg { display: block; width: 100%; height: auto; overflow: visible; }

/* подвижные части морды */
.hamster .ear-l,
.hamster .ear-r,
.hamster .eye-lid,
.hamster .cheek,
.hamster .nose { transform-box: fill-box; transform-origin: center; }

.hamster .ear-l { transform-origin: 50% 88%; animation: ear-twitch 5.2s ease-in-out infinite; }
.hamster .ear-r { transform-origin: 50% 88%; animation: ear-twitch 5.2s ease-in-out infinite; animation-delay: -2.6s; }
.hamster .nose  { animation: sniff 2.3s ease-in-out infinite; }
.hamster .cheek { animation: chew 3.1s ease-in-out infinite; }
.hamster .eye-lid { animation: blink 6.4s steps(1, end) infinite; }
.hamster:nth-child(2) .eye-lid { animation-delay: -2.1s; }
.hamster:nth-child(3) .eye-lid { animation-delay: -4.3s; }
.hamster:nth-child(2) .cheek { animation-delay: -1s; }
.hamster:nth-child(3) .cheek { animation-delay: -2s; }

.hamster.hop { animation: hop .66s cubic-bezier(.3, -.4, .3, 1.5); }

/* мягкое кольцо-подсказка: гаснет после первого касания */
.hamster::before {
  content: "";
  position: absolute;
  left: 50%; bottom: 4%;
  width: 62%; aspect-ratio: 3 / 1;
  translate: -50% 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .8);
  animation: ping 2.6s ease-out infinite;
  animation-delay: var(--beat, 0s);
  pointer-events: none;
}
body.touched .hamster::before { display: none; }

/* --- реплика ------------------------------------------------------------- */

.bubble {
  position: absolute;
  left: 50%; bottom: 97%;
  translate: -50% 12px;
  scale: .82;
  max-width: 14ch;
  padding: .5rem .9rem;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  font-size: clamp(.82rem, .78rem + .25vw, 1rem);
  line-height: 1.25;
  text-align: center;
  border-radius: 18px 18px 18px 6px;
  box-shadow: 0 12px 26px var(--shade);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease,
              translate .26s cubic-bezier(.2, 1.5, .4, 1),
              scale .26s cubic-bezier(.2, 1.5, .4, 1);
}
.bubble::after {
  content: "";
  position: absolute; left: 22%; top: 100%;
  border: 8px solid transparent;
  border-top-color: var(--paper);
  border-right-width: 2px;
}
.bubble.show { opacity: 1; translate: -50% 0; scale: 1; }

.name-tag {
  display: block;
  margin-top: .5rem;
  font-weight: 800;
  font-size: clamp(.82rem, .78rem + .25vw, 1rem);
  letter-spacing: .01em;
  color: var(--on-sky);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}

/* --- строка состояния ---------------------------------------------------- */

.status {
  position: relative;
  z-index: 4;
  grid-row: 3;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 clamp(1.4rem, 5vh, 3rem);
  padding: .5rem 1.1rem;
  max-width: min(92vw, 46ch);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  border: 1px solid color-mix(in srgb, var(--g-deep) 18%, transparent);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: clamp(.86rem, .82rem + .25vw, 1rem);
  text-align: center;
  box-shadow: 0 8px 22px var(--shade);
  transition: color .3s ease;
}
.status .ico { color: var(--g-mid2); }
.status[data-state="count"] { color: var(--ink); font-weight: 700; }
.status[data-state="count"] .ico { color: var(--sun-edge); }
.status b { font-variant-numeric: tabular-nums; }

/* --- трава, цветы, пыльца (генерирует script.js) ------------------------- */

.groundcover {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 26vh;
  z-index: 5;
  pointer-events: none;
  translate: 0 calc(var(--sy, 0) * -.13px);
}

.blade {
  position: absolute; bottom: 0;
  transform-origin: bottom center;
  border-radius: 50% 50% 3px 3px;
  animation: sway 4.4s ease-in-out infinite;
}

.flower {
  position: absolute; bottom: 0;
  transform-origin: bottom center;
  animation: sway 6s ease-in-out infinite;
}
.flower svg { display: block; overflow: visible; }

.pollen {
  position: absolute; bottom: -12px;
  width: 7px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--rim);
  box-shadow: 0 0 6px 3px rgba(255, 250, 220, .42);
  animation: rise linear infinite;
}

.seed-pop {
  position: fixed;
  z-index: 20;
  width: 22px; height: 22px;
  color: #7a5330;
  pointer-events: none;
  transition: transform .85s cubic-bezier(.2, .8, .3, 1), opacity .85s ease;
}

/* ==========================  ПОЛЕВЫЕ ЗАМЕТКИ  ============================ */

.notes {
  position: relative;
  padding: clamp(3.5rem, 10vh, 7rem) 6vw clamp(3rem, 8vh, 6rem);
  background:
    radial-gradient(120% 60% at 18% 0%, color-mix(in srgb, var(--sun) 14%, transparent), transparent 60%),
    var(--paper);
}
/* край травы, нависающий над бумагой */
.notes::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 22px;
  background: var(--g-shade);
  -webkit-mask: radial-gradient(14px 22px at 14px 0, #000 98%, transparent) repeat-x 0 0 / 28px 22px;
          mask: radial-gradient(14px 22px at 14px 0, #000 98%, transparent) repeat-x 0 0 / 28px 22px;
}

.notes h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.9rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--ink);
}
.notes-lede {
  margin: .7rem 0 clamp(2rem, 5vh, 3.2rem);
  max-width: 44ch;
  color: var(--ink-soft);
}

.note-list {
  margin: 0;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1.8rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
}

.note { border-top: 1px solid color-mix(in srgb, var(--ink-faint) 42%, transparent); padding-top: 1rem; }
.note dt {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
  font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem);
  color: var(--ink);
}
.note dt .ico { color: var(--sun-edge); width: .85em; height: .85em; }
.note dd { margin: .35rem 0 0; max-width: 46ch; color: var(--ink-soft); }

footer {
  padding: clamp(2rem, 6vh, 3.5rem) 6vw;
  background: var(--g-shade);
  color: color-mix(in srgb, var(--paper) 80%, var(--g-far));
  text-align: center;
  font-size: .95rem;
}
footer p { margin: 0; }

/* ==========================  БРЕЙКПОЙНТЫ  ================================ */

/* 375px и уже: хомяки в ряд, но плотнее; заголовок не давит */
@media (max-width: 420px) {
  .troupe { gap: 0; padding-bottom: clamp(5rem, 14vh, 8rem); }
  .bubble { max-width: 10ch; }
  .status { padding: .45rem .85rem; }
}

/* 768px: заметки в две колонки, ширина текста под чтение */
@media (min-width: 768px) {
  .note-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .note.wide dd { max-width: 40ch; }
}

/* 1024px: композиция дышит, дальние хомяки уходят дальше */
@media (min-width: 1024px) {
  .masthead { padding-top: clamp(4rem, 12vh, 8rem); }
  .notes { padding-left: 10vw; padding-right: 10vw; }
}

/* 1440px+: держим текст в читаемой мере, сцену не растягиваем без нужды */
@media (min-width: 1440px) {
  .notes { padding-left: 0; padding-right: 0; }
  .notes h2, .notes-lede, .note-list { max-width: 1100px; margin-left: auto; margin-right: auto; }
  .notes-lede { margin-bottom: clamp(2rem, 5vh, 3.2rem); }
}

/* ==========================  АНИМАЦИИ  =================================== */

@keyframes breathe { 50% { scale: 1.045; } }
@keyframes spin    { to { rotate: 360deg; } }
@keyframes drift   { to { translate: calc(100vw + 460px) 0; } }
@keyframes glide   { from { translate: -12vw 0; } to { translate: 112vw -6vh; } }
@keyframes flap    { 0%, 100% { scale: 1 1; } 50% { scale: 1 .55; } }

@keyframes sway {
  0%, 100% { rotate: -5deg; }
  50%      { rotate: 6deg; }
}

@keyframes idle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-4px) scaleY(1.018); }
}

@keyframes hop {
  0%   { transform: translateY(0) scale(1, 1); }
  22%  { transform: translateY(-40px) scale(.93, 1.09); }
  52%  { transform: translateY(0) scale(1.07, .91); }
  74%  { transform: translateY(-9px) scale(1, 1); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes ear-twitch {
  0%, 86%, 100% { rotate: 0deg; }
  90% { rotate: -12deg; }
  95% { rotate: 7deg; }
}

@keyframes sniff {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50%      { transform: translateY(1.4px) scaleX(1.06); }
}

@keyframes chew {
  0%, 70%, 100% { transform: scale(1); }
  78% { transform: scale(1.06, .96); }
  88% { transform: scale(.97, 1.04); }
}

@keyframes blink {
  0%, 93%, 100% { transform: scaleY(0); }
  95%, 97%      { transform: scaleY(1); }
}

@keyframes rise {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translate(70px, -78vh) rotate(240deg); opacity: 0; }
}

@keyframes flutter {
  0%   { transform: translate(-10vw, 0) rotate(4deg); }
  25%  { transform: translate(24vw, -14vh) rotate(-7deg); }
  50%  { transform: translate(54vw, 5vh) rotate(6deg); }
  75%  { transform: translate(82vw, -10vh) rotate(-5deg); }
  100% { transform: translate(112vw, 3vh) rotate(3deg); }
}

@keyframes wing {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(74deg); }
}

@keyframes ping {
  0%       { opacity: 0; scale: .7; }
  25%      { opacity: .85; }
  70%, 100%{ opacity: 0; scale: 1.5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hamster::before { display: none; }
}