/* Passo uno: the hero doodle completes itself frame by frame on scroll.
   Layers share the doodle's 654x805 canvas; passo-uno.js sets the frame. */
.pu-doodle {
  position: relative;
  height: 100%;
  aspect-ratio: 654 / 805;
  margin: 0 auto;
}
.pu-boil { position: absolute; inset: 0; }
.pu-l {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* bulb outline traced around its centre in a few hard steps */
.pu-line {
  --pu-trace: 0deg;
  -webkit-mask-image: conic-gradient(from -90deg at 73.4% 23%, #000 var(--pu-trace), transparent 0);
          mask-image: conic-gradient(from -90deg at 73.4% 23%, #000 var(--pu-trace), transparent 0);
}
.pu-fill, .pu-ray { opacity: 0; }
.pu-on { opacity: 1; }
.pu-pop { transform: scale(1.35); }

.pu-ray--1 { transform-origin: 71.9% 4.3%; }
.pu-ray--2 { transform-origin: 61.3% 8.4%; }
.pu-ray--3 { transform-origin: 54.6% 14.2%; }
.pu-ray--4 { transform-origin: 56.7% 23.6%; }
.pu-ray--5 { transform-origin: 86.5% 11.7%; }
.pu-ray--6 { transform-origin: 89.4% 19.1%; }
.pu-ray--7 { transform-origin: 86.2% 26.5%; }
.pu-fill { transform-origin: 73.4% 23%; }

/* generic doodles: layers laid over the original image (kept for layout) */
.pu-over { position: absolute; pointer-events: none; }
.pu-over .pu-l { opacity: 0; }
.pu-over .pu-l.pu-on { opacity: 1; }
.pu-src { visibility: hidden; }

/* the decorative doodles' sway/bob/float move in steps too, not smoothly */
.doodle-deco--bob, .doodle-deco--sway, .doodle-deco--float {
  animation-timing-function: steps(10, jump-none);
}

/* 19/10: no line boil on phones. The SVG displacement filter is re-rasterized 10 times a second on every
   visible doodle; with the services accordion open it took ~77% of the raster time (traced in Chromium at
   6x CPU throttle: 689 ms -> 157 ms over four openings) and Antonio felt the lag. The draw-in still plays. */
@media (max-width: 991px) {
  .pu-boil { filter: none !important; }
}
