/* =========================================================
   SECTION ANIMATIONS v3
   Meaningful trade animations - each section shows
   the actual work being done (furniture assembling,
   pipes connecting, etc.)
   ========================================================= */

.anim-section {
  position: relative;
  overflow: hidden;
}

.anim-scene {
  position: relative;
  width: 100%;
  height: 340px;
  margin: 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at center, rgba(201,149,61,0.05) 0%, transparent 70%);
}

/* =========================================================
   MASTER RULES
   All animated parts start invisible/scattered
   ========================================================= */

.anim-scene .part {
  position: absolute;
  opacity: 0;
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.anim-scene .part-inline {
  display: inline-block;
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scene-assembled .part,
.scene-assembled .part-inline {
  opacity: 1;
}

/* =========================================================
   1. MENUISERIE - Cabinet qui s'assemble
   Wood panels slide in from all sides and join
   to form a cabinet with shelves and doors
   ========================================================= */

.menuiserie-scene {
  background: radial-gradient(ellipse at center, rgba(180,128,80,0.06) 0%, transparent 70%);
}

.menuiserie-scene .part {
  border-radius: 2px;
}

/* -- Cabinet panels initial scattered positions -- */

/* Left side panel - slides from far left */
.cab-side-l {
  width: 12px; height: 180px;
  background: linear-gradient(to right, #8b6914, #b08050);
  top: calc(50% - 90px);
  left: calc(50% - 80px);
  transform: translateX(-120px);
  border-radius: 2px 0 0 2px;
}
.scene-assembled .cab-side-l {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.1s;
}

/* Right side panel - slides from far right */
.cab-side-r {
  width: 12px; height: 180px;
  background: linear-gradient(to left, #8b6914, #b08050);
  top: calc(50% - 90px);
  left: calc(50% + 68px);
  transform: translateX(120px);
  border-radius: 0 2px 2px 0;
}
.scene-assembled .cab-side-r {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.15s;
}

/* Top panel - slides from top */
.cab-top {
  width: 152px; height: 12px;
  background: linear-gradient(to bottom, #8b6914, #b08050);
  top: calc(50% - 90px);
  left: calc(50% - 76px);
  transform: translateY(-80px);
  border-radius: 2px 2px 0 0;
}
.scene-assembled .cab-top {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.2s;
}

/* Bottom panel - slides from bottom */
.cab-bot {
  width: 152px; height: 12px;
  background: linear-gradient(to top, #8b6914, #b08050);
  top: calc(50% + 78px);
  left: calc(50% - 76px);
  transform: translateY(80px);
  border-radius: 0 0 2px 2px;
}
.scene-assembled .cab-bot {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.25s;
}

/* Back panel - fades in */
.cab-back {
  width: 152px; height: 180px;
  background: linear-gradient(135deg, #7a6548, #9c8458);
  top: calc(50% - 90px);
  left: calc(50% - 76px);
  opacity: 0;
  z-index: 0;
  border-radius: 2px;
}
.scene-assembled .cab-back {
  opacity: 0.5;
  transition-delay: 0.05s;
}

/* Shelves - slide from alternating sides */
.cab-shelf-1 {
  width: 128px; height: 8px;
  background: linear-gradient(to bottom, #c99060, #b08050);
  top: calc(50% - 45px);
  left: calc(50% - 64px);
  transform: translateX(-100px);
}
.scene-assembled .cab-shelf-1 {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.3s;
}

.cab-shelf-2 {
  width: 128px; height: 8px;
  background: linear-gradient(to bottom, #c99060, #b08050);
  top: calc(50% + 0px);
  left: calc(50% - 64px);
  transform: translateX(100px);
}
.scene-assembled .cab-shelf-2 {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.4s;
}

.cab-shelf-3 {
  width: 128px; height: 8px;
  background: linear-gradient(to bottom, #c99060, #b08050);
  top: calc(50% + 45px);
  left: calc(50% - 64px);
  transform: translateX(-100px);
}
.scene-assembled .cab-shelf-3 {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.5s;
}

/* Left door - rotates from center */
.cab-door-l {
  width: 70px; height: 165px;
  background: linear-gradient(135deg, #d4a04a, #b08050);
  border: 1px solid #8b6914;
  top: calc(50% - 83px);
  left: calc(50% - 76px);
  transform-origin: left center;
  transform: perspective(600px) rotateY(-90deg);
  z-index: 2;
  border-radius: 1px 0 0 1px;
}
.scene-assembled .cab-door-l {
  transform: perspective(600px) rotateY(0deg);
  opacity: 1;
  transition-delay: 0.6s;
}

/* Right door - rotates from center */
.cab-door-r {
  width: 70px; height: 165px;
  background: linear-gradient(135deg, #d4a04a, #b08050);
  border: 1px solid #8b6914;
  top: calc(50% - 83px);
  left: calc(50% + 6px);
  transform-origin: right center;
  transform: perspective(600px) rotateY(90deg);
  z-index: 2;
  border-radius: 0 1px 1px 0;
}
.scene-assembled .cab-door-r {
  transform: perspective(600px) rotateY(0deg);
  opacity: 1;
  transition-delay: 0.7s;
}

/* Door handles - small gold circles */
.cab-handle-l {
  width: 4px; height: 16px;
  background: var(--secondary);
  top: calc(50% - 8px);
  left: calc(50% - 12px);
  border-radius: 2px;
  transform: translateX(-80px);
  z-index: 3;
}
.scene-assembled .cab-handle-l {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.8s;
}

.cab-handle-r {
  width: 4px; height: 16px;
  background: var(--secondary);
  top: calc(50% - 8px);
  left: calc(50% + 8px);
  border-radius: 2px;
  transform: translateX(80px);
  z-index: 3;
}
.scene-assembled .cab-handle-r {
  transform: translateX(0);
  opacity: 1;
  transition-delay: 0.85s;
}

/* Wood particles that scatter as cabinet assembles */
.cab-particle {
  width: 6px; height: 6px;
  background: var(--secondary);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 4px rgba(201,149,61,0.3);
}
.scene-assembled .cab-particle {
  animation: particleScatter 3s ease-out forwards;
}

@keyframes particleScatter {
  0% { opacity: 0.6; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--px, 60px), var(--py, -60px)) scale(0); }
}

.cab-p1 { --px: -80px; --py: -60px; top: 30%; left: 40%; }
.cab-p2 { --px: 70px; --py: -40px; top: 60%; left: 30%; }
.cab-p3 { --px: -50px; --py: 70px; top: 40%; left: 60%; }
.cab-p4 { --px: 90px; --py: 50px; top: 70%; left: 50%; }
.cab-p5 { --px: -100px; --py: -30px; top: 25%; left: 55%; }

/* =========================================================
   2. PLOMBERIE - Tuyaux qui se connectent
   Pipe segments extend from all directions and
   join at a central junction. Water flows through.
   ========================================================= */

.plomberie-scene {
  background: radial-gradient(ellipse at center, rgba(74,158,255,0.06) 0%, transparent 70%);
}

/* Central junction */
.pipe-junction {
  width: 30px; height: 30px;
  background: radial-gradient(circle, #cd7f32, #a0592b);
  top: calc(50% - 15px);
  left: calc(50% - 15px);
  border-radius: 50%;
  opacity: 0;
  border: 3px solid #8b4513;
  z-index: 2;
}
.scene-assembled .pipe-junction {
  opacity: 1;
  transition-delay: 0.1s;
}

/* Horizontal pipe left - extends from left */
.pipe-h-l {
  width: 0; height: 14px;
  background: linear-gradient(to bottom, #cd7f32, #a0592b);
  top: calc(50% - 7px);
  right: calc(50% + 15px);
  border-radius: 3px 0 0 3px;
  transform-origin: right center;
}
.scene-assembled .pipe-h-l {
  width: 100px;
  opacity: 1;
  transition: width 0.6s ease 0.2s, opacity 0.3s ease 0.2s;
}

/* Horizontal pipe right - extends from right */
.pipe-h-r {
  width: 0; height: 14px;
  background: linear-gradient(to bottom, #cd7f32, #a0592b);
  top: calc(50% - 7px);
  left: calc(50% + 15px);
  border-radius: 0 3px 3px 0;
  transform-origin: left center;
}
.scene-assembled .pipe-h-r {
  width: 100px;
  opacity: 1;
  transition: width 0.6s ease 0.25s, opacity 0.3s ease 0.25s;
}

/* Vertical pipe top - extends from top */
.pipe-v-t {
  width: 14px; height: 0;
  background: linear-gradient(to right, #cd7f32, #a0592b);
  left: calc(50% - 7px);
  bottom: calc(50% + 15px);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
}
.scene-assembled .pipe-v-t {
  height: 80px;
  opacity: 1;
  transition: height 0.6s ease 0.3s, opacity 0.3s ease 0.3s;
}

/* Vertical pipe bottom - extends from bottom */
.pipe-v-b {
  width: 14px; height: 0;
  background: linear-gradient(to right, #cd7f32, #a0592b);
  left: calc(50% - 7px);
  top: calc(50% + 15px);
  border-radius: 0 0 3px 3px;
  transform-origin: top center;
}
.scene-assembled .pipe-v-b {
  height: 80px;
  opacity: 1;
  transition: height 0.6s ease 0.35s, opacity 0.3s ease 0.35s;
}

/* Pipe joints / connectors */
.pipe-connector {
  width: 18px; height: 18px;
  background: #8b4513;
  border-radius: 4px;
  opacity: 0;
}
.scene-assembled .pipe-connector {
  opacity: 1;
}

.pc-left {
  top: calc(50% - 9px);
  left: calc(50% - 15px - 100px);
  transition-delay: 0.4s;
}
.pc-right {
  top: calc(50% - 9px);
  left: calc(50% + 15px + 100px - 18px);
  transition-delay: 0.45s;
}
.pc-top {
  left: calc(50% - 9px);
  top: calc(50% - 15px - 80px);
  transition-delay: 0.5s;
}
.pc-bottom {
  left: calc(50% - 9px);
  top: calc(50% + 15px + 80px - 18px);
  transition-delay: 0.55s;
}

/* Water droplets flowing through pipes */
.pipe-drop {
  width: 6px; height: 10px;
  background: #4a9eff;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0;
  box-shadow: 0 0 6px rgba(74,158,255,0.4);
}

.scene-assembled .pd-1 {
  animation: flowHorizontal 2s ease-in-out 0.6s infinite;
  top: calc(50% - 5px);
  left: calc(50% - 15px - 10px);
}
.scene-assembled .pd-2 {
  animation: flowHorizontal 2s ease-in-out 1s infinite;
  top: calc(50% - 5px);
  left: calc(50% - 15px - 40px);
}
.scene-assembled .pd-3 {
  animation: flowVertical 2s ease-in-out 1.4s infinite;
  top: calc(50% - 15px - 30px);
  left: calc(50% - 3px);
}
.scene-assembled .pd-4 {
  animation: flowVertical 2s ease-in-out 1.8s infinite;
  top: calc(50% + 15px + 10px);
  left: calc(50% - 3px);
}

@keyframes flowHorizontal {
  0% { transform: translateX(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateX(100px); opacity: 0; }
}

@keyframes flowVertical {
  0% { transform: translateY(0); opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { transform: translateY(80px); opacity: 0; }
}

/* Faucet/spout that appears at the end */
.pipe-faucet {
  width: 40px; height: 20px;
  background: linear-gradient(to bottom, #cd7f32, #a0592b);
  top: calc(50% - 15px - 80px - 15px);
  left: calc(50% - 7px);
  border-radius: 4px 4px 0 0;
  opacity: 0;
  transform: translateY(-20px);
  z-index: 3;
}
.scene-assembled .pipe-faucet {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* Faucet curve */
.pipe-faucet-curve {
  width: 14px; height: 15px;
  background: transparent;
  left: calc(50% - 7px);
  top: calc(50% - 15px - 80px - 15px + 20px);
  border: 4px solid #cd7f32;
  border-top: none;
  border-left: none;
  border-radius: 0 0 10px 0;
  opacity: 0;
  transform: translateY(-20px);
  z-index: 3;
}
.scene-assembled .pipe-faucet-curve {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.65s;
}

/* =========================================================
   3. ELECTRICITE - Circuit qui s'allume
   Wires connect from a central fixture, then
   the bulb glows with light
   ========================================================= */

.electricite-scene {
  background: radial-gradient(ellipse at center, rgba(255,236,100,0.06) 0%, transparent 70%);
}

/* Ceiling fixture base */
.elec-base {
  width: 40px; height: 12px;
  background: linear-gradient(to bottom, #555, #333);
  top: 25%;
  left: calc(50% - 20px);
  border-radius: 3px;
  opacity: 0;
}
.scene-assembled .elec-base {
  opacity: 1;
  transition-delay: 0.1s;
}

/* Wire from fixture going down */
.elec-wire {
  width: 3px; height: 0;
  background: #444;
  top: calc(25% + 12px);
  left: calc(50% - 1.5px);
  opacity: 0;
}
.scene-assembled .elec-wire {
  height: 60px;
  opacity: 1;
  transition: height 0.5s ease 0.2s, opacity 0.3s ease 0.2s;
}

/* Light bulb */
.elec-bulb {
  width: 30px; height: 40px;
  background: radial-gradient(ellipse at 50% 30%, #ffe44d, #cc9900);
  top: calc(25% + 72px);
  left: calc(50% - 15px);
  border-radius: 50% 50% 40% 40%;
  opacity: 0;
  box-shadow: 0 0 0 rgba(255,236,100,0);
  z-index: 2;
}
.scene-assembled .elec-bulb {
  opacity: 1;
  animation: bulbGlow 2s ease-in-out 0.6s infinite;
  box-shadow: 0 0 40px rgba(255,236,100,0.4);
}

@keyframes bulbGlow {
  0%, 100% { box-shadow: 0 0 30px rgba(255,236,100,0.3); }
  50% { box-shadow: 0 0 60px rgba(255,236,100,0.6); background: radial-gradient(ellipse at 50% 30%, #fff080, #ffcc00); }
}

/* Light rays spreading outward */
.elec-ray {
  width: 8px; height: 8px;
  background: rgba(255,236,100,0.3);
  border-radius: 50%;
  opacity: 0;
}
.scene-assembled .elec-ray {
  animation: rayPulse 1.5s ease-in-out infinite;
}

@keyframes rayPulse {
  0%, 100% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(2.5); opacity: 0.3; }
}

.er-1 { top: calc(25% + 112px); left: calc(50% - 50px); animation-delay: 0.7s; }
.er-2 { top: calc(25% + 100px); left: calc(50% + 30px); animation-delay: 0.8s; }
.er-3 { top: calc(25% + 120px); left: calc(50% - 30px); animation-delay: 0.9s; }
.er-4 { top: calc(25% + 90px); left: calc(50% + 50px); animation-delay: 1s; }

/* Additional wires connecting from sides */
.elec-wire-side {
  width: 0; height: 3px;
  background: #444;
  top: 30%;
  opacity: 0;
  border-radius: 2px;
}

.ews-left {
  left: calc(50% - 20px - 5px);
  transform-origin: right center;
}
.scene-assembled .ews-left {
  width: 70px;
  opacity: 1;
  transition: width 0.4s ease 0.3s, opacity 0.3s ease 0.3s;
}

.ews-right {
  left: calc(50% + 20px + 2px);
  transform-origin: left center;
}
.scene-assembled .ews-right {
  width: 70px;
  opacity: 1;
  transition: width 0.4s ease 0.35s, opacity 0.3s ease 0.35s;
}

/* Switch on the wall */
.elec-switch {
  width: 16px; height: 24px;
  background: linear-gradient(135deg, #eee, #ccc);
  top: 28%;
  left: calc(50% - 20px - 70px - 30px);
  border-radius: 2px;
  border: 1px solid #999;
  opacity: 0;
  z-index: 3;
}
.scene-assembled .elec-switch {
  opacity: 1;
  transition-delay: 0.5s;
}

/* Switch toggle */
.elec-toggle {
  width: 8px; height: 10px;
  background: #4a9eff;
  top: calc(28% + 3px);
  left: calc(50% - 20px - 70px - 30px + 4px);
  border-radius: 1px;
  opacity: 0;
  z-index: 4;
}
.scene-assembled .elec-toggle {
  opacity: 1;
  animation: toggleSwitch 3s ease-in-out 1.5s infinite;
}

@keyframes toggleSwitch {
  0%, 100% { background: #4a9eff; box-shadow: 0 0 4px rgba(74,158,255,0.3); }
  50% { background: #ffcc00; box-shadow: 0 0 8px rgba(255,204,0,0.4); }
}

/* =========================================================
   4. CARRELAGE - Carreaux qui se posent
   Tiles fly in from random positions and snap
   into a grid pattern
   ========================================================= */

.carrelage-scene {
  background: radial-gradient(ellipse at center, rgba(201,149,61,0.06) 0%, transparent 70%);
}

/* Tile grid - 3x3 tiles that form a square */
.carrelage-scene .tile {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 3px;
  opacity: 0;
  border: 1px solid rgba(201,149,61,0.2);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Each tile has a different start position */
.carrelage-scene .tile-1 {
  background: linear-gradient(135deg, #c9953d, #e8b85e);
  top: calc(50% - 78px);
  left: calc(50% - 78px);
  transform: translate(-100px, -80px) rotate(-45deg);
}
.scene-assembled .tile-1 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition-delay: 0.1s;
}

.tile-2 {
  background: linear-gradient(135deg, #d4a74a, #f0d080);
  top: calc(50% - 78px);
  left: calc(50% - 26px);
  transform: translate(0, -120px) rotate(15deg);
}
.scene-assembled .tile-2 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition-delay: 0.15s;
}

.tile-3 {
  background: linear-gradient(135deg, #b89540, #d4a74a);
  top: calc(50% - 78px);
  left: calc(50% + 26px);
  transform: translate(100px, -80px) rotate(45deg);
}
.scene-assembled .tile-3 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition-delay: 0.2s;
}

.tile-4 {
  background: linear-gradient(135deg, #e8b85e, #c9953d);
  top: calc(50% - 26px);
  left: calc(50% - 78px);
  transform: translate(-120px, 0) rotate(-30deg);
}
.scene-assembled .tile-4 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition-delay: 0.25s;
}

.tile-5 {
  background: linear-gradient(135deg, #f0d080, #d4a74a);
  top: calc(50% - 26px);
  left: calc(50% - 26px);
  transform: scale(0) rotate(90deg);
}
.scene-assembled .tile-5 {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  transition-delay: 0.3s;
}

.tile-6 {
  background: linear-gradient(135deg, #c9953d, #b89540);
  top: calc(50% - 26px);
  left: calc(50% + 26px);
  transform: translate(120px, 0) rotate(30deg);
}
.scene-assembled .tile-6 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition-delay: 0.35s;
}

.tile-7 {
  background: linear-gradient(135deg, #b08050, #c9953d);
  top: calc(50% + 26px);
  left: calc(50% - 78px);
  transform: translate(-80px, 100px) rotate(60deg);
}
.scene-assembled .tile-7 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition-delay: 0.4s;
}

.tile-8 {
  background: linear-gradient(135deg, #d4a74a, #e8b85e);
  top: calc(50% + 26px);
  left: calc(50% - 26px);
  transform: translate(0, 120px) rotate(-15deg);
}
.scene-assembled .tile-8 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition-delay: 0.45s;
}

.tile-9 {
  background: linear-gradient(135deg, #e8b85e, #c9953d);
  top: calc(50% + 26px);
  left: calc(50% + 26px);
  transform: translate(80px, 100px) rotate(-60deg);
}
.scene-assembled .tile-9 {
  transform: translate(0, 0) rotate(0deg);
  opacity: 1;
  transition-delay: 0.5s;
}

/* Grout lines appear after tiles settle */
.tile-grout {
  position: absolute;
  background: rgba(139,105,20,0.15);
  opacity: 0;
  border-radius: 1px;
}
.scene-assembled .tile-grout {
  opacity: 1;
  transition: opacity 0.3s ease 0.7s;
}

.tg-h-1 { width: 100px; height: 2px; top: calc(50% - 78px + 48px); left: calc(50% - 78px); }
.tg-h-2 { width: 100px; height: 2px; top: calc(50% - 26px + 48px); left: calc(50% - 78px); }
.tg-v-1 { width: 2px; height: 100px; top: calc(50% - 78px); left: calc(50% - 78px + 48px); }
.tg-v-2 { width: 2px; height: 100px; top: calc(50% - 78px); left: calc(50% - 26px + 48px); }

/* =========================================================
   5. PEINTURE - Peinture appliquée
   A roller moves across with paint trail,
   drips fall, and the surface gets colored
   ========================================================= */

.peinture-scene {
  background: radial-gradient(ellipse at center, rgba(201,149,61,0.06) 0%, transparent 70%);
}

/* Paint roller */
.paint-roller {
  position: absolute;
  top: calc(50% - 40px);
  left: -80px;
  opacity: 0;
  z-index: 3;
}
.scene-assembled .paint-roller {
  animation: rollerMove 3s ease-in-out 0.3s forwards;
}

@keyframes rollerMove {
  0% { left: -80px; opacity: 1; }
  30% { left: calc(50% - 60px); opacity: 1; }
  70% { left: calc(50% + 20px); opacity: 1; }
  100% { left: calc(50% + 60px); opacity: 0; }
}

/* Roller handle */
.paint-roller .roller-handle {
  width: 60px; height: 6px;
  background: linear-gradient(to bottom, #8a7a60, #6b5b40);
  position: absolute;
  top: 17px;
  left: -55px;
  border-radius: 2px;
}

/* Roller cylinder */
.paint-roller .roller-cyl {
  width: 20px; height: 40px;
  background: linear-gradient(to right, #c9953d, #e8b85e);
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
  box-shadow: 0 0 8px rgba(201,149,61,0.3);
}

/* Paint trail following roller */
.paint-trail {
  position: absolute;
  height: 30px;
  background: linear-gradient(to bottom, rgba(201,149,61,0.6), rgba(201,149,61,0.2));
  top: calc(50% + 5px);
  left: calc(50% - 80px);
  width: 0;
  border-radius: 2px;
  opacity: 0;
}
.scene-assembled .paint-trail {
  width: 160px;
  opacity: 1;
  transition: width 2.5s ease 0.5s, opacity 0.3s ease 0.5s;
}

/* Paint splashes */
.p-splash {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}
.scene-assembled .p-splash {
  animation: splashPop 1s ease-out forwards;
}

@keyframes splashPop {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(1.2); opacity: 0; }
}

.ps-1 { width: 16px; height: 16px; background: #c9953d; top: calc(50% - 20px); left: calc(50% - 60px); animation-delay: 0.8s; }
.ps-2 { width: 10px; height: 10px; background: #d4a74a; top: calc(50% + 35px); left: calc(50% - 20px); animation-delay: 1.2s; }
.ps-3 { width: 14px; height: 14px; background: #e8b85e; top: calc(50% - 25px); left: calc(50% + 30px); animation-delay: 1.6s; }
.ps-4 { width: 8px; height: 8px; background: #c9953d; top: calc(50% + 30px); left: calc(50% + 50px); animation-delay: 2s; }

/* Paint drips */
.p-drip {
  position: absolute;
  width: 4px;
  background: #c9953d;
  border-radius: 2px;
  opacity: 0;
}
.scene-assembled .p-drip {
  animation: drip 2s ease-in infinite;
}

@keyframes drip {
  0% { height: 0; opacity: 0; }
  20% { height: 30px; opacity: 0.5; top: calc(50% + 35px); }
  80% { height: 50px; opacity: 0.3; }
  100% { height: 60px; opacity: 0; }
}

.pd-1 { left: calc(50% - 40px); animation-delay: 1s; }
.pd-2 { left: calc(50% + 10px); animation-delay: 1.8s; }
.pd-3 { left: calc(50% + 40px); animation-delay: 2.6s; }

/* Paint can at the end */
.paint-can {
  position: absolute;
  width: 40px; height: 50px;
  background: linear-gradient(to right, #6b5b40, #8a7a60);
  top: calc(50% + 50px);
  right: 15%;
  border-radius: 4px;
  opacity: 0;
  transform: translateY(30px);
}
.scene-assembled .paint-can {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease 2.5s;
}

.paint-can-label {
  position: absolute;
  width: 24px; height: 16px;
  background: #c9953d;
  top: 8px; left: 8px;
  border-radius: 1px;
}

/* =========================================================
   6. TOITURE - Charpente qui se monte
   Roof frame assembles, then tiles slide on
   ========================================================= */

.toiture-scene {
  background: radial-gradient(ellipse at center, rgba(201,149,61,0.06) 0%, transparent 70%);
}

/* Roof truss triangles */
.toiture-scene .truss {
  position: absolute;
  opacity: 0;
  transition: all 0.6s ease;
}

/* Main roof triangle */
.truss-1 {
  width: 0; height: 0;
  border-left: 120px solid transparent;
  border-right: 120px solid transparent;
  border-bottom: 120px solid rgba(180,128,80,0.25);
  top: calc(50% - 10px);
  left: calc(50% - 120px);
  transform: scale(0.3) translateY(60px);
}
.scene-assembled .truss-1 {
  transform: scale(1) translateY(0);
  opacity: 1;
  transition-delay: 0.1s;
}

/* Second truss (inner) */
.truss-2 {
  width: 0; height: 0;
  border-left: 80px solid transparent;
  border-right: 80px solid transparent;
  border-bottom: 80px solid rgba(180,128,80,0.2);
  top: calc(50% + 10px);
  left: calc(50% - 80px);
  transform: scale(0.3) translateY(60px);
}
.scene-assembled .truss-2 {
  transform: scale(1) translateY(0);
  opacity: 1;
  transition-delay: 0.2s;
}

/* Horizontal beam */
.roof-beam {
  width: 0; height: 6px;
  background: linear-gradient(to right, #8b6914, #b08050);
  top: calc(50% - 10px + 120px - 3px);
  left: calc(50% - 120px);
  border-radius: 2px;
}
.scene-assembled .roof-beam {
  width: 240px;
  opacity: 1;
  transition: width 0.5s ease 0.15s, opacity 0.3s ease 0.15s;
}

/* Center post */
.roof-post {
  width: 6px; height: 0;
  background: linear-gradient(to bottom, #8b6914, #b08050);
  top: calc(50% - 10px);
  left: calc(50% - 3px);
  border-radius: 2px;
}
.scene-assembled .roof-post {
  height: 110px;
  opacity: 1;
  transition: height 0.5s ease 0.25s, opacity 0.3s ease 0.25s;
}

/* Roof tiles that slide in */
.roof-tile {
  position: absolute;
  width: 32px; height: 12px;
  background: linear-gradient(to right, #5a5040, #4a4030);
  border-radius: 2px;
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.scene-assembled .roof-tile {
  opacity: 1;
  transform: translateY(0);
}

.rt-1 { top: calc(50% - 10px - 60px); left: calc(50% - 80px); transition-delay: 0.4s; }
.rt-2 { top: calc(50% - 10px - 60px); left: calc(50% + 48px); transition-delay: 0.45s; }
.rt-3 { top: calc(50% - 10px - 30px); left: calc(50% - 105px); transition-delay: 0.55s; width: 40px; }
.rt-4 { top: calc(50% - 10px - 30px); left: calc(50% + 65px); transition-delay: 0.6s; width: 40px; }
.rt-5 { top: calc(50% - 10px + 0px); left: calc(50% - 115px); transition-delay: 0.7s; width: 48px; }
.rt-6 { top: calc(50% - 10px + 0px); left: calc(50% + 67px); transition-delay: 0.75s; width: 48px; }
.rt-7 { top: calc(50% - 10px + 30px); left: calc(50% - 95px); transition-delay: 0.85s; }
.rt-8 { top: calc(50% - 10px + 30px); left: calc(50% + 63px); transition-delay: 0.9s; }
.rt-9 { top: calc(50% - 10px + 60px); left: calc(50% - 60px); transition-delay: 1s; }
.rt-10 { top: calc(50% - 10px + 60px); left: calc(50% + 28px); transition-delay: 1.05s; }

/* Chimney */
.chimney-base {
  width: 36px; height: 50px;
  background: linear-gradient(to right, #6b5b40, #8a7a60);
  top: calc(50% - 10px - 80px);
  right: calc(50% - 120px + 15px);
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.5s ease;
  z-index: 3;
}
.scene-assembled .chimney-base {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.9s;
}

.chimney-cap {
  width: 42px; height: 8px;
  background: linear-gradient(to bottom, #8a7a60, #6b5b40);
  top: calc(50% - 10px - 80px - 8px);
  right: calc(50% - 120px + 12px);
  opacity: 0;
  transform: translateY(-40px);
  border-radius: 2px 2px 0 0;
  transition: all 0.5s ease;
  z-index: 4;
}
.scene-assembled .chimney-cap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1s;
}

/* Hand trowel appears at the end */
.trowel-blade {
  width: 30px; height: 16px;
  background: linear-gradient(135deg, #ccc, #999);
  top: calc(50% + 60px);
  left: calc(50% + 90px);
  border-radius: 2px 6px 6px 2px;
  transform: rotate(-20deg);
  position: absolute;
}

.trowel-handle {
  width: 30px; height: 8px;
  background: linear-gradient(to bottom, #8b6914, #6b4f10);
  top: calc(50% + 64px);
  left: calc(50% + 120px);
  border-radius: 3px;
  position: absolute;
  transform: rotate(-20deg);
}

.scene-assembled .trowel-blade,
.scene-assembled .trowel-handle {
  transition-delay: 1.2s;
}

/* =========================================================
   7. MACONNERIE - Mur de briques qui s'élève
   Bricks stack row by row to build a wall
   ========================================================= */

.maconnerie-scene {
  background: radial-gradient(ellipse at center, rgba(201,149,61,0.06) 0%, transparent 70%);
}

.maconnerie-scene .brick {
  position: absolute;
  width: 32px; height: 12px;
  background: linear-gradient(135deg, #b08050, #c99060);
  border-radius: 1px;
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Row 1 - bottom (centered) */
.mb-1  { top: calc(50% + 26px); left: calc(50% - 72px); transform: translateY(80px); }
.mb-2  { top: calc(50% + 26px); left: calc(50% - 36px); transform: translateY(80px); }
.mb-3  { top: calc(50% + 26px); left: calc(50% + 0px);  transform: translateY(80px); }
.mb-4  { top: calc(50% + 26px); left: calc(50% + 36px); transform: translateY(80px); }
.mb-5  { top: calc(50% + 26px); left: calc(50% + 72px); transform: translateY(80px); }

.scene-assembled .mb-1,
.scene-assembled .mb-2,
.scene-assembled .mb-3,
.scene-assembled .mb-4,
.scene-assembled .mb-5 {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.1s;
}

/* Row 2 */
.mb-6  { top: calc(50% + 10px); left: calc(50% - 90px); transform: translateY(80px); }
.mb-7  { top: calc(50% + 10px); left: calc(50% - 54px); transform: translateY(80px); }
.mb-8  { top: calc(50% + 10px); left: calc(50% - 18px); transform: translateY(80px); }
.mb-9  { top: calc(50% + 10px); left: calc(50% + 18px); transform: translateY(80px); }
.mb-10 { top: calc(50% + 10px); left: calc(50% + 54px); transform: translateY(80px); }

.scene-assembled .mb-6,
.scene-assembled .mb-7,
.scene-assembled .mb-8,
.scene-assembled .mb-9,
.scene-assembled .mb-10 {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.25s;
}

/* Row 3 */
.mb-11 { top: calc(50% - 6px); left: calc(50% - 72px); transform: translateY(80px); }
.mb-12 { top: calc(50% - 6px); left: calc(50% - 36px); transform: translateY(80px); }
.mb-13 { top: calc(50% - 6px); left: calc(50% + 0px);  transform: translateY(80px); }
.mb-14 { top: calc(50% - 6px); left: calc(50% + 36px); transform: translateY(80px); }
.mb-15 { top: calc(50% - 6px); left: calc(50% + 72px); transform: translateY(80px); }

.scene-assembled .mb-11,
.scene-assembled .mb-12,
.scene-assembled .mb-13,
.scene-assembled .mb-14,
.scene-assembled .mb-15 {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.4s;
}

/* Row 4 */
.mb-16 { top: calc(50% - 22px); left: calc(50% - 90px); transform: translateY(80px); }
.mb-17 { top: calc(50% - 22px); left: calc(50% - 54px); transform: translateY(80px); }
.mb-18 { top: calc(50% - 22px); left: calc(50% - 18px); transform: translateY(80px); }
.mb-19 { top: calc(50% - 22px); left: calc(50% + 18px); transform: translateY(80px); }
.mb-20 { top: calc(50% - 22px); left: calc(50% + 54px); transform: translateY(80px); }

.scene-assembled .mb-16,
.scene-assembled .mb-17,
.scene-assembled .mb-18,
.scene-assembled .mb-19,
.scene-assembled .mb-20 {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.55s;
}

/* Row 5 - top */
.mb-21 { top: calc(50% - 38px); left: calc(50% - 72px); transform: translateY(80px); }
.mb-22 { top: calc(50% - 38px); left: calc(50% - 36px); transform: translateY(80px); }
.mb-23 { top: calc(50% - 38px); left: calc(50% + 0px);  transform: translateY(80px); }
.mb-24 { top: calc(50% - 38px); left: calc(50% + 36px); transform: translateY(80px); }
.mb-25 { top: calc(50% - 38px); left: calc(50% + 72px); transform: translateY(80px); }

.scene-assembled .mb-21,
.scene-assembled .mb-22,
.scene-assembled .mb-23,
.scene-assembled .mb-24,
.scene-assembled .mb-25 {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 0.7s;
}

/* Mortar lines */
.mortar-h {
  position: absolute;
  height: 2px;
  background: rgba(139,105,20,0.12);
  opacity: 0;
  border-radius: 1px;
  transition: opacity 0.3s ease;
}

.mortar-v {
  position: absolute;
  width: 2px;
  background: rgba(139,105,20,0.12);
  opacity: 0;
  border-radius: 1px;
  transition: opacity 0.3s ease;
}

.scene-assembled .mortar-h,
.scene-assembled .mortar-v {
  opacity: 1;
}

.mh-1 { width: 164px; top: calc(50% + 22px); left: calc(50% - 82px); transition-delay: 0.18s; }
.mh-2 { width: 164px; top: calc(50% + 6px);  left: calc(50% - 82px); transition-delay: 0.33s; }
.mh-3 { width: 164px; top: calc(50% - 10px); left: calc(50% - 82px); transition-delay: 0.48s; }
.mh-4 { width: 164px; top: calc(50% - 26px); left: calc(50% - 82px); transition-delay: 0.63s; }

.mv-1 { height: 76px; top: calc(50% - 38px); left: calc(50% - 40px); transition-delay: 0.3s; }
.mv-2 { height: 76px; top: calc(50% - 38px); left: calc(50% - 4px);  transition-delay: 0.3s; }
.mv-3 { height: 76px; top: calc(50% - 38px); left: calc(50% + 32px); transition-delay: 0.3s; }
.mv-4 { height: 76px; top: calc(50% - 38px); left: calc(50% + 68px); transition-delay: 0.3s; }

/* Trowel appears above wall */
.mason-blade {
  width: 28px; height: 14px;
  background: linear-gradient(135deg, #ccc, #999);
  top: calc(50% - 55px);
  left: calc(50% + 85px);
  border-radius: 2px 6px 6px 2px;
  transform: rotate(25deg);
  position: absolute;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mason-handle {
  width: 28px; height: 7px;
  background: linear-gradient(to bottom, #8b6914, #6b4f10);
  top: calc(50% - 52px);
  left: calc(50% + 113px);
  border-radius: 3px;
  position: absolute;
  transform: rotate(25deg);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.scene-assembled .mason-blade,
.scene-assembled .mason-handle {
  opacity: 1;
  transition-delay: 1s;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 768px) {
  .anim-scene { height: 260px; }

  .cab-side-l, .cab-side-r { height: 140px; top: calc(50% - 70px); }
  .cab-side-l { left: calc(50% - 60px); }
  .cab-side-r { left: calc(50% + 48px); }
  .cab-top { width: 112px; left: calc(50% - 56px); top: calc(50% - 70px); }
  .cab-bot { width: 112px; left: calc(50% - 56px); top: calc(50% + 58px); }
  .cab-back { width: 112px; height: 140px; left: calc(50% - 56px); top: calc(50% - 70px); }
  .cab-shelf-1, .cab-shelf-2, .cab-shelf-3 { width: 88px; left: calc(50% - 44px); }
  .cab-shelf-1 { top: calc(50% - 35px); }
  .cab-shelf-2 { top: calc(50% + 0px); }
  .cab-shelf-3 { top: calc(50% + 35px); }
  .cab-door-l { width: 52px; height: 128px; left: calc(50% - 56px); top: calc(50% - 64px); }
  .cab-door-r { width: 52px; height: 128px; left: calc(50% + 4px); top: calc(50% - 64px); }
  .cab-handle-l { left: calc(50% - 10px); top: calc(50% - 8px); }
  .cab-handle-r { left: calc(50% + 6px); top: calc(50% - 8px); }

  .pipe-h-l { right: calc(50% + 15px); }
  .scene-assembled .pipe-h-l { width: 60px; }
  .pipe-h-r { left: calc(50% + 15px); }
  .scene-assembled .pipe-h-r { width: 60px; }
  .pipe-v-t { bottom: calc(50% + 15px); }
  .scene-assembled .pipe-v-t { height: 50px; }
  .pipe-v-b { top: calc(50% + 15px); }
  .scene-assembled .pipe-v-b { height: 50px; }
  .pc-left { left: calc(50% - 15px - 60px); }
  .pc-right { left: calc(50% + 15px + 60px - 18px); }
  .pc-top { top: calc(50% - 15px - 50px); }
  .pc-bottom { top: calc(50% + 15px + 50px - 18px); }
  .pipe-faucet { top: calc(50% - 15px - 50px - 15px); }
  .pipe-faucet-curve { top: calc(50% - 15px - 50px - 15px + 20px); }

  .elec-wire { top: calc(25% + 12px); }
  .scene-assembled .elec-wire { height: 40px; }
  .elec-bulb { top: calc(25% + 52px); }
  .er-1 { top: calc(25% + 92px); left: calc(50% - 40px); }
  .er-2 { top: calc(25% + 80px); left: calc(50% + 25px); }

  .truss-1 { border-left-width: 80px; border-right-width: 80px; border-bottom-width: 80px; left: calc(50% - 80px); top: calc(50% + 10px); }
  .truss-2 { border-left-width: 55px; border-right-width: 55px; border-bottom-width: 55px; left: calc(50% - 55px); top: calc(50% + 25px); }
  .roof-beam { width: 160px; left: calc(50% - 80px); top: calc(50% + 10px + 80px - 3px); }
  .roof-post { top: calc(50% + 10px); }
  .scene-assembled .roof-post { height: 70px; }
  .rt-1 { top: calc(50% + 10px - 40px); left: calc(50% - 55px); }
  .rt-2 { top: calc(50% + 10px - 40px); left: calc(50% + 23px); }

  .carrelage-scene .tile { width: 36px; height: 36px; }
  .tile-1 { top: calc(50% - 58px); left: calc(50% - 58px); }
  .tile-2 { top: calc(50% - 58px); left: calc(50% - 18px); }
  .tile-3 { top: calc(50% - 58px); left: calc(50% + 22px); }
  .tile-4 { top: calc(50% - 18px); left: calc(50% - 58px); }
  .tile-5 { top: calc(50% - 18px); left: calc(50% - 18px); }
  .tile-6 { top: calc(50% - 18px); left: calc(50% + 22px); }
  .tile-7 { top: calc(50% + 22px); left: calc(50% - 58px); }
  .tile-8 { top: calc(50% + 22px); left: calc(50% - 18px); }
  .tile-9 { top: calc(50% + 22px); left: calc(50% + 22px); }
}

@media (max-width: 480px) {
  .anim-scene { height: 190px; }

  .cab-side-l, .cab-side-r { height: 110px; top: calc(50% - 55px); }
  .cab-side-l { left: calc(50% - 50px); }
  .cab-side-r { left: calc(50% + 38px); }
  .cab-top { width: 92px; left: calc(50% - 46px); top: calc(50% - 55px); }
  .cab-bot { width: 92px; left: calc(50% - 46px); top: calc(50% + 43px); }
  .cab-back { width: 92px; height: 110px; left: calc(50% - 46px); top: calc(50% - 55px); }
  .cab-shelf-1, .cab-shelf-2, .cab-shelf-3 { width: 72px; left: calc(50% - 36px); }
  .cab-shelf-1 { top: calc(50% - 28px); }
  .cab-shelf-2 { top: calc(50% + 0px); }
  .cab-shelf-3 { top: calc(50% + 28px); }
  .cab-door-l { width: 42px; height: 100px; left: calc(50% - 46px); top: calc(50% - 50px); }
  .cab-door-r { width: 42px; height: 100px; left: calc(50% + 2px); top: calc(50% - 50px); }
  .cab-handle-l { left: calc(50% - 10px); top: calc(50% - 8px); }
  .cab-handle-r { left: calc(50% + 2px); top: calc(50% - 8px); }

  .scene-assembled .pipe-h-l { width: 45px; }
  .scene-assembled .pipe-h-r { width: 45px; }
  .scene-assembled .pipe-v-t { height: 40px; }
  .scene-assembled .pipe-v-b { height: 40px; }
  .pc-left { left: calc(50% - 12px - 45px); }
  .pc-right { left: calc(50% + 12px + 45px - 18px); }
  .pc-top { top: calc(50% - 12px - 40px); }
  .pc-bottom { top: calc(50% + 12px + 40px - 18px); }
  .pipe-faucet { top: calc(50% - 12px - 40px - 15px); }
  .pipe-faucet-curve { top: calc(50% - 12px - 40px - 15px + 20px); }

  .elec-wire { top: calc(25% + 8px); }
  .scene-assembled .elec-wire { height: 30px; }
  .elec-bulb { top: calc(25% + 38px); width: 22px; height: 22px; }
  .er-1 { top: calc(25% + 68px); left: calc(50% - 30px); font-size: 0.8rem; }
  .er-2 { top: calc(25% + 58px); left: calc(50% + 20px); font-size: 0.7rem; }

  .truss-1 { border-left-width: 65px; border-right-width: 65px; border-bottom-width: 65px; left: calc(50% - 65px); top: calc(50% + 5px); }
  .truss-2 { border-left-width: 45px; border-right-width: 45px; border-bottom-width: 45px; left: calc(50% - 45px); top: calc(50% + 18px); }
  .roof-beam { width: 130px; left: calc(50% - 65px); top: calc(50% + 5px + 65px - 3px); }
  .roof-post { top: calc(50% + 5px); }
  .scene-assembled .roof-post { height: 55px; }
  .rt-1 { top: calc(50% + 5px - 35px); left: calc(50% - 45px); }
  .rt-2 { top: calc(50% + 5px - 35px); left: calc(50% + 15px); }

  .carrelage-scene .tile { width: 28px; height: 28px; }
  .tile-1 { top: calc(50% - 48px); left: calc(50% - 48px); }
  .tile-2 { top: calc(50% - 48px); left: calc(50% - 14px); }
  .tile-3 { top: calc(50% - 48px); left: calc(50% + 20px); }
  .tile-4 { top: calc(50% - 14px); left: calc(50% - 48px); }
  .tile-5 { top: calc(50% - 14px); left: calc(50% - 14px); }
  .tile-6 { top: calc(50% - 14px); left: calc(50% + 20px); }
  .tile-7 { top: calc(50% + 20px); left: calc(50% - 48px); }
  .tile-8 { top: calc(50% + 20px); left: calc(50% - 14px); }
  .tile-9 { top: calc(50% + 20px); left: calc(50% + 20px); }

  .paint-scene .roller { top: calc(50% + 10px); left: calc(50% - 50px); width: 60px; }
  .paint-scene .roller-head { top: calc(50% - 8px); left: calc(50% - 53px); width: 26px; height: 26px; }

  .maconnerie-scene .brick { width: 22px; height: 8px; }
  .mb-1  { top: calc(50% + 14px); left: calc(50% - 40px); }
  .mb-2  { top: calc(50% + 14px); left: calc(50% - 20px); }
  .mb-3  { top: calc(50% + 14px); left: calc(50% + 0px);  }
  .mb-4  { top: calc(50% + 14px); left: calc(50% + 20px); }
  .mb-5  { top: calc(50% + 14px); left: calc(50% + 40px); }
  .mb-6  { top: calc(50% + 5px);  left: calc(50% - 50px); }
  .mb-7  { top: calc(50% + 5px);  left: calc(50% - 30px); }
  .mb-8  { top: calc(50% + 5px);  left: calc(50% - 10px); }
  .mb-9  { top: calc(50% + 5px);  left: calc(50% + 10px); }
  .mb-10 { top: calc(50% + 5px);  left: calc(50% + 30px); }
  .mb-11 { top: calc(50% - 4px);  left: calc(50% - 40px); }
  .mb-12 { top: calc(50% - 4px);  left: calc(50% - 20px); }
  .mb-13 { top: calc(50% - 4px);  left: calc(50% + 0px);  }
  .mb-14 { top: calc(50% - 4px);  left: calc(50% + 20px); }
  .mb-15 { top: calc(50% - 4px);  left: calc(50% + 40px); }
  .mb-16 { top: calc(50% - 13px); left: calc(50% - 50px); }
  .mb-17 { top: calc(50% - 13px); left: calc(50% - 30px); }
  .mb-18 { top: calc(50% - 13px); left: calc(50% - 10px); }
  .mb-19 { top: calc(50% - 13px); left: calc(50% + 10px); }
  .mb-20 { top: calc(50% - 13px); left: calc(50% + 30px); }
  .mb-21 { top: calc(50% - 22px); left: calc(50% - 40px); }
  .mb-22 { top: calc(50% - 22px); left: calc(50% - 20px); }
  .mb-23 { top: calc(50% - 22px); left: calc(50% + 0px);  }
  .mb-24 { top: calc(50% - 22px); left: calc(50% + 20px); }
  .mb-25 { top: calc(50% - 22px); left: calc(50% + 40px); }
  .mh-1 { width: 90px; top: calc(50% + 12px); left: calc(50% - 45px); }
  .mh-2 { width: 90px; top: calc(50% + 3px);  left: calc(50% - 45px); }
  .mh-3 { width: 90px; top: calc(50% - 6px);  left: calc(50% - 45px); }
  .mh-4 { width: 90px; top: calc(50% - 15px); left: calc(50% - 45px); }
  .mv-1 { height: 44px; top: calc(50% - 22px); left: calc(50% - 22px); }
  .mv-2 { height: 44px; top: calc(50% - 22px); left: calc(50% - 2px);  }
  .mv-3 { height: 44px; top: calc(50% - 22px); left: calc(50% + 18px); }
  .mv-4 { height: 44px; top: calc(50% - 22px); left: calc(50% + 38px); }
  .mason-blade { top: calc(50% - 32px); left: calc(50% + 50px); transform: rotate(25deg); width: 20px; height: 10px; }
  .mason-handle { top: calc(50% - 30px); left: calc(50% + 70px); transform: rotate(25deg); width: 20px; height: 5px; }
}