/*
  Photolab styles
  Здесь находятся все кастомные эффекты и анимации.
  Tailwind utility-классы остаются в HTML, чтобы не ломать верстку.
*/

html {
  scroll-behavior: smooth;
}

.max-w-3xl {
  z-index: 1;
}
.hero-camera {
  position: absolute;
  /* 1. Возвращаем жесткую базовую позицию БЕЗ calc */
  right: -170px; 
  bottom: 0px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  z-index: 0;

  /* 2. Для жесткой привязки к мыши/окну убираем transition с позиции! */
  /* Оставляем анимацию ТОЛЬКО на opacity, чтобы при переходе брейкпоинта оно угасало мягко */
  transition: opacity 0.4s ease-in-out;
  
  /* Включаем аппаратное ускорение (карта рендерит отдельно) */
  will-change: transform, opacity;
  transform: translateZ(0); 
}
/* Начиная от 1280px камера начинает плавно плыть влево через transform */
@media (min-width: 0px) {
  .hero-camera {
    /* Движение через translateX работает на уровне графического процессора (GPU) 
       и не вызывает перерасчета геометрии страницы (Reflow), что полностью убирает дёрганье */
    transform: translateX(calc(-12vw + 50px)) translateZ(0);
  }
}

/* При ширине экрана от 1600px плавно затемняем */
@media (max-width: 1000px) {
  .hero-camera {
    opacity: 0.3; /* Анимация отработает плавно благодаря transition: opacity */
  }
}
.hero-camera img {
  width: 100%;
  max-width: 650px;
  transform: translateY(40px);
  object-fit: contain;
}
.glass {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .card-hover {
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .card-hover:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 40px -12px rgba(15, 31, 74, 0.18);
    }
    .btn-primary {
      transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -6px rgba(14, 165, 233, 0.45);
    }
    .btn-secondary {
      transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    .btn-secondary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px -6px rgba(15, 31, 74, 0.18);
    }
    .telegram-btn {
      transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    }
    .telegram-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px -6px rgba(56, 189, 248, 0.4);
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-camera__canvas {
        transition: none;
      }
    }