.cihm-morph-block,
.cihm-morph-block * {
  box-sizing: border-box;
}

.cihm-morph-block {
  --cihm-size: clamp(260px, 48vw, 296px);
  --cihm-mobile-size: min(72vw, 292px);
  --cihm-max-width: 100%;
  --cihm-max-height: 400px;
  --cihm-frame-space: 104px;
  --cihm-mobile-frame-space: 86px;
  --cihm-effective-size: min(var(--cihm-size), calc(var(--cihm-max-height) - var(--cihm-frame-space)));
  --cihm-bg: #f6f0e8;
  --cihm-ring: rgba(255,255,255,0.48);
  --cihm-frame-one: rgba(230,179,106,0.96);
  --cihm-frame-two: rgba(15,107,95,0.82);
  --cihm-shadow: 0 30px 70px rgba(24, 24, 24, 0.18);
  --cihm-transition: 1000ms;
  position: relative;
  width: 100%;
  max-width: var(--cihm-max-width);
  margin: 0 auto;
  max-height: var(--cihm-max-height);
  overflow: visible;
}

.cihm-morph-block__inner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--cihm-max-height);
  min-height: 0;
  max-height: var(--cihm-max-height);
  padding: clamp(30px, 5vw, 50px);
  outline: none;
}

.cihm-morph-block__shape-wrap {
  position: relative;
  width: min(100%, var(--cihm-effective-size));
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.cihm-morph-block__outer-frame {
  position: absolute;
  inset: -16px;
  border: 3px solid var(--cihm-frame-one);
  border-radius: 50% 50% 47% 53% / 49% 45% 55% 51%;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transform-origin: center center;
  will-change: border-radius, transform;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .55),
    0 0 26px rgba(230, 179, 106, .42);
}

.cihm-morph-block__outer-frame--one {
  inset: -18px;
  border-color: var(--cihm-frame-one);
  animation: cihmFrameMorphOne 9.5s ease-in-out infinite;
}

.cihm-morph-block__outer-frame--two {
  inset: -42px;
  opacity: .95;
  border-color: var(--cihm-frame-two);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .45),
    0 0 34px rgba(15, 107, 95, .32);
  animation: cihmFrameMorphTwo 14s ease-in-out infinite reverse;
}

.cihm-morph-block__shape {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--cihm-bg);
  box-shadow: var(--cihm-shadow);
  animation: cihmBlobMorph 8.5s cubic-bezier(.45,.05,.55,.95) infinite;
  transform-origin: center center;
  will-change: border-radius, transform;
  z-index: 2;
}

.cihm-morph-block__shape::before {
  content: "";
  position: absolute;
  inset: 7%;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.16);
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.cihm-morph-block__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity var(--cihm-transition) ease, transform calc(var(--cihm-transition) + 1200ms) ease;
  transform: scale(1.06);
  will-change: opacity, transform;
}

.cihm-morph-block__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

.cihm-morph-block__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cihm-morph-block--fit-contain .cihm-morph-block__slide img {
  object-fit: contain;
}

.cihm-morph-block__overlay,
.cihm-morph-block__ring,
.cihm-morph-block__glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.cihm-morph-block__overlay {
  z-index: 2;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.28), transparent 30%),
    radial-gradient(circle at 72% 74%, rgba(255,255,255,0.16), transparent 28%),
    linear-gradient(150deg, rgba(255,255,255,0.08), rgba(0,0,0,0.08));
  mix-blend-mode: screen;
}

.cihm-morph-block__ring {
  inset: -10px;
  z-index: 0;
  border: 1px solid var(--cihm-ring);
  opacity: .92;
  animation: cihmBlobMorphSecondary 15s ease-in-out infinite reverse;
}

.cihm-morph-block__glow {
  inset: auto;
  width: 46%;
  height: 46%;
  bottom: -8%;
  right: 2%;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 214, 153, 0.32) 0%, rgba(255, 214, 153, 0.12) 42%, transparent 72%);
  filter: blur(18px);
  opacity: .95;
  transform: translate3d(0,0,0);
  animation: cihmGlowMove 10s ease-in-out infinite;
}

.cihm-morph-block--no-ring .cihm-morph-block__ring,
.cihm-morph-block--single .cihm-morph-block__ring {
  display: none;
}

.cihm-morph-block--no-frames .cihm-morph-block__outer-frame,
.cihm-morph-block--single .cihm-morph-block__outer-frame {
  display: none;
}

.cihm-morph-block--no-glow .cihm-morph-block__glow {
  display: none;
}

.cihm-morph-block__nav {
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  pointer-events: none;
  padding: 0 8px;
}

.cihm-morph-block__arrow {
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(8px);
  color: #1e1e1e;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  transition: transform .24s ease, background .24s ease, box-shadow .24s ease;
}

