/* Базовые стили для фонов showroom-*.
   Важно: класс showroom-* часто НЕ первый в списке (например: "showcase-page showroom-5"),
   поэтому не используем [class^="showroom-"].
   Не задаём height: 100% на все [class*="showroom-"]: иначе превью витрины на /user/settings
   (и др.) тянут высоту колонки и визуально «поднимают» футер к середине экрана. */
[class*="showroom-"] {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Публичная страница витрины: фон на всю высоту viewport при малом контенте */
.showcase-page[class*="showroom-"] {
  min-height: 100vh;
}

/* Общие стили для псевдоэлементов с частицами */
[class*="showroom-"]::before,
[class*="showroom-"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: blur(0.3px); /* лёгкое свечение частиц */
}

/* ============================================= */
/* 1. Светлый шоурум (Light Showroom) */
/* ============================================= */
.showroom-1 {
  /* Основные слои: стены/пол, световые пятна, анимированные лучи, лёгкий шум */
  background:
    linear-gradient(180deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 200, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200, 230, 255, 0.3) 0%, transparent 50%),
    repeating-linear-gradient(45deg, rgba(255, 255, 230, 0.2) 0px, rgba(255, 255, 230, 0.2) 10px, transparent 10px, transparent 30px),
    repeating-radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.02) 0px, transparent 2px);
  background-blend-mode: overlay, normal, normal, normal, normal;
  animation: raysMove1 20s linear infinite;
}

@keyframes raysMove1 {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
  100% { background-position: 100% 100%, 0% 0%, 0% 0%, 100% 100%, 0% 0%; }
}

.showroom-1::before {
  /* Первый слой частиц (тёплые, движутся вправо-вниз) */
  box-shadow:
    12px 24px 0 1px rgba(255, 255, 200, 0.9),
    37px 83px 0 1px rgba(255, 255, 255, 0.8),
    56px 42px 0 2px rgba(255, 240, 180, 0.7),
    78px 15px 0 1px rgba(255, 255, 210, 0.9),
    94px 67px 0 1px rgba(230, 255, 230, 0.8),
    120px 31px 0 2px rgba(255, 250, 200, 0.7),
    145px 88px 0 1px rgba(255, 255, 170, 0.9),
    168px 53px 0 1px rgba(200, 255, 200, 0.8),
    192px 76px 0 2px rgba(255, 245, 190, 0.7),
    215px 22px 0 1px rgba(255, 255, 220, 0.9),
    238px 95px 0 1px rgba(240, 255, 240, 0.8),
    262px 48px 0 2px rgba(255, 235, 170, 0.7),
    287px 14px 0 1px rgba(255, 255, 200, 0.9),
    305px 79px 0 1px rgba(210, 255, 210, 0.8),
    329px 36px 0 2px rgba(255, 250, 180, 0.7);
  animation: starsDrift1 30s linear infinite;
}

.showroom-1::after {
  /* Второй слой частиц (холодные, движутся влево-вверх) */
  box-shadow:
    8px 42px 0 1px rgba(200, 230, 255, 0.8),
    29px 77px 0 1px rgba(210, 240, 255, 0.9),
    51px 19px 0 2px rgba(180, 220, 255, 0.7),
    73px 58px 0 1px rgba(190, 225, 255, 0.8),
    96px 81px 0 1px rgba(220, 245, 255, 0.9),
    118px 34px 0 2px rgba(170, 210, 255, 0.7),
    140px 62px 0 1px rgba(200, 235, 255, 0.8),
    162px 93px 0 1px rgba(230, 250, 255, 0.9),
    185px 27px 0 2px rgba(160, 200, 255, 0.7),
    207px 70px 0 1px rgba(210, 240, 255, 0.8),
    229px 44px 0 1px rgba(190, 220, 255, 0.9),
    251px 88px 0 2px rgba(180, 215, 255, 0.7),
    274px 11px 0 1px rgba(200, 235, 255, 0.8),
    296px 55px 0 1px rgba(220, 245, 255, 0.9),
    318px 38px 0 2px rgba(170, 205, 255, 0.7);
  animation: starsDrift2 45s linear infinite;
}

@keyframes starsDrift1 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(20px, -10px); }
}

@keyframes starsDrift2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-15px, 5px); }
}

