/* =====================================================================
   CyberX configurations page v27
   Слайдер ПК: подробные комплектующие + анимированный фон под выбранный ПК.
===================================================================== */

.configs-page{
  --page-accent:#00ff88;
  --page-accent-soft:rgba(0,255,136,.18);
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:clamp(92px, 10vw, 140px) 0 clamp(72px, 8vw, 120px);
  background:
    radial-gradient(circle at 80% 4%, var(--page-accent-soft), transparent 32%),
    radial-gradient(circle at 8% 38%, rgba(255,0,64,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%),
    var(--bg, #050507);
  transition:background .65s ease;
}

.configs-page[data-config-theme="green"]{
  --page-accent:#00ff88;
  --page-accent-soft:rgba(0,255,136,.18);
}

.configs-page[data-config-theme="blue"]{
  --page-accent:#24a8ff;
  --page-accent-soft:rgba(36,168,255,.20);
}

.configs-page[data-config-theme="red"]{
  --page-accent:#ff0033;
  --page-accent-soft:rgba(255,0,51,.20);
}

.configs-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.38;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.86) 40%, transparent 100%);
}

.configs-ambient{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.configs-ambient__orb{
  position:absolute;
  width:clamp(260px, 34vw, 620px);
  height:clamp(260px, 34vw, 620px);
  border-radius:50%;
  background:radial-gradient(circle, var(--page-accent-soft) 0%, transparent 66%);
  filter:blur(4px);
  opacity:.72;
  mix-blend-mode:screen;
  animation:configOrbFloat 12s ease-in-out infinite alternate;
}

.configs-ambient__orb--one{
  top:8%;
  right:3%;
}

.configs-ambient__orb--two{
  width:clamp(220px, 28vw, 480px);
  height:clamp(220px, 28vw, 480px);
  left:4%;
  bottom:10%;
  animation-duration:15s;
  animation-direction:alternate-reverse;
}

.configs-ambient__line{
  position:absolute;
  width:42vw;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--page-accent), transparent);
  box-shadow:0 0 28px var(--page-accent);
  opacity:.44;
  animation:configLineMove 4.5s ease-in-out infinite;
}

.configs-ambient__line--one{
  top:31%;
  left:-12vw;
}

.configs-ambient__line--two{
  right:-10vw;
  bottom:26%;
  animation-delay:1.3s;
  animation-direction:reverse;
}

.configs-ambient__pulse{
  position:absolute;
  inset:18% 8%;
  border:1px solid color-mix(in srgb, var(--page-accent) 24%, transparent);
  border-radius:42px;
  opacity:.22;
  animation:configPulse 3.8s ease-in-out infinite;
}

@keyframes configOrbFloat{
  from{ transform:translate3d(0,0,0) scale(.96); }
  to{ transform:translate3d(-7%, 6%, 0) scale(1.08); }
}

@keyframes configLineMove{
  0%,100%{ transform:translateX(0); opacity:.18; }
  50%{ transform:translateX(28vw); opacity:.58; }
}

@keyframes configPulse{
  0%,100%{ transform:scale(.985); opacity:.14; }
  50%{ transform:scale(1.015); opacity:.32; }
}

.configs-page .container{
  position:relative;
  z-index:1;
}

.configs-hero{
  max-width:980px;
  margin:0 auto 30px;
  text-align:center;
}