.cihm-morph-block__arrow:hover,
.cihm-morph-block__arrow:focus-visible {
  background: rgba(255,255,255,0.98);
  transform: scale(1.05);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
  outline: none;
}

.cihm-morph-block__dots {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 4;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.cihm-morph-block__dot {
  appearance: none;
  border: 0;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.24);
  padding: 0;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease;
}

.cihm-morph-block__dot.is-active,
.cihm-morph-block__dot:hover,
.cihm-morph-block__dot:focus-visible {
  background: rgba(0,0,0,0.72);
  transform: scale(1.2);
  outline: none;
}

.cihm-morph-block__counter {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 5;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 10px 12px;
}

.cihm-morph-block__counter-sep {
  opacity: .6;
  padding: 0 4px;
}

@keyframes cihmBlobMorph {
  0% {
    border-radius: 50% 50% 47% 53% / 49% 45% 55% 51%;
  }
  12% {
    border-radius: 40% 60% 48% 52% / 60% 40% 58% 42%;
  }
  25% {
    border-radius: 61% 39% 55% 45% / 42% 60% 40% 58%;
  }
  38% {
    border-radius: 42% 58% 39% 61% / 56% 38% 62% 44%;
  }
  50% {
    border-radius: 63% 37% 58% 42% / 39% 62% 38% 61%;
  }
  63% {
    border-radius: 45% 55% 36% 64% / 63% 41% 59% 37%;
  }
  76% {
    border-radius: 58% 42% 64% 36% / 41% 57% 43% 59%;
  }
  88% {
    border-radius: 39% 61% 46% 54% / 54% 36% 64% 46%;
  }
  100% {
    border-radius: 50% 50% 47% 53% / 49% 45% 55% 51%;
  }
}

@keyframes cihmBlobMorphSecondary {
  0% {
    border-radius: 52% 48% 53% 47% / 46% 54% 46% 54%;
    transform: rotate(0deg);
  }
  33% {
    border-radius: 43% 57% 42% 58% / 59% 41% 58% 42%;
    transform: rotate(-3deg);
  }
  66% {
    border-radius: 59% 41% 55% 45% / 43% 57% 42% 58%;
    transform: rotate(3deg);
  }
  100% {
    border-radius: 52% 48% 53% 47% / 46% 54% 46% 54%;
    transform: rotate(0deg);
  }
}

@keyframes cihmFrameMorphOne {
  0% {
    border-radius: 51% 49% 47% 53% / 48% 46% 54% 52%;
    transform: rotate(0deg) scale(1.015);
  }
  18% {
    border-radius: 38% 62% 51% 49% / 62% 39% 61% 38%;
    transform: rotate(-5deg) scale(1.025, .995);
  }
  36% {
    border-radius: 64% 36% 59% 41% / 41% 63% 37% 59%;
    transform: rotate(4deg) scale(.995, 1.026);
  }
  54% {
    border-radius: 43% 57% 34% 66% / 59% 36% 64% 41%;
    transform: rotate(-3deg) scale(1.032, .988);
  }
  72% {
    border-radius: 58% 42% 66% 34% / 38% 58% 42% 62%;
    transform: rotate(5deg) scale(.99, 1.024);
  }
  100% {
    border-radius: 51% 49% 47% 53% / 48% 46% 54% 52%;
    transform: rotate(0deg) scale(1.015);
  }
}

@keyframes cihmFrameMorphTwo {
  0% {
    border-radius: 48% 52% 55% 45% / 54% 43% 57% 46%;
    transform: rotate(6deg) scale(1.03);
  }
  16% {
    border-radius: 61% 39% 44% 56% / 39% 60% 40% 61%;
    transform: rotate(-4deg) scale(1.045, 1.005);
  }
  34% {
    border-radius: 36% 64% 62% 38% / 63% 36% 64% 37%;
    transform: rotate(7deg) scale(1.01, 1.05);
  }
  51% {
    border-radius: 66% 34% 38% 62% / 42% 66% 34% 58%;
    transform: rotate(-6deg) scale(1.052, .995);
  }
  70% {
    border-radius: 42% 58% 35% 65% / 58% 33% 67% 42%;
    transform: rotate(3deg) scale(1.005, 1.045);
  }
  100% {
    border-radius: 48% 52% 55% 45% / 54% 43% 57% 46%;
    transform: rotate(6deg) scale(1.03);
  }
}

@keyframes cihmFloat {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-6px) translateX(1px); }
}

@keyframes cihmGlowMove {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: .88; }
  50% { transform: translate(-4%, 4%) scale(1.08); opacity: 1; }
}