/* ============================================= */
/* 2. Кремовый шоурум (Cream Showroom) */
/* ============================================= */
.showroom-2 {
  background:
    linear-gradient(180deg, #fff3e0 0%, #ffe0b2 40%, #ffcc80 100%),
    radial-gradient(circle at 30% 40%, rgba(255, 215, 150, 0.4) 0%, transparent 60%),
    radial-gradient(circle at 90% 20%, rgba(255, 200, 120, 0.3) 0%, transparent 50%),
    repeating-linear-gradient(-30deg, rgba(255, 235, 200, 0.25) 0px, rgba(255, 235, 200, 0.25) 15px, transparent 15px, transparent 40px),
    repeating-linear-gradient(90deg, rgba(160, 120, 80, 0.05) 0px, rgba(160, 120, 80, 0.05) 5px, transparent 5px, transparent 20px);
  background-blend-mode: overlay, normal, normal, screen, normal;
  animation: raysMove2 18s linear infinite alternate;
}

@keyframes raysMove2 {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, -50px 0%, 0% 0%; }
  100% { background-position: 100% 100%, 0% 0%, 0% 0%, 150px 100%, 0% 0%; }
}

.showroom-2::before {
  box-shadow:
    15px 30px 0 2px rgba(255, 220, 150, 0.9),
    42px 76px 0 1px rgba(255, 210, 130, 0.8),
    63px 28px 0 2px rgba(255, 200, 140, 0.7),
    89px 91px 0 1px rgba(255, 190, 120, 0.9),
    107px 44px 0 2px rgba(255, 215, 135, 0.8),
    134px 67px 0 1px rgba(255, 205, 125, 0.7),
    158px 13px 0 2px rgba(255, 225, 155, 0.9),
    182px 82px 0 1px rgba(255, 195, 115, 0.8),
    205px 39px 0 2px rgba(255, 220, 145, 0.7),
    229px 74px 0 1px rgba(255, 210, 130, 0.9),
    253px 56px 0 2px rgba(255, 200, 120, 0.8),
    276px 21px 0 1px rgba(255, 215, 140, 0.7),
    298px 87px 0 2px rgba(255, 205, 125, 0.9),
    324px 43px 0 1px rgba(255, 225, 150, 0.8),
    347px 68px 0 2px rgba(255, 190, 110, 0.7);
  animation: starsDrift3 25s linear infinite;
}

.showroom-2::after {
  box-shadow:
    9px 37px 0 1px rgba(255, 200, 180, 0.8),
    28px 84px 0 2px rgba(255, 190, 160, 0.7),
    47px 22px 0 1px rgba(255, 210, 170, 0.9),
    66px 59px 0 2px rgba(255, 180, 140, 0.8),
    85px 93px 0 1px rgba(255, 220, 190, 0.7),
    104px 41px 0 2px rgba(255, 200, 150, 0.9),
    123px 75px 0 1px rgba(255, 185, 130, 0.8),
    142px 18px 0 2px rgba(255, 215, 175, 0.7),
    161px 64px 0 1px rgba(255, 195, 145, 0.9),
    180px 30px 0 2px rgba(255, 205, 165, 0.8),
    199px 86px 0 1px rgba(255, 175, 125, 0.7),
    218px 52px 0 2px rgba(255, 225, 185, 0.9),
    237px 11px 0 1px rgba(255, 190, 155, 0.8),
    256px 47px 0 2px rgba(255, 215, 170, 0.7),
    275px 79px 0 1px rgba(255, 200, 140, 0.9);
  animation: starsDrift4 40s linear infinite;
}

@keyframes starsDrift3 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(10px, -20px); }
}

@keyframes starsDrift4 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-25px, 15px); }
}

/* ============================================= */
/* 3. Серый шоурум (Gray Showroom) */
/* ============================================= */
.showroom-3 {
  background:
    linear-gradient(180deg, #ced4da 0%, #adb5bd 45%, #868e96 100%),
    radial-gradient(circle at 40% 60%, rgba(220, 240, 255, 0.3) 0%, transparent 70%),
    radial-gradient(circle at 70% 25%, rgba(200, 220, 250, 0.2) 0%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 8px, transparent 8px, transparent 25px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 4px, transparent 4px, transparent 15px);
  background-blend-mode: overlay, normal, normal, soft-light, normal;
  animation: raysMove3 22s linear infinite reverse;
}

@keyframes raysMove3 {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, 0px 0%, 0% 0%; }
  100% { background-position: 200% 200%, 0% 0%, 0% 0%, 200px 200%, 0% 0%; }
}