.configs-hero h1{
  margin:12px 0 14px;
  font-family:var(--font-display, inherit);
  font-size:clamp(2.1rem, 5.8vw, 5.2rem);
  line-height:.92;
  letter-spacing:-.075em;
  text-transform:uppercase;
  color:var(--text, #fff);
}

.configs-hero p{
  max-width:760px;
  margin:0 auto;
  color:var(--muted, #a7a7b3);
  font-size:clamp(.88rem, 1.1vw, 1rem);
  line-height:1.68;
}

.configs-slider{
  --slide-accent:#00ff88;
  --slide-accent-soft:rgba(0,255,136,.18);
  position:relative;
  max-width:1240px;
  margin:0 auto;
}

.configs-slider[data-theme="green"]{
  --slide-accent:#00ff88;
  --slide-accent-soft:rgba(0,255,136,.18);
}

.configs-slider[data-theme="blue"]{
  --slide-accent:#24a8ff;
  --slide-accent-soft:rgba(36,168,255,.20);
}

.configs-slider[data-theme="red"]{
  --slide-accent:#ff0033;
  --slide-accent-soft:rgba(255,0,51,.20);
}

.configs-slider__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.configs-tabs{
  display:flex;
  gap:10px;
  overflow:auto hidden;
  padding:4px;
  scrollbar-width:none;
}

.configs-tabs::-webkit-scrollbar{
  display:none;
}

.configs-tab{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
  color:var(--muted, #a7a7b3);
  font-family:var(--font-display, inherit);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.02em;
  cursor:pointer;
  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.configs-tab span{
  color:var(--slide-accent);
  transition:color .25s ease;
}

.configs-tab:hover,
.configs-tab.is-active{
  color:#fff;
  background:color-mix(in srgb, var(--slide-accent) 14%, transparent);
  border-color:color-mix(in srgb, var(--slide-accent) 36%, transparent);
  box-shadow:0 0 28px var(--slide-accent-soft);
  transform:translateY(-1px);
}

.configs-slider__arrows{
  display:flex;
  gap:10px;
  flex:0 0 auto;
}

.configs-slider__btn{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:#fff;
  cursor:pointer;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.configs-slider__btn:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--slide-accent) 36%, transparent);
  background:color-mix(in srgb, var(--slide-accent) 14%, transparent);
  box-shadow:0 0 30px var(--slide-accent-soft);
}

.configs-slider__viewport{
  overflow:hidden;
  border-radius:34px;
}

.configs-slider__track{
  display:flex;
  transition:transform .65s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

.config-slide{
  --card-accent:var(--slide-accent);
  --card-accent-soft:var(--slide-accent-soft);
  position:relative;
  flex:0 0 100%;
  display:grid;
  grid-template-columns:minmax(320px, .82fr) minmax(0, 1.18fr);
  gap:22px;
  min-height:680px;
  padding:clamp(20px, 2.8vw, 36px);
  border-radius:34px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(720px 380px at 0% 0%, var(--card-accent-soft), transparent 58%),
    radial-gradient(520px 320px at 100% 12%, var(--card-accent-soft), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.022)),
    rgba(14,15,20,.92);
  box-shadow:
    0 34px 90px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  isolation:isolate;
}

.config-slide.theme-green{
  --card-accent:#00ff88;
  --card-accent-soft:rgba(0,255,136,.18);
}

.config-slide.theme-blue{
  --card-accent:#24a8ff;
  --card-accent-soft:rgba(36,168,255,.20);
}

.config-slide.theme-red{
  --card-accent:#ff0033;
  --card-accent-soft:rgba(255,0,51,.20);
}

.config-slide::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-1;
  background:
    conic-gradient(from 140deg at 50% 50%, transparent, var(--card-accent-soft), transparent 30%, transparent 70%, var(--card-accent-soft), transparent),
    radial-gradient(circle at 50% 110%, var(--card-accent-soft), transparent 48%);
  opacity:.78;
  animation:configCardAurora 8s linear infinite;
  pointer-events:none;
}

.config-slide::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
  background-size:38px 38px;
  opacity:.24;
  mask-image:linear-gradient(120deg, #000, transparent 72%);
  animation:configGridMove 10s linear infinite;
}

@keyframes configCardAurora{
  from{ transform:rotate(0deg) scale(1.2); }
  to{ transform:rotate(360deg) scale(1.2); }
}

@keyframes configGridMove{
  from{ background-position:0 0, 0 0; }
  to{ background-position:38px 38px, 38px 38px; }
}

.config-slide__photo{
  position:relative;
  min-height:100%;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.11);
  background:
    radial-gradient(circle at 50% 26%, var(--card-accent-soft), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),
    rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

.config-slide__photo::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent 10%, color-mix(in srgb, var(--card-accent) 18%, transparent) 50%, transparent 88%);
  transform:translateX(-100%);
  animation:configPhotoSweep 4.2s ease-in-out infinite;
  opacity:.55;
}

@keyframes configPhotoSweep{
  0%,42%{ transform:translateX(-115%); }
  70%,100%{ transform:translateX(115%); }
}

.config-slide__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.config-slide__placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--muted, #a7a7b3);
  text-align:center;
  font-weight:800;
}

