/**
 * Декоративные интерактивные 3D-элементы (только дизайн).
 * Подключается после theme-ornaments.css.
 */

:root {
  --rm-parallax-x: 0;
  --rm-parallax-y: 0;
  --rm-deco-face: linear-gradient(145deg, #fffdf9 0%, #e8ddd0 42%, #cdbda8 100%);
  --rm-deco-edge: rgba(155, 44, 44, 0.38);
}

/* ——— Общая сцена и наклон по курсору ——— */
.rm-deco-3d__scene {
  perspective: 520px;
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
}

.rm-deco-3d__rig {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

[data-rm-deco-tilt]:hover .rm-deco-3d__rig,
[data-rm-deco-tilt]:focus-within .rm-deco-3d__rig {
  animation-play-state: paused;
}

/* ——— Куб ——— */
.rm-deco-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rm-deco-cube-spin 14s linear infinite;
}

.rm-deco-cube__face {
  position: absolute;
  inset: 0;
  border: 1px solid var(--rm-deco-edge);
  background:
    url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 1l1 2h2l-2 1 1 2-2-1-2 1 1-2-2-1h2z' fill='%239b2c2c' fill-opacity='0.18'/%3E%3C/svg%3E"),
    var(--rm-deco-face);
  backface-visibility: hidden;
}

.rm-deco-cube--sm { --rm-deco-z: 18px; }
.rm-deco-cube--xs { --rm-deco-z: 11px; }
.rm-deco-cube--md { --rm-deco-z: 28px; }
.rm-deco-cube--lg { --rm-deco-z: 36px; }

.rm-deco-cube__face--front  { transform: translateZ(var(--rm-deco-z, 28px)); }
.rm-deco-cube__face--back   { transform: rotateY(180deg) translateZ(var(--rm-deco-z, 28px)); }
.rm-deco-cube__face--right  { transform: rotateY(90deg) translateZ(var(--rm-deco-z, 28px)); }
.rm-deco-cube__face--left   { transform: rotateY(-90deg) translateZ(var(--rm-deco-z, 28px)); }
.rm-deco-cube__face--top    { transform: rotateX(90deg) translateZ(var(--rm-deco-z, 28px)); }
.rm-deco-cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--rm-deco-z, 28px)); }

.rm-deco-cube--fast { animation-duration: 8s; }
.rm-deco-cube--slow { animation-duration: 22s; animation-direction: reverse; }

@keyframes rm-deco-cube-spin {
  from { transform: rotateX(-18deg) rotateY(0deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg); }
}

/* ——— «Алмаз» / октаэдр ——— */
.rm-deco-gem {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: rm-deco-gem-float 6s ease-in-out infinite;
}