.showroom-3::before {
  box-shadow:
    22px 45px 0 1px rgba(255, 255, 255, 0.7),
    48px 92px 0 2px rgba(220, 240, 255, 0.6),
    73px 27px 0 1px rgba(255, 255, 255, 0.8),
    97px 81px 0 2px rgba(200, 225, 255, 0.5),
    124px 38px 0 1px rgba(240, 250, 255, 0.7),
    149px 64px 0 2px rgba(210, 235, 255, 0.6),
    175px 19px 0 1px rgba(255, 255, 255, 0.8),
    201px 73px 0 2px rgba(190, 215, 250, 0.5),
    226px 56px 0 1px rgba(230, 245, 255, 0.7),
    252px 31px 0 2px rgba(205, 230, 255, 0.6),
    277px 84px 0 1px rgba(255, 255, 255, 0.8),
    303px 42px 0 2px rgba(180, 210, 245, 0.5),
    328px 67px 0 1px rgba(250, 255, 255, 0.7),
    354px 13px 0 2px rgba(195, 220, 255, 0.6),
    379px 78px 0 1px rgba(235, 250, 255, 0.8);
  animation: starsDrift5 35s linear infinite;
}

.showroom-3::after {
  box-shadow:
    14px 52px 0 2px rgba(200, 220, 240, 0.6),
    36px 29px 0 1px rgba(255, 255, 255, 0.8),
    59px 87px 0 2px rgba(180, 200, 230, 0.5),
    82px 43px 0 1px rgba(240, 250, 255, 0.7),
    105px 76px 0 2px rgba(210, 230, 250, 0.6),
    128px 14px 0 1px rgba(255, 255, 255, 0.9),
    151px 61px 0 2px rgba(170, 190, 220, 0.5),
    174px 34px 0 1px rgba(220, 240, 255, 0.7),
    197px 88px 0 2px rgba(190, 215, 245, 0.6),
    220px 23px 0 1px rgba(250, 255, 255, 0.8),
    243px 57px 0 2px rgba(200, 225, 250, 0.5),
    266px 91px 0 1px rgba(230, 245, 255, 0.7),
    289px 46px 0 2px rgba(185, 210, 240, 0.6),
    312px 18px 0 1px rgba(255, 255, 255, 0.9),
    335px 73px 0 2px rgba(215, 235, 255, 0.5);
  animation: starsDrift6 50s linear infinite;
}

@keyframes starsDrift5 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-30px, 0); }
}

@keyframes starsDrift6 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(20px, 20px); }
}

/* ============================================= */
/* 4. Тёмно-серый шоурум (Dark Gray Showroom) */
/* ============================================= */
.showroom-4 {
  background:
    linear-gradient(180deg, #343a40 0%, #212529 50%, #1a1e21 100%),
    radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 85% 70%, rgba(200, 220, 255, 0.2) 0%, transparent 70%),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.08) 0px, rgba(255, 255, 255, 0.08) 20px, transparent 20px, transparent 50px),
    radial-gradient(ellipse at 50% 80%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  background-blend-mode: overlay, normal, normal, screen, normal;
  animation: raysMove4 25s ease-in-out infinite;
}

@keyframes raysMove4 {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, 200% 0%, 0% 0%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%, -100% 200%, 0% 0%; }
}

.showroom-4::before {
  box-shadow:
    18px 63px 0 2px rgba(255, 255, 255, 0.8),
    44px 27px 0 1px rgba(210, 230, 255, 0.7),
    71px 94px 0 2px rgba(255, 255, 200, 0.6),
    97px 49px 0 1px rgba(190, 215, 255, 0.8),
    124px 82px 0 2px rgba(255, 255, 255, 0.7),
    152px 16px 0 1px rgba(220, 240, 255, 0.6),
    179px 58px 0 2px rgba(255, 245, 170, 0.7),
    205px 31px 0 1px rgba(200, 225, 255, 0.8),
    232px 75px 0 2px rgba(255, 255, 210, 0.6),
    258px 42px 0 1px rgba(230, 250, 255, 0.7),
    285px 87px 0 2px rgba(255, 255, 180, 0.8),
    311px 23px 0 1px rgba(180, 210, 255, 0.6),
    338px 69px 0 2px rgba(240, 255, 255, 0.7),
    364px 34px 0 1px rgba(210, 235, 255, 0.8),
    391px 78px 0 2px rgba(255, 250, 190, 0.6);
  animation: starsDrift7 28s linear infinite;
}

