:root {
    --ruler-color: #ffd400;       /* жёлтая линейка */
    --ruler-glow: rgba(255, 212, 0, 0.5);
  }

/* Прозрачность для 3D контейнера и окружения секции Technology */
#services,
#services .container,
#services .tech-container,
#services .tech-image-container {
  background: transparent !important;
  box-shadow: none !important;
}

/* Убираем затемняющую подложку панели внутри секции Technology */
#services.panel::before {
  background: transparent !important;
  opacity: 0 !important;
}

/* Сам контейнер приложения и canvas — без фона */
#services #app,
#services #app canvas,
#app { 
  background: transparent !important; 
}

  /* Контейнер линейки: рядом с сигаретой, по центру вертикально */
  .ruler {
    position: absolute;
    left: 23%;                      /* ставим линейку слева от сигареты */
    top: 40%;
    transform: translateY(-50%) scale(1.20); /* ещё пропорциональное увеличение */
    transform-origin: left center;
    width: 72px;                   /* зона для линии + подписи */
    height: min(60vh, calc(80% - 96px));
    pointer-events: none;          /* чтобы не мешать кликам по 3D */
    z-index: 10;
  }
  
  /* Вертикальная линия линейки */
  .ruler-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 36px;                    /* центр зоны по X */
    width: 2px;
    background: var(--ruler-color);
    box-shadow: 0 0 10px var(--ruler-glow);
    border-radius: 1px;
  }
  
  /* Общие стили для рисок и подписей */
  .tick {
    position: absolute;
    left: 0;                       /* начинаем с левого края */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    white-space: nowrap;
    width: 36px;                   /* ширина до вертикали линейки */
  }
  
  /* Маленькая горизонтальная риска влево от вертикали */
  .tick::after {
    content: "";
    width: 14px;
    height: 2px;
    background: var(--ruler-color);
    box-shadow: 0 0 8px var(--ruler-glow);
    border-radius: 1px;
  }
  
  /* Подпись */
  .tick span {
    font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* desktop */
    font-weight: bold;
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,.7), 0 0 8px rgba(255,255,255,0.5);
    opacity: 1;
    order: -1;
  }

  /* Планшеты */
  @media (max-width: 1024px) {
    .tick span { font-size: 20px; }
  }
  
  /* Позиции меток по высоте линейки
     120 мм — верхняя кромка
     82 мм — на 82/120 от низа => сверху это (1 - 82/120) * 100% ≈ 31.67%
  */
  .tick-120 { 
    top: -3%; 
    transform: translateY(-2px);
  }
  .tick-82  { 
    top: calc((1 - 91 / 120) * 100%); 
    transform: translateY(-1px);
  }

  /* Красивое выделение для метки 120mm */
  .tick-120 span {
    position: relative;
    font-weight: 900;
    animation: highlight-82 3s infinite;
  }

  .tick-120 span::after {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -8px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff6b35, var(--ruler-color), #ff6b35, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.6);
    animation: glow-82 3s infinite;
  }

  /* Красивое выделение для метки 82mm с анимацией */
  .tick-82 span {
    position: relative;
    font-weight: 900;
    animation: highlight-82 3s infinite;
  }

  .tick-82 span::after {
    content: '';
    position: absolute;
    left: -5px;
    right: -5px;
    bottom: -8px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff6b35, var(--ruler-color), #ff6b35, transparent);
    border-radius: 2px;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.6);
    animation: glow-82 3s infinite;
  }

  @keyframes highlight-82 {
    0%, 100% { 
      text-shadow: 0 2px 0 rgba(0,0,0,.9), 0 0 15px rgba(255,255,255,0.6);
    }
    50% { 
      text-shadow: 0 2px 0 rgba(0,0,0,.9), 0 0 25px var(--ruler-glow), 0 0 35px rgba(255, 107, 53, 0.8);
    }
  }

  @keyframes glow-82 {
    0%, 100% { 
      opacity: 0.8;
      transform: scaleX(1);
    }
    50% { 
      opacity: 1;
      transform: scaleX(1.1);
    }
  }

  /* Добавляем промежуточные деления на линейке */
  .ruler-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 8px,
      rgba(255, 255, 255, 0.3) 8px,
      rgba(255, 255, 255, 0.3) 9px,
      transparent 9px,
      transparent 18px,
      rgba(255, 255, 255, 0.5) 18px,
      rgba(255, 255, 255, 0.5) 20px
    );
  }
  
  /* Чуть адаптивности на узких экранах */
  @media (max-width: 560px) {
    /* Сместим линейку левее и немного упростим эффекты для лучшей производительности */
    .ruler { left: 36%; width: 72px; }
    .ruler-line { left: 30px; box-shadow: 0 0 6px var(--ruler-glow); }
    .tick { left: 0; gap: 6px; width: 30px; }
    .tick::after { width: 12px; box-shadow: 0 0 6px var(--ruler-glow); }
    .tick span { font-size: 18px; }

    /* Замедлим подсветку текста и отключим анимацию светящейся полосы под подписью */
    .tick-82 span, .tick-120 span { animation-duration: 4.5s; }
    .tick-82 span::after, .tick-120 span::after { animation: none; }
  }