.config-slide__placeholder i{
  color:var(--card-accent);
  filter:drop-shadow(0 0 14px var(--card-accent-soft));
}

.config-slide__photo:not(.is-empty) .config-slide__placeholder{
  display:none;
}

.config-slide__specs{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.config-slide__label{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.config-slide__label span{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--card-accent) 55%, transparent);
  color:var(--card-accent);
  font-family:var(--font-display, inherit);
  font-size:.72rem;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.config-slide__label b{
  color:#fff;
  font-family:var(--font-display, inherit);
  font-size:clamp(1.2rem, 2vw, 1.65rem);
  line-height:1;
  letter-spacing:-.05em;
}

.config-slide__specs h2{
  margin:0 0 18px;
  color:#fff;
  font-family:var(--font-display, inherit);
  font-size:clamp(1.65rem, 4vw, 3.35rem);
  line-height:.95;
  letter-spacing:-.065em;
  text-transform:uppercase;
}

.config-spec-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.config-spec{
  min-height:132px;
  padding:17px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(220px 120px at 100% 0, var(--card-accent-soft), transparent 70%),
    rgba(0,0,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}

.config-spec--wide{
  min-height:138px;
}

.config-spec:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--card-accent) 38%, transparent);
  box-shadow:0 18px 42px rgba(0,0,0,.28), 0 0 30px var(--card-accent-soft);
}

.config-spec i{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:13px;
  border-radius:13px;
  background:var(--card-accent-soft);
  color:var(--card-accent);
  filter:drop-shadow(0 0 14px var(--card-accent-soft));
}

.config-spec span{
  display:block;
  margin-bottom:7px;
  color:var(--muted, #a7a7b3);
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.config-spec b{
  display:block;
  color:#fff;
  font-size:.9rem;
  line-height:1.34;
}

.configs-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}

.configs-dots button{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.25);
  cursor:pointer;
  transition:width .3s ease, background .3s ease, box-shadow .3s ease;
}

.configs-dots button.is-active{
  width:34px;
  background:var(--slide-accent);
  box-shadow:0 0 22px var(--slide-accent-soft);
}

@media (max-width: 1080px){
  .configs-slider__top{
    align-items:stretch;
    flex-direction:column;
  }

  .configs-slider__arrows{
    justify-content:center;
  }

  .config-slide{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .config-slide__photo{
    min-height:360px;
  }

  .config-slide__specs{
    justify-content:flex-start;
  }
}

@media (max-width: 720px){
  .configs-page{
    padding-top:82px;
  }

  .configs-hero h1{
    font-size:clamp(2rem, 14vw, 3.25rem);
  }

  .configs-slider__viewport,
  .config-slide{
    border-radius:24px;
  }

  .config-slide__photo{
    min-height:250px;
    border-radius:20px;
  }

  .config-spec-grid{
    grid-template-columns:1fr;
  }

  .config-spec{
    min-height:112px;
  }

  .config-slide__specs h2{
    font-size:clamp(1.5rem, 9vw, 2.2rem);
  }
}


/* =====================================================================
   v29 — объединение анимаций карточек с фоном
   Фон страницы, большая карточка ПК, фото и карточки комплектующих теперь
   работают от одного акцентного цвета и одного ритма анимации.
===================================================================== */

.configs-page{
  --sync-speed:8s;
  --sync-slow:14s;
  --sync-glow:.16;
}

/* Плавный переход цвета всей сцены при смене ПК */
.configs-page,
.configs-slider,
.config-slide,
.config-slide__photo,
.config-spec{
  transition:
    background .7s cubic-bezier(.16,1,.3,1),
    border-color .7s cubic-bezier(.16,1,.3,1),
    box-shadow .7s cubic-bezier(.16,1,.3,1),
    color .35s ease;
}

/* Общая световая сцена за слайдером */
.configs-slider::before,
.configs-slider::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:-1;
  border-radius:999px;
  background:radial-gradient(circle, var(--slide-accent-soft), transparent 68%);
  filter:blur(10px);
  mix-blend-mode:screen;
  animation:configUnifiedFloat var(--sync-slow) ease-in-out infinite alternate;
}

.configs-slider::before{
  width:min(760px, 62vw);
  height:min(760px, 62vw);
  left:-12%;
  top:12%;
  opacity:.46;
}