.showroom-4::after {
  box-shadow:
    26px 41px 0 2px rgba(170, 200, 255, 0.7),
    53px 88px 0 1px rgba(255, 255, 255, 0.9),
    79px 32px 0 2px rgba(140, 180, 255, 0.6),
    106px 67px 0 1px rgba(230, 245, 255, 0.8),
    132px 93px 0 2px rgba(190, 215, 255, 0.7),
    159px 47px 0 1px rgba(255, 255, 220, 0.6),
    185px 14px 0 2px rgba(200, 225, 255, 0.8),
    212px 71px 0 1px rgba(160, 190, 255, 0.7),
    238px 56px 0 2px rgba(255, 255, 200, 0.6),
    265px 29px 0 1px rgba(210, 235, 255, 0.8),
    291px 84px 0 2px rgba(180, 210, 250, 0.7),
    318px 38px 0 1px rgba(255, 255, 240, 0.6),
    344px 62px 0 2px rgba(220, 245, 255, 0.8),
    371px 19px 0 1px rgba(150, 180, 240, 0.7),
    397px 73px 0 2px rgba(250, 255, 210, 0.6);
  animation: starsDrift8 38s linear infinite;
}

@keyframes starsDrift7 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(0, 40px); }
}

@keyframes starsDrift8 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(40px, -20px); }
}

/* ============================================= */
/* 5. Чёрный шоурум с неоном (Black Neon Showroom) */
/* ============================================= */
.showroom-5 {
  background:
    linear-gradient(180deg, #0a0a0a 0%, #1a1a1a 60%, #0f0f0f 100%),
    radial-gradient(circle at 30% 50%, rgba(255, 80, 120, 0.3) 0%, transparent 70%),
    radial-gradient(circle at 80% 30%, rgba(80, 200, 255, 0.3) 0%, transparent 70%),
    repeating-linear-gradient(60deg, rgba(255, 100, 150, 0.2) 0px, rgba(100, 200, 255, 0.2) 10px, transparent 10px, transparent 40px),
    repeating-linear-gradient(-60deg, rgba(200, 255, 100, 0.15) 0px, rgba(200, 255, 100, 0.15) 15px, transparent 15px, transparent 45px);
  background-blend-mode: overlay, normal, normal, screen, screen;
  animation: raysMove5 30s linear infinite;
}

@keyframes raysMove5 {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%, -100px -50px, 50px 100px; }
  100% { background-position: 200% 200%, 0% 0%, 0% 0%, 200px 150px, -150px -200px; }
}

.showroom-5::before {
  box-shadow:
    33px 57px 0 2px rgba(255, 120, 160, 0.9),
    61px 24px 0 1px rgba(100, 220, 255, 0.8),
    89px 79px 0 2px rgba(255, 200, 100, 0.7),
    118px 42px 0 1px rgba(200, 100, 255, 0.9),
    146px 68px 0 2px rgba(80, 255, 150, 0.8),
    175px 31px 0 1px rgba(255, 140, 200, 0.7),
    203px 86px 0 2px rgba(140, 220, 255, 0.9),
    232px 53px 0 1px rgba(255, 180, 70, 0.8),
    260px 17px 0 2px rgba(170, 90, 255, 0.7),
    289px 72px 0 1px rgba(90, 255, 180, 0.9),
    317px 39px 0 2px rgba(255, 110, 140, 0.8),
    346px 94px 0 1px rgba(210, 130, 255, 0.7),
    374px 48px 0 2px rgba(120, 240, 200, 0.9),
    403px 15px 0 1px rgba(255, 160, 220, 0.8),
    431px 63px 0 2px rgba(180, 210, 80, 0.7);
  animation: starsDrift9 22s linear infinite;
}

.showroom-5::after {
  box-shadow:
    28px 82px 0 2px rgba(200, 150, 255, 0.7),
    54px 37px 0 1px rgba(255, 90, 130, 0.9),
    79px 93px 0 2px rgba(70, 230, 200, 0.8),
    105px 46px 0 1px rgba(250, 200, 60, 0.7),
    131px 71px 0 2px rgba(180, 80, 255, 0.9),
    157px 28px 0 1px rgba(100, 255, 140, 0.8),
    183px 85px 0 2px rgba(255, 130, 190, 0.7),
    209px 52px 0 1px rgba(220, 170, 100, 0.9),
    235px 19px 0 2px rgba(150, 210, 255, 0.8),
    261px 74px 0 1px rgba(80, 240, 170, 0.7),
    287px 41px 0 2px rgba(255, 100, 220, 0.9),
    313px 68px 0 1px rgba(190, 140, 255, 0.8),
    339px 23px 0 2px rgba(120, 255, 110, 0.7),
    365px 77px 0 1px rgba(255, 180, 150, 0.9),
    391px 34px 0 2px rgba(210, 90, 240, 0.8);
  animation: starsDrift10 36s linear infinite;
}

