/* ============ Bath Synth: общие стили и сетка страницы ============ */
@import url('components/button.css');
@import url('components/slider.css');
@import url('components/knob.css');
@import url('components/radio.css');
@import url('components/towel-rail.css');
@import url('components/washer.css');
@import url('components/bottle.css');
@import url('components/bathtub.css');
@import url('components/sequencer.css');
@import url('components/curtain.css');

:root {
  /* палитра из макета */
  --grey-100: #ebebeb;
  --grey-200: #e0e0e0;
  --grey-300: #cfcfcf;
  --grey-400: #c4c4c4;
  --grey-500: #8d8d8d;
  --ink: #383838;
  --ink-soft: #4a4a4a;

  --blue: #b6d0ff;
  --pink: #fb9fe0;
  --green: #bdff5a;

  --water: #82d8ff;
  --skin: #ffcfcf;
  --skin-shade: #ffaaa8;
  --duck: #ffe066;

  /* шрифты (подключены в <head> через Google Fonts, есть запасные) */
  --font-label: 'Syne', 'Arial Black', system-ui, sans-serif;
  --font-hand: 'Mansalva', 'Comic Sans MS', cursive;
  --font-script: 'Cedarville Cursive', 'Brush Script MT', cursive;
}

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

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  background: #1e57c8;
  color: var(--ink);
  font-family: var(--font-label);
}

@keyframes ani-body {
  0% {
    --c-0: hsla(289, 100%, 73%, 1);
    --x-0: 85%;
    --y-0: 80%;
    --s-start-0: 9%;
    --s-end-0: 55%;
    --c-1: hsla(191, 57%, 65%, 1);
    --x-1: 60%;
    --y-1: 24%;
    --s-start-1: 5%;
    --s-end-1: 72%;
    --c-2: hsla(240, 100%, 63%, 1);
    --x-2: 13%;
    --y-2: 82%;
    --s-start-2: 5%;
    --s-end-2: 52%;
    --c-3: hsla(275, 100%, 76%, 1);
    --x-3: 24%;
    --y-3: 7%;
    --s-start-3: 13%;
    --s-end-3: 125%;
    --c-4: hsla(257, 96%, 83%, 1);
    --x-4: 24%;
    --y-4: 7%;
    --s-start-4: 13%;
    --s-end-4: 125%;
  }

  100% {
    --c-0: hsla(173, 100%, 78%, 1);
    --x-0: 31%;
    --y-0: 94%;
    --s-start-0: 9%;
    --s-end-0: 55%;
    --c-1: hsla(219, 100%, 68%, 1);
    --x-1: 2%;
    --y-1: 25%;
    --s-start-1: 5%;
    --s-end-1: 72%;
    --c-2: hsla(297, 100%, 65%, 1);
    --x-2: 98%;
    --y-2: 20%;
    --s-start-2: 5%;
    --s-end-2: 52%;
    --c-3: hsla(182, 100%, 80%, 1);
    --x-3: 95%;
    --y-3: 92%;
    --s-start-3: 13%;
    --s-end-3: 68%;
    --c-4: hsla(244, 71%, 68%, 1);
    --x-4: 95%;
    --y-4: 92%;
    --s-start-4: 13%;
    --s-end-4: 68%;
  }
}

@property --c-0 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(289, 100%, 73%, 1);
}

@property --x-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 85%;
}

@property --y-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 80%;
}

@property --s-start-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 9%;
}

@property --s-end-0 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 55%;
}

@property --c-1 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(191, 57%, 65%, 1);
}

@property --x-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 60%;
}

@property --y-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 24%;
}

@property --s-start-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 5%;
}

@property --s-end-1 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 72%;
}

@property --c-2 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(240, 100%, 63%, 1);
}

@property --x-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 13%;
}

@property --y-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 82%;
}

@property --s-start-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 5%;
}

@property --s-end-2 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 52%;
}

@property --c-3 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(275, 100%, 76%, 1);
}

@property --x-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 24%;
}

@property --y-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 7%;
}

@property --s-start-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 13%;
}

@property --s-end-3 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 125%;
}

@property --c-4 {
  syntax: '<color>';
  inherits: false;
  initial-value: hsla(257, 96%, 83%, 1);
}

@property --x-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 24%;
}

@property --y-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 7%;
}

@property --s-start-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 13%;
}

@property --s-end-4 {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 125%;
}

body {
  --c-0: hsla(289, 100%, 73%, 1);
  --x-0: 85%;
  --y-0: 80%;
  --c-1: hsla(191, 57%, 65%, 1);
  --x-1: 60%;
  --y-1: 24%;
  --c-2: hsla(240, 100%, 63%, 1);
  --x-2: 13%;
  --y-2: 82%;
  --c-3: hsla(275, 100%, 76%, 1);
  --x-3: 24%;
  --y-3: 7%;
  --c-4: hsla(257, 96%, 83%, 1);
  --x-4: 24%;
  --y-4: 7%;
  background-color: hsla(221, 100%, 62%, 1);
  background-image:
    radial-gradient(
      circle at var(--x-0) var(--y-0),
      var(--c-0) var(--s-start-0),
      transparent var(--s-end-0)
    ),
    radial-gradient(
      circle at var(--x-1) var(--y-1),
      var(--c-1) var(--s-start-1),
      transparent var(--s-end-1)
    ),
    radial-gradient(
      circle at var(--x-2) var(--y-2),
      var(--c-2) var(--s-start-2),
      transparent var(--s-end-2)
    ),
    radial-gradient(
      circle at var(--x-3) var(--y-3),
      var(--c-3) var(--s-start-3),
      transparent var(--s-end-3)
    ),
    radial-gradient(
      circle at var(--x-4) var(--y-4),
      var(--c-4) var(--s-start-4),
      transparent var(--s-end-4)
    );
  animation: ani-body 5s linear infinite alternate;
  background-blend-mode: normal, normal, normal, normal, normal;
  will-change: transform, opacity;
  contain: paint;
}

/* элемент скрыт визуально, но остаётся в DOM: на нём работает JS и клавиатура */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- сетка: левая колонка / центр / правая колонка ---------- */
.BathSynth {
  display: grid;
  grid-template-columns: 1fr 1.97fr 1fr; /* пропорции макета: 460 : 905 : 455 */
  gap: 2%;
  align-items: start;
  /* max-width: 1280px; */
  /* margin: 0 auto; */
  /* padding: clamp(16px, 5vw, 64px); */

  padding: 1vw;
  margin: 5vw;
  border-radius: 1vw;

  background-color: #ffffff;
  background-image:
    linear-gradient(to right, var(--grey-100) 0.1vw, transparent 0.1vw),
    linear-gradient(to bottom, var(--grey-100) 0.1vw, transparent 0.1vw);
  background-size: 1vw 1vw;
}

.Col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.Col--center .Drums {
  margin-top: 2.4%;
}

/* ---------- мобильная раскладка: одна колонка ---------- */
/* @media (max-width: 860px) {
  .BathSynth {
    display: flex;
    flex-direction: column;
    gap: 8vw;
  }
  .Col {
    display: contents;
  }

  .Washer {
    order: 1;
  }
  .TowelRail {
    order: 2;
  }
  .Bath {
    order: 3;
  }
  .Drums {
    order: 4;
    margin-top: 0 !important;
  }
  .Curtain {
    order: 5;
  }

  .TowelRail,
  .Washer,
  .Curtain {
    width: min(100%, 420px);
    margin-inline: auto;
  }
  .Washer {
    margin-top: 8vw;
  }
} */

/* #checkered-background {
  background-color: #383838;
  width: fit-content;
} */