.configs-slider::after{
  width:min(620px, 52vw);
  height:min(620px, 52vw);
  right:-10%;
  bottom:-18%;
  opacity:.38;
  animation-delay:-4s;
  animation-direction:alternate-reverse;
}

/* Фон страницы и фон карточки двигаются в одном направлении */
.configs-ambient__orb{
  animation:configUnifiedFloat var(--sync-slow) ease-in-out infinite alternate;
}

.configs-ambient__orb--two{
  animation-name:configUnifiedFloatReverse;
}

.configs-ambient__line{
  animation:configUnifiedLine var(--sync-speed) cubic-bezier(.16,1,.3,1) infinite;
}

.configs-ambient__pulse{
  animation:configUnifiedPulse calc(var(--sync-speed) / 1.4) ease-in-out infinite;
}

/* Активная карточка визуально становится частью фона */
.config-slide{
  border-color:color-mix(in srgb, var(--card-accent) 18%, rgba(255,255,255,.10));
  box-shadow:
    0 34px 90px rgba(0,0,0,.45),
    0 0 72px color-mix(in srgb, var(--card-accent) 12%, transparent),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.config-slide.is-active{
  box-shadow:
    0 38px 100px rgba(0,0,0,.48),
    0 0 90px color-mix(in srgb, var(--card-accent) 18%, transparent),
    inset 0 1px 0 rgba(255,255,255,.07);
}

.config-slide::before{
  animation:configUnifiedAurora var(--sync-slow) linear infinite;
}

.config-slide::after{
  animation:configUnifiedGrid calc(var(--sync-slow) * 1.2) linear infinite;
}

/* Общий мягкий свет на фото и карточках комплектующих */
.config-slide__photo{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 48px color-mix(in srgb, var(--card-accent) 10%, transparent);
  animation:configUnifiedGlow calc(var(--sync-speed) / 1.15) ease-in-out infinite;
}

.config-slide__photo::before{
  animation:configUnifiedSweep calc(var(--sync-speed) / 1.05) ease-in-out infinite;
}

.config-spec{
  background:
    radial-gradient(260px 140px at var(--mx, 100%) var(--my, 0%), var(--card-accent-soft), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015)),
    rgba(0,0,0,.28);
  animation:configUnifiedGlow calc(var(--sync-speed) / 1.15) ease-in-out infinite;
}

.config-spec:nth-child(2n){
  --mx:0%;
  --my:0%;
  animation-delay:-1.2s;
}

.config-spec:nth-child(3n){
  --mx:100%;
  --my:100%;
  animation-delay:-2.4s;
}

.config-spec:nth-child(4n){
  --mx:0%;
  --my:100%;
  animation-delay:-3.6s;
}

.config-spec:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb, var(--card-accent) 42%, transparent);
  box-shadow:
    0 18px 42px rgba(0,0,0,.28),
    0 0 38px color-mix(in srgb, var(--card-accent) 20%, transparent);
}

/* Акцентные иконки тоже дышат в одном ритме с фоном */
.config-spec i,
.config-slide__label span,
.configs-tab.is-active,
.configs-dots button.is-active{
  animation:configUnifiedAccent calc(var(--sync-speed) / 1.4) ease-in-out infinite;
}

@keyframes configUnifiedFloat{
  0%{
    transform:translate3d(0,0,0) scale(.96);
    opacity:.38;
  }
  50%{
    transform:translate3d(-4%, 3%, 0) scale(1.05);
    opacity:.68;
  }
  100%{
    transform:translate3d(3%, -2%, 0) scale(1.1);
    opacity:.48;
  }
}

@keyframes configUnifiedFloatReverse{
  0%{
    transform:translate3d(0,0,0) scale(1.05);
    opacity:.28;
  }
  50%{
    transform:translate3d(5%, -4%, 0) scale(.96);
    opacity:.58;
  }
  100%{
    transform:translate3d(-3%, 4%, 0) scale(1.08);
    opacity:.40;
  }
}

@keyframes configUnifiedLine{
  0%,100%{
    transform:translateX(-8vw);
    opacity:.12;
  }
  45%,55%{
    transform:translateX(24vw);
    opacity:.52;
  }
}

