/* ===== INTERACTIEVE DIENST-ICONEN (sinds 2026-09-08) =====
   Zes SVG-iconen voor de dienstenkaartjes op de homepage. Pure SVG + CSS,
   speelt één keer af bij hover/tik (iconen.js). Bron: afbeeldingen/interctieve web inconen/.
   Kleuren: accenten op huisstijlgroen (#12a377), tegel in mint. */

/* In de dienstenkaart: het icoon vervangt het emoji-blokje */
.dienst-card__icon.final-service-icon {
  width: 84px; height: 84px; margin: -6px 0 14px -6px; padding: 0;
  background: none; border: none; border-radius: 0; font-size: 0;
}

.final-service-icon{
  width:126px;
  height:126px;
  border-radius:26px;
  outline:none;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transform:translateZ(0);
}
.final-service-icon svg{display:block;width:100%;height:100%;overflow:visible}
.tile{fill:#eef9f7;stroke:#c8e7e1;stroke-width:2}
.ground{fill:#dff1ec}
.building,.factory,.hotel,.medical{fill:#f7fbfa;stroke:#b9d4cd;stroke-width:2}
.roof,.awning{fill:#14352d}
.door,.factory-door,.hotel-door,.med-door{fill:#0f5747}
.windows rect,.factory-window{fill:#96d8d5}
.chimney{fill:#fff;stroke:#b9d4cd;stroke-width:2}
.factory-door{stroke:none}.factory-window{stroke:none}
.smoke-puff{fill:#dfe9e6;opacity:0}
.sparkle{fill:#12a377;transform-box:fill-box;transform-origin:center;opacity:0}
.hotel-label{font-size:14px;font-weight:900;fill:#146452;font-family:inherit}
.stars circle{fill:#12a377}
.cross{fill:#12a377}
.pulse-ring circle{fill:none;stroke:#12a377;stroke-width:3;opacity:0}
.window{fill:#e8fbfc;stroke:#1d6858;stroke-width:4}
.shine-line{fill:none;stroke:#fff;stroke-width:7;stroke-linecap:round;opacity:.7}
.squeegee rect{fill:#0d2c25}
.squeegee rect:last-child{fill:#287e64}
.wipe-trail{fill:none;stroke:#fff;stroke-width:11;stroke-linecap:round;opacity:0}
.bucket{fill:#42a879}.bucket-handle{fill:none;stroke:#164d40;stroke-width:4}
.bottle{fill:#4bad7e}.sprayer{fill:#173f35}
.bubbles circle{fill:#fff;stroke:#bfe7e5;stroke-width:2;opacity:.25}

/* subtle lift / glow */
.final-service-icon:hover,
.final-service-icon:focus-visible,
.final-service-icon.is-active{
  filter:drop-shadow(0 10px 14px rgba(55,164,127,.18));
}
.final-service-icon:hover svg,
.final-service-icon:focus-visible svg,
.final-service-icon.is-active svg{
  animation:iconLift .65s ease both;
}
@keyframes iconLift{
  0%{transform:translateY(0)}
  45%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}

/* OFFICE */
[data-icon="office"]:hover .sparkle,
[data-icon="office"]:focus-visible .sparkle,
[data-icon="office"].is-active .sparkle{
  animation:spark .8s ease both;
}
[data-icon="office"] .s2{animation-delay:.12s}
@keyframes spark{
  0%{opacity:0;transform:scale(.2) rotate(-20deg)}
  45%{opacity:1;transform:scale(1.15) rotate(10deg)}
  100%{opacity:0;transform:scale(.6) rotate(20deg)}
}

/* INDUSTRY */
[data-icon="industry"]:hover .smoke-puff,
[data-icon="industry"]:focus-visible .smoke-puff,
[data-icon="industry"].is-active .smoke-puff{
  animation:smoke 1.3s ease-out both;
}
[data-icon="industry"] .p2{animation-delay:.12s}
[data-icon="industry"] .p3{animation-delay:.22s}
@keyframes smoke{
  0%{opacity:0;transform:translateY(3px) scale(.7)}
  25%{opacity:.72}
  100%{opacity:0;transform:translateY(-18px) translateX(5px) scale(1.35)}
}

/* HOTEL */
[data-icon="hotel"]:hover .hotel-sparkle,
[data-icon="hotel"]:focus-visible .hotel-sparkle,
[data-icon="hotel"].is-active .hotel-sparkle{animation:spark .9s ease both}
[data-icon="hotel"]:hover .awning,
[data-icon="hotel"]:focus-visible .awning,
[data-icon="hotel"].is-active .awning{
  transform-box:fill-box; transform-origin:center;
  animation:awning .65s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes awning{
  0%{transform:scaleX(1)}
  45%{transform:scaleX(1.1)}
  100%{transform:scaleX(1)}
}

/* MEDICAL */
[data-icon="medical"]:hover .r1,
[data-icon="medical"]:focus-visible .r1,
[data-icon="medical"].is-active .r1{animation:pulse 1s ease-out both}
[data-icon="medical"]:hover .r2,
[data-icon="medical"]:focus-visible .r2,
[data-icon="medical"].is-active .r2{animation:pulse 1s .12s ease-out both}
@keyframes pulse{
  0%{opacity:.55;transform:scale(.65);transform-origin:80px 70px}
  100%{opacity:0;transform:scale(1.18);transform-origin:80px 70px}
}

/* WINDOW */
[data-icon="window"] .squeegee{transform-origin:94px 88px;transform-box:view-box}
[data-icon="window"]:hover .squeegee,
[data-icon="window"]:focus-visible .squeegee,
[data-icon="window"].is-active .squeegee{
  animation:wipe .9s cubic-bezier(.3,.7,.2,1) both;
}
[data-icon="window"]:hover .wipe-trail,
[data-icon="window"]:focus-visible .wipe-trail,
[data-icon="window"].is-active .wipe-trail{
  animation:trail .9s ease both;
}
[data-icon="window"]:hover .w1,
[data-icon="window"]:focus-visible .w1,
[data-icon="window"].is-active .w1{animation:spark .8s .35s ease both}
@keyframes wipe{
  0%{transform:translate(-9px,8px) rotate(-5deg)}
  55%{transform:translate(10px,-8px) rotate(4deg)}
  100%{transform:translate(0,0) rotate(0)}
}
@keyframes trail{
  0%,15%{opacity:0;stroke-dasharray:0 120}
  55%{opacity:.82;stroke-dasharray:90 120}
  100%{opacity:0;stroke-dasharray:120 120}
}

/* DEEP CLEAN */
[data-icon="deep"]:hover .b,
[data-icon="deep"]:focus-visible .b,
[data-icon="deep"].is-active .b{
  animation:bubble 1.2s ease-out both;
}
[data-icon="deep"] .b2{animation-delay:.08s}
[data-icon="deep"] .b3{animation-delay:.16s}
[data-icon="deep"] .b4{animation-delay:.23s}
@keyframes bubble{
  0%{opacity:.1;transform:translateY(9px) scale(.6)}
  35%{opacity:1}
  100%{opacity:0;transform:translateY(-17px) scale(1.1)}
}

@media (max-width:900px){
  .icon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  .final-service-icon *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}