#bur-drill-intro {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  animation: burIntroBg 1.15s ease forwards;
}

#bur-drill-intro.bur-drill-intro--hide {
  animation: burIntroHide .28s ease forwards;
}

.burDrillIntro {
  width: min(92vw, 430px);
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 16px;
  text-align: center;
}

.burDrillIntro__top {
  font: 900 clamp(24px, 7vw, 42px)/1.05 Arial, system-ui, sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 18px rgba(255,255,255,.22);
  animation: burIntroTop 1.35s ease forwards;
}

.burDrillIntro__bottom {
  font: 900 clamp(20px, 6vw, 34px)/1.05 Arial, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #000;
  opacity: .72;
  animation: burIntroBottom 1.55s ease forwards;
}

.burDrill {
  --scale: .74;
  width: min(100%, 360px);
  height: 318px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  contain: layout paint style;
  overflow: hidden;
}

.burDrill__frame {
  position: relative;
  width: 300px;
  height: 440px;
  transform: scale(var(--scale));
  transform-origin: center;
}

.burDrill__frame *,
.burDrill__frame *::before,
.burDrill__frame *::after {
  position: absolute;
  box-sizing: border-box;
}

.burDrill__sky {
  width: 300px;
  height: 150px;
  background: linear-gradient(180deg, #7fd0ff 0%, #cbeeff 100%);
  left: 0;
  top: 0;
  border-radius: 18px 18px 0 0;
}

.burDrill__ground {
  width: 300px;
  height: 4px;
  background: #36c878;
  left: 0;
  top: 150px;
  z-index: 5;
}

.burDrill__soil {
  width: 300px;
  height: 290px;
  background:
    radial-gradient(circle at 20px 30px, rgba(255,255,255,.12) 0 2px, transparent 3px),
    radial-gradient(circle at 90px 80px, rgba(255,255,255,.10) 0 2px, transparent 3px),
    radial-gradient(circle at 210px 40px, rgba(255,255,255,.08) 0 2px, transparent 3px),
    #1d2a36;
  left: 0;
  top: 154px;
  border-radius: 0 0 18px 18px;
  z-index: 1;
}

.burDrill__soilCut {
  width: 42px;
  height: 250px;
  background: #2c3a49;
  left: 134px;
  top: 154px;
  z-index: 2;
}

.burDrill__machine {
  left: 0;
  top: 0;
  z-index: 10;
}

.burDrill__wheel {
  width: 22px;
  height: 30px;
  border-radius: 35%;
  background: #262b31;
  top: 121px;
}

.burDrill__wheel::after {
  content: "";
  width: 10px;
  height: 14px;
  border-radius: 35%;
  background: #555f66;
  left: 6px;
  top: 8px;
}

.burDrill__wheel--left { left: 120px; }
.burDrill__wheel--right { left: 170px; }

.burDrill__body1 {
  background: #f39c12;
  width: 74px;
  height: 22px;
  left: 118px;
  top: 116px;
  z-index: 2;
  border-radius: 0 0 5px 5px;
}

.burDrill__body2 {
  background: #27ae60;
  width: 74px;
  height: 22px;
  left: 118px;
  top: 95px;
  z-index: 2;
  border-radius: 8px 8px 0 0;
}

.burDrill__base {
  background: #d35400;
  width: 54px;
  height: 8px;
  left: 128px;
  top: 143px;
  border-radius: 8px 8px 0 0;
  z-index: 4;
}

.burDrill__mast--left,
.burDrill__mast--right {
  background: #d35400;
  width: 6px;
  height: 150px;
  top: 0;
  z-index: 4;
  border-radius: 3px;
}

.burDrill__mast--left { left: 135px; }
.burDrill__mast--right { left: 170px; }

.burDrill__mastFill {
  width: 42px;
  height: 150px;
  left: 135px;
  top: 0;
  z-index: 3;
  background-image: repeating-linear-gradient(70deg, transparent, transparent 12px, #d35400 12px, #d35400 19px);
  opacity: .95;
}

.burDrill__blink {
  width: 6px;
  height: 9px;
  left: 124px;
  top: 87px;
  border-radius: 50% 50% 0 0;
  animation: burDrillBlink .8s linear infinite;
  z-index: 6;
}

.burDrill__blinkPulse {
  border: 1px solid #ff6565;
  left: 126px;
  top: 89px;
  border-radius: 100%;
  border-color: #ff6565 #ff6565 transparent transparent;
  transform: rotate(-45deg);
  animation: burDrillBlinkPulse .45s linear infinite;
  z-index: 5;
}

.burDrill__drill {
  left: 0;
  top: 0;
  z-index: 8;
  animation: burDrillMove 1.5s ease-in-out infinite;
  will-change: transform;
}

.burDrill__drillHead {
  width: 30px;
  height: 10px;
  background: #192a3c;
  left: 140px;
  top: 130px;
  border-radius: 2px;
}

.burDrill__drillSpiral {
  width: 30px;
  height: 214px;
  left: 140px;
  top: 140px;
  background-image: repeating-linear-gradient(-55deg, transparent, transparent 12px, #192a3c 12px, #192a3c 19px);
  animation: burDrilling 2.5s linear infinite;
}

.burDrill__drillMiddle {
  width: 15px;
  height: 214px;
  background: #192a3c;
  left: 147px;
  top: 140px;
}

.burDrill__arrowHead {
  width: 0;
  height: 0;
  border-top: 12px solid #192a3c;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  left: 147px;
  top: 350px;
}

.burDrill__water {
  width: 300px;
  height: 44px;
  background: #3498db;
  left: 0;
  top: 354px;
  z-index: 3;
  opacity: .95;
}

.burDrill__waterCurve--1 {
  width: 180px;
  height: 0;
  border: 20px solid #3498db;
  border-radius: 0 100% 0 0;
  left: 0;
  top: 338px;
  z-index: 4;
}

.burDrill__waterCurve--2 {
  width: 118px;
  height: 0;
  border: 5px solid #1d2a36;
  border-radius: 0 0 0 100%;
  left: 172px;
  top: 352px;
  z-index: 5;
}

.burDrill__waterCurve--3 {
  width: 145px;
  height: 0;
  border: 10px solid #1d2a36;
  border-radius: 0 100% 0 0;
  left: 0;
  top: 379px;
  z-index: 5;
}

.burDrill__waterCurve--4 {
  width: 135px;
  height: 0;
  border: 5px solid #3498db;
  border-radius: 0 0 0 100%;
  left: 155px;
  top: 391px;
  z-index: 6;
}

.burDrill__cloud {
  width: 80px;
  height: 40px;
  left: 30px;
  top: 30px;
  animation: burCloudMove 7s linear infinite;
  z-index: 2;
  opacity: .92;
}

.burDrill__cloud span {
  background: #f4f7f8;
  border-radius: 100%;
}

.burDrill__cloud1 { width: 20px; height: 15px; left: 3px; top: 0; }
.burDrill__cloud2 { width: 20px; height: 15px; left: 0; top: 10px; }
.burDrill__cloud3 { width: 30px; height: 15px; left: 10px; top: 13px; }
.burDrill__cloud4 { width: 20px; height: 15px; left: 30px; top: 9px; }
.burDrill__cloud5 { width: 25px; height: 20px; left: 18px; top: 0; }

@keyframes burIntroBg {
  0% { background: #000; }
  52% { background: #fff; }
  100% { background: #fff; }
}

@keyframes burIntroTop {
  0%, 45% { color: #fff; opacity: 1; }
  100% { color: #111; opacity: .92; }
}

@keyframes burIntroBottom {
  0%, 45% { color: #000; opacity: 0; transform: translateY(8px); }
  65% { color: #000; opacity: .75; transform: translateY(0); }
  100% { color: #fff; opacity: .9; transform: translateY(0); }
}

@keyframes burIntroHide {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes burDrilling {
  0% { background-position-y: 0; }
  100% { background-position-y: 700px; }
}

@keyframes burDrillMove {
  0%, 100% { transform: translateY(-14px); }
  50% { transform: translateY(2px); }
}

@keyframes burDrillBlink {
  0%, 100% { background-color: #ff3600; }
  50% { background-color: #fcb754; }
}

@keyframes burDrillBlinkPulse {
  0% { width: 0; height: 0; opacity: 1; }
  65% { opacity: 1; }
  100% { width: 16px; height: 16px; left: 118px; top: 81px; opacity: 0; }
}

@keyframes burCloudMove {
  0% { transform: translateX(0) translateY(0); opacity: 0; }
  15% { transform: translateX(20px) translateY(5px); opacity: 1; }
  35% { transform: translateX(70px) translateY(-5px); opacity: .85; }
  55% { transform: translateX(120px) translateY(5px); opacity: 1; }
  80% { transform: translateX(180px) translateY(-2px); opacity: .75; }
  100% { transform: translateX(220px) translateY(7px); opacity: 0; }
}

@media (max-width: 360px) {
  .burDrill { --scale: .66; height: 292px; }
}

@media (prefers-reduced-motion: reduce) {
  .burDrill__drill,
  .burDrill__drillSpiral,
  .burDrill__blink,
  .burDrill__blinkPulse,
  .burDrill__cloud {
    animation: none !important;
  }
}

/* Lakiza visual override: сохраняем старую анимацию загрузчика, но меняем картинку */
.burDrill__frame {
  background-image: url("/massage-intro.svg?v=lakiza_visual_20260604_3") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}

.burDrill__frame > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

.burDrill,
.burDrill__frame {
  overflow: visible !important;
}

/* Lakiza size tuning: увеличиваем карточку, не ломая анимацию */
#bur-drill-intro .burDrill {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: clamp(10px, 2.2vh, 20px) auto !important;
}

#bur-drill-intro .burDrill__frame {
  width: clamp(300px, 86vw, 560px) !important;
  max-width: 560px !important;
  aspect-ratio: 900 / 520 !important;
  height: auto !important;
  min-height: unset !important;
  border-radius: clamp(18px, 3vw, 30px) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,.14) !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#bur-drill-intro .burDrillIntro {
  gap: clamp(12px, 2.2vh, 22px) !important;
}

#bur-drill-intro .burDrillIntro__top {
  font-size: clamp(34px, 8.8vw, 64px) !important;
  line-height: .95 !important;
  letter-spacing: .01em !important;
  margin-bottom: 0 !important;
}

#bur-drill-intro .burDrillIntro__bottom {
  font-size: clamp(20px, 5.4vw, 34px) !important;
  line-height: 1.08 !important;
  margin-top: clamp(10px, 2vh, 18px) !important;
}

@media (max-width: 420px) {
  #bur-drill-intro .burDrill__frame {
    width: min(88vw, 340px) !important;
  }
}

@media (min-width: 900px) {
  #bur-drill-intro .burDrill__frame {
    width: min(42vw, 560px) !important;
  }
}