.rm-deco-gem__half {
  position: absolute;
  left: 50%;
  width: 72%;
  height: 50%;
  margin-left: -36%;
  transform-style: preserve-3d;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.rm-deco-gem__half--top {
  top: 0;
  background: linear-gradient(160deg, #fffef8, #d4b06a 55%, #9b2c2c);
  transform-origin: 50% 100%;
  transform: rotateX(32deg);
  filter: drop-shadow(0 4px 8px rgba(155, 44, 44, 0.2));
}

.rm-deco-gem__half--bottom {
  bottom: 0;
  background: linear-gradient(200deg, #c23a3a, #6e1f22 60%, #2a1812);
  transform-origin: 50% 0%;
  transform: rotateX(-32deg);
  opacity: 0.92;
}

@keyframes rm-deco-gem-float {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50% { transform: translateY(-6px) rotateY(180deg); }
}

/* ——— Орбитальные кольца ——— */
.rm-deco-orbit {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.rm-deco-orbit__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  transform-style: preserve-3d;
}

.rm-deco-orbit__ring--1 {
  border-color: rgba(184, 146, 63, 0.55);
  transform: rotateX(68deg);
  animation: rm-deco-orbit-spin 9s linear infinite;
}

.rm-deco-orbit__ring--2 {
  inset: 12%;
  border-color: rgba(155, 44, 44, 0.45);
  transform: rotateX(68deg) rotateZ(60deg);
  animation: rm-deco-orbit-spin 12s linear infinite reverse;
}

.rm-deco-orbit__ring--3 {
  inset: 24%;
  border-color: rgba(122, 40, 64, 0.35);
  border-style: dashed;
  transform: rotateX(68deg) rotateZ(-40deg);
  animation: rm-deco-orbit-spin 16s linear infinite;
}

@keyframes rm-deco-orbit-spin {
  from { transform: rotateX(68deg) rotateZ(0deg); }
  to   { transform: rotateX(68deg) rotateZ(360deg); }
}

/* ——— Плавающий фоновый слой ——— */
.rm-deco-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.rm-deco-ambient__item {
  position: absolute;
  filter: drop-shadow(0 10px 24px rgba(42, 24, 18, 0.12));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.rm-deco-ambient__item--1 {
  width: 56px;
  height: 56px;
  top: 14%;
  left: 6%;
  transform: translate(
    calc(var(--rm-parallax-x, 0) * 18px),
    calc(var(--rm-parallax-y, 0) * 12px)
  );
}

.rm-deco-ambient__item--2 {
  width: 44px;
  height: 44px;
  top: 28%;
  right: 8%;
  transform: translate(
    calc(var(--rm-parallax-x, 0) * -14px),
    calc(var(--rm-parallax-y, 0) * 10px)
  );
}

.rm-deco-ambient__item--3 {
  width: 72px;
  height: 72px;
  bottom: 22%;
  left: 4%;
  opacity: 0.85;
  transform: translate(
    calc(var(--rm-parallax-x, 0) * 22px),
    calc(var(--rm-parallax-y, 0) * -16px)
  );
}

.rm-deco-ambient__item--4 {
  width: 40px;
  height: 40px;
  bottom: 38%;
  right: 5%;
  transform: translate(
    calc(var(--rm-parallax-x, 0) * -20px),
    calc(var(--rm-parallax-y, 0) * -8px)
  );
}

.rm-deco-ambient__item--5 {
  width: 100px;
  height: 100px;
  top: 52%;
  right: 12%;
  opacity: 0.55;
  transform: translate(
    calc(var(--rm-parallax-x, 0) * 10px),
    calc(var(--rm-parallax-y, 0) * 14px)
  );
}

/* ——— Шапка: ряд мини-3D ——— */
.rm-deco-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 0 auto 18px;
  max-width: 360px;
}

.rm-deco-header__item {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  cursor: default;
  pointer-events: auto;
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.5);
  border: 1px solid rgba(155, 44, 44, 0.12);
  box-shadow: 0 8px 20px rgba(42, 24, 18, 0.08);
  padding: 6px;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.rm-deco-header__item:hover,
.rm-deco-header__item:focus-visible {
  border-color: rgba(184, 146, 63, 0.45);
  box-shadow: 0 12px 28px rgba(155, 44, 44, 0.15), var(--rm-glow-gold);
  outline: none;
}

.rm-deco-header__item--wide {
  width: 64px;
  height: 64px;
}

/* ——— Углы карты: декоративные 3D-гемы (на рамке, не на карте) ——— */
.rm-map-card__deco-3d {
  position: absolute;
  width: 30px;
  height: 30px;
  z-index: 4;
  pointer-events: none;
  padding: 0;
  border-radius: 8px;
  background: rgba(255, 253, 249, 0.82);
  border: 1px solid rgba(184, 146, 63, 0.22);
  box-shadow: 0 4px 12px rgba(42, 24, 18, 0.08);
  overflow: hidden;
  transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.rm-map-card__deco-3d[data-rm-deco-tilt] {
  position: absolute;
}

.rm-map-card__deco-3d .rm-deco-3d__scene {
  perspective: 280px;
}

.rm-map-card__deco-3d .rm-deco-cube {
  animation-duration: 16s;
}

.rm-map-card__deco-3d--tl { top: 14px; left: 14px; right: auto; bottom: auto; }
.rm-map-card__deco-3d--tr { top: 14px; right: 14px; left: auto; bottom: auto; }
.rm-map-card__deco-3d--bl { bottom: 14px; left: 14px; top: auto; right: auto; }
.rm-map-card__deco-3d--br { bottom: 14px; right: 14px; top: auto; left: auto; }

.rm-map-card:hover .rm-map-card__deco-3d {
  box-shadow: 0 6px 16px rgba(155, 44, 44, 0.14);
  opacity: 1;
}

.rm-map-card:hover .rm-deco-cube--corner {
  animation-duration: 8s;
}

/* ——— Шаг 3: бейдж 3D ——— */
.rm-page__step--3d {
  position: relative;
}

.rm-page__step-3d {
  position: absolute;
  top: -10px;
  right: -6px;
  width: 32px;
  height: 32px;
  pointer-events: auto;
  z-index: 2;
}

/* ——— Мост к футеру: центральная 3D-сцена ——— */
.rm-section-bridge__deco {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto 10px;
  pointer-events: auto;
  cursor: default;
}

.rm-section-bridge__deco .rm-deco-orbit {
  position: absolute;
  inset: 0;
}

.rm-section-bridge__deco .rm-deco-gem {
  position: absolute;
  width: 36px;
  height: 44px;
  left: 50%;
  top: 50%;
  margin: -22px 0 0 -18px;
  z-index: 2;
}

.rm-section-bridge__deco .rm-deco-3d__rig {
  width: 100%;
  height: 100%;
}

/* ——— Футер: декоративные кольца вокруг модели ——— */
.rm-site-footer__model-deco {
  position: absolute;
  inset: -12px 8px auto;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}

.rm-site-footer__model-deco .rm-deco-orbit__ring--1 {
  animation-duration: 14s;
}

.rm-site-footer__model-deco .rm-deco-orbit__ring--2 {
  animation-duration: 19s;
}

.rm-site-footer:hover .rm-site-footer__model-deco {
  opacity: 0.95;
}

.rm-site-footer:hover .rm-deco-orbit__ring--1 {
  animation-duration: 7s;
}

/* ——— Подсветка при наведении на интерактивные сцены ——— */
[data-rm-deco-tilt]::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 146, 63, 0.18), transparent 68%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: -1;
}

.rm-deco-header__item,
.rm-section-bridge__deco,
.rm-page__step-3d {
  position: relative;
}

.rm-deco-ambient__item[data-rm-deco-tilt] {
  position: absolute;
}

.rm-map-card__deco-3d[data-rm-deco-tilt]::after {
  display: none;
}

[data-rm-deco-tilt]:not(.rm-map-card__deco-3d):hover::after,
[data-rm-deco-tilt]:not(.rm-map-card__deco-3d):focus-within::after {
  opacity: 1;
}

/* Контент поверх декора */
.rm-page__header,
.rm-page__main,
.rm-section-bridge,
.rm-page__footer-mount,
.rm-page__bottom {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .rm-deco-ambient__item--1,
  .rm-deco-ambient__item--3,
  .rm-deco-ambient__item--5 {
    opacity: 0.35;
    transform: scale(0.85);
  }

  .rm-map-card__deco-3d {
    width: 28px;
    height: 28px;
  }

  .rm-deco-header {
    gap: 16px;
  }

  .rm-deco-header__item {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 640px) {
  .rm-deco-ambient { display: none; }
  .rm-deco-header { display: none; }
  .rm-map-card__deco-3d { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rm-deco-cube,
  .rm-deco-gem,
  .rm-deco-orbit__ring,
  .rm-deco-ambient__item {
    animation: none !important;
  }

  .rm-deco-3d__rig {
    transition: none;
  }

  .rm-map-card:hover .rm-deco-cube--corner {
    animation: none;
  }
}