@keyframes starsDrift9 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-30px, -30px); }
}

@keyframes starsDrift10 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(35px, 25px); }
}

/* ============================================= */
/* 6. Утренний рассвет */
/* ============================================= */
.showroom-6 {
  background:
    linear-gradient(180deg, #3d4a6e 0%, #4a4f78 15%, #6b5b85 32%, #9d7a8a 52%, #e8a090 72%, #ffd4a8 88%, #fff5e8 100%),
    radial-gradient(ellipse 110% 70% at 50% 100%, rgba(255, 200, 120, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 52% 92%, rgba(255, 230, 160, 0.75) 0%, transparent 38%),
    radial-gradient(ellipse 80% 45% at 25% 80%, rgba(255, 140, 100, 0.35) 0%, transparent 45%),
    radial-gradient(ellipse 70% 40% at 78% 85%, rgba(255, 180, 140, 0.3) 0%, transparent 42%);
  background-blend-mode: normal, soft-light, overlay, normal, normal;
  animation: sunriseHorizon 45s ease-in-out infinite alternate;
}

@keyframes sunriseHorizon {
  0% {
    background-position:
      0% 0%,
      0% 100%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
  50% {
    background-position:
      0% 0%,
      6% 99%,
      12px 0%,
      20px -10px,
      -15px 8px;
  }
  100% {
    background-position:
      0% 0%,
      -4% 100%,
      -8px 0%,
      -25px 12px,
      18px -6px;
  }
}

.showroom-6::before {
  /* Тёплые лучи зари */
  box-shadow:
    16px 52px 0 2px rgba(255, 220, 160, 0.85),
    42px 28px 0 1px rgba(255, 200, 140, 0.75),
    68px 74px 0 2px rgba(255, 235, 200, 0.65),
    94px 41px 0 1px rgba(255, 180, 120, 0.8),
    120px 88px 0 2px rgba(255, 240, 210, 0.55),
    146px 19px 0 1px rgba(255, 210, 150, 0.78),
    172px 63px 0 2px rgba(255, 190, 130, 0.68),
    198px 36px 0 1px rgba(255, 225, 180, 0.72),
    224px 79px 0 2px rgba(255, 200, 160, 0.62),
    250px 14px 0 1px rgba(255, 215, 170, 0.8),
    276px 58px 0 2px rgba(255, 185, 140, 0.65),
    302px 91px 0 1px rgba(255, 230, 195, 0.58),
    328px 47px 0 2px rgba(255, 195, 150, 0.72),
    354px 23px 0 1px rgba(255, 210, 175, 0.68),
    380px 66px 0 2px rgba(255, 220, 185, 0.62);
  animation: sunriseRaysDrift 32s ease-in-out infinite;
  opacity: 0.88;
}

.showroom-6::after {
  /* Лёгкий туман на горизонте */
  box-shadow:
    24px 68px 0 1px rgba(255, 255, 255, 0.45),
    52px 34px 0 2px rgba(240, 230, 255, 0.4),
    80px 82px 0 1px rgba(255, 250, 245, 0.5),
    108px 51px 0 2px rgba(255, 240, 230, 0.38),
    136px 16px 0 1px rgba(255, 255, 255, 0.42),
    164px 73px 0 2px rgba(250, 245, 255, 0.36),
    192px 39px 0 1px rgba(255, 255, 250, 0.48),
    220px 88px 0 2px rgba(245, 240, 255, 0.34),
    248px 25px 0 1px rgba(255, 252, 248, 0.44),
    276px 61px 0 2px rgba(255, 245, 240, 0.4),
    304px 94px 0 1px rgba(255, 255, 255, 0.36),
    332px 48px 0 2px rgba(250, 248, 255, 0.42),
    360px 12px 0 1px rgba(255, 255, 255, 0.38),
    388px 56px 0 2px rgba(255, 250, 245, 0.4),
    414px 29px 0 1px rgba(248, 245, 255, 0.44);
  animation: sunriseMistDrift 38s linear infinite reverse;
  opacity: 0.65;
}

@keyframes sunriseRaysDrift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8px, -6px) scale(1.015); }
  66% { transform: translate(-6px, 4px) scale(0.99); }
  100% { transform: translate(4px, 2px) scale(1); }
}

@keyframes sunriseMistDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-28px, 18px); }
}

