/* Ремонт и обслуживание — разобранный iPhone (взрыв-схема) и шестерёнки */

.rp-stage { --s: .92; }
.rp-world { transform: scale(var(--s)) rotateX(58deg) rotateZ(-34deg) translate3d(0px, -125px, -125px);
  animation: rpSway 10s ease-in-out infinite alternate; }
@keyframes rpSway {
  from { transform: scale(var(--s)) rotateX(56deg) rotateZ(-40deg) translate3d(0px, -125px, -125px); }
  to   { transform: scale(var(--s)) rotateX(60deg) rotateZ(-28deg) translate3d(0px, -125px, -125px); }
}

/* коврик мастера */
.rp-mat { position: absolute; left: -300px; top: -280px; width: 600px; height: 680px; border-radius: 40px; transform: translateZ(-2px);
  background:
    linear-gradient(rgba(227,195,156,.09) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(227,195,156,.09) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(160deg, #19191c, #0d0d0f);
  box-shadow: inset 0 0 0 2px rgba(227,195,156,.3);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse at center, #000 40%, transparent 100%); }

/* направляющие */
.vl { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; transform: translate3d(var(--x), var(--y), 0); }
.vl i { position: absolute; left: -1px; top: -260px; width: 2px; height: 260px; display: block; transform-origin: 50% 100%;
  background: repeating-linear-gradient(180deg, rgba(227,195,156,.85) 0 5px, transparent 5px 11px); }
.vl .va { transform: rotateX(-90deg); }
.vl .vb { transform: rotateZ(90deg) rotateX(-90deg); }

/* слои телефона */
.pl { position: absolute; left: -75px; top: -150px; width: 150px; height: 300px; border-radius: 30px;
  transform: translateZ(var(--z0)); animation: rpBreath 9s ease-in-out infinite; animation-delay: -4s; }
.pl b { position: absolute; display: block; }
@keyframes rpBreath {
  0%   { transform: translateZ(var(--z0)); }
  38%  { transform: translateZ(var(--z1)); }
  62%  { transform: translateZ(var(--z1)); }
  100% { transform: translateZ(var(--z0)); }
}

.rp-back { background: linear-gradient(145deg, #3d3d42, #1c1c1f 60%, #2a2a2e); box-shadow: inset 0 0 0 2px #4b4b51; }
.rp-back .cam { left: 12px; top: 12px; width: 64px; height: 64px; border-radius: 18px; background: #0d0d0e; box-shadow: inset 0 0 0 2px #5b5b61; }
.rp-back .cam:before, .rp-back .cam:after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #35506b, #070b10 70%); box-shadow: 0 0 0 3px #26262a; }
.rp-back .cam:before { left: 8px; top: 8px; }
.rp-back .cam:after  { left: 34px; top: 22px; }
.rp-back .logo { left: 28px; top: 118px; width: 94px; height: 68px; opacity: .9;
  background: url("../assets/logo-header.png") center / contain no-repeat; }

.rp-board { left: -67px; top: -140px; width: 134px; height: 280px; border-radius: 22px;
  background: linear-gradient(160deg, #1b1b20, #0e0e11); box-shadow: inset 0 0 0 2px #3a3326; }
.rp-board .trace { inset: 0; border-radius: 22px;
  background:
    repeating-linear-gradient(90deg, rgba(201,160,108,.16) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(0deg, rgba(201,160,108,.1) 0 1px, transparent 1px 11px); }
.rp-board .ic { background: linear-gradient(135deg, #2c2c31, #0c0c0d); border: 1.5px solid #c9a06c; border-radius: 4px;
  box-shadow: 0 0 8px rgba(201,160,108,.25); }
.rp-board .ic:first-child { box-shadow: 0 0 18px rgba(227,195,156,.45), inset 0 0 12px rgba(201,160,108,.35); }

.rp-batt { left: -55px; top: -62px; width: 110px; height: 196px; border-radius: 14px;
  background: linear-gradient(160deg, #e8e2d7, #b6ae9f); box-shadow: inset 0 0 0 2px #8d8678; }
.rp-batt .cell { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.rp-batt .cell b { position: static; font: 700 15px var(--mono); letter-spacing: .08em; color: #3b352a; }
.rp-batt .cell u { display: block; width: 46px; height: 5px; border-radius: 3px; background: #3b352a; opacity: .5;
  box-shadow: 0 12px 0 #3b352a, 0 24px 0 #3b352a; text-decoration: none; }

.rp-disp { left: -73px; top: -148px; width: 146px; height: 296px; border-radius: 28px;
  background: radial-gradient(120% 80% at 30% 18%, #1f2d3e, #07080a 62%); box-shadow: inset 0 0 0 3px #101012, 0 0 0 2px #000; }
.rp-disp .ico { left: 35px; top: 112px; width: 76px; height: 60px; opacity: .85;
  background: url("../assets/logo-header.png") center / contain no-repeat; }

.rp-glass { background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.03) 42%, rgba(255,255,255,.1));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.4), 0 0 26px rgba(227,195,156,.2); }
.rp-glass .isl { left: 50%; top: 12px; width: 54px; height: 16px; margin-left: -27px; border-radius: 10px; background: #000; }
.rp-glass .gl2 { inset: 0; border-radius: 30px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.2) 38%, transparent 46%); }

/* винтики */
.scr { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; display: block;
  background:
    linear-gradient(#2a2118, #2a2118) center / 10px 2px no-repeat,
    linear-gradient(#2a2118, #2a2118) center / 2px 10px no-repeat,
    radial-gradient(circle at 35% 35%, #e3c39c, #8a6733);
  transform: translate3d(var(--x), var(--y), 300px); animation: rpScrew var(--d) ease-in-out infinite alternate; }
@keyframes rpScrew {
  from { transform: translate3d(var(--x), var(--y), 288px) rotate(0deg); }
  to   { transform: translate3d(var(--x), var(--y), 318px) rotate(200deg); }
}

/* шестерёнки */
.gear { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translate3d(var(--x), var(--y), 0); }
.gspin { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  animation-duration: 12s; animation-timing-function: linear; animation-iteration-count: infinite; }
.gspin[style*="rpSpinB"] { animation-duration: 7.5s; }
@keyframes rpSpinA { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes rpSpinB { from { transform: rotate(18deg); } to { transform: rotate(-342deg); } }
.gspin > i { position: absolute; display: block; left: calc(var(--g) / -2); top: calc(var(--g) / -2); width: var(--g); height: var(--g);
  transform: translateZ(var(--z)); backface-visibility: hidden; }
.gspin .gl, .gspin .gtop {
  clip-path: var(--poly);
  -webkit-mask-image: radial-gradient(circle, transparent 0 17%, #000 18%); mask-image: radial-gradient(circle, transparent 0 17%, #000 18%);
}
.gspin .gl   { background: linear-gradient(rgba(0,0,0,var(--k)), rgba(0,0,0,var(--k))), linear-gradient(135deg, #d9b27a, #8a6733); }
.gspin .gtop { background: var(--ea-grad); }
.gspin .ghub { left: calc(var(--g) * -.115); top: calc(var(--g) * -.115); width: calc(var(--g) * .23); height: calc(var(--g) * .23);
  border-radius: 50%; background: radial-gradient(circle, #0a0a0a 0 55%, #c9a06c 58%, #7a5a2c 100%); }

/* масштаб под ширину колонки */
@media (max-width: 1320px) { .rp-stage { --s: .9; } }
@media (max-width: 1100px) { .rp-stage { --s: .76; } }
@media (max-width: 960px)  { .rp-stage { --s: .66; } }
@media (max-width: 820px)  { .rp-stage { --s: .92; } }
@media (max-width: 640px)  { .rp-stage { --s: .86; } }
@media (max-width: 480px)  { .rp-stage { --s: .62; } }
@media (max-width: 400px)  { .rp-stage { --s: .54; } }

@media (prefers-reduced-motion: reduce) {
  .rp-world, .pl, .scr, .gspin { animation: none; }
}