/* ============================================================
   mockups.css — CSS-мокапы устройств
   - Ноутбук: MacBook Pro 16" inspired, premium frontend
   - Смартфон: iPhone-стиль с Dynamic Island
   Целевое разрешение: 1920×1080 (landscape, тач-стенд)
   ============================================================ */

/* ---------- Базовый контейнер мокапа ----------
   Camera dolly transition: уходящий мокап «отъезжает в глубину»
   (scale 0.55 + сдвиг + blur), приходящий — наоборот, выезжает
   из глубины. Direction задаётся через CSS variable --dolly-dir
   из switcher.js (1 = ноут уходит влево/телефон приходит справа,
   -1 = наоборот). */
.mockup {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(0) scale(1);
  will-change: transform, opacity, filter;
  --dolly-dir: 1;
}

.mockup.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Во время dolly-перехода оба мокапа visible, но клики блокируем */
.mockup.is-entering,
.mockup.is-leaving {
  visibility: visible;
  pointer-events: none;
}

.mockup.is-leaving {
  animation: dollyOut 800ms cubic-bezier(0.83, 0, 0.17, 1) forwards;
}
.mockup.is-entering {
  animation: dollyIn 800ms cubic-bezier(0.83, 0, 0.17, 1) forwards;
}

@keyframes dollyOut {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
  60% {
    filter: blur(8px);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(-32% * var(--dolly-dir))) scale(0.50);
    filter: blur(14px);
  }
}

@keyframes dollyIn {
  0% {
    opacity: 0;
    transform: translateX(calc(32% * var(--dolly-dir))) scale(0.50);
    filter: blur(14px);
  }
  40% {
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

/* Уважение reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mockup.is-leaving,
  .mockup.is-entering {
    animation: none;
  }
}

/* ============================================================
   НОУТБУК — SVG frame + figma overlay (без chrome bar)
   ------------------------------------------------------------
   SVG laptop_realistic_2 (новый детальный, с клавиатурой и портами).
   viewBox обрезан до "15 110 570 380".
   Screen rect (id=Screen) после rotate(90)+translate:
     bbox = (72.94, 136.56) — (527.05, 392.21)
     size = 454.11 × 255.65, aspect ≈ 1.7763 (≈ 16:9)
   Координаты относительно нового viewBox:
     left   = 10.165%
     top    = 6.989%
     width  = 79.668%
     height = 67.276%
   Прототип Figma (16:9) ложится ровно во весь screen rect.
   ============================================================ */

.laptop-frame {
  position: relative;
  /* Height-driven sizing — высота диктует размер,
     ширина считается из aspect-ratio viewBox 570:380 (3:2). */
  height: min(86vh, 920px);
  aspect-ratio: 570 / 380;
  width: auto;
  max-width: 96vw;
  filter: drop-shadow(0 50px 80px rgba(0, 0, 0, 0.7));
  animation: laptopReveal 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: 80ms;
}
@keyframes laptopReveal {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* SVG-картинка ноутбука — занимает весь контейнер */
.laptop-frame__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Overlay-контейнер с Figma-iframe.
   Координаты привязаны к id=Screen внутри SVG. */
.laptop-frame__screen {
  position: absolute;
  left:   10.165%;
  top:    6.989%;
  width:  79.668%;
  height: 67.276%;
  overflow: hidden;
  background: #FFFFFF;
}

/* ============================================================
   БРАУЗЕР CHROME ВНУТРИ ДИСПЛЕЯ
   ------------------------------------------------------------
   Структура: chrome (фикс. высота) + viewport (16:9).
   ============================================================ */
/* .browser* и .figma-overlay* удалены — больше не используются.
   Прототип Figma теперь рендерится напрямую внутри
   .laptop-frame__screen без chrome bar. */

/* ============================================================
   СМАРТФОН (iPhone-стиль)
   ============================================================ */

.phone {
  position: relative;
  height: min(86vh, 880px);
  aspect-ratio: 9 / 19.5;
  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5))
    drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55))
    drop-shadow(0 60px 90px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 100px rgba(239, 49, 36, 0.22));
}

.phone__frame {
  position: absolute;
  inset: 0;
  border-radius: 56px;
  background:
    linear-gradient(155deg,
      #4A4C52 0%,
      #2E3036 25%,
      #1B1D22 60%,
      #0E0F12 100%);
  padding: 7px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.22),
    inset 2px 0 0 rgba(255, 255, 255, 0.08),
    inset -2px 0 0 rgba(0, 0, 0, 0.5),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.7);
}
.phone__frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 24%;
  border-radius: 56px 56px 0 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.10) 0%,
    transparent 100%);
  pointer-events: none;
}

.phone__btn {
  position: absolute;
  background: linear-gradient(90deg, #1A1A1C 0%, #2C2D30 50%, #1A1A1C 100%);
  border-radius: 2px;
  z-index: -1;
}
.phone__btn--silent   { left: -3px;  top: 14%; width: 4px; height: 32px; border-radius: 2px 0 0 2px; }
.phone__btn--vol-up   { left: -3px;  top: 22%; width: 4px; height: 56px; border-radius: 2px 0 0 2px; }
.phone__btn--vol-down { left: -3px;  top: 30%; width: 4px; height: 56px; border-radius: 2px 0 0 2px; }
.phone__btn--power    { right: -3px; top: 22%; width: 4px; height: 86px; border-radius: 0 2px 2px 0; }

.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.phone__island {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 116px;
  height: 34px;
  background: #000;
  border-radius: 24px;
  z-index: 10;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.phone__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  overflow: hidden;
}

/* ============================================================
   FIGMA FRAME + LOADER + OVERLAYS
   ============================================================ */

.figma-frame {
  position: absolute;
  inset: 0;
  background: #FAFAFA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.figma-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #FAFAFA;
}

.figma-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #F8F8F8;
  color: #6E6E73;
  font-size: 16px;
  z-index: 2;
  transition: opacity var(--dur-base) var(--ease-out);
}
.figma-loader.is-hidden { opacity: 0; pointer-events: none; }

.figma-loader__spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(239, 49, 36, 0.18);
  border-top-color: var(--alfa-red);
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.figma-loader__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #8E8E93;
  text-align: center;
  padding: 0 20px;
}
.figma-loader__placeholder svg { color: var(--alfa-red); margin-bottom: 6px; }
.figma-loader__placeholder p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #3A3A3C;
}
.figma-loader__placeholder small {
  font-size: 13px;
  color: #8E8E93;
}

/* ============================================================
   ACCESSIBILITY: уважение reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .laptop__lid,
  .laptop__hinge,
  .laptop__base { animation: none; }
}