/* Shared product scroll presentation, with the circular saw contact point visible. */
.cutting-scene-track .cutting-photo-intro {
  height: min(650px, calc(100svh - 155px));
  min-height: 470px;
  background: #151b21;
  color: #fff;
}
.cutting-scene-track .cold-photo-scene {
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  background-image: url('/assets/material-cutting-circular-saw-v2.jpg?av=6a169e802af27d36');
  background-position: center 42%;
  background-size: cover;
  transform-origin: 53% 42%;
  transform: scale(1.24);
  mask-image: none;
}
.cutting-scene-track .cutting-photo-intro::after {
  background: linear-gradient(180deg, #071018d9 0%, #071018a3 28%, #07101825 66%, #07101833);
}
.cutting-photo-intro .cold-photo-copy {
  max-width: 720px;
}
.cutting-photo-intro .cold-photo-copy h1 {
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.2;
  letter-spacing: -2px;
}
.cutting-photo-intro .cold-photo-copy > p:not(.eyebrow) {
  font-size: 18px;
  line-height: 1.8;
  color: #f0f3f6;
  max-width: 680px;
}
@media (max-width: 700px) {
  .cutting-scene-track .cutting-photo-intro {
    height: 650px;
    min-height: 0;
    padding: 28px 22px;
  }
  .cutting-scene-track .cold-photo-scene {
    inset: auto 0 0;
    height: 400px;
    background-position: 52% center;
    transform-origin: 52% 42%;
    transform: scale(1.12);
    mask-image: linear-gradient(180deg, transparent, #000 15%);
  }
  .cutting-scene-track .cutting-photo-intro::after {
    background: linear-gradient(180deg, #151b21 0%, #151b21ed 28%, #151b2133 60%, transparent);
  }
  .cutting-photo-intro .cold-photo-copy > p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cutting-scene-track .cold-photo-scene {
    transform: none !important;
    will-change: auto;
  }
}