/* ============================================= */
/* 7. Морской бриз (Sea breeze) */
/* ============================================= */
.showroom-7 {
  background:
    linear-gradient(180deg, #7ec8e3 0%, #5ab9d8 18%, #3d9cc9 38%, #2a7fb8 58%, #1a5f8c 78%, #0d3d5c 100%),
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(180, 240, 255, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 90% 50% at 20% 85%, rgba(255, 255, 255, 0.25) 0%, transparent 45%),
    radial-gradient(ellipse 80% 45% at 80% 90%, rgba(200, 255, 255, 0.2) 0%, transparent 40%),
    repeating-linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.07) 0px,
      rgba(255, 255, 255, 0.07) 12px,
      transparent 12px,
      transparent 36px
    ),
    repeating-linear-gradient(
      -95deg,
      rgba(0, 80, 120, 0.12) 0px,
      rgba(0, 80, 120, 0.12) 8px,
      transparent 8px,
      transparent 28px
    );
  background-blend-mode: normal, soft-light, overlay, overlay, soft-light, multiply;
  animation: seaBreezeWaves 42s ease-in-out infinite alternate;
}

@keyframes seaBreezeWaves {
  0% {
    background-position:
      0% 0%,
      0% 100%,
      0% 85%,
      100% 90%,
      0% 0%,
      0% 0%;
  }
  50% {
    background-position:
      0% 0%,
      5% 98%,
      15% 82%,
      85% 88%,
      40px 20px,
      -30px -15px;
  }
  100% {
    background-position:
      0% 0%,
      -5% 100%,
      -10% 88%,
      110% 92%,
      -50px -25px,
      45px 30px;
  }
}

.showroom-7::before {
  /* Пена и блики на воде */
  box-shadow:
    22px 48px 0 2px rgba(255, 255, 255, 0.85),
    51px 22px 0 1px rgba(220, 250, 255, 0.75),
    78px 71px 0 2px rgba(255, 255, 255, 0.65),
    103px 38px 0 1px rgba(180, 235, 255, 0.8),
    128px 85px 0 2px rgba(255, 255, 255, 0.55),
    156px 51px 0 1px rgba(200, 248, 255, 0.75),
    182px 18px 0 2px rgba(255, 255, 255, 0.7),
    208px 63px 0 1px rgba(160, 230, 255, 0.8),
    234px 91px 0 2px rgba(255, 255, 255, 0.6),
    261px 44px 0 1px rgba(210, 245, 255, 0.78),
    287px 76px 0 2px rgba(255, 255, 255, 0.65),
    314px 29px 0 1px rgba(190, 240, 255, 0.72),
    339px 58px 0 2px rgba(255, 255, 255, 0.58),
    365px 12px 0 1px rgba(170, 225, 255, 0.82),
    392px 67px 0 2px rgba(255, 255, 255, 0.62);
  animation: seaFoamDrift 28s ease-in-out infinite;
  opacity: 0.92;
}

.showroom-7::after {
  /* Голубые искры — «бриз» */
  box-shadow:
    18px 72px 0 1px rgba(100, 220, 255, 0.75),
    44px 31px 0 2px rgba(150, 240, 255, 0.65),
    69px 88px 0 1px rgba(80, 200, 255, 0.8),
    95px 54px 0 2px rgba(200, 255, 255, 0.55),
    121px 19px 0 1px rgba(120, 230, 255, 0.72),
    147px 63px 0 2px rgba(90, 210, 255, 0.68),
    173px 41px 0 1px rgba(170, 250, 255, 0.6),
    199px 77px 0 2px rgba(110, 220, 255, 0.75),
    225px 26px 0 1px rgba(130, 235, 255, 0.65),
    251px 59px 0 2px rgba(95, 215, 255, 0.7),
    277px 93px 0 1px rgba(160, 245, 255, 0.58),
    303px 47px 0 2px rgba(85, 205, 255, 0.78),
    329px 14px 0 1px rgba(190, 248, 255, 0.62),
    355px 68px 0 2px rgba(105, 225, 255, 0.68),
    381px 35px 0 1px rgba(145, 238, 255, 0.72);
  animation: seaSparkleDrift 34s linear infinite reverse;
  opacity: 0.85;
}

@keyframes seaFoamDrift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(12px, -8px) scale(1.02); }
  66% { transform: translate(-10px, 6px) scale(0.98); }
  100% { transform: translate(6px, 4px) scale(1); }
}

@keyframes seaSparkleDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-40px, 25px); }
}