@keyframes configUnifiedPulse{
  0%,100%{
    transform:scale(.985);
    opacity:.13;
    border-color:color-mix(in srgb, var(--page-accent) 18%, transparent);
  }
  50%{
    transform:scale(1.018);
    opacity:.34;
    border-color:color-mix(in srgb, var(--page-accent) 34%, transparent);
  }
}

@keyframes configUnifiedAurora{
  0%{
    transform:rotate(0deg) scale(1.18);
    opacity:.54;
  }
  50%{
    transform:rotate(180deg) scale(1.26);
    opacity:.82;
  }
  100%{
    transform:rotate(360deg) scale(1.18);
    opacity:.54;
  }
}

@keyframes configUnifiedGrid{
  from{
    background-position:0 0, 0 0;
    opacity:.18;
  }
  50%{
    opacity:.32;
  }
  to{
    background-position:76px 76px, 76px 76px;
    opacity:.18;
  }
}

@keyframes configUnifiedGlow{
  0%,100%{
    border-color:rgba(255,255,255,.10);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.045),
      0 0 0 color-mix(in srgb, var(--card-accent) 0%, transparent);
  }
  50%{
    border-color:color-mix(in srgb, var(--card-accent) 28%, rgba(255,255,255,.10));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.065),
      0 0 32px color-mix(in srgb, var(--card-accent) 12%, transparent);
  }
}

@keyframes configUnifiedSweep{
  0%,38%{
    transform:translateX(-120%) skewX(-12deg);
    opacity:0;
  }
  52%{
    opacity:.55;
  }
  72%,100%{
    transform:translateX(120%) skewX(-12deg);
    opacity:0;
  }
}

@keyframes configUnifiedAccent{
  0%,100%{
    filter:drop-shadow(0 0 8px color-mix(in srgb, var(--card-accent, var(--slide-accent)) 18%, transparent));
  }
  50%{
    filter:drop-shadow(0 0 18px color-mix(in srgb, var(--card-accent, var(--slide-accent)) 40%, transparent));
  }
}

@media (prefers-reduced-motion: reduce){
  .configs-slider::before,
  .configs-slider::after,
  .configs-ambient__orb,
  .configs-ambient__line,
  .configs-ambient__pulse,
  .config-slide::before,
  .config-slide::after,
  .config-slide__photo,
  .config-slide__photo::before,
  .config-spec,
  .config-spec i,
  .config-slide__label span,
  .configs-tab.is-active,
  .configs-dots button.is-active{
    animation:none !important;
  }
}


/* =====================================================================
   v30 — performance optimization
   Убраны тяжёлые анимации, оставлен лёгкий фирменный фон без тормозов.
===================================================================== */

/* Оставляем синхронизацию цвета, но убираем дорогие эффекты blur / conic / постоянные glow */
.configs-page{
  --sync-speed:16s;
  --sync-slow:22s;
}

/* Меньше перерисовок на всей сцене */
.configs-slider,
.config-slide,
.config-slide__photo,
.config-spec{
  will-change:auto;
}

/* Орбы стали легче: без mix-blend-mode и сильного blur */
.configs-ambient__orb,
.configs-slider::before,
.configs-slider::after{
  mix-blend-mode:normal !important;
  filter:none !important;
  opacity:.24 !important;
  animation:configLightFloat 18s ease-in-out infinite alternate !important;
}

/* Линии оставляем, но делаем медленными и спокойными */
.configs-ambient__line{
  opacity:.18 !important;
  box-shadow:none !important;
  animation:configLightLine 14s ease-in-out infinite !important;
}

/* Пульс — мягче */
.configs-ambient__pulse{
  animation:configLightPulse 10s ease-in-out infinite !important;
}

/* Самая тяжёлая часть была вращающаяся conic-анимация — заменяем на статичное свечение */
.config-slide::before{
  animation:none !important;
  background:
    radial-gradient(640px 320px at 12% 0%, var(--card-accent-soft), transparent 60%),
    radial-gradient(520px 280px at 100% 18%, var(--card-accent-soft), transparent 62%) !important;
  opacity:.62 !important;
  transform:none !important;
}

/* Сетка больше не двигается постоянно */
.config-slide::after{
  animation:none !important;
  opacity:.16 !important;
}

/* Убираем постоянный световой проход по фото */
.config-slide__photo::before{
  display:none !important;
  animation:none !important;
}

