/*
 * Контейнер 3D-катушки. Фон прозрачный — модель стоит прямо на фоне блока.
 * Размер задаёт сайт (ширина и высота блока); без высоты блок займёт min-height.
 */
.spool {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.spool__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Без CSS-перехода прозрачности: модель видна с первого кадра,
     «выход» на сцену делает сама анимация (подъём и доворот на пружине). */
}

/* Нет WebGL или 3D не загрузилась — статичная картинка того же ракурса */
.spool.is-fallback {
  background: url("spool-fallback.png") center / contain no-repeat;
}
.spool.is-fallback .spool__canvas {
  display: none !important; /* Three.js ставит canvas inline display:block */
}