/* ============================================= */
/* 8. Прогулка по лугам (Meadow walk) */
/* ============================================= */
.showroom-8 {
  background:
    linear-gradient(180deg, #e0f7fa 0%, #b2ebf2 12%, #a5d6a7 35%, #81c784 58%, #66bb6a 78%, #43a047 92%, #2e7d32 100%),
    radial-gradient(ellipse 100% 55% at 50% 100%, rgba(200, 255, 180, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse 70% 40% at 15% 75%, rgba(255, 255, 200, 0.25) 0%, transparent 50%),
    radial-gradient(ellipse 65% 38% at 85% 78%, rgba(180, 255, 200, 0.22) 0%, transparent 48%),
    repeating-linear-gradient(
      95deg,
      rgba(255, 255, 255, 0.06) 0px,
      rgba(255, 255, 255, 0.06) 14px,
      transparent 14px,
      transparent 40px
    );
  background-blend-mode: normal, soft-light, overlay, overlay, normal;
  animation: meadowHillsDrift 48s ease-in-out infinite alternate;
}

@keyframes meadowHillsDrift {
  0% {
    background-position:
      0% 0%,
      0% 100%,
      0% 0%,
      0% 0%,
      0% 0%;
  }
  50% {
    background-position:
      0% 0%,
      4% 99%,
      25px 0%,
      -20px 5%,
      35px 12px;
  }
  100% {
    background-position:
      0% 0%,
      -3% 100%,
      -18px 0%,
      15px -8%,
      -40px -8px;
  }
}

.showroom-8::before {
  /* Полевые цветы: белые и жёлтые точки */
  box-shadow:
    20px 55px 0 2px rgba(255, 255, 255, 0.9),
    45px 32px 0 1px rgba(255, 248, 180, 0.85),
    72px 78px 0 2px rgba(255, 235, 120, 0.75),
    98px 44px 0 1px rgba(255, 255, 255, 0.8),
    124px 18px 0 2px rgba(255, 240, 150, 0.7),
    151px 63px 0 1px rgba(255, 255, 255, 0.82),
    177px 88px 0 2px rgba(255, 220, 100, 0.68),
    203px 26px 0 1px rgba(255, 250, 245, 0.78),
    229px 71px 0 2px rgba(255, 255, 200, 0.72),
    255px 51px 0 1px rgba(255, 255, 255, 0.65),
    281px 14px 0 2px rgba(255, 245, 160, 0.75),
    307px 59px 0 1px rgba(255, 255, 255, 0.7),
    333px 82px 0 2px rgba(255, 230, 130, 0.62),
    359px 37px 0 1px rgba(255, 255, 250, 0.8),
    385px 66px 0 2px rgba(255, 248, 190, 0.68);
  animation: meadowPetalsFloat 30s ease-in-out infinite;
  opacity: 0.9;
}

.showroom-8::after {
  /* Светло-зелёные блики — «пыльца и трава» */
  box-shadow:
    16px 68px 0 1px rgba(180, 255, 160, 0.65),
    42px 41px 0 2px rgba(220, 255, 200, 0.55),
    68px 15px 0 1px rgba(150, 240, 140, 0.7),
    94px 74px 0 2px rgba(200, 255, 180, 0.5),
    120px 52px 0 1px rgba(170, 250, 160, 0.62),
    146px 28px 0 2px rgba(230, 255, 210, 0.48),
    172px 91px 0 1px rgba(160, 235, 150, 0.68),
    198px 8px 0 2px rgba(210, 255, 190, 0.52),
    224px 63px 0 1px rgba(190, 248, 170, 0.6),
    250px 35px 0 2px rgba(215, 255, 200, 0.55),
    276px 79px 0 1px rgba(175, 242, 155, 0.65),
    302px 22px 0 2px rgba(235, 255, 220, 0.5),
    328px 56px 0 1px rgba(185, 250, 175, 0.58),
    354px 88px 0 2px rgba(205, 255, 195, 0.52),
    380px 47px 0 1px rgba(195, 252, 168, 0.62);
  animation: meadowGlowDrift 36s linear infinite reverse;
  opacity: 0.78;
}

@keyframes meadowPetalsFloat {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(10px, -12px) scale(1.02); }
  50% { transform: translate(-8px, 6px) scale(0.98); }
  75% { transform: translate(6px, 8px) scale(1.01); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes meadowGlowDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(32px, -22px); }
}

/* ============================================= */
/* 9. Цветение сакуры (Cherry blossom) */
/* ============================================= */
.showroom-9 {
  background:
    linear-gradient(180deg, #fff8fb 0%, #ffe4ef 18%, #ffd6e8 38%, #ffc9e0 58%, #ffb7d5 78%, #f8a8cc 100%),
    radial-gradient(ellipse 95% 65% at 50% 15%, rgba(255, 255, 255, 0.85) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(255, 182, 210, 0.35) 0%, transparent 50%),
    radial-gradient(ellipse 75% 48% at 82% 45%, rgba(255, 200, 230, 0.32) 0%, transparent 48%),
    radial-gradient(ellipse 110% 70% at 50% 100%, rgba(236, 72, 153, 0.18) 0%, transparent 55%),
    repeating-linear-gradient(
      88deg,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 10px,
      transparent 10px,
      transparent 32px
    );
  background-blend-mode: normal, soft-light, overlay, overlay, soft-light, normal;
  animation: sakuraBloomDrift 52s ease-in-out infinite alternate;
}

@keyframes sakuraBloomDrift {
  0% {
    background-position:
      0% 0%,
      0% 0%,
      0% 0%,
      0% 0%,
      0% 100%,
      0% 0%;
  }
  50% {
    background-position:
      0% 0%,
      3% 2%,
      18px 0%,
      -14px 4%,
      5% 99%,
      28px 15px;
  }
  100% {
    background-position:
      0% 0%,
      -2% -1%,
      -12px 0%,
      20px -3%,
      -4% 100%,
      -35px -10px;
  }
}

.showroom-9::before {
  /* Лепестки сакуры */
  box-shadow:
    18px 42px 0 2px rgba(255, 192, 220, 0.95),
    44px 18px 0 1px rgba(255, 255, 255, 0.9),
    71px 65px 0 2px rgba(255, 183, 213, 0.88),
    97px 38px 0 1px rgba(252, 231, 243, 0.92),
    123px 82px 0 2px rgba(244, 114, 182, 0.75),
    149px 12px 0 1px rgba(255, 255, 255, 0.85),
    175px 55px 0 2px rgba(255, 205, 230, 0.82),
    201px 71px 0 1px rgba(251, 207, 232, 0.78),
    227px 29px 0 2px rgba(255, 182, 210, 0.88),
    253px 88px 0 1px rgba(255, 240, 250, 0.72),
    279px 51px 0 2px rgba(236, 72, 153, 0.55),
    305px 24px 0 1px rgba(255, 255, 255, 0.8),
    331px 63px 0 2px rgba(255, 192, 220, 0.8),
    357px 91px 0 1px rgba(252, 165, 200, 0.7),
    383px 46px 0 2px rgba(255, 228, 240, 0.85);
  animation: sakuraPetalsSway 26s ease-in-out infinite;
  opacity: 0.92;
}

.showroom-9::after {
  /* Розовый свет и блики */
  box-shadow:
    22px 58px 0 1px rgba(255, 150, 200, 0.55),
    48px 33px 0 2px rgba(255, 220, 240, 0.5),
    74px 76px 0 1px rgba(244, 114, 182, 0.45),
    100px 14px 0 2px rgba(255, 245, 250, 0.48),
    126px 69px 0 1px rgba(251, 113, 168, 0.42),
    152px 41px 0 2px rgba(255, 235, 245, 0.52),
    178px 84px 0 1px rgba(219, 39, 119, 0.35),
    204px 22px 0 2px rgba(255, 255, 255, 0.45),
    230px 61px 0 1px rgba(255, 182, 210, 0.5),
    256px 93px 0 2px rgba(252, 200, 225, 0.42),
    282px 37px 0 1px rgba(255, 228, 235, 0.48),
    308px 78px 0 2px rgba(236, 72, 153, 0.38),
    334px 11px 0 1px rgba(255, 250, 252, 0.5),
    360px 52px 0 2px rgba(255, 192, 210, 0.45),
    386px 67px 0 1px rgba(253, 224, 239, 0.52);
  animation: sakuraLightDrift 40s linear infinite reverse;
  opacity: 0.72;
}

@keyframes sakuraPetalsSway {
  0% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(14px, 10px) rotate(1.5deg); }
  66% { transform: translate(-10px, -6px) rotate(-1deg); }
  100% { transform: translate(4px, 4px) rotate(0.5deg); }
}

@keyframes sakuraLightDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-36px, 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .showroom-6,
  .showroom-7,
  .showroom-8,
  .showroom-9 {
    animation: none;
  }
  .showroom-6::before,
  .showroom-6::after,
  .showroom-7::before,
  .showroom-7::after,
  .showroom-8::before,
  .showroom-8::after,
  .showroom-9::before,
  .showroom-9::after {
    animation: none;
  }
}