/* Карточки комплектующих больше не анимируют box-shadow на каждом кадре */
.config-slide__photo,
.config-spec{
  animation:none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 12px 30px rgba(0,0,0,.18) !important;
}

/* Акцентные элементы без постоянного drop-shadow */
.config-spec i,
.config-slide__label span,
.configs-tab.is-active,
.configs-dots button.is-active{
  animation:none !important;
  filter:none !important;
}

/* Hover оставлен, но сделан легче */
.config-spec:hover{
  transform:translateY(-4px);
  box-shadow:
    0 14px 30px rgba(0,0,0,.24),
    0 0 18px color-mix(in srgb, var(--card-accent) 12%, transparent) !important;
}

/* Меньше тяжёлой тени на всей карточке */
.config-slide,
.config-slide.is-active{
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Уменьшаем количество и размер световых пятен на слабых устройствах */
@media (max-width: 980px){
  .configs-slider::before,
  .configs-slider::after{
    display:none !important;
  }

  .configs-ambient__line{
    display:none !important;
  }
}

@keyframes configLightFloat{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(3%, -3%, 0) scale(1.04); }
}

@keyframes configLightLine{
  0%,100%{ transform:translateX(-10vw); opacity:.08; }
  50%{ transform:translateX(12vw); opacity:.2; }
}

@keyframes configLightPulse{
  0%,100%{ transform:scale(.99); opacity:.10; }
  50%{ transform:scale(1.01); opacity:.22; }
}


/* =====================================================================
   v85 — configurations performance pass
   Visual design unchanged: render work is reduced only outside active view.
===================================================================== */

.configs-page{
  contain:layout paint style;
  isolation:isolate;
}

.configs-ambient,
.configs-slider,
.configs-slider__viewport{
  contain:paint;
}

.configs-slider__viewport{
  touch-action:pan-y;
}

.configs-slider__track{
  will-change:auto !important;
  transform:translateZ(0);
}

.configs-slider.is-dragging .configs-slider__track{
  will-change:transform !important;
}

.config-slide{
  contain:layout paint style;
}

.config-slide:not(.is-active){
  pointer-events:none;
}

/* The exact same light motion resumes when the section becomes visible again. */
.configs-page.configs-paused .configs-ambient__orb,
.configs-page.configs-paused .configs-ambient__line,
.configs-page.configs-paused .configs-ambient__pulse,
.configs-page.configs-paused .configs-slider::before,
.configs-page.configs-paused .configs-slider::after{
  animation-play-state:paused !important;
}

/* Non-active slide images are decoded only when selected/preloaded by JS. */
.config-slide__photo.is-empty .config-slide__image:not([src]){
  display:none;
}

@media (max-width:900px){
  .configs-page{
    contain:layout paint;
  }

  .configs-slider::before,
  .configs-slider::after,
  .configs-ambient__orb,
  .configs-ambient__line,
  .configs-ambient__pulse{
    animation-play-state:paused !important;
  }
}

@media (prefers-reduced-motion:reduce){
  .configs-slider__track{
    transition:none !important;
  }
}


/* v88 — CTA бронирования под карточками конфигураций */
.config-slide__actions{
  margin-top:16px;
}

.config-slide__book{
  width:100%;
  min-height:62px;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 22px;
  border:1px solid color-mix(in srgb, var(--card-accent) 78%, rgba(255,255,255,.18));
  border-radius:18px;
  background:
    linear-gradient(105deg,
      color-mix(in srgb, var(--card-accent) 100%, #fff 0%),
      color-mix(in srgb, var(--card-accent) 72%, #050508 28%)
    );
  color:#fff;
  font-family:var(--font-display, inherit);
  font-size:.82rem;
  font-weight:800;
  letter-spacing:.055em;
  text-transform:uppercase;
  text-decoration:none;
  box-shadow:
    0 14px 30px color-mix(in srgb, var(--card-accent) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, filter .25s ease;
}

.config-slide__book:hover,
.config-slide__book:focus-visible{
  color:#fff;
  transform:translateY(-3px);
  filter:brightness(1.08);
  box-shadow:
    0 20px 42px color-mix(in srgb, var(--card-accent) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.config-slide__book:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

.config-slide__book i{
  font-size:1rem;
}

@media (max-width:720px){
  .config-slide__book{
    min-height:56px;
    border-radius:16px;
    padding:0 18px;
  }
}