@media (max-width: 767px) {
  .cihm-morph-block {
    --cihm-effective-size: min(var(--cihm-mobile-size), calc(var(--cihm-max-height) - var(--cihm-mobile-frame-space)));
  }

  .cihm-morph-block__inner {
    height: var(--cihm-max-height);
    min-height: 0;
    max-height: var(--cihm-max-height);
    padding: clamp(28px, 8vw, 42px);
  }

  .cihm-morph-block__shape-wrap {
    width: min(100%, var(--cihm-effective-size));
  }

  .cihm-morph-block__outer-frame {
    border-width: 2px;
  }

  .cihm-morph-block__outer-frame--one {
    inset: -13px;
  }

  .cihm-morph-block__outer-frame--two {
    inset: -27px;
  }

  .cihm-morph-block__nav {
    padding: 0 2px;
  }

  .cihm-morph-block__arrow {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }

  .cihm-morph-block__dots {
    gap: 8px;
    padding: 9px 12px;
  }

  .cihm-morph-block__counter {
    top: 6px;
    right: 7px;
    font-size: 12px;
    padding: 9px 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cihm-morph-block__shape,
  .cihm-morph-block__ring,
  .cihm-morph-block__outer-frame,
  .cihm-morph-block__glow,
  .cihm-morph-block__slide {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}


/* Мобильный performance-режим: сохраняем живую круглую форму, но уменьшаем тяжёлые перерисовки. */
.cihm-morph-block {
  contain: layout style;
}

.cihm-morph-block__inner {
  content-visibility: auto;
  contain-intrinsic-size: 400px 400px;
}

@media (max-width: 767px) {
  .cihm-morph-block {
    --cihm-transition: var(--cihm-mobile-transition, 650ms);
  }

  .cihm-morph-block__inner {
    contain: layout paint style;
    contain-intrinsic-size: 400px 400px;
  }

  .cihm-morph-block__shape {
    animation-name: cihmBlobMorphMobile;
    animation-duration: 12s;
    animation-timing-function: ease-in-out;
    box-shadow: 0 18px 42px rgba(24, 24, 24, 0.14);
    will-change: border-radius;
  }

  .cihm-morph-block__outer-frame {
    box-shadow: none;
    will-change: border-radius, transform;
  }

  .cihm-morph-block__outer-frame--one {
    animation-name: cihmFrameMorphMobileOne;
    animation-duration: 14s;
    opacity: .96;
  }

  .cihm-morph-block__outer-frame--two {
    animation-name: cihmFrameMorphMobileTwo;
    animation-duration: 19s;
    opacity: .86;
  }

  .cihm-morph-block__ring {
    animation-duration: 22s;
    opacity: .58;
  }

  .cihm-morph-block__glow {
    display: none;
  }

  .cihm-morph-block__overlay {
    mix-blend-mode: normal;
    opacity: .45;
    background: linear-gradient(150deg, rgba(255,255,255,0.10), rgba(0,0,0,0.05));
  }

  .cihm-morph-block__shape::before {
    mix-blend-mode: normal;
    opacity: .45;
  }

  .cihm-morph-block__slide {
    transition: opacity var(--cihm-transition) ease;
    transform: none;
    will-change: opacity;
  }

  .cihm-morph-block__slide.is-active {
    transform: none;
  }

  .cihm-morph-block__arrow,
  .cihm-morph-block__dots,
  .cihm-morph-block__counter {
    backdrop-filter: none;
  }
}

@keyframes cihmBlobMorphMobile {
  0% {
    border-radius: 50% 50% 47% 53% / 49% 45% 55% 51%;
  }
  33% {
    border-radius: 43% 57% 49% 51% / 58% 42% 55% 45%;
  }
  66% {
    border-radius: 58% 42% 55% 45% / 43% 58% 42% 57%;
  }
  100% {
    border-radius: 50% 50% 47% 53% / 49% 45% 55% 51%;
  }
}

@keyframes cihmFrameMorphMobileOne {
  0% {
    border-radius: 51% 49% 47% 53% / 48% 46% 54% 52%;
    transform: rotate(0deg) scale(1.012);
  }
  50% {
    border-radius: 42% 58% 51% 49% / 58% 42% 56% 44%;
    transform: rotate(-3deg) scale(1.025, .997);
  }
  100% {
    border-radius: 51% 49% 47% 53% / 48% 46% 54% 52%;
    transform: rotate(0deg) scale(1.012);
  }
}

@keyframes cihmFrameMorphMobileTwo {
  0% {
    border-radius: 48% 52% 55% 45% / 54% 43% 57% 46%;
    transform: rotate(4deg) scale(1.028);
  }
  50% {
    border-radius: 57% 43% 47% 53% / 43% 57% 45% 55%;
    transform: rotate(-3deg) scale(1.04, 1.01);
  }
  100% {
    border-radius: 48% 52% 55% 45% / 54% 43% 57% 46%;
    transform: rotate(4deg) scale(1.028);
  }
}